@adyen/bento-vue3 1.91.0 → 1.92.1

package/dist/chunks/{button-actions-with-menu.BKdNXYgU.js.map → button-actions-with-menu.KaWdHibo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.BKdNXYgU.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n        actionsLayout: 'buttons-end',\n        disableResponsiveBehavior: false,\n        displayedActions: undefined,\n        inverse: false,\n        hideDisplayedActionsBreakpoint: 0,\n        menuPosition: 'bottom-start',\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,gDC4CIa,IAAA,CAAA;;;;;;;;;;;;;AA5FA,UAAApB,IAAAqB,GASAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAlB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAD,EAAAvB,GAAA,kBAAA;AAAA,MACyC,QAAA8B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAA0B,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIrB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAoC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.KaWdHibo.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n        actionsLayout: 'buttons-end',\n        disableResponsiveBehavior: false,\n        displayedActions: undefined,\n        inverse: false,\n        hideDisplayedActionsBreakpoint: 0,\n        menuPosition: 'bottom-start',\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,gDC4CIa,IAAA,CAAA;;;;;;;;;;;;;AA5FA,UAAApB,IAAAqB,GASAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAlB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAD,EAAAvB,GAAA,kBAAA;AAAA,MACyC,QAAA8B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAA0B,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIrB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAoC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.DLiM8KZL.js → button-actions.7Oi2Ra4p.js}

@@ -1,14 +1,14 @@
-import { defineComponent as $, useSlots as q, computed as g, openBlock as l, createBlock as h, withModifiers as z, normalizeClass as F, createSlots as V, withCtx as b, renderSlot as w, unref as p, createElementVNode as K, createCommentVNode as I, mergeProps as Y, renderList as Z, normalizeProps as Se, guardReactiveProps as $e, resolveComponent as S, createVNode as O, createTextVNode as G, toDisplayString as U, onMounted as Q, onUnmounted as fe, useAttrs as Le, inject as P, ref as v, toRefs as Te, Transition as me, createElementBlock as C, Teleport as Me, resolveDynamicComponent as H, toHandlers as ne, withKeys as T, Fragment as X, watch as pe, nextTick as x, toRef as ve, normalizeStyle as be, provide as Ne } from "vue";
+import { defineComponent as L, useSlots as q, computed as y, openBlock as l, createBlock as h, withModifiers as z, normalizeClass as F, createSlots as V, withCtx as b, renderSlot as w, unref as p, createElementVNode as K, createCommentVNode as I, mergeProps as Y, renderList as Z, normalizeProps as Se, guardReactiveProps as Le, resolveComponent as S, createVNode as O, createTextVNode as G, toDisplayString as U, onMounted as Q, onUnmounted as fe, useAttrs as $e, inject as P, ref as v, toRefs as Te, Transition as me, createElementBlock as C, Teleport as Me, resolveDynamicComponent as H, toHandlers as ne, withKeys as T, Fragment as X, watch as pe, nextTick as x, toRef as ve, normalizeStyle as be, provide as Ne } from "vue";
 import { B as E } from "./button.DWF7FSIw.js";
 import { B as we } from "./loading-indicator.BPol9I84.js";
 import { C as Re } from "./cross-circle-fill.BWCKKn0E.js";
 import { C as Ae } from "./checkmark-circle-fill.DugX5fbG.js";
 import { u as oe } from "./use-has-slot.CyMiImRQ.js";
 import { u as he } from "./index.B875RXHM.js";
-import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as ye, D as De } from "./divider.BIY84UH7.js";
+import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as ge, D as De } from "./divider.BIY84UH7.js";
 import { C as Pe } from "./cross.CCHdi6v3.js";
-import { B as ge, c as ae, p as Fe } from "./typography.B3J6_tYk.js";
+import { B as ye, c as ae, p as Fe } from "./typography.B3J6_tYk.js";
 import { a as We, P as Ke, b as Ve } from "./popper-container.DMN8n5iC.js";
 import { u as Ue } from "./aria-label.CaUURpnB.js";
 import { o as je } from "./on-click-outside.BgIzQ2G1.js";
