@adyen/eslint-plugin-bento 2.23.0 → 2.24.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2.24.1 (2026-09-09)
+
+This was a version bump only for eslint to align it with other projects, there were no code changes.
+
+
+## 2.24.0 (2026-09-09)
+
+### Features
+
+- added `useBentoTranslationOverrides` composable to override translated strings in vue 3 ([e0cb22fc0](https://github.com/Adyen/bento/commit/e0cb22fc0))
+- added rule to deprecate `bento-tag` white variant ([20867ed09](https://github.com/Adyen/bento/commit/20867ed09))
+
+### Miscellaneous Chores
+
+- added `vue-prefer-no-redundant-v-if-for-dialog` eslint rule ([f21cf44a6](https://github.com/Adyen/bento/commit/f21cf44a6))
+
+### ❤️ Thank You
+
+- erice
+- gerald
+- mafalda
+
+
 ## 2.23.0 (2026-08-17)
 
 ### Features

package/README.md

@@ -19,7 +19,7 @@ npm install --save-dev eslint@9 vue-eslint-parser@10 @adyen/eslint-plugin-bento@
 
 ### Flat config recommended (`eslint.config.js`)
 
-All rules are set to `warn`
+Deprecation rules are set to `warn`. Restricted APIs remain errors.
 
 ```javascript
 const { defineConfig } = require('eslint/config');
@@ -97,6 +97,12 @@ module.exports = defineConfig([
 
 ## Rules
 
+### `@adyen/bento/vue-no-use-bento-translation-overrides`
+
+Disallow importing the restricted `useBentoTranslationOverrides` composable without approval from the Bento team. This
+API is only intended for teams building SDKs or component libraries for external customers and must not be used in Adyen
+products.
+
 ### `@adyen/bento/vue-old-spacer-tokens`
 
 Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
@@ -109,6 +115,12 @@ Disallow the use of the `default` slot in `bento-currency` instances.
 
 Disallow the use of the `default` slot in `bento-tag` instances.
 
+### `@adyen/bento/vue-no-redundant-dialog-v-if`
+
+Disallow a `v-if` that duplicates the `is-open` binding on `bento-modal`, `bento-modal-fullscreen` and
+`bento-sidepanel`. These components render a native `<dialog>`, so the `v-if` only unmounts them before their closing
+animation can run. Reported with an IDE suggestion to remove the directive, not an autofix.
+
 ### `@adyen/bento/tailwind-v3-to-bento`
 
 Replace Tailwind CSS v3 utility classes with Bento design token equivalents. Covers spacing, border radius, border
@@ -119,23 +131,27 @@ warning — use the `bento-typography` component instead.
 
 ### Recommended (`vue-recommended`)
 
-| Rule                                             | Severity |
-| ------------------------------------------------ | -------- |
-| `@adyen/bento/deprecation-components-input-emit` | `warn`   |
-| `@adyen/bento/deprecation-components-value-prop` | `warn`   |
-| `@adyen/bento/deprecation-currency-default-slot` | `warn`   |
-| `@adyen/bento/deprecation-tag-default-slot`      | `warn`   |
-| `@adyen/bento/vue-old-spacer-tokens`             | `warn`   |
+| Rule                                                  | Severity |
+| ----------------------------------------------------- | -------- |
+| `@adyen/bento/deprecation-components-input-emit`      | `warn`   |
+| `@adyen/bento/deprecation-components-value-prop`      | `warn`   |
+| `@adyen/bento/deprecation-currency-default-slot`      | `warn`   |
+| `@adyen/bento/deprecation-tag-default-slot`           | `warn`   |
+| `@adyen/bento/vue-no-use-bento-translation-overrides` | `error`  |
+| `@adyen/bento/vue-no-redundant-dialog-v-if`           | `warn`   |
+| `@adyen/bento/vue-old-spacer-tokens`                  | `warn`   |
 
 ### Strict (`vue-strict`)
 
-| Rule                                             | Severity |
-| ------------------------------------------------ | -------- |
-| `@adyen/bento/deprecation-components-input-emit` | `error`  |
-| `@adyen/bento/deprecation-components-value-prop` | `error`  |
-| `@adyen/bento/deprecation-currency-default-slot` | `error`  |
-| `@adyen/bento/deprecation-tag-default-slot`      | `error`  |
-| `@adyen/bento/vue-old-spacer-tokens`             | `error`  |
+| Rule                                                  | Severity |
+| ----------------------------------------------------- | -------- |
+| `@adyen/bento/deprecation-components-input-emit`      | `error`  |
+| `@adyen/bento/deprecation-components-value-prop`      | `error`  |
+| `@adyen/bento/deprecation-currency-default-slot`      | `error`  |
+| `@adyen/bento/deprecation-tag-default-slot`           | `error`  |
+| `@adyen/bento/vue-no-use-bento-translation-overrides` | `error`  |
+| `@adyen/bento/vue-no-redundant-dialog-v-if`           | `error`  |
+| `@adyen/bento/vue-old-spacer-tokens`                  | `error`  |
 
 ### Tailwind (`tailwind`)
 

package/configs/vue-recommended.js

@@ -1,5 +1,17 @@
 /** @type {import('eslint').Linter.Config[]} */
 module.exports = [
+    {
+        name: '@bento/adyen/recommended-restricted-apis',
+        files: ['*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}', '**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+        },
+    },
     {
         name: '@bento/adyen/recommended',
         files: ['*.vue', '**/*.vue'],
@@ -12,6 +24,7 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': 'warn',
             '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'warn',
             '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': 'warn',
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'warn',
@@ -27,6 +40,8 @@ module.exports = [
             '@adyen/bento/deprecation-components-value-prop': 'warn',
             '@adyen/bento/deprecation-currency-default-slot': 'warn',
             '@adyen/bento/deprecation-tag-default-slot': 'warn',
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+            '@adyen/bento/vue-no-redundant-dialog-v-if': 'warn',
             '@adyen/bento/vue-old-spacer-tokens': 'warn',
         },
     },

package/configs/vue-strict.js

@@ -1,5 +1,17 @@
 /** @type {import('eslint').Linter.Config[]} */
 module.exports = [
+    {
+        name: '@bento/adyen/strict-restricted-apis',
+        files: ['*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}', '**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+        },
+    },
     {
         name: '@bento/adyen/strict',
         files: ['*.vue', '**/*.vue'],
@@ -12,6 +24,7 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': 'error',
             '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'error',
             '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': ['error', { action: 'remove' }],
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'error',
@@ -27,6 +40,8 @@ module.exports = [
             '@adyen/bento/deprecation-components-value-prop': 'error',
             '@adyen/bento/deprecation-currency-default-slot': 'error',
             '@adyen/bento/deprecation-tag-default-slot': 'error',
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+            '@adyen/bento/vue-no-redundant-dialog-v-if': 'error',
             '@adyen/bento/vue-old-spacer-tokens': 'error',
         },
     },

package/index.js

@@ -12,6 +12,7 @@ const plugin = {
         tailwind: require('./configs/tailwind'),
     },
     rules: {
+        'deprecation-bento-tag-variant-enum': require('./rules/deprecation-bento-tag-variant-enum/deprecation-bento-tag-variant-enum'),
         'deprecation-bento-data-grid-cell-action-menu-item-handler': require('./rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler'),
         'deprecation-bento-date-range-picker-has-actions-prop': require('./rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop'),
         'deprecation-input-filter-dropdown-options': require('./rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options'),
@@ -27,6 +28,8 @@ const plugin = {
         'deprecation-components-value-prop': require('./rules/deprecation-components-value-prop/deprecation-components-value-prop'),
         'deprecation-currency-default-slot': require('./rules/deprecation-currency-default-slot/deprecation-currency-default-slot'),
         'deprecation-tag-default-slot': require('./rules/deprecation-tag-default-slot/deprecation-tag-default-slot'),
+        'vue-no-use-bento-translation-overrides': require('./rules/vue-no-use-bento-translation-overrides/vue-no-use-bento-translation-overrides'),
+        'vue-no-redundant-dialog-v-if': require('./rules/vue-no-redundant-dialog-v-if/vue-no-redundant-dialog-v-if'),
         'vue-old-spacer-tokens': require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens'),
         'tailwind-v3-to-bento': require('./rules/tailwind-v3-to-bento/tailwind-v3-to-bento'),
     },

package/package.json

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

package/rules/deprecation-bento-tag-variant-enum/README.md

@@ -0,0 +1,69 @@
+# deprecation-bento-tag-variant-enum
+
+## Description
+
+The white `bento-tag` variant and the `BentoTagVariant.WHITE` enum member are deprecated. Use the `grey` variant or the
+`'grey'` string literal instead.
+
+## Rule details
+
+The rule reports and can autofix the following usages:
+
+- `BentoTagVariant.WHITE` in scripts and template expressions.
+- Static `variant="white"` attributes on `bento-tag` and `BentoTag`.
+- Named bindings such as `:variant="'white'"` and `v-bind:variant="'white'"`.
+- Object bindings such as `v-bind="{ variant: 'white' }"`.
+- `BentoTagProps` object literals whose `variant` is `'white'` or `BentoTagVariant.WHITE`.
+
+The rule does not report `variant="white"` on unrelated components or other `BentoTagVariant` members. Values that can
+only be determined at runtime cannot be safely autofixed.
+
+## Incorrect
+
+```vue
+<template>
+    <bento-tag variant="white" />
+    <bento-tag :variant="'white'" />
+    <bento-tag v-bind="{ variant: 'white' }" />
+    <bento-tag :variant="BentoTagVariant.WHITE" />
+</template>
+
+<script setup lang="ts">
+    import { type BentoTagProps, BentoTagVariant } from '@adyen/bento-vue2';
+
+    const tagProps: BentoTagProps = { variant: 'white' };
+    const enumTagProps: BentoTagProps = { variant: BentoTagVariant.WHITE };
+</script>
+```
+
+## Correct
+
+```vue
+<template>
+    <bento-tag variant="grey" />
+    <bento-tag :variant="'grey'" />
+    <bento-tag v-bind="{ variant: 'grey' }" />
+</template>
+
+<script setup lang="ts">
+    import type { BentoTagProps } from '@adyen/bento-vue2';
+
+    const tagProps: BentoTagProps = { variant: 'grey' };
+</script>
+```
+
+## Configuration
+
+The rule is enabled as a warning in the recommended Bento Vue config and as an error in the strict config.
+
+To enable autofix explicitly:
+
+```javascript
+export default [
+    {
+        rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': ['warn', { autofix: true }],
+        },
+    },
+];
+```

package/rules/deprecation-bento-tag-variant-enum/deprecation-bento-tag-variant-enum.js

@@ -0,0 +1,167 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const findWhiteVariantProperty = properties =>
+    properties.find(
+        property =>
+            property.type === 'Property' &&
+            !property.computed &&
+            ((property.key.type === 'Identifier' && property.key.name === 'variant') ||
+                (property.key.type === 'Literal' && property.key.value === 'variant')) &&
+            property.value.type === 'Literal' &&
+            property.value.value === 'white'
+    );
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Deprecates the white bento-tag variant and BentoTagVariant.WHITE',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-tag-variant-enum/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecationWithReplacement: `The "{{name}}" enum member is deprecated. Please use "{{replacement}}" instead.`,
+            whiteVariant: `The "white" bento-tag variant is deprecated. Please use "grey" instead.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        const REPLACEMENT_MAP = {
+            WHITE: "'grey'",
+        };
+
+        const enumName = 'BentoTagVariant';
+
+        const visitor = {
+            [`MemberExpression[object.name="${enumName}"]`](node) {
+                if (node.computed && node.property.type !== 'Literal') {
+                    return;
+                }
+
+                const memberName = node.computed ? node.property.value : node.property.name;
+                const replacement = REPLACEMENT_MAP[memberName];
+                if (replacement) {
+                    context.report({
+                        node,
+                        messageId: 'deprecationWithReplacement',
+                        data: { name: `${enumName}.${memberName}`, replacement },
+                        ...(autofix && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, replacement);
+                            },
+                        }),
+                    });
+                }
+            },
+            VariableDeclarator(node) {
+                const typeName = node.id?.typeAnnotation?.typeAnnotation?.typeName;
+                if (
+                    typeName?.type !== 'Identifier' ||
+                    typeName.name !== 'BentoTagProps' ||
+                    node.init?.type !== 'ObjectExpression'
+                ) {
+                    return;
+                }
+
+                const variantProperty = findWhiteVariantProperty(node.init.properties);
+                if (variantProperty?.type !== 'Property') {
+                    return;
+                }
+
+                context.report({
+                    node: variantProperty.value,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(variantProperty.value, "'grey'");
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=false][key.name="variant"]`](
+                node
+            ) {
+                if (node.value?.value !== 'white') {
+                    return;
+                }
+
+                context.report({
+                    node,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node, 'variant="grey"');
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
+                node
+            ) {
+                const expression = node.value?.expression;
+                if (expression?.type !== 'Literal' || expression.value !== 'white') {
+                    return;
+                }
+
+                context.report({
+                    node,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(expression, "'grey'");
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"]`](
+                node
+            ) {
+                if (node.key.argument || node.value?.expression?.type !== 'ObjectExpression') {
+                    return;
+                }
+
+                const variantProperty = findWhiteVariantProperty(node.value.expression.properties);
+                if (variantProperty?.type !== 'Property') {
+                    return;
+                }
+
+                context.report({
+                    node: variantProperty.value,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(variantProperty.value, "'grey'");
+                        },
+                    }),
+                });
+            },
+        };
+        return VueUtils.defineTemplateBodyVisitor(context, visitor, visitor);
+    },
+};

