@adyen/bento-mcp 0.1.0 → 0.1.2

package/dist/assets/components/modal/components/base-modal/base-modal.vue

@@ -1 +1 @@
-<template> <div class="b-modal-base"> <dialog ref="modal" :role="modalRole" :aria-label="computedAriaLabel" :style="{ height: height }" class="b-modal-base__container" :class="modalConditionalClasses" :open="initiallyOpen" @animationend="closeModalAfterAnimation" @keydown.esc="internalModalActionClose" > <bento-focus-trap v-if="isOpen || initiallyOpen" :id="modalId" v-bento-click-outside-directive="closeModalOnClickOutside" > <bento-button v-if="showCloseButton" class="b-modal-base__close-button" variant="tertiary" type="button" :style="customPaddingStyles" @click="internalModalActionClose" > <cross-icon :svg-title="t('close')" /> </bento-button> <template v-if="props.activePage"> <slot /> </template> <bento-modal-page v-else :with-column-layout="withColumnLayout" :size="size" :custom-padding="customPadding" :columns-size="columnsSize" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1 ><slot name="content-col-1"></slot ></template> <template v-if="hasSlot('content-col-2')" #content-col-2 ><slot name="content-col-2"></slot ></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="hasSlot('actions')" #actions><slot name="actions"></slot></template> </bento-modal-page> </bento-focus-trap> </dialog> </div> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useAttrs, useSlots, watch, } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalRole, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { generateUid } from '@/core/utils/ts'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import messages from './messages.json'; import { BentoModalPage } from '@/components/modal/components/modal-page'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const modal = ref<HTMLDialogElement>(null); const isClosing = ref(false); const modalId = generateUid('modal'); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, required: true }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Defines whether the modal will be an alert modal */ modalRole: { type: String, default: BentoModalRole.DIALOG }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton); const pageCustomPadding = ref(props.customPadding); const customPaddingStyles = computed(() => { if (!pageCustomPadding.value) { return {}; } return { top: pageCustomPadding.value, right: pageCustomPadding.value }; }); const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)); const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE); const openModal = (): void => { modal.value.showModal(); }; const emitCloseEvent = (): void => { emit('close-modal'); }; // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; emitCloseEvent(); } }; const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; /** * If the user has pressed escape, clicked outside or clicked the close icon. * Needs to be called from outside, following the "dialog.close()" pattern, * when the closing event is triggered outside of the "base-modal" * component (e.g. from a closing action). */ const internalModalActionClose = (event?: Event) => { if (event) { event.preventDefault(); } if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) { return; } startCloseModalAnimation(); }; const closeModalOnClickOutside = () => { if (props.isDismissible) { internalModalActionClose(); } }; const modalConditionalClasses = computed(() => ({ [`b-modal-base__container--${props.size}`]: props.size, 'b-modal-base__container--hide': isClosing.value, 'b-modal-base__container--column-layout': hasColumnLayout.value, 'b-modal-base__container--animation': isAnimationActive.value, })); watch( () => [props.isOpen, modal.value], ([newIsOpen, newModalValue], [, oldModalValue]): void => { if (!newModalValue) { return; } const isFirstMutation = !oldModalValue; if (newIsOpen) { openModal(); // add the first page to the array when the modal opens if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (!isFirstMutation) { startCloseModalAnimation(); } } ); // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } }, { deep: true } ); onMounted(() => { if (props.isOpen && modal.value) { openModal(); } }); /** * Expose methods through its 'ref' */ defineExpose({ internalModalActionClose, }); // Let's Children components know they are inside a Modal (dialog element) provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId); // Modal pagination const { activePage, isOpen, size } = toRefs(props); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; const height = ref(''); const isAnimationActive = ref(false); provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size, }); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Dialog container. It creates a dialog HTML element for the modal to use. * * @example * import BaseModal from './components/base-modal/base-modal.vue'; * * export default { * components: { BaseModal }, * template: ` * <base-modal * :hide-close-button="true" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </base-modal> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ i18n: { messages }, name: 'base-modal', }); </script> <style lang="scss" scoped src="./base-modal.scss" /> 
+<template> <div class="b-modal-base"> <dialog ref="modal" :role="modalRole" :aria-label="computedAriaLabel" :style="{ height: height }" class="b-modal-base__container" :class="modalConditionalClasses" :open="initiallyOpen" @animationend="closeModalAfterAnimation" @keydown.esc="internalModalActionClose" > <bento-focus-trap v-if="isOpen || initiallyOpen" :id="modalId" v-bento-click-outside-directive="closeModalOnClickOutside" > <bento-button v-if="showCloseButton" class="b-modal-base__close-button" variant="tertiary" type="button" :style="customPaddingStyles" @click="internalModalActionClose" > <cross-icon :svg-title="t('close')" /> </bento-button> <template v-if="props.activePage"> <slot /> </template> <bento-modal-page v-else :with-column-layout="withColumnLayout" :size="size" :custom-padding="customPadding" :columns-size="columnsSize" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1 ><slot name="content-col-1"></slot ></template> <template v-if="hasSlot('content-col-2')" #content-col-2 ><slot name="content-col-2"></slot ></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="hasSlot('actions')" #actions><slot name="actions"></slot></template> </bento-modal-page> </bento-focus-trap> </dialog> </div> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useAttrs, useSlots, watch, } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalRole, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { generateUid } from '@/core/utils/ts'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import messages from './messages.json'; import { BentoModalPage } from '@/components/modal/components/modal-page'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const modal = ref<HTMLDialogElement>(null); const isClosing = ref(false); const modalId = generateUid('modal'); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, required: true }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Defines whether the modal will be an alert modal */ modalRole: { type: String, default: BentoModalRole.DIALOG }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton); const pageCustomPadding = ref(props.customPadding); const customPaddingStyles = computed(() => { if (!pageCustomPadding.value) { return {}; } return { top: pageCustomPadding.value, right: pageCustomPadding.value }; }); const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)); const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE); const openModal = (): void => { modal.value.showModal(); }; const emitCloseEvent = (): void => { emit('close-modal'); }; // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value && modal.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; emitCloseEvent(); } }; const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; /** * If the user has pressed escape, clicked outside or clicked the close icon. * Needs to be called from outside, following the "dialog.close()" pattern, * when the closing event is triggered outside of the "base-modal" * component (e.g. from a closing action). */ const internalModalActionClose = (event?: Event) => { if (event) { event.preventDefault(); } if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) { return; } startCloseModalAnimation(); }; const closeModalOnClickOutside = () => { if (props.isDismissible) { internalModalActionClose(); } }; const modalConditionalClasses = computed(() => ({ [`b-modal-base__container--${props.size}`]: props.size, 'b-modal-base__container--hide': isClosing.value, 'b-modal-base__container--column-layout': hasColumnLayout.value, 'b-modal-base__container--animation': isAnimationActive.value, })); watch( () => [props.isOpen, modal.value], ([newIsOpen, newModalValue], [, oldModalValue]): void => { if (!newModalValue) { return; } const isFirstMutation = !oldModalValue; if (newIsOpen) { openModal(); // add the first page to the array when the modal opens if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (!isFirstMutation) { startCloseModalAnimation(); } } ); // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } }, { deep: true } ); onMounted(() => { if (props.isOpen && modal.value) { openModal(); } }); /** * Expose methods through its 'ref' */ defineExpose({ internalModalActionClose, }); // Let's Children components know they are inside a Modal (dialog element) provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId); // Modal pagination const { activePage, isOpen, size } = toRefs(props); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; const height = ref(''); const isAnimationActive = ref(false); provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size, }); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Dialog container. It creates a dialog HTML element for the modal to use. * * @example * import BaseModal from './components/base-modal/base-modal.vue'; * * export default { * components: { BaseModal }, * template: ` * <base-modal * :hide-close-button="true" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </base-modal> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ i18n: { messages }, name: 'base-modal', }); </script> <style lang="scss" scoped src="./base-modal.scss" /> 

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

