@adyen/bento-mcp 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.9.0 (2026-07-15)
+
+### Miscellaneous Chores
+
+- updated NPM package dependecies ([f30435e3e](https://github.com/Adyen/bento/commit/f30435e3e))
+
+### ❤️ Thank You
+
+- gerald
+
+
 ## 0.8.0 (2026-07-08)
 
 ### Build System

package/dist/assets/components/anchor-scroller/anchor-scroller.vue

@@ -1 +1 @@
-<template> <div v-if="computedItems.length" class="b-anchor-scroller"> <nav ref="navigationRef" class="b-anchor-scroller__navigation" :class="navigationConditionalClasses" :aria-labelledby="navLabelId" > <fixed-scroller condensed centered> <div class="b-anchor-scroller__navigation-panel"> <bento-typography :id="navLabelId" el="span" class="b-anchor-scroller__navigation-panel-label" stronger > {{ t('jumpTo') }} </bento-typography> <anchor-scroller-list :items="computedItems" :active-index="currentActiveIndex" :scroll-offset="bottom" /> </div> </fixed-scroller> </nav> <slot /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, watch } from 'vue'; import { refDebounced, useElementBounding } from '@vueuse/core'; import BentoTypography from '@/components/typography/typography.vue'; import { FixedScroller } from '@/internal'; import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types'; import { AnchorScrollerList } from './components/anchor-scroller-list'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { unrefElement } from '@/directives/click-outside/utils'; import messages from './messages.json'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), { activeIndex: undefined, }); const emit = defineEmits<{ /** * Emits update event when the active index is changed */ (e: 'update:active-index', value: number): void; }>(); const navigationRef = ref(null); const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item }))); // Skip and cache only items that are enabled const enabledItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, disabled: item.disabled, })) .filter( (item): item is { element: Element; originalIndex: number; disabled: boolean } => !item.disabled && !!item.element ) ); const { top, bottom } = useElementBounding(navigationRef); // Extract strictly the elements for the ScrollSpy to watch const scrollToTargets = computed(() => enabledItems.value.map(c => c.element)); const navigationConditionalClasses = computed(() => ({ 'b-anchor-scroller__navigation--pinned': top.value <= 1, })); const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, { default: toRef(props, 'activeIndex'), }); const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200); const currentActiveIndex = computed(() => { const candidate = enabledItems.value[debouncedActiveIndex.value]; return candidate ? candidate.originalIndex : 0; }); watch(currentActiveIndex, val => { if (Number.isFinite(val)) { emit('update:active-index', val); } }); watch( () => props.activeIndex, val => { if (Number.isFinite(val) && computedItems.value[val].disabled) { printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`); } } ); const navLabelId = generateUid('bento-anchor-scroller-label'); </script> <script lang="ts"> /** * A navigation component that tracks page scroll and allows jumping to sections. * * @example * import { BentoAnchorScroller } from '@adyen/bento-vue2'; * import { ref } from 'vue'; * * export default { * components: { BentoAnchorScroller }, * template: ` * <bento-anchor-scroller :items="items"> * <section ref="section1">Section 1</section> * <section ref="section2">Section 2</section> * </bento-anchor-scroller> * `, * setup() { * const section1 = ref(null); * const section2 = ref(null); * const items = ref([ * { title: 'Section 1', elementRef: section1 }, * { title: 'Section 2', elementRef: section2 }, * ]); * return { * items, * section1, * section2, * } * } * } */ export default { i18n: { messages }, name: 'bento-anchor-scroller', }; </script> <style lang="scss" scoped src="./anchor-scroller.scss" /> 
+<template> <div v-if="computedItems.length" class="b-anchor-scroller"> <nav ref="navigationRef" class="b-anchor-scroller__navigation" :class="navigationConditionalClasses" :aria-labelledby="navLabelId" > <fixed-scroller condensed centered> <div class="b-anchor-scroller__navigation-panel"> <bento-typography :id="navLabelId" el="span" class="b-anchor-scroller__navigation-panel-label" stronger > {{ t('jumpTo') }} </bento-typography> <anchor-scroller-list :items="computedItems" :active-index="currentActiveIndex" :scroll-offset="bottom" /> </div> </fixed-scroller> </nav> <slot /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, watch } from 'vue'; import { useElementBounding } from '@vueuse/core'; import BentoTypography from '@/components/typography/typography.vue'; import { FixedScroller } from '@/internal'; import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types'; import { AnchorScrollerList } from './components/anchor-scroller-list'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { unrefElement } from '@/directives/click-outside/utils'; import messages from './messages.json'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), { activeIndex: undefined, }); const emit = defineEmits<{ /** * Emits update event when the active index is changed */ (e: 'update:active-index', value: number): void; }>(); const navigationRef = ref(null); const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item }))); // Skip and cache only items that are enabled const enabledItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, disabled: item.disabled, })) .filter( (item): item is { element: Element; originalIndex: number; disabled: boolean } => !item.disabled && !!item.element ) ); const { top, bottom } = useElementBounding(navigationRef); // Extract strictly the elements for the ScrollSpy to watch const scrollToTargets = computed(() => enabledItems.value.map(c => c.element)); const navigationConditionalClasses = computed(() => ({ 'b-anchor-scroller__navigation--pinned': top.value <= 1, })); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, { default: toRef(props, 'activeIndex'), debounce: 200, }); const currentActiveIndex = computed(() => { const candidate = enabledItems.value[scrollSpyActiveIndex.value]; return candidate ? candidate.originalIndex : 0; }); watch(currentActiveIndex, val => { if (Number.isFinite(val)) { emit('update:active-index', val); } }); watch( () => props.activeIndex, val => { if (Number.isFinite(val) && computedItems.value[val].disabled) { printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`); } } ); const navLabelId = generateUid('bento-anchor-scroller-label'); </script> <script lang="ts"> /** * A navigation component that tracks page scroll and allows jumping to sections. * * @example * import { BentoAnchorScroller } from '@adyen/bento-vue2'; * import { ref } from 'vue'; * * export default { * components: { BentoAnchorScroller }, * template: ` * <bento-anchor-scroller :items="items"> * <section ref="section1">Section 1</section> * <section ref="section2">Section 2</section> * </bento-anchor-scroller> * `, * setup() { * const section1 = ref(null); * const section2 = ref(null); * const items = ref([ * { title: 'Section 1', elementRef: section1 }, * { title: 'Section 2', elementRef: section2 }, * ]); * return { * items, * section1, * section2, * } * } * } */ export default { i18n: { messages }, name: 'bento-anchor-scroller', }; </script> <style lang="scss" scoped src="./anchor-scroller.scss" /> 

package/dist/assets/components/empty-state/empty-state.docs.mdx

@@ -9,9 +9,9 @@ Empty states are moments in the user experience when there is nothing to display
 
 This component can be used to provide:
 
--   Information about system status
--   Contextual learning cues
--   Direct pathways for key tasks
+- Information about system status
+- Contextual learning cues
+- Direct pathways for key tasks
 
 <Canvas of={EmptyStateStories.Default} />
 
@@ -19,20 +19,20 @@ This component can be used to provide:
 
 There are seven empty state types commonly used in our interface:
 
--   **First touch**: When the user is onboarding or starting to use a product area for the first time.
+- **First touch**: When the user is onboarding or starting to use a product area for the first time.
 
--   **No results found**: When the user’s search request does not deliver any results, either due to search parameters
-    or because the information doesn’t exist.
+- **No results found**: When the user’s search request does not deliver any results, either due to search parameters or
+  because the information doesn’t exist.
 
--   **Page not available (access restricted)**: When the user’s role does not allow them access to an area in the
-    interface.
+- **Page not available (access restricted)**: When the user’s role does not allow them access to an area in the
+  interface.
 
--   **Wrong environment**: When the user can access multiple environments and clicks into an area that is not available
-    on one of those environments.
+- **Wrong environment**: When the user can access multiple environments and clicks into an area that is not available on
+  one of those environments.
 
--   **All done**: When the user has read, removed, or completed all items and there is nothing more to do.
+- **All done**: When the user has read, removed, or completed all items and there is nothing more to do.
 
--   **Planned maintenance**: A static page displayed when the website or system is temporarily unavailable.
+- **Planned maintenance**: A static page displayed when the website or system is temporarily unavailable.
 
 ## Variations
 
@@ -63,33 +63,63 @@ _Example: When there are no results to show when searching within filters._
 
 ## Modifiers
 
