@adyen/bento-vue2 1.4.1 → 1.5.0

package/dist/sidepanel.js

@@ -5,9 +5,9 @@ import { F as $ } from "./chunks/footer-actions.6ddac024.js";
 import { A as H } from "./chunks/arrow-left.1d5d08bd.js";
 import { u as R } from "./chunks/i18n.155748d6.js";
 import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./chunks/index.c39c64c9.js";
+import { B as j } from "./chunks/index.0f8690c4.js";
 import { C as J } from "./chunks/cross.a2cadac5.js";
-import "./assets/index7.css";
+import "./assets/index22.css";
 var T = /* @__PURE__ */ ((l) => (l.UPDATE_ACTIVE_PAGE = "update:active-page", l.UPDATE_IS_OPEN = "update:is-open", l))(T || {}), y = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", l))(y || {});
 const D = Symbol("sidepanel registerPage injection key"), x = Symbol("sidepanel config data injection key"), K = {
   "en-US": {
@@ -80,7 +80,7 @@ const D = Symbol("sidepanel registerPage injection key"), x = Symbol("sidepanel
   setup(l) {
     const a = l, { t } = R(), e = r(null), o = r(!1), P = r(!0), i = r(!1), u = B(D), { unregisterPage: n } = u({ title: a.title, pageId: a.pageId });
     V(() => n());
-    const { activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: f, isOpen: E } = B(x), g = p(() => v.value ? v.value === a.pageId : !0), C = p(() => a.previousPage ? !0 : a.previousPage === null ? !1 : f.value && g.value), I = p(() => ({
+    const { activePage: d, animation: _, goToPreviousPage: v, hasPreviousPages: f, isOpen: E } = B(x), g = p(() => d.value ? d.value === a.pageId : !0), C = p(() => a.previousPage ? !0 : a.previousPage === null ? !1 : f.value && g.value), I = p(() => ({
       "b-sidepanel-page__header--with-border": o.value && !P.value
     })), A = p(() => ({
       "b-sidepanel-page__actions--with-border": o.value && !i.value
@@ -89,7 +89,7 @@ const D = Symbol("sidepanel registerPage injection key"), x = Symbol("sidepanel
     }, m = async (s) => {
       s && (await N(), o.value = e.value && e.value.scrollHeight > e.value.clientHeight);
     };
-    return h(() => E.value, m, { immediate: !0 }), h(() => g.value, m, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: o, isScrollAtTop: P, isScrollAtBottom: i, registerPage: u, unregisterPage: n, activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: f, isOpen: E, showPage: g, showBackButton: C, headerConditionalClasses: I, actionsConditionalClasses: A, onScroll: S, calculateScroll: m, updateAnimation: () => {
+    return h(() => E.value, m, { immediate: !0 }), h(() => g.value, m, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: o, isScrollAtTop: P, isScrollAtBottom: i, registerPage: u, unregisterPage: n, activePage: d, animation: _, goToPreviousPage: v, hasPreviousPages: f, isOpen: E, showPage: g, showBackButton: C, headerConditionalClasses: I, actionsConditionalClasses: A, onScroll: S, calculateScroll: m, updateAnimation: () => {
       _.value === y.TRANSITION_LEVEL_UPPER && (_.value = y.TRANSITION_LEVEL_DEEPER);
     }, BentoButton: w, BentoTypography: G, FooterActions: $, ArrowLeftIcon: H };
   }
@@ -144,7 +144,7 @@ const _e = Q.exports, W = {
     }
   },
   setup(l, { emit: a }) {
-    const t = l, { activePage: e, isOpen: o } = F(t), { t: P } = R(), i = r(null), u = r([]), n = r([]), v = p(() => n.value.length > 1), _ = r(y.TRANSITION_LEVEL_DEEPER), d = r(!1), f = p(() => n.value[n.value.length - 1]), E = p(() => u.value.some((s) => s.pageId === e.value)), g = (s) => {
+    const t = l, { activePage: e, isOpen: o } = F(t), { t: P } = R(), i = r(null), u = r([]), n = r([]), d = p(() => n.value.length > 1), _ = r(y.TRANSITION_LEVEL_DEEPER), v = r(!1), f = p(() => n.value[n.value.length - 1]), E = p(() => u.value.some((s) => s.pageId === e.value)), g = (s) => {
       if (s) {
         const c = n.value.indexOf(s);
         c !== -1 ? n.value = n.value.slice(0, c + 1) : n.value = [s];
@@ -164,11 +164,11 @@ const _e = Q.exports, W = {
       { immediate: !0 }
     );
     const C = p(() => ({
-      "b-sidepanel__hide": d.value
+      "b-sidepanel--hide": v.value
     })), I = (s) => {
-      d.value && s.pseudoElement === "::backdrop" && (i.value.close(), n.value[0] && a(T.UPDATE_ACTIVE_PAGE, n.value[0]), n.value = [], d.value = !1, a(T.UPDATE_IS_OPEN, !1));
+      v.value && s.pseudoElement === "::backdrop" && (i.value.close(), n.value[0] && a(T.UPDATE_ACTIVE_PAGE, n.value[0]), n.value = [], v.value = !1, a(T.UPDATE_IS_OPEN, !1));
     }, A = (s) => {
-      s && s.preventDefault(), i.value.open && (d.value = !0);
+      s && s.preventDefault(), i.value.open && (v.value = !0);
     }, S = ({ target: s }) => {
       s && s.tagName === "DIALOG" && A();
     };
@@ -187,9 +187,9 @@ const _e = Q.exports, W = {
       activePage: e,
       animation: _,
       goToPreviousPage: g,
-      hasPreviousPages: v,
+      hasPreviousPages: d,
       isOpen: o
-    }), O(D, b), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: o, t: P, sidepanel: i, pages: u, previousPages: n, hasPreviousPages: v, animation: _, isClosing: d, lastPage: f, isActivePageValid: E, goToPreviousPage: g, conditionalClasses: C, closeSidepanelAfterAnimation: I, startCloseSidepanelAnimation: A, closeSidepanelOnClickOutside: S, unregisterPage: m, registerPage: b, BentoButton: w, BentoFocusTrap: j, CrossIcon: J };
+    }), O(D, b), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: o, t: P, sidepanel: i, pages: u, previousPages: n, hasPreviousPages: d, animation: _, isClosing: v, lastPage: f, isActivePageValid: E, goToPreviousPage: g, conditionalClasses: C, closeSidepanelAfterAnimation: I, startCloseSidepanelAnimation: A, closeSidepanelOnClickOutside: S, unregisterPage: m, registerPage: b, BentoButton: w, BentoFocusTrap: j, CrossIcon: J };
   }
 });
 var ee = function() {
@@ -205,13 +205,13 @@ var ee = function() {
   ae,
   !1,
   null,
-  "d408ac3c",
+  "b0ec4027",
   null,
   null
 );
-const de = te.exports;
+const ve = te.exports;
 export {
-  de as BentoSidepanel,
+  ve as BentoSidepanel,
   y as BentoSidepanelAnimation,
   T as BentoSidepanelEvent,
   _e as BentoSidepanelPage

package/dist/sidepanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.keys.ts","../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nexport interface BentoSidepanelPageObject {\n    title: string;\n    pageId: string;\n}\n\nexport enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n\nexport enum BentoSidepanelAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-sidepanel-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-sidepanel-page__animation--level-upper',\n}\n\nexport interface BentoSidepanelConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    goToPreviousPage: (page: string) => void;\n    hasPreviousPages: Ref<boolean>;\n    isOpen: Ref<boolean>;\n}\n\nexport type BentoSidepanelRegisterPage = (props: BentoSidepanelPageObject) => { unregisterPage: () => void };\n","export const SIDEPANEL_REGISTER_PAGE_INJECTION_KEY = Symbol('sidepanel registerPage injection key');\nexport const SIDEPANEL_CONFIG_INJECTION_KEY = Symbol('sidepanel config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\">\n        <div v-show=\"showPage\" class=\"b-sidepanel-page\">\n            <div class=\"b-sidepanel-page__header\" :class=\"headerConditionalClasses\">\n                <bento-button v-if=\"showBackButton\" variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                    <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                </bento-button>\n\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n            <div ref=\"contentElement\" class=\"b-sidepanel-page__content\" @scroll=\"onScroll\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n            <div v-if=\"actions\" class=\"b-sidepanel-page__actions\" :class=\"actionsConditionalClasses\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { BentoSidepanelAnimation, BentoSidepanelConfigData, BentoSidepanelRegisterPage } from '../sidepanel.types';\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from '../sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoSidepanelRegisterPage>(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage({ title: props.title, pageId: props.pageId });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n\n    const { activePage, animation, goToPreviousPage, hasPreviousPages, isOpen } =\n        inject<BentoSidepanelConfigData>(SIDEPANEL_CONFIG_INJECTION_KEY);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-sidepanel-page__header--with-border': hasScroll.value && !isScrollAtTop.value,\n    }));\n\n    const actionsConditionalClasses = computed(() => ({\n        'b-sidepanel-page__actions--with-border': hasScroll.value && !isScrollAtBottom.value,\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Animation\n    const updateAnimation = () => {\n        if (animation.value === BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER) {\n            animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc=\"startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import {\n        BentoSidepanelAnimation,\n        BentoSidepanelEvent,\n        BentoSidepanelPageObject,\n        BentoSidepanelRegisterPage,\n    } from './sidepanel.types';\n\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<BentoSidepanelPageObject[]>([]);\n    const previousPages = ref([]);\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const animation = ref(BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n\n    // Previous page/back button logic\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page.pageId === activePage.value));\n\n    const goToPreviousPage = (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER;\n        emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                // eslint-disable-next-line no-console\n                console.error(`The activePage passed \"${activePage.value}\" does not match the id of any SidepanelPage`);\n                return;\n            }\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel__hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = (event: AnimationEvent) => {\n        if (isClosing.value && event.pseudoElement === '::backdrop') {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(({ pageId }) => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoSidepanelRegisterPage = ({ title, pageId }) => {\n        pages.value.push({ title, pageId });\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(SIDEPANEL_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        goToPreviousPage,\n        hasPreviousPages,\n        isOpen,\n    });\n    provide(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * 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.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["BentoSidepanelEvent","BentoSidepanelEvent2","BentoSidepanelAnimation","BentoSidepanelAnimation2","SIDEPANEL_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_CONFIG_INJECTION_KEY","__default__$1","messages$1","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","registerPage","inject","unregisterPage","props","onUnmounted","activePage","animation","goToPreviousPage","hasPreviousPages","isOpen","showPage","computed","showBackButton","headerConditionalClasses","actionsConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","watch","__default__","messages","toRefs","t","sidepanel","pages","previousPages","isClosing","lastPage","isActivePageValid","page","index","emit","conditionalClasses","closeSidepanelAfterAnimation","event","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","pageIdToRemove","_a","pageId","title","provide"],"mappings":"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"}
+{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.keys.ts","../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nexport interface BentoSidepanelPageObject {\n    title: string;\n    pageId: string;\n}\n\nexport enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n\nexport enum BentoSidepanelAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-sidepanel-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-sidepanel-page__animation--level-upper',\n}\n\nexport interface BentoSidepanelConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    goToPreviousPage: (page: string) => void;\n    hasPreviousPages: Ref<boolean>;\n    isOpen: Ref<boolean>;\n}\n\nexport type BentoSidepanelRegisterPage = (props: BentoSidepanelPageObject) => { unregisterPage: () => void };\n","export const SIDEPANEL_REGISTER_PAGE_INJECTION_KEY = Symbol('sidepanel registerPage injection key');\nexport const SIDEPANEL_CONFIG_INJECTION_KEY = Symbol('sidepanel config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\">\n        <div v-show=\"showPage\" class=\"b-sidepanel-page\">\n            <div class=\"b-sidepanel-page__header\" :class=\"headerConditionalClasses\">\n                <bento-button v-if=\"showBackButton\" variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                    <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                </bento-button>\n\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n            <div ref=\"contentElement\" class=\"b-sidepanel-page__content\" @scroll=\"onScroll\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n            <div v-if=\"actions\" class=\"b-sidepanel-page__actions\" :class=\"actionsConditionalClasses\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { BentoSidepanelAnimation, BentoSidepanelConfigData, BentoSidepanelRegisterPage } from '../sidepanel.types';\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from '../sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoSidepanelRegisterPage>(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage({ title: props.title, pageId: props.pageId });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n\n    const { activePage, animation, goToPreviousPage, hasPreviousPages, isOpen } =\n        inject<BentoSidepanelConfigData>(SIDEPANEL_CONFIG_INJECTION_KEY);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-sidepanel-page__header--with-border': hasScroll.value && !isScrollAtTop.value,\n    }));\n\n    const actionsConditionalClasses = computed(() => ({\n        'b-sidepanel-page__actions--with-border': hasScroll.value && !isScrollAtBottom.value,\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Animation\n    const updateAnimation = () => {\n        if (animation.value === BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER) {\n            animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc=\"startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import {\n        BentoSidepanelAnimation,\n        BentoSidepanelEvent,\n        BentoSidepanelPageObject,\n        BentoSidepanelRegisterPage,\n    } from './sidepanel.types';\n\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<BentoSidepanelPageObject[]>([]);\n    const previousPages = ref([]);\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const animation = ref(BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n\n    // Previous page/back button logic\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page.pageId === activePage.value));\n\n    const goToPreviousPage = (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER;\n        emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                // eslint-disable-next-line no-console\n                console.error(`The activePage passed \"${activePage.value}\" does not match the id of any SidepanelPage`);\n                return;\n            }\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = (event: AnimationEvent) => {\n        if (isClosing.value && event.pseudoElement === '::backdrop') {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(({ pageId }) => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoSidepanelRegisterPage = ({ title, pageId }) => {\n        pages.value.push({ title, pageId });\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(SIDEPANEL_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        goToPreviousPage,\n        hasPreviousPages,\n        isOpen,\n    });\n    provide(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * 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.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["BentoSidepanelEvent","BentoSidepanelEvent2","BentoSidepanelAnimation","BentoSidepanelAnimation2","SIDEPANEL_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_CONFIG_INJECTION_KEY","__default__$1","messages$1","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","registerPage","inject","unregisterPage","props","onUnmounted","activePage","animation","goToPreviousPage","hasPreviousPages","isOpen","showPage","computed","showBackButton","headerConditionalClasses","actionsConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","watch","__default__","messages","toRefs","t","sidepanel","pages","previousPages","isClosing","lastPage","isActivePageValid","page","index","emit","conditionalClasses","closeSidepanelAfterAnimation","event","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","pageIdToRemove","_a","pageId","title","provide"],"mappings":"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"}

package/dist/status.js

@@ -1,7 +1,7 @@
 import { defineComponent as n, computed as a } from "vue";
 import { B as o } from "./chunks/index.1645ffcb.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index27.css";
+import "./assets/index23.css";
 var r = /* @__PURE__ */ ((s) => (s.BLUE = "blue", s.GREEN = "green", s.GREY = "grey", s.ORANGE = "orange", s.RED = "red", s.YELLOW = "yellow", s))(r || {});
 const _ = n({
   name: "bento-status",

package/dist/stepper.js

@@ -0,0 +1,229 @@
+import { defineComponent as V, ref as p, computed as o, watch as A, provide as w, readonly as K, useSlots as W, inject as z, onMounted as Z } from "vue";
+import { B as L } from "./chunks/index.1645ffcb.js";
+import { B as I, a as M } from "./chunks/keyboard-navigation.ca47dfa8.js";
+import { u as U } from "./chunks/i18n.155748d6.js";
+import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as j } from "./chunks/base-button.89e9efbd.js";
+import { C as G } from "./chunks/checkmark-small.5ca15f00.js";
+import "./assets/index24.css";
+const q = (l) => {
+  function s(i) {
+    return ({ detail: u }) => {
+      var t;
+      u.preventDefault();
+      const c = l.value.indexOf(document.activeElement);
+      c < 0 || (t = l.value[c + i]) == null || t.focus();
+    };
+  }
+  const n = s(-1), e = s(1);
+  return {
+    [I.ARROW_DOWN]: e,
+    [I.ARROW_RIGHT]: e,
+    [I.ARROW_UP]: n,
+    [I.ARROW_LEFT]: n
+  };
+}, R = Symbol("stepper state");
+var B = /* @__PURE__ */ ((l) => (l.LINEAR = "linear", l.NON_LINEAR = "non-linear", l))(B || {}), O = /* @__PURE__ */ ((l) => (l.HORIZONTAL = "horizontal", l.VERTICAL = "vertical", l))(O || {});
+const J = {
+  "en-US": {
+    step: "Step {currentIndex}/{totalSteps} {content}"
+  }
+}, Q = {
+  i18n: { messages: J },
+  name: "stepper"
+}, X = /* @__PURE__ */ V({
+  ...Q,
+  props: {
+    /**
+     * Type of stepper; defines how the stepper should behave. Default: linear
+     * @values linear, non-linear
+     */
+    type: {
+      type: String,
+      default: "linear"
+    },
+    /**
+     * Stepper variant; defines how the stepper should be displayed. Default: vertical
+     * @values vertical, horizontal
+     */
+    variant: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * Active step index
+     */
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:index"],
+  setup(l, { emit: s }) {
+    const n = l, { t: e } = U(), i = p([]), u = p(n.index), c = p(u.value), t = (a) => {
+      a > c.value && (c.value = a), u.value = a;
+    }, S = o(() => {
+      var a;
+      return (a = i.value[u.value]) == null ? void 0 : a.stepContent;
+    }), v = o(() => i.value.length), y = o(() => i.value.map(({ buttonElement: a }) => a)), b = o(() => n.variant === O.HORIZONTAL), _ = o(
+      () => i.value.map(({ buttonElement: a, substeps: h }, m) => {
+        const N = u.value === m;
+        return !b.value && N ? [a].concat(h.map((g) => g.buttonElement)) : [a];
+      }).flat()
+    ), d = (a) => {
+      i.value.push({
+        stepContent: a.stepContent,
+        buttonElement: a.buttonElement,
+        substeps: a.substeps
+      });
+    }, f = p({
+      activeStepIndex: u,
+      latestActiveStep: c,
+      steps: y,
+      type: n.type,
+      variant: n.variant,
+      navigateToStep: t,
+      registerStep: d
+    }), C = o(() => ({
+      "b-stepper__list--horizontal": b.value
+    }));
+    A(() => n.index, t), A(u, (a) => {
+      s("update:index", a);
+    });
+    const x = q(_);
+    return w(R, K(f)), { __sfc: !0, props: n, emit: s, t: e, childrenSteps: i, activeStepIndex: u, latestActiveStep: c, navigateToStep: t, currentStepContent: S, stepsAmount: v, childrenStepsElements: y, isHorizontalVariant: b, allVisibleStepsElements: _, registerStep: d, stepperState: f, conditionalClasses: C, keyboardNavigationListeners: x, BentoTypography: L, vBentoKeyboardNavigationDirective: M };
+  }
+});
+var Y = function() {
+  var s = this, n = s._self._c, e = s._self._setupProxy;
+  return n("nav", { staticClass: "b-stepper" }, [n("ol", s._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-stepper__list", class: e.conditionalClasses }, e.keyboardNavigationListeners), [s._t("default")], 2), n(e.BentoTypography, { staticClass: "b-stepper__text-stepper", attrs: { el: "span", variant: "body", stronger: "" } }, [s._v(s._s(e.t("step", { currentIndex: e.activeStepIndex + 1, totalSteps: e.stepsAmount, content: e.currentStepContent })) + " ")])], 1);
+}, ee = [], te = /* @__PURE__ */ T(
+  X,
+  Y,
+  ee,
+  !1,
+  null,
+  "7987f68e",
+  null,
+  null
+);
+const ye = te.exports;
+let $ = 0;
+const se = {
+  beforeCreate() {
+    this.uuid = $.toString(), $ += 1;
+  }
+};
+var ne = function() {
+  var s = this, n = s._self._c;
+  return n("svg", s._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", s.$attrs, !1), [s.$attrs["svg-title"] ? n("title", [s._v(s._s(s.$attrs["svg-title"]))]) : s._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M8 5.25C6.48122 5.25 5.25 6.48122 5.25 8C5.25 9.51878 6.48122 10.75 8 10.75C9.51878 10.75 10.75 9.51878 10.75 8C10.75 6.48122 9.51878 5.25 8 5.25Z", "clip-rule": "evenodd" } })]);
+}, ae = [], oe = /* @__PURE__ */ T(
+  se,
+  ne,
+  ae,
+  !1,
+  null,
+  "750b7c68",
+  null,
+  null
+);
+const le = oe.exports, re = {
+  name: "step"
+}, ie = /* @__PURE__ */ V({
+  ...re,
+  props: {
+    /**
+     * Completed status. Used on non-linear steppers to indicate if the step is completed.
+     */
+    completed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Active substep index
+     */
+    substepIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:substep-index"],
+  setup(l, { emit: s }) {
+    const n = l, e = W(), i = p(null), u = p(null), c = p([]), t = z(R), S = o(() => {
+      var r;
+      return (r = i.value) == null ? void 0 : r.$el;
+    }), v = o(() => t == null ? void 0 : t.value.steps.indexOf(S.value)), y = o(() => {
+      var r;
+      return (r = u.value) == null ? void 0 : r.$el.textContent;
+    }), b = o(() => c.value.map(({ buttonElement: r }) => r)), _ = p(n.substepIndex), d = p(_.value), f = (r) => {
+      r > d.value && (d.value = r), _.value = r;
+    }, C = (r) => {
+      c.value.push({
+        stepContent: r.stepContent,
+        buttonElement: r.buttonElement,
+        substeps: r.substeps
+      });
+    }, x = p({
+      activeStepIndex: _,
+      latestActiveStep: d,
+      type: t.value.type,
+      variant: t.value.variant,
+      steps: b,
+      isParentStep: !0,
+      navigateToStep: f,
+      registerStep: C
+    });
+    w(R, x), A(() => n.substepIndex, f), A(_, (r) => {
+      s("update:substep-index", r);
+    }), Z(() => {
+      if (!t)
+        throw new Error(
+          "BentoStep components should only be used inside BentoStepper or other BentoStep components."
+        );
+      t.value.registerStep({
+        buttonElement: S,
+        stepContent: y,
+        substeps: c
+      });
+    });
+    const a = o(() => t.value.isParentStep), h = p(!1), m = o(() => (t == null ? void 0 : t.value.activeStepIndex) === v.value), N = o(
+      () => m.value && t.value.variant !== O.HORIZONTAL && !a.value && e.substeps
+    ), E = o(() => (t == null ? void 0 : t.value.type) === B.NON_LINEAR ? n.completed : (t == null ? void 0 : t.value.latestActiveStep) > v.value), g = o(
+      () => (t == null ? void 0 : t.value.type) === B.LINEAR && v.value > (t == null ? void 0 : t.value.latestActiveStep)
+    ), D = () => {
+      g.value || t.value.navigateToStep(v.value);
+    }, k = o(() => m.value ? "step" : "false"), P = o(() => g.value.toString()), F = o(() => h.value || v.value === 0 && !a.value ? "0" : "-1"), H = o(() => ({
+      "b-step--active": m.value,
+      "b-step--completed": E.value,
+      "b-step--substep": a.value
+    }));
+    return { __sfc: !0, slots: e, props: n, emit: s, buttonComponent: i, stepContent: u, substeps: c, stepper: t, buttonElement: S, index: v, stepContentValue: y, substepsButtonElements: b, activeSubStepIndex: _, latestActiveSubStepIndex: d, navigateToSubstep: f, registerSubstep: C, stepState: x, isSubstep: a, isFocused: h, isActive: m, isSubstepsVisible: N, isCompleted: E, isDisabled: g, navigateToStep: D, ariaCurrentValue: k, ariaDisabledValue: P, tabIndexValue: F, conditionalClasses: H, BaseButton: j, BentoTypography: L, CheckmarkSmallIcon: G, DotIcon: le };
+  }
+});
+var ue = function() {
+  var s = this, n = s._self._c, e = s._self._setupProxy;
+  return n("li", { staticClass: "b-step", class: e.conditionalClasses }, [n(e.BaseButton, { ref: "buttonComponent", staticClass: "b-step__button", attrs: { "aria-current": e.ariaCurrentValue, "aria-disabled": e.ariaDisabledValue, type: "button", tabindex: e.tabIndexValue, disabled: e.isDisabled }, on: { click: e.navigateToStep, focus: function(i) {
+    e.isFocused = !0;
+  }, blur: function(i) {
+    e.isFocused = !1;
+  } }, scopedSlots: s._u([{ key: "iconLeft", fn: function() {
+    return [n(e.BentoTypography, { staticClass: "b-step__index", attrs: { el: "span", variant: "body", stronger: "", "aria-hidden": "true" } }, [e.isCompleted ? n(e.CheckmarkSmallIcon) : e.isSubstep ? n(e.DotIcon) : [s._v(s._s(e.index + 1))]], 2)];
+  }, proxy: !0 }]) }, [n(e.BentoTypography, { ref: "stepContent", staticClass: "b-step__content", attrs: { el: "span", variant: "body", stronger: e.isActive } }, [s._t("default")], 2)], 1), n("ul", { directives: [{ name: "show", rawName: "v-show", value: e.isSubstepsVisible, expression: "isSubstepsVisible" }], ref: "substepList", staticClass: "b-step__substep-list" }, [s._t("substeps")], 2)], 1);
+}, ce = [], pe = /* @__PURE__ */ T(
+  ie,
+  ue,
+  ce,
+  !1,
+  null,
+  "69c1111a",
+  null,
+  null
+);
+const ge = pe.exports;
+export {
+  ge as BentoStep,
+  ye as BentoStepper,
+  B as BentoStepperTypeOption,
+  O as BentoStepperVariantOption
+};
+//# sourceMappingURL=stepper.js.map

package/dist/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../src/components/stepper/composables/useKeyboardNavigation/useKeyboardNavigation.ts","../src/components/stepper/stepper.keys.ts","../src/components/stepper/stepper.types.ts","../src/components/stepper/stepper.vue","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/dot.vue","../src/components/stepper/components/step/step.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nimport { BentoKeyboardNavigationKeyDownEvent } from '@/types';\n\n/**\n * Returns keyboard navigation's event handlers to navigate through the steps\n *\n * @param steps the list of bento-steps DOM elements to focus on the navigation\n * @returns\n */\nexport const useKeyboardNavigation = (steps: Ref<HTMLButtonElement[]>) => {\n    // Returns the event handler that moves the focus on a given step offset\n    function focusOnStep(indexOffset: number) {\n        return ({ detail: event }) => {\n            event.preventDefault();\n\n            const currentIndex = steps.value.indexOf(document.activeElement as HTMLButtonElement);\n            if (currentIndex < 0) {\n                return;\n            }\n\n            steps.value[currentIndex + indexOffset]?.focus();\n        };\n    }\n\n    const focusOnPreviousStep = focusOnStep(-1);\n    const focusOnNextStep = focusOnStep(1);\n\n    return {\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: focusOnNextStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_RIGHT]: focusOnNextStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: focusOnPreviousStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_LEFT]: focusOnPreviousStep,\n    };\n};\n","import type { InjectionKey } from 'vue';\n\nimport type { BentoStepperState } from './stepper.types';\n\nexport const STEPPER_STATE = Symbol('stepper state') as InjectionKey<BentoStepperState>;\n","import type { ComputedRef, Ref } from 'vue';\n\nexport enum BentoStepperTypeOption {\n    LINEAR = 'linear',\n    NON_LINEAR = 'non-linear',\n}\n\nexport enum BentoStepperVariantOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoStepperStepExposeState {\n    buttonElement: HTMLButtonElement | Ref<HTMLButtonElement>;\n    substeps: BentoStepperStepExposeState[] | Ref<BentoStepperStepExposeState[]>;\n    stepContent: string | ComputedRef<string>;\n}\n\nexport type BentoStepperState = Ref<{\n    activeStepIndex: number;\n    latestActiveStep: number;\n    type: `${BentoStepperTypeOption}`;\n    variant: `${BentoStepperVariantOption}`;\n    steps: HTMLElement[];\n    isParentStep?: boolean;\n    navigateToStep: (index: number) => void;\n    registerStep: (stepState: BentoStepperStepExposeState) => void;\n}>;\n","<template>\n    <nav class=\"b-stepper\">\n        <ol\n            v-bento-keyboard-navigation-directive\n            class=\"b-stepper__list\"\n            :class=\"conditionalClasses\"\n            v-on=\"keyboardNavigationListeners\"\n        >\n            <slot></slot>\n        </ol>\n\n        <bento-typography el=\"span\" variant=\"body\" stronger class=\"b-stepper__text-stepper\"\n            >{{\n                t('step', { currentIndex: activeStepIndex + 1, totalSteps: stepsAmount, content: currentStepContent })\n            }}\n        </bento-typography>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n\n    import { computed, PropType, provide, readonly, ref, watch } from 'vue';\n    import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n    import { useKeyboardNavigation } from './composables/useKeyboardNavigation/useKeyboardNavigation';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { STEPPER_STATE } from './stepper.keys';\n    import {\n        BentoStepperState,\n        BentoStepperStepExposeState,\n        BentoStepperTypeOption,\n        BentoStepperVariantOption,\n    } from './stepper.types';\n\n    import messages from './messages.json';\n\n    const props = defineProps({\n        /**\n         * Type of stepper; defines how the stepper should behave. Default: linear\n         * @values linear, non-linear\n         */\n        type: {\n            type: String as PropType<`${BentoStepperTypeOption}`>,\n            default: 'linear',\n        },\n        /**\n         * Stepper variant; defines how the stepper should be displayed. Default: vertical\n         * @values vertical, horizontal\n         */\n        variant: {\n            type: String as PropType<`${BentoStepperVariantOption}`>,\n            default: 'vertical',\n        },\n        /**\n         * Active step index\n         */\n        index: {\n            type: Number,\n            default: 0,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event triggered when step is updated by the stepper\n         */\n        (e: 'update:index', index: number): void;\n    }>();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const childrenSteps = ref<BentoStepperStepExposeState[]>([]);\n    const activeStepIndex = ref(props.index);\n    const latestActiveStep = ref(activeStepIndex.value);\n\n    const navigateToStep = (index: number) => {\n        // Stores latest active step index so users can navigate backwards and forwards on linear stepper\n        if (index > latestActiveStep.value) {\n            latestActiveStep.value = index;\n        }\n        activeStepIndex.value = index;\n    };\n\n    const currentStepContent = computed(() => childrenSteps.value[activeStepIndex.value]?.stepContent);\n    const stepsAmount = computed(() => childrenSteps.value.length);\n    const childrenStepsElements = computed(() => childrenSteps.value.map(({ buttonElement }) => buttonElement));\n    const isHorizontalVariant = computed(() => props.variant === BentoStepperVariantOption.HORIZONTAL);\n\n    // List of all visible steps nested on the stepper, including the substeps of the children steps\n    // Flattening the steps on a single list makes the keyboard navigation easier to be handled\n    const allVisibleStepsElements = computed(() =>\n        childrenSteps.value\n            .map(({ buttonElement, substeps }, index) => {\n                const isStepActive = activeStepIndex.value === index;\n                const isSubstepsVisible = !isHorizontalVariant.value && isStepActive;\n\n                if (!isSubstepsVisible) {\n                    return [buttonElement];\n                }\n\n                return [buttonElement].concat(substeps.map(step => step.buttonElement));\n            })\n            .flat()\n    );\n\n    // Maps BentoStep children components whenever the DOM is updated to keep track of steps indexes\n    const registerStep = (stepState: BentoStepperStepExposeState) => {\n        childrenSteps.value.push({\n            stepContent: stepState.stepContent as string,\n            buttonElement: stepState.buttonElement as HTMLButtonElement,\n            substeps: stepState.substeps as BentoStepperStepExposeState[],\n        });\n    };\n\n    const stepperState: BentoStepperState = ref({\n        activeStepIndex,\n        latestActiveStep,\n        steps: childrenStepsElements,\n        type: props.type,\n        variant: props.variant,\n        navigateToStep,\n        registerStep,\n    });\n\n    const conditionalClasses = computed(() => ({\n        'b-stepper__list--horizontal': isHorizontalVariant.value,\n    }));\n\n    watch(() => props.index, navigateToStep);\n    watch(activeStepIndex, index => {\n        emit('update:index', index);\n    });\n\n    const keyboardNavigationListeners = useKeyboardNavigation(allVisibleStepsElements);\n\n    // Provides stepper state to BentoStep children components\n    provide(STEPPER_STATE, readonly(stepperState));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process.\n     *\n     * @example\n     * import { BentoStep, BentoStepper } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStep, BentoStepper },\n     *     template: `\n     *          <bento-stepper :index=\"1\">\n     *              <bento-step>Step 1</bento-step>\n     *              <bento-step>Step 2</bento-step>\n     *              <bento-step>Step 3</bento-step>\n     *          </bento-stepper>\n     *     `\n     * }\n     */\n\n    export default {\n        i18n: { messages },\n        name: 'stepper',\n    };\n</script>\n\n<style scoped src=\"./stepper.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M8 5.25C6.48122 5.25 5.25 6.48122 5.25 8C5.25 9.51878 6.48122 10.75 8 10.75C9.51878 10.75 10.75 9.51878 10.75 8C10.75 6.48122 9.51878 5.25 8 5.25Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <li :class=\"conditionalClasses\" class=\"b-step\">\n        <base-button\n            ref=\"buttonComponent\"\n            :aria-current=\"ariaCurrentValue\"\n            :aria-disabled=\"ariaDisabledValue\"\n            class=\"b-step__button\"\n            type=\"button\"\n            :tabindex=\"tabIndexValue\"\n            :disabled=\"isDisabled\"\n            @click=\"navigateToStep\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n        >\n            <template #iconLeft>\n                <bento-typography el=\"span\" variant=\"body\" stronger class=\"b-step__index\" aria-hidden=\"true\">\n                    <checkmark-small-icon v-if=\"isCompleted\" />\n                    <template v-else-if=\"!isSubstep\">{{ index + 1 }}</template>\n                    <dot-icon v-else />\n                </bento-typography>\n            </template>\n\n            <bento-typography ref=\"stepContent\" el=\"span\" variant=\"body\" :stronger=\"isActive\" class=\"b-step__content\">\n                <slot></slot>\n            </bento-typography>\n        </base-button>\n\n        <ul v-show=\"isSubstepsVisible\" ref=\"substepList\" class=\"b-step__substep-list\">\n            <slot name=\"substeps\"></slot>\n        </ul>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { BaseButton } from '@/components/internal/base-button';\n    import { BentoTypography } from '@/components/typography';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n\n    import { STEPPER_STATE } from '../../stepper.keys';\n    import {\n        BentoStepperState,\n        BentoStepperStepExposeState,\n        BentoStepperTypeOption,\n        BentoStepperVariantOption,\n    } from '../../stepper.types';\n    import { Booleanish } from '@/types';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Completed status. Used on non-linear steppers to indicate if the step is completed.\n         */\n        completed: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Active substep index\n         */\n        substepIndex: {\n            type: Number,\n            default: 0,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event triggered when substep is updated by the parent step\n         */\n        (e: 'update:substep-index', index: number): void;\n    }>();\n\n    // Element refs\n    const buttonComponent = ref<InstanceType<typeof BaseButton> | null>(null);\n    const stepContent = ref<InstanceType<typeof BentoTypography> | null>(null);\n    const substeps = ref<BentoStepperStepExposeState[]>([]);\n\n    // Injects parent BentoStepper state data\n    const stepper = inject(STEPPER_STATE);\n\n    const buttonElement = computed(() => buttonComponent.value?.$el as HTMLButtonElement);\n    const index = computed(() => stepper?.value.steps.indexOf(buttonElement.value));\n\n    const stepContentValue = computed(() => stepContent.value?.$el.textContent);\n\n    // Substep logic\n    const substepsButtonElements = computed(() => substeps.value.map(({ buttonElement }) => buttonElement));\n\n    const activeSubStepIndex = ref(props.substepIndex);\n    const latestActiveSubStepIndex = ref(activeSubStepIndex.value);\n\n    const navigateToSubstep = (value: number) => {\n        if (value > latestActiveSubStepIndex.value) {\n            latestActiveSubStepIndex.value = value;\n        }\n\n        activeSubStepIndex.value = value;\n    };\n\n    const registerSubstep = (stepState: BentoStepperStepExposeState) => {\n        substeps.value.push({\n            stepContent: stepState.stepContent as string,\n            buttonElement: stepState.buttonElement as HTMLButtonElement,\n            substeps: stepState.substeps as BentoStepperStepExposeState[],\n        });\n    };\n\n    const stepState: BentoStepperState = ref({\n        activeStepIndex: activeSubStepIndex,\n        latestActiveStep: latestActiveSubStepIndex,\n        type: stepper.value.type,\n        variant: stepper.value.variant,\n        steps: substepsButtonElements,\n        isParentStep: true,\n        navigateToStep: navigateToSubstep,\n        registerStep: registerSubstep,\n    });\n\n    provide(STEPPER_STATE, stepState);\n\n    watch(() => props.substepIndex, navigateToSubstep);\n    watch(activeSubStepIndex, value => {\n        emit('update:substep-index', value);\n    });\n\n    onMounted(() => {\n        if (!stepper) {\n            throw new Error(\n                'BentoStep components should only be used inside BentoStepper or other BentoStep components.'\n            );\n        }\n\n        stepper.value.registerStep({\n            buttonElement,\n            stepContent: stepContentValue,\n            substeps,\n        });\n    });\n\n    // Step states\n    const isSubstep = computed(() => stepper.value.isParentStep);\n    const isFocused = ref(false);\n    const isActive = computed(() => stepper?.value.activeStepIndex === index.value);\n    const isSubstepsVisible = computed(\n        () =>\n            isActive.value &&\n            stepper.value.variant !== BentoStepperVariantOption.HORIZONTAL &&\n            !isSubstep.value &&\n            slots.substeps\n    );\n    const isCompleted = computed(() => {\n        if (stepper?.value.type === BentoStepperTypeOption.NON_LINEAR) {\n            return props.completed;\n        }\n\n        return stepper?.value.latestActiveStep > index.value;\n    });\n    const isDisabled = computed(\n        () => stepper?.value.type === BentoStepperTypeOption.LINEAR && index.value > stepper?.value.latestActiveStep\n    );\n\n    const navigateToStep = () => {\n        if (isDisabled.value) {\n            return;\n        }\n\n        stepper.value.navigateToStep(index.value);\n    };\n\n    // Styling and a11y\n    const ariaCurrentValue = computed(() => (isActive.value ? 'step' : ('false' as Booleanish)));\n    const ariaDisabledValue = computed(() => isDisabled.value.toString() as Booleanish);\n    const tabIndexValue = computed(() => (isFocused.value || (index.value === 0 && !isSubstep.value) ? '0' : '-1'));\n\n    const conditionalClasses = computed(() => ({\n        'b-step--active': isActive.value,\n        'b-step--completed': isCompleted.value,\n        'b-step--substep': isSubstep.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Steps are components placed inside BentoSteppers to break down complex processes\n     *\n     * @example\n     * import { BentoStep } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStep },\n     *     template: `\n     *          <bento-stepper>\n     *              <bento-step>Step 1</bento-step>\n     *              <bento-step>\n     *                  Step 2\n     *                  <template #substeps>\n     *                      <bento-step>Substep 1</bento-step>\n     *                      <bento-step>Substep 2</bento-step>\n     *                  </template>\n     *              </bento-step>\n     *          </bento-stepper>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'step',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./step.scss\" />\n"],"names":["useKeyboardNavigation","steps","focusOnStep","indexOffset","event","currentIndex","_a","focusOnPreviousStep","focusOnNextStep","BentoKeyboardNavigationKeyDownEvent","STEPPER_STATE","BentoStepperTypeOption","BentoStepperTypeOption2","BentoStepperVariantOption","BentoStepperVariantOption2","__default__$1","messages","t","useI18n","childrenSteps","ref","activeStepIndex","props","latestActiveStep","navigateToStep","index","currentStepContent","computed","stepsAmount","childrenStepsElements","buttonElement","isHorizontalVariant","allVisibleStepsElements","substeps","isStepActive","step","registerStep","stepState","stepperState","conditionalClasses","watch","emit","keyboardNavigationListeners","provide","readonly","uuid","_sfc_main$1","__default__","slots","useSlots","buttonComponent","stepContent","stepper","inject","stepContentValue","substepsButtonElements","buttonElement2","activeSubStepIndex","latestActiveSubStepIndex","navigateToSubstep","value","registerSubstep","stepState2","onMounted","isSubstep","isFocused","isActive","isSubstepsVisible","isCompleted","isDisabled","ariaCurrentValue","ariaDisabledValue","tabIndexValue"],"mappings":"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","x_google_ignoreList":[4]}

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.b9c8c99a.js";
+import { B as r, a as o } from "./chunks/index.f607a3f1.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -5,8 +5,8 @@ import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as E } from "./info-icon.js";
 import { B as O, a as v } from "./chunks/index.1645ffcb.js";
 import { BentoTag as M, BentoTagVariant as _ } from "./tag.js";
-import { C as L } from "./chunks/copy.982e1b19.js";
-import "./assets/index29.css";
+import { C as L } from "./chunks/copy.57f969d4.js";
+import "./assets/index26.css";
 const P = c({
   name: "bento-summary-grid",
   components: { GridLayout: h },

package/dist/tabs.js

@@ -3,7 +3,7 @@ import { E as N, T as m, a as I } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { B as k } from "./chunks/index.1645ffcb.js";
 import { g as B } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index23.css";
+import "./assets/index27.css";
 const R = p({
   props: {
     /**

package/dist/tag.js

@@ -2,9 +2,9 @@ import { defineComponent as c, computed as o } from "vue";
 import { B as d } from "./chunks/index.1645ffcb.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.c1114034.js";
-import { b as _ } from "./chunks/tooltip.0297fd5d.js";
+import { b as _ } from "./chunks/tooltip.f89cb0cd.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index30.css";
+import "./assets/index28.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -8,7 +8,7 @@ import { u as K } from "./chunks/i18n.155748d6.js";
 import { u as Q } from "./chunks/aria-label.ac9651a5.js";
 import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { E as ee } from "./chunks/error-message.7a5db7f6.js";
-import "./assets/index31.css";
+import "./assets/index29.css";
 var m = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t.BOTH = "both", t.NONE = "none", t))(m || {}), i = /* @__PURE__ */ ((t) => (t.CLEARABLE = "clearable", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(i || {}), r = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CHANGE = "change", t.CLEAR = "clear", t.ESCAPE_PRESSED = "escape-pressed", t.FOCUS = "focus", t.INPUT = "input", t))(r || {});
 let L = 0;
 const te = {

package/dist/timeline.js

@@ -4,14 +4,14 @@ import { a as H } from "./chunks/button.66df5734.js";
 import { B as J } from "./chunks/index.e722eb60.js";
 import { BentoTag as K } from "./tag.js";
 import { B as P } from "./chunks/index.1645ffcb.js";
-import { B as V, a as Z, S as Q } from "./chunks/index.b9c8c99a.js";
+import { B as V, a as Z, S as Q } from "./chunks/index.f607a3f1.js";
 import { C as W } from "./chunks/checkmark-circle-fill.2cfbb81b.js";
 import { C as X } from "./chunks/cross-circle-fill.d5e9ae44.js";
 import { r as G, e as ee, t as C, g as A } from "./chunks/index.f55fdc32.js";
 import { c as te, a as ie } from "./chunks/index.86453263.js";
 import { g as se } from "./chunks/unique-id.a2a2b458.js";
 import { u as ae } from "./chunks/i18n.155748d6.js";
-import "./assets/index32.css";
+import "./assets/index30.css";
 var O = 1e3 * 60, y = 60 * 24, D = y * 30, F = y * 365;
 function U(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -5,7 +5,7 @@ import { a as x } from "./chunks/button.66df5734.js";
 import { B as S } from "./chunks/index.1645ffcb.js";
 import { u as w } from "./chunks/use-has-slot.6052d56a.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index40.css";
+import "./assets/index31.css";
 const $ = {
   "en-US": {
     dismiss: "Dismiss"