@adyen/bento-mcp 0.11.0 → 0.12.0

package/dist/assets/deprecations.md

@@ -6,6 +6,14 @@ This file contains a list of all deprecated components, properties, and features
 
 ### Deprecation Found
 
+- string) {
+- ../vue2/src/utils/ts/deprecate.ts-    // If the message is already showing, dont show it again
+- ../vue2/src/utils/ts/deprecate.ts-    if (!shownMessages.has(title)) {
+- \x1b[0m ${title}`, DEPRECATION_STYLES);
+- ../vue2/src/utils/ts/deprecate.ts-        // Format multi-line descriptions with the backtick
+- ../vue2/src/utils/ts/deprecate.ts-        printDevelopmentWarning(`${deprecationMessage.replaceAll(  , ).trim()}`);
+### Deprecation Found
+
 - deprecate(TITLE, MESSAGE, VERSION);
 - ../vue2/src/utils/ts/deprecate.test.ts-
 - ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy).toHaveBeenCalledTimes(EXPECTED_CALLS.length);
@@ -36,20 +44,19 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/utils/ts/deprecate.test.ts-            EXPECTED_CALLS[0]
 ### Deprecation Found
 
-- string) {
-- ../vue2/src/utils/ts/deprecate.ts-    // If the message is already showing, dont show it again
-- ../vue2/src/utils/ts/deprecate.ts-    if (!shownMessages.has(title)) {
-- \x1b[0m ${title}`, DEPRECATION_STYLES);
-- ../vue2/src/utils/ts/deprecate.ts-        // Format multi-line descriptions with the backtick
-- ../vue2/src/utils/ts/deprecate.ts-        printDevelopmentWarning(`${deprecationMessage.replaceAll(  , ).trim()}`);
+- deprecate(
+- ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
+- //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
+- ../vue2/src/install.ts-                3.0.0
+- ../vue2/src/install.ts-            );
+- ../vue2/src/install.ts-            // Make sure to put all awaited CSS imports below this point and not above!
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/typography/typography.vue-            BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
-- ../vue2/src/components/typography/typography.vue-            `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
-- variant=BentoTypographyVariant.TITLE medium>`
-- ../vue2/src/components/typography/typography.vue-            2.0.0
-- ../vue2/src/components/typography/typography.vue-        );
+- deprecate(Using `BentoTheme.BENTO`, Please use `BentoTheme.BENTO_LIGHT` instead, 3.0.0);
+- ../vue2/src/install.ts-                setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-                break;
+- ../vue2/src/install.ts-                setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-        }
 ### Deprecation Found
 
 - deprecate(
@@ -57,125 +64,23 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
 - ../vue2/src/components/currency/currency.vue-                Use the value property instead.
 - value=12345.67 currency=USD major-units=false />`
-- ../vue2/src/components/currency/currency.vue-                2.0.0
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown error property
-- ../vue2/src/components/dropdown/dropdown.vue-            `Use the BentoDropdown errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/dropdown/dropdown.vue-                            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/dropdown/dropdown.vue-                            <bento-dropdown errorMessage=Error message text />`
-- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
-### Deprecation Found
-
-- deprecate(BentoDropdown size property, `Do not use. Only default size should be used.`, 2.0.0);
-- ../vue2/src/components/dropdown/dropdown.vue-    }
-- ../vue2/src/components/dropdown/dropdown.vue-
-- ../vue2/src/components/dropdown/dropdown.vue-    if (props.value) {
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown value property
-- ../vue2/src/components/dropdown/dropdown.vue-            `The use of value prop in BentoDropdown is no longer supported.
-- ../vue2/src/components/dropdown/dropdown.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
-- ../vue2/src/components/dropdown/dropdown.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            BentoDropdownTag value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            `The use of value prop in BentoDropdownTag is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            BentoDropdownCurrency value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            `The use of value prop in BentoDropdownCurrency is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            BentoDropdownAvatar value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            `The use of value prop in BentoDropdownAvatar is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry custom variant and items prop label key
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-    }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            `The use of value prop in BentoDropdownCountry is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
-- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
-- ../vue2/src/components/country/country.vue-            2.0.0
-- ../vue2/src/components/country/country.vue-        );
-- ../vue2/src/components/country/country.vue-    }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
+- ../vue2/src/components/currency/currency.vue-                3.0.0
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
-- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
-- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
-- ../vue2/src/components/input-field-password/input-field-password.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/inspector/inspector.vue-            BentoInspector active-page as optional
-- active-page.
-- ../vue2/src/components/inspector/inspector.vue-            active-page prop will be required in the next version`
-- ../vue2/src/components/inspector/inspector.vue-            2.0.0
-- ../vue2/src/components/inspector/inspector.vue-        );
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
+- ../vue2/src/components/sidepanel/sidepanel.vue-            3.0.0
+- ../vue2/src/components/sidepanel/sidepanel.vue-        );
+- ../vue2/src/components/sidepanel/sidepanel.vue-    }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/radio-group/radio-group.vue-            BentoRadioGroup hasError property
-- ../vue2/src/components/radio-group/radio-group.vue-            `Use the BentoRadioGroup errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/radio-group/radio-group.vue-                    Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/radio-group/radio-group.vue-                    <bento-radio-group errorMessage=Error message text />`
-- ../vue2/src/components/radio-group/radio-group.vue-            2.0.0
+- string | Array<string> | File | Array<File>
+- ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
+- ../vue2/src/components/file-uploader/file-uploader.vue-                3.0.0
+- ../vue2/src/components/file-uploader/file-uploader.vue-            );
+- ../vue2/src/components/file-uploader/file-uploader.vue-        }
 ### Deprecation Found
 
 - deprecate(
@@ -186,94 +91,22 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/internal/controls-group/controls-group.vue-            `2.0.0`
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/card/card.vue-                    BentoCard @click property
-- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
-- ../vue2/src/components/card/card.vue-                    2.0.0
-- ../vue2/src/components/card/card.vue-                );
-- ../vue2/src/components/card/card.vue-            }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
-- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
-- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/textarea/textarea.vue-                2.0.0
-- ../vue2/src/components/textarea/textarea.vue-            );
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
 - ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
 - ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
-- ../vue2/src/components/modal/modal.vue-            2.0.0
+- ../vue2/src/components/modal/modal.vue-            3.0.0
 - ../vue2/src/components/modal/modal.vue-        );
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
 - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    3.0.0
 - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
 - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    BentoInputFilter options property
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            <bento-filter-bar
-- config=[{
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                        This will be the default behavior in the v2 and options.messages will be removed.`
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                2.0.0
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-            );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            BentoSelectCountryFilter type with `options.variant===custom`
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            2.0.0
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-        );
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-    }
-### Deprecation Found
-
-- deprecate(
-- string | Array<string> | File | Array<File>
-- ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
-- ../vue2/src/components/file-uploader/file-uploader.vue-                2.0.0
-- ../vue2/src/components/file-uploader/file-uploader.vue-            );
-- ../vue2/src/components/file-uploader/file-uploader.vue-        }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
-- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
-- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
-- ../vue2/src/components/date-picker/date-picker.vue-                );
-- ../vue2/src/components/date-picker/date-picker.vue-            }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/input-field/input-field.vue-            BentoInputField error property
-- ../vue2/src/components/input-field/input-field.vue-            `Use the BentoInputField errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/input-field/input-field.vue-            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/input-field/input-field.vue-            <bento-dropdown errorMessage=Error message text />`
-- ../vue2/src/components/input-field/input-field.vue-            2.0.0
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/components/input-field/input-field.vue-            BentoInputField defaultIconBefore slot
 - ../vue2/src/components/input-field/input-field.vue-            `Use the BentoInputField iconBefore slot instead to add an icon at the left side of the input field
@@ -282,52 +115,36 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/input-field/input-field.vue-                \t\t<my-icon-goes-here />
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/input-field/input-field.vue-            BentoInputField value property
-- ../vue2/src/components/input-field/input-field.vue-            `The use of value prop in BentoInputField is no longer supported.
-- ../vue2/src/components/input-field/input-field.vue-             Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field/input-field.vue-            2.0.0
-- ../vue2/src/components/input-field/input-field.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
-- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
-- ../vue2/src/components/sidepanel/sidepanel.vue-        );
-- ../vue2/src/components/sidepanel/sidepanel.vue-    }
+- deprecate(BentoTag white variant, Use the BentoTag grey variant instead., 3.0.0);
+- ../vue2/src/components/tag/tag.vue-            }
+- ../vue2/src/components/tag/tag.vue-        }
+- true }
+- ../vue2/src/components/tag/tag.vue-    );
+- ../vue2/src/components/tag/tag.vue-</script>
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/card/card.vue-                    BentoCard @click property
+- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
+- ../vue2/src/components/card/card.vue-                    3.0.0
+- ../vue2/src/components/card/card.vue-                );
+- ../vue2/src/components/card/card.vue-            }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
+- ../vue2/src/components/typography/typography.vue-            BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
+- ../vue2/src/components/typography/typography.vue-            `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
+- variant=BentoTypographyVariant.TITLE medium>`
+- ../vue2/src/components/typography/typography.vue-            3.0.0
+- ../vue2/src/components/typography/typography.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
-- //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
-- ../vue2/src/install.ts-                2.0.0
-- ../vue2/src/install.ts-            );
-- ../vue2/src/install.ts-            // Make sure to put all awaited CSS imports below this point and not above!
-### Deprecation Found
-
-- deprecate(Using `BentoTheme.BENTO`, Please use `BentoTheme.BENTO_LIGHT` instead, 2.0.0);
-- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
-- ../vue2/src/install.ts-        } else {
-- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
-- ../vue2/src/install.ts-        }
-- ../vue2/src/install.ts-    }
+- ../vue2/src/components/inspector/inspector.vue-            BentoInspector active-page as optional
+- active-page.
+- ../vue2/src/components/inspector/inspector.vue-            active-page prop will be required in the next version`
+- ../vue2/src/components/inspector/inspector.vue-            3.0.0
+- ../vue2/src/components/inspector/inspector.vue-        );
 
 ---
 
@@ -496,6 +313,78 @@ This rule reports usages of the deprecated item.
 
 ---
 
+# 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 }],
+        },
+    },
+];
+```
+
+---
+
 # deprecation-bento-timeline-item-variant-prop
 
 ## Description
