@adyen/bento-vue2 1.23.0 → 1.25.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -250,6 +250,63 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "alert",
+          "description": "",
+          "attributes": [
+            {
+              "name": "closeButton",
+              "required": false,
+              "description": "Adds a close button on the right side of the alert",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "type",
+              "required": false,
+              "description": "Type of a alert; set a distinctive icon and color. Defaults to highlight.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoAlertTypeOption.HIGHLIGHT"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Variant for the alert",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoAlertVariant.DEFAULT"
+            }
+          ],
+          "events": [
+            {
+              "name": "close-alert",
+              "description": "Emits event when the alert is closed. `closeButton` must be `true`"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/alert/alert.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "all-filters-modal",
           "description": "A modal that acts as sort of filter manager for the BentoFilterBar.",
@@ -324,8 +381,19 @@
           "name": "avatar-image",
           "description": "",
           "attributes": [
+            {
+              "name": "color",
+              "required": false,
+              "description": "Avatar color. Defaults to yellow.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoAvatarImageColor"
+              },
+              "default": "BentoAvatarImageColor.YELLOW"
+            },
             {
               "name": "src",
+              "required": false,
               "description": "Image src to load the profile picture.",
               "value": {
                 "kind": "expression",
@@ -335,6 +403,7 @@
             },
             {
               "name": "username",
+              "required": false,
               "description": "Name of the user that will be used to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
               "value": {
                 "kind": "expression",
@@ -344,21 +413,13 @@
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Variants supported for small and large.\nDefault - large",
               "value": {
                 "kind": "expression",
                 "type": "BentoAvatarImageVariant"
               },
               "default": "BentoAvatarImageVariant.LARGE"
-            },
-            {
-              "name": "color",
-              "description": "Avatar color. Defaults to yellow.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoAvatarImageColor"
-              },
-              "default": "BentoAvatarImageColor.YELLOW"
             }
           ],
           "source": {
@@ -627,54 +688,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-alert",
-          "description": "An Alert component is used to display a persistent\nnotification containing information important to the user",
-          "attributes": [
-            {
-              "name": "closeButton",
-              "description": "Adds a close button on the right side of the alert",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "type",
-              "description": "Type of a alert; set a distinctive icon and color. Defaults to highlight.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoAlertTypeOption | `${BentoAlertTypeOption}`"
-              },
-              "default": "BentoAlertTypeOption.HIGHLIGHT"
-            },
-            {
-              "name": "variant",
-              "description": "Variant for the alert",
-              "value": {
-                "kind": "expression",
-                "type": "BentoAlertVariant | `${BentoAlertVariant}`"
-              },
-              "default": "BentoAlertVariant.DEFAULT"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "description"
-            },
-            {
-              "name": "actions"
-            }
-          ],
-          "source": {
-            "module": "./src/components/alert/alert.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-avatar",
           "description": "Displays an user profile including an avatar and optionally a label.",
@@ -889,104 +902,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-card",
-          "description": "A card is a flexible and composable container.\nUse cards to represent a single object or to visually group certain content, like legal information within company settings.",
-          "attributes": [
-            {
-              "name": "background",
-              "description": "Defines the color of card background",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCardBackground | `${BentoCardBackground}`"
-              },
-              "default": "BentoCardBackground.PRIMARY"
-            },
-            {
-              "name": "titleSize",
-              "description": "Defines the title size of the card header",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCardTitleSize | `${BentoCardTitleSize}`"
-              },
-              "default": "BentoCardTitleSize.DEFAULT"
-            },
-            {
-              "name": "expandable",
-              "description": "The whole content of the card will be expandable in accordion manner",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "closed",
-              "description": "Sets the expandable card in a closed state",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the expandable card",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "actions",
-              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
-              "value": {
-                "kind": "expression",
-                "type": "BentoButtonActionsList"
-              },
-              "default": "null"
-            },
-            {
-              "name": "actionsLayout",
-              "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
-              "value": {
-                "kind": "expression",
-                "type": "BentoButtonActionsLayout | `${BentoButtonActionsLayout}`"
-              },
-              "default": "BentoButtonActionsLayout.BUTTONS_END"
-            }
-          ],
-          "events": [
-            {
-              "name": "click"
-            },
-            {
-              "name": "expanded"
-            }
-          ],
-          "slots": [
-            {
-              "name": "image"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "header"
-            },
-            {
-              "name": "description"
-            },
-            {
-              "name": "content"
-            }
-          ],
-          "source": {
-            "module": "./src/components/card/card.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-checkbox",
           "description": "Checkboxes are used to make a binary choice about an option.\nThe label tag area is also clickable.",
@@ -1313,34 +1228,26 @@
           "description": "",
           "attributes": [
             {
-              "name": "isColumnVisibilityToggleDisabled",
+              "name": "columns",
               "required": true,
-              "description": "Is column visibitlity toggle disabled",
+              "description": "Column definitions",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoColumn[]"
               }
             },
             {
-              "name": "column",
-              "required": true,
-              "description": "Column definition",
+              "name": "condensed",
+              "description": "Sets the row cells to the condensed padding state.",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "visible-column"
-            },
-            {
-              "name": "updated-column"
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
-            "module": "./src/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue",
+            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
             "symbol": "default"
           }
         },
@@ -1349,26 +1256,34 @@
           "description": "",
           "attributes": [
             {
-              "name": "columns",
+              "name": "isColumnVisibilityToggleDisabled",
               "required": true,
-              "description": "Column definitions",
+              "description": "Is column visibitlity toggle disabled",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn[]"
+                "type": "boolean"
               }
             },
             {
-              "name": "condensed",
-              "description": "Sets the row cells to the condensed padding state.",
+              "name": "column",
+              "required": true,
+              "description": "Column definition",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "BentoColumn"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "visible-column"
+            },
+            {
+              "name": "updated-column"
             }
           ],
           "source": {
-            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
+            "module": "./src/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue",
             "symbol": "default"
           }
         },
