@beeq/core 1.8.4 → 1.8.5-beta.2

package/dist/custom-elements.json

@@ -643,6 +643,219 @@
         }
       ]
     },
+    {
+      "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"
+            },
+            {
+              "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"
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "tagName": "bq-accordion-group",
+          "csspart": {
+            "name": "base",
+            "description": "The component's base wrapper."
+          },
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqAccordionGroup",
+          "declaration": {
+            "name": "BqAccordionGroup",
+            "module": "components/bq-accordion-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-accordion-group",
+          "declaration": {
+            "name": "BqAccordionGroup",
+            "module": "components/bq-accordion-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-alert.js",
@@ -1245,237 +1458,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-accordion-group.js",
+      "path": "components/bq-avatar.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",
+          "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": "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": [
+              "description": "Avatar background color",
+              "name": "--bq-avatar--background"
+            },
             {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqAccordionGroupElement"
-              }
+              "description": "Avatar border color",
+              "name": "--bq-avatar--border-color"
             },
             {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "TAccordionAppearance"
-              },
-              "default": "'filled'",
-              "description": "The appearance style of accordion to be applied to all accordions"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "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": "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 style",
+              "name": "--bq-avatar--border-style"
             },
             {
               "description": "Avatar border width",
@@ -8116,104 +8116,172 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-option.js",
+      "path": "components/bq-notification.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>",
-          "name": "BqOption",
+          "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>",
+          "name": "BqNotification",
           "cssProperties": [
             {
-              "description": "background color",
-              "name": "--bq-option--background"
+              "description": "The notification background color",
+              "name": "--bq-notification--background"
             },
             {
-              "description": "font size",
-              "name": "--bq-option--font-size"
+              "description": "The notification box shadow",
+              "name": "--bq-notification--box-shadow"
             },
             {
-              "description": "border color",
-              "name": "--bq-option--border-color"
+              "description": "The notification border color",
+              "name": "--bq-notification--border-color"
             },
             {
-              "description": "border style",
-              "name": "--bq-option--border-style"
+              "description": "The notification border radius",
+              "name": "--bq-notification--border-radius"
             },
             {
-              "description": "border width",
-              "name": "--bq-option--border-width"
+              "description": "The notification border style",
+              "name": "--bq-notification--border-style"
             },
             {
-              "description": "border radius",
-              "name": "--bq-option--border-radius"
+              "description": "The notification border width",
+              "name": "--bq-notification--border-width"
             },
             {
-              "description": "box shadow",
-              "name": "--bq-option--box-shadow"
+              "description": "The notification content and footer gap",
+              "name": "--bq-notification--content-footer-gap"
             },
             {
-              "description": "gap space between prefix and label",
-              "name": "--bq-option--gap-start"
+              "description": "The notification title and body gap",
+              "name": "--bq-notification--title-body-gap"
             },
             {
-              "description": "gap space between label and suffix",
-              "name": "--bq-option--gap-end"
+              "description": "The notification icon color for error type",
+              "name": "--bq-notification--icon-color-error"
             },
             {
-              "description": "padding Y axis",
-              "name": "--bq-option--paddingY"
+              "description": "The notification icon color for info type",
+              "name": "--bq-notification--icon-color-info"
             },
             {
-              "description": "option label padding start",
-              "name": "--bq-option--padding-start"
+              "description": "The notification icon color for neutral type",
+              "name": "--bq-notification--icon-color-neutral"
             },
             {
-              "description": "option label padding end",
-              "name": "--bq-option--padding-end"
-            }
-          ],
-          "cssParts": [
+              "description": "The notification icon color for success type",
+              "name": "--bq-notification--icon-color-success"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "description": "The notification icon color for warning type",
+              "name": "--bq-notification--icon-color-warning"
             },
             {
-              "description": "The `span` element in which the label text is displayed.",
-              "name": "label"
+              "description": "The notification padding",
+              "name": "--bq-notification--padding"
             },
             {
-              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`).",
-              "name": "prefix"
+              "description": "The notification min width",
+              "name": "--bq-notification--min-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The `<div>` container of the predefined bq-icon component.",
+              "name": "base"
             },
             {
-              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`).",
-              "name": "suffix"
+              "description": "The container `<div>` that wraps the notification description content",
+              "name": "body"
+            },
+            {
+              "description": "The `bq-button` used to close the notification",
+              "name": "btn-close"
+            },
+            {
+              "description": "The container `<div>` that wraps all the notification content (title, description, footer)",
+              "name": "content"
+            },
+            {
+              "description": "The container `<div>` that wraps the notification footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The `<bq-icon>` element used to render a predefined icon based on the notification type",
+              "name": "icon"
+            },
+            {
+              "description": "The container `<div>` that wraps the icon element",
+              "name": "icon-outline"
+            },
+            {
+              "description": "The container `<div>` that wraps the notification 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 notification title content",
+              "name": "title"
+            },
+            {
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
             }
           ],
           "slots": [
             {
-              "description": "The prefix content to be displayed before the label.",
-              "name": "prefix"
+              "description": "The notification title content",
+              "name": ""
             },
             {
-              "description": "The label content to be displayed.",
-              "name": ""
+              "description": "The notification description content",
+              "name": "body"
+            },
+            {
+              "description": "The notification footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The icon to be displayed in the notification",
+              "name": "icon"
+            },
+            {
+              "description": "The close button of the notification",
+              "name": "btn-close"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "prefixElem",
+              "name": "autoDismissDebounce",
               "type": {
-                "text": "HTMLElement"
+                "text": "TDebounce<void>"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "suffixElem",
+              "name": "bodyElem",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "footerElem",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "notificationElem",
+              "type": {
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
@@ -8221,85 +8289,145 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqOptionElement"
+                "text": "HTMLBqNotificationElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasPrefix",
+              "name": "hasContent",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "hasSuffix",
+              "name": "hasFooter",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "hidden",
+              "name": "notificationPortal",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "autoDismiss",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the option is hidden."
+              "description": "If true, the notification will automatically hide after the specified amount of time"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "border",
               "type": {
-                "text": "boolean | undefined"
+                "text": "TNotificationBorderRadius"
               },
-              "default": "false",
-              "description": "If true, the option is disabled."
+              "default": "'s'",
+              "description": "The corder radius of the notification component"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "disableClose",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "A string representing the value of the option. Can be used to identify the item"
+              "description": "If true, the close button at the top right of the notification won't be shown"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "hideIcon",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the option is selected and active."
+              "description": "If true, the notification icon won't be shown"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the notification will be shown"
+            },
+            {
+              "kind": "field",
+              "name": "time",
+              "type": {
+                "text": "number"
+              },
+              "default": "3000",
+              "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"`"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TNotificationType"
+              },
+              "default": "'info'",
+              "description": "Type of Notification"
             },
             {
               "kind": "method",
-              "name": "onKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
+              "name": "handleTimeout"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "checkPropValues"
+            },
+            {
+              "kind": "method",
+              "name": "afterNotificationClose"
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
                 }
-              ]
+              },
+              "description": "Method to be called to hide the notification component"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Method to be called to show the notification component"
+            },
+            {
+              "kind": "method",
+              "name": "toast",
+              "description": "This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically"
             },
             {
               "kind": "field",
-              "name": "onBlur",
+              "name": "handleHide",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "onFocus",
+              "name": "handleShow",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "onClick",
+              "name": "handleTransitionEnd",
               "privacy": "private"
             },
             {
@@ -8309,7 +8437,10 @@
             },
             {
               "kind": "field",
-              "name": "isDisabledOrHidden",
+              "name": "iconName",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
               "readonly": true
             },
@@ -8320,48 +8451,48 @@
           ],
           "events": [
             {
-              "description": "Handler to be called when item loses focus.",
-              "name": "bqBlur"
+              "description": "Callback handler to be called after the notification has been closed",
+              "name": "bqAfterClose"
             },
             {
-              "description": "Handler to be called when item is focused.",
-              "name": "bqFocus"
+              "description": "Callback handler to be called after the notification has been opened",
+              "name": "bqAfterOpen"
             },
             {
-              "description": "Handler to be called when item is clicked.",
-              "name": "bqClick"
+              "description": "Callback handler to be called when the notification is hidden",
+              "name": "bqHide"
             },
             {
-              "description": "Handler to be called on enter key press.",
-              "name": "bqEnter"
+              "description": "Callback handler to be called when the notification is shown",
+              "name": "bqShow"
             },
             {
-              "name": "bqBlur",
+              "name": "bqHide",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "EventEmitter"
               },
-              "description": "Handler to be called when item loses focus"
+              "description": "Callback handler to be called when the notification is hidden"
             },
             {
-              "name": "bqFocus",
+              "name": "bqShow",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "EventEmitter"
               },
-              "description": "Handler to be called when item is focused"
+              "description": "Callback handler to be called when the notification is shown"
             },
             {
-              "name": "bqClick",
+              "name": "bqAfterOpen",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "EventEmitter"
               },
-              "description": "Handler to be called when item is clicked"
+              "description": "Callback handler to be called after the notification has been opened"
             },
             {
-              "name": "bqEnter",
+              "name": "bqAfterClose",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "EventEmitter"
               },
-              "description": "Handler to be called on enter key press"
+              "description": "Callback handler to be called after the notification has been closed"
             }
           ],
           "attributes": [
@@ -8369,76 +8500,156 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the option is disabled.",
-              "name": "disabled"
-            },
+              "description": "If true, the notification will automatically hide after the specified amount of time",
+              "name": "auto-dismiss"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The corder radius of the notification component",
+              "name": "border"
+            },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the option is hidden.",
-              "name": "hidden"
+              "description": "If true, the close button at the top right of the notification won't be shown",
+              "name": "disable-close"
             },
             {
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "A string representing the value of the option. Can be used to identify the item.",
-              "name": "value"
+              "description": "If true, the notification icon won't be shown",
+              "name": "hide-icon"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the option is selected and active.",
-              "name": "selected"
+              "description": "If true, the notification will be shown",
+              "name": "open"
             },
             {
-              "name": "hidden",
-              "fieldName": "hidden",
+              "type": {
+                "text": "number"
+              },
+              "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
+              "name": "time"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Type of Notification",
+              "name": "type"
+            },
+            {
+              "name": "auto-dismiss",
+              "fieldName": "autoDismiss",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "disabled",
-              "fieldName": "disabled",
+              "name": "border",
+              "fieldName": "border",
+              "type": {
+                "text": "TNotificationBorderRadius"
+              }
+            },
+            {
+              "name": "disable-close",
+              "fieldName": "disableClose",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "value",
-              "fieldName": "value",
+              "name": "hide-icon",
+              "fieldName": "hideIcon",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
-              "name": "selected",
-              "fieldName": "selected",
+              "name": "open",
+              "fieldName": "open",
               "type": {
                 "text": "boolean"
               }
+            },
+            {
+              "name": "time",
+              "fieldName": "time",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "type",
+              "fieldName": "type",
+              "type": {
+                "text": "TNotificationType"
+              }
+            }
+          ],
+          "tagName": "bq-notification",
+          "dependencies": [
+            {
+              "name": "bq-button",
+              "description": ""
+            },
+            {
+              "name": "bq-icon",
+              "description": ""
             }
           ],
-          "tagName": "bq-option",
           "csspart": [
             {
               "name": "base",
-              "description": "The component's internal wrapper."
+              "description": "The `<div>` container of the predefined bq-icon component."
             },
             {
-              "name": "label",
-              "description": "The `span` element in which the label text is displayed."
+              "name": "body",
+              "description": "The container `<div>` that wraps the notification description content"
             },
             {
-              "name": "prefix",
-              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`)."
+              "name": "btn-close",
+              "description": "The `bq-button` used to close the notification"
             },
             {
-              "name": "suffix",
-              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`)."
+              "name": "content",
+              "description": "The container `<div>` that wraps all the notification content (title, description, footer)"
+            },
+            {
+              "name": "footer",
+              "description": "The container `<div>` that wraps the notification footer content"
+            },
+            {
+              "name": "icon",
+              "description": "The `<bq-icon>` element used to render a predefined icon based on the notification type"
+            },
+            {
+              "name": "icon-outline",
+              "description": "The container `<div>` that wraps the icon element"
+            },
+            {
+              "name": "main",
+              "description": "The container `<div>` that wraps the notification main content (title, description)"
+            },
+            {
+              "name": "svg",
+              "description": "The `<svg>` element of the predefined bq-icon component."
+            },
+            {
+              "name": "title",
+              "description": "The container `<div>` that wraps the notification title content"
+            },
+            {
+              "name": "wrapper",
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
             }
           ],
           "customElement": true
@@ -8447,190 +8658,122 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqOption",
+          "name": "BqNotification",
           "declaration": {
-            "name": "BqOption",
-            "module": "components/bq-option.js"
+            "name": "BqNotification",
+            "module": "components/bq-notification.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-option",
+          "name": "bq-notification",
           "declaration": {
-            "name": "BqOption",
-            "module": "components/bq-option.js"
+            "name": "BqNotification",
+            "module": "components/bq-notification.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-notification.js",
+      "path": "components/bq-option.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>",
-          "name": "BqNotification",
+          "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>",
+          "name": "BqOption",
           "cssProperties": [
             {
-              "description": "The notification background color",
-              "name": "--bq-notification--background"
-            },
-            {
-              "description": "The notification box shadow",
-              "name": "--bq-notification--box-shadow"
-            },
-            {
-              "description": "The notification border color",
-              "name": "--bq-notification--border-color"
-            },
-            {
-              "description": "The notification border radius",
-              "name": "--bq-notification--border-radius"
+              "description": "background color",
+              "name": "--bq-option--background"
             },
             {
-              "description": "The notification border style",
-              "name": "--bq-notification--border-style"
+              "description": "font size",
+              "name": "--bq-option--font-size"
             },
             {
-              "description": "The notification border width",
-              "name": "--bq-notification--border-width"
+              "description": "border color",
+              "name": "--bq-option--border-color"
             },
             {
-              "description": "The notification content and footer gap",
-              "name": "--bq-notification--content-footer-gap"
+              "description": "border style",
+              "name": "--bq-option--border-style"
             },
             {
-              "description": "The notification title and body gap",
-              "name": "--bq-notification--title-body-gap"
+              "description": "border width",
+              "name": "--bq-option--border-width"
             },
             {
-              "description": "The notification icon color for error type",
-              "name": "--bq-notification--icon-color-error"
+              "description": "border radius",
+              "name": "--bq-option--border-radius"
             },
             {
-              "description": "The notification icon color for info type",
-              "name": "--bq-notification--icon-color-info"
+              "description": "box shadow",
+              "name": "--bq-option--box-shadow"
             },
             {
-              "description": "The notification icon color for neutral type",
-              "name": "--bq-notification--icon-color-neutral"
+              "description": "gap space between prefix and label",
+              "name": "--bq-option--gap-start"
             },
             {
-              "description": "The notification icon color for success type",
-              "name": "--bq-notification--icon-color-success"
+              "description": "gap space between label and suffix",
+              "name": "--bq-option--gap-end"
             },
             {
-              "description": "The notification icon color for warning type",
-              "name": "--bq-notification--icon-color-warning"
+              "description": "padding Y axis",
+              "name": "--bq-option--paddingY"
             },
             {
-              "description": "The notification padding",
-              "name": "--bq-notification--padding"
+              "description": "option label padding start",
+              "name": "--bq-option--padding-start"
             },
             {
-              "description": "The notification min width",
-              "name": "--bq-notification--min-width"
+              "description": "option label padding end",
+              "name": "--bq-option--padding-end"
             }
           ],
           "cssParts": [
             {
-              "description": "The `<div>` container of the predefined bq-icon component.",
+              "description": "The component's internal wrapper.",
               "name": "base"
             },
             {
-              "description": "The container `<div>` that wraps the notification description content",
-              "name": "body"
-            },
-            {
-              "description": "The `bq-button` used to close the notification",
-              "name": "btn-close"
-            },
-            {
-              "description": "The container `<div>` that wraps all the notification content (title, description, footer)",
-              "name": "content"
-            },
-            {
-              "description": "The container `<div>` that wraps the notification footer content",
-              "name": "footer"
-            },
-            {
-              "description": "The `<bq-icon>` element used to render a predefined icon based on the notification type",
-              "name": "icon"
-            },
-            {
-              "description": "The container `<div>` that wraps the icon element",
-              "name": "icon-outline"
-            },
-            {
-              "description": "The container `<div>` that wraps the notification 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 notification title content",
-              "name": "title"
-            },
-            {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The notification title content",
-              "name": ""
-            },
-            {
-              "description": "The notification description content",
-              "name": "body"
-            },
-            {
-              "description": "The notification footer content",
-              "name": "footer"
+              "description": "The `span` element in which the label text is displayed.",
+              "name": "label"
             },
             {
-              "description": "The icon to be displayed in the notification",
-              "name": "icon"
+              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`).",
+              "name": "prefix"
             },
             {
-              "description": "The close button of the notification",
-              "name": "btn-close"
+              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`).",
+              "name": "suffix"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "autoDismissDebounce",
-              "type": {
-                "text": "TDebounce<void>"
-              },
-              "privacy": "private"
+              "description": "The prefix content to be displayed before the label.",
+              "name": "prefix"
             },
             {
-              "kind": "field",
-              "name": "bodyElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
+              "description": "The label content to be displayed.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "footerElem",
+              "name": "prefixElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "notificationElem",
+              "name": "suffixElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
@@ -8638,145 +8781,85 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqNotificationElement"
+                "text": "HTMLBqOptionElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasContent",
+              "name": "hasPrefix",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "hasFooter",
+              "name": "hasSuffix",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "notificationPortal",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "autoDismiss",
+              "name": "hidden",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the notification will automatically hide after the specified amount of time"
-            },
-            {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "TNotificationBorderRadius"
-              },
-              "default": "'s'",
-              "description": "The corder radius of the notification component"
+              "default": "false",
+              "description": "If true, the option is hidden."
             },
             {
               "kind": "field",
-              "name": "disableClose",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "If true, the close button at the top right of the notification won't be shown"
+              "default": "false",
+              "description": "If true, the option is disabled."
             },
             {
               "kind": "field",
-              "name": "hideIcon",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "If true, the notification icon won't be shown"
+              "description": "A string representing the value of the option. Can be used to identify the item"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the notification will be shown"
-            },
-            {
-              "kind": "field",
-              "name": "time",
-              "type": {
-                "text": "number"
-              },
-              "default": "3000",
-              "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"`"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TNotificationType"
-              },
-              "default": "'info'",
-              "description": "Type of Notification"
-            },
-            {
-              "kind": "method",
-              "name": "handleTimeout"
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "afterNotificationClose"
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Method to be called to hide the notification component"
+              "default": "false",
+              "description": "If true, the option is selected and active."
             },
             {
               "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
+              "name": "onKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
                 }