@@ -84,10 +84,10 @@ Some properties can only be applied to `bento-modal`:
 
 Additionally, there are also properties applied only to `bento-modal-page`:
 
-| Property Name  | Description                                                                                   |
-| -------------- | --------------------------------------------------------------------------------------------- |
-| `pageId`       | The id of the page, used with `bento-modal` activePage prop to control navigation             |
-| `previousPage` | Can be set to null to hide the back button, or to a `pageId` to override the normal behaviour |
+| Property Name  | Description                                                                                  |
+| -------------- | -------------------------------------------------------------------------------------------- |
+| `pageId`       | The id of the page, used with `bento-modal` activePage prop to control navigation            |
+| `previousPage` | Can be set to null to hide the back button, or to a `pageId` to override the normal behavior |
 
 #### Dismissible
 

package/dist/assets/components/modal-fullscreen/modal-fullscreen.docs.mdx

@@ -83,10 +83,10 @@ Some properties can only be applied to `bento-modal-fullscreen`:
 
 Additionally, there are also properties applied only to `bento-modal-fullscreen-page`:
 
-| Property Name  | Description                                                                                   |
-| -------------- | --------------------------------------------------------------------------------------------- |
-| `pageId`       | The id of the page, used with `bento-modal-fullscreen` activePage prop to control navigation  |
-| `previousPage` | Can be set to null to hide the back button, or to a `pageId` to override the normal behaviour |
+| Property Name  | Description                                                                                  |
+| -------------- | -------------------------------------------------------------------------------------------- |
+| `pageId`       | The id of the page, used with `bento-modal-fullscreen` activePage prop to control navigation |
+| `previousPage` | Can be set to null to hide the back button, or to a `pageId` to override the normal behavior |
 
 ### Title
 