package/rules/vue-no-redundant-dialog-v-if/README.md

@@ -0,0 +1,55 @@
+# @adyen/bento/vue-no-redundant-dialog-v-if
+
+> Disallow a redundant `v-if` next to `is-open` on components rendering a native dialog
+
+- This rule is included in the `vue-recommended` (`warn`) and `vue-strict` (`error`) configurations
+- 💡 This rule provides an IDE suggestion (not an autofix), so `--fix` leaves the code untouched
+
+The following components render a native HTML `<dialog>` element:
+
+- `bento-modal`
+- `bento-modal-fullscreen`
+- `bento-sidepanel`
+
+A closed `<dialog>` is hidden by the browser and its content is not rendered, so `is-open` alone is enough to control
+visibility. Pairing it with a `v-if` on the same value unmounts the component the moment it closes, which cancels the
+closing animation.
+
+This rule only reports a `v-if` whose expression is identical to the `is-open` binding, because that is the only case
+where removing the directive provably keeps the same behaviour. A `v-if` driven by another condition (for example
+`v-if="hasPermission"`) is left alone, as is an element whose `v-if` is followed by a `v-else` or `v-else-if` branch.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal v-if="isOpen" :is-open="isOpen" />
+
+    <bento-modal-fullscreen v-if="isOpen" :is-open="isOpen" />
+
+    <bento-sidepanel v-if="isOpen" :is-open="isOpen" />
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal :is-open="isOpen" />
+
+    <bento-modal-fullscreen :is-open="isOpen" />
+
+    <bento-sidepanel :is-open="isOpen" />
+</template>
+```
+
+A `v-if` on an unrelated condition is still valid, since it does not duplicate `is-open`:
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal v-if="hasPermission" :is-open="isOpen" />
+</template>
+```