-              },
-              "description": "Method to be called to show the notification component"
-            },
-            {
-              "kind": "method",
-              "name": "toast",
-              "description": "This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically"
+              ]
             },
             {
               "kind": "field",
-              "name": "handleHide",
+              "name": "onBlur",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleShow",
+              "name": "onFocus",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleTransitionEnd",
+              "name": "onClick",
               "privacy": "private"
             },
             {
@@ -8786,10 +8869,7 @@
             },
             {
               "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "string"
-              },
+              "name": "isDisabledOrHidden",
               "privacy": "private",
               "readonly": true
             },
@@ -8800,48 +8880,48 @@
           ],
           "events": [
             {
-              "description": "Callback handler to be called after the notification has been closed",
-              "name": "bqAfterClose"
+              "description": "Handler to be called when item loses focus.",
+              "name": "bqBlur"
             },
             {
-              "description": "Callback handler to be called after the notification has been opened",
-              "name": "bqAfterOpen"
+              "description": "Handler to be called when item is focused.",
+              "name": "bqFocus"
             },
             {
-              "description": "Callback handler to be called when the notification is hidden",
-              "name": "bqHide"
+              "description": "Handler to be called when item is clicked.",
+              "name": "bqClick"
             },
             {
-              "description": "Callback handler to be called when the notification is shown",
-              "name": "bqShow"
+              "description": "Handler to be called on enter key press.",
+              "name": "bqEnter"
             },
             {
-              "name": "bqHide",
+              "name": "bqBlur",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqOptionElement>"
               },
-              "description": "Callback handler to be called when the notification is hidden"
+              "description": "Handler to be called when item loses focus"
             },
             {
-              "name": "bqShow",
+              "name": "bqFocus",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqOptionElement>"
               },