@@ -206,7 +206,7 @@ It indicates the browser to ignore all the elements with `inert` attribute appli
 ### Keyboard interaction
 
 - User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to activate the sidepanel.
-- The `Tab` should change focus between interactive elements in Fullscreen Modal (if there are few). This behaviour
+- The `Tab` should change focus between interactive elements in Fullscreen Modal (if there are few). This behavior
   should only exist when Fullscreen Modal is open and should not extend outside of the dialog (focus trap).
 - When user uses `Esc` button, Fullscreen Modal should close and return focus to the trigger.
     - _OR_ when user use tab key to move focus to the dismiss/close button and then use Spacebar/Enter key -> we close

package/dist/assets/components/modal-fullscreen/modal-fullscreen.vue

@@ -1 +1 @@
-<template> <dialog :id="modalFullscreenId" ref="modal" class="b-modal-fullscreen" :class="conditionalClasses" data-dialog-element="modal-fullscreen" @animationend="closeModalAfterAnimation" @keydown.esc.prevent="closeModal" > <bento-focus-trap v-if="internalIsOpen" class="b-modal-fullscreen__wrapper"> <template v-if="props.activePage"> <slot /> </template> <bento-modal-fullscreen-page v-else :actions="actions" :contextual-label="contextualLabel" :title="title"> <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template v-if="hasSlot('header')" #header> <slot name="header"></slot> </template> </bento-modal-fullscreen-page> <div class="b-modal-fullscreen__close-button"> <bento-button variant="tertiary" :aria-label="t('close')" @click="closeModal"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> </bento-focus-trap> <!-- Enable the toast inside the fullscreen-modal --> <template v-if="isOpen"> <bento-toast /> </template> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoToast } from '@/components/toast'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { useHasSlot } from '@/composables'; import { useListeners } from '@/composables/use-listeners'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import messages from './messages.json'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed */ activePage: { type: String, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: null, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Handles closing the modal. The behavior changes depending on whether a `before-close` event listener is present. * * - **When listening for the `before-close` event:** * The `before-close` event is emitted immediately, skipping the animation. This allows for logic to run before the modal closes. * The `isOpen` prop must then be set to `false` to trigger the closing animation. * * - **When not listening for the `before-close` event:** * The closing animation plays, then `update:is-open` is emitted with `false`. * This is the default behavior, compatible with `v-model` or `.sync` on the `isOpen` prop. */ (e: 'before-close'): void; /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emits 'update:is-open' event when the modal is closed */ (e: 'update:is-open', isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const modal = ref(null); const isClosing = ref(false); const modalFullscreenId = generateUid('modal-fullscreen'); const internalIsOpen = ref(false); const listeners = useListeners(); const slots = useSlots(); const hasSlot = useHasSlot(slots); // Animation styling const conditionalClasses = computed(() => ({ 'b-modal-fullscreen--hide': isClosing.value, })); // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit('update:is-open', false); } }; /** * Emits the `beforeClose` event, if it is being listened to, * before closing the modal and omits the closing animation. * The animation will be triggered by the change of the `isOpen` prop instead. * * If no listener for the `before-close`, then the animation will be triggered, * which will close the modal and emit the `update:is-open` event instead, after it was closed. */ function closeModal() { /** * Vue3 appends the prefix "on" and changes to camelCase */ const eventName = isVue2 ? 'before-close' : 'onBeforeClose'; if (listeners[eventName]) { emit('before-close'); return; } startCloseModalAnimation(); } const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for modal ref to be created await nextTick(); if (!modal.value) { return; } if (isOpen.value) { internalIsOpen.value = true; modal.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (modal.value.open) { startCloseModalAnimation(); } }, { immediate: true } ); // lets children components know they are inside a Modal (dialog element) provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId); // Pages const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen: internalIsOpen, pages, previousPages, updatePage, }); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information. * * @example * import { BentoModalFullscreen } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen }, * template: ` * <bento-modal-fullscreen * :is-open="isOpen" * @update:is-open="isOpen = $event" * title='Fullscreen modal title' * contextual-label='Contextual label' * :actions="[{ title: 'Action', event: () => {}]" * > * <template #header>{{ header slot }}</template> * {{ content }} * </bento-modal-fullscreen> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./modal-fullscreen.scss" /> 
+<template> <dialog :id="modalFullscreenId" ref="modal" class="b-modal-fullscreen" :class="conditionalClasses" data-dialog-element="modal-fullscreen" @animationend="closeModalAfterAnimation" @keydown.esc.prevent="closeModal" > <bento-focus-trap v-if="internalIsOpen" class="b-modal-fullscreen__wrapper"> <template v-if="props.activePage"> <slot /> </template> <bento-modal-fullscreen-page v-else :actions="actions" :contextual-label="contextualLabel" :title="title"> <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template v-if="hasSlot('header')" #header> <slot name="header"></slot> </template> </bento-modal-fullscreen-page> <div class="b-modal-fullscreen__close-button"> <bento-button variant="tertiary" :aria-label="t('close')" @click="closeModal"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> </bento-focus-trap> <!-- Enable the toast inside the fullscreen-modal --> <template v-if="isOpen"> <bento-toast /> </template> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoToast } from '@/components/toast'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { useHasSlot } from '@/composables'; import { useListeners } from '@/composables/use-listeners'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import messages from './messages.json'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed */ activePage: { type: String, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: null, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Handles closing the modal. The behavior changes depending on whether a `before-close` event listener is present. * * - **When listening for the `before-close` event:** * The `before-close` event is emitted immediately, skipping the animation. This allows for logic to run before the modal closes. * The `isOpen` prop must then be set to `false` to trigger the closing animation. * * - **When not listening for the `before-close` event:** * The closing animation plays, then `update:is-open` is emitted with `false`. * This is the default behavior, compatible with `v-model` or `.sync` on the `isOpen` prop. */ (e: 'before-close'): void; /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emits 'update:is-open' event when the modal is closed */ (e: 'update:is-open', isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const modal = ref(null); const isClosing = ref(false); const modalFullscreenId = generateUid('modal-fullscreen'); const internalIsOpen = ref(false); const isMounted = ref(false); const listeners = useListeners(); const slots = useSlots(); const hasSlot = useHasSlot(slots); // Animation styling const conditionalClasses = computed(() => ({ 'b-modal-fullscreen--hide': isClosing.value, })); // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value && modal.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit('update:is-open', false); } }; /** * Emits the `beforeClose` event, if it is being listened to, * before closing the modal and omits the closing animation. * The animation will be triggered by the change of the `isOpen` prop instead. * * If no listener for the `before-close`, then the animation will be triggered, * which will close the modal and emit the `update:is-open` event instead, after it was closed. */ function closeModal() { /** * Vue3 appends the prefix "on" and changes to camelCase */ const eventName = isVue2 ? 'before-close' : 'onBeforeClose'; if (listeners[eventName]) { emit('before-close'); return; } startCloseModalAnimation(); } const startCloseModalAnimation = () => { if (!modal.value || !modal.value.open) { return; } isClosing.value = true; }; onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, modal], ([newIsOpen, newModalValue]) => { if (!isMounted.value || !newModalValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newModalValue.open) { newModalValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newModalValue.open) { startCloseModalAnimation(); } }, { immediate: true, flush: 'post' } ); // lets children components know they are inside a Modal (dialog element) provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId); // Pages const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen: internalIsOpen, pages, previousPages, updatePage, }); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information. * * @example * import { BentoModalFullscreen } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen }, * template: ` * <bento-modal-fullscreen * :is-open="isOpen" * @update:is-open="isOpen = $event" * title='Fullscreen modal title' * contextual-label='Contextual label' * :actions="[{ title: 'Action', event: () => {}]" * > * <template #header>{{ header slot }}</template> * {{ content }} * </bento-modal-fullscreen> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./modal-fullscreen.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue

