@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/list-item.Cngxa9qN.js

@@ -0,0 +1,166 @@
+import { defineComponent as P, computed as r, ref as C, watch as L, provide as H, useSlots as F, inject as E } from "vue";
+import { l as R } from "./index.CL3TXc0a.js";
+import { u as k, a as U, B as A } from "./draggable-handle.g2BFN3G1.js";
+import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as $ } from "./chevron-right-small.BKeb_dRX.js";
+import { B as z } from "./status.DJ1Dfh5s.js";
+import { B as N } from "./tag.BC7FFENr.js";
+import { B as j } from "./typography.D1OZJbEa.js";
+import { u as G } from "./use-has-slot.C9lQZ6nz.js";
+import { u as J } from "./index.CPOlyau9.js";
+import "../assets/list-item.css";
+const K = {
+  "de-DE": { youHaveMovedFromPositionToPosition: "Sie haben {itemLabel} von Position {indexOrigin} an Position {indexTarget} von {total} verschoben." },
+  "en-GB": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
+  "en-US": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
+  "es-419": { youHaveMovedFromPositionToPosition: "Has movido {itemLabel} de la posición {indexOrigin} a la posición {indexTarget} de {total}." },
+  "es-ES": { youHaveMovedFromPositionToPosition: "Has movido {itemLabel} de la posición {indexOrigin} a la posición {indexTarget} de {total}." },
+  "es-MX": { youHaveMovedFromPositionToPosition: "Has movido {itemLabel} de la posición {indexOrigin} a la posición {indexTarget} de {total}." },
+  "fr-FR": { youHaveMovedFromPositionToPosition: "Vous avez déplacé {itemLabel} de la position {indexOrigin} à la position {indexTarget} sur {total}." },
+  "it-IT": { youHaveMovedFromPositionToPosition: "Hai spostato {itemLabel} dalla posizione {indexOrigin} alla posizione {indexTarget} di {total}." },
+  "ja-JP": { youHaveMovedFromPositionToPosition: "{itemLabel} を {indexOrigin} の位置から {total} の {indexTarget} の位置に移動しました。" },
+  "pt-BR": { youHaveMovedFromPositionToPosition: "Você moveu {itemLabel} da posição {indexOrigin} para a posição {indexTarget} de {total}." },
+  "zh-CN": { youHaveMovedFromPositionToPosition: "您已将 {itemLabel} 从 {indexOrigin} 位置移动到 {indexTarget} 位置（共 {total} 个位置）。" }
+}, S = /* @__PURE__ */ Symbol("list draggable injection key"), Y = {
+  name: "bento-list",
+  inheritAttrs: !1,
+  i18n: { messages: K }
+}, V = /* @__PURE__ */ P({
+  ...Y,
+  props: {
+    type: { default: "unordered" },
+    draggable: { type: Boolean, default: !1 },
+    draggableOptions: { default: () => ({}) }
+  },
+  emits: ["reorder"],
+  setup(p, { emit: e }) {
+    const o = p, t = ".b-list-item", f = r(() => o.type === "ordered" ? "ol" : "ul"), i = C(null), a = C([]), m = r(() => o.draggable), d = () => i.value ? Array.from(i.value.children).filter((s) => s.matches(t)) : [], l = () => {
+      a.value = d();
+    };
+    L(
+      i,
+      (s) => {
+        if (!s) {
+          a.value = [];
+          return;
+        }
+        l();
+      },
+      { immediate: !0 }
+    ), R(i, l, { childList: !0 });
+    const g = (s) => s ? a.value.indexOf(s) : -1, _ = (s, n) => s?.querySelector("[data-list-item-label]")?.textContent?.trim() || `List item ${n + 1}`, v = (s, n) => {
+      if (!m.value)
+        return;
+      const u = d();
+      h({
+        itemLabel: _(u[n] ?? null, n),
+        fromIndex: s,
+        toIndex: n,
+        total: u.length,
+        announcement: o.draggableOptions?.dragAnnouncement
+      });
+    }, b = (s, n) => {
+      const u = d(), O = u[s], M = u[n];
+      s < n ? i.value.insertBefore(O, M.nextSibling) : i.value.insertBefore(O, M), l(), v(s, n), e("reorder", { oldIndex: s, newIndex: n });
+    }, I = r(() => ({
+      ...o.draggableOptions,
+      onSort: (s) => {
+        l(), s.oldIndex !== void 0 && s.newIndex !== void 0 && (v(s.oldIndex, s.newIndex), e("reorder", { oldIndex: s.oldIndex, newIndex: s.newIndex })), o.draggableOptions?.onSort?.(s);
+      }
+    })), { announcementMessage: y, announceMove: h } = k(), { moveItemUp: T, moveItemDown: c, moveItemTop: B, moveItemBottom: x, getDisabledMenus: w } = U(
+      i,
+      I,
+      {
+        getItemCount: () => a.value.length,
+        getItemIndex: g,
+        onMoveItem: b
+      }
+    );
+    return H(S, {
+      isDraggable: m,
+      moveItemUp: T,
+      moveItemDown: c,
+      moveItemTop: B,
+      moveItemBottom: x,
+      getDisabledMenus: w
+    }), { __sfc: !0, ITEM_SELECTOR: t, props: o, emit: e, listElement: f, listRef: i, listItems: a, isDraggable: m, getListItems: d, syncListItems: l, getItemIndex: g, getItemLabel: _, announceMoveAt: v, moveItemDOM: b, computedDraggableOptions: I, announcementMessage: y, announceMove: h, moveItemUp: T, moveItemDown: c, moveItemTop: B, moveItemBottom: x, getDisabledMenus: w };
+  }
+});
+var X = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-list" }, [o(t.listElement, e._b({ ref: "listRef", tag: "component", staticClass: "b-list__list" }, "component", e.$attrs, !1), [e._t("default")], 2), t.isDraggable ? o("div", { staticClass: "b-list__announcement", attrs: { role: "status", "aria-live": "polite" } }, [e._v(" " + e._s(t.announcementMessage) + " ")]) : e._e()], 1);
+}, q = [], Q = /* @__PURE__ */ D(
+  V,
+  X,
+  q,
+  !1,
+  null,
+  "c2ccaf69"
+);
+const ue = Q.exports, W = {
+  "de-DE": { listItem: "Listenelement" },
+  "en-GB": { listItem: "list item" },
+  "en-US": { listItem: "list item" },
+  "es-419": { listItem: "elemento de la lista" },
+  "es-ES": { listItem: "elemento de lista" },
+  "es-MX": { listItem: "elemento de la lista" },
+  "fr-FR": { listItem: "élément de liste" },
+  "it-IT": { listItem: "elemento della lista" },
+  "ja-JP": { listItem: "リストアイテム" },
+  "pt-BR": { listItem: "item da lista" },
+  "zh-CN": { listItem: "列表项" }
+}, Z = {
+  name: "bento-list-item",
+  i18n: { messages: W }
+}, ee = /* @__PURE__ */ P({
+  ...Z,
+  props: {
+    label: null,
+    description: null,
+    draggableOptions: { default: null },
+    showStatus: { type: Boolean, default: !1 },
+    statusColor: { default: "blue" },
+    tag: { default: void 0 },
+    withChevron: { type: Boolean, default: !1 },
+    showTopDivider: { type: Boolean, default: !1 },
+    showBottomDivider: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "move-up", "move-down", "move-top", "move-bottom"],
+  setup(p, { emit: e }) {
+    const o = p, t = F(), f = G(t), i = C(null), a = E(S, null), { t: m } = J(), d = () => {
+      o.withChevron && e("click");
+    }, l = (c) => {
+      o.withChevron && (c.key === "Enter" || c.key === " ") && (c.preventDefault(), e("click"));
+    }, g = r(() => ({
+      "b-list-item__inner--clickable": o.withChevron,
+      "b-list-item__inner--top-divider": o.showTopDivider,
+      "b-list-item__inner--bottom-divider": o.showBottomDivider
+    })), _ = r(() => !!a?.isDraggable.value), v = r(() => o.draggableOptions?.label || o.label || m("listItem")), b = r(() => o.draggableOptions?.disabledMenus ? o.draggableOptions.disabledMenus : a?.getDisabledMenus(i.value));
+    return { __sfc: !0, slots: t, hasSlot: f, itemRef: i, draggableContext: a, t: m, props: o, emit: e, onItemClick: d, onItemKeydown: l, conditionalClasses: g, showDragHandle: _, dragHandleLabel: v, disabledMenus: b, moveItemUp: () => {
+      e("move-up"), (o.draggableOptions?.moveUp ?? (() => a?.moveItemUp(i.value)))();
+    }, moveItemDown: () => {
+      e("move-down"), (o.draggableOptions?.moveDown ?? (() => a?.moveItemDown(i.value)))();
+    }, moveItemTop: () => {
+      e("move-top"), (o.draggableOptions?.moveTop ?? (() => a?.moveItemTop(i.value)))();
+    }, moveItemBottom: () => {
+      e("move-bottom"), (o.draggableOptions?.moveBottom ?? (() => a?.moveItemBottom(i.value)))();
+    }, ChevronRightIcon: $, BentoDraggableHandle: A, BentoStatus: z, BentoTag: N, BentoTypography: j };
+  }
+});
+var te = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("li", { ref: "itemRef", staticClass: "b-list-item", on: { click: t.onItemClick, keydown: t.onItemKeydown } }, [o(t.BentoTypography, { staticClass: "b-list-item__inner", class: t.conditionalClasses, attrs: { el: "div", role: t.props.withChevron ? "button" : void 0, tabindex: t.props.withChevron ? 0 : void 0 } }, [t.hasSlot("image") ? o("div", { staticClass: "b-list-item__image" }, [e._t("image")], 2) : e._e(), t.showDragHandle ? o(t.BentoDraggableHandle, { attrs: { condensed: "", label: t.dragHandleLabel, "disabled-menus": t.disabledMenus, disabled: e.draggableOptions?.disabled }, on: { "move-up": t.moveItemUp, "move-down": t.moveItemDown, "move-top": t.moveItemTop, "move-bottom": t.moveItemBottom } }) : e._e(), t.hasSlot("start") ? o("div", { staticClass: "b-list-item__start" }, [t.hasSlot("start") ? e._t("start") : e._e()], 2) : e._e(), o("div", { staticClass: "b-list-item__content" }, [t.hasSlot("content") ? o("div", { staticClass: "b-list-item__label", attrs: { "data-list-item-label": "" } }, [e._t("content")], 2) : [o("div", { staticClass: "b-list-item__header" }, [t.props.label ? o(t.BentoTypography, { staticClass: "b-list-item__label", attrs: { "data-list-item-label": "", el: "span", stronger: "" } }, [e._v(" " + e._s(t.props.label) + " ")]) : e._e(), t.props.showStatus ? o(t.BentoStatus, { staticClass: "b-list-item__status", attrs: { variant: t.props.statusColor, "aria-hidden": "true" } }) : e._e(), t.props.tag ? o(t.BentoTag, e._b({ staticClass: "b-list-item__tag" }, "bento-tag", t.props.tag, !1)) : e._e()], 1), t.props.description ? o("span", { staticClass: "b-list-item__description" }, [e._v(" " + e._s(t.props.description) + " ")]) : e._e()]], 2), t.hasSlot("end") ? o("div", { staticClass: "b-list-item__end" }, [e._t("end")], 2) : e._e(), t.props.withChevron ? o(t.ChevronRightIcon, { staticClass: "b-list-item__chevron", attrs: { "aria-hidden": "true" } }) : e._e()], 1)], 1);
+}, oe = [], se = /* @__PURE__ */ D(
+  ee,
+  te,
+  oe,
+  !1,
+  null,
+  "3cc5daca"
+);
+const ge = se.exports;
+export {
+  ge as a,
+  ue as l
+};
+//# sourceMappingURL=list-item.Cngxa9qN.js.map