-              "description": "Callback handler to be called when the notification is shown"
+              "description": "Handler to be called when item is focused"
             },
             {
-              "name": "bqAfterOpen",
+              "name": "bqClick",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqOptionElement>"
               },
-              "description": "Callback handler to be called after the notification has been opened"
+              "description": "Handler to be called when item is clicked"
             },
             {
-              "name": "bqAfterClose",
+              "name": "bqEnter",
               "type": {
-                "text": "EventEmitter"
+                "text": "EventEmitter<HTMLBqOptionElement>"
               },
-              "description": "Callback handler to be called after the notification has been closed"
+              "description": "Handler to be called on enter key press"
             }
           ],
           "attributes": [
@@ -8849,156 +8929,188 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the notification will automatically hide after the specified amount of time",
-              "name": "auto-dismiss"
-            },
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "The corder radius of the notification component",
-              "name": "border"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the close button at the top right of the notification won't be shown",
-              "name": "disable-close"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the notification icon won't be shown",
-              "name": "hide-icon"
+              "description": "If true, the option is disabled.",
+              "name": "disabled"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the notification will be shown",
-              "name": "open"
-            },
-            {
-              "type": {
-                "text": "number"
-              },
-              "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
-              "name": "time"
+              "description": "If true, the option is hidden.",
+              "name": "hidden"
             },
             {
               "type": {
                 "text": "string"
               },
-              "description": "Type of Notification",
-              "name": "type"
-            },
-            {
-              "name": "auto-dismiss",
-              "fieldName": "autoDismiss",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "border",
-              "fieldName": "border",
-              "type": {
-                "text": "TNotificationBorderRadius"
-              }
+              "description": "A string representing the value of the option. Can be used to identify the item.",
+              "name": "value"
             },
             {
-              "name": "disable-close",
-              "fieldName": "disableClose",
               "type": {
                 "text": "boolean"
-              }
+              },
+              "description": "If true, the option is selected and active.",
+              "name": "selected"
             },
             {
-              "name": "hide-icon",
-              "fieldName": "hideIcon",
+              "name": "hidden",
+              "fieldName": "hidden",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "open",
-              "fieldName": "open",
+              "name": "disabled",
+              "fieldName": "disabled",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "time",
-              "fieldName": "time",
+              "name": "value",
+              "fieldName": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
-              "name": "type",
-              "fieldName": "type",
+              "name": "selected",
+              "fieldName": "selected",
               "type": {
-                "text": "TNotificationType"
+                "text": "boolean"
               }
             }
           ],