@@ -1 +1 @@
-<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-selected="isItemSelected" @click="onClick"> <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 
+<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" @click="onClick" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 

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

@@ -19,18 +19,18 @@ with the main screen.
 
 Examples:
 
--   Create new object
--   Edit existing object
--   Settings/Configuration
--   Context related learning article
--   Other similar use cases
+- Create new object
+- Edit existing object
+- Settings/Configuration
+- Context related learning article
+- Other similar use cases
 
 ### Do not use
 
 For a small complexity tasks
 
--   Rename
--   Changing of only one setting
+- Rename
+- Changing of only one setting
 
 In those cases, use Modal component instead.
 
@@ -55,9 +55,9 @@ Each `sidepanel-page` component has three different sections:
 
 The header sections can contain three different elements:
 
--   Title (optional), this can be passed with the `title` prop.
--   Back button (optional), if the user has navigated deeper in the hierarchy and `previousPage` is not set to null.
--   Close button (optional), shows on the right top corner of the page if `isDismissible` is set to `true`.
+- Title (optional), this can be passed with the `title` prop.
+- Back button (optional), if the user has navigated deeper in the hierarchy and `previousPage` is not set to null.
+- Close button (optional), shows on the right top corner of the page if `isDismissible` is set to `true`.
 
 ### Content area
 
