@adyen/bento-mcp 0.6.0 → 0.7.0

package/dist/assets/components/internal/listbox/listbox.vue

@@ -1 +1 @@
-<template> <div :id="id" ref="listboxRef" v-bento-keyboard-navigation-directive class="b-listbox" tabindex="-1" v-bind="listboxContainerAttributes" :style="containerProps?.style" data-testid="listbox-container" @scroll="onListboxContainerScroll" > <div v-bind="wrapperProps"> <!-- Loading filtered items loading --> <div v-if="componentLoading" class="b-listbox__loading-filtered-items"> <bento-loading-indicator /> </div> <!-- Empty search message --> <div v-else-if="isSearchResultEmpty" class="b-listbox__empty-search-message"> <bento-empty-state v-if="emptyState" v-bind="limitedEmptyStateProps" /> <bento-typography v-else el="span">{{ noResultsMessage }}</bento-typography> </div> <template v-else> <!-- Multi select --> <template v-if="multiple"> <bento-listbox-multi-select ref="listboxItemRef" :has-more-items="hasMoreItems" v-bind="ariaAttributes" :items="items" :lazy-load-type="lazyLoadType" :static-categories="staticCategories" :selected-values="selectedValue" :searching="searching" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-multi-select> </template> <!-- Single select --> <template v-else> <bento-listbox-single-select ref="listboxItemRef" :items="virtualisedItems" :total-item-count="totalItemCount" :scroll-to-index="scrollToIndex" :virtual-scroll-start-index="virtualScrollStartIndex" v-bind="ariaAttributes" :selected-value="selectedValue" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-single-select> </template> <!-- Lazy Loading --> <div v-if="shouldDisplayShowMoreButton" class="b-listbox__lazy-load"> <bento-loading-button :state="loadingButtonState" variant="secondary" @click.capture="emitShowMore"> {{ showMoreButtonText }} </bento-loading-button> </div> <div v-else-if="loading" class="b-listbox__lazy-load"> <bento-loading-indicator /> </div> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef } from 'vue'; import { type BentoListboxEmptyStateProps, BentoListboxEvent, type BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxVirtulisationOptions, } from '@/types/listbox'; import { BentoKeyboardNavigationKeyDownEvent } from '@/types/keyboard-navigation'; import { BentoKeyboardNavigationDirective } from '@/directives'; import { BentoListboxSingleSelect } from './components/listbox-single-select'; import { BentoListboxMultiSelect } from './components/listbox-multi-select'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button'; import { BentoEmptyState } from '@/components/empty-state'; import { useI18n } from '@/utils/ts/i18n'; import { debounce } from '@/utils/ts/debounce'; import { useVirtualList } from '@/composables/use-virtual-list'; import type { HTMLAttributes } from 'vue/types/jsx.d.ts'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36; /** * Listbox container. * It lists all the available options. * * @example * <bento-listbox * v-slot="{label, value}" * :id="listboxOptionsContainerId" * :aria-label="ariaLabel" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * > * </bento-listbox> */ export default defineComponent({ name: 'bento-listbox', components: { BentoEmptyState, BentoListboxSingleSelect, BentoListboxMultiSelect, BentoTypography, BentoLoadingIndicator, BentoLoadingButton, }, directives: { BentoKeyboardNavigationDirective }, i18n: { messages }, props: { /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Empty state props that will be used with the inner empty state component to be displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoListboxEmptyStateProps>, default: undefined, }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - Listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => undefined, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>, default: BentoListboxLazyLoadType.NONE, validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value), }, /** * Indicates the listbox is loading filtered items. */ componentLoading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Messaged displayed when no items are listed in the listbox */ noResultsMessage: { type: String, required: true }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListboxMultiSelect.props.searching, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: () => [], }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>, default: false, }, }, emits: [ BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.SHOW_MORE, BentoListboxEvent.ENTER, BentoListboxEvent.ESCAPE, BentoListboxEvent.TAB, ], setup(props, { emit, slots }) { const listboxItemRef = ref([]); const items = toRef(props, 'items'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC); const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC); // Virtual scrolling const virtualScrollItemHeight = () => { if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) { return props.virtualScroll.itemHeight; } return DEFAULT_DROPDOWN_ITEM_HEIGHT; }; const isVirtualScrollEnabled = !props?.multiple && props?.virtualScroll !== false && props?.lazyLoadType === 'none'; const { containerRef: listboxRef, containerProps, onScroll: onContainerScroll, list: virtualisedItems, wrapperProps, scrollToIndex, startIndex: virtualScrollStartIndex, } = useVirtualList<BentoListboxOptionItem>(items, { itemHeight: virtualScrollItemHeight(), // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select disabled: !isVirtualScrollEnabled, }); const totalItemCount = computed(() => (isVirtualScrollEnabled ? items.value.length : 0)); // Aria a11y const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() => props.componentLoading !== undefined || isLazyLoadListbox.value ? 'true' : undefined ); const ariaBusy = computed<HTMLAttributes['aria-busy']>(() => (isLazyLoadListbox.value && props.loading) || props.componentLoading ? 'true' : 'false' ); const ariaLive = computed<HTMLAttributes['aria-live']>(() => isLazyLoadListbox.value || props.componentLoading !== undefined ? 'polite' : undefined ); const ariaAttributes = computed( () => ({ 'aria-label': props.ariaLabel, 'aria-busy': ariaBusy.value, 'aria-atomic': ariaAtomic.value, 'aria-live': ariaLive.value, }) as HTMLAttributes ); const listboxContainerAttributes = computed( () => (props.componentLoading ? { ...ariaAttributes.value, role: 'alert', } : {}) as HTMLAttributes ); const onOptionSelected = eventName => (selectedItem: BentoListboxOptions) => { emit(eventName, selectedItem); }; const emitShowMore = () => { emit(BentoListboxEvent.SHOW_MORE); }; const emitShowMoreOnScrollEnd = debounce(() => { const container = listboxRef.value; if (!container) { return; } const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight; if (props.hasMoreItems && isAtBottom && !props.loading) { emitShowMore(); } }); const onListboxContainerScroll = () => { if (hasAutomaticLazyLoader.value) { emitShowMoreOnScrollEnd(); } else { onContainerScroll(); } }; const isSearchResultEmpty = computed(() => props.items?.length === 0); const shouldDisplayShowMoreButton = computed( () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems ); const loadingButtonState = computed(() => props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START ); const showMoreButtonText = computed(() => (props.loading ? t('loading') : t('showMore'))); const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({ ...props.emptyState, variant: 'condensed', })); const listboxListeners = { [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT), [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE), [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB), [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER), }; return { // Refs listboxRef, listboxItemRef, // a11y ariaAttributes, listboxContainerAttributes, // Values containerProps, isSearchResultEmpty, limitedEmptyStateProps, loadingButtonState, slots, shouldDisplayShowMoreButton, showMoreButtonText, virtualisedItems, wrapperProps, // Virtual scroll totalItemCount, scrollToIndex, virtualScrollStartIndex, // Enums BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent, // Methods onListboxContainerScroll, onOptionSelected, emitShowMore, listboxListeners, }; }, }); </script> <style lang="scss" scoped src="./listbox.scss" /> 
+<template> <div :id="id" ref="listboxRef" v-bento-keyboard-navigation-directive class="b-listbox" tabindex="-1" v-bind="listboxContainerAttributes" :style="containerProps?.style" data-testid="listbox-container" @scroll="onListboxContainerScroll" > <div v-bind="wrapperProps"> <!-- Loading filtered items loading --> <div v-if="componentLoading" class="b-listbox__loading-filtered-items"> <bento-loading-indicator /> </div> <!-- Empty search message --> <div v-else-if="isSearchResultEmpty" class="b-listbox__empty-search-message"> <bento-empty-state v-if="emptyState" v-bind="limitedEmptyStateProps" /> <bento-typography v-else el="span">{{ noResultsMessage }}</bento-typography> </div> <template v-else> <!-- Multi select --> <template v-if="multiple"> <bento-listbox-multi-select ref="listboxItemRef" :has-more-items="hasMoreItems" v-bind="ariaAttributes" :items="items" :lazy-load-type="lazyLoadType" :static-categories="staticCategories" :selected-values="selectedValue" :searching="searching" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-multi-select> </template> <!-- Single select --> <template v-else> <bento-listbox-single-select ref="listboxItemRef" :items="virtualisedItems" :total-item-count="totalItemCount" :scroll-to-index="scrollToIndex" :virtual-scroll-start-index="virtualScrollStartIndex" v-bind="ariaAttributes" :selected-value="selectedValue" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-single-select> </template> <!-- Lazy Loading --> <bento-listbox-lazy-load v-if="lazyLoadType !== 'none'" :has-more-items="hasMoreItems" :loading="loading" :type="lazyLoadType" @show-more="emitShowMore" /> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef } from 'vue'; import { type BentoListboxEmptyStateProps, BentoListboxEvent, type BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxVirtulisationOptions, } from '@/types/listbox'; import { BentoKeyboardNavigationKeyDownEvent } from '@/types/keyboard-navigation'; import { BentoKeyboardNavigationDirective } from '@/directives'; import { BentoListboxSingleSelect } from './components/listbox-single-select'; import { BentoListboxMultiSelect } from './components/listbox-multi-select'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoListboxLazyLoad } from './components/listbox-lazy-load'; import { BentoLoadingButtonState } from '@/components/button'; import { BentoEmptyState } from '@/components/empty-state'; import { debounce } from '@/utils/ts/debounce'; import { useVirtualList } from '@/composables/use-virtual-list'; import type { HTMLAttributes } from 'vue/types/jsx.d.ts'; const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36; /** * Listbox container. * It lists all the available options. * * @example * <bento-listbox * v-slot="{label, value}" * :id="listboxOptionsContainerId" * :aria-label="ariaLabel" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * > * </bento-listbox> */ export default defineComponent({ name: 'bento-listbox', components: { BentoEmptyState, BentoListboxSingleSelect, BentoListboxMultiSelect, BentoTypography, BentoLoadingIndicator, BentoListboxLazyLoad, }, directives: { BentoKeyboardNavigationDirective }, props: { /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Empty state props that will be used with the inner empty state component to be displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoListboxEmptyStateProps>, default: undefined, }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - Listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => undefined, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>, default: BentoListboxLazyLoadType.NONE, validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value), }, /** * Indicates the listbox is loading filtered items. */ componentLoading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Messaged displayed when no items are listed in the listbox */ noResultsMessage: { type: String, required: true }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListboxMultiSelect.props.searching, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: () => [], }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>, default: false, }, }, emits: [ BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.SHOW_MORE, BentoListboxEvent.ENTER, BentoListboxEvent.ESCAPE, BentoListboxEvent.TAB, ], setup(props, { emit, slots, expose }) { const listboxItemRef = ref([]); const items = toRef(props, 'items'); const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC); const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC); // Virtual scrolling const virtualScrollItemHeight = () => { if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) { return props.virtualScroll.itemHeight; } return DEFAULT_DROPDOWN_ITEM_HEIGHT; }; const isVirtualScrollEnabled = !props?.multiple && props?.virtualScroll !== false && props?.lazyLoadType === 'none'; const { containerRef: listboxRef, containerProps, onScroll: onContainerScroll, list: virtualisedItems, wrapperProps, scrollToIndex, startIndex: virtualScrollStartIndex, } = useVirtualList<BentoListboxOptionItem>(items, { itemHeight: virtualScrollItemHeight(), // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select disabled: !isVirtualScrollEnabled, }); const totalItemCount = computed(() => (isVirtualScrollEnabled ? items.value.length : 0)); // Aria a11y const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() => props.componentLoading !== undefined || isLazyLoadListbox.value ? 'true' : undefined ); const ariaBusy = computed<HTMLAttributes['aria-busy']>(() => (isLazyLoadListbox.value && props.loading) || props.componentLoading ? 'true' : 'false' ); const ariaLive = computed<HTMLAttributes['aria-live']>(() => isLazyLoadListbox.value || props.componentLoading !== undefined ? 'polite' : undefined ); const ariaAttributes = computed( () => ({ 'aria-label': props.ariaLabel, 'aria-busy': ariaBusy.value, 'aria-atomic': ariaAtomic.value, 'aria-live': ariaLive.value, }) as HTMLAttributes ); const listboxContainerAttributes = computed( () => (props.componentLoading ? { ...ariaAttributes.value, role: 'alert', } : {}) as HTMLAttributes ); const onOptionSelected = eventName => (selectedItem: BentoListboxOptions) => { emit(eventName, selectedItem); }; const emitShowMore = () => { emit(BentoListboxEvent.SHOW_MORE); }; const emitShowMoreOnScrollEnd = debounce(() => { const container = listboxRef.value; if (!container) { return; } const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight; if (props.hasMoreItems && isAtBottom && !props.loading) { emitShowMore(); } }); const onListboxContainerScroll = () => { if (hasAutomaticLazyLoader.value) { emitShowMoreOnScrollEnd(); } else { onContainerScroll(); } }; const isSearchResultEmpty = computed(() => props.items?.length === 0); const shouldDisplayShowMoreButton = computed( () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems ); const loadingButtonState = computed(() => props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START ); const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({ ...props.emptyState, variant: 'condensed', })); const listboxListeners = { [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT), [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE), [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB), [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER), }; expose({ listboxRef, listboxItemRef }); return { // Refs listboxRef, listboxItemRef, // a11y ariaAttributes, listboxContainerAttributes, // Values containerProps, isSearchResultEmpty, limitedEmptyStateProps, loadingButtonState, slots, shouldDisplayShowMoreButton, virtualisedItems, wrapperProps, // Virtual scroll totalItemCount, scrollToIndex, virtualScrollStartIndex, // Enums BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent, // Methods onListboxContainerScroll, onOptionSelected, emitShowMore, listboxListeners, }; }, }); </script> <style lang="scss" scoped src="./listbox.scss" /> 

