@adyen/eslint-plugin-bento 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 2.15.0 (2026-06-03)
+
+### Bug Fixes
+
+- fixed `deprecation-components-input-emit` error message wording ([5a22428fa](https://github.com/Adyen/bento/commit/5a22428fa))
+- updated `deprecation-components-error-prop` rule from fix to suggest ([edcf472fd](https://github.com/Adyen/bento/commit/edcf472fd))
+- updated `deprecation-components-has-error-prop` rule from fix to suggest ([f573b3643](https://github.com/Adyen/bento/commit/f573b3643))
+- updated `deprecation-bento-timeline-item-variant-prop` to replace values correctly ([989c92838](https://github.com/Adyen/bento/commit/989c92838))
+
+### Code Refactoring
+
+- extended `deprecation-components-input-emit` error message with race conditions example ([4030de20f](https://github.com/Adyen/bento/commit/4030de20f))
+
+### ❤️ Thank You
+
+- daver
+- erice
+- gerald
+
+
 ## 2.14.0 (2026-05-27)
 
 This was a version bump only for eslint to align it with other projects, there were no code changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [

package/rules/deprecation-bento-timeline-item-variant-prop/README.md

@@ -2,20 +2,28 @@
 
 ## Description
 
-The `variant` prop in the following components is deprecated:
+The `variant` prop in `bento-timeline-item` is deprecated. Use `status` instead.
 
-- `bento-timeline-item`
+The `variant` prop accepted `BentoTimelineItemVariant` enum values (icon names), while `status` accepts color strings.
+The autofix remaps values automatically:
 
-Please use `status` instead.
+| `variant` value                 | `status` value |
+| ------------------------------- | -------------- |
+| `SquareSmallIcon` / `DEFAULT`   | `black`        |
+| `CheckedCircleIcon` / `SUCCESS` | `green`        |
+| `CrossCircleIcon` / `CRITICAL`  | `red`          |
+
+> **Note:** If the variant value cannot be statically resolved (e.g. a variable reference), the autofix is skipped and
+> only the deprecation warning is reported.
 
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `variant` prop and autofixes it to `status` with the correct color value.
 
 ### ❌ Incorrect
 
 ```html
-<bento-timeline-item variant="SUCCESS" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
+<bento-timeline-item variant="CheckedCircleIcon" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
 ```
 
 ### ✅ Correct

package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/deprecation-bento-timeline-item-variant-prop.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <bento-timeline-item variant="SUCCESS" />
+        <bento-timeline-item variant="CheckedCircleIcon" />
         <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
-        <bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" />
+        <bento-timeline-item :variant="BentoTimelineItemVariant.DEFAULT" />
     </div>
 </template>
 

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.integration.test.ts

@@ -8,8 +8,12 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
         // Load the test file generated alongside this one
         const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-bento-timeline-item-variant-prop.vue');
 
+        // Strip any non-JSON preamble (e.g. pnpm warnings)
+        const rawOutput = execFileSyncEslintVueFiles(eslintrc, vueFile);
+        const jsonStart = rawOutput.indexOf('[');
+
         // Execute the linter
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+        const result = JSON.parse(jsonStart >= 0 ? rawOutput.slice(jsonStart) : rawOutput);
 
         // 3 examples: static, shorthand, longhand
         expect(result[0].warningCount).toBe(3);
@@ -24,7 +28,7 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
             message: `The "variant" prop is deprecated. Please use "status" instead.`,
 
             fix: expect.objectContaining({
-                text: expect.stringContaining('status'),
+                text: expect.stringContaining('status='),
             }),
         });
     });

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.js

@@ -7,6 +7,47 @@
 
 const VueUtils = require('eslint-plugin-vue/lib/utils');
 
+// Maps BentoTimelineItemVariant enum values (runtime strings) to status colors
+const VARIANT_VALUE_TO_STATUS = {
+    SquareSmallIcon: 'black',
+    CheckedCircleIcon: 'green',
+    CrossCircleIcon: 'red',
+};
+
+// Maps BentoTimelineItemVariant enum member names to status colors
+const VARIANT_ENUM_KEY_TO_STATUS = {
+    DEFAULT: 'black',
+    SUCCESS: 'green',
+    CRITICAL: 'red',
+};
+
+/**
+ * Resolves a dynamic expression to a status color string.
+ * Returns null if the expression cannot be statically resolved.
+ */
+function resolveExpressionToStatus(expression) {
+    if (!expression) {
+        return null;
+    }
+
+    // String literal: :variant="'CheckedCircleIcon'"
+    if (expression.type === 'Literal' && typeof expression.value === 'string') {
+        return VARIANT_VALUE_TO_STATUS[expression.value] ?? null;
+    }
+
+    // Enum member: :variant="BentoTimelineItemVariant.SUCCESS"
+    if (
+        expression.type === 'MemberExpression' &&
+        expression.object?.type === 'Identifier' &&
+        expression.object.name === 'BentoTimelineItemVariant' &&
+        expression.property?.type === 'Identifier'
+    ) {
+        return VARIANT_ENUM_KEY_TO_STATUS[expression.property.name] ?? null;
+    }
+
+    return null;
+}
+
 /** @type {RuleModule} */
 module.exports = {
     meta: {
@@ -44,33 +85,41 @@ module.exports = {
         /* PROP DEPRECATION                                 */
         /* ------------------------------------------------ */
         return VueUtils.defineTemplateBodyVisitor(context, {
-            // 1. STATIC: value="foo"
+            // 1. STATIC: variant="CheckedCircleIcon"
             [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=false][key.name="variant"]`](
                 node
             ) {
+                const staticValue = node.value?.value;
+                const mappedStatus = staticValue ? VARIANT_VALUE_TO_STATUS[staticValue] : null;
+
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key, 'status');
-                        },
-                    }),
+                    ...(autofix &&
+                        mappedStatus && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, `status="${mappedStatus}"`);
+                            },
+                        }),
                 });
             },
 
-            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            // 2. DYNAMIC: :variant="BentoTimelineItemVariant.SUCCESS" or v-bind:variant="..."
             [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
                 node
             ) {
+                const expression = node.value?.expression;
+                const mappedStatus = resolveExpressionToStatus(expression);
+
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key.argument, 'status');
-                        },
-                    }),
+                    ...(autofix &&
+                        mappedStatus && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, `status="${mappedStatus}"`);
+                            },
+                        }),
                 });
             },
         });

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.test.ts

@@ -18,20 +18,21 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
     ruleTester.run('deprecation-bento-timeline-item-variant-prop', deprecationBentoTimelineItemVariantProp, {
         valid: [
             {
-                name: 'Valid usage for bento-timeline-item',
+                name: 'Valid usage with status prop',
                 filename: 'test.vue',
                 code: `
                 <template>
-                    <bento-timeline-item status="val" />
+                    <bento-timeline-item status="green" />
                 </template>
                 `,
             },
         ],
         invalid: [
+            // No autofix when disabled
             {
                 name: 'Invalid: autofix disabled (explicit false)',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item variant="val" /></template>`,
+                code: `<template><bento-timeline-item variant="CheckedCircleIcon" /></template>`,
                 output: null,
                 options: [{ autofix: false }],
                 errors: [{ messageId: 'deprecation' }],
@@ -39,25 +40,99 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
             {
                 name: 'Invalid: autofix disabled (no options)',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item :variant="val" /></template>`,
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" /></template>`,
                 output: null,
                 errors: [{ messageId: 'deprecation' }],
             },
-            // bento-timeline-item: Static
+
+            // Static values — remaps enum value strings to colors
             {
-                name: 'Invalid: Static prop on bento-timeline-item',
+                name: 'Invalid: Static variant="SquareSmallIcon" → status="black"',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item variant="val" /></template>`,
-                output: `<template><bento-timeline-item status="val" /></template>`,
+                code: `<template><bento-timeline-item variant="SquareSmallIcon" /></template>`,
+                output: `<template><bento-timeline-item status="black" /></template>`,
                 options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
-            // bento-timeline-item: Shorthand
             {
-                name: 'Invalid: Dynamic prop on bento-timeline-item',
+                name: 'Invalid: Static variant="CheckedCircleIcon" → status="green"',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item :variant="val" /></template>`,
-                output: `<template><bento-timeline-item :status="val" /></template>`,
+                code: `<template><bento-timeline-item variant="CheckedCircleIcon" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Static variant="CrossCircleIcon" → status="red"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="CrossCircleIcon" /></template>`,
+                output: `<template><bento-timeline-item status="red" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Static with unknown value — no fix applied
+            {
+                name: 'Invalid: Static variant with unknown value does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="unknownValue" /></template>`,
+                output: null,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with enum member expression — remaps enum key to color
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.DEFAULT" → status="black"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.DEFAULT" /></template>`,
+                output: `<template><bento-timeline-item status="black" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.SUCCESS" → status="green"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.CRITICAL" → status="red"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" /></template>`,
+                output: `<template><bento-timeline-item status="red" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with string literal — remaps value to color
+            {
+                name: 'Invalid: Dynamic :variant="\'CheckedCircleIcon\'" → status="green"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="'CheckedCircleIcon'" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with unknown expression — no fix applied
+            {
+                name: 'Invalid: Dynamic :variant with unknown expression does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="computedVariant" /></template>`,
+                output: null,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with non-BentoTimelineItemVariant enum — no fix applied
+            {
+                name: 'Invalid: Dynamic :variant with unrelated enum does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="customStatus.SUCCESS" /></template>`,
+                output: null,
                 options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },

package/rules/deprecation-components-error-prop/README.md

@@ -10,9 +10,13 @@ The `error` prop in the following components is deprecated:
 
 Please use `error-message` instead.
 
+> **Note:** The `error` prop is a `boolean` that only toggles error styling, while `error-message` is a `string` that
+> both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
+> value from a boolean to an error message string.
+
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `error` prop and provides an IDE suggestion (not an autofix) to rename it.
 
 ### ❌ Incorrect
 
@@ -31,13 +35,13 @@ This rule reports usages of the deprecated item.
 ### ✅ Correct
 
 ```html
-<bento-dropdown error-message="value" />
+<bento-dropdown error-message="Error message text" />
 ```
 
 ```html
-<bento-input-field error-message="value" />
+<bento-input-field error-message="Error message text" />
 ```
 
 ```html
-<bento-input-field-phone-number error-message="value" />
+<bento-input-field-phone-number error-message="Error message text" />
 ```

package/rules/deprecation-components-error-prop/__tests__/eslint.config.js

@@ -19,7 +19,7 @@ module.exports = defineConfig([
         },
         rules: {
             // Register the specific rule we are testing
-            '@adyen/bento/deprecation-components-error-prop': ['warn', { autofix: true }],
+            '@adyen/bento/deprecation-components-error-prop': 'warn',
         },
         files: ['**/*.vue'],
     },

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.integration.test.ts

@@ -8,8 +8,10 @@ describe('@adyen/bento/deprecation-components-error-prop', () => {
         // Load the test file generated alongside this one
         const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-components-error-prop.vue');
 
-        // Execute the linter
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+        // Execute the linter — strip any non-JSON preamble (e.g. pnpm warnings)
+        const rawOutput = execFileSyncEslintVueFiles(eslintrc, vueFile);
+        const jsonStart = rawOutput.indexOf('[{"');
+        const result = JSON.parse(jsonStart >= 0 ? rawOutput.slice(jsonStart) : rawOutput);
 
         /* ------------------------------------------------ */
         /* CASE 2: SINGLE REPLACEMENT                       */
@@ -20,18 +22,20 @@ describe('@adyen/bento/deprecation-components-error-prop', () => {
         const numberOfComponents = 3;
         expect(result[0].warningCount).toBe(numberOfComponents * 3);
 
-        // Verify the message structure on the first error found.
-        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        // Verify the message structure on the first warning found.
         expect(result[0].messages[0]).toMatchObject({
             ruleId: '@adyen/bento/deprecation-components-error-prop',
             severity: 1,
-
             messageId: 'deprecation',
-            message: `The "error" prop is deprecated. Please use "error-message" instead.`,
-
-            fix: expect.objectContaining({
-                text: expect.stringContaining('error-message'),
-            }),
+            message: `The "error" prop is deprecated. Use "error-message" instead. Note that "error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestions: expect.arrayContaining([
+                expect.objectContaining({
+                    messageId: 'suggestReplace',
+                    fix: expect.objectContaining({
+                        text: expect.stringContaining('error-message'),
+                    }),
+                }),
+            ]),
         });
     });
 });

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.js

@@ -19,59 +19,49 @@ module.exports = {
             recommended: true,
         },
         messages: {
-            deprecation: `The "error" prop is deprecated. Please use "error-message" instead.`,
+            deprecation: `The "error" prop is deprecated. Use "error-message" instead. Note that "error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestReplace: `Replace "error" with "error-message". Remember to update the value from a boolean to a string error message.`,
         },
-        fixable: 'code',
-        schema: [
-            {
-                type: 'object',
-                properties: {
-                    autofix: {
-                        type: 'boolean',
-                        default: false,
-                    },
-                },
-                additionalProperties: false,
-            },
-        ],
+        hasSuggestions: true,
+        schema: [],
     },
 
     /** @param {RuleContext} context */
     create(context) {
-        const options = context.options[0] || {};
-        const autofix = options.autofix === true;
-
-        /* ------------------------------------------------ */
-        /* CASE 2: PROP DEPRECATION (Multiple Components)   */
-        /* ------------------------------------------------ */
         return VueUtils.defineTemplateBodyVisitor(context, {
-            // 1. STATIC: value="foo"
+            // 1. STATIC: error="foo"
             [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=false][key.name="error"]`](
                 node
             ) {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
 
-            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            // 2. DYNAMIC: :error="foo" or v-bind:error="foo"
             [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="error"]`](
                 node
             ) {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key.argument, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key.argument, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
         });

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.test.ts

@@ -46,74 +46,107 @@ describe('@adyen/bento/deprecation-components-error-prop', () => {
             },
         ],
         invalid: [
-            {
-                name: 'Invalid: autofix disabled (explicit false)',
-                filename: 'test.vue',
-                code: `<template><bento-dropdown error="val" /></template>`,
-                output: null,
-                options: [{ autofix: false }],
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Invalid: autofix disabled (no options)',
-                filename: 'test.vue',
-                code: `<template><bento-dropdown :error="val" /></template>`,
-                output: null,
-                errors: [{ messageId: 'deprecation' }],
-            },
             // bento-dropdown: Static
             {
                 name: 'Invalid: Static prop on bento-dropdown',
                 filename: 'test.vue',
                 code: `<template><bento-dropdown error="val" /></template>`,
-                output: `<template><bento-dropdown error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-dropdown error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-dropdown: Shorthand
+            // bento-dropdown: Dynamic
             {
                 name: 'Invalid: Dynamic prop on bento-dropdown',
                 filename: 'test.vue',
                 code: `<template><bento-dropdown :error="val" /></template>`,
-                output: `<template><bento-dropdown :error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-dropdown :error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
             // bento-input-field: Static
             {
                 name: 'Invalid: Static prop on bento-input-field',
                 filename: 'test.vue',
                 code: `<template><bento-input-field error="val" /></template>`,
-                output: `<template><bento-input-field error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-input-field error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-input-field: Shorthand
+            // bento-input-field: Dynamic
             {
                 name: 'Invalid: Dynamic prop on bento-input-field',
                 filename: 'test.vue',
                 code: `<template><bento-input-field :error="val" /></template>`,
-                output: `<template><bento-input-field :error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-input-field :error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
             // bento-input-field-phone-number: Static
             {
                 name: 'Invalid: Static prop on bento-input-field-phone-number',
                 filename: 'test.vue',
                 code: `<template><bento-input-field-phone-number error="val" /></template>`,
-                output: `<template><bento-input-field-phone-number error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-input-field-phone-number error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-input-field-phone-number: Shorthand
+            // bento-input-field-phone-number: Dynamic
             {
                 name: 'Invalid: Dynamic prop on bento-input-field-phone-number',
                 filename: 'test.vue',
                 code: `<template><bento-input-field-phone-number :error="val" /></template>`,
-                output: `<template><bento-input-field-phone-number :error-message="val" /></template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-input-field-phone-number :error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
         ],
     });

package/rules/deprecation-components-has-error-prop/README.md

@@ -9,9 +9,13 @@ The `hasError` prop in the following components is deprecated:
 
 Please use `errorMessage` instead.
 
+> **Note:** The `hasError` prop is a `boolean` that only toggles error styling, while `errorMessage` is a `string` that
+> both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
+> value from a boolean to an error message string.
+
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `hasError` prop and provides an IDE suggestion (not an autofix) to rename it.
 
 ### ❌ Incorrect
 
@@ -26,9 +30,9 @@ This rule reports usages of the deprecated item.
 ### ✅ Correct
 
 ```html
-<bento-checkbox-group errorMessage="value" />
+<bento-checkbox-group errorMessage="Error message text" />
 ```
 
 ```html
-<bento-radio-group errorMessage="value" />
+<bento-radio-group errorMessage="Error message text" />
 ```

package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.integration.test.ts

@@ -20,10 +20,18 @@ describe('@adyen/bento/deprecation-components-has-error-prop', () => {
             severity: 1,
 
             messageId: 'deprecation',
-            message: `The "has-error" prop is deprecated. Please use "error-message" instead.`,
+            message: `The "has-error" prop is deprecated. Use "error-message" instead. Note that "has-error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestions: expect.arrayContaining([
+                expect.objectContaining({
+                    messageId: 'suggestReplace',
+                    fix: expect.objectContaining({
+                        text: expect.stringContaining('error-message'),
+                    }),
+                }),
+            ]),
         });
 
-        // Without autofix option, no fix should be present
+        // The rule should provide a suggestion, not an autofix, because the replacement changes the expected value type.
         expect(result[0].messages[0].fix).toBeUndefined();
     });
 });

package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.js

@@ -18,27 +18,15 @@ module.exports = {
             recommended: true,
         },
         messages: {
-            deprecation: `The "has-error" prop is deprecated. Please use "error-message" instead.`,
+            deprecation: `The "has-error" prop is deprecated. Use "error-message" instead. Note that "has-error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestReplace: `Replace "has-error" with "error-message". Remember to update the value from a boolean to a string error message.`,
         },
-        fixable: 'code',
-        schema: [
-            {
-                type: 'object',
-                properties: {
-                    autofix: {
-                        type: 'boolean',
-                        default: false,
-                    },
-                },
-                additionalProperties: false,
-            },
-        ],
+        hasSuggestions: true,
+        schema: [],
     },
 
     /** @param {RuleContext} context */
     create(context) {
-        const options = context.options[0] || {};
-        const autofix = options.autofix === true;
         /* ------------------------------------------------ */
         /* CASE 2: PROP DEPRECATION (Multiple Components)   */
         /* ------------------------------------------------ */
@@ -50,11 +38,14 @@ module.exports = {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
 
@@ -65,11 +56,14 @@ module.exports = {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key.argument, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key.argument, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
         });

package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.test.ts

@@ -37,96 +37,85 @@ describe('@adyen/bento/deprecation-components-has-error-prop', () => {
             },
         ],
         invalid: [
-            // bento-checkbox-group: Static
             {
                 name: 'Invalid: Static prop on bento-checkbox-group',
                 filename: 'test.vue',
                 code: `<template><bento-checkbox-group has-error="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-checkbox-group error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-checkbox-group: Shorthand
             {
-                name: 'Invalid: Dynamic prop on bento-checkbox-group',
+                name: 'Invalid: Dynamic shorthand prop on bento-checkbox-group',
                 filename: 'test.vue',
                 code: `<template><bento-checkbox-group :has-error="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-checkbox-group :error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-radio-group: Static
             {
                 name: 'Invalid: Static prop on bento-radio-group',
                 filename: 'test.vue',
                 code: `<template><bento-radio-group has-error="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-radio-group error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-            // bento-radio-group: Shorthand
             {
-                name: 'Invalid: Dynamic prop on bento-radio-group',
+                name: 'Invalid: Dynamic shorthand prop on bento-radio-group',
                 filename: 'test.vue',
                 code: `<template><bento-radio-group :has-error="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-radio-group :error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
-        ],
-    });
-
-    /* ------------------------------------------------ */
-    /* AUTOFIX TESTS                                    */
-    /* ------------------------------------------------ */
-    ruleTester.run('deprecation-components-has-error-prop (autofix enabled)', deprecationComponentsHasErrorProp, {
-        valid: [
             {
-                name: 'Valid: error-message prop on bento-checkbox-group (autofix enabled)',
+                name: 'Invalid: Dynamic longhand prop on bento-radio-group',
                 filename: 'test.vue',
-                options: [{ autofix: true }],
-                code: `<template><bento-checkbox-group error-message="val" /></template>`,
-            },
-        ],
-        invalid: [
-            {
-                name: 'Autofix: static prop on bento-checkbox-group',
-                filename: 'test.vue',
-                options: [{ autofix: true }],
-                code: `<template><bento-checkbox-group has-error="val" /></template>`,
-                output: `<template><bento-checkbox-group error-message="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Autofix: dynamic prop on bento-checkbox-group',
-                filename: 'test.vue',
-                options: [{ autofix: true }],
-                code: `<template><bento-checkbox-group :has-error="val" /></template>`,
-                output: `<template><bento-checkbox-group :error-message="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Autofix: static prop on bento-radio-group',
-                filename: 'test.vue',
-                options: [{ autofix: true }],
-                code: `<template><bento-radio-group has-error="val" /></template>`,
-                output: `<template><bento-radio-group error-message="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Autofix: dynamic prop on bento-radio-group',
-                filename: 'test.vue',
-                options: [{ autofix: true }],
-                code: `<template><bento-radio-group :has-error="val" /></template>`,
-                output: `<template><bento-radio-group :error-message="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Autofix: v-bind longhand on bento-radio-group',
-                filename: 'test.vue',
-                options: [{ autofix: true }],
                 code: `<template><bento-radio-group v-bind:has-error="val" /></template>`,
-                output: `<template><bento-radio-group v-bind:error-message="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Autofix: does not fix when autofix is false',
-                filename: 'test.vue',
-                options: [{ autofix: false }],
-                code: `<template><bento-checkbox-group has-error="val" /></template>`,
-                errors: [{ messageId: 'deprecation' }],
+                errors: [
+                    {
+                        messageId: 'deprecation',
+                        suggestions: [
+                            {
+                                messageId: 'suggestReplace',
+                                output: `<template><bento-radio-group v-bind:error-message="val" /></template>`,
+                            },
+                        ],
+                    },
+                ],
             },
         ],
     });

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.integration.test.ts

@@ -25,7 +25,15 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
             severity: 1,
 
             messageId: 'deprecation',
-            message: `The "input" emit is deprecated. Please use "update:model-value" instead.`,
+            message: `The \`input\` emit is deprecated. Please use \`update:model-value\` instead.
+            
+Be wary of undesired side effects and race conditions if \`v-model\` is used in conjunction with \`@input\`.
+
+Incorrect:
+<bento-component v-model="text" @input="onInput" />
+
+Correct:
+<bento-component :model-value="text" @update:model-value="onInput" />`,
 
             fix: expect.objectContaining({
                 text: expect.stringContaining('update:model-value'),

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.js

@@ -19,7 +19,15 @@ module.exports = {
             recommended: true,
         },
         messages: {
-            deprecation: `The "input" emit is deprecated. Please use "update:model-value" instead.`,
+            deprecation: `The \`input\` emit is deprecated. Please use \`update:model-value\` instead.
+            
+Be wary of undesired side effects and race conditions if \`v-model\` is used in conjunction with \`@input\`.
+
+Incorrect:
+<bento-component v-model="text" @input="onInput" />
+
+Correct:
+<bento-component :model-value="text" @update:model-value="onInput" />`,
         },
         fixable: 'code',
         schema: [