+### Action
+
+The `action` prop supports two modes:
+
+- **Button (default)**: When `action` contains a `title` and an `event` handler, a standard `bento-button` is rendered.
+
+    ```js
+    action: {
+        title: 'Try again',
+        event: () => handleRetry(),
+    }
+    ```
+
+- **Menu**: When `action` includes a `data` array of menu items, a `bento-menu` is rendered instead. This is useful when
+  the empty state should offer multiple options. An optional `icon` can be provided to display an icon on the left side
+  of the menu button.
+
+    ```js
+    action: {
+        title: 'Options',
+        icon: PlusIcon,
+        data: [
+            { text: 'Create new', handler: () => handleCreate() },
+            { text: 'Import', handler: () => handleImport() },
+        ],
+    }
+    ```
+
+    All other `bento-menu` props such as `menuPosition`, `menuWidth`, and `closeMenuOnItemSelect` are also supported.
+
 ### Image
 
 The illustration shown by the empty state `full-page` / `embedded` variants. You can refer to
 [this list of illustrations](https://www.figma.com/file/qSUFsdW9fjMev5nHHBfToj/Bento---Illustrations---Empty-states),
 which is mapped to following values:
 
--   `1-generic-use`
--   `2-generic-use`
--   `3-generic-use`
--   `4-generic-use`
--   `adding-payment-methods`
--   `adyen-giving`
--   `internal-error`
--   `no-results-found`
--   `notifications-cleared`
--   `page-not-found`
--   `planned-maintenance`
--   `referrals`
--   `upload-files`
--   `wrong-environment`
+- `1-generic-use`
+- `2-generic-use`
+- `3-generic-use`
+- `4-generic-use`
+- `adding-payment-methods`
+- `adyen-giving`
+- `internal-error`
+- `no-results-found`
+- `notifications-cleared`
+- `page-not-found`
+- `planned-maintenance`
+- `referrals`
+- `upload-files`
+- `wrong-environment`
 
 ## Accessibility
 
 Illustrations are considered decorative, they should be skipped by screen readers. Users should be able to:
 
--   hear the component's label and description, and the purpose is clear;
--   identify the component's role as an empty state.
+- hear the component's label and description, and the purpose is clear;
+- identify the component's role as an empty state.
 
 ### Keyboard interaction
 
@@ -110,6 +140,6 @@ A list of keyboard interactions is provided in the table below:
 
 ## Resources
 
--   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16462-6288&mode=design&t=q79EnMp4k59VirFh-0)
--   [Illustrations](https://www.figma.com/file/qSUFsdW9fjMev5nHHBfToj/Bento---Illustrations---Empty-states)
--   [WAI Images (decorative)](https://www.w3.org/WAI/tutorials/images/decorative/)
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16462-6288&mode=design&t=q79EnMp4k59VirFh-0)
+- [Illustrations](https://www.figma.com/file/qSUFsdW9fjMev5nHHBfToj/Bento---Illustrations---Empty-states)
+- [WAI Images (decorative)](https://www.w3.org/WAI/tutorials/images/decorative/)

package/dist/assets/components/empty-state/empty-state.types.ts

@@ -1 +1 @@
-import type { BentoButtonActionObject } from '@/components/button/components/button-actions/button-actions.types'; import type { BentoTypographyElement } from '@/components/typography/typography.types'; export enum BentoEmptyStateVariant { FULL_PAGE = 'full-page', EMBEDDED = 'embedded', BASIC = 'basic', CONDENSED = 'condensed', } export enum BentoEmptyStateImage { GENERIC_USE1 = '1-generic-use', GENERIC_USE2 = '2-generic-use', GENERIC_USE3 = '3-generic-use', GENERIC_USE4 = '4-generic-use', ADDING_PAYMENT_METHOD = 'adding-payment-methods', ADYEN_GIVING = 'adyen-giving', DELIGHT = 'delight', INTERNAL_ERROR = 'internal-error', NO_RESULTS_FOUND = 'no-results-found', NOTIFICATIONS_CLEARED = 'notifications-cleared', PAGE_NOT_FOUND = 'page-not-found', PLANNED_MAINTENANCE = 'planned-maintenance', REFERRALS = 'referrals', SUCCESS = 'success', UPLOAD_FILES = 'upload-files', WRONG_ENVIRONMENT = 'wrong-environment', } export enum BentoEmptyStateImageVariant { SMALL = 'small', LARGE = 'large', NULL = null, } export interface BentoEmptyStateProps { /** * Defines the button at the end of the component. */ action?: BentoButtonActionObject; /** * The empty state description. * Gives additional details to the issue. * This can be used or the default slot */ description?: string; /** * Sets the heading HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ headingEl?: `${BentoTypographyElement}`; /** * Name of the illustration for the empty state. */ image?: `${BentoEmptyStateImage}`; /** * The empty state heading. * Should clearly explain the issue. */ title?: string; /** * Types of different empty states * @values full-page, embedded, basic, condensed */ variant?: `${BentoEmptyStateVariant}`; } 
+import type { BentoActionMenu, BentoButtonActionObject, } from '@/components/button/components/button-actions/button-actions.types'; import type { BentoTypographyElement } from '@/components/typography/typography.types'; export enum BentoEmptyStateVariant { FULL_PAGE = 'full-page', EMBEDDED = 'embedded', BASIC = 'basic', CONDENSED = 'condensed', } export enum BentoEmptyStateImage { GENERIC_USE1 = '1-generic-use', GENERIC_USE2 = '2-generic-use', GENERIC_USE3 = '3-generic-use', GENERIC_USE4 = '4-generic-use', ADDING_PAYMENT_METHOD = 'adding-payment-methods', ADYEN_GIVING = 'adyen-giving', DELIGHT = 'delight', INTERNAL_ERROR = 'internal-error', NO_RESULTS_FOUND = 'no-results-found', NOTIFICATIONS_CLEARED = 'notifications-cleared', PAGE_NOT_FOUND = 'page-not-found', PLANNED_MAINTENANCE = 'planned-maintenance', REFERRALS = 'referrals', SUCCESS = 'success', UPLOAD_FILES = 'upload-files', WRONG_ENVIRONMENT = 'wrong-environment', } export enum BentoEmptyStateImageVariant { SMALL = 'small', LARGE = 'large', NULL = null, } export interface BentoEmptyStateProps { /** * Defines the button at the end of the component. */ action?: BentoButtonActionObject & BentoActionMenu; /** * The empty state description. * Gives additional details to the issue. * This can be used or the default slot */ description?: string; /** * Sets the heading HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ headingEl?: `${BentoTypographyElement}`; /** * Name of the illustration for the empty state. */ image?: `${BentoEmptyStateImage}`; /** * The empty state heading. * Should clearly explain the issue. */ title?: string; /** * Types of different empty states * @values full-page, embedded, basic, condensed */ variant?: `${BentoEmptyStateVariant}`; } 

package/dist/assets/components/empty-state/empty-state.vue

@@ -1 +1 @@
-<template> <div ref="rootRef" class="b-empty-state"> <!-- illustration --> <img v-if="image && imageVariant" alt="" class="b-empty-state__image" :class="imageConditionalClasses" :src="imageSvg" /> <!-- heading --> <bento-typography v-bind="headingProps" class="b-empty-state__title"> <slot name="title"> {{ title }} </slot> </bento-typography> <!-- details --> <bento-typography v-if="variant !== 'condensed'" variant="body" class="b-empty-state__details"> <slot> {{ description }} </slot> </bento-typography> <!-- action --> <bento-button v-if="action" type="button" :variant="actionVariant" @click="action.event"> <template v-if="action.icon" #iconLeft> <component :is="action.icon" :svg-title="action.title"></component> </template> {{ action.title }} </bento-button> </div> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import { BentoButton, type BentoButtonVariant } from '@/components/button'; import { BentoTypography, type BentoTypographyElement, type BentoTypographyVariant } from '@/components/typography'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { BentoEmptyStateImageVariant, type BentoEmptyStateProps, BentoEmptyStateVariant, } from './empty-state.types'; const WIDTH_BREAKPOINT = 740; const props = withDefaults(defineProps<BentoEmptyStateProps>(), { action: null, description: null, headingEl: null, image: null, title: '', variant: 'basic', }); const rootRef = ref<HTMLDivElement>(null); const containerWidth = ref(0); const isBelowBreakpoint = computed(() => containerWidth.value < WIDTH_BREAKPOINT); const imageVariant = computed<BentoEmptyStateImageVariant>(() => { switch (props.variant) { case BentoEmptyStateVariant.FULL_PAGE: return isBelowBreakpoint.value ? BentoEmptyStateImageVariant.SMALL : BentoEmptyStateImageVariant.LARGE; case BentoEmptyStateVariant.EMBEDDED: return isBelowBreakpoint.value ? null : BentoEmptyStateImageVariant.SMALL; default: return null; } }); const imageSvg = ref(''); watch( [() => props.image, imageVariant], async () => { if (props.image && imageVariant.value) { // rollup only supports one variable in a dynamic path /* v8 ignore next 4 */ if (imageVariant.value === 'small') { imageSvg.value = (await import(`./assets/small/${props.image}.svg`)).default; } else { imageSvg.value = (await import(`./assets/large/${props.image}.svg`)).default; } } }, { immediate: true } ); const imageConditionalClasses = computed(() => ({ 'b-empty-state__image--small': imageVariant.value === 'small', 'b-empty-state__image--large': imageVariant.value === 'large', })); const HEADING_ELEMENT_MAP = { [BentoEmptyStateVariant.FULL_PAGE]: 'h2', [BentoEmptyStateVariant.EMBEDDED]: 'h3', [BentoEmptyStateVariant.BASIC]: 'h3', [BentoEmptyStateVariant.CONDENSED]: 'div', }; const headingElement = computed( () => (props.headingEl || HEADING_ELEMENT_MAP[props.variant]) as BentoTypographyElement ); const headingProps = computed(() => ({ el: headingElement.value, medium: props.variant !== BentoEmptyStateVariant.CONDENSED, strongest: props.variant === BentoEmptyStateVariant.CONDENSED, variant: (props.variant === BentoEmptyStateVariant.CONDENSED ? 'body' : 'title') as BentoTypographyVariant, })); const actionVariant = computed<`${BentoButtonVariant}`>(() => { switch (props.variant) { case BentoEmptyStateVariant.FULL_PAGE: return 'primary'; case BentoEmptyStateVariant.CONDENSED: return 'tertiary'; default: return 'secondary'; } }); // Lifecycle watch(rootRef, () => { // Use ResizeObserver so that image is only fetched if needed (visible). observeSizeOfElement(rootRef.value, () => { if (rootRef.value) { containerWidth.value = rootRef.value.offsetWidth; } }); }); </script> <script lang="ts"> /** * Empty states are moments in the user experience when there is nothing to display. * This component can be used to provide: * - Information about system status * - Contextual learning cues * - Direct pathways for key tasks * * @example * import { BentoEmptyState } from '@adyen/bento-vue2'; * * export default { * components: { BentoEmptyState }, * template: ` * <bento-empty-state * title="No results were found" * image="no-results-found" * variant="full-page" * :action="{ title: 'Reset filters', event: () => {} }" * > * Try a different term or reset search filters * </bento-empty-state> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./empty-state.scss" /> 
+<template> <div ref="rootRef" class="b-empty-state"> <!-- illustration --> <img v-if="image && imageVariant" alt="" class="b-empty-state__image" :class="imageConditionalClasses" :src="imageSvg" /> <!-- heading --> <bento-typography v-bind="headingProps" class="b-empty-state__title"> <slot name="title"> {{ title }} </slot> </bento-typography> <!-- details --> <bento-typography v-if="variant !== 'condensed'" variant="body" class="b-empty-state__details"> <slot> {{ description }} </slot> </bento-typography> <!-- action --> <bento-menu v-if="action && action.data" :data="action.data" :button="{ variant: actionVariant }" :close-menu-on-item-select="action.closeMenuOnItemSelect" :menu-position="action.menuPosition" :menu-fixed-positioning="action.menuFixedPositioning" :menu-width="action.menuWidth" :teleport="action.teleport" > <template v-if="action.icon" #iconLeft> <component :is="action.icon" :svg-title="action.title"></component> </template> {{ action.title }} </bento-menu> <bento-button v-else-if="action" type="button" :variant="actionVariant" @click="action.event"> <template v-if="action.icon" #iconLeft> <component :is="action.icon" :svg-title="action.title"></component> </template> {{ action.title }} </bento-button> </div> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import { BentoButton, type BentoButtonVariant } from '@/components/button'; import { BentoMenu } from '@/components/menu'; import { BentoTypography, type BentoTypographyElement, type BentoTypographyVariant } from '@/components/typography'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { BentoEmptyStateImageVariant, type BentoEmptyStateProps, BentoEmptyStateVariant, } from './empty-state.types'; const WIDTH_BREAKPOINT = 740; const props = withDefaults(defineProps<BentoEmptyStateProps>(), { action: null, description: null, headingEl: null, image: null, title: '', variant: 'basic', }); const rootRef = ref<HTMLDivElement>(null); const containerWidth = ref(0); const isBelowBreakpoint = computed(() => containerWidth.value < WIDTH_BREAKPOINT); const imageVariant = computed<BentoEmptyStateImageVariant>(() => { switch (props.variant) { case BentoEmptyStateVariant.FULL_PAGE: return isBelowBreakpoint.value ? BentoEmptyStateImageVariant.SMALL : BentoEmptyStateImageVariant.LARGE; case BentoEmptyStateVariant.EMBEDDED: return isBelowBreakpoint.value ? null : BentoEmptyStateImageVariant.SMALL; default: return null; } }); const imageSvg = ref(''); watch( [() => props.image, imageVariant], async () => { if (props.image && imageVariant.value) { // rollup only supports one variable in a dynamic path /* v8 ignore next 4 */ if (imageVariant.value === 'small') { imageSvg.value = (await import(`./assets/small/${props.image}.svg`)).default; } else { imageSvg.value = (await import(`./assets/large/${props.image}.svg`)).default; } } }, { immediate: true } ); const imageConditionalClasses = computed(() => ({ 'b-empty-state__image--small': imageVariant.value === 'small', 'b-empty-state__image--large': imageVariant.value === 'large', })); const HEADING_ELEMENT_MAP = { [BentoEmptyStateVariant.FULL_PAGE]: 'h2', [BentoEmptyStateVariant.EMBEDDED]: 'h3', [BentoEmptyStateVariant.BASIC]: 'h3', [BentoEmptyStateVariant.CONDENSED]: 'div', }; const headingElement = computed( () => (props.headingEl || HEADING_ELEMENT_MAP[props.variant]) as BentoTypographyElement ); const headingProps = computed(() => ({ el: headingElement.value, medium: props.variant !== BentoEmptyStateVariant.CONDENSED, strongest: props.variant === BentoEmptyStateVariant.CONDENSED, variant: (props.variant === BentoEmptyStateVariant.CONDENSED ? 'body' : 'title') as BentoTypographyVariant, })); const actionVariant = computed<`${BentoButtonVariant}`>(() => { switch (props.variant) { case BentoEmptyStateVariant.FULL_PAGE: return 'primary'; case BentoEmptyStateVariant.CONDENSED: return 'tertiary'; default: return 'secondary'; } }); // Lifecycle watch(rootRef, () => { // Use ResizeObserver so that image is only fetched if needed (visible). observeSizeOfElement(rootRef.value, () => { if (rootRef.value) { containerWidth.value = rootRef.value.offsetWidth; } }); }); </script> <script lang="ts"> /** * Empty states are moments in the user experience when there is nothing to display. * This component can be used to provide: * - Information about system status * - Contextual learning cues * - Direct pathways for key tasks * * @example * import { BentoEmptyState } from '@adyen/bento-vue2'; * * export default { * components: { BentoEmptyState }, * template: ` * <bento-empty-state * title="No results were found" * image="no-results-found" * variant="full-page" * :action="{ title: 'Reset filters', event: () => {} }" * > * Try a different term or reset search filters * </bento-empty-state> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./empty-state.scss" /> 

package/dist/assets/components/input-field-password/input-field-password.vue

@@ -1 +1 @@
-<template> <div ref="inputFieldPasswordRef"> <bento-input-field ref="inputFieldPasswordInputRef" v-bind="inputFieldArgs" class="b-input-field-password__input" autocapitalize="none" autocorrect="off" spellcheck="false" @blur="onBlur" @focus="onFocus" @update:model-value="onUpdateModelValue" @keydown="checkCapsLock" @keyup="checkCapsLock" > <template v-if="label">{{ label }}</template> <template v-else><slot /></template> <template v-if="description" #description> <slot name="description">{{ description }}</slot> </template> <template v-if="isCapsLockOn" #iconBefore> <div class="b-input-field-password__caps-lock-indicator" @mouseenter="handleCapsLockMouseEnter" @mouseleave="handleCapsLockMouseLeave" > <bento-image ref="inputFieldPasswordCapsLockIconRef" :src="CapsLockIcon" :alt="t('capsLockEnabled')" /> </div> <tooltip v-if="inputFieldPasswordCapsLockIconRef" :class="tooltipConditionalClass" :content="t('capsLockEnabled')" :disabled-focus-trap="true" :fallback-position="['top', 'bottom']" :is-shown="isTooltipDisplayed" :target-element="inputFieldPasswordCapsLockIconRef" /> </template> <template v-if="!disabled" #iconAfter> <bento-button variant="tertiary" @click="toggleInputType"> <template #iconLeft> <show-icon v-if="!isPasswordReadable" :svg-title="t('showPassword')" /> <hide-icon v-if="isPasswordReadable" :svg-title="t('hidePassword')" /> </template> </bento-button> </template> </bento-input-field> <bento-popover v-if="hasValidations" :open="isHintDisplayed" :target-element="inputFieldPasswordInputRef" :disable-focus-trap="true" :aria-label="computedValidations.title" :aria-describedby="validationListId" position="right-start" > <div :id="validationPopoverId"> <bento-typography v-if="computedValidations.title" class="b-input-field-password__validation-title"> {{ computedValidations.title }} </bento-typography> <p v-if="!hasErrors" class="b-input-field-password__validation-status--valid" role="alert"> {{ t('validationValid') }} </p> <ul :id="validationListId" class="b-input-field-password__validation-list"> <li v-for="(rule, index) in computedValidationList" :key="index" :class="passwordValidityConditionalClass[index]" aria-live="polite" aria-atomic="true" > <span class="b-input-field-password__validation-list-icon"> <checkmark-circle-fill-icon v-if="passwordValidity[index]" :svg-title="t('validationChecked')" /> <dot-icon v-else :svg-title="t('validationUnchecked')" /> </span> <bento-typography class="b-input-field-password__validation-list-text" el="span"> {{ rule.label }} </bento-typography> </li> </ul> <bento-typography v-if="computedValidations.suggestion" class="b-input-field-password__validation-suggestion" > {{ computedValidations.suggestion }} </bento-typography> </div> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoButton } from '@/components/button'; import { BentoImage } from '@/components/image'; import { BentoInputField } from '@/components/input-field'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { Tooltip } from '@/internal'; import type { BentoInputFieldProps } from '@/components/input-field/input-field.types'; import { BentoInputFieldPasswordDefaultRule, type BentoInputFieldPasswordErrorsList, type BentoInputFieldPasswordProps, BentoInputFieldPasswordType, type BentoInputFieldPasswordValidation, type BentoInputFieldPasswordValidationListItem, } from './input-field-password.types'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import HideIcon from '@adyen/ui-assets-icons-16/vue/hide'; import ShowIcon from '@adyen/ui-assets-icons-16/vue/show'; import CapsLockIcon from './assets/capslock.svg'; import { useFocusWithin, watchDebounced } from '@vueuse/core'; import { computed, provide, ref, type SetupContext, useAttrs, watch } from 'vue'; import { useI18n } from '@/utils/ts/i18n'; import { minLength, requireLowercase, requireNumeric, requireSpecialCharacter, requireUppercase, } from '@/components/input-field-password/utilities/input-field-password.validation'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; import messages from './messages.json'; import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoInputFieldPasswordProps>(), { condensed: false, debounceTime: DEBOUNCE_DURATION, description: null, disabled: false, disableValidation: false, errorMessage: null, label: null, optional: false, placeholder: '', readonly: false, required: false, tooltipText: null, validation: undefined, value: undefined, modelValue: undefined, withHint: true, }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the element has received focus */ (e: 'focus'): void; /** * Emits an `input:valid` event when the value is validated against the provided validations. * This emit has a debounce and is emitted after an `input` event. */ (e: 'input:valid'): void; /** * Emits an `input:error` event when the value fails the validation. * This emit has a debounce and is emitted after an `input` event. */ (e: 'input:error', errors: BentoInputFieldPasswordErrorsList): void; /** * Emits an `input` event whenever the value in the input is changed. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', value: BentoInputFieldPasswordProps['value']): void; /** * Emits an `update:model-value` event whenever the value in the input is changed. */ (e: 'update:model-value', value: BentoInputFieldPasswordProps['modelValue']): void; }>(); const attrs = useAttrs(); const inputType = ref(BentoInputFieldPasswordType.PASSWORD); const inputValue = ref(props.modelValue ?? props.value); const isHintDisplayed = ref(false); const isTouched = ref(false); const passwordValidity = ref<Array<boolean>>([]); const errorsList = ref<BentoInputFieldPasswordErrorsList>({}); const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null); const isTooltipDisplayed = ref(false); const inputFieldPasswordRef = ref(null); const inputFieldPasswordInputRef = ref(null); const inputFieldPasswordCapsLockIconRef = ref(null); const isCapsLockOn = ref(false); provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password'); const { focused } = useFocusWithin(inputFieldPasswordRef); const { emitValue } = useFormFieldEmits<BentoInputFieldPasswordProps['modelValue']>(emit); const validationListId = generateUid('validationListId'); const validationPopoverId = generateUid('validationPopoverId'); const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT); const passwordValidityConditionalClass = computed(() => passwordValidity.value.map(validity => validity ? 'b-input-field-password__validation-list--valid' : 'b-input-field-password__validation-list--invalid' ) ); const tooltipConditionalClass = computed(() => capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : '' ); const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({ ariaHidden: false, condensed: props.condensed, disabled: props.disabled, errorMessage: props.errorMessage, optional: props.optional, placeholder: props.placeholder, readonly: props.readonly, required: props.required, tooltipText: props.tooltipText, type: inputType.value, modelValue: inputValue.value, 'aria-haspopup': hasValidations.value ? 'dialog' : false, 'aria-describedby': hasValidations.value ? validationPopoverId : '', ...attrs, })); const computedValidations = computed<BentoInputFieldPasswordValidation>(() => { if (props.validation && !props.validation.extendDefaultValidation) { return props.validation; } const defaultValidationList = [ { label: t('validationMinLength', { numberOfCharacters: n(MIN_PASSWORD_LENGTH) }), key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH, validate: minLength, }, { label: t('validationRequireLowercase', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE, validate: requireLowercase, }, { label: t('validationRequireUppercase', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE, validate: requireUppercase, }, { label: t('validationRequireNumeric', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC, validate: requireNumeric, }, { label: t('validationRequireSpecialCharacter', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_SPECIAL_CHARACTER, validate: requireSpecialCharacter, }, ]; let validationList: Array<BentoInputFieldPasswordValidationListItem> = defaultValidationList; if (props.validation) { const defaultValidationKeys: Array<string> = defaultValidationList.map(rule => rule.key); const customRuleKeys = props.validation?.list?.map(rule => rule.key); // remove from the custom list any rules with default keys (rules that are overriding existent rules) const customValidationList = props.validation?.list?.filter(rule => !defaultValidationKeys.includes(rule.key)) ?? []; // loop through the default list and replace default rule with the custom rule if it exists const validationListWithOverrides = defaultValidationList.map(rule => { if (customRuleKeys?.includes(rule.key)) { const customRule = props.validation?.list?.find(customRule => customRule.key === rule.key); return customRule; } else { return rule; } }); validationList = [...validationListWithOverrides, ...customValidationList]; } return { title: props.validation?.title ?? t('validationTitle'), suggestion: props.validation?.suggestion ?? t('validationSuggestion'), list: validationList, }; }); const computedValidationList = computed(() => computedValidations.value?.list?.filter(rule => !rule.disabled)); const hasErrors = computed(() => passwordValidity.value?.some(validation => !validation)); const hasValidations = computed( () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0 ); const checkCapsLock = (e: KeyboardEvent) => { // Check if getModifierState exists and is a function in case the user's browser is autofilling if (typeof e.getModifierState === 'function') { isCapsLockOn.value = e.getModifierState('CapsLock'); } }; const toggleInputType = () => { if (isPasswordReadable.value) { inputType.value = BentoInputFieldPasswordType.PASSWORD; } else { inputType.value = BentoInputFieldPasswordType.TEXT; } }; const onUpdateModelValue = (value: string) => { if (props.disabled) { return; } inputValue.value = value; emitValue(inputValue.value); }; const onFocus = () => { emit('focus'); }; const onBlur = () => { emit('blur'); }; const checkValidity = (value: BentoInputFieldPasswordProps['value']) => { const rulesValidityObj = computedValidationList.value?.map(validationItem => ({ key: validationItem.key, label: validationItem.label, isValid: validationItem.validate(value, ...(validationItem.additionalArgs ?? [])), })); let customRuleIndex = 1; passwordValidity.value = rulesValidityObj?.map(error => error.isValid); errorsList.value = rulesValidityObj ?.filter(rule => !rule.isValid) .reduce((errorsObject, error) => { const key = error.key ?? `custom-rule-${customRuleIndex++}`; return { ...errorsObject, [key]: error.label, }; }, {}); }; const handleCapsLockMouseLeave = () => { isTooltipDisplayed.value = false; capsLockTooltipTimeoutID.value = null; }; const handleCapsLockMouseEnter = () => { isTooltipDisplayed.value = true; }; watch( () => [props.value, props.modelValue], () => { inputValue.value = props.modelValue ?? props.value; } ); watch(focused, focused => { // Always set dirty to true when blur occurs if (!focused) { isTouched.value = true; } // Disable validations & hint if "disableValidation" is "true" if (!props.disableValidation) { if (props.withHint) { isHintDisplayed.value = focused; } checkValidity(inputValue.value); } }); watch(isCapsLockOn, isCapsLockOn => { if (!isCapsLockOn) { clearTimeout(capsLockTooltipTimeoutID.value); capsLockTooltipTimeoutID.value = null; isTooltipDisplayed.value = false; } else { isTooltipDisplayed.value = true; capsLockTooltipTimeoutID.value = setTimeout(() => { capsLockTooltipTimeoutID.value = null; isTooltipDisplayed.value = false; }, TOOLTIP_TIMEOUT); } }); watchDebounced( inputValue, inputValue => { checkValidity(inputValue); if (!hasErrors.value) { emit('input:valid'); } else { emit('input:error', errorsList.value); } }, // wait for 0.5s before checking validity OR 2s of continuous typing { debounce: props.debounceTime, maxWait: DEBOUNCE_MAX_WAIT } ); if (props.value) { deprecate( 'BentoInputFieldPassword "value" property', `The use of "value" prop in "BentoInputFieldPassword" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> const MIN_PASSWORD_LENGTH = 12; const DEBOUNCE_DURATION = 500; const DEBOUNCE_MAX_WAIT = 2000; const TOOLTIP_TIMEOUT = 2000; /** * The input field password is a component designed to support users' preference for entering values securely. * This is an extension of the `bento-input-field` component. * * @example * import { BentoInputFieldPassword } from '@adyen/bento-vue2'; * * export default { * components: { BentoInputFieldPassword }, * template: ` * <bento-input-field-password * label="Label" * error-message="Error" * :validation="{ * extendDefaultValidation: true, * list: [ * { label: '18 characters', key: 'minLength', validate: minLength, additionalArgs: [18] }, * { label: 'Always true', key: 'alwaysTrue', validate: () => true }, * { key: 'requireSpecialCharacter', disabled: true } * ], * }" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-input-field-password', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./input-field-password.scss" /> 
+<template> <div ref="inputFieldPasswordRef" @focusout="onFocusOut"> <bento-input-field ref="inputFieldPasswordInputRef" v-bind="inputFieldArgs" class="b-input-field-password__input" autocapitalize="none" autocorrect="off" spellcheck="false" @blur="onBlur" @focus="onFocus" @update:model-value="onUpdateModelValue" @keydown="checkCapsLock" @keyup="checkCapsLock" > <template v-if="label">{{ label }}</template> <template v-else><slot /></template> <template v-if="description" #description> <slot name="description">{{ description }}</slot> </template> <template v-if="isCapsLockOn" #iconBefore> <div class="b-input-field-password__caps-lock-indicator" @mouseenter="handleCapsLockMouseEnter" @mouseleave="handleCapsLockMouseLeave" > <bento-image ref="inputFieldPasswordCapsLockIconRef" :src="CapsLockIcon" :alt="t('capsLockEnabled')" /> </div> <tooltip v-if="inputFieldPasswordCapsLockIconRef" :class="tooltipConditionalClass" :content="t('capsLockEnabled')" :disabled-focus-trap="true" :fallback-position="['top', 'bottom']" :is-shown="isTooltipDisplayed" :target-element="inputFieldPasswordCapsLockIconRef" /> </template> <template v-if="!disabled" #iconAfter> <bento-button variant="tertiary" @click="toggleInputType" @mousedown.native.prevent> <template #iconLeft> <show-icon v-if="!isPasswordReadable" :svg-title="t('showPassword')" /> <hide-icon v-if="isPasswordReadable" :svg-title="t('hidePassword')" /> </template> </bento-button> </template> </bento-input-field> <bento-popover v-if="hasValidations" :open="isHintDisplayed" :target-element="inputFieldPasswordInputRef" :disable-focus-trap="true" :aria-label="computedValidations.title" :aria-describedby="validationListId" position="right-start" > <div :id="validationPopoverId"> <bento-typography v-if="computedValidations.title" class="b-input-field-password__validation-title"> {{ computedValidations.title }} </bento-typography> <p v-if="!hasErrors" class="b-input-field-password__validation-status--valid" role="alert"> {{ t('validationValid') }} </p> <ul :id="validationListId" class="b-input-field-password__validation-list"> <li v-for="(rule, index) in computedValidationList" :key="index" :class="passwordValidityConditionalClass[index]" aria-live="polite" aria-atomic="true" > <span class="b-input-field-password__validation-list-icon"> <checkmark-circle-fill-icon v-if="passwordValidity[index]" :svg-title="t('validationChecked')" /> <dot-icon v-else :svg-title="t('validationUnchecked')" /> </span> <bento-typography class="b-input-field-password__validation-list-text" el="span"> {{ rule.label }} </bento-typography> </li> </ul> <bento-typography v-if="computedValidations.suggestion" class="b-input-field-password__validation-suggestion" > {{ computedValidations.suggestion }} </bento-typography> </div> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoButton } from '@/components/button'; import { BentoImage } from '@/components/image'; import { BentoInputField } from '@/components/input-field'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { Tooltip } from '@/internal'; import type { BentoInputFieldProps } from '@/components/input-field/input-field.types'; import { BentoInputFieldPasswordDefaultRule, type BentoInputFieldPasswordErrorsList, type BentoInputFieldPasswordProps, BentoInputFieldPasswordType, type BentoInputFieldPasswordValidation, type BentoInputFieldPasswordValidationListItem, } from './input-field-password.types'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import HideIcon from '@adyen/ui-assets-icons-16/vue/hide'; import ShowIcon from '@adyen/ui-assets-icons-16/vue/show'; import CapsLockIcon from './assets/capslock.svg'; import { watchDebounced } from '@vueuse/core'; import { computed, provide, ref, type SetupContext, useAttrs, watch } from 'vue'; import { useI18n } from '@/utils/ts/i18n'; import { minLength, requireLowercase, requireNumeric, requireSpecialCharacter, requireUppercase, } from '@/components/input-field-password/utilities/input-field-password.validation'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; import messages from './messages.json'; import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoInputFieldPasswordProps>(), { condensed: false, debounceTime: DEBOUNCE_DURATION, description: null, disabled: false, disableValidation: false, errorMessage: null, label: null, optional: false, placeholder: '', readonly: false, required: false, tooltipText: null, validation: undefined, value: undefined, modelValue: undefined, withHint: true, }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the element has received focus */ (e: 'focus'): void; /** * Emits an `input:valid` event when the value is validated against the provided validations. * This emit has a debounce and is emitted after an `input` event. */ (e: 'input:valid'): void; /** * Emits an `input:error` event when the value fails the validation. * This emit has a debounce and is emitted after an `input` event. */ (e: 'input:error', errors: BentoInputFieldPasswordErrorsList): void; /** * Emits an `input` event whenever the value in the input is changed. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', value: BentoInputFieldPasswordProps['value']): void; /** * Emits an `update:model-value` event whenever the value in the input is changed. */ (e: 'update:model-value', value: BentoInputFieldPasswordProps['modelValue']): void; }>(); const attrs = useAttrs(); const inputType = ref(BentoInputFieldPasswordType.PASSWORD); const inputValue = ref(props.modelValue ?? props.value); const isHintDisplayed = ref(false); const isTouched = ref(false); const passwordValidity = ref<Array<boolean>>([]); const errorsList = ref<BentoInputFieldPasswordErrorsList>({}); const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null); const isTooltipDisplayed = ref(false); const inputFieldPasswordRef = ref(null); const inputFieldPasswordInputRef = ref(null); const inputFieldPasswordCapsLockIconRef = ref(null); const isCapsLockOn = ref(false); provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password'); const onFocusOut = (event: FocusEvent) => { const container = inputFieldPasswordRef.value as HTMLElement | null; // If focus moved to another element still inside the container, keep the popover open. if (container && event.relatedTarget instanceof Node && container.contains(event.relatedTarget)) { return; } isTouched.value = true; if (!props.disableValidation) { if (props.withHint) { isHintDisplayed.value = false; } checkValidity(inputValue.value); } }; const { emitValue } = useFormFieldEmits<BentoInputFieldPasswordProps['modelValue']>(emit); const validationListId = generateUid('validationListId'); const validationPopoverId = generateUid('validationPopoverId'); const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT); const passwordValidityConditionalClass = computed(() => passwordValidity.value.map(validity => validity ? 'b-input-field-password__validation-list--valid' : 'b-input-field-password__validation-list--invalid' ) ); const tooltipConditionalClass = computed(() => capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : '' ); const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({ ariaHidden: false, condensed: props.condensed, disabled: props.disabled, errorMessage: props.errorMessage, optional: props.optional, placeholder: props.placeholder, readonly: props.readonly, required: props.required, tooltipText: props.tooltipText, type: inputType.value, modelValue: inputValue.value, 'aria-haspopup': hasValidations.value ? 'dialog' : false, 'aria-describedby': hasValidations.value ? validationPopoverId : '', ...attrs, })); const computedValidations = computed<BentoInputFieldPasswordValidation>(() => { if (props.validation && !props.validation.extendDefaultValidation) { return props.validation; } const defaultValidationList = [ { label: t('validationMinLength', { numberOfCharacters: n(MIN_PASSWORD_LENGTH) }), key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH, validate: minLength, }, { label: t('validationRequireLowercase', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE, validate: requireLowercase, }, { label: t('validationRequireUppercase', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE, validate: requireUppercase, }, { label: t('validationRequireNumeric', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC, validate: requireNumeric, }, { label: t('validationRequireSpecialCharacter', { numberOne: n(1) }), key: BentoInputFieldPasswordDefaultRule.REQUIRE_SPECIAL_CHARACTER, validate: requireSpecialCharacter, }, ]; let validationList: Array<BentoInputFieldPasswordValidationListItem> = defaultValidationList; if (props.validation) { const defaultValidationKeys: Array<string> = defaultValidationList.map(rule => rule.key); const customRuleKeys = props.validation?.list?.map(rule => rule.key); // remove from the custom list any rules with default keys (rules that are overriding existent rules) const customValidationList = props.validation?.list?.filter(rule => !defaultValidationKeys.includes(rule.key)) ?? []; // loop through the default list and replace default rule with the custom rule if it exists const validationListWithOverrides = defaultValidationList.map(rule => { if (customRuleKeys?.includes(rule.key)) { const customRule = props.validation?.list?.find(customRule => customRule.key === rule.key); return customRule; } else { return rule; } }); validationList = [...validationListWithOverrides, ...customValidationList]; } return { title: props.validation?.title ?? t('validationTitle'), suggestion: props.validation?.suggestion ?? t('validationSuggestion'), list: validationList, }; }); const computedValidationList = computed(() => computedValidations.value?.list?.filter(rule => !rule.disabled)); const hasErrors = computed(() => passwordValidity.value?.some(validation => !validation)); const hasValidations = computed( () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0 ); const checkCapsLock = (e: KeyboardEvent) => { // Check if getModifierState exists and is a function in case the user's browser is autofilling if (typeof e.getModifierState === 'function') { isCapsLockOn.value = e.getModifierState('CapsLock'); } }; const toggleInputType = () => { if (isPasswordReadable.value) { inputType.value = BentoInputFieldPasswordType.PASSWORD; } else { inputType.value = BentoInputFieldPasswordType.TEXT; } }; const onUpdateModelValue = (value: string) => { if (props.disabled) { return; } inputValue.value = value; emitValue(inputValue.value); }; const onFocus = () => { emit('focus'); if (!props.disableValidation) { if (props.withHint) { isHintDisplayed.value = true; } checkValidity(inputValue.value); } }; const onBlur = () => { emit('blur'); }; const checkValidity = (value: BentoInputFieldPasswordProps['value']) => { const rulesValidityObj = computedValidationList.value?.map(validationItem => ({ key: validationItem.key, label: validationItem.label, isValid: validationItem.validate(value, ...(validationItem.additionalArgs ?? [])), })); let customRuleIndex = 1; passwordValidity.value = rulesValidityObj?.map(error => error.isValid); errorsList.value = rulesValidityObj ?.filter(rule => !rule.isValid) .reduce((errorsObject, error) => { const key = error.key ?? `custom-rule-${customRuleIndex++}`; return { ...errorsObject, [key]: error.label, }; }, {}); }; const handleCapsLockMouseLeave = () => { isTooltipDisplayed.value = false; capsLockTooltipTimeoutID.value = null; }; const handleCapsLockMouseEnter = () => { isTooltipDisplayed.value = true; }; watch( () => [props.value, props.modelValue], () => { inputValue.value = props.modelValue ?? props.value; } ); watch(isCapsLockOn, isCapsLockOn => { if (!isCapsLockOn) { clearTimeout(capsLockTooltipTimeoutID.value); capsLockTooltipTimeoutID.value = null; isTooltipDisplayed.value = false; } else { isTooltipDisplayed.value = true; capsLockTooltipTimeoutID.value = setTimeout(() => { capsLockTooltipTimeoutID.value = null; isTooltipDisplayed.value = false; }, TOOLTIP_TIMEOUT); } }); watchDebounced( inputValue, inputValue => { checkValidity(inputValue); if (!hasErrors.value) { emit('input:valid'); } else { emit('input:error', errorsList.value); } }, // wait for 0.5s before checking validity OR 2s of continuous typing { debounce: props.debounceTime, maxWait: DEBOUNCE_MAX_WAIT } ); if (props.value) { deprecate( 'BentoInputFieldPassword "value" property', `The use of "value" prop in "BentoInputFieldPassword" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> const MIN_PASSWORD_LENGTH = 12; const DEBOUNCE_DURATION = 500; const DEBOUNCE_MAX_WAIT = 2000; const TOOLTIP_TIMEOUT = 2000; /** * The input field password is a component designed to support users' preference for entering values securely. * This is an extension of the `bento-input-field` component. * * @example * import { BentoInputFieldPassword } from '@adyen/bento-vue2'; * * export default { * components: { BentoInputFieldPassword }, * template: ` * <bento-input-field-password * label="Label" * error-message="Error" * :validation="{ * extendDefaultValidation: true, * list: [ * { label: '18 characters', key: 'minLength', validate: minLength, additionalArgs: [18] }, * { label: 'Always true', key: 'alwaysTrue', validate: () => true }, * { key: 'requireSpecialCharacter', disabled: true } * ], * }" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-input-field-password', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./input-field-password.scss" /> 

package/dist/assets/components/pagination/components/pagination-controls/pagination-controls.vue

@@ -1 +1 @@
-<template> <ul class="b-pagination-controls"> <li class="b-pagination-controls__item"> <!-- Navigate to the first page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(1)"> <template #iconLeft> <skip-left :svg-title="t('navigateToTheFirstPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the previous page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(page - 1)"> <template #iconLeft> <chevron-left :svg-title="t('navigateToThePreviousPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the next page --> <bento-button :disabled="isNextButtonDisabled" variant="tertiary" condensed @click="navigate(page + 1)"> <template #iconLeft> <chevron-right :svg-title="t('navigateToTheNextPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the last page --> <bento-button :disabled="isLastPageButtonDisabled" variant="tertiary" condensed @click="navigate(totalPages)" > <template #iconLeft> <skip-right :svg-title="t('navigateToTheLastPage')" /> </template> </bento-button> </li> </ul> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoButton } from '@/components/button'; import { useI18n } from '@/utils/ts/i18n'; import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left'; import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right'; import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small'; import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * The current page number of the pager. */ page: number; /** * The current page number of the pager. */ totalPages?: number; }>(), { hasNext: null, totalPages: null, } ); const emit = defineEmits<{ (e: 'navigate', value: number); }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isCurrentPageFirst = computed(() => props.page === 1); const isCurrentPageLast = computed(() => props.page === props.totalPages); const isNextButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; return hasNoNextPage || isCurrentPageLast.value; }); const isLastPageButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; const hasNoTotalPagesNumber = !props.totalPages; return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber; }); const navigate = (pageArg: number) => { emit('navigate', pageArg); }; </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-controls.scss" /> 
+<template> <ul class="b-pagination-controls"> <li v-if="!hideFirstLastPageButtons" key="first" class="b-pagination-controls__item"> <!-- Navigate to the first page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(1)"> <template #iconLeft> <skip-left :svg-title="t('navigateToTheFirstPage')" /> </template> </bento-button> </li> <li key="previous" class="b-pagination-controls__item"> <!-- Navigate to the previous page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(page - 1)"> <template #iconLeft> <chevron-left :svg-title="t('navigateToThePreviousPage')" /> </template> </bento-button> </li> <li key="next" class="b-pagination-controls__item"> <!-- Navigate to the next page --> <bento-button :disabled="isNextButtonDisabled" variant="tertiary" condensed @click="navigate(page + 1)"> <template #iconLeft> <chevron-right :svg-title="t('navigateToTheNextPage')" /> </template> </bento-button> </li> <li v-if="!hideFirstLastPageButtons" key="last" class="b-pagination-controls__item"> <!-- Navigate to the last page --> <bento-button :disabled="isLastPageButtonDisabled" variant="tertiary" condensed @click="navigate(totalPages)" > <template #iconLeft> <skip-right :svg-title="t('navigateToTheLastPage')" /> </template> </bento-button> </li> </ul> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoButton } from '@/components/button'; import { useI18n } from '@/utils/ts/i18n'; import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left'; import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right'; import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small'; import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Hides the "navigate to the first page" and "navigate to the last page" buttons. * Useful for cursor-based pagination, where jumping directly to the first or last page is not supported. */ hideFirstLastPageButtons?: boolean; /** * The current page number of the pager. */ page: number; /** * The current page number of the pager. */ totalPages?: number; }>(), { hasNext: null, hideFirstLastPageButtons: false, totalPages: null, } ); const emit = defineEmits<{ (e: 'navigate', value: number); }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isCurrentPageFirst = computed(() => props.page === 1); const isCurrentPageLast = computed(() => props.page === props.totalPages); const isNextButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; return hasNoNextPage || isCurrentPageLast.value; }); const isLastPageButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; const hasNoTotalPagesNumber = !props.totalPages; return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber; }); const navigate = (pageArg: number) => { emit('navigate', pageArg); }; </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-controls.scss" /> 

package/dist/assets/components/pagination/pagination.docs.mdx

@@ -15,9 +15,9 @@ page. It is also internally used in the data grid component.
 Use a pagination component when there are too many results to show on one page. What constitutes “too many results”
 varies case by case and can be influenced by:
 
--   System load times
--   Amount of data in each entry
--   Screen space So speak to your product designer and decide accordingly based on your use case.
+- System load times
+- Amount of data in each entry
+- Screen space So speak to your product designer and decide accordingly based on your use case.
 
 ### Customize your pagination
 
@@ -53,6 +53,12 @@ using the arrows. There is also the possibility to go to the first and the last
 it’s not possible to go further back or forth, the respective arrows get disabled. In case there is only one page to
 display, all arrows are disabled and there is no dropdown shown.
 
+##### Hide First/Last Page Buttons
+
+You can hide the "navigate to the first page" and "navigate to the last page" buttons by setting
+`hideFirstLastPageButtons` to `true`. This is useful for cursor-based pagination, where jumping directly to the first or
+last page is not supported.
+
 #### Setting the current visible page
 
 You can set the page to display when the component is mounted by passing an appropriate `page` value. Note that you need
@@ -62,10 +68,10 @@ to set this value accordingly given the range of valid values you have based on
 
 When using the pagination component, do not:
 
--   Set it with a `hasNext` property if there is only one page, as this will display an active forward arrow which won't
-    do anything when clicked upon.
--   Set it with a current page value which is not equal or greater than one and is greater than the maximum value
-    allowed for your use case.
+- Set it with a `hasNext` property if there is only one page, as this will display an active forward arrow which won't
+  do anything when clicked upon.
+- Set it with a current page value which is not equal or greater than one and is greater than the maximum value allowed
+  for your use case.
 
 ## Variations
 
@@ -111,6 +117,6 @@ it yet.
 
 ## Resources
 
--   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1951-30261&t=NHLd9msx8lGq3NNF-0)
--   [WAI-ARIA menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
--   [W3C accessible pagination](https://design-system.w3.org/components/pagination.html)
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1951-30261&t=NHLd9msx8lGq3NNF-0)
+- [WAI-ARIA menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
+- [W3C accessible pagination](https://design-system.w3.org/components/pagination.html)

package/dist/assets/components/pagination/pagination.types.ts

@@ -1 +1 @@
-export interface BentoPaginationProps { /** * A brief description of the purpose of the navigation (for a11y). * Omit the term "navigation", as the screen reader will read both the role and the contents of the label. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Toggles the visibility of the "results per page" part of the pagination component. */ hidePageSize?: boolean; /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /* * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. * This prop only takes effect if `hidePageSize` is `false`. */ hidePageSizeSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The size of the items the pager is paging through. */ size?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; /** * The predefined list of numeric options available in the 'results per page' selection dropdown. */ pageSizeItems?: Array<number>; } 
+export interface BentoPaginationProps { /** * A brief description of the purpose of the navigation (for a11y). * Omit the term "navigation", as the screen reader will read both the role and the contents of the label. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Hides the "navigate to the first page" and "navigate to the last page" buttons. * Useful for cursor-based pagination, where jumping directly to the first or last page is not supported. */ hideFirstLastPageButtons?: boolean; /** * Toggles the visibility of the "results per page" part of the pagination component. */ hidePageSize?: boolean; /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /* * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. * This prop only takes effect if `hidePageSize` is `false`. */ hidePageSizeSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The size of the items the pager is paging through. */ size?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; /** * The predefined list of numeric options available in the 'results per page' selection dropdown. */ pageSizeItems?: Array<number>; } 

package/dist/assets/components/pagination/pagination.vue

@@ -1 +1 @@
-<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :hide-page-size-selection="hidePageSizeSelection" :items-per-page="size" :total-count="totalCount" :page-size-items="pageSizeItems" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :virtual-scroll="virtualScroll" :hide-page-selection="hidePageSelection" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hidePageSize: false, hidePageSelection: false, hidePageSizeSelection: false, page: 1, pageSizeItems: undefined, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 
+<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :hide-page-size-selection="hidePageSizeSelection" :items-per-page="size" :total-count="totalCount" :page-size-items="pageSizeItems" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :virtual-scroll="virtualScroll" :hide-page-selection="hidePageSelection" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :hide-first-last-page-buttons="hideFirstLastPageButtons" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hideFirstLastPageButtons: false, hidePageSize: false, hidePageSelection: false, hidePageSizeSelection: false, page: 1, pageSizeItems: undefined, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 

package/dist/assets/components/table-of-contents/table-of-contents.vue

@@ -1 +1 @@
-<template> <nav class="b-table-of-contents" :aria-labelledby="titleId"> <bento-typography :id="titleId" el="h2" variant="body" stronger class="b-table-of-contents__header">{{ computedTitle }}</bento-typography> <table-of-contents-list :items="items" :active-section-href="activeSectionHref" :initial-focus-index="controlledActiveIndex" :scroll-offset="scrollOffset" /> </nav> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { TableOfContentsList } from './components'; import { generateUid } from '@/core/utils/ts'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { getElementFragmentHref, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { unrefElement } from '@/directives/click-outside/utils'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import type { BentoTableOfContentsItem, BentoTableOfContentsProps } from './table-of-contents.types'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoTableOfContentsProps>(), { activeIndex: undefined, scrollOffset: undefined, title: undefined, }); const titleId = generateUid('table-of-contents-title'); const computedTitle = computed(() => props.title ?? t('onThisPage')); const resolvedItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, })) .filter((item): item is { element: Element; originalIndex: number } => !!item.element) ); const sectionTargetElements = computed(() => resolvedItems.value.map(item => item.element)); const controlledActiveIndex = computed(() => props.activeIndex ?? -1); const scrollSpyDefaultIndex = computed(() => props.activeIndex === undefined ? -1 : resolvedItems.value.findIndex(({ originalIndex }) => originalIndex === props.activeIndex) ); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(sectionTargetElements, { default: scrollSpyDefaultIndex, }); const currentActiveIndex = computed(() => { if (props.activeIndex !== undefined) { return props.activeIndex; } return resolvedItems.value[scrollSpyActiveIndex.value]?.originalIndex ?? -1; }); const activeSectionHref = computed(() => getSectionFragmentHref(props.items[currentActiveIndex.value]?.elementRef)); </script> <script lang="ts"> /** * This is a navigational component that serves as a list outlining * the structure and hierarchy of content on a page. It allows users * to find the content in a page more quickly with anchor links in * the content. * * ARIA: https://www.w3.org/TR/dpub-aria-1.1/#doc-toc * * @usage * import { BentoTableOfContents } from '@adyen/bento-vue2'; * * export default { * components: { BentoTableOfContents }, * template: ` * <bento-table-of-contents * :items="[{ title: 'Section text', elementRef: sectionRef }]" * /> * `, * setup() { * const sectionRef = ref(null); * return { * sectionRef, * } * } * } */ export default { name: 'bento-table-of-contents', i18n: { messages }, }; </script> <style lang="scss" scoped src="./table-of-contents.scss" /> 
+<template> <nav class="b-table-of-contents" :aria-labelledby="titleId"> <bento-typography :id="titleId" el="h2" variant="body" stronger class="b-table-of-contents__header">{{ computedTitle }}</bento-typography> <table-of-contents-list :items="items" :active-section-href="activeSectionHref" :initial-focus-index="controlledActiveIndex" :scroll-offset="scrollOffset" /> </nav> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { TableOfContentsList } from './components'; import { generateUid } from '@/core/utils/ts'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { getElementFragmentHref, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { unrefElement } from '@/directives/click-outside/utils'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import type { BentoTableOfContentsItem, BentoTableOfContentsProps } from './table-of-contents.types'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoTableOfContentsProps>(), { activeIndex: undefined, scrollOffset: undefined, title: undefined, }); const titleId = generateUid('table-of-contents-title'); const computedTitle = computed(() => props.title ?? t('onThisPage')); const resolvedItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, })) .filter((item): item is { element: Element; originalIndex: number } => !!item.element) ); const sectionTargetElements = computed(() => resolvedItems.value.map(item => item.element)); const controlledActiveIndex = computed(() => props.activeIndex ?? -1); const scrollSpyDefaultIndex = computed(() => props.activeIndex === undefined ? -1 : resolvedItems.value.findIndex(({ originalIndex }) => originalIndex === props.activeIndex) ); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(sectionTargetElements, { default: scrollSpyDefaultIndex, debounce: 300, }); const currentActiveIndex = computed(() => { if (props.activeIndex !== undefined) { return props.activeIndex; } return resolvedItems.value[scrollSpyActiveIndex.value]?.originalIndex ?? -1; }); const activeSectionHref = computed(() => getSectionFragmentHref(props.items[currentActiveIndex.value]?.elementRef)); </script> <script lang="ts"> /** * This is a navigational component that serves as a list outlining * the structure and hierarchy of content on a page. It allows users * to find the content in a page more quickly with anchor links in * the content. * * ARIA: https://www.w3.org/TR/dpub-aria-1.1/#doc-toc * * @usage * import { BentoTableOfContents } from '@adyen/bento-vue2'; * * export default { * components: { BentoTableOfContents }, * template: ` * <bento-table-of-contents * :items="[{ title: 'Section text', elementRef: sectionRef }]" * /> * `, * setup() { * const sectionRef = ref(null); * return { * sectionRef, * } * } * } */ export default { name: 'bento-table-of-contents', i18n: { messages }, }; </script> <style lang="scss" scoped src="./table-of-contents.scss" /> 

