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

package/dist/custom-elements.json

@@ -4,745 +4,254 @@
   "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",
-              "type": {
-                "text": "TAccordionAppearance"
-              },
-              "parsedType": {
-                "text": "'filled' | 'ghost'"
-              }
-            },
-            {
-              "name": "expand-all",
-              "fieldName": "expandAll",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "no-animation",
-              "fieldName": "noAnimation",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "multiple",
-              "fieldName": "multiple",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "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-avatar.js",
+      "path": "components/bq-accordion.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>",
-          "name": "BqAvatar",
+          "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>",
+          "name": "BqAccordion",
           "cssProperties": [
             {
-              "description": "Avatar background color",
-              "name": "--bq-avatar--background"
-            },
-            {
-              "description": "Avatar border color",
-              "name": "--bq-avatar--border-color"
-            },
-            {
-              "description": "Avatar border style",
-              "name": "--bq-avatar--border-style"
-            },
-            {
-              "description": "Avatar border width",
-              "name": "--bq-avatar--border-width"
-            },
-            {
-              "description": "Avatar border radius for circle & any size",
-              "name": "--bq-avatar--border-radius-circle"
-            },
-            {
-              "description": "Avatar border radius for square & size xsmall",
-              "name": "--bq-avatar--border-radius-squareXs"
-            },
-            {
-              "description": "Avatar border radius for square & size small",
-              "name": "--bq-avatar--border-radius-squareS"
-            },
-            {
-              "description": "Avatar border radius for square & size medium/large",
-              "name": "--bq-avatar--border-radius-squareM"
-            },
-            {
-              "description": "Avatar xsmall size",
-              "name": "--bq-avatar--size-xsmall"
-            },
-            {
-              "description": "Avatar small size",
-              "name": "--bq-avatar--size-small"
-            },
-            {
-              "description": "Avatar medium size",
-              "name": "--bq-avatar--size-medium"
-            },
-            {
-              "description": "Avatar large size",
-              "name": "--bq-avatar--size-large"
-            },
-            {
-              "description": "Badge top position shape square",
-              "name": "--bq-avatar--badge-top-square"
-            },
-            {
-              "description": "Badge left position shape square",
-              "name": "--bq-avatar--badge-left-square"
-            },
-            {
-              "description": "Badge top position shape circle",
-              "name": "--bq-avatar--badge-top-circle"
-            },
-            {
-              "description": "Badge left position shape circle",
-              "name": "--bq-avatar--badge-left-circle"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The `<image>` tag element that load the image source.",
-              "name": "img"
-            },
-            {
-              "description": "The `<span>` tag element that rendered the `Initials` text string.",
-              "name": "text"
-            },
-            {
-              "description": "The container that wraps the badge slot element.",
-              "name": "badge"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.",
-              "name": "badge"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "trimmedInitials",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqAvatarElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "altText",
-              "type": {
-                "text": "string"
-              },
-              "description": "Alternate text for the avatar image if the image cannot be displayed"
-            },
-            {
-              "kind": "field",
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "description": "The image source to load on the avatar (this can be also a base64 encoded image)"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "description": "A text to use for describing the avatar on assistive devices"
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "description": "The text to display on avatar"
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "TAvatarShape"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar",
-              "parsedType": {
-                "text": "'circle' | 'square'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TAvatarSize"
-              },
-              "default": "'medium'",
-              "description": "The size of the avatar",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'xsmall' | 'large'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleImagePropChange"
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "onInitialsChange"
-            },
-            {
-              "kind": "field",
-              "name": "onImageError",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "trimInitialsBasedOnSize",
-              "privacy": "private"
+              "description": "Accordion small vertical padding",
+              "name": "--bq-accordion--small-padding-y"
             },
             {
-              "kind": "field",
-              "name": "getIndex",
-              "privacy": "private"
+              "description": "Accordion small start padding",
+              "name": "--bq-accordion--small-padding-start"
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Alternate text for the avatar image if the image cannot be displayed.",
-              "name": "alt-text"
+              "description": "Accordion small end padding",
+              "name": "--bq-accordion--small-padding-end"
             },
             {
-              "type": {
-                "text": "string"
-              },
-              "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
-              "name": "image"
+              "description": "Accordion small gap distance between suffix, title and prefix",
+              "name": "--bq-accordion--small-padding-gap"
             },
             {
-              "type": {
-                "text": "string"
-              },
-              "description": "A text to use for describing the avatar on assistive devices.",
-              "name": "label"
+              "description": "Accordion small border radius",
+              "name": "--bq-accordion--small-radius"
             },
             {
-              "type": {
-                "text": "string"
-              },
-              "description": "The text to display on avatar.",
-              "name": "initials"
+              "description": "Accordion medium vertical padding",
+              "name": "--bq-accordion--medium-padding-y"
             },
             {
-              "type": {
-                "text": "\"circle\" | \"square\""
-              },
-              "description": "The shape of the avatar.",
-              "name": "shape"
+              "description": "Accordion medium start padding",
+              "name": "--bq-accordion--medium-padding-start"
             },
             {
-              "type": {
-                "text": "\"xsmall\" | \"small\" | \"medium\" | \"large\""
-              },
-              "description": "The size of the avatar.",
-              "name": "size"
+              "description": "Accordion medium end padding",
+              "name": "--bq-accordion--medium-padding-end"
             },
             {
-              "name": "alt-text",
-              "fieldName": "altText",
-              "type": {
-                "text": "string"
-              }
+              "description": "Accordion medium gap distance between suffix, title and prefix",
+              "name": "--bq-accordion--medium-padding-gap"
             },
             {
-              "name": "image",
-              "fieldName": "image",
-              "type": {
-                "text": "string"
-              }
+              "description": "Accordion medium border radius",
+              "name": "--bq-accordion--medium-radius"
             },
             {
-              "name": "label",
-              "fieldName": "label",
-              "type": {
-                "text": "string"
-              }
+              "description": "Accordion collapsed border color",
+              "name": "--bq-accordion--collapsed-border-color"
             },
             {
-              "name": "initials",
-              "fieldName": "initials",
-              "type": {
-                "text": "string"
-              }
+              "description": "Accordion collapsed border style",
+              "name": "--bq-accordion--collapsed-border-style"
             },
             {
-              "name": "shape",
-              "fieldName": "shape",
-              "type": {
-                "text": "TAvatarShape"
-              },
-              "parsedType": {
-                "text": "'circle' | 'square'"
-              }
+              "description": "Accordion collapsed border width",
+              "name": "--bq-accordion--collapsed-border-width"
             },
             {
-              "name": "size",
-              "fieldName": "size",
-              "type": {
-                "text": "TAvatarSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium' | 'xsmall' | 'large'"
-              }
-            }
-          ],
-          "tagName": "bq-avatar",
-          "csspart": [
-            {
-              "name": "base",
-              "description": "The component's internal wrapper."
+              "description": "Accordion expanded border color",
+              "name": "--bq-accordion--expanded-border-color"
             },
             {
-              "name": "img",
-              "description": "The `<image>` tag element that load the image source."
+              "description": "Accordion expanded border style",
+              "name": "--bq-accordion--expanded-border-style"
             },
             {
-              "name": "text",
-              "description": "The `<span>` tag element that rendered the `Initials` text string."
+              "description": "Accordion expanded border width",
+              "name": "--bq-accordion--expanded-border-width"
             },
             {
-              "name": "badge",
-              "description": "The container that wraps the badge slot element."
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqAvatar",
-          "declaration": {
-            "name": "BqAvatar",
-            "module": "components/bq-avatar.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-avatar",
-          "declaration": {
-            "name": "BqAvatar",
-            "module": "components/bq-avatar.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": "Accordion filled collapsed header background",
+              "name": "--bq-accordion--filled-collapsed-background"
+            },
             {
-              "description": "The alert background color",
-              "name": "--bq-alert--background"
+              "description": "Accordion filled collapsed header text color",
+              "name": "--bq-accordion--filled-collapsed-text-color"
             },
             {
-              "description": "The alert border radius",
-              "name": "--bq-alert--border-radius"
+              "description": "Accordion filled expanded header background",
+              "name": "--bq-accordion--filled-expanded-background"
             },
             {
-              "description": "The alert content and footer gap",
-              "name": "--bq-alert--content-footer-gap"
+              "description": "Accordion filled expanded header color on hover",
+              "name": "--bq-accordion--filled-expanded-collapsed-hover"
             },
             {
-              "description": "The alert title and body gap",
-              "name": "--bq-alert--title-body-gap"
+              "description": "Accordion filled expanded header text color",
+              "name": "--bq-accordion--filled-expanded-text-color"
             },
             {
-              "description": "The alert border color",
-              "name": "--bq-alert--border-color"
+              "description": "Accordion ghost collapsed header background",
+              "name": "--bq-accordion--ghost-collapsed-background"
             },
             {
-              "description": "The alert border style",
-              "name": "--bq-alert--border-style"
+              "description": "Accordion ghost collapsed header text color",
+              "name": "--bq-accordion--ghost-collapsed-text-color"
             },
             {
-              "description": "The alert border width",
-              "name": "--bq-alert--border-width"
+              "description": "Accordion ghost expanded header background",
+              "name": "--bq-accordion--ghost-expanded-background"
             },
             {
-              "description": "The alert background color for info type",
-              "name": "--bq-alert--background-info"
+              "description": "Accordion ghost expanded header color on hover",
+              "name": "--bq-accordion--ghost-expanded-collapsed-hover"
             },
             {
-              "description": "The alert background color for success type",
-              "name": "--bq-alert--background-success"
+              "description": "Accordion ghost expanded header text color",
+              "name": "--bq-accordion--ghost-expanded-text-color"
             },
             {
-              "description": "The alert background color for warning type",
-              "name": "--bq-alert--background-warning"
+              "description": "Accordion filled panel border color",
+              "name": "--bq-accordion--panel-filled-border-color"
             },
             {
-              "description": "The alert background color for error type",
-              "name": "--bq-alert--background-error"
+              "description": "Accordion filled panel border style",
+              "name": "--bq-accordion--panel-filled-border-style"
             },
             {
-              "description": "The alert border color for info type",
-              "name": "--bq-alert--border-info"
+              "description": "Accordion filled panel border width",
+              "name": "--bq-accordion--panel-filled-border-width"
             },
             {
-              "description": "The alert border color for success type",
-              "name": "--bq-alert--border-success"
+              "description": "Accordion small filled panel vertical padding",
+              "name": "--bq-accordion--panel-small-filled-padding-y"
             },
             {
-              "description": "The alert border color for warning type",
-              "name": "--bq-alert--border-warning"
+              "description": "Accordion small filled panel start padding",
+              "name": "--bq-accordion--panel-small-filled-padding-start"
             },
             {
-              "description": "The alert border color for error type",
-              "name": "--bq-alert--border-error"
+              "description": "Accordion small filled panel end padding",
+              "name": "--bq-accordion--panel-small-filled-padding-end"
             },
             {
-              "description": "The alert icon color for info type",
-              "name": "--bq-alert--icon-color-info"
+              "description": "Accordion medium filled panel vertical padding",
+              "name": "--bq-accordion--panel-medium-filled-padding-y"
             },
             {
-              "description": "The alert icon color for success type",
-              "name": "--bq-alert--icon-color-success"
+              "description": "Accordion medium filled panel start padding",
+              "name": "--bq-accordion--panel-medium-filled-padding-start"
             },
             {
-              "description": "The alert icon color for warning type",
-              "name": "--bq-alert--icon-color-warning"
+              "description": "Accordion medium filled panel end padding",
+              "name": "--bq-accordion--panel-medium-filled-padding-end"
             },
             {
-              "description": "The alert icon color for error type",
-              "name": "--bq-alert--icon-color-error"
+              "description": "Accordion ghost panel border color",
+              "name": "--bq-accordion--panel-ghost-border-color"
             },
             {
-              "description": "The alert padding",
-              "name": "--bq-alert--padding"
+              "description": "Accordion ghost panel border style",
+              "name": "--bq-accordion--panel-ghost-border-style"
             },
             {
-              "description": "The alert min width",
-              "name": "--bq-alert--min-width"
-            }
-          ],
-          "cssParts": [
+              "description": "Accordion ghost panel border width",
+              "name": "--bq-accordion--panel-ghost-border-width"
+            },
             {
-              "description": "The `<div>` container of the predefined bq-icon component",
-              "name": "base"
+              "description": "Accordion small ghost panel vertical padding",
+              "name": "--bq-accordion--panel-small-ghost-padding-y"
             },
             {
-              "description": "The container `<div>` that wraps the alert description content",
-              "name": "body"
+              "description": "Accordion small ghost panel start padding",
+              "name": "--bq-accordion--panel-small-ghost-padding-start"
             },
             {
-              "description": "The `bq-button` used to close the alert",
-              "name": "btn-close"
+              "description": "Accordion small ghost panel end padding",
+              "name": "--bq-accordion--panel-small-ghost-padding-end"
             },
             {
-              "description": "The container `<div>` that wraps all the alert content (title, description, footer)",
-              "name": "content"
+              "description": "Accordion medium ghost panel vertical padding",
+              "name": "--bq-accordion--panel-medium-ghost-padding-y"
             },
             {
-              "description": "The container `<div>` that wraps the alert footer content",
-              "name": "footer"
+              "description": "Accordion medium ghost panel start padding",
+              "name": "--bq-accordion--panel-medium-ghost-padding-start"
             },
             {
-              "description": "The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)",
-              "name": "icon"
+              "description": "Accordion medium ghost panel end padding",
+              "name": "--bq-accordion--panel-medium-ghost-padding-end"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The `<details>` that holds the accordion content",
+              "name": "base"
             },
             {
-              "description": "The container `<div>` that wraps the icon element",
-              "name": "icon-outline"
+              "description": "The `<summary>` that holds the accordion header content",
+              "name": "header"
             },
             {
-              "description": "The container `<div>` that wraps the alert main content (title, description)",
-              "name": "main"
+              "description": "The `<div>` that holds the accordion panel content",
+              "name": "panel"
             },
             {
-              "description": "The `<svg>` element of the predefined bq-icon component",
-              "name": "svg"
+              "description": "The `<div>` that holds the accordion prefix content",
+              "name": "prefix"
             },
             {
-              "description": "The container `<div>` that wraps the alert title content",
-              "name": "title"
+              "description": "The `<div>` that holds the accordion suffix content",
+              "name": "suffix"
             },
             {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
+              "description": "The `<div>` that holds the accordion header text content",
+              "name": "text"
             }
           ],
           "slots": [
             {
-              "description": "The alert title content (no slot name required)",
+              "description": "The accordion panel content",
               "name": ""
             },
             {
-              "description": "The alert description content",
-              "name": "body"
+              "description": "The accordion collapse icon",
+              "name": "collapse"
+            },
+            {
+              "description": "The accordion expand icon",
+              "name": "expand"
             },
             {
-              "description": "The alert footer content",
-              "name": "footer"
+              "description": "The accordion header content",
+              "name": "header"
             },
             {
-              "description": "The predefined icon based on the alert type (info, success, warning, error, default)",
-              "name": "icon"
+              "description": "The accordion prefix content (icon or avatar)",
+              "name": "prefix"
             },
             {
-              "description": "The close button of the alert",
-              "name": "btn-close"
+              "description": "The accordion suffix content (icon or avatar)",
+              "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "autoDismissDebounce",
+              "name": "accordion",
               "type": {
-                "text": "TDebounce<void>"
+                "text": "Accordion"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "bodyElem",
+              "name": "prefixElem",
               "type": {
                 "text": "HTMLDivElement"
               },
@@ -750,7 +259,7 @@
             },
             {
               "kind": "field",
-              "name": "footerElem",
+              "name": "suffixElem",
               "type": {
                 "text": "HTMLDivElement"
               },
@@ -758,9 +267,9 @@
             },
             {
               "kind": "field",
-              "name": "alertElement",
+              "name": "detailsElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLDetailsElement"
               },
               "privacy": "private"
             },
@@ -768,12 +277,12 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqAlertElement"
+                "text": "HTMLBqAccordionElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasContent",
+              "name": "hasPrefix",
               "type": {
                 "text": "boolean"
               },
@@ -782,7 +291,7 @@
             },
             {
               "kind": "field",
-              "name": "hasFooter",
+              "name": "hasSuffix",
               "type": {
                 "text": "boolean"
               },
@@ -791,122 +300,105 @@
             },
             {
               "kind": "field",
-              "name": "autoDismiss",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the alert will automatically hide after the specified amount of time"
-            },
-            {
-              "kind": "field",
-              "name": "border",
+              "name": "appearance",
               "type": {
-                "text": "TAlertBorderRadius"
+                "text": "TAccordionAppearance"
               },
-              "default": "'s'",
-              "description": "The corner radius of the alert component",
+              "default": "'filled'",
+              "description": "The appearance style of the Accordion",
               "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+                "text": "'filled' | 'ghost'"
               }
             },
             {
               "kind": "field",
-              "name": "disableClose",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the close button at the top right of the alert won't be shown"
+              "default": "false",
+              "description": "If true, the Accordion is disabled"
             },
             {
               "kind": "field",
-              "name": "hideIcon",
+              "name": "expanded",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the alert icon won't be shown"
+              "default": "false",
+              "description": "If true, the Accordion is expanded"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "noAnimation",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the alert will be shown"
+              "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": "time",
+              "name": "rotate",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "3000",
-              "description": "The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`"
+              "default": "false",
+              "description": "If true, the Accordion expand icon is rotate 180deg when expanded"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "size",
               "type": {
-                "text": "TAlertType"
+                "text": "TAccordionSize"
               },
-              "default": "'default'",
-              "description": "Type of Alert",
+              "default": "'medium'",
+              "description": "The size of the Accordion",
               "parsedType": {
-                "text": "'info' | 'success' | 'warning' | 'error' | 'default'"
+                "text": "'small' | 'medium'"
               }
             },
-            {
-              "kind": "field",
-              "name": "sticky",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the alert component will remain fixed at the top of the page, occupying the full viewport"
-            },
             {
               "kind": "method",
-              "name": "handleTimeout"
+              "name": "checkPropValues"
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "handleExpandedChange"
             },
             {
               "kind": "method",
-              "name": "checkPropValues"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Method to be called to hide the alert component"
+              "name": "handleJsAnimation"
             },
             {
               "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
+              "name": "onAccordionTransitionEnd",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
                 }
-              },
-              "description": "Method to be called to show the alert component"
+              ]
             },
             {
               "kind": "field",
-              "name": "handleHide",
+              "name": "handleClick",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleShow",
+              "name": "handleFocus",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleTransitionEnd",
+              "name": "handleBlur",
               "privacy": "private"
             },
             {
@@ -916,10 +408,13 @@
             },
             {
               "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "string"
-              },
+              "name": "open",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isCssInterpolateSizeSupported",
               "privacy": "private",
               "readonly": true
             },