@@ -1680,6 +1569,13 @@ const config = [
         options: { listboxItems: [] },
     },
 ];
+
+const values = [
+    {
+        field: 'status',
+        value: 'active',
+    },
+];
 ```
 
 ---

package/dist/assets/directives/highlight/highlight.stories.ts

@@ -1 +1 @@
-import { BentoHighlightDirective } from './highlight'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { BentoButton } from '@/components/button'; import { BentoCard } from '@/components/card'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoTypography } from '@/components/typography'; import HighlightDefaultExample from './__tests__/highlight-default-example.vue?raw'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Highlight', parameters: { layout: 'centered', }, argTypes: { size: { options: ['small', 'medium', 'large'], type: { name: 'string', required: false }, description: 'Size option for the highlight directive, passed as a modifier e.g. `v-bento-highlight-directive.small`', defaultValue: 'small', control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoHighlightDirective>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoCheckbox, BentoCard, BentoTypography }, directives: { BentoHighlightDirective }, props: Object.keys(argTypes), template: ` <div> <div v-if="args.size === 'medium'"> <bento-checkbox v-model="checked" v-bento-highlight-directive="{ size: 'medium', extraPadding: true, rounded: true }" > Checkbox label <template #description>Description that goes with the checkbox</template> </bento-checkbox> </div> <bento-card v-else-if="args.size === 'large'" v-bento-highlight-directive.large> Card title <template #description>Description that goes with the card</template> <template #content> <bento-typography> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo consequat. </bento-typography> </template> </bento-card> <bento-button v-else v-bento-highlight-directive>Button</bento-button> </div> `, setup(props) { const checked = ref(false); return { args: isVue2 ? props : _args, checked, }; }, }), parameters: storybookDocsParameter(HighlightDefaultExample), }; 
+import { BentoHighlightDirective } from './highlight'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { BentoButton } from '@/components/button'; import { BentoCard } from '@/components/card'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoTypography } from '@/components/typography'; const HighlightDefaultExample = "<template>\n <div style=\"display: flex; flex-direction: column; gap: 20px\">\n <div>\n <!-- Passing v-bento-highlight-directive sets the small highlight by default -->\n <bento-button v-bento-highlight-directive>Small highlight</bento-button>\n </div>\n\n <div>\n <!-- You can pass options to the directive, defining size and if the component needs extraPadding -->\n <bento-checkbox v-model=\"checked\" v-bento-highlight-directive=\"{ size: 'medium', extraPadding: true }\">\n Medium highlight\n <template #description>Description that goes with the checkbox</template>\n </bento-checkbox>\n </div>\n\n <div>\n <!-- You can also pass the size as a modifier for ease of use -->\n <bento-card v-bento-highlight-directive.large>\n Large highlight\n <template #description>Description that goes with the card</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris. Nisi ut aliquip ex ea commodo consequat.\n </bento-typography>\n </template>\n </bento-card>\n </div>\n </div>\n</template>\n<script setup lang=\"ts\">\n import {\n BentoButton,\n BentoCard,\n BentoCheckbox,\n BentoTypography,\n BentoHighlightDirective as vBentoHighlightDirective,\n } from '@adyen/bento-vue2';\n import { ref } from 'vue';\n\n const checked = ref(false);\n</script>\n"; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Highlight', parameters: { layout: 'centered', }, argTypes: { size: { options: ['small', 'medium', 'large'], type: { name: 'string', required: false }, description: 'Size option for the highlight directive, passed as a modifier e.g. `v-bento-highlight-directive.small`', defaultValue: 'small', control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoHighlightDirective>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoCheckbox, BentoCard, BentoTypography }, directives: { BentoHighlightDirective }, props: Object.keys(argTypes), template: ` <div> <div v-if="args.size === 'medium'"> <bento-checkbox v-model="checked" v-bento-highlight-directive="{ size: 'medium', extraPadding: true, rounded: true }" > Checkbox label <template #description>Description that goes with the checkbox</template> </bento-checkbox> </div> <bento-card v-else-if="args.size === 'large'" v-bento-highlight-directive.large> Card title <template #description>Description that goes with the card</template> <template #content> <bento-typography> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo consequat. </bento-typography> </template> </bento-card> <bento-button v-else v-bento-highlight-directive>Button</bento-button> </div> `, setup(props) { const checked = ref(false); return { args: isVue2 ? props : _args, checked, }; }, }), parameters: storybookDocsParameter(HighlightDefaultExample), }; 