@@ -82,21 +82,21 @@ This is the list of properties, applicable to `bento-sidepanel`
 
 This is the list of properties, applicable to `bento-sidepanel-page`
 
-| Property Name        | Description                                                                                   |
-| -------------------- | --------------------------------------------------------------------------------------------- |
-| `pageId`             | The id of the page, used to control navigation                                                |
-| `previousPage`       | Can be set to null to hide the back button, or to a `pageId` to override the normal behaviour |
-| `title`              | Title of the page                                                                             |
-| `actions`            | List of actions that will be used to render the buttons                                       |
-| `actionsLabel`       | Text label that is displayed left to the action buttons                                       |
-| `destructiveActions` | If passed - sets first button color to red                                                    |
+| Property Name        | Description                                                                                  |
+| -------------------- | -------------------------------------------------------------------------------------------- |
+| `pageId`             | The id of the page, used to control navigation                                               |
+| `previousPage`       | Can be set to null to hide the back button, or to a `pageId` to override the normal behavior |
+| `title`              | Title of the page                                                                            |
+| `actions`            | List of actions that will be used to render the buttons                                      |
+| `actionsLabel`       | Text label that is displayed left to the action buttons                                      |
+| `destructiveActions` | If passed - sets first button color to red                                                   |
 
 ### isDismissible vs hideCloseButton
 
 The `isDismissible` property determines whether the sidepanel can be closed by clicking outside of the panel.
 