@@ -930,184 +425,183 @@
           ],
           "events": [
             {
-              "description": "Callback handler to be called when the alert is hidden",
-              "name": "bqHide"
+              "description": "Handler to be called when the accordion is opened",
+              "name": "bqOpen"
             },
             {
-              "description": "Callback handler to be called when the alert is shown",
-              "name": "bqShow"
+              "description": "Handler to be called after the accordion is opened",
+              "name": "bqAfterOpen"
             },
             {
-              "description": "Callback handler to be called after the alert has been shown",
-              "name": "bqAfterShow"
+              "description": "Handler to be called when the accordion is closed",
+              "name": "bqClose"
             },
             {
-              "description": "Callback handler to be called after the alert has been hidden",
-              "name": "bqAfterHide"
+              "description": "Handler to be called after the accordion is closed",
+              "name": "bqAfterClose"
             },
             {
-              "name": "bqHide",
+              "description": "Handler to be called when the accordion gets focus",
+              "name": "bqFocus"
+            },
+            {
+              "description": "Handler to be called when the accordion is clicked",
+              "name": "bqClick"
+            },
+            {
+              "description": "Handler to be called when the accordion loses focus",
+              "name": "bqBlur"
+            },
+            {
+              "name": "bqBlur",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "Callback handler to be called when the alert is hidden"
+              "description": "Handler to be called when the accordion loses focus"
             },
             {
-              "name": "bqShow",
+              "name": "bqFocus",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "Callback handler to be called when the alert is shown"
+              "description": "Handler to be called when the accordion gets focus"
             },
             {
-              "name": "bqAfterShow",
+              "name": "bqOpen",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "Callback handler to be called after the alert has been shown"
+              "description": "Handler to be called when the accordion is opened"
             },
             {
-              "name": "bqAfterHide",
+              "name": "bqAfterOpen",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "Callback handler to be called after the alert has been hidden"
-            }
-          ],
-          "attributes": [
+              "description": "Handler to be called after the accordion is opened"
+            },
             {
+              "name": "bqClose",
               "type": {
-                "text": "boolean"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "If true, the alert will automatically hide after the specified amount of time",
-              "name": "auto-dismiss",
-              "default": "false"
+              "description": "Handler to be called when the accordion is closed"
             },
             {
+              "name": "bqAfterClose",
               "type": {
-                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "The corner radius of the alert component",
-              "name": "border",
-              "default": "'s'"
+              "description": "Handler to be called after the accordion is closed"
             },
             {
+              "name": "bqClick",
               "type": {
-                "text": "boolean"
+                "text": "EventEmitter<HTMLBqAccordionElement>"
               },
-              "description": "If true, the close button at the top right of the alert won't be shown",
-              "name": "disable-close",
-              "default": "false"
-            },
+              "description": "Handler to be called when the accordion is clicked"
+            }
+          ],
+          "attributes": [
             {
               "type": {
-                "text": "boolean"
+                "text": "\"filled\" | \"ghost\""
               },
-              "description": "If true, the alert icon won't be shown",
-              "name": "hide-icon",
-              "default": "false"
+              "description": "The appearance style of the Accordion",
+              "name": "appearance",
+              "default": "\"filled\""
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the alert will be shown",
-              "name": "open",
+              "description": "If true, the Accordion is disabled",
+              "name": "disabled",
               "default": "false"
             },
             {
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`",
-              "name": "time",
-              "default": "3000"
+              "description": "If true, the Accordion is expanded",
+              "name": "expanded",
+              "default": "false"
             },
             {
               "type": {
-                "text": "\"info\" | \"success\" | \"warning\" | \"error\" | \"default\""
+                "text": "boolean"
               },
-              "description": "Type of Alert",
-              "name": "type",
-              "default": "'default'"
+              "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, the alert component will remain fixed at the top of the page, occupying the full viewport",
-              "name": "sticky",
+              "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
+              "name": "rotate",
               "default": "false"
             },
             {
-              "name": "auto-dismiss",
-              "fieldName": "autoDismiss",
               "type": {
-                "text": "boolean"
-              }
+                "text": "\"small\" | \"medium\""
+              },
+              "description": "The size of the the Accordion",
+              "name": "size",
+              "default": "\"medium\""
             },
             {
-              "name": "border",
-              "fieldName": "border",
+              "name": "appearance",
+              "fieldName": "appearance",
               "type": {
-                "text": "TAlertBorderRadius"
+                "text": "TAccordionAppearance"
               },
               "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+                "text": "'filled' | 'ghost'"
               }
             },
             {
-              "name": "disable-close",
-              "fieldName": "disableClose",
+              "name": "disabled",
+              "fieldName": "disabled",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "hide-icon",
-              "fieldName": "hideIcon",
+              "name": "expanded",
+              "fieldName": "expanded",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "open",
-              "fieldName": "open",
+              "name": "no-animation",
+              "fieldName": "noAnimation",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "time",
-              "fieldName": "time",
+              "name": "rotate",
+              "fieldName": "rotate",
               "type": {
-                "text": "number"
+                "text": "boolean"
               }
             },
             {
-              "name": "type",
-              "fieldName": "type",
+              "name": "size",
+              "fieldName": "size",
               "type": {
-                "text": "TAlertType"
+                "text": "TAccordionSize"
               },
               "parsedType": {
-                "text": "'info' | 'success' | 'warning' | 'error' | 'default'"
-              }
-            },
-            {
-              "name": "sticky",
-              "fieldName": "sticky",
-              "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium'"
               }
             }
           ],
-          "tagName": "bq-alert",
+          "tagName": "bq-accordion",
           "dependencies": [
-            {
-              "name": "bq-button",
-              "description": ""
-            },
             {
               "name": "bq-icon",
               "description": ""
@@ -1116,47 +610,27 @@
           "csspart": [
             {
               "name": "base",
-              "description": "The `<div>` container of the predefined bq-icon component"
-            },
-            {
-              "name": "body",
-              "description": "The container `<div>` that wraps the alert description content"
-            },
-            {
-              "name": "btn-close",
-              "description": "The `bq-button` used to close the alert"
-            },
-            {
-              "name": "content",
-              "description": "The container `<div>` that wraps all the alert content (title, description, footer)"
-            },
-            {
-              "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 based on the alert type (info, success, warning, error, default)"
+              "description": "The `<details>` that holds the accordion content"
             },
             {
-              "name": "icon-outline",
-              "description": "The container `<div>` that wraps the icon element"
+              "name": "header",
+              "description": "The `<summary>` that holds the accordion header content"
             },
             {
-              "name": "main",
-              "description": "The container `<div>` that wraps the alert main content (title, description)"
+              "name": "panel",
+              "description": "The `<div>` that holds the accordion panel content"
             },
             {
-              "name": "svg",
-              "description": "The `<svg>` element of the predefined bq-icon component"
+              "name": "prefix",
+              "description": "The `<div>` that holds the accordion prefix content"
             },
             {
-              "name": "title",
-              "description": "The container `<div>` that wraps the alert title content"
+              "name": "suffix",
+              "description": "The `<div>` that holds the accordion suffix content"
             },
             {
-              "name": "wrapper",
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+              "name": "text",
+              "description": "The `<div>` that holds the accordion header text content"
             }
           ],
           "customElement": true
@@ -1165,317 +639,667 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqAlert",
+          "name": "BqAccordion",
           "declaration": {
-            "name": "BqAlert",
-            "module": "components/bq-alert.js"
+            "name": "BqAccordion",
+            "module": "components/bq-accordion.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-alert",
+          "name": "bq-accordion",
           "declaration": {
-            "name": "BqAlert",
-            "module": "components/bq-alert.js"
+            "name": "BqAccordion",
+            "module": "components/bq-accordion.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-accordion.js",
+      "path": "components/bq-alert.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>",
-          "name": "BqAccordion",
+          "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": "Accordion small vertical padding",
-              "name": "--bq-accordion--small-padding-y"
+              "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"
+            },
+            {
+              "description": "The alert title and body gap",
+              "name": "--bq-alert--title-body-gap"
+            },
+            {
+              "description": "The alert border color",
+              "name": "--bq-alert--border-color"
+            },
+            {
+              "description": "The alert border style",
+              "name": "--bq-alert--border-style"
+            },
+            {
+              "description": "The alert border width",
+              "name": "--bq-alert--border-width"
+            },
+            {
+              "description": "The alert background color for info type",
+              "name": "--bq-alert--background-info"
+            },
+            {
+              "description": "The alert background color for success type",
+              "name": "--bq-alert--background-success"
+            },
+            {
+              "description": "The alert background color for warning type",
+              "name": "--bq-alert--background-warning"
+            },
+            {
+              "description": "The alert background color for error type",
+              "name": "--bq-alert--background-error"
+            },
+            {
+              "description": "The alert border color for info type",
+              "name": "--bq-alert--border-info"
+            },
+            {
+              "description": "The alert border color for success type",
+              "name": "--bq-alert--border-success"
+            },
+            {
+              "description": "The alert border color for warning type",
+              "name": "--bq-alert--border-warning"
+            },
+            {
+              "description": "The alert border color for error type",
+              "name": "--bq-alert--border-error"
+            },
+            {
+              "description": "The alert icon color for info type",
+              "name": "--bq-alert--icon-color-info"
+            },
+            {
+              "description": "The alert icon color for success type",
+              "name": "--bq-alert--icon-color-success"
+            },
+            {
+              "description": "The alert icon color for warning type",
+              "name": "--bq-alert--icon-color-warning"
+            },
+            {
+              "description": "The alert icon color for error type",
+              "name": "--bq-alert--icon-color-error"
+            },
+            {
+              "description": "The alert padding",
+              "name": "--bq-alert--padding"
+            },
+            {
+              "description": "The alert min width",
+              "name": "--bq-alert--min-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The `<div>` container of the predefined bq-icon component",
+              "name": "base"
+            },
+            {
+              "description": "The container `<div>` that wraps the alert description content",
+              "name": "body"
+            },
+            {
+              "description": "The `bq-button` used to close the alert",
+              "name": "btn-close"
+            },
+            {
+              "description": "The container `<div>` that wraps all the alert content (title, description, footer)",
+              "name": "content"
+            },
+            {
+              "description": "The container `<div>` that wraps the alert footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)",
+              "name": "icon"
+            },
+            {
+              "description": "The container `<div>` that wraps the icon element",
+              "name": "icon-outline"
+            },
+            {
+              "description": "The container `<div>` that wraps the alert main content (title, description)",
+              "name": "main"
+            },
+            {
+              "description": "The `<svg>` element of the predefined bq-icon component",
+              "name": "svg"
+            },
+            {
+              "description": "The container `<div>` that wraps the alert title content",
+              "name": "title"
+            },
+            {
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The alert title content (no slot name required)",
+              "name": ""
+            },
+            {
+              "description": "The alert description content",
+              "name": "body"
+            },
+            {
+              "description": "The alert footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The predefined icon based on the alert type (info, success, warning, error, default)",
+              "name": "icon"
+            },
+            {
+              "description": "The close button of the alert",
+              "name": "btn-close"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "autoDismissDebounce",
+              "type": {
+                "text": "TDebounce<void>"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Accordion small start padding",
-              "name": "--bq-accordion--small-padding-start"
+              "kind": "field",
+              "name": "bodyElem",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Accordion small end padding",
-              "name": "--bq-accordion--small-padding-end"
+              "kind": "field",
+              "name": "footerElem",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Accordion small gap distance between suffix, title and prefix",
-              "name": "--bq-accordion--small-padding-gap"
+              "kind": "field",
+              "name": "alertElement",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Accordion small border radius",
-              "name": "--bq-accordion--small-radius"
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqAlertElement"
+              }
             },
             {
-              "description": "Accordion medium vertical padding",
-              "name": "--bq-accordion--medium-padding-y"
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "description": "Accordion medium start padding",
-              "name": "--bq-accordion--medium-padding-start"
+              "kind": "field",
+              "name": "hasFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "description": "Accordion medium end padding",
-              "name": "--bq-accordion--medium-padding-end"
+              "kind": "field",
+              "name": "autoDismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert will automatically hide after the specified amount of time"
             },
             {
-              "description": "Accordion medium gap distance between suffix, title and prefix",
-              "name": "--bq-accordion--medium-padding-gap"
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "TAlertBorderRadius"
+              },
+              "default": "'s'",
+              "description": "The corner radius of the alert component",
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+              }
             },
             {
-              "description": "Accordion medium border radius",
-              "name": "--bq-accordion--medium-radius"
+              "kind": "field",
+              "name": "disableClose",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the close button at the top right of the alert won't be shown"
             },
             {
-              "description": "Accordion collapsed border color",
-              "name": "--bq-accordion--collapsed-border-color"
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert icon won't be shown"
             },
             {
-              "description": "Accordion collapsed border style",
-              "name": "--bq-accordion--collapsed-border-style"
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert will be shown"
             },
             {
-              "description": "Accordion collapsed border width",
-              "name": "--bq-accordion--collapsed-border-width"
+              "kind": "field",
+              "name": "time",
+              "type": {
+                "text": "number"
+              },
+              "default": "3000",
+              "description": "The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`"
             },
             {
-              "description": "Accordion expanded border color",
-              "name": "--bq-accordion--expanded-border-color"
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TAlertType"
+              },
+              "default": "'default'",
+              "description": "Type of Alert",
+              "parsedType": {
+                "text": "'info' | 'success' | 'warning' | 'error' | 'default'"
+              }
             },
             {
-              "description": "Accordion expanded border style",
-              "name": "--bq-accordion--expanded-border-style"
+              "kind": "field",
+              "name": "sticky",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert component will remain fixed at the top of the page, occupying the full viewport"
             },
             {
-              "description": "Accordion expanded border width",
-              "name": "--bq-accordion--expanded-border-width"
+              "kind": "method",
+              "name": "handleTimeout"
             },
             {
-              "description": "Accordion filled collapsed header background",
-              "name": "--bq-accordion--filled-collapsed-background"
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "description": "Accordion filled collapsed header text color",
-              "name": "--bq-accordion--filled-collapsed-text-color"
+              "kind": "method",
+              "name": "checkPropValues"
             },
             {
-              "description": "Accordion filled expanded header background",
-              "name": "--bq-accordion--filled-expanded-background"
+              "kind": "method",
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Method to be called to hide the alert component"
             },
             {
-              "description": "Accordion filled expanded header color on hover",
-              "name": "--bq-accordion--filled-expanded-collapsed-hover"
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Method to be called to show the alert component"
             },
             {
-              "description": "Accordion filled expanded header text color",
-              "name": "--bq-accordion--filled-expanded-text-color"
+              "kind": "field",
+              "name": "handleHide",
+              "privacy": "private"
             },
             {
-              "description": "Accordion ghost collapsed header background",
-              "name": "--bq-accordion--ghost-collapsed-background"
+              "kind": "field",
+              "name": "handleShow",
+              "privacy": "private"
             },
             {
-              "description": "Accordion ghost collapsed header text color",
-              "name": "--bq-accordion--ghost-collapsed-text-color"
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
             },
             {
-              "description": "Accordion ghost expanded header background",
-              "name": "--bq-accordion--ghost-expanded-background"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
-              "description": "Accordion ghost expanded header color on hover",
-              "name": "--bq-accordion--ghost-expanded-collapsed-hover"
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "description": "Accordion ghost expanded header text color",
-              "name": "--bq-accordion--ghost-expanded-text-color"
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "description": "Callback handler to be called when the alert is hidden",
+              "name": "bqHide"
             },
             {
-              "description": "Accordion filled panel border color",
-              "name": "--bq-accordion--panel-filled-border-color"
+              "description": "Callback handler to be called when the alert is shown",
+              "name": "bqShow"
             },
             {
-              "description": "Accordion filled panel border style",
-              "name": "--bq-accordion--panel-filled-border-style"
+              "description": "Callback handler to be called after the alert has been shown",
+              "name": "bqAfterShow"
             },
             {
-              "description": "Accordion filled panel border width",
-              "name": "--bq-accordion--panel-filled-border-width"
+              "description": "Callback handler to be called after the alert has been hidden",
+              "name": "bqAfterHide"
             },
             {
-              "description": "Accordion small filled panel vertical padding",
-              "name": "--bq-accordion--panel-small-filled-padding-y"
+              "name": "bqHide",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "description": "Callback handler to be called when the alert is hidden"
             },
             {
-              "description": "Accordion small filled panel start padding",
-              "name": "--bq-accordion--panel-small-filled-padding-start"
+              "name": "bqShow",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "description": "Callback handler to be called when the alert is shown"
             },
             {
-              "description": "Accordion small filled panel end padding",
-              "name": "--bq-accordion--panel-small-filled-padding-end"
+              "name": "bqAfterShow",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "description": "Callback handler to be called after the alert has been shown"
+            },
+            {
+              "name": "bqAfterHide",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "description": "Callback handler to be called after the alert has been hidden"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert will automatically hide after the specified amount of time",
+              "name": "auto-dismiss",
+              "default": "false"
             },
             {
-              "description": "Accordion medium filled panel vertical padding",
-              "name": "--bq-accordion--panel-medium-filled-padding-y"
+              "type": {
+                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
+              },
+              "description": "The corner radius of the alert component",
+              "name": "border",
+              "default": "'s'"
             },
             {
-              "description": "Accordion medium filled panel start padding",
-              "name": "--bq-accordion--panel-medium-filled-padding-start"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the close button at the top right of the alert won't be shown",
+              "name": "disable-close",
+              "default": "false"
             },
             {
-              "description": "Accordion medium filled panel end padding",
-              "name": "--bq-accordion--panel-medium-filled-padding-end"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert icon won't be shown",
+              "name": "hide-icon",
+              "default": "false"
             },
             {
-              "description": "Accordion ghost panel border color",
-              "name": "--bq-accordion--panel-ghost-border-color"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert will be shown",
+              "name": "open",
+              "default": "false"
             },
             {
-              "description": "Accordion ghost panel border style",
-              "name": "--bq-accordion--panel-ghost-border-style"
+              "type": {
+                "text": "number"
+              },
+              "description": "The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`",
+              "name": "time",
+              "default": "3000"
             },
             {
-              "description": "Accordion ghost panel border width",
-              "name": "--bq-accordion--panel-ghost-border-width"
+              "type": {
+                "text": "\"info\" | \"success\" | \"warning\" | \"error\" | \"default\""
+              },
+              "description": "Type of Alert",
+              "name": "type",
+              "default": "'default'"
             },
             {
-              "description": "Accordion small ghost panel vertical padding",
-              "name": "--bq-accordion--panel-small-ghost-padding-y"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the alert component will remain fixed at the top of the page, occupying the full viewport",
+              "name": "sticky",
+              "default": "false"
             },
             {
-              "description": "Accordion small ghost panel start padding",
-              "name": "--bq-accordion--panel-small-ghost-padding-start"
+              "name": "auto-dismiss",
+              "fieldName": "autoDismiss",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "description": "Accordion small ghost panel end padding",
-              "name": "--bq-accordion--panel-small-ghost-padding-end"
+              "name": "border",
+              "fieldName": "border",
+              "type": {
+                "text": "TAlertBorderRadius"
+              },
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+              }
             },
             {
-              "description": "Accordion medium ghost panel vertical padding",
-              "name": "--bq-accordion--panel-medium-ghost-padding-y"
+              "name": "disable-close",
+              "fieldName": "disableClose",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "description": "Accordion medium ghost panel start padding",
-              "name": "--bq-accordion--panel-medium-ghost-padding-start"
+              "name": "hide-icon",
+              "fieldName": "hideIcon",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "description": "Accordion medium ghost panel end padding",
-              "name": "--bq-accordion--panel-medium-ghost-padding-end"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The `<details>` that holds the accordion content",
-              "name": "base"
+              "name": "open",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "description": "The `<summary>` that holds the accordion header content",
-              "name": "header"
+              "name": "time",
+              "fieldName": "time",
+              "type": {
+                "text": "number"
+              }
             },
             {
-              "description": "The `<div>` that holds the accordion panel content",
-              "name": "panel"
+              "name": "type",
+              "fieldName": "type",
+              "type": {
+                "text": "TAlertType"
+              },
+              "parsedType": {
+                "text": "'info' | 'success' | 'warning' | 'error' | 'default'"
+              }
             },
             {
-              "description": "The `<div>` that holds the accordion prefix content",
-              "name": "prefix"
-            },
+              "name": "sticky",
+              "fieldName": "sticky",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "tagName": "bq-alert",
+          "dependencies": [
             {
-              "description": "The `<div>` that holds the accordion suffix content",
-              "name": "suffix"
+              "name": "bq-button",
+              "description": ""
             },
             {
-              "description": "The `<div>` that holds the accordion header text content",
-              "name": "text"
+              "name": "bq-icon",
+              "description": ""
             }
           ],
