@adyen/bento-vue2 1.57.0 → 1.58.0

package/dist/styles/utility.css

@@ -2,49 +2,49 @@
     background-color: #ffffff;
 }
 .b-color-background-primary-hover {
-    background-color: #f7f7f8;
+    background-color: #f4f5f6;
 }
 .b-color-background-primary-active {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-secondary {
-    background-color: #f7f7f8;
+    background-color: #f4f5f6;
 }
 .b-color-background-secondary-hover {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-secondary-active {
-    background-color: #e3e5e9;
+    background-color: #e2e5e7;
 }
 .b-color-background-tertiary {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-tertiary-hover {
-    background-color: #e3e5e9;
+    background-color: #e2e5e7;
 }
 .b-color-background-tertiary-active {
-    background-color: #dbdee2;
+    background-color: #dadddf;
 }
 .b-color-background-quaternary {
-    background-color: #c0c5cc;
+    background-color: #c0c5ca;
 }
 .b-color-background-quaternary-hover {
-    background-color: #b8bdc6;
+    background-color: #b7bdc2;
 }
 .b-color-background-quaternary-active {
-    background-color: #afb5bf;
+    background-color: #aeb5ba;
 }
 .b-color-background-modal {
     background-color: #ffffff;
 }
 .b-color-background-modal-hover {
-    background-color: #f7f7f8;
+    background-color: #f4f5f6;
 }
 .b-color-background-modal-active {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-selected {
     background-color: #e3f0ff;
@@ -68,10 +68,10 @@
     background-color: #dd7d00;
 }
 .b-color-background-success-weak {
-    background-color: #edfaf3;
+    background-color: #e4faef;
 }
 .b-color-background-success-strong {
-    background-color: #07893c;
+    background-color: #008845;
 }
 .b-color-background-highlight-weak {
     background-color: #f2f8ff;
@@ -80,25 +80,25 @@
     background-color: #0070f5;
 }
 .b-color-background-inverse-primary {
-    background-color: #00112c;
+    background-color: #001222;
 }
 .b-color-background-inverse-primary-hover {
-    background-color: #5c687c;
+    background-color: #5c6874;
 }
 .b-color-background-inverse-primary-active {
-    background-color: #6d7789;
+    background-color: #6c7782;
 }
 .b-color-background-inverse-secondary {
-    background-color: #1a2a44;
+    background-color: #1a2b3b;
 }
 .b-color-background-inverse-secondary-hover {
-    background-color: #283750;
+    background-color: #273746;
 }
 .b-color-background-inverse-secondary-active {
-    background-color: #37455d;
+    background-color: #364553;
 }
 .b-color-background-inverse-disabled {
-    background-color: #283750;
+    background-color: #273746;
 }
 .b-color-background-inverse-critical-weak {
     background-color: #611313;
@@ -116,94 +116,94 @@
     background-color: #ffffff;
 }
 .b-color-background-always-light-hover {
-    background-color: #f7f7f8;
+    background-color: #f4f5f6;
 }
 .b-color-background-always-light-active {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-light-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-light-selected {
     background-color: #e3f0ff;
 }
 .b-color-background-always-dark {
-    background-color: #00112c;
+    background-color: #001222;
 }
 .b-color-background-always-dark-hover {
-    background-color: #5c687c;
+    background-color: #5c6874;
 }
 .b-color-background-always-dark-active {
-    background-color: #8d95a3;
+    background-color: #8c959d;
 }
 .b-color-background-always-dark-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-dark-selected {
     background-color: #002f68;
 }
 .b-color-background-always-dark-primary {
-    background-color: #00112c;
+    background-color: #001222;
 }
 .b-color-background-always-dark-primary-hover {
-    background-color: #14243e;
+    background-color: #132434;
 }
 .b-color-background-always-dark-primary-active {
-    background-color: #22314a;
+    background-color: #213140;
 }
 .b-color-background-always-dark-primary-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-dark-primary-selected {
     background-color: #002f68;
 }
 .b-color-background-always-dark-secondary {
-    background-color: #22314a;
+    background-color: #213140;
 }
 .b-color-background-always-dark-secondary-hover {
-    background-color: #37455d;
+    background-color: #364553;
 }
 .b-color-background-always-dark-secondary-active {
-    background-color: #455368;
+    background-color: #455460;
 }
 .b-color-background-always-dark-secondary-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-dark-secondary-selected {
     background-color: #002f68;
 }
 .b-color-background-always-dark-tertiary {
-    background-color: #2f3e56;
+    background-color: #2f3e4d;
 }
 .b-color-background-always-dark-tertiary-hover {
-    background-color: #3d4c62;
+    background-color: #3d4c5a;
 }
 .b-color-background-always-dark-tertiary-active {
-    background-color: #455368;
+    background-color: #455460;
 }
 .b-color-background-always-dark-tertiary-disabled {
-    background-color: #eeeff1;
+    background-color: #ecedef;
 }
 .b-color-background-always-dark-tertiary-selected {
     background-color: #002f68;
 }
 .b-color-label-primary {
-    color: #00112c;
+    color: #001222;
 }
 .b-color-label-primary-hover {
-    color: #5c687c;
+    color: #5c6874;
 }
 .b-color-label-primary-active {
-    color: #6d7789;
+    color: #6c7782;
 }
 .b-color-label-secondary {
-    color: #5c687c;
+    color: #5c6874;
 }
 .b-color-label-tertiary {
-    color: #8d95a3;
+    color: #8c959d;
 }
 .b-color-label-disabled {
-    color: #8d95a3;
+    color: #8c959d;
 }
 .b-color-label-critical {
     color: #e22d2d;
@@ -221,7 +221,7 @@
     color: #0070f5;
 }
 .b-color-label-success {
-    color: #07893c;
+    color: #008845;
 }
 .b-color-label-on-color {
     color: #ffffff;
@@ -230,16 +230,16 @@
     color: #ffffff;
 }
 .b-color-label-inverse-primary-hover {
-    color: #f7f7f8;
+    color: #f4f5f6;
 }
 .b-color-label-inverse-primary-active {
-    color: #eeeff1;
+    color: #ecedef;
 }
 .b-color-label-inverse-secondary {
-    color: #9ea6b1;
+    color: #9da5ac;
 }
 .b-color-label-inverse-disabled {
-    color: #747f8f;
+    color: #737e88;
 }
 .b-color-label-inverse-critical {
     color: #f99c9c;
@@ -257,7 +257,7 @@
     color: #9b5700;
 }
 .b-color-label-on-background-success-weak {
-    color: #067934;
+    color: #00773c;
 }
 .b-color-label-on-background-highlight-weak {
     color: #0063d7;
@@ -266,34 +266,34 @@
     color: #ffffff;
 }
 .b-color-label-always-light-primary {
-    color: #eeeff1;
+    color: #ecedef;
 }
 .b-color-label-always-light-primary-hover {
-    color: #c9cdd3;
+    color: #c8ccd0;
 }
 .b-color-label-always-light-primary-active {
-    color: #9ea6b1;
+    color: #959da5;
 }
 .b-color-label-always-light-secondary {
-    color: #a7adb8;
+    color: #a6adb3;
 }
 .b-color-label-always-light-secondary-hover {
-    color: #9ea6b1;
+    color: #959da5;
 }
 .b-color-label-always-light-secondary-active {
-    color: #747f8f;
+    color: #737e88;
 }
 .b-color-label-always-light-tertiary {
-    color: #848e9c;
+    color: #848d96;
 }
 .b-color-label-always-light-tertiary-hover {
-    color: #747f8f;
+    color: #737e88;
 }
 .b-color-label-always-light-tertiary-active {
-    color: #556276;
+    color: #54616d;
 }
 .b-color-label-always-dark {
-    color: #00112c;
+    color: #001222;
 }
 .b-padding-100 {
     padding: 32px !important;

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.CNEeGgWh.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.fm_VmUVA.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tag.js

@@ -1,4 +1,4 @@
-import { B as t, a as e } from "./chunks/tag.C7kJJ5Ki.js";
+import { B as t, a as e } from "./chunks/tag.DczYlfXd.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.CdA36VsY.js";
+import { B as o } from "./chunks/textarea.B7BgCn_l.js";
 export {
   o as BentoTextarea
 };

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.D87PFH_o.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.DdF6EN2w.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.D74hJVBb.js";
+import { t as r } from "./chunks/tutorial.DIYd-V8c.js";
 export {
   r as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -752,6 +752,24 @@
                 "type": "BentoPopover.props.fitContent"
               }
             },
+            {
+              "name": "tooltipText",
+              "description": "Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available.",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoTooltipPosition}`"
+              },
+              "default": "undefined"
+            },
             {
               "name": "value",
               "description": "The current value of the filter, used for v-model.",
@@ -832,7 +850,7 @@
             },
             {
               "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - listboxItems: The option elements to populate the filter with.",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - positiveOption: The positive option label/value\n  - negativeOption: The positive option label/value\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
               "value": {
                 "kind": "expression",
                 "type": "BentoBooleanFilterOptions"
@@ -1194,7 +1212,7 @@
             },
             {
               "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
               "value": {
                 "kind": "expression",
                 "type": "BentoDateFilterOptions"
@@ -1408,7 +1426,7 @@
             },
             {
               "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - allowTimeInput: Allows user to enter time values in the form\n  - firstDayOfWeek: Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - maxRange: Set a maximum number of dates to be selectable by the range\n  - numberOfMonths: Number of months rendered on pane\n  - quickSelectRanges: An array that sets the custom range dropdown items. @see BentoDateRangePicker\n  - showEndDateOnOpen: Upon opening date range picker, end date's month will be pre-selected.",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - allowTimeInput: Allows user to enter time values in the form\n  - firstDayOfWeek: Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - maxRange: Set a maximum number of dates to be selectable by the range\n  - numberOfMonths: Number of months rendered on pane\n  - quickSelectRanges: An array that sets the custom range dropdown items. @see BentoDateRangePicker\n  - showEndDateOnOpen: Upon opening date range picker, end date's month will be pre-selected.\n  - granularities: A list of available granularities.\n  - variant: The type of calendar to display. Defaults to showing days.\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
               "value": {
                 "kind": "expression",
                 "type": "BentoDateRangeFilterOptions"
@@ -2379,6 +2397,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoRangeFilterOptions"
+              },
+              "default": "undefined"
             }
           ],
           "source": {
@@ -5068,6 +5095,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "rowActionsMaximumWidth",
+              "description": "The maximum width of the row actions in all rows",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
             }
           ],
           "events": [
@@ -8839,7 +8875,7 @@
             {
               "name": "validation",
               "required": false,
-              "description": "Configuration object for password field validation.\n\nThis object defines the validation criteria and associated messages for a password field.\nIt includes the following properties:\n\n- `title`: The title displayed at the top of the validation hint.\n- `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n- `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n\nBy default, the validation checks that:\n\n- The value has a minimum length of 12 characters.\n- The value contains at least one lowercase letter.\n- The value contains at least one uppercase letter.\n- The value contains at least one numeric digit.\n- The value contains at least one special character.",
+              "description": "Configuration object for password field validation.\n\nThis object defines the validation criteria and associated messages for a password field.\nIt includes the following properties:\n\n- `title`: The title displayed at the top of the validation hint.\n- `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n- `extendDefaultValidation`: Set to true if you want to add your custom rules to the default validation instead of overriding the list.\n- `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n\nBy default, the validation checks that:\n\n- The value has a minimum length of 12 characters.\n- The value contains at least one lowercase letter.\n- The value contains at least one uppercase letter.\n- The value contains at least one numeric digit.\n- The value contains at least one special character.",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputFieldPasswordValidation"
@@ -9082,7 +9118,7 @@
             {
               "name": "options",
               "required": false,
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - placeholder: allows to set a placeholder to the search bar\n  - dropdown (deprecated): all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info.\n  - dropdownPosition (deprecated): allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values.\n  - variant (deprecated): can be `undefined` or set to `dropdown`. Enables dropdown input variant.",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - placeholder: allows to set a placeholder to the search bar\n  - dropdown (deprecated): all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info.\n  - dropdownPosition (deprecated): allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values.\n  - variant (deprecated): can be `undefined` or set to `dropdown`. Enables dropdown input variant.\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputFilterOptions"
@@ -9169,7 +9205,7 @@
             {
               "name": "options",
               "required": false,
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - dropdown: all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info.\n  - dropdownPosition: allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values.",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - dropdown: all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info.\n  - dropdownPosition: allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values.\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputWithDropdownFilterOptions"
@@ -10761,6 +10797,16 @@
                 "type": "number"
               },
               "default": "50"
+            },
+            {
+              "name": "totalCount",
+              "required": false,
+              "description": "The total number of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,7 +43,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.57.0"
+    "@adyen/bento-design-tokens": "1.58.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -135,7 +135,7 @@
     "vue-tsc": "1.0.24",
     "@adyen/bento-cli": "0.2.4",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.3.8",
+    "@adyen/bento-tailwind": "0.3.9",
     "@adyen/ui-assets-icons-16": "6.2.0",
     "@adyen/ui-assets-payment-method-icons": "9.1.0"
   },
@@ -171,7 +171,7 @@
     "test:list-changed": "TZ='Europe/Paris' vitest list --run --filesOnly --changed origin/main",
     "test:watch": "TZ='Europe/Paris' vitest watch",
     "e2e:bento": "test/bin/e2e-docker.sh vue2",
-    "e2e:bento:update": "test/bin/e2e-docker.sh vue2",
+    "e2e:bento:update": "test/bin/e2e-docker.sh vue2 --update-snapshots",
     "e2e:legacy": "test/bin/e2e-docker.sh vue2 --legacy",
     "e2e:legacy:debug": "BENTO_THEME=legacy pnpm run e2e:debug",
     "e2e:legacy:update": "test/bin/e2e-docker.sh vue2 --update-snapshots --legacy",
@@ -179,7 +179,7 @@
     "e2e:changed": "test/bin/e2e-docker.sh vue2 --changed",
     "e2e:clean": "rm -rf playwright/.cache || true",
     "e2e:debug": "pnpm run e2e:ci --debug",
-    "e2e:update": "pnpm run e2e:legacy:update vue2 && pnpm run e2e:bento:update vue2",
+    "e2e:update": "pnpm run e2e:legacy:update && pnpm run e2e:bento:update",
     "e2e:report": "playwright show-report playwright-report",
     "e2e:ci": "pnpm run e2e:clean && playwright test -c ./playwright.integration.config.ts",
     "e2e:ci:update": "pnpm run e2e:clean && playwright test -c playwright.integration.config.ts --update-snapshots",