--   When `isDismissible=true`, a close button is displayed by default.
--   When `isDismissible=false`, a close button is hidden by default.
+- When `isDismissible=true`, a close button is displayed by default.
+- When `isDismissible=false`, a close button is hidden by default.
 
 To independently control the visibility of the close button while `isDismissible` is set, use the `hideCloseButton`
 property.
@@ -117,13 +117,13 @@ It indicates the browser to ignore all the elements with `inert` attribute appli
 
 ### Keyboard interaction
 
--   User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to activate the sidepanel.
--   The `Tab` should change focus between interactive elements in Sidepanel (if there are few). This behaviour should
-    only exist when Sidepanel is open and should not extend outside of the Sidepanel window (focus trap).
--   When user uses `Esc` button, Sidepanel should close and return focus to the trigger.
-    -   _OR_ when user use tab key to move focus to the dismiss/close button and then use Spacebar/Enter key -> we close
-        the sidepanel and return focus to the trigger
+- User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to activate the sidepanel.
+- The `Tab` should change focus between interactive elements in Sidepanel (if there are few). This behavior should only
+  exist when Sidepanel is open and should not extend outside of the Sidepanel window (focus trap).
+- When user uses `Esc` button, Sidepanel should close and return focus to the trigger.
+    - _OR_ when user use tab key to move focus to the dismiss/close button and then use Spacebar/Enter key -> we close
+      the sidepanel and return focus to the trigger
 
 ## Resources
 
--   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16389-6643&mode=design&t=2CFK9xp3h3zaSfYF-0)
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16389-6643&mode=design&t=2CFK9xp3h3zaSfYF-0)

package/dist/assets/components/sidepanel/sidepanel.vue

@@ -1 +1 @@
-<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for sidepanel ref to be created await nextTick(); if (!sidepanel.value) { return; } if (isOpen.value) { internalIsOpen.value = true; sidepanel.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (sidepanel.value.open) { startCloseSidepanelAnimation(); } }, { immediate: true } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 
+<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); const isMounted = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value && sidepanel.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value || !sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, sidepanel], ([newIsOpen, newSidepanelValue]) => { if (!isMounted.value || !newSidepanelValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newSidepanelValue.open) { newSidepanelValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newSidepanelValue.open) { startCloseSidepanelAnimation(); } }, { immediate: true, flush: 'post' } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 

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

@@ -37,10 +37,17 @@ There are two ways you can use your stepper:
 This stepper requires users to complete one step in order to move on to the next. Steps always follow a specific order
 and users cannot skip a step.
 
+<Canvas withSource="closed">
+    <Story of={StepperStories.Default} />
+</Canvas>
+
 2. Non-linear steppers
 
-This stepper allow users to complete steps in random order. Users can navigate to any step they wish.
+This stepper allows users to complete steps in random order. Users can navigate to any step they wish.
 
+<Canvas withSource="closed">
+    <Story of={StepperStories.NonLinear} />
+</Canvas>
 #### Using stepper with a loop
 
 If you want to build your stepper from an array of navigation options, you can do so:

package/dist/assets/components/stepper/stepper.stories.ts