-          "slots": [
+          "csspart": [
             {
-              "description": "The accordion panel content",
-              "name": ""
+              "name": "base",
+              "description": "The `<div>` container of the predefined bq-icon component"
             },
             {
-              "description": "The accordion collapse icon",
-              "name": "collapse"
+              "name": "body",
+              "description": "The container `<div>` that wraps the alert description content"
             },
             {
-              "description": "The accordion expand icon",
-              "name": "expand"
+              "name": "btn-close",
+              "description": "The `bq-button` used to close the alert"
             },
             {
-              "description": "The accordion header content",
-              "name": "header"
+              "name": "content",
+              "description": "The container `<div>` that wraps all the alert content (title, description, footer)"
             },
             {
-              "description": "The accordion prefix content (icon or avatar)",
-              "name": "prefix"
+              "name": "footer",
+              "description": "The container `<div>` that wraps the alert footer content"
             },
             {
-              "description": "The accordion suffix content (icon or avatar)",
-              "name": "suffix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "accordion",
-              "type": {
-                "text": "Accordion"
-              },
-              "privacy": "private"
+              "name": "icon",
+              "description": "The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)"
             },
             {
-              "kind": "field",
-              "name": "prefixElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "name": "icon-outline",
+              "description": "The container `<div>` that wraps the icon element"
             },
             {
-              "kind": "field",
-              "name": "suffixElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "name": "main",
+              "description": "The container `<div>` that wraps the alert main content (title, description)"
             },
             {
-              "kind": "field",
-              "name": "detailsElem",
-              "type": {
-                "text": "HTMLDetailsElement"
-              },
-              "privacy": "private"
+              "name": "svg",
+              "description": "The `<svg>` element of the predefined bq-icon component"
             },
             {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqAccordionElement"
-              }
+              "name": "title",
+              "description": "The container `<div>` that wraps the alert title content"
             },
             {
-              "kind": "field",
-              "name": "hasPrefix",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
+              "name": "wrapper",
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqAlert",
+          "declaration": {
+            "name": "BqAlert",
+            "module": "components/bq-alert.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-alert",
+          "declaration": {
+            "name": "BqAlert",
+            "module": "components/bq-alert.js"
+          }
+        }
+      ]
+    },
+    {
+      "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": "hasSuffix",
+              "name": "el",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "HTMLBqAccordionGroupElement"
+              }
             },
             {
               "kind": "field",
@@ -1484,28 +1308,18 @@
                 "text": "TAccordionAppearance"
               },
               "default": "'filled'",