-          "tagName": "bq-notification",
-          "dependencies": [
-            {
-              "name": "bq-button",
-              "description": ""
-            },
-            {
-              "name": "bq-icon",
-              "description": ""
-            }
-          ],
+          "tagName": "bq-option",
           "csspart": [
             {
               "name": "base",
-              "description": "The `<div>` container of the predefined bq-icon component."
+              "description": "The component's internal wrapper."
             },
             {
-              "name": "body",
-              "description": "The container `<div>` that wraps the notification description content"
+              "name": "label",
+              "description": "The `span` element in which the label text is displayed."
             },
             {
-              "name": "btn-close",
-              "description": "The `bq-button` used to close the notification"
+              "name": "prefix",
+              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`)."
             },
             {
-              "name": "content",
-              "description": "The container `<div>` that wraps all the notification content (title, description, footer)"
-            },
+              "name": "suffix",
+              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`)."
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqOption",
+          "declaration": {
+            "name": "BqOption",
+            "module": "components/bq-option.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-option",
+          "declaration": {
+            "name": "BqOption",
+            "module": "components/bq-option.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-option-list.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>",
+          "name": "BqOptionList",
+          "cssProperties": [
             {
-              "name": "footer",
-              "description": "The container `<div>` that wraps the notification footer content"
-            },
+              "description": "Option group gap between items Y axis",
+              "name": "--bq-option-group--gapY-list"
+            }
+          ],
+          "cssParts": [
             {
-              "name": "icon",
-              "description": "The `<bq-icon>` element used to render a predefined icon based on the notification type"
-            },
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
             {
-              "name": "icon-outline",
-              "description": "The container `<div>` that wraps the icon element"
+              "description": "The option items",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqOptionListElement"
+              }
             },
             {
-              "name": "main",
-              "description": "The container `<div>` that wraps the notification main content (title, description)"
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Options'",
+              "description": "Aria label for the list."
             },
             {
-              "name": "svg",
-              "description": "The `<svg>` element of the predefined bq-icon component."
+              "kind": "method",
+              "name": "onBqSelect",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLElement>"
+                  }
+                }
+              ]
             },
             {
-              "name": "title",
-              "description": "The container `<div>` that wraps the notification title content"
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Aria label for the list.",
+              "name": "aria-label"
             },
             {
-              "name": "wrapper",
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+              "name": "aria-label",
+              "fieldName": "ariaLabel",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-option-list",
+          "csspart": {
+            "name": "base",
+            "description": "The component's internal wrapper."
+          },
+          "events": [
+            {
+              "name": "bqSelect",
+              "type": {
+                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
+              },
+              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
             }
           ],
           "customElement": true
@@ -9007,18 +9119,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqNotification",
+          "name": "BqOptionList",
           "declaration": {
-            "name": "BqNotification",
-            "module": "components/bq-notification.js"
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-notification",
+          "name": "bq-option-list",
           "declaration": {
-            "name": "BqNotification",
-            "module": "components/bq-notification.js"
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
           }
         }
       ]
