@adyen/bento-vue2 1.81.1 → 1.83.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.81.1",
+  "version": "1.83.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2168,6 +2168,25 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "button-actions-loading-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "state",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/button-actions/__tests__/button-actions-loading-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "button-actions-with-menu",
           "description": "",
@@ -3892,7 +3911,7 @@
               "description": "An array of the values for each filter set in `value`.\n{@see BentoFilterValues}",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBar.props.filterValues.type"
+                "type": "BentoFilterValues"
               },
               "default": "() => []"
             },
@@ -3919,7 +3938,7 @@
               "description": "Filter bar search term useful to filter all the data by text",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBar.props.searchTerm.type"
+                "type": "BentoFilterBarSearchTerm"
               },
               "default": "undefined"
             },
@@ -5250,6 +5269,61 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-trend-cell",
+          "description": "",
+          "attributes": [
+            {
+              "name": "direction",
+              "required": false,
+              "description": "The direction of the trend icon to display.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDataGridTrendCellDirection"
+              },
+              "default": "'none'"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "The color variant, affecting both the icon and text.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDataGridTrendCellVariant"
+              },
+              "default": "'black'"
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "The numeric or string value to display. It will be formatted as a percentage.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-trend-cell/data-grid-trend-cell.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid-trend-cell-default-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-trend-cell/__tests__/data-grid-trend-cell-default-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid-trend-cell-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-trend-cell-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-with-slots-example",
           "description": "",
@@ -7605,28 +7679,48 @@
           "description": "",
           "attributes": [
             {
-              "name": "accept",
+              "name": "tooltipText",
               "required": false,
-              "description": "A string that defines the file types the file input should accept.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept",
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "string"
               },
               "default": "null"
             },
             {
-              "name": "condensed",
+              "name": "required",
               "required": false,
-              "description": "Reduces the size of the uploader area.",
+              "description": "If true, indicates that the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "description",
+              "name": "optional",
               "required": false,
-              "description": "Descriptive supporting text visbile underneath the label.",
+              "description": "If true, indicates that the field is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "label",
+              "required": false,
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7634,27 +7728,29 @@
               "default": "null"
             },
             {
-              "name": "disabled",
+              "name": "errorMessage",
               "required": false,
-              "description": "Disable the radio button (optional).",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "readonly",
+              "name": "disabled",
               "required": false,
-              "description": "If true, makes the field's value readonly, preventing user modification.",
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "errorMessage",
+              "name": "description",
               "required": false,
-              "description": "Renders file-uploader with an error state and the error message beneath the input box",
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7662,13 +7758,24 @@
               "default": "null"
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "The label of the component.",
+              "name": "accept",
+              "required": false,
+              "description": "A string that defines the file types the file input should accept.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "TSIndexedAccessType"
+              },
+              "default": "null"
+            },
+            {
+              "name": "condensed",
+              "required": false,
+              "description": "Reduces the size of the uploader area.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "maxCount",
@@ -7711,32 +7818,13 @@
               "default": "null"
             },
             {
-              "name": "optional",
-              "required": false,
-              "description": "Sets the field as optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "required",
+              "name": "placeholder",
               "required": false,
-              "description": "Sets the field as required.",
+              "description": "Placeholder is coming from FormField and is not allowed for FileUploader, so we're explicitly disabling it here",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "never"
               }
-            },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
             }
           ],
           "events": [
@@ -9041,6 +9129,16 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "activeViewIndex",
+              "required": false,
+              "description": "The active view index. Supports two-way binding via v-model:active-view-index.\nWhen provided, this takes precedence over `isDefault` on individual views for initial selection.\nChanges from outside the component will update the active view.\nHas no effect when `disableAutoSelect` is true.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "undefined"
             }
           ],
           "events": [
@@ -9079,6 +9177,10 @@
             {
               "name": "update:skip-unsaved-changes",
               "description": "Emitted when the user selects the prompt checkbox and closes the modal with a valid button action.\nOnly works when a string is pass into the `skipUnsavedChangesText` prop."
+            },
+            {
+              "name": "update:active-view-index",
+              "description": "Emitted when the active view index changes. Used for two-way binding with v-model:active-view-index."
             }
           ],
           "slots": [
@@ -9265,6 +9367,15 @@
                 "kind": "expression",
                 "type": "boolean"
               }