@@ -1 +1 @@
-import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); 
+import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import NonLinearStepperSource from './__tests__/non-linear-stepper-example.vue?raw'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const NonLinear: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="activeStep" non-linear @update:index="index => setStep(index)" > <bento-step v-for="(step, index) in steps" :key="index" :completed="completedSteps[index]" > {{ step.title }} </bento-step> </bento-stepper> `, setup(props) { const steps = [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }, { title: 'Step 4' }]; const activeStep = ref(1); const completedSteps = ref<Record<number, boolean>>({ 0: true, }); const setStep = (index: number) => { action('update:index')(index); completedSteps.value[activeStep.value] = true; activeStep.value = index; }; return { args: isVue2 ? props : _args, steps, activeStep, completedSteps, setStep, }; }, }; }, args: { index: 1, nonLinear: true, }, parameters: storybookDocsParameter(NonLinearStepperSource), }; 

package/dist/assets/components/summary-grid/summary-grid.docs.mdx

@@ -13,7 +13,7 @@ import * as SummaryGridItemCustomStories from './components/summary-grid-item-cu
 Summary grid is a set of summary card items that are placed on a 12 column grid and can be used to highlight key
 information on your page.
 
-You can choose to use summary grid (based on 12 columns) or summary cards individually (hug content behaviour, no grid).
+You can choose to use summary grid (based on 12 columns) or summary cards individually (hug content behavior, no grid).
 
 <Canvas sourceState="closed">
     <Story of={SummaryGridStories.Default} />

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

@@ -13,7 +13,7 @@ page. Selecting another tab replaces content with the new tab’s content.
 
 ## Do's
 
-- Use tabs on content-heavy pages to organise related content into different views. This can help reduce cognitive load.
+- Use tabs on content-heavy pages to organize related content into different views. This can help reduce cognitive load.
 - Use concise tab headers that are easily understandable, ideally one or two words.
 
 ### Do not's

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

@@ -3,7 +3,7 @@
 Toast is a concise and temporary message that provides feedback on app’s processes after user takes an action, without
 disrupting their flow or requiring them to act on it.
 
-### Behaviour
+### Behavior
 
 When a user performs an action that triggers a toast message, it appears on the bottom right corner of the screen (or in
 the middle on smaller screens).
@@ -41,7 +41,7 @@ obscure the toast. When you need to provide feedback on actions taken within a m
 The `bento-toast` component doesn't accept any props, however its state is managed by a global reactive state. To be
 able to add and display toast messages, you should:
 
--   Initialize the **Bento plugin** with the toasts enabled by setting the `withToast` property to `true`
+- Initialize the **Bento plugin** with the toasts enabled by setting the `withToast` property to `true`
 
 ```typescript
 // index.ts
@@ -51,9 +51,9 @@ import BentoVue from '@adyen/bento-vue2';
 Vue.use(BentoVue, { withToast: true });
 ```
 
--   Import and instantiate the `bento-toast` component in the root of your application. The Toast component can be
-    anywhere on the app but it should only be included once, therefore it is recommended to have it on the root of your
-    app, namely in the `App.vue` file.
+- Import and instantiate the `bento-toast` component in the root of your application. The Toast component can be
+  anywhere on the app but it should only be included once, therefore it is recommended to have it on the root of your
+  app, namely in the `App.vue` file.
 
 ```html
 // App.vue
@@ -75,9 +75,9 @@ Vue.use(BentoVue, { withToast: true });
 </script>
 ```
 
--   Import the `useBentoToastController` composable in whatever component you might need to trigger a toast message.
-    Upon executing, `useBentoToastController()` composable will retrun `addToast()` method which would allow to register
-    new toasts messages.
+- Import the `useBentoToastController` composable in whatever component you might need to trigger a toast message. Upon
+  executing, `useBentoToastController()` composable will return `addToast()` method which would allow to register new
+  toasts messages.
 
 ```typescript
 <script lang="ts">
@@ -147,5 +147,5 @@ navigation and will be announced as non-interactive by assistive technology.
 
 ## Resources
 
--   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=2342-42474)
--   [WAI-ARIA guidelines](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22)
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=2342-42474)
+- [WAI-ARIA guidelines](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22)

package/dist/assets/index.ts

@@ -1 +1 @@
-import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/alert'; 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/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/inspector'; export * from './components/layout'; 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/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 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/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/inspector'; export * from './components/layout'; 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/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 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';