package/dist/assets/components/typography/typography.docs.mdx

@@ -14,15 +14,15 @@ and the component without having to write a single line of font styling CSS code
 
 Here are some examples:
 
--   Writing an article for a blog.
--   A sub-title for a section on a web page.
+- Writing an article for a blog.
+- A sub-title for a section on a web page.
 
 ### Do not use
 
 Here are some examples:
 
--   Don't use to replace a `label` instead wrap the label around this component.
--   Don't use inside a button component's `default` slot.
+- Don't use to replace a `label` instead wrap the label around this component.
+- Don't use inside a button component's `default` slot.
 
 ## Variations
 
@@ -43,6 +43,10 @@ A bolder caption.
 
 A caption with more letter spacing.
 
+##### Monospace
+
+A caption with a monospace font.
+
 ### Body
 
 <Canvas of={TypographyStories.Body} />
@@ -63,6 +67,10 @@ The most emboldened body text.
 
 A caption with more letter spacing.
 
+##### Monospace
+
+Body text with a monospace font.
+
 ### Title
 
 Text used for a headline of a section of content or web page.
@@ -79,6 +87,10 @@ A larger (than default) title.
 
 The largest title text.
 
+##### Monospace
+
+A title with a monospace font.
+
 ##### ⚠️ Subtitle (deprecated) ⚠️
 
 > ⚠️ **Deprecation Notice**: This modifier is deprecated and will be removed in release **2.0.0**. Use the `'title'`
