@beeq/core 1.8.4 → 1.9.0

package/dist/custom-elements.json

@@ -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"
+              "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"
             },
@@ -8221,147 +8289,210 @@
               "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."
-            },
-            {
-              "kind": "method",
-              "name": "onKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "If true, the notification icon won't be shown"
             },
             {
               "kind": "field",
-              "name": "onBlur",
-              "privacy": "private"
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the notification will be shown"
             },
             {
               "kind": "field",
-              "name": "onFocus",
-              "privacy": "private"
+              "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": "onClick",
-              "privacy": "private"
+              "name": "type",
+              "type": {
+                "text": "TNotificationType"
+              },
+              "default": "'info'",
+              "description": "Type of Notification"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleTimeout"
             },
             {
-              "kind": "field",
-              "name": "isDisabledOrHidden",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "render"
-            }
-          ],
-          "events": [
+              "name": "checkPropValues"
+            },
             {
-              "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"
             },
             {
-              "description": "Handler to be called on enter key press.",
-              "name": "bqEnter"
+              "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"
             },
             {
-              "name": "bqBlur",
+              "kind": "field",
+              "name": "handleHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleShow",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "string"
               },
-              "description": "Handler to be called when item loses focus"
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "name": "bqFocus",
+              "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"
+            },
+            {
+              "name": "bqHide",
               "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 hidden"
             },
             {
-              "name": "bqClick",
+              "name": "bqShow",
               "type": {
-                "text": "EventEmitter<HTMLBqOptionElement>"
+                "text": "EventEmitter"
               },
-              "description": "Handler to be called when item is clicked"
+              "description": "Callback handler to be called when the notification is shown"
             },
             {
-              "name": "bqEnter",
+              "name": "bqAfterOpen",
               "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 opened"
+            },
+            {
+              "name": "bqAfterClose",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "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"
+            },
+            {
+              "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
@@ -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 `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"
             },
@@ -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",
-              "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"
-            },
-            {
-              "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",
+              "name": "hidden",
               "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\"`"
+              "default": "false",
+              "description": "If true, the option is hidden."
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "disabled",
               "type": {
-                "text": "TNotificationType"
+                "text": "boolean | undefined"
               },
-              "default": "'info'",
-              "description": "Type of Notification"
-            },
-            {
-              "kind": "method",
-              "name": "handleTimeout"
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "afterNotificationClose"
+              "default": "false",
+              "description": "If true, the option is disabled."
             },
-            {
-              "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
               },
-              "description": "Method to be called to hide the notification component"
+              "description": "A string representing the value of the option. Can be used to identify the item"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Method to be called to show the notification component"
+              "default": "false",
+              "description": "If true, the option is selected and active."
             },
             {
               "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"
+              "name": "onKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "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,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
@@ -9007,18 +9007,18 @@
       "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"
           }
         }
       ]
@@ -11139,6 +11139,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "debounceInput",
+              "type": {
+                "text": "TDebounce<void>"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "fallbackInputId",
@@ -11456,6 +11464,25 @@
               },
               "description": "Clears the selected value."
             },
+            {
+              "kind": "method",
+              "name": "reset",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "TSelectValue"
+                  },
+                  "description": "The value to reset the Select input to."
+                }
+              ],
+              "description": "Resets the Select input to a previous value."
+            },
             {
               "kind": "field",
               "name": "initMultipleValue",
@@ -11486,6 +11513,11 @@
               "name": "handleSearchFilter",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleClearClick",
@@ -11601,6 +11633,13 @@
                 "text": "EventEmitter<{ value: string | number | string[]; item: HTMLBqOptionElement }>"
               },
               "description": "Callback handler emitted when the selected value has changed"
+            },
+            {
+              "name": "bqInput",
+              "type": {
+                "text": "EventEmitter<{ value: string | number | string[] }>"
+              },
+              "description": "Callback handler emitted when the Select input changes its value while typing"
             }
           ],
           "attributes": [