@adyen/bento-mcp 0.5.4 → 0.6.0

package/dist/assets/deprecations.md

@@ -328,3 +328,1453 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
 - ../vue2/src/components/sidepanel/sidepanel.vue-        );
 - ../vue2/src/components/sidepanel/sidepanel.vue-    }
+
+---
+
+# ESLint Deprecation Rules — Migration Guides
+
+The following sections are extracted from the ESLint deprecation rule documentation.
+Each rule includes affected components, migration examples, and correct replacements.
+
+---
+
+# deprecation-bento-data-grid-cell-action-menu-item-handler
+
+## Description
+
+The `handler` property on `BentoColumnCellActionMenuItem` objects (used in `menuData` arrays) is deprecated since
+v2.0.0. Use `event` instead, which receives `(rowDataItem, columnKey)` parameters providing context about which row and
+column triggered the action.
+
+## Options
+
+| Option        | Type      | Default | Description          |
+| :------------ | :-------- | :------ | :------------------- |
+| **`autofix`** | `boolean` | `false` | Enables auto-fixing. |
+
+## Rule Details
+
+This rule detects `handler` properties on objects inside `menuData` arrays, both in `<template>` expressions and
+`<script>` blocks.
+
+### ❌ Incorrect
+
+```javascript
+const cellActions = [
+    {
+        menuData: [
+            {
+                text: 'Cancel payment',
+                handler: () => cancelPayment(),
+            },
+        ],
+    },
+];
+```
+
+### ✅ Correct
+
+```javascript
+const cellActions = [
+    {
+        menuData: [
+            {
+                text: 'Cancel payment',
+                event: (rowDataItem, columnKey) => cancelPayment(rowDataItem),
+            },
+        ],
+    },
+];
+```
+
+---
+
+# deprecation-bento-date-range-picker-has-actions-prop
+
+## Description
+
+Manages the **temporary** `has-actions` prop on `bento-date-range-picker`.
+
+The `has-actions` prop is a temporary opt-in flag for the new actions behavior. This rule helps teams adopt it during
+the transition period, and later remove it once the behavior becomes the default.
+
+## Options
+
+| Option        | Type                  | Default | Description                                                    |
+| :------------ | :-------------------- | :------ | :------------------------------------------------------------- |
+| **`action`**  | `'add'` \| `'remove'` | `'add'` | `add` reports missing `has-actions`. `remove` reports present. |
+| **`autofix`** | `boolean`             | `false` | Enables auto-fixing.                                           |
+
+## Rule Details
+
+### Action: `add` (default)
+
+Reports `bento-date-range-picker` instances that are **missing** the `has-actions` prop.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+### Action: `remove`
+
+Reports `bento-date-range-picker` instances that **have** the `has-actions` prop, so it can be cleaned up once the
+behavior becomes permanent.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker label="Pick" />
+```
+
+---
+
+# deprecation-bento-dropdown-size-prop
+
+## Description
+
+The `size` prop in the following components is deprecated:
+
+- `bento-dropdown`
+
+Only the `default` size is supported. Remove the `size` prop entirely.
+
+## Rule Details
+
+This rule reports usages of the deprecated `size` prop.
+
+### ❌ Incorrect
+
+```html
+<bento-dropdown size="small" /> <bento-dropdown :size="BentoDropdownSize.SMALL" />
+```
+
+### ✅ Correct
+
+```html
+<bento-dropdown />
+```
+
+---
+
+# deprecation-bento-popover-modifiers-prop
+
+## Description
+
+The `modifiers` prop in the following components is deprecated:
+
+- `bento-popover`
+
+## Rule Details
+
+This rule reports usages of the deprecated item.
+
+### ❌ Incorrect
+
+```html
+<bento-popover modifiers="value" /> <bento-popover :modifiers="value" />
+```
+
+### ✅ Correct
+
+```html
+<bento-popover />
+```
+
+---
+
+# deprecation-bento-timeline-item-variant-prop
+
+## Description
+
+The `variant` prop in `bento-timeline-item` is deprecated. Use `status` instead.
+
+The `variant` prop accepted `BentoTimelineItemVariant` enum values (icon names), while `status` accepts color strings.
+The autofix remaps values automatically:
+
+| `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 `variant` prop and autofixes it to `status` with the correct color value.
+
+### ❌ Incorrect
+
+```html
+<bento-timeline-item variant="CheckedCircleIcon" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
+```
+
+### ✅ Correct
+
+```html
+<bento-timeline-item status="green" /> <bento-timeline-item status="red" />
+```
+
+---
+
+# deprecation-components-aria-label-prop
+
+## Description
+
+The `ariaLabel` prop in the following components is deprecated:
+
+- `bento-dropdown`
+- `bento-input-field`
+- `bento-pagination`
+- `bento-popover`
+- `bento-segmented-control`
+
+Please use `aria-label` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated `ariaLabel` prop (camelCase). The replacement `aria-label` is the native HTML
+attribute, which the components already pick up via `attrs['aria-label']`.
+
+### ❌ Incorrect
+
+```html
+<bento-dropdown ariaLabel="value" /> <bento-dropdown :ariaLabel="value" />
+```
+
+```html
+<bento-input-field ariaLabel="value" /> <bento-input-field :ariaLabel="value" />
+```
+
+```html
+<bento-pagination ariaLabel="value" /> <bento-pagination :ariaLabel="value" />
+```
+
+```html
+<bento-popover ariaLabel="value" /> <bento-popover :ariaLabel="value" />
+```
+
+```html
+<bento-segmented-control ariaLabel="value" /> <bento-segmented-control :ariaLabel="value" />
+```
+
+### ✅ Correct
+
+```html
+<bento-dropdown aria-label="value" />
+```
+
+```html
+<bento-input-field aria-label="value" />
+```
+
+```html
+<bento-pagination aria-label="value" />
+```
+
+```html
+<bento-popover aria-label="value" />
+```
+
+```html
+<bento-segmented-control aria-label="value" />
+```
+
+---
+
+# deprecation-components-error-prop
+
+## Description
+
+The `error` prop in the following components is deprecated:
+
+- `bento-dropdown`
+- `bento-input-field`
+- `bento-input-field-phone-number`
+
+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.
+
+| Deprecated prop | Replacement prop | Type change          |
+| --------------- | ---------------- | -------------------- |
+| `error`         | `error-message`  | `boolean` → `string` |
+
+## Rule Details
+
+This rule reports usages of the deprecated `error` prop and provides an IDE suggestion (not an autofix) to rename it.
+
+### ❌ Incorrect
+
+```html
+<!-- Static boolean -->
+<bento-dropdown :error="true" :items="items" label="Country" />
+
+<!-- Dynamic binding -->
+<bento-dropdown :error="hasError" :items="items" label="Country" />
+```
+
+```html
+<bento-input-field :error="true" label="Email" />
+
+<bento-input-field :error="hasError" label="Email" />
+```
+
+```html
+<bento-input-field-phone-number :error="true" label="Phone number" />
+
+<bento-input-field-phone-number :error="hasError" label="Phone number" />
+```
+
+### ✅ Correct
+
+```html
+<!-- Static error message -->
+<bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+
+<!-- Dynamic error message driven by validation -->
+<bento-dropdown :error-message="errorMessage" :items="items" label="Country" />
+```
+
+```html
+<bento-input-field error-message="Enter a valid email address" label="Email" />
+
+<bento-input-field :error-message="errorMessage" label="Email" />
+```
+
+```html
+<bento-input-field-phone-number error-message="Enter a valid phone number" label="Phone number" />
+
+<bento-input-field-phone-number :error-message="errorMessage" label="Phone number" />
+```
+
+## Migration Examples
+
+### Before — static boolean on `bento-dropdown`
+
+```html
+<template>
+    <bento-dropdown :error="true" :items="items" label="Country" />
+</template>
+```
+
+### After — static error message on `bento-dropdown`
+
+```html
+<template>
+    <bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+</template>
+```
+
+### Before — dynamic validation on `bento-input-field`
+
+```html
+<template>
+    <bento-input-field :error="hasError" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const hasError = ref(false);
+
+    const validate = () => {
+        hasError.value = !email.value.includes('@');
+    };
+</script>
+```
+
+### After — dynamic validation with error message on `bento-input-field`
+
+```html
+<template>
+    <bento-input-field :error-message="errorMessage" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const errorMessage = ref<string | null>(null);
+
+    const validate = () => {
+        errorMessage.value = !email.value.includes('@') ? 'Enter a valid email address' : null;
+    };
+</script>
+```
+
+### Before — phone number validation
+
+```html
+<template>
+    <bento-input-field-phone-number
+        :error="hasError"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const hasError = ref(false);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        hasError.value = !isValid.value && !!phone.value;
+    };
+</script>
+```
+
+### After — phone number validation with error message
+
+```html
+<template>
+    <bento-input-field-phone-number
+        :error-message="errorMessage"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const errorMessage = ref<string | null>(null);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        errorMessage.value = !isValid.value && !!phone.value ? 'Enter a valid phone number' : null;
+    };
+</script>
+```
+
+---
+
+# deprecation-components-has-error-prop
+
+## Description
+
+The `hasError` prop in the following components is deprecated:
+
+- `bento-checkbox-group`
+- `bento-radio-group`
+
+Please use `error-message` instead.
+
+> **Note:** The `has-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.
+
+| Deprecated prop | Replacement prop | Type change          |
+| --------------- | ---------------- | -------------------- |
+| `has-error`     | `error-message`  | `boolean` → `string` |
+
+## Rule Details
+
+This rule reports usages of the deprecated `has-error` prop and provides an IDE suggestion (not an autofix) to rename
+it.
+
+### ❌ Incorrect
+
+```html
+<!-- Static boolean -->
+<bento-checkbox-group :has-error="true" :items="items" label="Permissions" />
+
+<!-- Dynamic binding -->
+<bento-checkbox-group :has-error="hasError" :items="items" label="Permissions" />
+```
+
+```html
+<bento-radio-group :has-error="true" :items="items" label="Priority" />
+
+<bento-radio-group :has-error="hasError" :items="items" label="Priority" />
+```
+
+### ✅ Correct
+
+```html
+<!-- Group-level error: pass a string message to error-message -->
+<bento-checkbox-group error-message="Select at least one option" :items="items" label="Permissions" />
+
+<!-- Dynamic error message driven by validation -->
+<bento-checkbox-group :error-message="errorMessage" :items="items" label="Permissions" />
+```
+
+```html
+<bento-radio-group error-message="Please select an option" :items="items" label="Priority" />
+
+<bento-radio-group :error-message="errorMessage" :items="items" label="Priority" />
+```
+
+## Migration Examples
+
+### Before — static boolean
+
+```html
+<template>
+    <bento-checkbox-group :has-error="true" :items="items" label="Toppings" />
+</template>
+```
+
+### After — static error message
+
+```html
+<template>
+    <bento-checkbox-group error-message="Select at least one topping" :items="items" label="Toppings" />
+</template>
+```
+
+### Before — dynamic validation
+
+```html
+<template>
+    <bento-checkbox-group :has-error="hasError" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const hasError = ref(false);
+
+    const validate = () => {
+        hasError.value = selectedToppings.value.length === 0;
+    };
+</script>
+```
+
+### After — dynamic validation with error message
+
+```html
+<template>
+    <bento-checkbox-group :error-message="errorMessage" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const errorMessage = ref<string | null>(null);
+
+    const validate = () => {
+        errorMessage.value = selectedToppings.value.length === 0 ? 'Select at least one topping' : null;
+    };
+</script>
+```
+
+### Before — item-level `hasError`
+
+```html
+<template>
+    <bento-checkbox-group :items="items" label="Permissions" />
+</template>
+
+<script setup lang="ts">
+    const items = [
+        { value: 'read', label: 'Read', hasError: true },
+        { value: 'write', label: 'Write' },
+    ];
+</script>
+```
+
+### After — item-level `errorMessage`
+
+```html
+<template>
+    <bento-checkbox-group :items="items" label="Permissions" />
+</template>
+
+<script setup lang="ts">
+    const items = [
+        { value: 'read', label: 'Read', errorMessage: 'Read permission is required' },
+        { value: 'write', label: 'Write' },
+    ];
+</script>
+```
+
+---
+
+# deprecation-components-input-emit
+
+## Description
+
+The `@input` event listener in the following components is deprecated:
+
+- `bento-date-picker`
+- `bento-date-range-picker`
+- `bento-dropdown`
+- `bento-dropdown-avatar`
+- `bento-dropdown-country`
+- `bento-dropdown-currency`
+- `bento-dropdown-payment-method`
+- `bento-dropdown-tag`
+- `bento-file-uploader`
+- `bento-input-field`
+- `bento-input-field-password`
+- `bento-input-field-phone-number`
+- `bento-checkbox-group`
+- `bento-radio-group`
+- `bento-selection-card-group`
+- `bento-textarea`
+
+Please use `@update:model-value` instead.
+
+| Deprecated event | Replacement event     | Autofix available          |
+| ---------------- | --------------------- | -------------------------- |
+| `@input`         | `@update:model-value` | Yes (opt-in via `autofix`) |
+
+> **⚠️ Caveat — `v-model` combined with `@input`**
+>
+> Bento Vue 2 components emit **both** `input` (deprecated) and `update:model-value` on every value change for backward
+> compatibility. In Vue 2, `v-model` internally listens to `@input`. If you autofix `@input` to `@update:model-value`
+> while keeping `v-model`, you end up with `v-model` listening to `@input` **and** an explicit `@update:model-value`
+> handler — both of which fire on every change. This causes race conditions because the handler may read the model value
+> before `v-model`'s `@input` listener has propagated the update.
+>
+> In this case, **do not rely on autofix alone**. You must also replace `v-model` with an explicit `:model-value`
+> binding so that a single `@update:model-value` handler controls both the model update and any side effects. See the
+> [Migration Examples](#migration-examples) below.
+
+## Rule Details
+
+This rule reports usages of the deprecated `@input` event and can optionally autofix them to `@update:model-value`.
+Autofix is disabled by default and can be enabled with the `autofix` option.
+
+### ❌ Incorrect
+
+```html
+<bento-date-picker @input="handler" />
+```
+
+```html
+<bento-date-range-picker @input="handler" />
+```
+
+```html
+<bento-dropdown @input="handler" />
+```
+
+```html
+<bento-dropdown-avatar @input="handler" />
+```
+
+```html
+<bento-dropdown-country @input="handler" />
+```
+
+```html
+<bento-dropdown-currency @input="handler" />
+```
+
+```html
+<bento-dropdown-payment-method @input="handler" />
+```
+
+```html
+<bento-dropdown-tag @input="handler" />
+```
+
+```html
+<bento-file-uploader @input="handler" />
+```
+
+```html
+<bento-input-field @input="handler" />
+```
+
+```html
+<bento-input-field-password @input="handler" />
+```
+
+```html
+<bento-input-field-phone-number @input="handler" />
+```
+
+```html
+<bento-checkbox-group @input="handler" />
+```
+
+```html
+<bento-radio-group @input="handler" />
+```
+
+```html
+<bento-selection-card-group @input="handler" />
+```
+
+```html
+<bento-textarea @input="handler" />
+```
+
+```html
+<!-- v-on:input directive syntax is also reported -->
+<bento-input-field v-on:input="handler" />
+```
+
+```html
+<!-- ⚠️ v-model + @input — autofix alone is NOT safe -->
+<bento-input-field v-model="email" @input="onEmailChange" />
+
+<bento-dropdown v-model="country" @input="onCountryChange" :items="items" />
+```
+
+### ✅ Correct
+
+```html
+<bento-date-picker @update:model-value="handler" />
+```
+
+```html
+<bento-date-range-picker @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-avatar @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-country @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-currency @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-payment-method @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-tag @update:model-value="handler" />
+```
+
+```html
+<bento-file-uploader @update:model-value="handler" />
+```
+
+```html
+<bento-input-field @update:model-value="handler" />
+```
+
+```html
+<bento-input-field-password @update:model-value="handler" />
+```
+
+```html
+<bento-input-field-phone-number @update:model-value="handler" />
+```
+
+```html
+<bento-checkbox-group @update:model-value="handler" />
+```
+
+```html
+<bento-radio-group @update:model-value="handler" />
+```
+
+```html
+<bento-selection-card-group @update:model-value="handler" />
+```
+
+```html
+<bento-textarea @update:model-value="handler" />
+```
+
+```html
+<!-- v-model without a separate handler — no change needed -->
+<bento-input-field v-model="email" />
+```
+
+```html
+<!-- v-model + @input migrated: split v-model into explicit binding + handler -->
+<bento-input-field :model-value="email" @update:model-value="onEmailChange" />
+
+<bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="items" />
+```
+
+## Migration Examples
+
+If `v-model` is used alongside `@input`, you must also replace `v-model` with `:model-value` — see Case 2. Otherwise,
+renaming `@input` to `@update:model-value` is sufficient — see Cases 1 and 3.
+
+### Case 1 — standalone `@input` (safe to autofix)
+
+The simplest case: `@input` is used without `v-model`. Rename it to `@update:model-value`.
+
+#### Before
+
+```html
+<template>
+    <bento-dropdown @input="onSelect" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const onSelect = (value: string) => {
+        console.log('Selected:', value);
+    };
+</script>
+```
+
+#### After
+
+```html
+<template>
+    <bento-dropdown @update:model-value="onSelect" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const onSelect = (value: string) => {
+        console.log('Selected:', value);
+    };
+</script>
+```
+
+### Case 2 — `v-model` + `@input` (autofix NOT safe — requires manual split)
+
+When `v-model` is used alongside `@input`, autofix alone will cause a dual-emission race condition. You must replace
+`v-model` with an explicit `:model-value` binding and merge the update logic into a single `@update:model-value`
+handler.
+
+#### Before — `v-model` + `@input`
+
+```html
+<template>
+    <bento-dropdown v-model="country" @input="onCountryChange" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const country = ref('');
+
+    const onCountryChange = (value: string) => {
+        fetchCities(value);
+    };
+</script>
+```
+
+#### ❌ Broken — after autofix only (dual-emission race condition)
+
+```html
+<template>
+    <!-- v-model internally listens to @input, while @update:model-value listens to the new event.
+    The component emits BOTH events on every change, causing a race condition:
+    onCountryChange may read `country` before v-model's @input handler has updated it. -->
+    <bento-dropdown v-model="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
+</template>
+```
+
+#### ✅ Correct — split `v-model` and merge handlers
+
+Replace `v-model` with `:model-value` and merge the update logic into one handler:
+
+```html
+<template>
+    <bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const country = ref('');
+
+    const onCountryChange = (value: string) => {
+        country.value = value;
+        fetchCities(value);
+    };
+</script>
+```
+
+### Case 3 — explicit `:model-value` + `@input` (safe to autofix)
+
+When `:model-value` is already used instead of `v-model`, there is no dual-emission conflict. Rename `@input` to
+`@update:model-value`.
+
+#### Before — `:model-value` + `@input`
+
+```html
+<template>
+    <bento-checkbox-group :model-value="selected" @input="onSelect" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const selected = ref([]);
+
+    const onSelect = (value: string[]) => {
+        selected.value = value;
+    };
+</script>
+```
+
+#### After — rename to `@update:model-value`
+
+```html
+<template>
+    <bento-checkbox-group :model-value="selected" @update:model-value="onSelect" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const selected = ref([]);
+
+    const onSelect = (value: string[]) => {
+        selected.value = value;
+    };
+</script>
+```
+
+---
+
+# deprecation-components-value-prop
+
+## Description
+
+The `value` prop in the following components is deprecated:
+
+- `bento-date-picker`
+- `bento-date-range-picker`
+- `bento-dropdown`
+- `bento-dropdown-avatar`
+- `bento-dropdown-country`
+- `bento-dropdown-currency`
+- `bento-dropdown-payment-method`
+- `bento-dropdown-tag`
+- `bento-file-uploader`
+- `bento-input-field`
+- `bento-input-field-password`
+- `bento-input-field-phone-number`
+- `bento-checkbox-group`
+- `bento-radio-group`
+- `bento-selection-card-group`
+- `bento-textarea`
+
+Please use `model-value` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated item.
+
+### ❌ Incorrect
+
+```html
+<bento-date-picker value="value" /> <bento-date-picker :value="value" />
+```
+
+```html
+<bento-date-range-picker value="value" /> <bento-date-range-picker :value="value" />
+```
+
+```html
+<bento-dropdown value="value" /> <bento-dropdown :value="value" />
+```
+
+```html
+<bento-dropdown-avatar value="value" /> <bento-dropdown-avatar :value="value" />
+```
+
+```html
+<bento-dropdown-country value="value" /> <bento-dropdown-country :value="value" />
+```
+
+```html
+<bento-dropdown-currency value="value" /> <bento-dropdown-currency :value="value" />
+```
+
+```html
+<bento-dropdown-payment-method value="value" /> <bento-dropdown-payment-method :value="value" />
+```
+
+```html
+<bento-dropdown-tag value="value" /> <bento-dropdown-tag :value="value" />
+```
+
+```html
+<bento-file-uploader value="value" /> <bento-file-uploader :value="value" />
+```
+
+```html
+<bento-input-field value="value" /> <bento-input-field :value="value" />
+```
+
+```html
+<bento-input-field-password value="value" /> <bento-input-field-password :value="value" />
+```
+
+```html
+<bento-input-field-phone-number value="value" /> <bento-input-field-phone-number :value="value" />
+```
+
+```html
+<bento-checkbox-group value="value" /> <bento-checkbox-group :value="value" />
+```
+
+```html
+<bento-radio-group value="value" /> <bento-radio-group :value="value" />
+```
+
+```html
+<bento-selection-card-group value="value" /> <bento-selection-card-group :value="value" />
+```
+
+```html
+<bento-textarea value="value" /> <bento-textarea :value="value" />
+```
+
+### ✅ Correct
+
+```html
+<bento-date-picker model-value="value" />
+```
+
+```html
+<bento-date-range-picker model-value="value" />
+```
+
+```html
+<bento-dropdown model-value="value" />
+```
+
+```html
+<bento-dropdown-avatar model-value="value" />
+```
+
+```html
+<bento-dropdown-country model-value="value" />
+```
+
+```html
+<bento-dropdown-currency model-value="value" />
+```
+
+```html
+<bento-dropdown-payment-method model-value="value" />
+```
+
+```html
+<bento-dropdown-tag model-value="value" />
+```
+
+```html
+<bento-file-uploader model-value="value" />
+```
+
+```html
+<bento-input-field model-value="value" />
+```
+
+```html
+<bento-input-field-password model-value="value" />
+```
+
+```html
+<bento-input-field-phone-number model-value="value" />
+```
+
+```html
+<bento-checkbox-group model-value="value" />
+```
+
+```html
+<bento-radio-group model-value="value" />
+```
+
+```html
+<bento-selection-card-group model-value="value" />
+```
+
+```html
+<bento-textarea model-value="value" />
+```
+
+---
+
+# deprecation-country-custom-usage
+
+## Description
+
+This rule deprecates the `variant="custom"` prop and custom `label` usage across country-related components.
+These features are being removed because country components should use built-in variants (`name`, `iso`, `capital`, `phone_code`) rather than custom labels.
+
+The rule covers three components:
+
+1. **`bento-country`** — the `variant="custom"` prop and the `label` prop
+2. **`bento-dropdown-country`** — the `variant="custom"` prop and `label` keys in the `:items` array
+3. **`BentoFilterItemType.SELECT_COUNTRY`** — the `variant: 'custom'` option and `label` keys in `listboxItems`
+
+## Rule Details
+
+### `bento-country`
+
+The `label` prop only takes effect when `variant="custom"` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- variant="custom" only — variant does nothing without a label -->
+<bento-country code="NL" variant="custom" />
+
+<!-- label only — label is ignored without variant="custom" -->
+<bento-country code="NL" label="Custom label" />
+
+<!-- both — deprecated, use bento-typography instead -->
+<bento-country code="NL" variant="custom" label="Custom label" />
+<bento-country code="NL" :variant="BentoCountryVariant.CUSTOM" :label="customLabel" />
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-country code="NL" variant="name" />
+
+<!-- Use bento-typography for custom text -->
+<bento-typography el="span">Custom label</bento-typography>
+```
+
+### `bento-dropdown-country`
+
+The `label` key in items is only used when `variant="custom"` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- label in items only — labels are ignored without variant="custom" -->
+<bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" />
+
+<!-- variant="custom" only — variant does nothing without labels in items -->
+<bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" />
+
+<!-- both — deprecated, use bento-dropdown instead -->
+<bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" />
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-dropdown-country :items="[{ value: 'NL' }]" variant="name" />
+
+<!-- Use bento-dropdown for custom labels -->
+<bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]" />
+```
+
+### `SELECT_COUNTRY` filter config (`bento-filter-bar` / `bento-data-grid`)
+
+The `label` key in `listboxItems` is only used when `variant: 'custom'` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- variant: 'custom' only -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL' }], variant: 'custom' }
+    }]"
+/>
+
+<!-- label in listboxItems only -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
+    }]"
+/>
+
+<!-- both -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: {
+            listboxItems: [{ value: 'NL', label: 'Custom label' }],
+            variant: 'custom'
+        }
+    }]"
+/>
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL' }], variant: 'name' }
+    }]"
+/>
+
+<!-- Use SELECT type for custom labels -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT,
+        options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
+    }]"
+/>
+```
+
+## Autofix
+
+Enable opt-in autofix via ESLint config:
+
+```js
+'@adyen/bento/deprecation-country-custom-usage': ['warn', { autofix: true }]
+```
+
+The autofix behavior depends on which deprecated props are present:
+
+| Scenario | Autofix |
+|---|---|
+| `variant="custom"` only | Removes the `variant` prop/property |
+| `label` only | Removes the `label` prop/property |
+| Both `variant="custom"` + `label` | Full replacement (see below) |
+
+### Full replacement (both present)
+
+- **`bento-country`** — replaces the entire element with `<bento-typography el="span">{{ label }}</bento-typography>`
+- **`bento-dropdown-country`** — renames the tag to `bento-dropdown` and removes the `variant` attribute
+- **`SELECT_COUNTRY` filter** — changes `type` to `BentoFilterItemType.SELECT` and removes `variant` from options
+
+---
+
+# @adyen/bento/deprecation-currency-default-slot
+
+> Disallow the use of the `default` slot in `bento-currency` instances
+
+-   This rule is included in the `plugin:@adyen/bento/recommended` configuration.
+-   🔧 The `--fix` option can automatically fix the problems reported by this rule.
+
+This rule prevents using the deprecated `default` slot within the `Currency` component.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-currency currency="USD">
+        12345
+    </bento-currency>
+
+    <bento-currency currency="USD">
+        12345.67
+    </bento-currency>
+
+    <bento-currency>
+        {{ thisIsMyVariableWithCurrencyValue }}
+    </bento-currency>
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-currency 
+        :value="12345" 
+        currency="USD" 
+    />
+
+    <bento-currency 
+        :value="12345.67" 
+        currency="USD" 
+    />
+
+    <bento-currency 
+        :value="thisIsMyVariableWithCurrencyValue" 
+        :currency="BentoCurrencyISOCode.USD" 
+        major-units 
+    />
+</template>
+```
+
+---
+
+# deprecation-filter-bar-deprecated-props
+
+## Description
+
+Deprecates the following props and options in `bento-filter-bar` and `bento-data-grid` filter configs:
+
+### Direct prop on `bento-filter-bar`
+
+| Deprecated | Replacement                  |
+| ---------- | ---------------------------- |
+| `value`    | `config` and `filter-values` |
+
+### Nested options in filter config items (`BentoSelectFilterOptions`)
+
+| Deprecated                                          | Replacement                                       |
+| --------------------------------------------------- | ------------------------------------------------- |
+| `messages`                                          | None (persistent filter label now uses a counter) |
+| `messagesPersistentButtonLabelPartiallySelectedKey` | None                                              |
+| `messagesPersistentButtonLabelAllSelectedKey`       | None                                              |
+
+### `value` on filter config items (`BentoFilterModel`)
+
+| Deprecated | Replacement     |
+| ---------- | --------------- |
+| `value`    | `filter-values` |
+
+## Rule Details
+
+### ❌ Incorrect
+
+```html
+<bento-filter-bar :value="filters" /> <bento-filter-bar v-model="filters" />
+```
+
+```js
+const config = [
+    {
+        field: 'status',
+        type: 'BentoSelectFilter',
+        value: 'active',
+        options: {
+            messages: { en: { persistentButtonLabelPartiallySelected: 'x' } },
+            messagesPersistentButtonLabelPartiallySelectedKey: 'customKey',
+            messagesPersistentButtonLabelAllSelectedKey: 'customKey',
+        },
+    },
+];
+```
+
+### ✅ Correct
+
+```html
+<bento-filter-bar :config="config" :filter-values="values" />
+```
+
+```js
+const config = [
+    {
+        field: 'status',
+        type: 'BentoSelectFilter',
+        options: { listboxItems: [] },
+    },
+];
+```
+
+---
+
+# deprecation-input-filter-dropdown-options
+
+Deprecates usage of `dropdown`, `dropdownPosition`, and `variant` properties inside `BentoInputFilterOptions`.
+
+These properties were used to configure the input filter as a dropdown variant. They should be replaced by using
+`BentoFilterItemType.INPUT_DROPDOWN` instead of `BentoFilterItemType.INPUT`.
+
+## Examples
+
+### Invalid
+
+```vue
+<script setup>
+    const config = [
+        {
+            field: 'name',
+            label: 'Name',
+            type: BentoFilterItemType.INPUT,
+            options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
+        },
+    ];
+</script>
+<template>
+    <bento-filter-bar :config="config" />
+</template>
+```
+
+### Valid
+
+```vue
+<script setup>
+    const config = [
+        {
+            field: 'name',
+            label: 'Name',
+            type: BentoFilterItemType.INPUT_DROPDOWN,
+            options: { dropdown: { items: [] }, dropdownPosition: 'end' },
+        },
+    ];
+</script>
+<template>
+    <bento-filter-bar :config="config" />
+</template>
+```
+
+---
+
+# @adyen/bento/deprecation-tag-default-slot
+
+> Disallow the use of the slot in `bento-tag` instances
+
+-   This rule is included in the `plugin:@adyen/bento/recommended` configuration.
+-   🔧 The `--fix` option can automatically fix the problems reported by this rule.
+
+This rule prevents using the deprecated `default` slot within the `Tag` component.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-tag variant="blue">
+        Label text
+    </bento-tag>
+
+    <bento-tag>
+        Label text
+    </bento-tag>
+
+    <bento-tag>
+        {{ thisIsMyVariableWithText }}
+    </bento-tag>
+
+    <bento-tag>
+        Value: {{ thisIsAValue }}
+    </bento-tag>
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-tag label="Label text" variant="blue" />
+
+    <bento-tag label="Label text" variant="blue" />
+
+    <bento-tag :label="thisIsMyVariableWithText" variant="blue" />
+
+    <bento-tag :label="Value: ${thisIsAValue}" />
+</template>
+```
+