-              "description": "The appearance style of the Accordion",
+              "description": "The appearance style of accordion to be applied to all accordions",
               "parsedType": {
                 "text": "'filled' | 'ghost'"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the Accordion is disabled"
-            },
-            {
-              "kind": "field",
-              "name": "expanded",
+              "name": "expandAll",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the Accordion is expanded"
+              "description": "If true all accordions are expanded"
             },
             {
               "kind": "field",
@@ -1514,16 +1328,16 @@
                 "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."
+              "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": "rotate",
+              "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the Accordion expand icon is rotate 180deg when expanded"
+              "description": "If true multiple accordions can be expanded at the same time"
             },
             {
               "kind": "field",
@@ -1532,7 +1346,7 @@
                 "text": "TAccordionSize"
               },
               "default": "'medium'",
-              "description": "The size of the Accordion",
+              "description": "The size of accordion to be applied to all accordions",
               "parsedType": {
                 "text": "'small' | 'medium'"
               }
@@ -1543,413 +1357,458 @@
             },
             {
               "kind": "method",
-              "name": "handleExpandedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleJsAnimation"
-            },
-            {
-              "kind": "method",
-              "name": "onAccordionTransitionEnd",
+              "name": "onBqClick",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "CustomEvent<HTMLBqAccordionElement>"
                   }
                 }
               ]
             },
             {
               "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
+              "name": "bqAccordionElements",
+              "type": {
+                "text": "HTMLBqAccordionElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
+              "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\""
             },
             {
-              "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true all accordions are expanded",
+              "name": "expandAll",
+              "default": "false"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "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"
             },
             {
-              "kind": "field",
-              "name": "open",
-              "privacy": "private",
-              "readonly": true
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true multiple accordions can be expanded at the same time",
+              "name": "multiple",
+              "default": "false"
             },
             {
-              "kind": "field",
-              "name": "isCssInterpolateSizeSupported",
-              "privacy": "private",
-              "readonly": true
+              "type": {
+                "text": "\"small\" | \"medium\""
+              },
+              "description": "The size of accordion to be applied to all accordions",
+              "name": "size",
+              "default": "\"medium\""
             },
             {
-              "kind": "method",
-              "name": "render"
+              "name": "appearance",
+              "fieldName": "appearance",
+              "type": {
+                "text": "TAccordionAppearance"
+              },
+              "parsedType": {
+                "text": "'filled' | 'ghost'"
+              }
+            },
+            {
+              "name": "expand-all",
+              "fieldName": "expandAll",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "no-animation",
+              "fieldName": "noAnimation",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "multiple",
+              "fieldName": "multiple",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "type": {
+                "text": "TAccordionSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
             }
           ],
-          "events": [
+          "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-avatar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>",
+          "name": "BqAvatar",
+          "cssProperties": [
             {
-              "description": "Handler to be called when the accordion is opened",
-              "name": "bqOpen"
+              "description": "Avatar background color",
+              "name": "--bq-avatar--background"
             },
             {
-              "description": "Handler to be called after the accordion is opened",
-              "name": "bqAfterOpen"
+              "description": "Avatar border color",
+              "name": "--bq-avatar--border-color"
             },
             {
-              "description": "Handler to be called when the accordion is closed",
-              "name": "bqClose"
+              "description": "Avatar border style",
+              "name": "--bq-avatar--border-style"
             },
             {
-              "description": "Handler to be called after the accordion is closed",
-              "name": "bqAfterClose"
+              "description": "Avatar border width",
+              "name": "--bq-avatar--border-width"
             },
             {
-              "description": "Handler to be called when the accordion gets focus",
-              "name": "bqFocus"
+              "description": "Avatar border radius for circle & any size",
+              "name": "--bq-avatar--border-radius-circle"
             },
             {
-              "description": "Handler to be called when the accordion is clicked",
-              "name": "bqClick"
+              "description": "Avatar border radius for square & size xsmall",
+              "name": "--bq-avatar--border-radius-squareXs"
             },
             {
-              "description": "Handler to be called when the accordion loses focus",
-              "name": "bqBlur"
+              "description": "Avatar border radius for square & size small",
+              "name": "--bq-avatar--border-radius-squareS"
             },
             {
-              "name": "bqBlur",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called when the accordion loses focus"
+              "description": "Avatar border radius for square & size medium/large",
+              "name": "--bq-avatar--border-radius-squareM"
+            },
+            {
+              "description": "Avatar xsmall size",
+              "name": "--bq-avatar--size-xsmall"
+            },
+            {
+              "description": "Avatar small size",
+              "name": "--bq-avatar--size-small"
+            },
+            {
+              "description": "Avatar medium size",
+              "name": "--bq-avatar--size-medium"
+            },
+            {
+              "description": "Avatar large size",
+              "name": "--bq-avatar--size-large"
+            },
+            {
+              "description": "Badge top position shape square",
+              "name": "--bq-avatar--badge-top-square"
+            },
+            {
+              "description": "Badge left position shape square",
+              "name": "--bq-avatar--badge-left-square"
             },
             {
-              "name": "bqFocus",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called when the accordion gets focus"
+              "description": "Badge top position shape circle",
+              "name": "--bq-avatar--badge-top-circle"
             },
             {
-              "name": "bqOpen",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called when the accordion is opened"
-            },
+              "description": "Badge left position shape circle",
+              "name": "--bq-avatar--badge-left-circle"
+            }
+          ],
+          "cssParts": [
             {
-              "name": "bqAfterOpen",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called after the accordion is opened"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             },
             {
-              "name": "bqClose",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called when the accordion is closed"
+              "description": "The `<image>` tag element that load the image source.",
+              "name": "img"
             },
             {
-              "name": "bqAfterClose",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called after the accordion is closed"
+              "description": "The `<span>` tag element that rendered the `Initials` text string.",
+              "name": "text"
             },
             {
-              "name": "bqClick",
-              "type": {
-                "text": "EventEmitter<HTMLBqAccordionElement>"
-              },
-              "description": "Handler to be called when the accordion is clicked"
+              "description": "The container that wraps the badge slot element.",
+              "name": "badge"
             }
           ],
-          "attributes": [
+          "slots": [
             {
-              "type": {
-                "text": "\"filled\" | \"ghost\""
-              },
-              "description": "The appearance style of the Accordion",
-              "name": "appearance",
-              "default": "\"filled\""
-            },
+              "description": "The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.",
+              "name": "badge"
+            }
+          ],
+          "members": [
             {
+              "kind": "field",
+              "name": "trimmedInitials",
               "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the Accordion is disabled",
-              "name": "disabled",
-              "default": "false"
+                "text": "string"
+              }
             },
             {
+              "kind": "field",
+              "name": "el",
               "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the Accordion is expanded",
-              "name": "expanded",
-              "default": "false"
+                "text": "HTMLBqAvatarElement"
+              }
             },
             {
+              "kind": "field",
+              "name": "hasError",
               "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"
+              }
             },
             {
+              "kind": "field",
+              "name": "altText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
-              "name": "rotate",
-              "default": "false"
+              "description": "Alternate text for the avatar image if the image cannot be displayed"
             },
             {
+              "kind": "field",
+              "name": "image",
               "type": {
-                "text": "\"small\" | \"medium\""
+                "text": "string"
               },
-              "description": "The size of the the Accordion",
-              "name": "size",
-              "default": "\"medium\""
+              "description": "The image source to load on the avatar (this can be also a base64 encoded image)"
             },
             {
-              "name": "appearance",
-              "fieldName": "appearance",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "TAccordionAppearance"
+                "text": "string"
               },