@@ -2234,9 +2149,9 @@
               "description": "The `input` value.\nProviding an empty string or empty array will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected for single select",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
+                "type": "BentoListboxOptions"
               },
-              "default": "undefined"
+              "default": "() => []"
             },
             {
               "name": "virtualScroll",
@@ -2262,6 +2177,15 @@
           "name": "bento-listbox-multi-select",
           "description": "Listbox multi-select options list",
           "attributes": [
+            {
+              "name": "hasMoreItems",
+              "description": "Indicates whether there are more items to load",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "isOptionDisabled",
               "description": "Function that allows the options to be disabled",
@@ -2280,6 +2204,15 @@
                 "type": "BentoListboxOptions"
               }
             },
+            {
+              "name": "lazyLoadType",
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`"
+              },
+              "default": "BentoListboxLazyLoadType.NONE"
+            },
             {
               "name": "searching",
               "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
@@ -2291,12 +2224,12 @@
             },
             {
               "name": "selectedValues",
+              "required": true,
               "description": "The `input` value.\nProviding an empty array will select no options.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              },
-              "default": "() => [] as BentoListboxSelectedValue"
+                "type": "BentoListboxOptions"
+              }
             },
             {
               "name": "staticCategories",
@@ -2429,7 +2362,7 @@
               "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
+                "type": "BentoListboxOptions"
               },
               "default": "undefined"
             },
@@ -2615,6 +2548,11 @@
               "default": "false"
             }
           ],
+          "events": [
+            {
+              "name": "menu-item-click"
+            }
+          ],
           "slots": [
             {
               "name": "iconLeft"
@@ -2631,19 +2569,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-menu-list-container",
-          "description": "Menu list container component to set the correct styling in a menu list. For internal use only.",
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/menu/components/menu-list-container/menu-list-container.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-pagination",
           "description": "Paginiation component to help users page through data sets.\n\nThere are two ways of doing navigation in this component:\n     1. (Basic) You tell the component if there is a next page (hasNext)\n     2. (Enhanced) You tell the component:\n         - How many total items exist (totalCount)\n         - The max number of items that you show/fetch per page (size)\n         - In this case you should not set the hasNext props\n\nIf you have the data available and opt to use the Enhanced way you get extra controls:\n     - Page dropdown selector\n     - Last page button\n     - \"Showing 10 of 200 items\" text",
@@ -3156,94 +3081,25 @@
         },
         {
           "name": "bento-select-country-filter",
-          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
-          "attributes": [
-            {
-              "name": "options",
-              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
-              "value": {
-                "kind": "expression",
-                "type": "BentoSelectTagFilterOptions"
-              },
-              "default": "undefined"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-select-filter",
-          "description": "The Listbox filter displays a listbox of items\npassed in the \"options.listboxItems\" property.",
-          "attributes": [
-            {
-              "name": "defaultValue",
-              "description": "Default value of the filter to reset to.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              },
-              "default": "null"
-            },
-            {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
+          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoSelectFilterOptions"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "value",
-              "description": "Current value of the filter",
+              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
+                "type": "BentoSelectTagFilterOptions"
               },
               "default": "undefined"
             }
           ],
-          "slots": [
+          "events": [
             {
-              "name": "innerSlot"
+              "name": "<undefined>"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/select-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
             "symbol": "default"
           }
         },
@@ -4020,14 +3876,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-toast",
-          "description": "",
-          "source": {
-            "module": "./src/components/toast/toast.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-toggle",
           "description": "A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle",
@@ -4096,84 +3944,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-typography",
-          "description": "The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\neasily to text. The variants and properties match with those found in Figma.\n\nFor example, seeing text with the typography styling of",
-          "attributes": [
-            {
-              "name": "el",
-              "description": "Sets the HTML DOM element.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyElement | `${BentoTypographyElement}`"
-              },
-              "default": "BentoTypographyElement.PARAGRAPH"
-            },
-            {
-              "name": "stronger",
-              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "strongest",
-              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "variant",
-              "description": "Sets the type of typography variant.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyVariant | `${BentoTypographyVariant}`"
-              },
-              "default": "BentoTypographyVariant.BODY"
-            },
-            {
-              "name": "medium",
-              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "large",
-              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "wide",
-              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/typography/typography.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "button",
           "description": "",
@@ -4613,6 +4383,111 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "card",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actions",
+              "required": false,
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "actionsLayout",
+              "required": false,
+              "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoButtonActionsLayout.BUTTONS_END"
+            },
+            {
+              "name": "background",
+              "required": false,
+              "description": "Defines the color of card background",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCardBackground.PRIMARY"
+            },
+            {
+              "name": "closed",
+              "required": false,
+              "description": "Sets the expandable card in a closed state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the expandable card",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "expandable",
+              "required": false,
+              "description": "The whole content of the card will be expandable in accordion manner",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "titleSize",
+              "required": false,
+              "description": "Defines the title size of the card header",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCardTitleSize.DEFAULT"
+            }
+          ],
+          "events": [
+            {
+              "name": "click"
+            },
+            {
+              "name": "expanded"
+            }
+          ],
+          "slots": [
+            {
+              "name": "image"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "header"
+            },
+            {
+              "name": "description"
+            },
+            {
+              "name": "content"
+            }
+          ],
+          "source": {
+            "module": "./src/components/card/card.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "card-stub",
           "description": "",
@@ -5480,6 +5355,10 @@
             {
               "name": "register-row-cell-element",
               "description": "Emitted when a row has been selected."
+            },
+            {
+              "name": "cell-hovered",
+              "description": "Emitted when a cell has been hovered over. This is used to keep the row in a hovered state when hovering over a menu."
             }
           ],
           "slots": [
@@ -5524,6 +5403,12 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "menu-item-click-close",
+              "description": "Emits when a cell actions menu button closes due to a menu item click"
+            }
+          ],
           "source": {
             "module": "./src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue",
             "symbol": "default"
@@ -6814,7 +6699,7 @@
               "description": "The `input` value.\nProviding an empty string or empty array will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected for single select",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
+                "type": "BentoListboxOptions"
               },
               "default": "null"
             },
@@ -7139,6 +7024,40 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dynamic-content-slot-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "content",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "items",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "BentoRadioGroupItems"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/radio-group/__tests__/dynamic-content-slot-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "empty-state",
           "description": "",
@@ -7766,7 +7685,7 @@
             },
             {
               "name": "dropdown",
-              "description": "Dropdown props for the small selectable dropdown menu.",
+              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `value`: Selected value of the dropdown\n - `items`: List of available items",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputDropdownProps"
@@ -7865,10 +7784,10 @@
             },
             {
               "name": "type",
-              "description": "A string specifying the type of control to render.",
+              "description": "A string specifying the type of control to render.\nAll `input` types are available but only `search`, `text` and `number` are fully supported.\n\nIf `type` is `search`, use `bento-search-bar` instead.",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldType | `${BentoInputFieldType}`"
+                "type": "BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']"
               },
               "default": "BentoInputFieldType.TEXT"
             },
@@ -8475,6 +8394,11 @@
               "default": "false"
             }
           ],
+          "events": [
+            {
+              "name": "menu-item-click"
+            }
+          ],
           "source": {
             "module": "./src/components/menu/components/menu-item-list/menu-item-list.vue",
             "symbol": "default"
@@ -8499,7 +8423,20 @@
             }
           ],
           "source": {
-            "module": "./src/components/menu/components/menu-item/__tests__/menu-item-mock.vue",
+            "module": "./src/components/menu/components/menu-item/__tests__/menu-item-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "menu-list-container",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/components/menu-list-container/menu-list-container.vue",
             "symbol": "default"
           }
         },
@@ -10050,136 +9987,367 @@
               "default": "300"
             },
             {
-              "name": "placeholder",
-              "description": "Text displayed as the placeholder of the input-field",
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "value",
+              "description": "Text displayed as the value being searched",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property"
+            },
+            {
+              "name": "clear",
+              "description": "Emitted when the \"clear search\" button is clicked"
+            },
+            {
+              "name": "escape-pressed",
+              "description": "Emitted when the \"ESC\" key is pressed inside the Search Bar input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/search-bar/search-bar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "secondary-nav",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "description": "An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\nwhich is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSecondaryNavItems"
+              }
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "The value of the selected item.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Emmited when the current selected item changes"
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/secondary-nav.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "secondary-nav-category",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The display name of the category",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "A list of {@see BentoSecondaryNavItemsItem} that belongs to this category",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "secondary-nav-item",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The display name of the navigation item",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "The value of this item.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Event emitted when this element is clicked"
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "select-filter",
+          "description": "",
+          "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            },
+            {
+              "name": "update"
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/select-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "select-filter-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoSelectFilterOptions"
               },
-              "default": "''"
+              "default": "undefined"
             },
             {
               "name": "value",
-              "description": "Text displayed as the value being searched",
+              "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoListboxSelectedValue"
               },
               "default": "undefined"
             }
           ],
           "events": [
             {
-              "name": "input",
-              "description": "Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property"
+              "name": "input"
             },
             {
-              "name": "clear",
-              "description": "Emitted when the \"clear search\" button is clicked"
-            },
+              "name": "update"
+            }
+          ],
+          "slots": [
             {
-              "name": "escape-pressed",
-              "description": "Emitted when the \"ESC\" key is pressed inside the Search Bar input"
+              "name": "innerSlot"
             }
           ],
           "source": {
-            "module": "./src/components/search-bar/search-bar.vue",
+            "module": "./src/components/filter-bar/components/select-filter/components/select-filter-button/select-filter-button.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "secondary-nav",
+          "name": "select-filter-dropdown",
           "description": "",
           "attributes": [
             {
-              "name": "items",
-              "required": true,
-              "description": "An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\nwhich is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.",
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSecondaryNavItems"
-              }
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "null"
             },
             {
-              "name": "value",
-              "required": false,
-              "description": "The value of the selected item.",
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "description": "Emmited when the current selected item changes"
-            }
-          ],
-          "source": {
-            "module": "./src/components/secondary-nav/secondary-nav.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "secondary-nav-category",
-          "description": "",
-          "attributes": [
+            },
             {
               "name": "label",
               "required": true,
-              "description": "The display name of the category",
+              "description": "Label text to be displayed",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "items",
-              "required": true,
-              "description": "A list of {@see BentoSecondaryNavItemsItem} that belongs to this category",
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
               "value": {
                 "kind": "expression",
-                "type": "Array"
-              }
-            }
-          ],
-          "source": {
-            "module": "./src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "secondary-nav-item",
-          "description": "",
-          "attributes": [
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
-              "name": "label",
-              "required": true,
-              "description": "The display name of the navigation item",
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoSelectFilterOptions"
+              },
+              "default": "undefined"
             },
             {
               "name": "value",
-              "required": true,
-              "description": "The value of this item.",
+              "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "undefined"
             }
           ],
           "events": [
             {
-              "name": "click",
-              "description": "Event emitted when this element is clicked"
+              "name": "input"
+            },
+            {
+              "name": "update"
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
             }
           ],
           "source": {
-            "module": "./src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue",
+            "module": "./src/components/filter-bar/components/select-filter/components/select-filter-dropdown/select-filter-dropdown.vue",
             "symbol": "default"
           }
         },
@@ -11127,55 +11295,99 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "toast",
+          "description": "",
+          "source": {
+            "module": "./src/components/toast/toast.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "toast-item",
           "description": "",
           "attributes": [
             {
-              "name": "text",
+              "name": "toast",
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoToastItem"
               }
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-mock",
+          "description": "",
+          "attributes": [
             {
-              "name": "action",
+              "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItemAction"
+                "type": "BentoToastItemParams[]"
               },
-              "default": "null"
+              "default": "() => []"
             }
           ],
           "events": [
             {
-              "name": "click"
-            },
+              "name": "toast"
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-shadow-stack",
+          "description": "",
+          "events": [
             {
-              "name": "dismiss"
+              "name": "update"
             }
           ],
           "source": {
-            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "toast-mock",
+          "name": "toast-shadow-stack-mock",
           "description": "",
           "attributes": [
             {
-              "name": "items",
+              "name": "text",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "action",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItem[]"
+                "type": "BentoToastItemAction"
               },
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "update"
+            },
+            {
+              "name": "toast"
+            }
+          ],
           "source": {
-            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/__tests__/toast-shadow-stack-mock.vue",
             "symbol": "default"
           }
         },
@@ -11584,6 +11796,91 @@
             "module": "./src/components/tutorial/__tests__/tutorial-stub.vue",
             "symbol": "default"
           }
+        },
+        {
+          "name": "typography",
+          "description": "",
+          "attributes": [
+            {
+              "name": "el",
+              "required": false,
+              "description": "Sets the HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyElement.PARAGRAPH"
+            },
+            {
+              "name": "large",
+              "required": false,
+              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "medium",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "stronger",
+              "required": false,
+              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "strongest",
+              "required": false,
+              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Sets the type of typography variant.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyVariant.BODY"
+            },
+            {
+              "name": "wide",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/typography/typography.vue",
+            "symbol": "default"
+          }
         }
       ]
     }