package/rules/vue-no-redundant-dialog-v-if/vue-no-redundant-dialog-v-if.js

@@ -0,0 +1,150 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('vue-eslint-parser').AST.VDirective} VDirective
+ * @typedef {import('vue-eslint-parser').AST.VElement} VElement
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+// Components rendering a native "<dialog>" element, which is hidden by the browser while closed
+const DIALOG_COMPONENTS = ['bento-modal', 'bento-modal-fullscreen', 'bento-sidepanel'];
+
+/**
+ * Normalizes a tag or attribute name so "BentoModal" and "bento-modal" are treated alike.
+ * @param {string} name
+ * @returns {string}
+ */
+function toKebabCase(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Collapses whitespace so expressions spanning several lines can be compared.
+ * @param {string} expression
+ * @returns {string}
+ */
+function normalizeExpression(expression) {
+    return expression.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Finds a directive by name, e.g. "if" for "v-if" or "bind" for ":is-open".
+ * @param {VElement} node
+ * @param {string} directiveName
+ * @returns {VDirective | undefined}
+ */
+function findDirective(node, directiveName) {
+    return node.startTag.attributes.find(attribute => attribute.directive && attribute.key.name.name === directiveName);
+}
+
+/**
+ * Finds the "is-open" binding, either as ":is-open" or as "v-bind:isOpen".
+ * @param {VElement} node
+ * @returns {VDirective | undefined}
+ */
+function findIsOpenBinding(node) {
+    return node.startTag.attributes.find(
+        attribute =>
+            attribute.directive &&
+            attribute.key.name.name === 'bind' &&
+            attribute.key.argument &&
+            attribute.key.argument.type === 'VIdentifier' &&
+            toKebabCase(attribute.key.argument.rawName) === 'is-open'
+    );
+}
+
+/**
+ * Checks whether the element right after the given one relies on its "v-if",
+ * in which case removing the directive would break the template.
+ * @param {VElement} node
+ * @returns {boolean}
+ */
+function hasElseBranch(node) {
+    const siblings = node.parent.children;
+    const nextElement = siblings.slice(siblings.indexOf(node) + 1).find(sibling => sibling.type === 'VElement');
+
+    if (!nextElement) {
+        return false;
+    }
+
+    return !!(findDirective(nextElement, 'else') || findDirective(nextElement, 'else-if'));
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow a redundant "v-if" next to "is-open" on components rendering a native dialog',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/vue-no-redundant-dialog-v-if/README.md',
+            recommended: true,
+        },
+        messages: {
+            redundantVIf: `"v-if" is redundant on "{{ component }}" and unmounts it before the closing animation can run. The underlying "<dialog>" element stays hidden while closed, so "is-open" alone controls its visibility.`,
+            suggestRemoveVIf: `Remove the redundant "v-if" directive`,
+        },
+        hasSuggestions: true,
+        schema: [],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const template =
+            sourceCode.parserServices.getTemplateBodyTokenStore &&
+            sourceCode.parserServices.getTemplateBodyTokenStore();
+
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            /** @param {VElement} node */
+            VElement(node) {
+                if (!DIALOG_COMPONENTS.includes(toKebabCase(node.rawName))) {
+                    return;
+                }
+
+                const vIf = findDirective(node, 'if');
+                const isOpen = findIsOpenBinding(node);
+                const vIfExpression = vIf && vIf.value && vIf.value.expression;
+                const isOpenExpression = isOpen && isOpen.value && isOpen.value.expression;
+
+                if (!vIfExpression || !isOpenExpression) {
+                    return;
+                }
+
+                // Only a "v-if" driven by the very same value as "is-open" is provably redundant
+                if (
+                    normalizeExpression(sourceCode.getText(vIfExpression)) !==
+                    normalizeExpression(sourceCode.getText(isOpenExpression))
+                ) {
+                    return;
+                }
+
+                if (hasElseBranch(node)) {
+                    return;
+                }
+
+                context.report({
+                    node: vIf,
+                    messageId: 'redundantVIf',
+                    data: { component: toKebabCase(node.rawName) },
+                    suggest: [
+                        {
+                            messageId: 'suggestRemoveVIf',
+                            fix(fixer) {
+                                // Removing from the previous token takes the leading whitespace
+                                // or line break with it, keeping the start tag tidy
+                                const tokenBefore = template.getTokenBefore(vIf);
+                                return fixer.removeRange([tokenBefore.range[1], vIf.range[1]]);
+                            },
+                        },
+                    ],
+                });
+            },
+        });
+    },
+};

package/rules/vue-no-use-bento-translation-overrides/README.md

@@ -0,0 +1,14 @@
+# Disallow unapproved translation overrides
+
+The `@adyen/bento/vue-no-use-bento-translation-overrides` rule prevents importing `useBentoTranslationOverrides` from
+`@adyen/bento-vue3`.
+
+This restricted composable is only intended for teams building SDKs or component libraries for external customers. It
+must not be used in Adyen products. Teams must request approval from the Bento team before using it.
+
+After approval, suppress the rule only around the approved import and include the reason:
+
+```ts
+// eslint-disable-next-line @adyen/bento/vue-no-use-bento-translation-overrides -- Approved by the Bento team for the customer SDK.
+import { useBentoTranslationOverrides } from '@adyen/bento-vue3';
+```