@@ -39,7 +39,7 @@ const Ce = {
   "data-testid": "loading-button-rotating-icon"
 }, Qe = {
   i18n: { messages: Ce }
-}, xe = /* @__PURE__ */ $({
+}, xe = /* @__PURE__ */ L({
   ...Qe,
   __name: "loading-button",
   props: {
@@ -91,14 +91,14 @@ const Ce = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const i = e, o = t, u = q(), m = oe(u), { t: r } = he({ messages: Ce }), c = g(() => ({
+    const i = e, o = t, u = q(), m = oe(u), { t: r } = he({ messages: Ce }), c = y(() => ({
       [`b-loading-button--${i.variant}-${N.LOADING}`]: i.state === N.LOADING && !i.disabled,
       "b-loading-button--loading": i.state === N.LOADING && !i.disabled,
       [`b-loading-button--${i.variant}-${N.SUCCESS}`]: i.state === N.SUCCESS,
       "b-loading-button--inverse": i.inverse
-    })), f = g(
+    })), f = y(
       () => i.variant === "primary" && !i.inverse || i.variant !== "primary" && i.inverse
-    ), a = g(
+    ), a = y(
       () => i.critical && i.state === N.START || i.state === N.FAIL
     ), s = (d) => {
       d.stopPropagation(), i.state !== N.LOADING && o("click", d);
@@ -144,7 +144,7 @@ const Ce = {
       } : void 0
     ]), 1032, ["critical", "variant", "condensed", "disabled", "inverse", "class"]));
   }
-}), et = /* @__PURE__ */ L(xe, [["__scopeId", "data-v-e68a786b"]]), tt = {}, nt = /* @__PURE__ */ $({
+}), et = /* @__PURE__ */ $(xe, [["__scopeId", "data-v-e68a786b"]]), tt = {}, nt = /* @__PURE__ */ L({
   ...tt,
   __name: "toggle-button",
   props: {
@@ -188,9 +188,9 @@ const Ce = {
   },
   emits: ["click", "update:toggled"],
   setup(e, { emit: t }) {
-    const i = e, o = t, u = g(
+    const i = e, o = t, u = y(
       () => i.variant === "tertiary" ? "tertiary-with-background" : i.variant
-    ), m = g(() => ({
+    ), m = y(() => ({
       "b-toggle-button--condensed": i?.condensed,
       [`b-toggle-button--${u.value}-toggled`]: i.toggled,
       "b-toggle-button--inverse": i.inverse
@@ -210,12 +210,12 @@ const Ce = {
       Z(p(c), (d, n) => ({
         name: n,
         fn: b(() => [
-          w(a.$slots, n, Se($e(f(n))), void 0, !0)
+          w(a.$slots, n, Se(Le(f(n))), void 0, !0)
         ])
       }))
     ]), 1040, ["aria-expanded", "aria-pressed", "condensed", "class", "disabled", "inverse", "variant"]));
   }
-}), ot = /* @__PURE__ */ L(nt, [["__scopeId", "data-v-f1b10e5f"]]), st = $({
+}), ot = /* @__PURE__ */ $(nt, [["__scopeId", "data-v-f1b10e5f"]]), st = L({
   name: "bento-popover-dismiss-button",
   components: { BentoButton: E, CrossIcon: Pe },
   props: {
@@ -227,7 +227,7 @@ const Ce = {
   setup(e) {
     return {
       // Values
-      conditionalClass: g(() => ({ "b-popover-dismiss-button--on-image": e.onImage }))
+      conditionalClass: y(() => ({ "b-popover-dismiss-button--on-image": e.onImage }))
     };
   }
 });
@@ -244,8 +244,8 @@ function it(e, t, i, o, u, m) {
     _: 1
   }, 8, ["class"]);
 }
-const ue = /* @__PURE__ */ L(st, [["render", it], ["__scopeId", "data-v-424ecdaa"]]), at = $({
-  components: { BentoTypography: ge },
+const ue = /* @__PURE__ */ $(st, [["render", it], ["__scopeId", "data-v-424ecdaa"]]), at = L({
+  components: { BentoTypography: ye },
   props: {
     /**
      * Indicates if the popover contains an image.
@@ -257,7 +257,7 @@ const ue = /* @__PURE__ */ L(st, [["render", it], ["__scopeId", "data-v-424ecdaa
     title: { type: String, default: null }
   },
   setup(e) {
-    const t = g(() => !e.isImageTitle), i = g(
+    const t = y(() => !e.isImageTitle), i = y(
       () => e.isImageTitle ? ae.SUBTITLE : ae.BODY
     );
     return {
@@ -280,7 +280,7 @@ function lt(e, t, i, o, u, m) {
     _: 1
   }, 8, ["strongest", "variant"]);
 }
-const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
+const rt = /* @__PURE__ */ $(at, [["render", lt]]), ut = (e, t, i = {}) => {
   let o;
   Q(() => {
     o = je(e, t, i);
@@ -296,11 +296,11 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
 }, vt = {
   key: 1,
   class: "b-popover__header"
-}, bt = { class: "b-popover__header-title" }, ht = { key: 0 }, yt = {
+}, bt = { class: "b-popover__header-title" }, ht = { key: 0 }, gt = {
   key: 3,
   class: "b-popover__footer"
-}, gt = {}, _t = /* @__PURE__ */ $({
-  ...gt,
+}, yt = {}, _t = /* @__PURE__ */ L({
+  ...yt,
   __name: "popover",
   props: {
     actions: { default: void 0 },
@@ -326,7 +326,7 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
   },
   emits: ["dismiss", "placement"],
   setup(e, { emit: t }) {
-    const o = e, u = t, m = q(), r = Le(), c = g(() => ({
+    const o = e, u = t, m = q(), r = $e(), c = y(() => ({
       id: r.id?.toString(),
       role: r?.role === null ? void 0 : We.POPOVER
     })), f = P(ft, 2), a = v(r["aria-label"]), { ariaLabel: s, title: d } = Te(o), n = Ue({
@@ -334,14 +334,14 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
       // TODO: take this line away when the aria-label props is removed
       label: s,
       defaultFallback: d
-    }), k = P(ct, !1) || P(dt, !1), B = g(() => ({
+    }), k = P(ct, !1) || P(dt, !1), B = y(() => ({
       "b-popover--small": o.small && !o.large,
       "b-popover--with-divider": !!o.divider,
       "b-popover--large": o.large && !o.small,
       "b-popover--fit-content": o.fitContent,
       "b-popover--without-space": o.withoutSpace,
       "b-popover--overflow-visible": o.overflowVisible || k
-    })), W = g(() => ({
+    })), W = y(() => ({
       "b-popover__content--with-title": !!o.title
     })), j = () => u("dismiss"), R = oe(m);
     return (_, A) => (l(), h(me, { name: "b-popover__animation" }, {
@@ -391,7 +391,7 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
             }, [
               w(_.$slots, "default", {}, void 0, !0)
             ], 2)) : I("", !0),
-            _.actions ? (l(), C("div", yt, [
+            _.actions ? (l(), C("div", gt, [
               O(en, {
                 actions: _.actions,
                 layout: _.actionsLayout
@@ -404,7 +404,7 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
       _: 3
     }));
   }
-}), Ct = /* @__PURE__ */ L(_t, [["__scopeId", "data-v-84ebb43a"]]), kt = /* @__PURE__ */ Symbol("modal injection key"), It = /* @__PURE__ */ Symbol("sidepanel children element injection key"), Bt = /* @__PURE__ */ Symbol("modal fullscreen children element injection key"), En = /* @__PURE__ */ Symbol("modal fullscreen title id injection key"), Sn = /* @__PURE__ */ Symbol("modal fullscreen close injection key"), Ot = $({
+}), Ct = /* @__PURE__ */ $(_t, [["__scopeId", "data-v-84ebb43a"]]), kt = /* @__PURE__ */ Symbol("modal injection key"), It = /* @__PURE__ */ Symbol("sidepanel children element injection key"), Bt = /* @__PURE__ */ Symbol("modal fullscreen children element injection key"), En = /* @__PURE__ */ Symbol("modal fullscreen title id injection key"), Sn = /* @__PURE__ */ Symbol("modal fullscreen close injection key"), Ot = L({
   name: "teleport",
   props: {
     to: {
@@ -440,16 +440,11 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
     to: "maybeMove",
     where: "maybeMove",
     disabled(e) {
-      e ? (this.disable(), this.$nextTick(() => {
-        this.teardownObserver();
-      })) : (this.bootObserver(), this.move());
     }
   },
   mounted() {
-    this.nodes = Array.from(this.$el.childNodes), this.disabled || this.bootObserver(), this.maybeMove();
   },
   beforeDestroy() {
-    this.nodes = this.getComponentChildrenNode(), this.disable(), this.teardownObserver();
   },
   methods: {
     // Using a fragment is faster because it'll trigger only a single reflow
@@ -469,7 +464,6 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
       this.where === "before" ? this.parent.prepend(this.getFragment()) : this.parent.appendChild(this.getFragment());
     },
     maybeMove() {
-      this.disabled || this.move();
     },
     onMutations(e) {
       let t = !1;
@@ -503,7 +497,7 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
       return [];
     }
   }
-}), Et = /* @__PURE__ */ $({
+}), Et = /* @__PURE__ */ L({
   ...Ot,
   setup(e) {
     return (t, i) => p(_e) ? (l(), C("div", {
@@ -521,13 +515,13 @@ const rt = /* @__PURE__ */ L(at, [["render", lt]]), ut = (e, t, i = {}) => {
       w(t.$slots, "default", {}, void 0, !0)
     ], 8, ["to", "where", "disabled", "class"]));
   }
-}), St = /* @__PURE__ */ L(Et, [["__scopeId", "data-v-acbda3aa"]]);
+}), St = /* @__PURE__ */ $(Et, [["__scopeId", "data-v-6ab001e8"]]);
 let de = 0;
-const $t = {
+const Lt = {
   beforeCreate() {
     this.uuid = de.toString(), de += 1;
   }
-}, Lt = { key: 0 };
+}, $t = { key: 0 };
 function Tt(e, t, i, o, u, m) {
   return l(), C("svg", Y({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
@@ -536,7 +530,7 @@ function Tt(e, t, i, o, u, m) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (l(), C("title", Lt, U(e.$attrs["svg-title"]), 1)) : I("", !0),
+    e.$attrs["svg-title"] ? (l(), C("title", $t, U(e.$attrs["svg-title"]), 1)) : I("", !0),
     t[0] || (t[0] = K("path", {
       fill: "#001222",
       d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z"
@@ -551,9 +545,9 @@ function Tt(e, t, i, o, u, m) {
     }, null, -1))
   ], 16);
 }
-const Mt = /* @__PURE__ */ L($t, [["render", Tt]]), Nt = $({
+const Mt = /* @__PURE__ */ $(Lt, [["render", Tt]]), Nt = L({
   name: "menu-item",
-  components: { BaseButton: He, BentoTypography: ge, ChevronRightIcon: Je },
+  components: { BaseButton: He, BentoTypography: ye, ChevronRightIcon: Je },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -623,10 +617,10 @@ const Mt = /* @__PURE__ */ L($t, [["render", Tt]]), Nt = $({
   },
   emits: [re.CLICK],
   setup(e, { emit: t }) {
-    const o = g(() => ({
+    const o = y(() => ({
       "b-menu-item--critical": e.critical,
       "b-menu-item--indent": e.indent
-    })), u = g(() => ze(e.secondaryText, 10));
+    })), u = y(() => ze(e.secondaryText, 10));
     return {
       // Values
       conditionalClasses: o,
@@ -692,12 +686,12 @@ function wt(e, t, i, o, u, m) {
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const ke = /* @__PURE__ */ L(Nt, [["render", wt], ["__scopeId", "data-v-9dace5ac"]]);
+const ke = /* @__PURE__ */ $(Nt, [["render", wt], ["__scopeId", "data-v-9dace5ac"]]);
 ({ ...Ve });
 var D = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(D || {});
 const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
   name: "bento-menu-list-container"
-}, Dt = /* @__PURE__ */ $({
+}, Dt = /* @__PURE__ */ L({
   ...At,
   setup(e) {
     const t = v(), i = v({}), o = P(Rt, !1);
@@ -716,7 +710,7 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
       w(u.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), Ie = /* @__PURE__ */ L(Dt, [["__scopeId", "data-v-9ef14d73"]]), se = {
+}), Ie = /* @__PURE__ */ $(Dt, [["__scopeId", "data-v-9ef14d73"]]), se = {
   "de-DE": { backButton: "Zurück", menuButton: "Menü öffnen" },
   "en-GB": { backButton: "Go back", menuButton: "Open menu" },
   "en-US": { backButton: "Go back", menuButton: "Open menu" },
@@ -727,10 +721,10 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
   "ja-JP": { backButton: "戻る", menuButton: "メニューを開く" },
   "pt-BR": { backButton: "Voltar", menuButton: "Abrir menu" },
   "zh-CN": { backButton: "返回", menuButton: "打开菜单" }
-}, Pt = $({
+}, Pt = L({
   i18n: { messages: se },
   name: "sub-menu-item-list",
-  components: { BentoDivider: ye, MenuItem: ke, MenuListContainer: Ie },
+  components: { BentoDivider: ge, MenuItem: ke, MenuListContainer: Ie },
   props: {
     items: {
       type: Array,
@@ -743,7 +737,7 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
   },
   emits: [D.CLOSE, D.BACK],
   setup(e, { emit: t }) {
-    const i = v(null), o = v(0), u = v(e.items.length), m = () => t(D.CLOSE), r = () => t(D.BACK), c = g(() => {
+    const i = v(null), o = v(0), u = v(e.items.length), m = () => t(D.CLOSE), r = () => t(D.BACK), c = y(() => {
       const d = e.items?.map((n) => ({
         ...n,
         indent: !n.icon,
@@ -840,7 +834,7 @@ function Ft(e, t, i, o, u, m) {
     _: 1
   });
 }
-const Wt = /* @__PURE__ */ L(Pt, [["render", Ft], ["__scopeId", "data-v-e1de172e"]]), Be = 350, Oe = 150;
+const Wt = /* @__PURE__ */ $(Pt, [["render", Ft], ["__scopeId", "data-v-e1de172e"]]), Be = 350, Oe = 150;
 function Ee(e) {
   return Math.max(Oe, Math.min(e, Be));
 }
@@ -863,17 +857,17 @@ function Kt(e, t, i, o) {
     } else
       u.value = 0, m.value = 0;
   });
-  const c = g(() => o?.value ? Ee(o.value) : 0);
-  return { computedStyle: g(() => {
+  const c = y(() => o?.value ? Ee(o.value) : 0);
+  return { computedStyle: y(() => {
     const a = {
       width: c.value > 0 ? `${c.value}px` : "max-content"
     };
     return i.value && (m.value > 0 && (a.height = `${m.value}px`), u.value > 0 && (a.width = `${u.value}px`)), a;
   }) };
 }
-const Vt = $({
+const Vt = L({
   name: "menu-item-list",
-  components: { BentoDivider: ye, MenuItem: ke, MenuListContainer: Ie, SubMenuItemList: Wt },
+  components: { BentoDivider: ge, MenuItem: ke, MenuListContainer: Ie, SubMenuItemList: Wt },
   props: {
     /**
      * The data to be displayed in the list
@@ -913,26 +907,26 @@ const Vt = $({
   },
   emits: [D.CLOSE, "menu-item-click"],
   setup(e, { emit: t, expose: i }) {
-    const o = v(null), u = v(null), m = v(null), r = v(null), c = v(!1), f = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), s = v(0), d = v(e.data.length - 1), n = g(() => e.data.some((M) => M.icon)), k = g(() => e.indentItems || n.value ? e.data.map((M) => {
-      let y = !1;
-      return M.icon || (y = !0), {
+    const o = v(null), u = v(null), m = v(null), r = v(null), c = v(!1), f = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), s = v(0), d = v(e.data.length - 1), n = y(() => e.data.some((M) => M.icon)), k = y(() => e.indentItems || n.value ? e.data.map((M) => {
+      let g = !1;
+      return M.icon || (g = !0), {
         ...M,
-        indent: y
+        indent: g
       };
     }) : e.data), B = async () => {
       await x(), u.value?.children[a.value]?.children[0]?.focus();
-    }, W = () => t(D.CLOSE), j = (M, y) => {
+    }, W = () => t(D.CLOSE), j = (M, g) => {
       if (M.items) {
-        f.value = y, c.value = !0;
+        f.value = g, c.value = !0;
         return;
       }
-      f.value = y, c.value = !1, !M.skipClose && e.closeMenuOnItemSelect !== !1 && W(), t("menu-item-click");
+      f.value = g, c.value = !1, !M.skipClose && e.closeMenuOnItemSelect !== !1 && W(), t("menu-item-click");
     }, R = () => {
       a.value > 0 ? (a.value -= 1, k.value[a.value].disabled && R()) : a.value = d.value, B();
     }, _ = () => {
       a.value < d.value ? (a.value += 1, k.value[a.value].disabled && _()) : a.value = 0, B();
-    }, A = (M, y) => {
-      M?.items?.length && (f.value = y, c.value = !0);
+    }, A = (M, g) => {
+      M?.items?.length && (f.value = g, c.value = !0);
     }, J = () => {
       f.value && c.value && (f.value = null, c.value = !1);
     }, ee = () => {
@@ -1032,10 +1026,10 @@ function jt(e, t, i, o, u, m) {
     _: 1
   }, 8, ["style"]);
 }
-const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73"]]), Yt = /* @__PURE__ */ Symbol("menu inverse style injection key"), Jt = {
+const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73"]]), Yt = /* @__PURE__ */ Symbol("menu inverse style injection key"), Jt = {
   i18n: { messages: se },
   name: "bento-menu"
-}, Ht = /* @__PURE__ */ $({
+}, Ht = /* @__PURE__ */ L({
   ...Jt,
   props: {
     button: { default: () => ({
@@ -1055,11 +1049,11 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
   setup(e, { expose: t, emit: i }) {
     const o = e, u = i, m = q(), r = oe(m), { t: c } = he({ messages: se }), f = v(null), a = v(null), s = v(!1), d = v(!1), n = v(null), k = Ge("menu"), B = P(Yt, v(!1));
     Ne(De, B);
-    const W = g(() => ({
+    const W = y(() => ({
       "b-menu--inverse": B.value
-    })), j = g(
+    })), j = y(
       () => o.menuWidth ? { width: `${Ee(o.menuWidth)}px` } : null
-    ), R = g(() => {
+    ), R = y(() => {
       if (o?.button)
         return {
           variant: "secondary",
@@ -1067,14 +1061,14 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
         };
     }), _ = () => {
       s.value = !0, u(D.OPEN);
-    }, A = async (y = o.revertFocusToButton) => {
-      s.value && (s.value = !1, y && (await x(), f.value?.$el?.focus()), u(D.CLOSE));
-    }, J = (y) => {
-      y.stopPropagation(), s.value ? A() : _();
-    }, ee = (y) => {
-      y.preventDefault(), d.value = !1, o.disableArrowDownOpeningMenu || _();
-    }, te = (y) => {
-      y.preventDefault(), d.value = !0, _();
+    }, A = async (g = o.revertFocusToButton) => {
+      s.value && (s.value = !1, g && (await x(), f.value?.$el?.focus()), u(D.CLOSE));
+    }, J = (g) => {
+      g.stopPropagation(), s.value ? A() : _();
+    }, ee = (g) => {
+      g.preventDefault(), d.value = !1, o.disableArrowDownOpeningMenu || _();
+    }, te = (g) => {
+      g.preventDefault(), d.value = !0, _();
     }, M = () => {
       u("menu-item-click");
     };
@@ -1096,7 +1090,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
       r("iconRight") && Fe(
         '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
       );
-    }), (y, ie) => (l(), C("div", {
+    }), (g, ie) => (l(), C("div", {
       class: F([W.value, "b-menu"]),
       "data-testid": "menu",
       onKeydown: [
@@ -1119,10 +1113,10 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
         !p(r)("default") || p(r)("iconLeft") ? {
           name: "iconLeft",
           fn: b(() => [
-            w(y.$slots, "iconLeft", {}, () => [
+            w(g.$slots, "iconLeft", {}, () => [
               O(p(Mt), {
-                title: p(c)("menuButton")
-              }, null, 8, ["title"])
+                "svg-title": p(c)("menuButton")
+              }, null, 8, ["svg-title"])
             ], !0)
           ]),
           key: "0"
@@ -1130,7 +1124,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
         p(r)("default") ? {
           name: "default",
           fn: b(() => [
-            w(y.$slots, "default", {}, void 0, !0)
+            w(g.$slots, "default", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
@@ -1144,7 +1138,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
       ]), 1040, ["aria-controls", "toggled", "inverse"]),
       f.value ? (l(), h(p(St), {
         key: 0,
-        disabled: !y.teleport
+        disabled: !g.teleport
       }, {
         default: b(() => [
           f.value ? (l(), h(Ct, {
@@ -1157,8 +1151,8 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
             class: "b-menu__popover",
             style: be(j.value),
             "target-element": f.value,
-            position: y.menuPosition,
-            "fixed-positioning": y.menuFixedPositioning,
+            position: g.menuPosition,
+            "fixed-positioning": g.menuFixedPositioning,
             "fallback-position": [
               "bottom-start",
               "bottom-end",
@@ -1169,17 +1163,17 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
               "left-start",
               "left-end"
             ],
-            teleport: y.teleport,
+            teleport: g.teleport,
             "without-space": ""
           }, {
             default: b(() => [
               O(Gt, {
                 ref_key: "menuItemListRef",
                 ref: a,
-                "close-menu-on-item-select": y.closeMenuOnItemSelect,
-                data: y.data,
+                "close-menu-on-item-select": g.closeMenuOnItemSelect,
+                data: g.data,
                 "focus-last-element": d.value,
-                "popover-width": y.menuWidth,
+                "popover-width": g.menuWidth,
                 onClose: A,
                 onMenuItemClick: M
               }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element", "popover-width"])
@@ -1191,7 +1185,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
       }, 8, ["disabled"])) : I("", !0)
     ], 34));
   }
-}), zt = /* @__PURE__ */ L(Ht, [["__scopeId", "data-v-eee5aa88"]]), Xt = /* @__PURE__ */ Symbol(
+}), zt = /* @__PURE__ */ $(Ht, [["__scopeId", "data-v-881b48af"]]), Xt = /* @__PURE__ */ Symbol(
   "button actions with menu container injection key"
 ), qt = 242, ce = parseInt(qe, 10), Zt = (e, t, i) => {
   const o = v(0);
@@ -1200,7 +1194,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
     buttonActionsWithMenu: v(null),
     menu: v(null),
     stackButtons: v(!1)
-  }), f = g(() => m.value ?? e.value), a = g(() => r.value ? [...t.value, r.value.$el] : t.value), s = (d) => {
+  }), f = y(() => m.value ?? e.value), a = y(() => r.value ? [...t.value, r.value.$el] : t.value), s = (d) => {
     const n = a.value?.reduce(
       (B, W) => B + W.clientWidth + ce,
       -ce - 1
@@ -1223,7 +1217,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
   }), fe(() => {
     u?.disconnect();
   }), c;
-}, Qt = {}, xt = /* @__PURE__ */ $({
+}, Qt = {}, xt = /* @__PURE__ */ L({
   ...Qt,
   __name: "button-actions",
   props: {
@@ -1232,10 +1226,10 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
     layout: { default: "buttons-end" }
   },
   setup(e) {
-    const t = e, i = v(null), o = v(null), u = Zt(i, o, ve(t, "actions")), m = g(() => t.actions.slice().reverse()), r = (s) => {
+    const t = e, i = v(null), o = v(null), u = Zt(i, o, ve(t, "actions")), m = y(() => t.actions.slice().reverse()), r = (s) => {
       const d = t.actions.length - 1;
       return s === d ? "primary" : "secondary";
-    }, c = g(() => ({
+    }, c = y(() => ({
       [`b-button-actions--${t.layout}`]: !0,
       "b-button-actions--stacked-buttons": u.value
     })), f = (s) => s?.event !== void 0 ? {
@@ -1357,7 +1351,7 @@ const Gt = /* @__PURE__ */ L(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
       ], 2)
     ], 512));
   }
-}), en = /* @__PURE__ */ L(xt, [["__scopeId", "data-v-1a12c479"]]);
+}), en = /* @__PURE__ */ $(xt, [["__scopeId", "data-v-1a12c479"]]);
 export {
   en as B,
   Rt as D,
@@ -1381,4 +1375,4 @@ export {
   ct as m,
   ut as u
 };
-//# sourceMappingURL=button-actions.DLiM8KZL.js.map
+//# sourceMappingURL=button-actions.7Oi2Ra4p.js.map