+            },
+            {
+              "name": "activeViewIndex",
+              "required": false,
+              "description": "The active view index. Supports two-way binding via v-model:active-view-index.\nWhen provided, this takes precedence over `isDefault` on individual views for initial selection.\nChanges from outside the component will update the active view.\nHas no effect when `disableAutoSelect` is true.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
             }
           ],
           "events": [
@@ -9303,6 +9414,10 @@
             {
               "name": "update:skip-unsaved-changes",
               "description": "Emitted when the user selects the prompt checkbox and closes the modal with a valid button action.\nOnly works when a string is pass into the `skipUnsavedChangesText` prop."
+            },
+            {
+              "name": "update:active-view-index",
+              "description": "Emitted when the active view index changes. Used for two-way binding with v-model:active-view-index."
             }
           ],
           "source": {
@@ -9310,6 +9425,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "header-with-views-controlled-active-view-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/header-with-views/__tests__/header-with-views-controlled-active-view-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "header-with-views-edit-form",
           "description": "",
@@ -10166,7 +10289,7 @@
               "description": "Selected country code",
               "value": {
                 "kind": "expression",
-                "type": "CountryCode"
+                "type": "BentoInputFieldPhoneNumberCountryCode"
               }
             },
             {
@@ -15864,6 +15987,16 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "setElementRef",
+              "required": false,
+              "description": "Callback function to safely capture the underlying DOM element of the tab.\nUseful for anchoring tooltips, popovers, or tutorials.",
+              "value": {
+                "kind": "expression",
+                "type": "TSFunctionType"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -16743,6 +16876,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tutorial-default-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/tutorial/__tests__/tutorial-default-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tutorial-indicator",
           "description": "",
@@ -17115,7 +17256,7 @@
             {
               "name": "wide",
               "required": false,
-              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "description": "Adds the medium class modifier.\nApplicable to the Body variant.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.81.1",
+  "version": "1.83.0",
   "description": "Adyen Bento Vue2 components",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "./dist/@types/index.d.ts",
@@ -48,7 +49,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.81.1"
+    "@adyen/bento-design-tokens": "1.83.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -80,17 +81,18 @@
     "@codemirror/view": "6.36.1",
     "@playwright/experimental-ct-vue2": "1.42.1",
     "@playwright/test": "1.42.1",
-    "@storybook/addon-a11y": "7.6.20",
-    "@storybook/addon-actions": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-storysource": "7.6.20",
-    "@storybook/blocks": "7.6.20",
-    "@storybook/core-common": "7.6.20",
-    "@storybook/core-server": "7.6.20",
+    "@storybook/addon-a11y": "7.6.21",
+    "@storybook/addon-actions": "7.6.21",
+    "@storybook/addon-essentials": "7.6.21",
+    "@storybook/addon-storysource": "7.6.21",
+    "@storybook/blocks": "7.6.21",
+    "@storybook/core-common": "7.6.21",
+    "@storybook/core-server": "7.6.21",
+    "@storybook/manager-api": "7.6.21",
     "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/theming": "7.6.20",
-    "@storybook/vue": "7.6.20",
-    "@storybook/vue-vite": "7.6.20",
+    "@storybook/theming": "7.6.21",
+    "@storybook/vue": "7.6.21",
+    "@storybook/vue-vite": "7.6.21",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/user-event": "14.4.3",
@@ -116,6 +118,7 @@
     "sass": "1.54.6",
     "sass-loader": "12.6.0",
     "shiki": "3.7.0",
+    "storybook": "7.6.21",
     "tsc-alias": "1.8.11",
     "typescript": "5.6.3",
     "vite": "5.4.21",
@@ -128,14 +131,14 @@
     "vue-router": "3.6.4",
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
-    "vue-tsc": "1.0.24",
+    "vue-tsc": "2.2.10",
     "zod": "3.25.35",
-    "@adyen/bento-cli": "0.8.1",
+    "@adyen/bento-cli": "0.8.3",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.8.1",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-icons-16": "7.4.1",
-    "@adyen/ui-assets-payment-method-icons": "10.5.1"
+    "@adyen/ui-assets-icons-16": "7.5.1",
+    "@adyen/bento-tailwind": "0.9.1",
+    "@adyen/ui-assets-payment-method-icons": "10.5.3"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"
@@ -143,7 +146,7 @@
   "generators": "./generators.json",
   "scripts": {
     "build": "pnpm run build:prod && pnpm run build:storybook",
-    "build:lib": "vite --config vite.production.config.ts build",
+    "build:lib": "vite --config vite.production.config.mts build",
     "build:dev": "NODE_ENV=development pnpm run clean:build && pnpm run build:lib --mode development build && pnpm run build:types && pnpm run build:webtypes",
     "build:watch": "NODE_ENV=development pnpm run build:lib --mode development --watch",
     "build:prod": "pnpm run clean:build && pnpm run build:type-check && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
@@ -154,26 +157,26 @@
     "build:types:use-form": "vue-tsc --skipLibCheck src/composables/use-form-validate-zod-4/index.ts --declaration --emitDeclarationOnly --declarationDir dist/@types/use-form-v4 && api-extractor run -c api-extractor.use-form.json --local && rm -rf dist/@types/use-form-v4/",
     "copy-components-defs": "cp src/components.d.ts dist/@types",
     "build:webtypes": "vue-docgen-web-types --outFile=./dist/web-types.json",
-    "build:storybook": "pnpm ts-node ./.storybook/build-storybook.ts ../../public/packages/vue2",
+    "build:storybook": "storybook build -c .storybook -o ../../public/packages/vue2",
     "component:create": "bento-cli component create",
     "clean": "pnpm run clean:build && pnpm run clean:storybook",
     "clean:build": "rm -rf ./dist",
     "clean:storybook": "rm -rf ./storybook-static",
-    "dev": "ts-node ./.storybook/start-storybook.ts",
-    "test": "TZ='Europe/Paris' vitest run --config ./vitest.config.ts",
+    "dev": "storybook dev -p 8112 -c .storybook",
+    "test": "TZ='Europe/Paris' vitest run --config ./vitest.config.mts",
     "test:changed": "TZ='Europe/Paris' vitest run --changed origin/main",
     "test:coverage": "pnpm run test --coverage",
     "test:list-changed": "TZ='Europe/Paris' vitest list --run --filesOnly --changed origin/main",
     "test:watch": "TZ='Europe/Paris' vitest watch",
     "e2e": "test/bin/e2e-docker.sh vue2",
-    "e2e:a11y": "pnpm run e2e:clean && playwright test -c ./playwright.integration.config.ts --project=accessibility",
+    "e2e:a11y": "pnpm run e2e:clean && NODE_OPTIONS='--no-experimental-strip-types' playwright test -c ./playwright.integration.config.mts --project=accessibility",
     "e2e:changed": "test/bin/e2e-docker.sh vue2 --changed",
     "e2e:clean": "rm -rf playwright/.cache || true",
-    "e2e:debug": "pnpm run e2e:ci --debug",
+    "e2e:debug": "NODE_OPTIONS='--no-experimental-strip-types' pnpm run e2e:ci --debug",
     "e2e:update": "test/bin/e2e-docker.sh vue2 --update-snapshots",
     "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 --project chromium*",
+    "e2e:ci": "pnpm run e2e:clean && playwright test -c ./playwright.integration.config.mts",
+    "e2e:ci:update": "pnpm run e2e:clean && playwright test -c playwright.integration.config.mts --update-snapshots --project chromium*",
     "netlify": "pnpm run --filter @adyen/bento-design-tokens build:dev && pnpm run --filter @adyen/bento-tailwind build && pnpm run build:storybook && pnpm run --filter @adyen/bento-storybook-ai build"
   }
 }