package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.types.ts

@@ -0,0 +1 @@
+import type { BentoTableOfContentsItems } from '../../table-of-contents.types'; export interface TableOfContentsListProps { /** * Currently active section fragment href. */ activeSectionHref?: string; /** * Index used for the initial roving focus position. */ initialFocusIndex?: number; /** * Table of contents items to render. */ items: BentoTableOfContentsItems; /** * Vertical offset in pixels applied before scrolling to a section. */ scrollOffset?: number; } 

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

@@ -0,0 +1 @@
+<template> <ol class="b-table-of-contents__toc" @keydown="onKeydownNavigation"> <li v-for="(item, index) in items" :key="index" class="b-table-of-contents__item" :class="getItemClasses(item)"> <a ref="navigationItemRefs" class="b-table-of-contents__item-title" :href="getSectionHref(item.elementRef)" :aria-current="isActiveItem(item) ? 'location' : undefined" :tabindex="isFocusable(index) ? null : -1" @click.prevent="onScrollToSection(item.elementRef)" @keydown.enter.prevent="onScrollToSection(item.elementRef)" > <bento-typography el="span" variant="body" stronger class="b-table-of-contents__item-label">{{ item.title }}</bento-typography> </a> <div v-if="index !== items.length - 1" class="b-table-of-contents__item-separator"></div> </li> </ol> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard'; import { getElementFragmentHref, scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { type BentoTableOfContentsItem, TableOfContentsClass } from '../../table-of-contents.types'; import type { TableOfContentsListProps } from './table-of-contents-list.types'; const props = withDefaults(defineProps<TableOfContentsListProps>(), { activeSectionHref: undefined, initialFocusIndex: -1, scrollOffset: undefined, }); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const getSectionHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getSectionFragmentHref(elementRef) ?? '#'; const isActiveItem = (item: BentoTableOfContentsItem) => !!props.activeSectionHref && getSectionFragmentHref(item.elementRef) === props.activeSectionHref; const getItemClasses = (item: BentoTableOfContentsItem) => ({ [`b-table-of-contents__item--${TableOfContentsClass.ACTIVE}`]: isActiveItem(item), [`b-table-of-contents__item--level-${Math.min(Math.max(item.level ?? 1, 1), 4)}`]: true, }); const onScrollToSection = (elementRef: BentoTableOfContentsItem['elementRef']) => scrollToSection(elementRef, { scrollOffset: props.scrollOffset, updateHash: true, warningPrefix: 'bento-table-of-contents', }); const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard( computed(() => props.items), { initialIndex: computed(() => props.initialFocusIndex), } ); </script> <style lang="scss" scoped src="./table-of-contents-list.scss" /> 