-              "parsedType": {
-                "text": "'filled' | 'ghost'"
-              }
-            },
-            {
-              "name": "disabled",
-              "fieldName": "disabled",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "expanded",
-              "fieldName": "expanded",
-              "type": {
-                "text": "boolean"
-              }
+              "description": "A text to use for describing the avatar on assistive devices"
             },
             {
-              "name": "no-animation",
-              "fieldName": "noAnimation",
+              "kind": "field",
+              "name": "initials",
               "type": {
-                "text": "boolean"
-              }
+                "text": "string"
+              },
+              "description": "The text to display on avatar"
             },
             {
-              "name": "rotate",
-              "fieldName": "rotate",
+              "kind": "field",
+              "name": "shape",
               "type": {
-                "text": "boolean"
+                "text": "TAvatarShape"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar",
+              "parsedType": {
+                "text": "'circle' | 'square'"
               }
             },
             {
+              "kind": "field",
               "name": "size",
-              "fieldName": "size",
               "type": {
-                "text": "TAccordionSize"
+                "text": "TAvatarSize"
               },
+              "default": "'medium'",
+              "description": "The size of the avatar",
               "parsedType": {
-                "text": "'small' | 'medium'"
+                "text": "'small' | 'medium' | 'xsmall' | 'large'"
               }
-            }
-          ],
-          "tagName": "bq-accordion",
-          "dependencies": [
-            {
-              "name": "bq-icon",
-              "description": ""
-            }
-          ],
-          "csspart": [
-            {
-              "name": "base",
-              "description": "The `<details>` that holds the accordion content"
             },
             {
-              "name": "header",
-              "description": "The `<summary>` that holds the accordion header content"
+              "kind": "method",
+              "name": "handleImagePropChange"
             },
             {
-              "name": "panel",
-              "description": "The `<div>` that holds the accordion panel content"
+              "kind": "method",
+              "name": "checkPropValues"
             },
             {
-              "name": "prefix",
-              "description": "The `<div>` that holds the accordion prefix content"
+              "kind": "method",
+              "name": "onInitialsChange"
             },
             {
-              "name": "suffix",
-              "description": "The `<div>` that holds the accordion suffix content"
+              "kind": "field",
+              "name": "onImageError",
+              "privacy": "private"
             },
             {
-              "name": "text",
-              "description": "The `<div>` that holds the accordion header text content"
-            }
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqAccordion",
-          "declaration": {
-            "name": "BqAccordion",
-            "module": "components/bq-accordion.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-accordion",
-          "declaration": {
-            "name": "BqAccordion",
-            "module": "components/bq-accordion.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-breadcrumb.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>",
-          "name": "BqBreadcrumb",
-          "cssParts": [
+              "kind": "field",
+              "name": "trimInitialsBasedOnSize",
+              "privacy": "private"
+            },
             {
-              "description": "The `nav` tag that loads the breadcrumb items",
-              "name": "navigation"
+              "kind": "field",
+              "name": "getIndex",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the separator element",
-              "name": "separator"
+              "kind": "method",
+              "name": "render"
             }
           ],
-          "slots": [
+          "attributes": [
             {
-              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
-              "name": ""
+              "type": {
+                "text": "string"
+              },
+              "description": "Alternate text for the avatar image if the image cannot be displayed.",
+              "name": "alt-text"
             },
             {
-              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
-              "name": "separator"
-            }
-          ],
-          "members": [
+              "type": {
+                "text": "string"
+              },
+              "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
+              "name": "image"
+            },
             {
-              "kind": "field",
-              "name": "navElem",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "A text to use for describing the avatar on assistive devices.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "spanElem",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "The text to display on avatar.",
+              "name": "initials"
             },
             {
-              "kind": "field",
-              "name": "el",
               "type": {
-                "text": "HTMLBqBreadcrumbElement"
-              }
+                "text": "\"circle\" | \"square\""
+              },
+              "description": "The shape of the avatar.",
+              "name": "shape"
             },
             {
-              "kind": "field",
-              "name": "label",
               "type": {
-                "text": "string"
+                "text": "\"xsmall\" | \"small\" | \"medium\" | \"large\""
               },
-              "default": "'Breadcrumbs'",
-              "description": "The `aria-label` attribute to describe the type of navigation"
+              "description": "The size of the avatar.",
+              "name": "size"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "alt-text",
+              "fieldName": "altText",
+              "type": {
+                "text": "string"
+              }
             },
             {
-              "kind": "field",
-              "name": "getSeparatorElem",
-              "privacy": "private"
+              "name": "image",
+              "fieldName": "image",
+              "type": {
+                "text": "string"
+              }
             },
             {
-              "kind": "field",
-              "name": "separatorFromSlot",
-              "privacy": "private",
-              "readonly": true
+              "name": "label",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              }
             },
             {
-              "kind": "field",
-              "name": "breadcrumbItems",
+              "name": "initials",
+              "fieldName": "initials",
               "type": {
-                "text": "HTMLBqBreadcrumbItemElement[]"
-              },
-              "privacy": "private",
-              "readonly": true
+                "text": "string"
+              }
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
+              "name": "shape",
+              "fieldName": "shape",
               "type": {
-                "text": "string"
+                "text": "TAvatarShape"
               },
-              "description": "The `aria-label` attribute to describe the type of navigation",
-              "name": "label"
+              "parsedType": {
+                "text": "'circle' | 'square'"
+              }
             },
             {
-              "name": "label",
-              "fieldName": "label",
+              "name": "size",
+              "fieldName": "size",
               "type": {
-                "text": "string"
+                "text": "TAvatarSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium' | 'xsmall' | 'large'"
               }
             }
           ],