@@ -9103,92 +9215,7 @@
             {
               "description": "The suffix of the label",
               "name": "header-suffix"
-            },
-            {
-              "description": "The option items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "tagName": "bq-option-group",
-          "csspart": [
-            {
-              "name": "label",
-              "description": "The `legend` tag element which acts as a container for the label"
-            },
-            {
-              "name": "prefix",
-              "description": "The prefix of the label"
-            },
-            {
-              "name": "label",
-              "description": "The text of the label"
-            },
-            {
-              "name": "suffix",
-              "description": "The suffix of the label"
-            },
-            {
-              "name": "group",
-              "description": "The `div` element which holds the option items"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqOptionGroup",
-          "declaration": {
-            "name": "BqOptionGroup",
-            "module": "components/bq-option-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-option-group",
-          "declaration": {
-            "name": "BqOptionGroup",
-            "module": "components/bq-option-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-option-list.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>",
-          "name": "BqOptionList",
-          "cssProperties": [
-            {
-              "description": "Option group gap between items Y axis",
-              "name": "--bq-option-group--gapY-list"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
+            },
             {
               "description": "The option items",
               "name": ""
@@ -9199,83 +9226,56 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqOptionListElement"
+                "text": "HTMLElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Options'",
-              "description": "Aria label for the list."
-            },
-            {
-              "kind": "method",
-              "name": "onBqSelect",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLElement>"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "render"
             }
           ],
-          "attributes": [
+          "tagName": "bq-option-group",
+          "csspart": [
             {
-              "type": {
-                "text": "string"
-              },
-              "description": "Aria label for the list.",
-              "name": "aria-label"
+              "name": "label",
+              "description": "The `legend` tag element which acts as a container for the label"
             },
             {
-              "name": "aria-label",
-              "fieldName": "ariaLabel",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-option-list",
-          "csspart": {
-            "name": "base",
-            "description": "The component's internal wrapper."
-          },
-          "events": [
+              "name": "prefix",
+              "description": "The prefix of the label"
+            },
             {
-              "name": "bqSelect",
-              "type": {
-                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
-              },
-              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
+              "name": "label",
+              "description": "The text of the label"
+            },
+            {
+              "name": "suffix",
+              "description": "The suffix of the label"
+            },
+            {
+              "name": "group",
+              "description": "The `div` element which holds the option items"
             }
           ],
+          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BqOptionList",
+          "name": "BqOptionGroup",
           "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
+            "name": "BqOptionGroup",
+            "module": "components/bq-option-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-option-list",
+          "name": "bq-option-group",
           "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
+            "name": "BqOptionGroup",
+            "module": "components/bq-option-group.js"
           }
         }
       ]
@@ -10124,95 +10124,103 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-radio.js",
+      "path": "components/bq-radio-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The radio button is a user interface element that allows users to select a single option.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n```\n\n</figure>",
-          "name": "BqRadio",
-          "cssProperties": [
-            {
-              "description": "Radio size",
-              "name": "--bq-radio--size"
-            },
-            {
-              "description": "Radio border width",
-              "name": "--bq-radio--border-width"
-            }
-          ],
+          "description": "The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio-group fieldset value=\"option1\">\n<span slot=\"label\">radio group</span>\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n<bq-radio value=\"option2\">Radio option 2</bq-radio>\n<bq-radio value=\"option3\">Radio option 3</bq-radio>\n</bq-radio-group>\n```\n\n</figure>",
+          "name": "BqRadioGroup",
           "cssParts": [
             {
-              "description": "The component's internal wrapper of the radio component.",
+              "description": "The component's internal wrapper of the radio components.",
               "name": "base"
             },
             {
-              "description": "The native HTML `<input type=\"radio\">` used under the hood.",
-              "name": "input"
-            },
-            {
-              "description": "The component's internal wrapper of the radio component.",
-              "name": "radio"
+              "description": "The `<legend>` element that holds the text content.",
+              "name": "label"
             },
             {
-              "description": "The `<span>` element that holds the text content.",
-              "name": "label"
+              "description": "The `<div>` element that holds the radio inputs.",
+              "name": "group"
             }
           ],
           "slots": [
             {
-              "description": "The bq-radio item",
+              "description": "The bq-radio items to group",
               "name": ""
+            },
+            {
+              "description": "The label content of radio group",
+              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inputElement",
+              "name": "focusedBqRadio",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLBqRadioElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "debouncedBqChange",
+              "type": {
+                "text": "TDebounce<{ value: string; target: HTMLBqRadioElement }>"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "el",
+              "name": "internals",
               "type": {
-                "text": "HTMLBqRadioElement"
+                "text": "ElementInternals"
               }
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "el",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true radio input is checked"
+                "text": "HTMLBqRadioGroupElement"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "backgroundOnHover",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true radio input is disabled"
+              "description": "If true, all radio inputs in the group will display a background on hover"
             },
             {
               "kind": "field",
-              "name": "backgroundOnHover",
+              "name": "debounceTime",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true radio displays background on hover"
+              "description": "If true radio inputs are disabled"
             },
             {
               "kind": "field",
-              "name": "formId",
+              "name": "fieldset",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The form ID that the radio input is associated with"
+              "default": "false",
+              "description": "If true displays fieldset"
             },
             {
               "kind": "field",
@@ -10222,67 +10230,149 @@
               },
               "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair."
             },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "TRadioGroupOrientation | undefined"
+              },
+              "default": "'vertical'",
+              "description": "The display orientation of the radio inputs"
+            },
             {
               "kind": "field",
               "name": "required",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted"
+              "default": "false",
+              "description": "If true, the radio group is required"
+            },
+            {
+              "kind": "field",
+              "name": "requiredValidationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The native form validation message when the radio group is required"
             },
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "description": "A string representing the value of the radio."
             },
             {
               "kind": "method",
-              "name": "vClick",
-              "description": "Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`."
+              "name": "handleGroupProperties"
             },
             {
               "kind": "method",
-              "name": "vFocus",
-              "description": "Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`."
+              "name": "checkPropValues"
             },
             {
               "kind": "method",
-              "name": "vBlur",
-              "description": "Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`."
+              "name": "checkDebounceChange"
             },
             {
               "kind": "method",
-              "name": "getNativeInput",
-              "description": "Returns the native `<input>` HTML element used under the hood."
+              "name": "handleRequiredChange"
+            },
+            {
+              "kind": "method",
+              "name": "formAssociatedCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "onMouseDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onBqClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLBqRadioElement>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onBqKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<KeyboardEvent>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onBqFocus",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLBqRadioElement>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onBqBlur",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLBqRadioElement>"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "handleClick",
+              "name": "focusRadioInputSibling",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOnFocus",
+              "name": "setCheckedRadioItem",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOnBlur",
+              "name": "getNextRadioElement",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOnKeyDown",
+              "name": "updateFormValidity",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "tabindex",
+              "name": "bqRadioElements",
               "type": {
-                "text": "string"
+                "text": "HTMLBqRadioElement[]"
               },
               "privacy": "private",
               "readonly": true
@@ -10293,49 +10383,16 @@
             }
           ],
           "events": [
-            {
-              "description": "Handler to be called when the radio loses focus",
-              "name": "bqBlur"
-            },
             {
               "description": "Handler to be called when the radio state changes",
-              "name": "bqClick"
-            },
-            {
-              "description": "Handler to be called when the radio gets focused",
-              "name": "bqFocus"
-            },
-            {
-              "description": "The handler is to be called when the radio key is pressed",
-              "name": "bqKeyDown"
+              "name": "bqChange"
             },
             {
-              "name": "bqClick",
+              "name": "bqChange",
               "type": {
-                "text": "EventEmitter<HTMLBqRadioElement>"
+                "text": "EventEmitter<{ value: string; target: HTMLBqRadioElement }>"
               },
               "description": "Handler to be called when the radio state changes"
-            },
-            {
-              "name": "bqFocus",
-              "type": {
-                "text": "EventEmitter<HTMLBqRadioElement>"
-              },
-              "description": "Handler to be called when the radio gets focus"
-            },
-            {
-              "name": "bqBlur",
-              "type": {
-                "text": "EventEmitter<HTMLBqRadioElement>"
-              },
-              "description": "Handler to be called when the radio loses focus"
-            },
-            {
-              "name": "bqKeyDown",
-              "type": {
-                "text": "EventEmitter<KeyboardEvent>"
-              },
-              "description": "Handler to be called when the radio key is pressed"
             }
           ],
           "attributes": [
@@ -10348,24 +10405,24 @@
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "If `true` radio input is checked",
-              "name": "checked"
+              "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
+              "name": "debounce-time"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true` radio input is disabled",
+              "description": "If `true` radio inputs are disabled",
               "name": "disabled"
             },
             {
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The form ID that the radio input is associated with",
-              "name": "form-id"
+              "description": "If `true` displays fieldset",
+              "name": "fieldset"
             },
             {
               "type": {
@@ -10374,54 +10431,73 @@
               "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
               "name": "name"
             },
+            {
+              "type": {
+                "text": "\"horizontal\" | \"vertical\""
+              },
+              "description": "The display orientation of the radio inputs",
+              "name": "orientation"
+            },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted",
+              "description": "If `true`, the radio group is required",
               "name": "required"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "A string representing the value of the radio",
-              "name": "value"
+              "description": "The native form validation message when the radio group is required",
+              "name": "required-validation-message"
             },
             {
-              "name": "checked",
-              "fieldName": "checked",
               "type": {
-                "text": "boolean"
-              }
+                "text": "string"
+              },
+              "description": "The display orientation of the radio inputs",
+              "name": "value"
+            },
+            {
+              "name": "background-on-hover",
+              "fieldName": "backgroundOnHover"
+            },
+            {
+              "name": "debounce-time",
+              "fieldName": "debounceTime"
             },
             {
               "name": "disabled",
               "fieldName": "disabled"
             },
             {
-              "name": "background-on-hover",
-              "fieldName": "backgroundOnHover"
+              "name": "fieldset",
+              "fieldName": "fieldset"
             },
             {
-              "name": "form-id",
-              "fieldName": "formId",
+              "name": "name",
+              "fieldName": "name",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "name",
-              "fieldName": "name",
+              "name": "orientation",
+              "fieldName": "orientation",
               "type": {
-                "text": "string"
+                "text": "TRadioGroupOrientation"
               }
             },
             {
               "name": "required",
-              "fieldName": "required",
+              "fieldName": "required"
+            },
+            {
+              "name": "required-validation-message",
+              "fieldName": "requiredValidationMessage",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
@@ -10432,23 +10508,19 @@
               }
             }
           ],
-          "tagName": "bq-radio",
+          "tagName": "bq-radio-group",
           "csspart": [
             {
               "name": "base",
-              "description": "The component's internal wrapper of the radio component."
-            },
-            {
-              "name": "input",
-              "description": "The native HTML `<input type=\"radio\">` used under the hood."
+              "description": "The component's internal wrapper of the radio components."
             },
             {
-              "name": "radio",
-              "description": "The component's internal wrapper of the radio component."
+              "name": "label",
+              "description": "The `<legend>` element that holds the text content."
             },
             {
-              "name": "label",
-              "description": "The `<span>` element that holds the text content."
+              "name": "group",
+              "description": "The `<div>` element that holds the radio inputs."
             }
           ],
           "customElement": true