package/dist/assets/components/table-of-contents/table-of-contents.docs.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableOfContentsStories from './table-of-contents.stories';
+
+<Meta of={TableOfContentsStories} />
+
+# Table of Contents
+
+The Table of Contents component provides a landmark navigation list for pages with multiple sections. It helps users
+understand the page structure and jump to relevant content.
+
+<Canvas of={TableOfContentsStories.Default} />
+
+## Use Cases
+
+Use Table of Contents when:
+
+- a page contains several content sections;
+- users benefit from quick in-page navigation;
+- the content is primarily text-based or document-like.
+
+## Props
+
+<Controls />
+
+## Accessibility
+
+Adhering to the [WAI-ARIA 2.2 standard](https://www.w3.org/WAI/WCAG22/Techniques/) we follow the
+[table of contents pattern](https://www.w3.org/WAI/WCAG22/Techniques/general/G64) documentation.
+
+- The component renders a named `<nav>` landmark.
+- Section links use native anchor semantics.
+- The active section is exposed with `aria-current="location"`.
+- Linked section targets should have an `id` so the links can expose document fragment URLs.
+- The navigation title defaults to the translated "On this page" label and can be overridden with the `title` prop.

package/dist/assets/components/table-of-contents/table-of-contents.stories.ts

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { computed, ref } from 'vue'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoTableOfContents from './table-of-contents.vue'; import TableOfContentsDefaultExample from './__tests__/table-of-contents-default-example.vue?raw'; import BentoTypography from '../typography/typography.vue'; import './table-of-contents.stories.scss?module'; const meta: Meta = { title: 'Table of Contents', component: BentoTableOfContents, }; export default meta; type Story = StoryObj<typeof BentoTableOfContents>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTableOfContents, BentoTypography }, props: Object.keys(argTypes), template: ` <div class="b-toc-story"> <div class="b-toc-story__layout"> <div class="b-toc-story__sidebar"> <div class="b-toc-story__sidebar-inner"> <bento-table-of-contents :active-index="args.activeIndex" :items="sections" :scroll-offset="args.scrollOffset" :title="args.title" /> </div> </div> <div class="b-toc-story__content"> <section ref="section1" id="section-1" class="b-toc-story__section b-toc-story__section--medium" > <bento-typography el="h2" variant="title">Section 1</bento-typography> <bento-typography>This is the content for the first section.</bento-typography> </section> <section ref="section2" id="section-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2</bento-typography> <bento-typography>This section is shorter.</bento-typography> </section> <section ref="section21" id="section-2-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1</bento-typography> <bento-typography>This is nested under Section 2.</bento-typography> </section> <section ref="section22" id="section-2-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.2</bento-typography> <bento-typography>This is another level 2 section.</bento-typography> </section> <section ref="section211" id="section-2-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.</bento-typography> </section> <section ref="section2111" id="section-2-1-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.1.</bento-typography> </section> <section ref="section212" id="section-2-1-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.2</bento-typography> <bento-typography>This is another level 3 section.</bento-typography> </section> <section ref="section3" id="section-3" class="b-toc-story__section b-toc-story__section--large" > <bento-typography el="h2" variant="title">Section 3</bento-typography> <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography> </section> </div> </div> </div> `, setup(props) { const args = isVue2 ? props : _args; const section1 = ref(null); const section2 = ref(null); const section21 = ref(null); const section22 = ref(null); const section211 = ref(null); const section2111 = ref(null); const section212 = ref(null); const section3 = ref(null); const sections = computed(() => [ { title: 'Section 1', elementRef: section1, level: 1 }, { title: 'Section 2', elementRef: section2, level: 1 }, { title: 'Section 2.1', elementRef: section21, level: 2 }, { title: 'Section 2.2', elementRef: section22, level: 2 }, { title: 'Section 2.1.1', elementRef: section211, level: 3 }, { title: 'Section 2.1.1.1', elementRef: section2111, level: 4 }, { title: 'Section 2.1.2', elementRef: section212, level: 3 }, { title: 'Section 3', elementRef: section3, level: 1 }, ]); return { args, section1, section2, section21, section22, section211, section2111, section212, section3, sections, }; }, }), args: { scrollOffset: 8, }, parameters: storybookDocsParameter(TableOfContentsDefaultExample), }; 