-          "tagName": "bq-breadcrumb",
+          "tagName": "bq-avatar",
           "csspart": [
             {
-              "name": "navigation",
-              "description": "The `nav` tag that loads the breadcrumb items"
+              "name": "base",
+              "description": "The component's internal wrapper."
             },
             {
-              "name": "separator",
-              "description": "The container that wraps the separator element"
+              "name": "img",
+              "description": "The `<image>` tag element that load the image source."
+            },
+            {
+              "name": "text",
+              "description": "The `<span>` tag element that rendered the `Initials` text string."
+            },
+            {
+              "name": "badge",
+              "description": "The container that wraps the badge slot element."
             }
           ],
           "events": [],
@@ -1959,18 +1818,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqBreadcrumb",
+          "name": "BqAvatar",
           "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
+            "name": "BqAvatar",
+            "module": "components/bq-avatar.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-breadcrumb",
+          "name": "bq-avatar",
           "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
+            "name": "BqAvatar",
+            "module": "components/bq-avatar.js"
           }
         }
       ]
@@ -2207,6 +2066,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>",
+          "name": "BqBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The `nav` tag that loads the breadcrumb items",
+              "name": "navigation"
+            },
+            {
+              "description": "The container that wraps the separator element",
+              "name": "separator"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
+              "name": ""
+            },
+            {
+              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "navElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "spanElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqBreadcrumbElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumbs'",
+              "description": "The `aria-label` attribute to describe the type of navigation"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "getSeparatorElem",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "separatorFromSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "breadcrumbItems",
+              "type": {
+                "text": "HTMLBqBreadcrumbItemElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The `aria-label` attribute to describe the type of navigation",
+              "name": "label"
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-breadcrumb",
+          "csspart": [
+            {
+              "name": "navigation",
+              "description": "The `nav` tag that loads the breadcrumb items"
+            },
+            {
+              "name": "separator",
+              "description": "The container that wraps the separator element"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqBreadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-breadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-breadcrumb-item.js",
@@ -4085,7 +4085,7 @@
               "default": "1",
               "description": "The first day of the week, where Sunday is 0, Monday is 1, etc",
               "parsedType": {
-                "text": "0 | 2 | 4 | 5 | 3 | 1 | 6 | undefined"
+                "text": "0 | 2 | 5 | 4 | 3 | 1 | 6 | undefined"
               }
             },
             {
@@ -4709,7 +4709,7 @@
                 "text": "DaysOfWeek"
               },
               "parsedType": {
-                "text": "0 | 2 | 4 | 5 | 3 | 1 | 6"
+                "text": "0 | 2 | 5 | 4 | 3 | 1 | 6"
               }
             },
             {