@@ -109,16 +121,16 @@ The `el` property affects output HTML DOM element that is wrapped around the tex
 
 It accepts one of the following values:
 
--   `'h1'`
--   `'h2'`
--   `'h3'`
--   `'h4'`
--   `'h5'`
--   `'h6'`
--   `'div'`
--   `'paragraph'` (default)
--   `'span'`
+- `'h1'`
+- `'h2'`
+- `'h3'`
+- `'h4'`
+- `'h5'`
+- `'h6'`
+- `'div'`
+- `'paragraph'` (default)
+- `'span'`
 
 ## Resources
 
--   [Figma link](https://www.figma.com/file/Diqr47KAACSr6ohrQhcNgO/Bento---Product---Fundamentals?node-id=1423-55445&t=hpcF61AsBuhZRdWW-0)
+- [Figma link](https://www.figma.com/file/Diqr47KAACSr6ohrQhcNgO/Bento---Product---Fundamentals?node-id=1423-55445&t=hpcF61AsBuhZRdWW-0)

package/dist/assets/components/typography/typography.types.ts

@@ -1 +1 @@
-/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Since v2.0.0. Use `TITLE` instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el?: BentoTypographyElement | `${BentoTypographyElement}`; /** * Adds the large class modifier. * Applicable to the Title variant. */ large?: boolean; /** * Adds the medium class modifier. * Applicable to the Title variant. */ medium?: boolean; /** * Adds the rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: boolean; /** * Adds the stronger class modifier. * Applicable to Caption, Body and Subtitle variants. */ stronger?: boolean; /** * Adds the strongest class modifier. * Applicable to Caption, Body and Subtitle variants. */ strongest?: boolean; /** * Sets the type of typography variant. * @values caption, body, title. */ variant?: BentoTypographyVariant | `${BentoTypographyVariant}`; /** * Adds the medium class modifier. * Applicable to the Body variant. */ wide?: boolean; } 
+/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Since v2.0.0. Use `TITLE` instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', MONOSPACE = 'monospace', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el?: BentoTypographyElement | `${BentoTypographyElement}`; /** * Adds the large class modifier. * Applicable to the Title variant. */ large?: boolean; /** * Adds the medium class modifier. * Applicable to the Title variant. */ medium?: boolean; /** * Changes the font family to monospace. * Applicable to all variants. */ monospace?: boolean; /** * Adds the rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: boolean; /** * Adds the stronger class modifier. * Applicable to Caption, Body and Subtitle variants. */ stronger?: boolean; /** * Adds the strongest class modifier. * Applicable to Caption, Body and Subtitle variants. */ strongest?: boolean; /** * Sets the type of typography variant. * @values caption, body, title. */ variant?: BentoTypographyVariant | `${BentoTypographyVariant}`; /** * Adds the medium class modifier. * Applicable to the Body variant. */ wide?: boolean; } 

package/dist/assets/components/typography/typography.vue

@@ -1 +1 @@
-<template> <component :is="el" class="b-typography" :class="conditionalClasses" data-testid="typography"> <slot /> </component> </template> <script setup lang="ts"> import { computed, onMounted } from 'vue'; import { deprecate } from '@/utils/ts/deprecate'; import { BentoTypographyElement, BentoTypographyModifier, type BentoTypographyProps, BentoTypographyVariant, } from './typography.types'; const props = withDefaults(defineProps<BentoTypographyProps>(), { el: BentoTypographyElement.PARAGRAPH, large: false, medium: false, stronger: false, strongest: false, variant: BentoTypographyVariant.BODY, wide: false, }); if (props.variant === BentoTypographyVariant.SUBTITLE) { deprecate( 'BentoTypography "subtitle" variant (BentoTypographyVariant.SUBTITLE)', `Use the "title" or "BentoTypographyVariant.TITLE" variant and (optionally) combine it with a size property. e.g. medium / large. <bento-typography :variant="BentoTypographyVariant.TITLE" medium>`, '2.0.0' ); } const conditionalClasses = computed(() => ({ // Rich text ['b-typography--rich-text']: props.richText, // Caption [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION, [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]: props.variant === BentoTypographyVariant.CAPTION && props.wide, [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.CAPTION && props.stronger, // Body [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]: props.variant === BentoTypographyVariant.BODY && props.wide, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.BODY && props.stronger, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]: props.variant === BentoTypographyVariant.BODY && props.strongest, // Subtitle [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE, [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.SUBTITLE && props.stronger, // Title [`b-typography--${BentoTypographyVariant.TITLE}`]: props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large, [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]: props.variant === BentoTypographyVariant.TITLE && props.medium, [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]: props.variant === BentoTypographyVariant.TITLE && props.large, })); onMounted(() => { if (props.richText && props.el !== 'div') { throw new Error('Rich-text prop must be used with el="div" for correct HTML semantics'); } if (props.richText && props.variant === 'title') { throw new Error('Rich-text prop cannot be used with the title variant.'); } if (props.richText && props.variant === 'subtitle') { throw new Error('Rich-text prop cannot be used with the subtitle variant.'); } }); </script> <script lang="ts"> /** * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles * easily to text. The variants and properties match with those found in Figma. * * For example, seeing text with the typography styling of * * @example * import { BentoTypography } from '@adyen/bento-vue2'; * * export default { * components: { BentoTypography }, * template: ` * <bento-typography> * ... text content * </bento-typography> * ` * } */ export default { name: 'bento-typography', inheritAttrs: true, }; </script> <style lang="scss" scoped src="./typography.scss" /> 
+<template> <component :is="el" class="b-typography" :class="conditionalClasses" data-testid="typography"> <slot /> </component> </template> <script setup lang="ts"> import { computed, onMounted } from 'vue'; import { deprecate } from '@/utils/ts/deprecate'; import { BentoTypographyElement, BentoTypographyModifier, type BentoTypographyProps, BentoTypographyVariant, } from './typography.types'; const props = withDefaults(defineProps<BentoTypographyProps>(), { el: BentoTypographyElement.PARAGRAPH, large: false, medium: false, monospace: false, stronger: false, strongest: false, variant: BentoTypographyVariant.BODY, wide: false, }); if (props.variant === BentoTypographyVariant.SUBTITLE) { deprecate( 'BentoTypography "subtitle" variant (BentoTypographyVariant.SUBTITLE)', `Use the "title" or "BentoTypographyVariant.TITLE" variant and (optionally) combine it with a size property. e.g. medium / large. <bento-typography :variant="BentoTypographyVariant.TITLE" medium>`, '2.0.0' ); } const conditionalClasses = computed(() => ({ // Rich text ['b-typography--rich-text']: props.richText, // Monospace [`b-typography--${BentoTypographyModifier.MONOSPACE}`]: props.monospace, // Caption [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION, [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]: props.variant === BentoTypographyVariant.CAPTION && props.wide, [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.CAPTION && props.stronger, // Body [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]: props.variant === BentoTypographyVariant.BODY && props.wide, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.BODY && props.stronger, [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]: props.variant === BentoTypographyVariant.BODY && props.strongest, // Subtitle [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE, [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]: props.variant === BentoTypographyVariant.SUBTITLE && props.stronger, // Title [`b-typography--${BentoTypographyVariant.TITLE}`]: props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large, [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]: props.variant === BentoTypographyVariant.TITLE && props.medium, [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]: props.variant === BentoTypographyVariant.TITLE && props.large, })); onMounted(() => { if (props.richText && props.el !== 'div') { throw new Error('Rich-text prop must be used with el="div" for correct HTML semantics'); } if (props.richText && props.variant === 'title') { throw new Error('Rich-text prop cannot be used with the title variant.'); } if (props.richText && props.variant === 'subtitle') { throw new Error('Rich-text prop cannot be used with the subtitle variant.'); } }); </script> <script lang="ts"> /** * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles * easily to text. The variants and properties match with those found in Figma. * * For example, seeing text with the typography styling of * * @example * import { BentoTypography } from '@adyen/bento-vue2'; * * export default { * components: { BentoTypography }, * template: ` * <bento-typography> * ... text content * </bento-typography> * ` * } */ export default { name: 'bento-typography', inheritAttrs: true, }; </script> <style lang="scss" scoped src="./typography.scss" /> 

package/dist/assets/usage.json

@@ -7,7 +7,7 @@
   "anchor-scroller": [""],
   "avatar": ["packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.visual.spec.tsx", "packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.stories.ts", "packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.test.ts", "packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.types.ts", "packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue", "packages/vue2/src/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.vue", "packages/vue2/src/components/filter-bar/filter-bar.types.ts"],
   "base-filter": ["packages/vue2/src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.test.ts", "packages/vue2/src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.vue", "packages/vue2/src/components/filter-bar/components/range-filter/range-filter.vue", "packages/vue2/src/components/filter-bar/components/range-filter/range-filter.test.ts", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/checkbox-group-filter.vue", "packages/vue2/src/components/filter-bar/components/date-filter/date-filter.vue", "packages/vue2/src/components/filter-bar/components/index.ts", "packages/vue2/src/components/filter-bar/components/select-filter/components/select-filter-button/select-filter-button.vue", "packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue", "packages/vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.test.ts", "packages/vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue", "packages/vue2/src/components/filter-bar/components/input-filter/input-filter.deprecated.test.ts", "packages/vue2/src/components/filter-bar/components/input-filter/input-filter.test.ts", "packages/vue2/src/components/filter-bar/components/input-filter/input-filter.vue", "packages/vue2/src/components/filter-bar/components/radio-group-filter/radio-group-filter.vue", "packages/vue2/src/components/filter-bar/filter-bar.docs.mdx", "packages/vue2/src/components/filter-bar/index.ts", "packages/vue2/src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-multiple-value-example.vue", "packages/vue2/src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-multiple-value.vue", "packages/vue2/src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value.vue", "packages/vue2/src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value-example.vue", "packages/vue2/src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-with-popover-example.vue"],
-  "button": ["packages/vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue", "packages/vue2/src/components/date-range-picker/date-range-picker.vue", "packages/vue2/src/components/alert/alert.stories.ts", "packages/vue2/src/components/alert/alert.visual.spec.tsx", "packages/vue2/src/components/alert/alert.vue", "packages/vue2/src/components/file-uploader/components/file-uploader-file-card/file-uploader-file-card.vue", "packages/vue2/src/components/navigation-menu/navigation-menu.vue", "packages/vue2/src/components/navigation-menu/navigation-menu.docs.mdx", "packages/vue2/src/components/navigation-menu/navigation-menu.stories.ts", "packages/vue2/src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.stories.ts", "packages/vue2/src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.stories.ts", "packages/vue2/src/components/navigation-menu/__tests__/navigation-menu-everything-bagel-example.vue", "packages/vue2/src/components/popover/popover.test.ts", "packages/vue2/src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue", "packages/vue2/src/components/popover/popover.visual.spec.tsx", "packages/vue2/src/components/popover/popover.stories.ts", "packages/vue2/src/components/popover/popover.docs.mdx", "packages/vue2/src/components/popover/popover.types.ts", "packages/vue2/src/components/popover/popover.vue", "packages/vue2/src/components/popover/__tests__/popover-stub.vue", "packages/vue2/src/components/toast/components/toast-item/toast-item.vue", "packages/vue2/src/components/toast/toast.stories.ts", "packages/vue2/src/components/drawer/drawer.stories.ts", "packages/vue2/src/components/drawer/__tests__/drawer-default-example.vue", "packages/vue2/src/components/empty-state/empty-state.types.ts", "packages/vue2/src/components/empty-state/empty-state.vue", "packages/vue2/src/components/action-bar/action-bar.stories.ts", "packages/vue2/src/components/action-bar/action-bar.vue", "packages/vue2/src/components/action-bar/__tests__/action-bar-stub.vue", "packages/vue2/src/components/action-bar/__tests__/action-bar-default.vue", "packages/vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue", "packages/vue2/src/components/header-with-views/header-with-views.docs.mdx", "packages/vue2/src/components/header-with-views/header-with-views.types.ts", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/accordion/__tests__/accordion-stub.vue", "packages/vue2/src/components/accordion/accordion.stories.ts", "packages/vue2/src/components/pagination/pagination.docs.mdx", "packages/vue2/src/components/pagination/components/pagination-controls/pagination-controls.vue", "packages/vue2/src/components/link/link.types.ts", "packages/vue2/src/components/link/__tests__/hot-swap-link-stub.vue", "packages/vue2/src/components/focus-trap/focus-trap.vue", "packages/vue2/src/components/focus-trap/__tests__/focus-trap-mock.vue", "packages/vue2/src/components/focus-trap/focus-trap.stories.ts", "packages/vue2/src/components/list/components/list-item/list-item.stories.ts", "packages/vue2/src/components/list/components/list-item/list-item.vue", "packages/vue2/src/components/list/components/list-item/list-item.visual.spec.tsx", "packages/vue2/src/components/list/list.stories.ts", "packages/vue2/src/components/list/__tests__/list-default.vue", "packages/vue2/src/components/list/__tests__/list-everything-bagel.vue", "packages/vue2/src/components/form-layout/form-layout.docs.mdx", "packages/vue2/src/components/form-layout/form-layout.visual.spec.tsx", "packages/vue2/src/components/form-layout/form-layout.stories.ts", "packages/vue2/src/components/form-layout/__tests__/form-layout-default-example.vue", "packages/vue2/src/components/inspector/inspector.vue", "packages/vue2/src/components/inspector/inspector.stories.ts", "packages/vue2/src/components/inspector/components/inspector-page/inspector-page.types.ts", "packages/vue2/src/components/inspector/__tests__/inspector-mock.vue", "packages/vue2/src/components/inspector/__tests__/inspector-with-ephemeral-trigger-mock.vue", "packages/vue2/src/components/inspector/__tests__/inspector-with-multiple-pages-example.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.stories.ts", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.docs.mdx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue", "packages/vue2/src/components/modal-fullscreen/__tests__/toast-modal-fullscreen-stub.vue", "packages/vue2/src/components/modal/modal.test.ts", "packages/vue2/src/components/modal/components/modal-page/modal-page.types.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.test.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.vue", "packages/vue2/src/components/modal/components/modal-default/modal-default.test.ts", "packages/vue2/src/components/modal/components/modal-default/modal-default.vue", "packages/vue2/src/components/modal/components/base-modal/base-modal.test.ts", "packages/vue2/src/components/modal/components/base-modal/base-modal.vue", "packages/vue2/src/components/modal/modal.stories.ts", "packages/vue2/src/components/modal/modal.vue", "packages/vue2/src/components/modal/__tests__/modal-with-date-picker-stub.vue", "packages/vue2/src/components/modal/__tests__/modal-with-data-grid-stub.vue", "packages/vue2/src/components/modal/__tests__/modal-with-multiple-pages.vue", "packages/vue2/src/components/promo-banner/promo-banner.types.ts", "packages/vue2/src/components/promo-banner/promo-banner.docs.mdx", "packages/vue2/src/components/promo-banner/promo-banner.vue", "packages/vue2/src/components/header/header.vue", "packages/vue2/src/components/header/header.test.ts", "packages/vue2/src/components/header/header.docs.mdx", "packages/vue2/src/components/header/header.stories.ts", "packages/vue2/src/components/header/header.visual.spec.tsx", "packages/vue2/src/components/header/__tests__/header-change-button-actions-label-stub.vue", "packages/vue2/src/components/input-field-password/input-field-password.docs.mdx", "packages/vue2/src/components/input-field-password/input-field-password.vue", "packages/vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue", "packages/vue2/src/components/stepper/stepper.stories.ts", "packages/vue2/src/components/stepper/__tests__/reset-stepper-example.vue", "packages/vue2/src/components/card/card.vue", "packages/vue2/src/components/card/card.test.ts", "packages/vue2/src/components/card/card.stories.ts", "packages/vue2/src/components/card/__tests__/card-stub.vue", "packages/vue2/src/components/ai-tag/ai-tag.vue", "packages/vue2/src/components/ai-tag/ai-tag.types.ts", "packages/vue2/src/components/ai-tag/__tests__/ai-tag-default.vue", "packages/vue2/src/components/radio-group/components/radio-button/radio-button.stories.ts", "packages/vue2/src/components/internal/fixed-scroller/fixed-scroller.stories.ts", "packages/vue2/src/components/internal/fixed-scroller/fixed-scroller.vue", "packages/vue2/src/components/internal/fixed-scroller/__tests__/fixed-scroller-stub.vue", "packages/vue2/src/components/internal/calendar/components/calendar-month/calendar-month.vue", "packages/vue2/src/components/internal/calendar/components/calendar-year/calendar-year.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.visual.spec.tsx", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.types.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.test.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.stories.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.test.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.visual.spec.tsx", "packages/vue2/src/components/internal/footer-actions/footer-actions.vue", "packages/vue2/src/components/internal/base-button/base-button.vue", "packages/vue2/src/components/internal/dialog-page/dialog-page.vue", "packages/vue2/src/components/internal/copy/copy.vue", "packages/vue2/src/components/internal/copy/copy.types.ts", "packages/vue2/src/components/draggable/draggable.stories.ts", "packages/vue2/src/components/draggable/__tests__/bento-draggable-grid-example.vue", "packages/vue2/src/components/sidepanel/components/sidepanel-page.vue", "packages/vue2/src/components/sidepanel/components/sidepanel-page.stories.ts", "packages/vue2/src/components/sidepanel/sidepanel.stories.ts", "packages/vue2/src/components/sidepanel/sidepanel.vue", "packages/vue2/src/components/sidepanel/__tests__/sidepanel-mock.vue", "packages/vue2/src/components/timeline/timeline.vue", "packages/vue2/src/components/timeline/timeline.stories.ts", "packages/vue2/src/components/timeline/components/timeline-item/timeline-item.vue", "packages/vue2/src/components/timeline/timeline.test.ts", "packages/vue2/src/components/timeline/__tests__/timeline-dynamic-add-stub.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/components/tutorial-indicator/__tests__/tutorial-indicator-stub.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/__tests__/tutorial-popover-stub.vue", "packages/vue2/src/components/tutorial/tutorial.types.ts", "packages/vue2/src/components/tutorial/tutorial.stories.ts", "packages/vue2/src/components/tutorial/tutorial.visual.spec.tsx", "packages/vue2/src/components/tutorial/tutorial.docs.mdx", "packages/vue2/src/components/tutorial/__tests__/tutorial-default-example.vue", "packages/vue2/src/components/tutorial/__tests__/tutorial-stub.vue", "packages/vue2/src/components/tutorial/__tests__/tutorial-with-inspector-stub.vue", "packages/vue2/src/components/code-snippet/code-snippet.vue", "packages/vue2/src/components/textarea/textarea.vue", "packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue", "packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue", "packages/vue2/src/components/data-grid/components/data-grid-static-icon/data-grid-static-icon.stories.ts", "packages/vue2/src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.test.ts", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.ts", "packages/vue2/src/components/data-grid/data-grid.docs.mdx", "packages/vue2/src/components/data-grid/data-grid.vue", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-example.vue", "packages/vue2/src/components/data-grid/data-grid.stories.ts", "packages/vue2/src/components/menu/menu.test.ts", "packages/vue2/src/components/menu/menu.types.ts", "packages/vue2/src/components/menu/menu.docs.mdx"],
+  "button": ["packages/vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue", "packages/vue2/src/components/date-range-picker/date-range-picker.vue", "packages/vue2/src/components/alert/alert.stories.ts", "packages/vue2/src/components/alert/alert.visual.spec.tsx", "packages/vue2/src/components/alert/alert.vue", "packages/vue2/src/components/file-uploader/components/file-uploader-file-card/file-uploader-file-card.vue", "packages/vue2/src/components/navigation-menu/navigation-menu.vue", "packages/vue2/src/components/navigation-menu/navigation-menu.docs.mdx", "packages/vue2/src/components/navigation-menu/navigation-menu.stories.ts", "packages/vue2/src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.stories.ts", "packages/vue2/src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.stories.ts", "packages/vue2/src/components/navigation-menu/__tests__/navigation-menu-everything-bagel-example.vue", "packages/vue2/src/components/popover/popover.test.ts", "packages/vue2/src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue", "packages/vue2/src/components/popover/popover.visual.spec.tsx", "packages/vue2/src/components/popover/popover.stories.ts", "packages/vue2/src/components/popover/popover.docs.mdx", "packages/vue2/src/components/popover/popover.types.ts", "packages/vue2/src/components/popover/popover.vue", "packages/vue2/src/components/popover/__tests__/popover-stub.vue", "packages/vue2/src/components/toast/components/toast-item/toast-item.vue", "packages/vue2/src/components/toast/toast.stories.ts", "packages/vue2/src/components/drawer/drawer.stories.ts", "packages/vue2/src/components/drawer/__tests__/drawer-default-example.vue", "packages/vue2/src/components/empty-state/empty-state.types.ts", "packages/vue2/src/components/empty-state/empty-state.test.ts", "packages/vue2/src/components/empty-state/empty-state.vue", "packages/vue2/src/components/empty-state/empty-state.docs.mdx", "packages/vue2/src/components/action-bar/action-bar.stories.ts", "packages/vue2/src/components/action-bar/action-bar.vue", "packages/vue2/src/components/action-bar/__tests__/action-bar-stub.vue", "packages/vue2/src/components/action-bar/__tests__/action-bar-default.vue", "packages/vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue", "packages/vue2/src/components/header-with-views/header-with-views.docs.mdx", "packages/vue2/src/components/header-with-views/header-with-views.types.ts", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/accordion/__tests__/accordion-stub.vue", "packages/vue2/src/components/accordion/accordion.stories.ts", "packages/vue2/src/components/pagination/pagination.docs.mdx", "packages/vue2/src/components/pagination/components/pagination-controls/pagination-controls.vue", "packages/vue2/src/components/link/link.types.ts", "packages/vue2/src/components/link/__tests__/hot-swap-link-stub.vue", "packages/vue2/src/components/focus-trap/focus-trap.vue", "packages/vue2/src/components/focus-trap/__tests__/focus-trap-mock.vue", "packages/vue2/src/components/focus-trap/focus-trap.stories.ts", "packages/vue2/src/components/list/components/list-item/list-item.stories.ts", "packages/vue2/src/components/list/components/list-item/list-item.vue", "packages/vue2/src/components/list/components/list-item/list-item.visual.spec.tsx", "packages/vue2/src/components/list/list.stories.ts", "packages/vue2/src/components/list/__tests__/list-default.vue", "packages/vue2/src/components/list/__tests__/list-everything-bagel.vue", "packages/vue2/src/components/form-layout/form-layout.docs.mdx", "packages/vue2/src/components/form-layout/form-layout.visual.spec.tsx", "packages/vue2/src/components/form-layout/form-layout.stories.ts", "packages/vue2/src/components/form-layout/__tests__/form-layout-default-example.vue", "packages/vue2/src/components/inspector/inspector.vue", "packages/vue2/src/components/inspector/inspector.stories.ts", "packages/vue2/src/components/inspector/components/inspector-page/inspector-page.types.ts", "packages/vue2/src/components/inspector/__tests__/inspector-mock.vue", "packages/vue2/src/components/inspector/__tests__/inspector-with-ephemeral-trigger-mock.vue", "packages/vue2/src/components/inspector/__tests__/inspector-with-multiple-pages-example.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.stories.ts", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.docs.mdx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue", "packages/vue2/src/components/modal-fullscreen/__tests__/toast-modal-fullscreen-stub.vue", "packages/vue2/src/components/modal/modal.test.ts", "packages/vue2/src/components/modal/components/modal-page/modal-page.types.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.test.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.vue", "packages/vue2/src/components/modal/components/modal-default/modal-default.test.ts", "packages/vue2/src/components/modal/components/modal-default/modal-default.vue", "packages/vue2/src/components/modal/components/base-modal/base-modal.test.ts", "packages/vue2/src/components/modal/components/base-modal/base-modal.vue", "packages/vue2/src/components/modal/modal.stories.ts", "packages/vue2/src/components/modal/modal.vue", "packages/vue2/src/components/modal/__tests__/modal-with-date-picker-stub.vue", "packages/vue2/src/components/modal/__tests__/modal-with-data-grid-stub.vue", "packages/vue2/src/components/modal/__tests__/modal-with-multiple-pages.vue", "packages/vue2/src/components/promo-banner/promo-banner.types.ts", "packages/vue2/src/components/promo-banner/promo-banner.docs.mdx", "packages/vue2/src/components/promo-banner/promo-banner.vue", "packages/vue2/src/components/header/header.vue", "packages/vue2/src/components/header/header.test.ts", "packages/vue2/src/components/header/header.docs.mdx", "packages/vue2/src/components/header/header.stories.ts", "packages/vue2/src/components/header/header.visual.spec.tsx", "packages/vue2/src/components/header/__tests__/header-change-button-actions-label-stub.vue", "packages/vue2/src/components/input-field-password/input-field-password.docs.mdx", "packages/vue2/src/components/input-field-password/input-field-password.vue", "packages/vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue", "packages/vue2/src/components/stepper/stepper.stories.ts", "packages/vue2/src/components/stepper/__tests__/reset-stepper-example.vue", "packages/vue2/src/components/card/card.vue", "packages/vue2/src/components/card/card.test.ts", "packages/vue2/src/components/card/card.stories.ts", "packages/vue2/src/components/card/__tests__/card-stub.vue", "packages/vue2/src/components/ai-tag/ai-tag.vue", "packages/vue2/src/components/ai-tag/ai-tag.types.ts", "packages/vue2/src/components/ai-tag/__tests__/ai-tag-default.vue", "packages/vue2/src/components/radio-group/components/radio-button/radio-button.stories.ts", "packages/vue2/src/components/internal/fixed-scroller/fixed-scroller.stories.ts", "packages/vue2/src/components/internal/fixed-scroller/fixed-scroller.vue", "packages/vue2/src/components/internal/fixed-scroller/__tests__/fixed-scroller-stub.vue", "packages/vue2/src/components/internal/calendar/components/calendar-month/calendar-month.vue", "packages/vue2/src/components/internal/calendar/components/calendar-year/calendar-year.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.visual.spec.tsx", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.types.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.test.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.stories.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.test.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.visual.spec.tsx", "packages/vue2/src/components/internal/footer-actions/footer-actions.vue", "packages/vue2/src/components/internal/base-button/base-button.vue", "packages/vue2/src/components/internal/dialog-page/dialog-page.vue", "packages/vue2/src/components/internal/copy/copy.vue", "packages/vue2/src/components/internal/copy/copy.types.ts", "packages/vue2/src/components/draggable/draggable.stories.ts", "packages/vue2/src/components/draggable/__tests__/bento-draggable-grid-example.vue", "packages/vue2/src/components/sidepanel/components/sidepanel-page.vue", "packages/vue2/src/components/sidepanel/components/sidepanel-page.stories.ts", "packages/vue2/src/components/sidepanel/sidepanel.stories.ts", "packages/vue2/src/components/sidepanel/sidepanel.vue", "packages/vue2/src/components/sidepanel/__tests__/sidepanel-mock.vue", "packages/vue2/src/components/timeline/timeline.vue", "packages/vue2/src/components/timeline/timeline.stories.ts", "packages/vue2/src/components/timeline/components/timeline-item/timeline-item.vue", "packages/vue2/src/components/timeline/timeline.test.ts", "packages/vue2/src/components/timeline/__tests__/timeline-dynamic-add-stub.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/components/tutorial-indicator/__tests__/tutorial-indicator-stub.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue", "packages/vue2/src/components/tutorial/components/tutorial-popover/__tests__/tutorial-popover-stub.vue", "packages/vue2/src/components/tutorial/tutorial.types.ts", "packages/vue2/src/components/tutorial/tutorial.stories.ts", "packages/vue2/src/components/tutorial/tutorial.visual.spec.tsx", "packages/vue2/src/components/tutorial/tutorial.docs.mdx", "packages/vue2/src/components/tutorial/__tests__/tutorial-default-example.vue", "packages/vue2/src/components/tutorial/__tests__/tutorial-stub.vue", "packages/vue2/src/components/tutorial/__tests__/tutorial-with-inspector-stub.vue", "packages/vue2/src/components/code-snippet/code-snippet.vue", "packages/vue2/src/components/textarea/textarea.vue", "packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue", "packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue", "packages/vue2/src/components/data-grid/components/data-grid-static-icon/data-grid-static-icon.stories.ts", "packages/vue2/src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.test.ts", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.ts", "packages/vue2/src/components/data-grid/data-grid.docs.mdx", "packages/vue2/src/components/data-grid/data-grid.vue", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-example.vue", "packages/vue2/src/components/data-grid/data-grid.stories.ts", "packages/vue2/src/components/menu/menu.test.ts", "packages/vue2/src/components/menu/menu.types.ts", "packages/vue2/src/components/menu/menu.docs.mdx"],
   "button-actions": ["packages/vue2/src/components/date-range-picker/date-range-picker.vue", "packages/vue2/src/components/popover/popover.test.ts", "packages/vue2/src/components/popover/popover.visual.spec.tsx", "packages/vue2/src/components/popover/popover.stories.ts", "packages/vue2/src/components/popover/popover.types.ts", "packages/vue2/src/components/popover/popover.vue", "packages/vue2/src/components/action-bar/action-bar.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue", "packages/vue2/src/components/header-with-views/header-with-views.docs.mdx", "packages/vue2/src/components/header-with-views/header-with-views.types.ts", "packages/vue2/src/components/inspector/components/inspector-page/inspector-page.types.ts", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.stories.ts", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue", "packages/vue2/src/components/modal/modal.test.ts", "packages/vue2/src/components/modal/components/modal-page/modal-page.types.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.test.ts", "packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.vue", "packages/vue2/src/components/modal/components/modal-default/modal-default.test.ts", "packages/vue2/src/components/modal/components/modal-default/modal-default.vue", "packages/vue2/src/components/modal/components/base-modal/base-modal.test.ts", "packages/vue2/src/components/modal/components/base-modal/base-modal.vue", "packages/vue2/src/components/modal/modal.stories.ts", "packages/vue2/src/components/modal/modal.vue", "packages/vue2/src/components/header/header.vue", "packages/vue2/src/components/header/header.test.ts", "packages/vue2/src/components/header/header.docs.mdx", "packages/vue2/src/components/header/header.stories.ts", "packages/vue2/src/components/header/header.visual.spec.tsx", "packages/vue2/src/components/header/__tests__/header-change-button-actions-label-stub.vue", "packages/vue2/src/components/card/card.vue", "packages/vue2/src/components/card/card.test.ts", "packages/vue2/src/components/card/card.stories.ts", "packages/vue2/src/components/ai-tag/ai-tag.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.visual.spec.tsx", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.types.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.test.ts", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.stories.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.test.ts", "packages/vue2/src/components/internal/footer-actions/footer-actions.visual.spec.tsx", "packages/vue2/src/components/internal/footer-actions/footer-actions.vue", "packages/vue2/src/components/sidepanel/components/sidepanel-page.vue", "packages/vue2/src/components/timeline/timeline.vue", "packages/vue2/src/components/timeline/timeline.test.ts", "packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue", "packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue", "packages/vue2/src/components/data-grid/data-grid.vue", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-example.vue"],
   "card": ["packages/vue2/src/components/click-outside/click-outside.stories.ts", "packages/vue2/src/components/click-outside/click-outside.visual.spec.tsx", "packages/vue2/src/components/focus-trap/__tests__/focus-trap-mock.vue", "packages/vue2/src/components/focus-trap/focus-trap.stories.ts", "packages/vue2/src/components/ai-tag/ai-tag.visual.spec.tsx", "packages/vue2/src/components/data-grid/data-grid.visual.spec.tsx", "packages/vue2/src/components/data-grid/data-grid.docs.mdx", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-card-example.vue", "packages/vue2/src/components/data-grid/data-grid.stories.ts"],
   "checkbox": ["packages/vue2/src/components/toast/toast.stories.ts", "packages/vue2/src/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-list-item/rich-text-editor-list-item.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/list/components/list-item/list-item.stories.ts", "packages/vue2/src/components/list/components/list-item/list-item.visual.spec.tsx", "packages/vue2/src/components/form-layout/form-layout.visual.spec.tsx", "packages/vue2/src/components/form-layout/form-layout.stories.ts", "packages/vue2/src/components/form-layout/__tests__/form-layout-default-example.vue", "packages/vue2/src/components/tag/tag.vue", "packages/vue2/src/components/modal/__tests__/modal-with-data-grid-stub.vue", "packages/vue2/src/components/selection-card/selection-card.types.ts", "packages/vue2/src/components/selection-card/components/selection-card-group/selection-card-group.vue", "packages/vue2/src/components/selection-card/selection-card.vue", "packages/vue2/src/components/radio-group/components/radio-button/radio-button.docs.mdx", "packages/vue2/src/components/internal/checkbox-input/checkbox-input.stories.ts", "packages/vue2/src/components/internal/checkbox-input/checkbox-input.vue", "packages/vue2/src/components/internal/checkbox-input/checkbox-input.visual.spec.tsx", "packages/vue2/src/components/internal/checkbox-input/index.ts", "packages/vue2/src/components/internal/checkbox-input/checkbox-input.test.ts", "packages/vue2/src/components/internal/controls-group/controls-group.vue", "packages/vue2/src/components/internal/radio-input/radio-input.vue", "packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/checkbox-group-filter.visual.spec.tsx", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/checkbox-group-filter.vue", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/checkbox-group-filter.types.ts", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/index.ts", "packages/vue2/src/components/filter-bar/components/checkbox-group-filter/checkbox-group-filter.stories.ts", "packages/vue2/src/components/filter-bar/components/index.ts", "packages/vue2/src/components/filter-bar/filter-bar.docs.mdx", "packages/vue2/src/components/filter-bar/filter-bar.types.ts", "packages/vue2/src/components/filter-bar/filter-bar.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.vue", "packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue"],
@@ -63,7 +63,7 @@
   "list-item": ["packages/vue2/src/components/list/list.test.ts", "packages/vue2/src/components/list/list.stories.ts", "packages/vue2/src/components/list/list.docs.mdx", "packages/vue2/src/components/list/index.ts", "packages/vue2/src/components/list/__tests__/list-default.vue", "packages/vue2/src/components/list/__tests__/list-everything-bagel.vue", "packages/vue2/src/components/list/list.vue"],
   "loading-button": ["packages/vue2/src/components/button/components/button-actions/button-actions.vue", "packages/vue2/src/components/button/components/button-actions/button-actions.test.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.types.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.docs.mdx", "packages/vue2/src/components/button/components/toggle-button/toggle-button.test.ts", "packages/vue2/src/components/form-layout/form-layout.docs.mdx", "packages/vue2/src/components/form-layout/form-layout.visual.spec.tsx", "packages/vue2/src/components/form-layout/form-layout.stories.ts", "packages/vue2/src/components/form-layout/__tests__/form-layout-default-example.vue", "packages/vue2/src/components/form-layout/__tests__/form-layout-validate-example.vue", "packages/vue2/src/components/header/header.docs.mdx", "packages/vue2/src/components/header/header.types.ts", "packages/vue2/src/components/internal/header-meta/header-meta.vue", "packages/vue2/src/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.vue", "packages/vue2/src/components/internal/listbox/listbox.vue", "packages/vue2/src/components/data-grid/components/data-grid-lazy-load/data-grid-lazy-load.vue"],
   "loading-indicator": ["packages/vue2/src/components/file-uploader/components/file-uploader-file-card/file-uploader-file-card.vue", "packages/vue2/src/components/button/components/loading-button/loading-button.docs.mdx", "packages/vue2/src/components/button/components/loading-button/loading-button.vue", "packages/vue2/src/components/action-bar/action-bar.vue", "packages/vue2/src/components/inspector/inspector.vue", "packages/vue2/src/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.vue", "packages/vue2/src/components/internal/listbox/listbox.vue", "packages/vue2/src/components/code-snippet/code-snippet.vue", "packages/vue2/src/components/data-grid/components/data-grid-row/data-grid-row.vue", "packages/vue2/src/components/data-grid/components/data-grid-lazy-load/data-grid-lazy-load.vue", "packages/vue2/src/components/data-grid/data-grid.vue"],
-  "menu": ["packages/vue2/src/components/button/components/button-actions/button-actions.vue", "packages/vue2/src/components/button/components/button-actions/button-actions.test.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.types.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.docs.mdx", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.types.ts", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue", "packages/vue2/src/components/draggable/components/draggable-handle/draggable-handle.vue", "packages/vue2/src/components/draggable/components/draggable-handle/draggable-handle.types.ts", "packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue", "packages/vue2/src/components/data-grid/data-grid.visual.spec.tsx", "packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.ts"],
+  "menu": ["packages/vue2/src/components/button/components/button-actions/button-actions.vue", "packages/vue2/src/components/button/components/button-actions/button-actions.test.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.types.ts", "packages/vue2/src/components/button/components/button-actions/button-actions.docs.mdx", "packages/vue2/src/components/empty-state/empty-state.vue", "packages/vue2/src/components/empty-state/empty-state.docs.mdx", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue", "packages/vue2/src/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.types.ts", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue", "packages/vue2/src/components/draggable/components/draggable-handle/draggable-handle.vue", "packages/vue2/src/components/draggable/components/draggable-handle/draggable-handle.types.ts", "packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue", "packages/vue2/src/components/data-grid/data-grid.visual.spec.tsx", "packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue", "packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.ts"],
   "modal": ["packages/vue2/src/components/action-bar/action-bar.docs.mdx", "packages/vue2/src/components/header-with-views/header-with-views.vue", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.visual.spec.tsx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.stories.ts", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.test.ts", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.docs.mdx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.test.ts", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue", "packages/vue2/src/components/modal-fullscreen/index.ts", "packages/vue2/src/components/modal-fullscreen/__tests__/toast-modal-fullscreen-stub.vue", "packages/vue2/src/components/code-snippet/code-snippet.scss", "packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue", "packages/vue2/src/components/data-grid/data-grid.visual.spec.tsx", "packages/vue2/src/components/data-grid/data-grid.docs.mdx", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-fullscreen-example.vue", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-example.vue"],
   "modal-fullscreen": ["packages/vue2/src/components/data-grid/data-grid.visual.spec.tsx", "packages/vue2/src/components/data-grid/__tests__/data-grid-fit-content-in-modal-fullscreen-example.vue"],
   "modal-fullscreen-page": ["packages/vue2/src/components/modal-fullscreen/modal-fullscreen.visual.spec.tsx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.stories.ts", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue", "packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.test.ts", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.docs.mdx", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.test.ts", "packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue", "packages/vue2/src/components/modal-fullscreen/index.ts"],

package/dist/main.js

@@ -30537,7 +30537,7 @@ ${usage.map((f) => `- ${f}`).join("\n")}`
 var package_default = {
   name: "@adyen/bento-mcp",
   mcpName: "io.github.adyen/bento-mcp",
-  version: "0.8.0",
+  version: "0.9.0",
   type: "module",
   description: "A Model Context Protocol server implementation for Bento",
   license: "MIT",
@@ -30585,7 +30585,7 @@ var package_default = {
     zod: "4.3.6"
   },
   devDependencies: {
-    "@modelcontextprotocol/inspector": "0.21.1",
+    "@modelcontextprotocol/inspector": "0.22.0",
     "@playwright/test": "catalog:",
     "@nx/playwright": "catalog:nx",
     "@swc/core": "catalog:"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adyen/bento-mcp",
   "mcpName": "io.github.adyen/bento-mcp",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "A Model Context Protocol server implementation for Bento",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "0.21.1",
+    "@modelcontextprotocol/inspector": "0.22.0",
     "@playwright/test": "1.42.1",
     "@nx/playwright": "22.4.0",
     "@swc/core": "^1.15.11"