package/dist/assets/components/table-of-contents/table-of-contents.types.ts

@@ -0,0 +1 @@
+import { type SectionNavigationItem } from '@/types/section-navigation'; export type BentoTableOfContentsItem = SectionNavigationItem; export type BentoTableOfContentsItems = Array<BentoTableOfContentsItem>; export interface BentoTableOfContentsProps { /** * An array containing all the items in the table of contents. */ items: BentoTableOfContentsItems; /** * The index of the currently active item. Can be used to programmatically set the active item. * @default undefined */ activeIndex?: number; /** * Offset in pixels applied before scrolling to a section. * @default undefined */ scrollOffset?: number; /** * Table of contents title. Defaults to the translated "On this page" label. * @default undefined */ title?: string; } export enum TableOfContentsClass { ACTIVE = 'active', } 

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

@@ -0,0 +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" /> 

package/dist/assets/components.json

@@ -96,6 +96,7 @@
   "summary-grid-item-percentage",
   "summary-grid-item-text",
   "tab",
+  "table-of-contents",
   "tabs",
   "tag",
   "textarea",

package/dist/assets/composables/use-numeric-input/use-numeric-input.types.ts

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; type MaybeRef<T> = T | Ref<T>; export type NumericInputEvent = Event | string | { target?: { value?: string } }; export type NumericKeyDownEvent = | KeyboardEvent | { key?: string; target?: { value?: string; selectionStart?: number | null; selectionEnd?: number | null }; preventDefault?: () => void; }; export interface UseNumericInputOptions { value: Ref<number | null>; prettyOutput?: MaybeRef<boolean>; onInput?: (value: number | null) => void; } 