package/dist/assets/directives/keyboard-navigation/keyboard-navigation.stories.ts

@@ -1 +1 @@
-import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { BentoCard } from '@/components/card'; import { BentoFocusTrap } from '@/components/focus-trap'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoKeyboardNavigationDirective } from './keyboard-navigation'; const meta: Meta = { title: 'Keyboard navigation', argTypes: { // Events 'keydown:escape': { defaultValue: '', description: 'Triggered when the "Esc" or "Escape" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:enter': { defaultValue: '', description: 'Triggered when the "Enter" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:tab': { defaultValue: '', description: 'Triggered when the "Tab" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:space': { defaultValue: '', description: 'Triggered when the "Space" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-right': { defaultValue: '', description: 'Triggered when the "Right" or "ArrowRight" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-left': { defaultValue: '', description: 'Triggered when the "Left" or "ArrowLeft" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-up': { defaultValue: '', description: 'Triggered when the "Up" or "ArrowUp" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-down': { defaultValue: '', description: 'Triggered when the "Down" or "ArrowDown" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:page-up': { defaultValue: '', description: 'Triggered when the "PageUp" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:page-down': { defaultValue: '', description: 'Triggered when the "PageDown" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:home': { defaultValue: '', description: 'Triggered when the "Home" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:end': { defaultValue: '', description: 'Triggered when the "End" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoKeyboardNavigationDirective>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoFocusTrap }, directives: { BentoKeyboardNavigationDirective }, props: Object.keys(argTypes), template: ` <div ref="containerRef" style="max-width: 300px" v-bento-keyboard-navigation-directive v-on="{ 'keydown:escape': onKeyDown('Esc'), 'keydown:enter': onKeyDown('Enter'), 'keydown:tab': onKeyDown('Tab'), 'keydown:arrow-right': onKeyDown('ArrowRight'), 'keydown:arrow-left': onKeyDown('ArrowLeft'), 'keydown:arrow-up': onKeyDown('ArrowUp'), 'keydown:arrow-down': onKeyDown('ArrowDown'), 'keydown:page-up': onKeyDown('PageUp'), 'keydown:page-down': onKeyDown('PageDown'), 'keydown:home': onKeyDown('Home'), 'keydown:end': onKeyDown('End'), 'keydown:space': onKeyDown('Space'), }" > <bento-focus-trap> <bento-card>{{ keyDownText }}</bento-card> </bento-focus-trap> </div> `, setup() { const keyDownText = ref('Press a key'); const containerRef = ref(null); const onKeyDown = (keyDown: string) => ({ detail: event }: CustomEvent) => { // Stop propagation event.stopPropagation(); event.preventDefault(); event.stopImmediatePropagation(); keyDownText.value = keyDown; action('keydown')(keyDown); }; return { // Refs containerRef, // Values keyDownText, // Events onKeyDown, }; }, }), parameters: storybookDocsParameter(` <div v-bento-keyboard-navigation-directive v-on="{ 'keydown:escape': onKeyDown('Esc'), 'keydown:enter': onKeyDown('Enter'), 'keydown:tab': onKeyDown('Tab'), 'keydown:arrow-right': onKeyDown('ArrowRight'), 'keydown:arrow-left': onKeyDown('ArrowLeft'), 'keydown:arrow-up': onKeyDown('ArrowUp'), 'keydown:arrow-down': onKeyDown('ArrowDown'), 'keydown:page-up': onKeyDown('PageUp'), 'keydown:page-down': onKeyDown('PageDown'), 'keydown:home': onKeyDown('Home'), 'keydown:end': onKeyDown('End'), 'keydown:space': onKeyDown('Space'), }" > Content here </div> `), }; 
+import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { BentoCard } from '@/components/card'; import { BentoFocusTrap } from '@/components/focus-trap'; import { storybookDocsParameter } from '@/utils/ts/storybook'; const KeyboardNavigationDefaultExample = "<template>\n <div\n v-bento-keyboard-navigation-directive\n style=\"max-width: 300px\"\n @keydown:escape=\"keyDownText = 'Esc'\"\n @keydown:enter=\"keyDownText = 'Enter'\"\n @keydown:tab=\"keyDownText = 'Tab'\"\n @keydown:arrow-right=\"keyDownText = 'ArrowRight'\"\n @keydown:arrow-left=\"keyDownText = 'ArrowLeft'\"\n @keydown:arrow-up=\"keyDownText = 'ArrowUp'\"\n @keydown:arrow-down=\"keyDownText = 'ArrowDown'\"\n @keydown:page-up=\"keyDownText = 'PageUp'\"\n @keydown:page-down=\"keyDownText = 'PageDown'\"\n @keydown:home=\"keyDownText = 'Home'\"\n @keydown:end=\"keyDownText = 'End'\"\n @keydown:space=\"keyDownText = 'Space'\"\n >\n <bento-card>{{ keyDownText }}</bento-card>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoCard,\n BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective,\n } from '@adyen/bento-vue2';\n\n const keyDownText = ref('Press a key');\n</script>\n"; import { BentoKeyboardNavigationDirective } from './keyboard-navigation'; const meta: Meta = { title: 'Keyboard navigation', argTypes: { // Events 'keydown:escape': { defaultValue: '', description: 'Triggered when the "Esc" or "Escape" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:enter': { defaultValue: '', description: 'Triggered when the "Enter" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:tab': { defaultValue: '', description: 'Triggered when the "Tab" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:space': { defaultValue: '', description: 'Triggered when the "Space" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-right': { defaultValue: '', description: 'Triggered when the "Right" or "ArrowRight" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-left': { defaultValue: '', description: 'Triggered when the "Left" or "ArrowLeft" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-up': { defaultValue: '', description: 'Triggered when the "Up" or "ArrowUp" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:arrow-down': { defaultValue: '', description: 'Triggered when the "Down" or "ArrowDown" keys are pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:page-up': { defaultValue: '', description: 'Triggered when the "PageUp" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:page-down': { defaultValue: '', description: 'Triggered when the "PageDown" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:home': { defaultValue: '', description: 'Triggered when the "Home" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, 'keydown:end': { defaultValue: '', description: 'Triggered when the "End" key is pressed', table: { type: { summary: '(event: Event) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoKeyboardNavigationDirective>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoFocusTrap }, directives: { BentoKeyboardNavigationDirective }, props: Object.keys(argTypes), template: ` <div ref="containerRef" style="max-width: 300px" v-bento-keyboard-navigation-directive v-on="{ 'keydown:escape': onKeyDown('Esc'), 'keydown:enter': onKeyDown('Enter'), 'keydown:tab': onKeyDown('Tab'), 'keydown:arrow-right': onKeyDown('ArrowRight'), 'keydown:arrow-left': onKeyDown('ArrowLeft'), 'keydown:arrow-up': onKeyDown('ArrowUp'), 'keydown:arrow-down': onKeyDown('ArrowDown'), 'keydown:page-up': onKeyDown('PageUp'), 'keydown:page-down': onKeyDown('PageDown'), 'keydown:home': onKeyDown('Home'), 'keydown:end': onKeyDown('End'), 'keydown:space': onKeyDown('Space'), }" > <bento-focus-trap> <bento-card>{{ keyDownText }}</bento-card> </bento-focus-trap> </div> `, setup() { const keyDownText = ref('Press a key'); const containerRef = ref(null); const onKeyDown = (keyDown: string) => ({ detail: event }: CustomEvent) => { // Stop propagation event.stopPropagation(); event.preventDefault(); event.stopImmediatePropagation(); keyDownText.value = keyDown; action('keydown')(keyDown); }; return { // Refs containerRef, // Values keyDownText, // Events onKeyDown, }; }, }), parameters: storybookDocsParameter(KeyboardNavigationDefaultExample), }; 

package/dist/assets/directives/tooltip/tooltip.internal.types.ts

@@ -0,0 +1 @@
+import type { DirectiveBinding } from 'vue/types/options'; export interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> { readonly value: string; } 

package/dist/assets/directives/tooltip/tooltip.stories.ts

@@ -1 +1 @@
-import { BentoTooltipDirective } from './tooltip'; import { BentoTooltipPosition } from './tooltip.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoModal from '@/components/modal/modal.vue'; import { BentoInfoIcon } from '@/components/info-icon'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoButton from '@/components/button/button.vue'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Tooltip', parameters: { layout: 'centered', }, argTypes: { position: { description: 'Position the tooltip should take if space is available. Defaults to "top"', options: Object.values(BentoTooltipPosition), mapping: BentoTooltipPosition, control: { type: 'select', }, table: { defaultValue: { summary: 'BentoTooltipPosition.TOP' }, type: { summary: 'BentoTooltipPosition' }, }, }, text: { description: 'Text showed in the tooltip on hover', control: 'text', table: { type: { summary: 'string' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoButton>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton }, directives: { BentoTooltipDirective }, props: Object.keys(argTypes), template: ` <div class="b-tooltip-story"> <bento-button class="b-tooltip-story__tooltip-target" v-bento-tooltip-directive:[args.position]="args.text" > Toggle tooltip </bento-button> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { text: 'Tooltip content', position: BentoTooltipPosition.TOP, }, parameters: storybookDocsParameter(` <template> <bento-button v-bento-tooltip-directive:[BentoTooltipPosition.TOP]="refWithTooltipText"> Toggle tooltip </bento-button> </template> <script setup lang="ts"> import { ref } from "vue" import { BentoButton, BentoTooltipPosition, BentoTooltipDirective as vBentoTooltipDirective, } from "@adyen/bento-vue2" const refWithTooltipText = ref('Tooltip text') </script> `), }; export const InsideModal: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoInfoIcon }, directives: { BentoTooltipDirective }, props: Object.keys(argTypes), template: ` <bento-modal :is-open="true"> Title of the Modal <template #content> Mandatory content slot <bento-info-icon :tooltip-text="args.text" :tooltip-position="args.position" /> </template> </bento-modal> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { text: 'Tooltip content', position: BentoTooltipPosition.RIGHT, }, }; 
+import { BentoTooltipDirective } from './tooltip'; import { BentoTooltipPosition } from './tooltip.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoModal from '@/components/modal/modal.vue'; import { BentoInfoIcon } from '@/components/info-icon'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoButton from '@/components/button/button.vue'; import { isVue2 } from 'vue-demi'; const TooltipDefaultExample = "<template>\n <div class=\"b-tooltip-story\">\n <bento-button v-bento-tooltip-directive:[position]=\"tooltipText\" class=\"b-tooltip-story__tooltip-target\">\n Toggle tooltip\n </bento-button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton, BentoTooltipDirective as vBentoTooltipDirective } from '@adyen/bento-vue2';\n import { BentoTooltipPosition } from '../tooltip.types';\n\n const tooltipText = 'Tooltip content';\n const position = BentoTooltipPosition.TOP;\n</script>\n"; const meta: Meta = { title: 'Tooltip', parameters: { layout: 'centered', }, argTypes: { position: { description: 'Position the tooltip should take if space is available. Defaults to "top"', options: Object.values(BentoTooltipPosition), mapping: BentoTooltipPosition, control: { type: 'select', }, table: { defaultValue: { summary: 'BentoTooltipPosition.TOP' }, type: { summary: 'BentoTooltipPosition' }, }, }, text: { description: 'Text showed in the tooltip on hover', control: 'text', table: { type: { summary: 'string' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoButton>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton }, directives: { BentoTooltipDirective }, props: Object.keys(argTypes), template: ` <div class="b-tooltip-story"> <bento-button class="b-tooltip-story__tooltip-target" v-bento-tooltip-directive:[args.position]="args.text" > Toggle tooltip </bento-button> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { text: 'Tooltip content', position: BentoTooltipPosition.TOP, }, parameters: storybookDocsParameter(TooltipDefaultExample), }; export const InsideModal: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoInfoIcon }, directives: { BentoTooltipDirective }, props: Object.keys(argTypes), template: ` <bento-modal :is-open="true"> Title of the Modal <template #content> Mandatory content slot <bento-info-icon :tooltip-text="args.text" :tooltip-position="args.position" /> </template> </bento-modal> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { text: 'Tooltip content', position: BentoTooltipPosition.RIGHT, }, }; 

package/dist/assets/directives/tooltip/tooltip.types.ts

@@ -1 +1 @@
-import type { DirectiveBinding } from 'vue/types/options'; import { PopperContainerPositionBasic } from '../../components/popper-container/popper-container.types'; export interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> { readonly value: string; } export const BentoTooltipPosition = { ...PopperContainerPositionBasic }; export type BentoTooltipPosition = PopperContainerPositionBasic; export enum BentoTooltipState { HIDDEN = 'hidden', } 
+import { PopperContainerPositionBasic } from '../../components/popper-container/popper-container.types'; export const BentoTooltipPosition = { ...PopperContainerPositionBasic }; export type BentoTooltipPosition = PopperContainerPositionBasic; export enum BentoTooltipState { HIDDEN = 'hidden', } 

package/dist/assets/icons.json

@@ -254,6 +254,7 @@
   "nav-financial-products",
   "nav-giving",
   "nav-home",
+  "nav-onboarding-manager",
   "nav-partners",
   "nav-payments",
   "nav-reconciliation",

package/dist/assets/install.ts

@@ -1 +1 @@
-import installToast from './composables/use-bento-toast-controller/install'; import installTheme, { setTheme } from './composables/use-bento-theme/install'; import { deprecate } from './utils/ts/deprecate'; import { BentoTheme } from './composables/use-bento-theme/install.types'; import type { PluginObject } from 'vue'; interface BentoVuePlugin { theme?: BentoTheme; withToast?: boolean; withUtilityClasses?: boolean; withDesignTokensCSSInjection?: boolean; } const plugin: PluginObject<BentoVuePlugin> = { name: 'BentoVue', install: async ( Vue, { theme = BentoTheme.BENTO_LIGHT, withToast = false, withUtilityClasses = false, withDesignTokensCSSInjection = true, }: BentoVuePlugin ) => { installTheme(Vue); if (withToast) { installToast(Vue); } if (withDesignTokensCSSInjection) { deprecate( 'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin', 'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables', '2.0.0' ); // Make sure to put all awaited CSS imports below this point and not above! if (theme === BentoTheme.STYLEGUIDE) { await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css'); } else { await import('@adyen/bento-design-tokens/dist/css/bento/variables.css'); } if (withUtilityClasses) { await import('@adyen/bento-design-tokens/dist/css/bento/utility.css'); } } if (theme === BentoTheme.STYLEGUIDE) { setTheme(BentoTheme.STYLEGUIDE); } else if (theme === BentoTheme.BENTO_SYSTEM) { setTheme(BentoTheme.BENTO_SYSTEM); } else if (theme === BentoTheme.BENTO_DARK) { setTheme(BentoTheme.BENTO_DARK); } else if (theme === BentoTheme.BENTO) { deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0'); setTheme(BentoTheme.BENTO_LIGHT); } else { setTheme(BentoTheme.BENTO_LIGHT); } }, }; export { BentoTheme }; export default plugin; 
+import installToast from './composables/use-bento-toast-controller/install'; import installTheme, { setTheme } from './composables/use-bento-theme/install'; import { deprecate } from './utils/ts/deprecate'; import { BentoTheme } from './composables/use-bento-theme/install.types'; import type { PluginObject } from 'vue'; interface BentoVuePlugin { theme?: BentoTheme; withToast?: boolean; withUtilityClasses?: boolean; withDesignTokensCSSInjection?: boolean; } const plugin: PluginObject<BentoVuePlugin> = { name: 'BentoVue', install: async ( Vue, { theme = BentoTheme.BENTO_LIGHT, withToast = false, withUtilityClasses = false, withDesignTokensCSSInjection = true, }: BentoVuePlugin ) => { installTheme(Vue); if (withToast) { installToast(Vue); } if (withDesignTokensCSSInjection) { deprecate( 'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin', 'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables', '3.0.0' ); // Make sure to put all awaited CSS imports below this point and not above! if (theme === BentoTheme.STYLEGUIDE) { await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css'); } else { await import('@adyen/bento-design-tokens/dist/css/bento/variables.css'); } if (withUtilityClasses) { await import('@adyen/bento-design-tokens/dist/css/bento/utility.css'); } } switch (theme) { case BentoTheme.STYLEGUIDE: case BentoTheme.BENTO_SYSTEM: case BentoTheme.BENTO_LIGHT: case BentoTheme.BENTO_DARK: case BentoTheme.BENTO_LARGE_LIGHT: case BentoTheme.BENTO_LARGE_DARK: setTheme(theme); break; case BentoTheme.BENTO: deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '3.0.0'); setTheme(BentoTheme.BENTO_LIGHT); break; default: setTheme(BentoTheme.BENTO_LIGHT); } }, }; export { BentoTheme }; export default plugin; 

package/dist/assets/tailwind/README.md

@@ -24,7 +24,7 @@ Think of these utilities as tools for:
 For implementing standard interface patterns (buttons, inputs, cards, etc.), using the pre-built components from the
 main Bento library is generally recommended for consistency and accessibility.
 
-### What's customized?
+## What's customized?
 
 This preset removes default Tailwind values for categories that are fully managed by Bento:
 
@@ -58,7 +58,7 @@ npm install @adyen/bento-tailwind
 
 ## Usage
 
-### 1. Import the Bento styles
+### Import the Bento styles
 
 For Adyen's consistent look and feel, you'll need to import CSS variables for Bento's foundational design rules for
 colors, fonts, and spacing.
@@ -82,7 +82,7 @@ Add the following lines to your project's main CSS file:
 @import '@adyen/bento-design-tokens/dist/css/bento/variables-dark.css';
 ```
 
-### 2. Install Tailwind Bento theme
+### Install Tailwind Bento theme
 
 To integrate Bento styles and design tokens using the `@adyen/bento-tailwind` package.