@@ -10457,273 +10529,183 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqRadio",
+          "name": "BqRadioGroup",
           "declaration": {
-            "name": "BqRadio",
-            "module": "components/bq-radio.js"
+            "name": "BqRadioGroup",
+            "module": "components/bq-radio-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-radio",
+          "name": "bq-radio-group",
           "declaration": {
-            "name": "BqRadio",
-            "module": "components/bq-radio.js"
+            "name": "BqRadioGroup",
+            "module": "components/bq-radio-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-radio-group.js",
+      "path": "components/bq-radio.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio-group fieldset value=\"option1\">\n<span slot=\"label\">radio group</span>\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n<bq-radio value=\"option2\">Radio option 2</bq-radio>\n<bq-radio value=\"option3\">Radio option 3</bq-radio>\n</bq-radio-group>\n```\n\n</figure>",
-          "name": "BqRadioGroup",
+          "description": "The radio button is a user interface element that allows users to select a single option.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n```\n\n</figure>",
+          "name": "BqRadio",
+          "cssProperties": [
+            {
+              "description": "Radio size",
+              "name": "--bq-radio--size"
+            },
+            {
+              "description": "Radio border width",
+              "name": "--bq-radio--border-width"
+            }
+          ],
           "cssParts": [
             {
-              "description": "The component's internal wrapper of the radio components.",
+              "description": "The component's internal wrapper of the radio component.",
               "name": "base"
             },
             {
-              "description": "The `<legend>` element that holds the text content.",
-              "name": "label"
+              "description": "The native HTML `<input type=\"radio\">` used under the hood.",
+              "name": "input"
             },
             {
-              "description": "The `<div>` element that holds the radio inputs.",
-              "name": "group"
+              "description": "The component's internal wrapper of the radio component.",
+              "name": "radio"
+            },
+            {
+              "description": "The `<span>` element that holds the text content.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "The bq-radio items to group",
+              "description": "The bq-radio item",
               "name": ""
-            },
-            {
-              "description": "The label content of radio group",
-              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "focusedBqRadio",
-              "type": {
-                "text": "HTMLBqRadioElement | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "debouncedBqChange",
+              "name": "inputElement",
               "type": {
-                "text": "TDebounce<{ value: string; target: HTMLBqRadioElement }>"
+                "text": "HTMLInputElement"
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "internals",
-              "type": {
-                "text": "ElementInternals"
-              }
-            },
             {
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqRadioGroupElement"
+                "text": "HTMLBqRadioElement"
               }
             },
             {
               "kind": "field",
-              "name": "backgroundOnHover",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, all radio inputs in the group will display a background on hover"
-            },
-            {
-              "kind": "field",
-              "name": "debounceTime",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true radio inputs are disabled"
-            },
-            {
-              "kind": "field",
-              "name": "fieldset",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true displays fieldset"
-            },
-            {
-              "kind": "field",
-              "name": "name",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair."
+              "description": "If true radio input is checked"
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "disabled",
               "type": {
-                "text": "TRadioGroupOrientation | undefined"
+                "text": "boolean"
               },
-              "default": "'vertical'",
-              "description": "The display orientation of the radio inputs"
+              "default": "false",
+              "description": "If true radio input is disabled"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "backgroundOnHover",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the radio group is required"
+              "description": "If true radio displays background on hover"
             },
             {
               "kind": "field",
-              "name": "requiredValidationMessage",
+              "name": "formId",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The native form validation message when the radio group is required"
+              "description": "The form ID that the radio input is associated with"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "A string representing the value of the radio."
-            },
-            {
-              "kind": "method",
-              "name": "handleGroupProperties"
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "checkDebounceChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleRequiredChange"
-            },
-            {
-              "kind": "method",
-              "name": "formAssociatedCallback"
+              "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair."
             },
             {
-              "kind": "method",
-              "name": "formResetCallback"
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted"
             },
             {
-              "kind": "method",
-              "name": "onMouseDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "A string representing the value of the radio."
             },
             {
               "kind": "method",
-              "name": "onBqClick",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLBqRadioElement>"
-                  }
-                }
-              ]
+              "name": "vClick",
+              "description": "Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`."
             },
             {
               "kind": "method",
-              "name": "onBqKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<KeyboardEvent>"
-                  }
-                }
-              ]
+              "name": "vFocus",
+              "description": "Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`."
             },
             {
               "kind": "method",
-              "name": "onBqFocus",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLBqRadioElement>"
-                  }
-                }
-              ]
+              "name": "vBlur",
+              "description": "Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`."
             },
             {
               "kind": "method",
-              "name": "onBqBlur",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLBqRadioElement>"
-                  }
-                }
-              ]
+              "name": "getNativeInput",
+              "description": "Returns the native `<input>` HTML element used under the hood."
             },
             {
               "kind": "field",
-              "name": "focusRadioInputSibling",
+              "name": "handleClick",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "setCheckedRadioItem",
+              "name": "handleOnFocus",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "getNextRadioElement",
+              "name": "handleOnBlur",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "updateFormValidity",
+              "name": "handleOnKeyDown",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "bqRadioElements",
+              "name": "tabindex",
               "type": {
-                "text": "HTMLBqRadioElement[]"
+                "text": "string"
               },
               "privacy": "private",
               "readonly": true
@@ -10734,16 +10716,49 @@
             }
           ],
           "events": [
+            {
+              "description": "Handler to be called when the radio loses focus",
+              "name": "bqBlur"
+            },
             {
               "description": "Handler to be called when the radio state changes",
-              "name": "bqChange"
+              "name": "bqClick"
             },
             {
-              "name": "bqChange",
+              "description": "Handler to be called when the radio gets focused",
+              "name": "bqFocus"
+            },
+            {
+              "description": "The handler is to be called when the radio key is pressed",
+              "name": "bqKeyDown"
+            },
+            {
+              "name": "bqClick",
               "type": {
-                "text": "EventEmitter<{ value: string; target: HTMLBqRadioElement }>"
+                "text": "EventEmitter<HTMLBqRadioElement>"
               },
               "description": "Handler to be called when the radio state changes"
+            },
+            {
+              "name": "bqFocus",
+              "type": {
+                "text": "EventEmitter<HTMLBqRadioElement>"
+              },
+              "description": "Handler to be called when the radio gets focus"
+            },
+            {
+              "name": "bqBlur",
+              "type": {
+                "text": "EventEmitter<HTMLBqRadioElement>"
+              },
+              "description": "Handler to be called when the radio loses focus"
+            },
+            {
+              "name": "bqKeyDown",
+              "type": {
+                "text": "EventEmitter<KeyboardEvent>"
+              },
+              "description": "Handler to be called when the radio key is pressed"
             }
           ],
           "attributes": [
@@ -10756,24 +10771,24 @@
             },
             {
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
-              "name": "debounce-time"
+              "description": "If `true` radio input is checked",
+              "name": "checked"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true` radio inputs are disabled",
+              "description": "If `true` radio input is disabled",
               "name": "disabled"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "If `true` displays fieldset",
-              "name": "fieldset"
+              "description": "The form ID that the radio input is associated with",
+              "name": "form-id"
             },
             {
               "type": {
@@ -10782,73 +10797,54 @@
               "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
               "name": "name"
             },
-            {
-              "type": {
-                "text": "\"horizontal\" | \"vertical\""
-              },
-              "description": "The display orientation of the radio inputs",
-              "name": "orientation"
-            },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true`, the radio group is required",
+              "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted",
               "name": "required"
             },
             {
               "type": {
-                "text": "string"
-              },
-              "description": "The native form validation message when the radio group is required",
-              "name": "required-validation-message"
-            },
-            {
-              "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The display orientation of the radio inputs",
+              "description": "A string representing the value of the radio",
               "name": "value"
             },
             {
-              "name": "background-on-hover",
-              "fieldName": "backgroundOnHover"
-            },
-            {
-              "name": "debounce-time",
-              "fieldName": "debounceTime"
+              "name": "checked",
+              "fieldName": "checked",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
               "name": "disabled",
               "fieldName": "disabled"
             },
             {
-              "name": "fieldset",
-              "fieldName": "fieldset"
+              "name": "background-on-hover",
+              "fieldName": "backgroundOnHover"
             },
             {
-              "name": "name",
-              "fieldName": "name",
+              "name": "form-id",
+              "fieldName": "formId",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "orientation",
-              "fieldName": "orientation",
+              "name": "name",
+              "fieldName": "name",
               "type": {
-                "text": "TRadioGroupOrientation"
+                "text": "string"
               }
             },
             {
               "name": "required",
-              "fieldName": "required"
-            },
-            {
-              "name": "required-validation-message",
-              "fieldName": "requiredValidationMessage",
+              "fieldName": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
@@ -10859,19 +10855,23 @@
               }
             }
           ],
-          "tagName": "bq-radio-group",
+          "tagName": "bq-radio",
           "csspart": [
             {
               "name": "base",
-              "description": "The component's internal wrapper of the radio components."
+              "description": "The component's internal wrapper of the radio component."
             },
             {
-              "name": "label",
-              "description": "The `<legend>` element that holds the text content."
+              "name": "input",
+              "description": "The native HTML `<input type=\"radio\">` used under the hood."
             },
             {
-              "name": "group",
-              "description": "The `<div>` element that holds the radio inputs."
+              "name": "radio",
+              "description": "The component's internal wrapper of the radio component."
+            },
+            {
+              "name": "label",
+              "description": "The `<span>` element that holds the text content."
             }
           ],
           "customElement": true
@@ -10880,18 +10880,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqRadioGroup",
+          "name": "BqRadio",
           "declaration": {
-            "name": "BqRadioGroup",
-            "module": "components/bq-radio-group.js"
+            "name": "BqRadio",
+            "module": "components/bq-radio.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-radio-group",
+          "name": "bq-radio",
           "declaration": {
-            "name": "BqRadioGroup",
-            "module": "components/bq-radio-group.js"
+            "name": "BqRadio",
+            "module": "components/bq-radio.js"
           }
         }
       ]