package/dist/assets/composables/use-section-navigation-keyboard/use-section-navigation-keyboard.types.ts

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; export interface UseSectionNavigationKeyboardOptions<Item = unknown, Target = unknown> { focusTarget?: (target: Target) => boolean; getFocusableElement?: (target: Target) => HTMLElement | null; initialIndex?: Ref<number | undefined>; isDisabled?: (item: Item) => boolean | undefined; } export interface UseSectionNavigationKeyboardReturn<Target = unknown> { focusedIndex: Ref<number>; isFocusable: (index: number) => boolean; navigationItemRefs: Ref<Array<Target>>; onKeydownNavigation: (e: KeyboardEvent) => void; } 

package/dist/assets/deprecations.md

@@ -6,6 +6,14 @@ This file contains a list of all deprecated components, properties, and features
 
 ### Deprecation Found
 
+- string) {
+- ../vue2/src/utils/ts/deprecate.ts-    // If the message is already showing, dont show it again
+- ../vue2/src/utils/ts/deprecate.ts-    if (!shownMessages.has(title)) {
+- \x1b[0m ${title}`, DEPRECATION_STYLES);
+- ../vue2/src/utils/ts/deprecate.ts-        // Format multi-line descriptions with the backtick
+- ../vue2/src/utils/ts/deprecate.ts-        printDevelopmentWarning(`${deprecationMessage.replaceAll(  , ).trim()}`);
+### Deprecation Found
+
 - deprecate(TITLE, MESSAGE, VERSION);
 - ../vue2/src/utils/ts/deprecate.test.ts-
 - ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy).toHaveBeenCalledTimes(EXPECTED_CALLS.length);
@@ -36,14 +44,6 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/utils/ts/deprecate.test.ts-            EXPECTED_CALLS[0]
 ### Deprecation Found
 
-- string) {
-- ../vue2/src/utils/ts/deprecate.ts-    // If the message is already showing, dont show it again
-- ../vue2/src/utils/ts/deprecate.ts-    if (!shownMessages.has(title)) {
-- \x1b[0m ${title}`, DEPRECATION_STYLES);
-- ../vue2/src/utils/ts/deprecate.ts-        // Format multi-line descriptions with the backtick
-- ../vue2/src/utils/ts/deprecate.ts-        printDevelopmentWarning(`${deprecationMessage.replaceAll(  , ).trim()}`);
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
 - //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
@@ -61,83 +61,11 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
-- ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
-- ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
-- ../vue2/src/components/modal/modal.vue-            2.0.0
-- ../vue2/src/components/modal/modal.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    BentoInputFilter options property
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
-- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            <bento-filter-bar
-- config=[{
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                        This will be the default behavior in the v2 and options.messages will be removed.`
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                2.0.0
-- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-            );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            BentoSelectCountryFilter type with `options.variant===custom`
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            2.0.0
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-        );
-- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-    }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
-- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
-- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
-- ../vue2/src/components/input-field-password/input-field-password.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/card/card.vue-                    BentoCard @click property
-- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
-- ../vue2/src/components/card/card.vue-                    2.0.0
-- ../vue2/src/components/card/card.vue-                );
-- ../vue2/src/components/card/card.vue-            }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
-- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
-- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
-- ../vue2/src/components/date-picker/date-picker.vue-                );
-- ../vue2/src/components/date-picker/date-picker.vue-            }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/typography/typography.vue-            BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
-- ../vue2/src/components/typography/typography.vue-            `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
-- variant=BentoTypographyVariant.TITLE medium>`
-- ../vue2/src/components/typography/typography.vue-            2.0.0
-- ../vue2/src/components/typography/typography.vue-        );
+- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
+- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
+- ../vue2/src/components/country/country.vue-            2.0.0
+- ../vue2/src/components/country/country.vue-        );
+- ../vue2/src/components/country/country.vue-    }
 ### Deprecation Found
 
 - deprecate(
@@ -162,14 +90,6 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/dropdown/dropdown.vue-        );
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            BentoDropdownAvatar value property
 - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            `The use of value prop in BentoDropdownAvatar is no longer supported.
@@ -178,6 +98,14 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-        );
 ### Deprecation Found
 
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
+### Deprecation Found
+
 - deprecate(
 - ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            BentoDropdownTag value property
 - ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            `The use of value prop in BentoDropdownTag is no longer supported.
@@ -210,6 +138,38 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-        );
 ### Deprecation Found
 
+- deprecate(
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/currency/currency.vue-                BentoCurrency default slot
+- ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
+- ../vue2/src/components/currency/currency.vue-                Use the value property instead.
+- value=12345.67 currency=USD major-units=false />`
+- ../vue2/src/components/currency/currency.vue-                2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
+- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
+- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
+- ../vue2/src/components/date-picker/date-picker.vue-                );
+- ../vue2/src/components/date-picker/date-picker.vue-            }
+### Deprecation Found
+
 - deprecate(
 - string | Array<string> | File | Array<File>
 - ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
@@ -219,11 +179,27 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
+- ../vue2/src/components/typography/typography.vue-            BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
+- ../vue2/src/components/typography/typography.vue-            `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
+- variant=BentoTypographyVariant.TITLE medium>`
+- ../vue2/src/components/typography/typography.vue-            2.0.0
+- ../vue2/src/components/typography/typography.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
 ### Deprecation Found
 
 - deprecate(
@@ -259,19 +235,27 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
-- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
-- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/textarea/textarea.vue-                2.0.0
-- ../vue2/src/components/textarea/textarea.vue-            );
+- ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
+- ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
+- ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
+- ../vue2/src/components/modal/modal.vue-            2.0.0
+- ../vue2/src/components/modal/modal.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
-- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
-- ../vue2/src/components/country/country.vue-            2.0.0
-- ../vue2/src/components/country/country.vue-        );
-- ../vue2/src/components/country/country.vue-    }
+- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
+- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
+- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
+- ../vue2/src/components/input-field-password/input-field-password.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/card/card.vue-                    BentoCard @click property
+- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
+- ../vue2/src/components/card/card.vue-                    2.0.0
+- ../vue2/src/components/card/card.vue-                );
+- ../vue2/src/components/card/card.vue-            }
 ### Deprecation Found
 
 - deprecate(
@@ -282,14 +266,6 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/radio-group/radio-group.vue-            2.0.0
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/currency/currency.vue-                BentoCurrency default slot
-- ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
-- ../vue2/src/components/currency/currency.vue-                Use the value property instead.
-- value=12345.67 currency=USD major-units=false />`
-- ../vue2/src/components/currency/currency.vue-                2.0.0
-### Deprecation Found
-
 - deprecate(
 - The property \`label\` will always be rendered by default.`
 - ../vue2/src/components/internal/controls-group/controls-group.vue-            `After version 2.0.0, the label will be shown by default.
@@ -299,35 +275,59 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
+- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
+- ../vue2/src/components/sidepanel/sidepanel.vue-        );
+- ../vue2/src/components/sidepanel/sidepanel.vue-    }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
+- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
+- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
+- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/textarea/textarea.vue-                2.0.0
+- ../vue2/src/components/textarea/textarea.vue-            );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
-- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
-- ../vue2/src/components/sidepanel/sidepanel.vue-        );
-- ../vue2/src/components/sidepanel/sidepanel.vue-    }
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                        This will be the default behavior in the v2 and options.messages will be removed.`
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                2.0.0
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-            );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            BentoSelectCountryFilter type with `options.variant===custom`
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            2.0.0
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-        );
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-    }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    BentoInputFilter options property
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            <bento-filter-bar
+- config=[{
 
 ---
 

package/dist/assets/index.ts

@@ -1 +1 @@
-import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/date-time-picker'; export * from './components/draggable'; export * from './components/draggable/components/draggable-handle'; export * from './components/drawer'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/input-time'; export * from './components/inspector'; export * from './components/layout'; export * from './components/list'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/navigation-menu'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; export * from './composables/use-bento-delayed-hover'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install'; 
+import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/date-time-picker'; export * from './components/draggable'; export * from './components/draggable/components/draggable-handle'; export * from './components/drawer'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/input-time'; export * from './components/inspector'; export * from './components/layout'; export * from './components/list'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/navigation-menu'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/table-of-contents'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; export * from './composables/use-bento-delayed-hover'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install';