@beeq/core 1.8.3 → 1.8.4

package/dist/custom-elements.json

@@ -397,12 +397,7 @@
             },
             {
               "kind": "field",
-              "name": "handlePrefixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSuffixSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -648,219 +643,6 @@
         }
       ]
     },
-    {
-      "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",
@@ -1197,12 +979,7 @@
             },
             {
               "kind": "field",
-              "name": "handleContentSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFooterSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -1468,28 +1245,241 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-avatar.js",
+      "path": "components/bq-accordion-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>",
-          "name": "BqAvatar",
+          "description": "The accordion 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": "Avatar background color",
-              "name": "--bq-avatar--background"
-            },
+              "description": "Accordion group distance between elements",
+              "name": "--bq-accordion-group--gap"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Avatar border color",
-              "name": "--bq-avatar--border-color"
-            },
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
             {
-              "description": "Avatar border style",
-              "name": "--bq-avatar--border-style"
-            },
+              "description": "The default slot where the bq-accordion elements are placed.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Avatar border width",
-              "name": "--bq-avatar--border-width"
+              "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-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 width",
+              "name": "--bq-avatar--border-width"
             },
             {
               "description": "Avatar border radius for circle & any size",
@@ -1929,7 +1919,7 @@
             },
             {
               "kind": "field",
-              "name": "onSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -3789,7 +3779,7 @@
               "kind": "field",
               "name": "callyElem",
               "type": {
-                "text": "InstanceType<typeof CalendarDate> | undefined"
+                "text": "TCalendarDate | undefined"
               },
               "privacy": "private"
             },
@@ -3868,6 +3858,14 @@
                 "text": "HTMLBqDatePickerElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "isCallyLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "focusedDate",
@@ -4254,17 +4252,7 @@
             },
             {
               "kind": "field",
-              "name": "handleLabelSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePrefixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSuffixSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -5225,12 +5213,7 @@
             },
             {
               "kind": "field",
-              "name": "handleContentSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFooterSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -6818,12 +6801,7 @@
             },
             {
               "kind": "field",
-              "name": "handleContentSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFooterSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -7671,22 +7649,7 @@
             },
             {
               "kind": "field",
-              "name": "handleLabelSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePrefixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSuffixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleHelperTextSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -8153,172 +8116,104 @@
     },
     {
       "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",
-          "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": "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 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 `span` element in which the label text is displayed.",
+              "name": "label"
             },
             {
-              "description": "The container `<div>` that wraps the notification title content",
-              "name": "title"
+              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`).",
+              "name": "prefix"
             },
             {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
+              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`).",
+              "name": "suffix"
             }
           ],
           "slots": [
             {
-              "description": "The notification title content",
-              "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 prefix content to be displayed before the label.",
+              "name": "prefix"
             },
             {
-              "description": "The close button of the notification",
-              "name": "btn-close"
+              "description": "The label content to be displayed.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "autoDismissDebounce",
-              "type": {
-                "text": "TDebounce<void>"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "bodyElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "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"
             },
@@ -8326,215 +8221,147 @@
               "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"
+              "default": "false",
+              "description": "If true, the option is hidden."
             },
             {
               "kind": "field",
-              "name": "border",
+              "name": "disabled",
               "type": {
-                "text": "TNotificationBorderRadius"
+                "text": "boolean | undefined"
               },
-              "default": "'s'",
-              "description": "The corder radius of the notification component"
+              "default": "false",
+              "description": "If true, the option is disabled."
             },
             {
               "kind": "field",
-              "name": "disableClose",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "If true, the close button at the top right of the notification won't be shown"
+              "description": "A string representing the value of the option. Can be used to identify the item"
             },
             {
               "kind": "field",
-              "name": "hideIcon",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the notification icon won't be shown"
+              "default": "false",
+              "description": "If true, the option is selected and active."
+            },
+            {
+              "kind": "method",
+              "name": "onKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the notification will be shown"
+              "name": "onBlur",
+              "privacy": "private"
             },
             {
               "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\"`"
+              "name": "onFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TNotificationType"
-              },
-              "default": "'info'",
-              "description": "Type of Notification"
+              "name": "onClick",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleTimeout"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleOpenChange"
+              "kind": "field",
+              "name": "isDisabledOrHidden",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "checkPropValues"
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "description": "Handler to be called when item loses focus.",
+              "name": "bqBlur"
             },
             {
-              "kind": "method",
-              "name": "afterNotificationClose"
+              "description": "Handler to be called when item is focused.",
+              "name": "bqFocus"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Method to be called to hide the notification component"
+              "description": "Handler to be called when item is clicked.",
+              "name": "bqClick"
             },
             {
-              "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": "handleHide",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleShow",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleTransitionEnd",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleContentSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFooterSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "events": [
-            {
-              "description": "Callback handler to be called after the notification has been closed",
-              "name": "bqAfterClose"
-            },
-            {
-              "description": "Callback handler to be called after the notification has been opened",
-              "name": "bqAfterOpen"
-            },
-            {
-              "description": "Callback handler to be called when the notification is hidden",
-              "name": "bqHide"
-            },
-            {
-              "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": [
@@ -8542,156 +8369,76 @@
               "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"
+              "description": "If true, the option is disabled.",
+              "name": "disabled"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the close button at the top right of the notification won't be shown",
-              "name": "disable-close"
+              "description": "If true, the option is hidden.",
+              "name": "hidden"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "If true, the notification icon won't be shown",
-              "name": "hide-icon"
+              "description": "A string representing the value of the option. Can be used to identify the item.",
+              "name": "value"
             },
             {
               "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"
-            },
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Type of Notification",
-              "name": "type"
+              "description": "If true, the option is selected and active.",
+              "name": "selected"
             },
             {
-              "name": "auto-dismiss",
-              "fieldName": "autoDismiss",
+              "name": "hidden",
+              "fieldName": "hidden",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "border",
-              "fieldName": "border",
-              "type": {
-                "text": "TNotificationBorderRadius"
-              }
-            },
-            {
-              "name": "disable-close",
-              "fieldName": "disableClose",
+              "name": "disabled",
+              "fieldName": "disabled",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "hide-icon",
-              "fieldName": "hideIcon",
+              "name": "value",
+              "fieldName": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
-              "name": "open",
-              "fieldName": "open",
+              "name": "selected",
+              "fieldName": "selected",
               "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 `<div>` container of the predefined bq-icon component."
-            },
-            {
-              "name": "body",
-              "description": "The container `<div>` that wraps the notification description content"
-            },
-            {
-              "name": "btn-close",
-              "description": "The `bq-button` used to close the notification"
-            },
-            {
-              "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)"
+              "description": "The component's internal wrapper."
             },
             {
-              "name": "svg",
-              "description": "The `<svg>` element of the predefined bq-icon component."
+              "name": "label",
+              "description": "The `span` element in which the label text is displayed."
             },
             {
-              "name": "title",
-              "description": "The container `<div>` that wraps the notification title content"
+              "name": "prefix",
+              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`)."
             },
             {
-              "name": "wrapper",
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+              "name": "suffix",
+              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`)."
             }
           ],
           "customElement": true
