@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -377,6 +377,45 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "avatar",
+          "description": "",
+          "attributes": [
+            {
+              "name": "iconOnly",
+              "required": false,
+              "description": "Displays the user profile without the label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "src",
+              "required": false,
+              "description": "Image src to load the profile picture.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "username",
+              "required": true,
+              "description": "Name of the user that will be used both in the label and to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/avatar/avatar.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "avatar-image",
           "description": "",
@@ -688,43 +727,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-avatar",
-          "description": "Displays an user profile including an avatar and optionally a label.",
-          "attributes": [
-            {
-              "name": "iconOnly",
-              "description": "Displays the user profile without the label.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "username",
-              "required": true,
-              "description": "Name of the user that will be used both in the label and to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "src",
-              "description": "Image src to load the profile picture.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/avatar/avatar.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-base-filter",
           "description": "",
@@ -2874,139 +2876,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-segmented-control",
-          "description": "",
-          "attributes": [
-            {
-              "name": "items",
-              "required": true,
-              "description": "Items that will populate the segmented control.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoSegmentedControlItem[]"
-              }
-            },
-            {
-              "name": "modelValue",
-              "required": true,
-              "description": "Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.",
-              "value": {
-                "kind": "expression",
-                "type": "number|string|null"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "description": "Accessible name describing the segmented control.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "fullWidth",
-              "description": "If set to true, renders the component full width.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "wrap",
-              "description": "If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/segmented-control/segmented-control.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-segmented-control-button",
-          "description": "Internal component to be used within the BentoSegmentedControl component only",
-          "attributes": [
-            {
-              "name": "label",
-              "required": true,
-              "description": "The string the button will showcase",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "value",
-              "required": true,
-              "description": "Indicates the value of the input that will be returned when it's selected",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              }
-            },
-            {
-              "name": "modelValue",
-              "description": "This property should not be used directly.\nIt will be used by v-model directive on the segmented control component",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "null"
-            },
-            {
-              "name": "disabled",
-              "description": "Disable the radio button (optional)",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "fullWidth",
-              "description": "Renders the button with a 100% width",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "truncate",
-              "description": "Renders the button with a truncated text if the space is not enough to render the whole content",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "wrap",
-              "description": "Renders the button with centered text in case the text has to wrap multiple lines",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "events": [
-            {
-              "name": "update:model-value"
-            }
-          ],
-          "source": {
-            "module": "./src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-select-avatar-filter",
           "description": "The Select Avatar filter displays a listbox of avatar items\npassed in the \"options.listboxItems\" property.",
@@ -3128,166 +2997,83 @@
           }
         },
         {
-          "name": "bento-status",
-          "description": "A Status component is used to indicate a\npassage of time or a particular step of a process.",
+          "name": "bento-summary-grid",
+          "description": "A summary grid component that displays a collection items.",
           "attributes": [
             {
-              "name": "variant",
-              "required": true,
+              "name": "columnWidth",
+              "description": "Sets the responsive columns widths values for 1 of the 3 rows.",
               "value": {
                 "kind": "expression",
-                "type": "BentoStatusVariant | `${BentoStatusVariant}`"
-              }
+                "type": "BentoSummaryGridColumnWidth"
+              },
+              "default": "null"
             }
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "`cell-${index}-1`"
+            },
+            {
+              "name": "`cell-${index}-2`"
+            },
+            {
+              "name": "`cell-${index}-3`"
+            },
+            {
+              "name": "`cell-${index}-4`"
+            },
+            {
+              "name": "`cell-${index}-5`"
+            },
+            {
+              "name": "`cell-${index}-6`"
             }
           ],
           "source": {
-            "module": "./src/components/status/status.vue",
+            "module": "./src/components/summary-grid/summary-grid.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-structured-list-item",
-          "description": "This is an item of the `BentoStructuredList` meant to be used only with that component.\nIt consists of a label/value pair, and also the optional copy and search modifiers.",
+          "name": "bento-summary-grid-item-amount",
+          "description": "Summary grid item component used to display financial data, such as currency values and monetary amounts",
           "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "label",
               "required": true,
-              "description": "Label to display for the value",
+              "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "labelInfo",
-              "description": "Text to display in info icon tooltip in the label to display for the value",
+              "name": "secondaryLabel",
+              "description": "Adds additional label next to amount content",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "copy",
-              "description": "Text to copy when the user clicks `Copy` icon",
+              "name": "secondaryMetric",
+              "description": "Amount to be shown as the secondary metric value",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
-            },
-            {
-              "name": "search",
-              "description": "Function to trigger when user clicks `Search` icon",
-              "value": {
-                "kind": "expression",
-                "type": "(event: Event) => void"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "searchTooltip",
-              "description": "Text to display when the user hovers over `Search` icon",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/structured-list/components/structered-list-item/structured-list-item.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-summary-grid",
-          "description": "A summary grid component that displays a collection items.",
-          "attributes": [
-            {
-              "name": "columnWidth",
-              "description": "Sets the responsive columns widths values for 1 of the 3 rows.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoSummaryGridColumnWidth"
-              },
-              "default": "null"
-            }
-          ],
-          "slots": [
-            {
-              "name": "`cell-${index}-1`"
-            },
-            {
-              "name": "`cell-${index}-2`"
-            },
-            {
-              "name": "`cell-${index}-3`"
-            },
-            {
-              "name": "`cell-${index}-4`"
-            },
-            {
-              "name": "`cell-${index}-5`"
-            },
-            {
-              "name": "`cell-${index}-6`"
-            }
-          ],
-          "source": {
-            "module": "./src/components/summary-grid/summary-grid.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-summary-grid-item-amount",
-          "description": "Summary grid item component used to display financial data, such as currency values and monetary amounts",
-          "attributes": [
-            {
-              "name": "copy",
-              "description": "Text to copy to the clipboard",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "Amount to be shown as the main value",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "secondaryLabel",
-              "description": "Adds additional label next to amount content",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "secondaryMetric",
-              "description": "Amount to be shown as the secondary metric value",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
+              "default": "null"
             },
             {
               "name": "title",
@@ -4086,6 +3872,16 @@
         {
           "name": "button-actions-icons-stub",
           "description": "",
+          "attributes": [
+            {
+              "name": "iconOnly",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
           "source": {
             "module": "./src/components/button/components/button-actions/__tests__/button-actions-icons-stub.vue",
             "symbol": "default"
@@ -4137,6 +3933,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "button-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/__tests__/button-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "calendar",
           "description": "Handles the calendar logic to change visible months for Single calendar\nand Range calendar, as well as the selection logic for range.\nAll the processing necessary for the calendar to select dates",
@@ -4940,6 +4744,64 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dashed-underline",
+          "description": "",
+          "attributes": [
+            {
+              "name": "popoverText",
+              "required": false,
+              "description": "Text showed in the popover on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "popoverPosition",
+              "required": false,
+              "description": "Position the popover should take if space is available",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "'top'"
+            },
+            {
+              "name": "tooltipText",
+              "required": false,
+              "description": "Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "tooltipPosition",
+              "required": false,
+              "description": "Position the tooltip should take if space is available.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "'top'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "popover-content"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dashed-underline/dashed-underline.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid",
           "description": "",
@@ -5169,6 +5031,15 @@
               },
               "default": "() => []"
             },
+            {
+              "name": "noSpacingTop",
+              "description": "Renders the data grid with no top spacing, to render inside containers that already have spacing",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "sortBy",
               "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
@@ -5634,6 +5505,45 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-static-icon",
+          "description": "",
+          "attributes": [
+            {
+              "name": "colored",
+              "required": false,
+              "description": "Renderes the icon with color.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "tooltipText",
+              "required": true,
+              "description": "The text displaying in the tooltip.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "The variant of the icon.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDataGridStaticIconVariant"
+              },
+              "default": "'no-value'"
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-static-icon/data-grid-static-icon.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid.test",
           "description": "",
@@ -6631,15 +6541,6 @@
                 "type": "string"
               }
             },
-            {
-              "name": "inputSize",
-              "description": "Dropdown input size",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownSize | `${BentoDropdownSize}`"
-              },
-              "default": "BentoDropdownSize.DEFAULT"
-            },
             {
               "name": "isOptionDisabled",
               "description": "Function that allows the options to be disabled",
@@ -10120,6 +10021,154 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "segmented-control",
+          "description": "",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "required": false,
+              "description": "Accessible name describing the segmented control.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fullWidth",
+              "required": false,
+              "description": "If set to true, renders the component full width.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "Items that will populate the segmented control.",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              }
+            },
+            {
+              "name": "modelValue",
+              "required": true,
+              "description": "Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "wrap",
+              "required": false,
+              "description": "If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:model-value",
+              "description": "Emitted every time the segmented control internal value is changed"
+            }
+          ],
+          "source": {
+            "module": "./src/components/segmented-control/segmented-control.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "segmented-control-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disable the radio button (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "fullWidth",
+              "required": false,
+              "description": "Renders the button with a 100% width",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The string the button will showcase",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "modelValue",
+              "required": false,
+              "description": "This property should not be used directly.\nIt will be used by v-model directive on the segmented control component",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "truncate",
+              "required": false,
+              "description": "Renders the button with a truncated text if the space is not enough to render the whole content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Indicates the value of the input that will be returned when it's selected",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "wrap",
+              "required": false,
+              "description": "Renders the button with centered text in case the text has to wrap multiple lines",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:model-value",
+              "description": "Emitted every time the segmented control internal value is changed"
+            }
+          ],
+          "source": {
+            "module": "./src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "select-filter",
           "description": "",
@@ -10614,6 +10663,17 @@
         {
           "name": "selection-card-group-stub",
           "description": "",
+          "attributes": [
+            {
+              "name": "layout",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'vertical'"
+            }
+          ],
           "source": {
             "module": "./src/components/selection-card/components/selection-card-group/__tests__/selection-card-group-stub.vue",
             "symbol": "default"
@@ -10746,6 +10806,29 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "status",
+          "description": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/status/status.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "step",
           "description": "",
@@ -10842,6 +10925,7 @@
           "attributes": [
             {
               "name": "labelsWidth",
+              "required": false,
               "description": "Width of the labels container, in pixels. Overrides layout prop.",
               "value": {
                 "kind": "expression",
@@ -10851,6 +10935,7 @@
             },
             {
               "name": "layout",
+              "required": false,
               "description": "The layout of the label value pair in percentage.\nIf labelsWidth is set, layout will be overriden by the static pixel value.\n\nIf the value entered is not listed in the example\nlist below '33-66' will be applied",
               "value": {
                 "kind": "expression",
@@ -10869,6 +10954,75 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "structured-list-item",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label to display for the value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "labelInfo",
+              "required": false,
+              "description": "Text to display in info icon tooltip in the label to display for the value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "copy",
+              "required": false,
+              "description": "Text to copy when the user clicks `Copy` icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "search",
+              "required": false,
+              "description": "Function to trigger when user clicks `Search` icon",
+              "value": {
+                "kind": "expression",
+                "type": "TSFunctionType"
+              }
+            },
+            {
+              "name": "searchTooltip",
+              "required": false,
+              "description": "Text to display when the user hovers over `Search` icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "truncate",
+              "required": false,
+              "description": "Truncates the value of the item",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/structured-list/components/structered-list-item/structured-list-item.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "structured-list-mock",
           "description": "",
@@ -11537,6 +11691,15 @@
           "name": "tutorial",
           "description": "",
           "attributes": [
+            {
+              "name": "index",
+              "description": "The current step index. If provided, will start the tutorial in that step.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
             {
               "name": "steps",
               "required": true,
@@ -11556,6 +11719,12 @@
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "update:index",
+              "description": "Fired every time the step index is changed. `-1` value means the tutorial is finished/skipped."
+            }
+          ],
           "source": {
             "module": "./src/components/tutorial/tutorial.vue",
             "symbol": "default"
@@ -11809,6 +11978,14 @@
           "name": "tutorial-stub",
           "description": "",
           "attributes": [
+            {
+              "name": "index",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
             {
               "name": "steps",
               "required": true,