package/dist/chunks/{list-item.BiJMHR7b.js.map → list-item.Cngxa9qN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"list-item.BiJMHR7b.js","sources":["../../src/components/list/list.keys.ts","../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\nimport type { BentoDraggableDisabledMenus } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n\nexport interface BentoListDraggableContext {\n    isDraggable: ComputedRef<boolean>;\n    moveItemUp: (element: HTMLElement | null) => void;\n    moveItemDown: (element: HTMLElement | null) => void;\n    moveItemTop: (element: HTMLElement | null) => void;\n    moveItemBottom: (element: HTMLElement | null) => void;\n    getDisabledMenus: (element: HTMLElement | null) => BentoDraggableDisabledMenus;\n}\n\nexport const BENTO_LIST_DRAGGABLE_INJECTION_KEY = Symbol('list draggable injection key');\n","<template>\n    <div class=\"b-list\">\n        <component :is=\"listElement\" ref=\"listRef\" v-bind=\"$attrs\" class=\"b-list__list\">\n            <slot />\n        </component>\n\n        <div v-if=\"isDraggable\" class=\"b-list__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { useMutationObserver } from '@vueuse/core';\n    import { computed, provide, ref, watch } from 'vue';\n    import { useBentoDraggable } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from '@/components/draggable/composables/use-draggable-announcement/use-draggable-announcement';\n    import type { BentoDraggableOptions, BentoDraggableSortableEvent } from '@/components/draggable/draggable.types';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from './list.keys';\n    import type { BentoListDraggableContext } from './list.keys';\n    import type { BentoListProps } from './list.types';\n\n    // used for announcement composable\n    import draggableMessages from '@/components/draggable/composables/use-draggable-announcement/messages.json';\n\n    const ITEM_SELECTOR = '.b-list-item';\n\n    const props = defineProps({\n  type: { default: 'unordered' },\n  draggable: { type: Boolean, default: false },\n  draggableOptions: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"reorder\"]);\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n    const listRef = ref<HTMLElement | null>(null);\n    const listItems = ref<Array<HTMLElement>>([]);\n    const isDraggable = computed(() => props.draggable);\n\n    const getListItems = (): Array<HTMLElement> =>\n        listRef.value\n            ? (Array.from(listRef.value.children).filter(child => child.matches(ITEM_SELECTOR)) as Array<HTMLElement>)\n            : [];\n\n    const syncListItems = () => {\n        listItems.value = getListItems();\n    };\n\n    watch(\n        listRef,\n        newElement => {\n            if (!newElement) {\n                listItems.value = [];\n                return;\n            }\n\n            syncListItems();\n        },\n        { immediate: true }\n    );\n\n    useMutationObserver(listRef, syncListItems, { childList: true });\n\n    const getItemIndex = (el: HTMLElement | null) => (el ? listItems.value.indexOf(el) : -1);\n\n    const getItemLabel = (el: HTMLElement | null, fallbackIndex: number) =>\n        el?.querySelector('[data-list-item-label]')?.textContent?.trim() || `List item ${fallbackIndex + 1}`;\n\n    const announceMoveAt = (fromIndex: number, toIndex: number) => {\n        if (!isDraggable.value) {\n            return;\n        }\n\n        const items = getListItems();\n        announceMove({\n            itemLabel: getItemLabel(items[toIndex] ?? null, toIndex),\n            fromIndex,\n            toIndex,\n            total: items.length,\n            announcement: props.draggableOptions?.dragAnnouncement,\n        });\n    };\n\n    const moveItemDOM = (fromIndex: number, toIndex: number) => {\n        const items = getListItems();\n        const itemToMove = items[fromIndex];\n        const targetItem = items[toIndex];\n\n        if (fromIndex < toIndex) {\n            listRef.value!.insertBefore(itemToMove, targetItem.nextSibling);\n        } else {\n            listRef.value!.insertBefore(itemToMove, targetItem);\n        }\n\n        syncListItems();\n        announceMoveAt(fromIndex, toIndex);\n        emit('reorder', { oldIndex: fromIndex, newIndex: toIndex });\n    };\n\n    const computedDraggableOptions = computed<BentoDraggableOptions>(() => ({\n        ...props.draggableOptions,\n        onSort: (event: BentoDraggableSortableEvent) => {\n            syncListItems();\n            if (event.oldIndex !== undefined && event.newIndex !== undefined) {\n                announceMoveAt(event.oldIndex, event.newIndex);\n                emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex });\n            }\n            props.draggableOptions?.onSort?.(event);\n        },\n    }));\n\n    const { announcementMessage, announceMove } = useDraggableAnnouncement();\n\n    const { moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus } = useBentoDraggable(\n        listRef,\n        computedDraggableOptions,\n        {\n            getItemCount: () => listItems.value.length,\n            getItemIndex,\n            onMoveItem: moveItemDOM,\n        }\n    );\n\n    provide<BentoListDraggableContext>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, {\n        isDraggable,\n        moveItemUp,\n        moveItemDown,\n        moveItemTop,\n        moveItemBottom,\n        getDisabledMenus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list',\n        inheritAttrs: false,\n        i18n: { messages: draggableMessages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li ref=\"itemRef\" class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <bento-draggable-handle\n                v-if=\"showDragHandle\"\n                condensed\n                :label=\"dragHandleLabel\"\n                :disabled-menus=\"disabledMenus\"\n                :disabled=\"draggableOptions?.disabled\"\n                @move-up=\"moveItemUp\"\n                @move-down=\"moveItemDown\"\n                @move-top=\"moveItemTop\"\n                @move-bottom=\"moveItemBottom\"\n            />\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot v-if=\"hasSlot('start')\" name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\" data-list-item-label>\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography\n                            v-if=\"props.label\"\n                            class=\"b-list-item__label\"\n                            data-list-item-label\n                            el=\"span\"\n                            stronger\n                        >\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoDraggableHandle } from '@/components/draggable/components/draggable-handle';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from '../../list.keys';\n    import type { BentoListDraggableContext } from '../../list.keys';\n    import type { BentoListItemProps } from './list-item.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const itemRef = ref<HTMLElement | null>(null);\n    const draggableContext = inject<BentoListDraggableContext | null>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  draggableOptions: { default: null },\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\", \"move-up\", \"move-down\", \"move-top\", \"move-bottom\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n\n    const showDragHandle = computed(() => Boolean(draggableContext?.isDraggable.value));\n    const dragHandleLabel = computed(() => props.draggableOptions?.label || props.label || t('listItem'));\n    const disabledMenus = computed(() => {\n        if (props.draggableOptions?.disabledMenus) {\n            return props.draggableOptions.disabledMenus;\n        }\n\n        return draggableContext?.getDisabledMenus(itemRef.value);\n    });\n\n    const moveItemUp = () => {\n        emit('move-up');\n        (props.draggableOptions?.moveUp ?? (() => draggableContext?.moveItemUp(itemRef.value)))();\n    };\n\n    const moveItemDown = () => {\n        emit('move-down');\n        (props.draggableOptions?.moveDown ?? (() => draggableContext?.moveItemDown(itemRef.value)))();\n    };\n\n    const moveItemTop = () => {\n        emit('move-top');\n        (props.draggableOptions?.moveTop ?? (() => draggableContext?.moveItemTop(itemRef.value)))();\n    };\n\n    const moveItemBottom = () => {\n        emit('move-bottom');\n        (props.draggableOptions?.moveBottom ?? (() => draggableContext?.moveItemBottom(itemRef.value)))();\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["BENTO_LIST_DRAGGABLE_INJECTION_KEY","__default__$1","draggableMessages","ITEM_SELECTOR","listElement","computed","props","listRef","ref","listItems","isDraggable","getListItems","child","syncListItems","watch","newElement","useMutationObserver","getItemIndex","el","getItemLabel","fallbackIndex","_b","_a","announceMoveAt","fromIndex","toIndex","items","announceMove","moveItemDOM","itemToMove","targetItem","emit","computedDraggableOptions","event","announcementMessage","useDraggableAnnouncement","moveItemUp","moveItemDown","moveItemTop","moveItemBottom","getDisabledMenus","useBentoDraggable","provide","__default__","messages","slots","useSlots","hasSlot","useHasSlot","itemRef","draggableContext","inject","t","useI18n","onItemClick","onItemKeydown","conditionalClasses","showDragHandle","dragHandleLabel","disabledMenus"],"mappings":"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"}
+{"version":3,"file":"list-item.Cngxa9qN.js","sources":["../../src/components/list/list.keys.ts","../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\nimport type { BentoDraggableDisabledMenus } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n\nexport interface BentoListDraggableContext {\n    isDraggable: ComputedRef<boolean>;\n    moveItemUp: (element: HTMLElement | null) => void;\n    moveItemDown: (element: HTMLElement | null) => void;\n    moveItemTop: (element: HTMLElement | null) => void;\n    moveItemBottom: (element: HTMLElement | null) => void;\n    getDisabledMenus: (element: HTMLElement | null) => BentoDraggableDisabledMenus;\n}\n\nexport const BENTO_LIST_DRAGGABLE_INJECTION_KEY = Symbol('list draggable injection key');\n","<template>\n    <div class=\"b-list\">\n        <component :is=\"listElement\" ref=\"listRef\" v-bind=\"$attrs\" class=\"b-list__list\">\n            <slot />\n        </component>\n\n        <div v-if=\"isDraggable\" class=\"b-list__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { useMutationObserver } from '@vueuse/core';\n    import { computed, provide, ref, watch } from 'vue';\n    import { useBentoDraggable } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from '@/components/draggable/composables/use-draggable-announcement/use-draggable-announcement';\n    import type { BentoDraggableOptions, BentoDraggableSortableEvent } from '@/components/draggable/draggable.types';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from './list.keys';\n    import type { BentoListDraggableContext } from './list.keys';\n    import type { BentoListProps } from './list.types';\n\n    // used for announcement composable\n    import draggableMessages from '@/components/draggable/composables/use-draggable-announcement/messages.json';\n\n    const ITEM_SELECTOR = '.b-list-item';\n\n    const props = defineProps({\n  type: { default: 'unordered' },\n  draggable: { type: Boolean, default: false },\n  draggableOptions: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"reorder\"]);\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n    const listRef = ref<HTMLElement | null>(null);\n    const listItems = ref<Array<HTMLElement>>([]);\n    const isDraggable = computed(() => props.draggable);\n\n    const getListItems = (): Array<HTMLElement> =>\n        listRef.value\n            ? (Array.from(listRef.value.children).filter(child => child.matches(ITEM_SELECTOR)) as Array<HTMLElement>)\n            : [];\n\n    const syncListItems = () => {\n        listItems.value = getListItems();\n    };\n\n    watch(\n        listRef,\n        newElement => {\n            if (!newElement) {\n                listItems.value = [];\n                return;\n            }\n\n            syncListItems();\n        },\n        { immediate: true }\n    );\n\n    useMutationObserver(listRef, syncListItems, { childList: true });\n\n    const getItemIndex = (el: HTMLElement | null) => (el ? listItems.value.indexOf(el) : -1);\n\n    const getItemLabel = (el: HTMLElement | null, fallbackIndex: number) =>\n        el?.querySelector('[data-list-item-label]')?.textContent?.trim() || `List item ${fallbackIndex + 1}`;\n\n    const announceMoveAt = (fromIndex: number, toIndex: number) => {\n        if (!isDraggable.value) {\n            return;\n        }\n\n        const items = getListItems();\n        announceMove({\n            itemLabel: getItemLabel(items[toIndex] ?? null, toIndex),\n            fromIndex,\n            toIndex,\n            total: items.length,\n            announcement: props.draggableOptions?.dragAnnouncement,\n        });\n    };\n\n    const moveItemDOM = (fromIndex: number, toIndex: number) => {\n        const items = getListItems();\n        const itemToMove = items[fromIndex];\n        const targetItem = items[toIndex];\n\n        if (fromIndex < toIndex) {\n            listRef.value!.insertBefore(itemToMove, targetItem.nextSibling);\n        } else {\n            listRef.value!.insertBefore(itemToMove, targetItem);\n        }\n\n        syncListItems();\n        announceMoveAt(fromIndex, toIndex);\n        emit('reorder', { oldIndex: fromIndex, newIndex: toIndex });\n    };\n\n    const computedDraggableOptions = computed<BentoDraggableOptions>(() => ({\n        ...props.draggableOptions,\n        onSort: (event: BentoDraggableSortableEvent) => {\n            syncListItems();\n            if (event.oldIndex !== undefined && event.newIndex !== undefined) {\n                announceMoveAt(event.oldIndex, event.newIndex);\n                emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex });\n            }\n            props.draggableOptions?.onSort?.(event);\n        },\n    }));\n\n    const { announcementMessage, announceMove } = useDraggableAnnouncement();\n\n    const { moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus } = useBentoDraggable(\n        listRef,\n        computedDraggableOptions,\n        {\n            getItemCount: () => listItems.value.length,\n            getItemIndex,\n            onMoveItem: moveItemDOM,\n        }\n    );\n\n    provide<BentoListDraggableContext>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, {\n        isDraggable,\n        moveItemUp,\n        moveItemDown,\n        moveItemTop,\n        moveItemBottom,\n        getDisabledMenus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list',\n        inheritAttrs: false,\n        i18n: { messages: draggableMessages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li ref=\"itemRef\" class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <bento-draggable-handle\n                v-if=\"showDragHandle\"\n                condensed\n                :label=\"dragHandleLabel\"\n                :disabled-menus=\"disabledMenus\"\n                :disabled=\"draggableOptions?.disabled\"\n                @move-up=\"moveItemUp\"\n                @move-down=\"moveItemDown\"\n                @move-top=\"moveItemTop\"\n                @move-bottom=\"moveItemBottom\"\n            />\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot v-if=\"hasSlot('start')\" name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\" data-list-item-label>\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography\n                            v-if=\"props.label\"\n                            class=\"b-list-item__label\"\n                            data-list-item-label\n                            el=\"span\"\n                            stronger\n                        >\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoDraggableHandle } from '@/components/draggable/components/draggable-handle';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from '../../list.keys';\n    import type { BentoListDraggableContext } from '../../list.keys';\n    import type { BentoListItemProps } from './list-item.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const itemRef = ref<HTMLElement | null>(null);\n    const draggableContext = inject<BentoListDraggableContext | null>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  draggableOptions: { default: null },\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\", \"move-up\", \"move-down\", \"move-top\", \"move-bottom\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n\n    const showDragHandle = computed(() => Boolean(draggableContext?.isDraggable.value));\n    const dragHandleLabel = computed(() => props.draggableOptions?.label || props.label || t('listItem'));\n    const disabledMenus = computed(() => {\n        if (props.draggableOptions?.disabledMenus) {\n            return props.draggableOptions.disabledMenus;\n        }\n\n        return draggableContext?.getDisabledMenus(itemRef.value);\n    });\n\n    const moveItemUp = () => {\n        emit('move-up');\n        (props.draggableOptions?.moveUp ?? (() => draggableContext?.moveItemUp(itemRef.value)))();\n    };\n\n    const moveItemDown = () => {\n        emit('move-down');\n        (props.draggableOptions?.moveDown ?? (() => draggableContext?.moveItemDown(itemRef.value)))();\n    };\n\n    const moveItemTop = () => {\n        emit('move-top');\n        (props.draggableOptions?.moveTop ?? (() => draggableContext?.moveItemTop(itemRef.value)))();\n    };\n\n    const moveItemBottom = () => {\n        emit('move-bottom');\n        (props.draggableOptions?.moveBottom ?? (() => draggableContext?.moveItemBottom(itemRef.value)))();\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["BENTO_LIST_DRAGGABLE_INJECTION_KEY","__default__$1","draggableMessages","ITEM_SELECTOR","listElement","computed","props","listRef","ref","listItems","isDraggable","getListItems","child","syncListItems","watch","newElement","useMutationObserver","getItemIndex","el","getItemLabel","fallbackIndex","announceMoveAt","fromIndex","toIndex","items","announceMove","moveItemDOM","itemToMove","targetItem","emit","computedDraggableOptions","event","announcementMessage","useDraggableAnnouncement","moveItemUp","moveItemDown","moveItemTop","moveItemBottom","getDisabledMenus","useBentoDraggable","provide","__default__","messages","slots","useSlots","hasSlot","useHasSlot","itemRef","draggableContext","inject","t","useI18n","onItemClick","onItemKeydown","conditionalClasses","showDragHandle","dragHandleLabel","disabledMenus"],"mappings":"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"}

package/dist/chunks/{listbox-option-tag.DnvECZQC.js → listbox-option-tag.BaoiH-Ku.js}

@@ -1,6 +1,6 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as s } from "./tag.BAyLm485.js";
-import { B as r } from "./typography.C8lPlsbD.js";
+import { B as s } from "./tag.BC7FFENr.js";
+import { B as r } from "./typography.D1OZJbEa.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/listbox-option-tag.css";
 const p = n({
@@ -41,4 +41,4 @@ const v = m.exports;
 export {
   v as L
 };
-//# sourceMappingURL=listbox-option-tag.DnvECZQC.js.map
+//# sourceMappingURL=listbox-option-tag.BaoiH-Ku.js.map

package/dist/chunks/{listbox-option-tag.DnvECZQC.js.map → listbox-option-tag.BaoiH-Ku.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.DnvECZQC.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span :aria-hidden=\"!!option.label\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types/listbox';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.BaoiH-Ku.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span :aria-hidden=\"!!option.label\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types/listbox';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/{modal-fullscreen.Bn8MzG6Z.js → modal-fullscreen.Cg1Q6ERf.js}

@@ -1,56 +1,34 @@
-import { defineComponent as T, useSlots as x, inject as L, onMounted as A, useListeners as h, getCurrentInstance as P, toRefs as J, ref as d, computed as U, onUnmounted as K, watch as Y, provide as f } from "vue";
+import { defineComponent as T, useSlots as x, inject as L, onMounted as A, useListeners as h, getCurrentInstance as P, toRefs as w, ref as i, computed as J, onUnmounted as U, watch as K, provide as f } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as j } from "./toast.XPG0vaQB.js";
-import { B as $ } from "./focus-trap.oRKjDFzf.js";
-import { B as z } from "./button.CKS_V3p5.js";
-import { B as H } from "./typography.C8lPlsbD.js";
+import { B as Y } from "./toast.D-jat1Xw.js";
+import { B as j } from "./focus-trap.l-wwtCHi.js";
+import { B as $ } from "./button.C4kKejsg.js";
+import { B as z } from "./typography.D1OZJbEa.js";
 import { u as N } from "./use-has-slot.C9lQZ6nz.js";
-import { u as X } from "./index.B6WW_F-J.js";
-import { i as F, j as D, B as q, k as Q } from "./button-actions.Dpbx0xf3.js";
-import { C as W } from "./cross.CC_B-vG-.js";
-import { D as Z } from "./dialog-page.B_LwIWgK.js";
-import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { g as O } from "./generate-uid.NJ8tVoha.js";
-import { B as V, D as ee, a as te } from "./dialog-page.keys.Dym9e6k3.js";
+import { u as H } from "./index.CPOlyau9.js";
+import { i as F, j as D, B as X, k as q } from "./button-actions.CxX7lK7z.js";
+import { C as Q } from "./cross.CC_B-vG-.js";
+import { D as W } from "./dialog-page.CPorblJc.js";
+import { n as M } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { g as O } from "./generate-uid.DBWe4g6T.js";
+import { B as Z, D as V, a as ee } from "./dialog-page.keys.Dym9e6k3.js";
 import "../assets/modal-fullscreen.css";
-const ae = {
-  "de-DE": {
-    close: "Schließen"
-  },
-  "en-GB": {
-    close: "Close"
-  },
-  "en-US": {
-    close: "Close"
-  },
-  "es-419": {
-    close: "Cerrar"
-  },
-  "es-ES": {
-    close: "Cerrar"
-  },
-  "es-MX": {
-    close: "Cerrar"
-  },
-  "fr-FR": {
-    close: "Fermer"
-  },
-  "it-IT": {
-    close: "Chiudi"
-  },
-  "ja-JP": {
-    close: "閉じる"
-  },
-  "pt-BR": {
-    close: "Fechar"
-  },
-  "zh-CN": {
-    close: "关闭"
-  }
-}, se = {
-  i18n: { messages: ae }
-}, le = /* @__PURE__ */ T({
-  ...se,
+const te = {
+  "de-DE": { close: "Schließen" },
+  "en-GB": { close: "Close" },
+  "en-US": { close: "Close" },
+  "es-419": { close: "Cerrar" },
+  "es-ES": { close: "Cerrar" },
+  "es-MX": { close: "Cerrar" },
+  "fr-FR": { close: "Fermer" },
+  "it-IT": { close: "Chiudi" },
+  "ja-JP": { close: "閉じる" },
+  "pt-BR": { close: "Fechar" },
+  "zh-CN": { close: "关闭" }
+}, ae = {
+  i18n: { messages: te }
+}, se = /* @__PURE__ */ T({
+  ...ae,
   __name: "modal-fullscreen-page",
   props: {
     /**
@@ -106,17 +84,17 @@ const ae = {
     }
   },
   emits: ["close"],
-  setup(o, { emit: e }) {
-    const a = o, { t } = X(), s = x(), n = N(s), r = L(F, void 0), m = a.titleId ?? r, i = L(D, void 0), p = () => {
-      e("close"), i == null || i();
+  setup(c, { emit: e }) {
+    const a = c, { t } = H(), s = x(), o = N(s), n = L(F, void 0), m = a.titleId ?? n, p = L(D, void 0), u = () => {
+      e("close"), p?.();
     };
     return A(() => {
       if (a.actions && a.actions.length > 2)
         throw new Error("Not more than 2 action buttons may be provided in Bento Modal Fullscreen");
-    }), { __sfc: !0, t, props: a, emit: e, slots: s, hasSlot: n, injectedTitleId: r, computedTitleId: m, closeModal: i, handleClose: p, BentoButton: z, BentoButtonActions: q, BentoTypography: H, DialogPage: Z, CrossIcon: W };
+    }), { __sfc: !0, t, props: a, emit: e, slots: s, hasSlot: o, injectedTitleId: n, computedTitleId: m, closeModal: p, handleClose: u, BentoButton: $, BentoButtonActions: X, BentoTypography: z, DialogPage: W, CrossIcon: Q };
   }
 });
-var oe = function() {
+var le = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
   return a(t.DialogPage, { staticClass: "b-modal-fullscreen-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage, "always-show-border": "" }, scopedSlots: e._u([{ key: "header", fn: function() {
     return [a("div", { staticClass: "b-modal-fullscreen-page__header" }, [a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title" }, [e.title ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__title", attrs: { id: t.computedTitleId, el: "h2", variant: "title", title: e.title } }, [e._v(e._s(e.title))]) : e._e()], 1), t.hasSlot("header") ? a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" }, [e._t("header")], 2) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions" }, [e.contextualLabel ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__contextual-label", attrs: { el: "span", title: e.contextualLabel } }, [e._v(e._s(e.contextualLabel))]) : e._e(), e.actions ? a(t.BentoButtonActions, { staticClass: "b-modal-fullscreen-page__actions", attrs: { actions: e.actions } }) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__separator" }), a("div", { staticClass: "b-modal-fullscreen-page__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", "aria-label": t.t("close") }, on: { click: t.handleClose }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
@@ -125,26 +103,20 @@ var oe = function() {
   }, proxy: !0 }, { key: "content", fn: function() {
     return [e._t("default")];
   }, proxy: !0 }], null, !0) });
-}, ne = [], re = /* @__PURE__ */ k(
+}, oe = [], ne = /* @__PURE__ */ M(
+  se,
   le,
   oe,
-  ne,
   !1,
   null,
   "50f40dc1"
 );
-const ie = re.exports;
-function ce() {
-  var e;
-  if (!window || !h && !P)
-    return {};
-  if (h)
-    return h();
-  const o = P();
-  return ((e = o == null ? void 0 : o.proxy) == null ? void 0 : e.$listeners) || {};
+const re = ne.exports;
+function ie() {
+  return !window || !h && !P ? {} : h ? h() : P()?.proxy?.$listeners || {};
 }
-const ue = {}, de = /* @__PURE__ */ T({
-  ...ue,
+const ce = {}, ue = /* @__PURE__ */ T({
+  ...ce,
   __name: "modal-fullscreen",
   props: {
     /**
@@ -192,11 +164,11 @@ const ue = {}, de = /* @__PURE__ */ T({
     }
   },
   emits: ["before-close", "update:active-page", "update:is-open"],
-  setup(o, { emit: e }) {
-    const a = o, { activePage: t, isOpen: s } = J(a), n = d(null), r = d(!1), m = O("modal-fullscreen"), i = O("modal-fullscreen-title"), p = d(!1), g = d(!1), y = ce(), C = x(), M = N(C), R = U(() => ({
-      "b-modal-fullscreen--hide": r.value
+  setup(c, { emit: e }) {
+    const a = c, { activePage: t, isOpen: s } = w(a), o = i(null), n = i(!1), m = O("modal-fullscreen"), p = O("modal-fullscreen-title"), u = i(!1), g = i(!1), y = ie(), C = x(), k = N(C), R = J(() => ({
+      "b-modal-fullscreen--hide": n.value
     })), G = () => {
-      r.value && n.value && (n.value.close(), c.value[0] && e("update:active-page", c.value[0]), c.value = [], r.value = !1, p.value = !1, e("update:is-open", !1));
+      n.value && o.value && (o.value.close(), r.value[0] && e("update:active-page", r.value[0]), r.value = [], n.value = !1, u.value = !1, e("update:is-open", !1));
     };
     function I() {
       if (y["before-close"]) {
@@ -206,36 +178,35 @@ const ue = {}, de = /* @__PURE__ */ T({
       v();
     }
     const v = () => {
-      !n.value || !n.value.open || (r.value = !0);
+      !o.value || !o.value.open || (n.value = !0);
     };
     A(() => {
       g.value = !0;
-    }), K(() => {
+    }), U(() => {
       g.value = !1;
-    }), Y(
-      [() => s.value, n],
-      ([l, u]) => {
-        !g.value || !u || (l ? (p.value = !0, u.open || u.showModal(), c.value.length || c.value.push(t.value)) : u.open && v());
+    }), K(
+      [() => s.value, o],
+      ([l, d]) => {
+        !g.value || !d || (l ? (u.value = !0, d.open || d.showModal(), r.value.length || r.value.push(t.value)) : d.open && v());
       },
       { immediate: !0, flush: "post" }
-    ), f(Q, m), f(F, i), f(D, I);
-    const b = d(V.TRANSITION_LEVEL_DEEPER), _ = d([]), c = d([]), E = (l) => e("update:active-page", l);
-    f(ee, {
+    ), f(q, m), f(F, p), f(D, I);
+    const b = i(Z.TRANSITION_LEVEL_DEEPER), _ = i([]), r = i([]), E = (l) => e("update:active-page", l);
+    f(V, {
       activePage: t,
       animation: b,
-      isOpen: p,
+      isOpen: u,
       pages: _,
-      previousPages: c,
+      previousPages: r,
       updatePage: E
     });
     const B = (l) => () => {
-      var u;
-      _.value = (u = _.value) == null ? void 0 : u.filter((w) => w !== l);
+      _.value = _.value?.filter((d) => d !== l);
     }, S = (l) => (l && _.value.push(l), { unregisterPage: B(l) });
-    return f(te, S), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: s, modal: n, isClosing: r, modalFullscreenId: m, titleId: i, internalIsOpen: p, isMounted: g, listeners: y, slots: C, hasSlot: M, conditionalClasses: R, closeModalAfterAnimation: G, closeModal: I, startCloseModalAnimation: v, animation: b, pages: _, previousPages: c, updatePage: E, unregisterPage: B, registerPage: S, BentoToast: j, BentoFocusTrap: $, BentoModalFullscreenPage: ie };
+    return f(ee, S), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: s, modal: o, isClosing: n, modalFullscreenId: m, titleId: p, internalIsOpen: u, isMounted: g, listeners: y, slots: C, hasSlot: k, conditionalClasses: R, closeModalAfterAnimation: G, closeModal: I, startCloseModalAnimation: v, animation: b, pages: _, previousPages: r, updatePage: E, unregisterPage: B, registerPage: S, BentoToast: Y, BentoFocusTrap: j, BentoModalFullscreenPage: re };
   }
 });
-var pe = function() {
+var de = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
   return a("dialog", { ref: "modal", staticClass: "b-modal-fullscreen", class: t.conditionalClasses, attrs: { id: t.modalFullscreenId, "data-dialog-element": "modal-fullscreen", "aria-labelledby": t.titleId }, on: { animationend: t.closeModalAfterAnimation, keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : (s.preventDefault(), t.closeModal.apply(null, arguments));
@@ -244,17 +215,17 @@ var pe = function() {
   }, proxy: !0 } : null, t.hasSlot("header") ? { key: "header", fn: function() {
     return [e._t("header")];
   }, proxy: !0 } : null], null, !0) })], 2) : e._e(), t.isOpen ? [a(t.BentoToast)] : e._e()], 2);
-}, _e = [], fe = /* @__PURE__ */ k(
+}, pe = [], _e = /* @__PURE__ */ M(
+  ue,
   de,
   pe,
-  _e,
   !1,
   null,
   "9349b04a"
 );
-const Te = fe.exports;
+const Oe = _e.exports;
 export {
-  ie as B,
-  Te as m
+  re as B,
+  Oe as m
 };
-//# sourceMappingURL=modal-fullscreen.Bn8MzG6Z.js.map
+//# sourceMappingURL=modal-fullscreen.Cg1Q6ERf.js.map