@@ -8700,122 +8447,190 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqNotification",
+          "name": "BqOption",
           "declaration": {
-            "name": "BqNotification",
-            "module": "components/bq-notification.js"
+            "name": "BqOption",
+            "module": "components/bq-option.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-notification",
+          "name": "bq-option",
           "declaration": {
-            "name": "BqNotification",
-            "module": "components/bq-notification.js"
+            "name": "BqOption",
+            "module": "components/bq-option.js"
           }
         }
       ]
     },
     {
       "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"
+              "description": "The notification icon color for success type",
+              "name": "--bq-notification--icon-color-success"
+            },
+            {
+              "description": "The notification icon color for warning type",
+              "name": "--bq-notification--icon-color-warning"
+            },
+            {
+              "description": "The notification padding",
+              "name": "--bq-notification--padding"
+            },
+            {
+              "description": "The notification min width",
+              "name": "--bq-notification--min-width"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's internal wrapper.",
+              "description": "The `<div>` container of the predefined bq-icon component.",
               "name": "base"
             },
             {
-              "description": "The `span` element in which the label text is displayed.",
-              "name": "label"
+              "description": "The container `<div>` that wraps the notification description content",
+              "name": "body"
             },
             {
-              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`).",
-              "name": "prefix"
+              "description": "The `bq-button` used to close the notification",
+              "name": "btn-close"
             },
             {
-              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`).",
-              "name": "suffix"
+              "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"
             },
@@ -8823,100 +8638,158 @@
               "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": "disableClose",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the close button at the top right of the notification won't be shown"
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "handleTimeout"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "checkPropValues"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "A string representing the value of the option. Can be used to identify the item"
+              "kind": "method",
+              "name": "afterNotificationClose"
             },
             {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
               },
-              "default": "false",
-              "description": "If true, the option is selected and active."
+              "description": "Method to be called to hide the notification component"
             },
             {
               "kind": "method",
-              "name": "onKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
                 }
-              ]
+              },
+              "description": "Method to be called to show the notification component"
             },
             {
-              "kind": "field",
-              "name": "onBlur",
-              "privacy": "private"
+              "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": "onFocus",
+              "name": "handleHide",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "onClick",
+              "name": "handleShow",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "onSlotChange",
+              "name": "handleTransitionEnd",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleSuffixSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isDisabledOrHidden",
+              "name": "iconName",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
               "readonly": true
             },
@@ -8927,48 +8800,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": [
@@ -8976,76 +8849,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"
+            },
+            {
+              "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"
             },
             {
-              "name": "hidden",
-              "fieldName": "hidden",
+              "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
@@ -9054,18 +9007,18 @@
       "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"
           }
         }
       ]
@@ -11545,22 +11498,7 @@
             },
             {
               "kind": "field",
-              "name": "handleLabelSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePrefixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleSuffixSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleHelperTextSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
@@ -16369,12 +16307,7 @@
             },
             {
               "kind": "field",
-              "name": "handleLabelSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleHelperTextSlotChange",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {