@adyen/bento-vue3 1.8.0 → 1.9.0

package/dist/chunks/{listbox-option-tag.5b00c85f.js.map → listbox-option-tag.b1eb32bd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.5b00c85f.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\n            const { username } = toRefs(props);\n\n            const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n            const computedUsername = computed(() => (!props.src ? props.username : null));\n            const initials = useInitials(username);\n\n            // Returns the UTF-16 char code\n            const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n            // Returns a computed color based on the letter passed\n            const avatarColor = computed(() => {\n                const numberOfAlphabetLetters = 26;\n                const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n                const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n                if (charCode.value <= rangeStep) {\n                    return BentoAvatarImageColor.YELLOW;\n                }\n                if (charCode.value <= rangeStep * 2) {\n                    return BentoAvatarImageColor.BLUE;\n                }\n                if (charCode.value <= rangeStep * 3) {\n                    return BentoAvatarImageColor.GREEN;\n                }\n                return BentoAvatarImageColor.RED;\n            });\n\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\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, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, 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$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGI,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACIC,EAAA,SAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,OAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.b1eb32bd.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\n            const { username } = toRefs(props);\n\n            const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n            const computedUsername = computed(() => (!props.src ? props.username : null));\n            const initials = useInitials(username);\n\n            // Returns the UTF-16 char code\n            const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n            // Returns a computed color based on the letter passed\n            const avatarColor = computed(() => {\n                const numberOfAlphabetLetters = 26;\n                const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n                const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n                if (charCode.value <= rangeStep) {\n                    return BentoAvatarImageColor.YELLOW;\n                }\n                if (charCode.value <= rangeStep * 2) {\n                    return BentoAvatarImageColor.BLUE;\n                }\n                if (charCode.value <= rangeStep * 3) {\n                    return BentoAvatarImageColor.GREEN;\n                }\n                return BentoAvatarImageColor.RED;\n            });\n\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\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, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, 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$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGI,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACIC,EAAA,SAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,OAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}

package/dist/chunks/{listbox.d07c24e6.js → listbox.ac43f8ab.js}

@@ -1,15 +1,15 @@
-import { computed as b, ref as R, onMounted as Te, onUnmounted as Ge, watch as he, defineComponent as H, openBlock as S, createElementBlock as B, mergeProps as U, withKeys as be, renderSlot as Y, resolveComponent as C, createBlock as D, toHandlerKey as F, withCtx as T, normalizeProps as w, guardReactiveProps as K, createElementVNode as M, createVNode as A, createTextVNode as V, toDisplayString as G, createCommentVNode as le, withDirectives as J, vShow as ve, toRef as Oe, resolveDirective as ge, toHandlers as se, Fragment as ie, renderList as q, createSlots as oe, normalizeClass as me, pushScopeId as xe, popScopeId as Ye } from "vue";
+import { computed as b, ref as D, onMounted as Te, onUnmounted as Ge, watch as he, defineComponent as H, openBlock as S, createElementBlock as B, mergeProps as U, withKeys as be, renderSlot as Y, resolveComponent as C, createBlock as N, toHandlerKey as F, withCtx as T, normalizeProps as w, guardReactiveProps as K, createElementVNode as M, createVNode as A, createTextVNode as V, toDisplayString as G, createCommentVNode as le, withDirectives as J, vShow as ve, toRef as Oe, resolveDirective as ge, toHandlers as se, Fragment as ie, renderList as q, createSlots as oe, normalizeClass as me, pushScopeId as xe, popScopeId as Ye } from "vue";
 import { B as x, a as pe } from "./keyboard-navigation.ca47dfa8.js";
 import { B as ne } from "./index.75f3672e.js";
 import { BentoLoadingIndicator as Fe } from "../loading-indicator.js";
 import { BentoEmptyState as Ke } from "../empty-state.js";
 import { u as fe } from "./i18n.6c402773.js";
 import { d as ze } from "./debounce.b5ef6acf.js";
-import { C as We } from "./checkmark.83e4f1e0.js";
+import { C as We } from "./checkmark.eb3c7a06.js";
 import { _ as j } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ye } from "./checkbox.03c4b0fe.js";
-import { C as qe, a as He } from "./chevron-up.9bf21068.js";
-import { B as je, a as Se } from "./loading-button.ad7cfaee.js";
+import { B as ye } from "./checkbox.731dc0ab.js";
+import { C as qe, a as He } from "./chevron-up.46afb34c.js";
+import { B as je, a as Se } from "./loading-button.4b88e24d.js";
 import { o as Xe } from "./resize.a041304d.js";
 import "../assets/listbox.css";
 const Le = (e, t, d, p) => {
@@ -31,7 +31,7 @@ const Le = (e, t, d, p) => {
   };
 };
 function Je(e, { disabled: t, itemHeight: d, overscan: p = 5, prefixHeight: n }) {
-  const u = R(null), r = R([]), s = R(0), o = R(0), i = R(0);
+  const u = D(null), r = D([]), s = D(0), o = D(0), i = D(0);
   let f;
   const l = b(() => {
     const v = typeof d == "number" ? e.value.length * d : e.value.reduce((_, I, k) => _ + d(k), 0), h = typeof d == "number" ? s.value * d : e.value.slice(0, s.value).reduce((_, I, k) => _ + d(k), 0);
@@ -199,7 +199,7 @@ const ae = /* @__PURE__ */ j(Qe, [["render", Ze], ["__scopeId", "data-v-18a61f5d
 const tt = { class: "b-listbox-single-select-option__text" }, lt = { class: "b-listbox-single-select-option__check-icon" };
 function st(e, t, d, p, n, u) {
   const r = C("bento-typography"), s = C("checkmark-icon"), o = C("bento-listbox-option");
-  return S(), D(o, U({
+  return S(), N(o, U({
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
@@ -223,7 +223,7 @@ function st(e, t, d, p, n, u) {
             ]),
             _: 1
           }),
-          e.option.description ? (S(), D(r, {
+          e.option.description ? (S(), N(r, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
@@ -245,7 +245,7 @@ function st(e, t, d, p, n, u) {
   }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
 const ot = /* @__PURE__ */ j(et, [["render", st], ["__scopeId", "data-v-d112952c"]]), Ae = ({ items: e, isOptionDisabled: t }, d) => {
-  const p = b(() => e.value.length - 1), n = R(0);
+  const p = b(() => e.value.length - 1), n = D(0);
   Te(() => {
     t && (n.value = e.value.findIndex((g) => !t(g)));
   });
@@ -337,7 +337,7 @@ const ot = /* @__PURE__ */ j(et, [["render", st], ["__scopeId", "data-v-d112952c
   },
   emits: [a.SELECT, a.ENTER, a.SPACE, a.TAB],
   setup(e, { emit: t, slots: d }) {
-    const p = R([]), n = (y) => (g) => {
+    const p = D([]), n = (y) => (g) => {
       t(y, g);
     }, u = (y) => p.value[y].$el.focus(), { moveToNextElement: r, moveToPreviousElement: s, moveToFirstElement: o, moveToLastElement: i } = Ae(
       {
@@ -373,7 +373,7 @@ const ot = /* @__PURE__ */ j(et, [["render", st], ["__scopeId", "data-v-d112952c
 function it(e, t, d, p, n, u) {
   const r = C("bento-listbox-single-select-option"), s = ge("bento-keyboard-navigation-directive");
   return J((S(), B("div", se(e.listboxListeners, !0), [
-    (S(!0), B(ie, null, q(e.items, (o) => (S(), D(r, U({
+    (S(!0), B(ie, null, q(e.items, (o) => (S(), N(r, U({
       key: o.value,
       ref_for: !0,
       ref: "listboxItemRef",
@@ -447,7 +447,7 @@ const rt = {
   },
   emits: [te.SELECT_CATEGORY, te.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const d = R(!1), { t: p } = fe(), n = (v) => e.isOptionDisabled ? e.isOptionDisabled(v) : !1, u = b(
+    const d = D(!1), { t: p } = fe(), n = (v) => e.isOptionDisabled ? e.isOptionDisabled(v) : !1, u = b(
       () => e.category.items.every((v) => n(v))
     ), r = b(() => ({
       [`b-listbox-multi-select-category--${Ie.DISABLED}`]: u.value
@@ -530,10 +530,10 @@ function ut(e, t, d, p, n, u) {
             "data-testid": "toggle-listbox",
             onClickCapture: t[0] || (t[0] = (...l) => e.toggleOpen && e.toggleOpen(...l))
           }, [
-            e.isOpen ? (S(), D(o, {
+            e.isOpen ? (S(), N(o, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (S(), D(i, {
+            }, null, 8, ["svg-title"])) : (S(), N(i, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -650,7 +650,7 @@ function pt(e, t, d, p, n, u) {
     (S(!0), B(ie, null, q(e.items, (l) => (S(), B("div", {
       key: `selected-${l.value}`
     }, [
-      e.searching && e.isMultiLevel ? (S(), D(o, {
+      e.searching && e.isMultiLevel ? (S(), N(o, {
         key: 0,
         class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
         disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
@@ -671,7 +671,7 @@ function pt(e, t, d, p, n, u) {
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(l) ? (S(), D(s, {
+              e.shouldShowDescription(l) ? (S(), N(s, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
@@ -686,7 +686,7 @@ function pt(e, t, d, p, n, u) {
         ]),
         _: 2
       }, 1032, ["class", "disabled"])) : (S(), B(ie, { key: 1 }, [
-        l.items ? (S(), D(f, {
+        l.items ? (S(), N(f, {
           key: 0,
           category: l,
           "is-option-disabled": e.isOptionDisabled,
@@ -706,7 +706,7 @@ function pt(e, t, d, p, n, u) {
             }, null, 8, ["items", "is-option-disabled", "is-multi-level", "selected-items-list", "searching"])
           ]),
           _: 2
-        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (S(), D(o, {
+        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (S(), N(o, {
           key: 1,
           class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
           disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
@@ -727,7 +727,7 @@ function pt(e, t, d, p, n, u) {
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(l) ? (S(), D(s, {
+                e.shouldShowDescription(l) ? (S(), N(s, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
@@ -805,7 +805,7 @@ const ft = /* @__PURE__ */ j(mt, [["render", pt], ["__scopeId", "data-v-55a6d406
   },
   emits: [a.SELECT],
   setup(e, { emit: t, slots: d }) {
-    const { t: p } = fe({ messages: Ee }), n = R(null), u = R(null), r = R(null), s = R();
+    const { t: p } = fe({ messages: Ee }), n = D(null), u = D(null), r = D(null), s = D();
     he(
       () => e.selectedValues,
       () => {
@@ -874,7 +874,7 @@ const ft = /* @__PURE__ */ j(mt, [["render", pt], ["__scopeId", "data-v-55a6d406
     }), de = b(() => {
       var c;
       return ((c = Z.value) == null ? void 0 : c.length) > 0;
-    }), N = b(
+    }), R = b(
       () => {
         var c, m;
         return ((c = y.value) == null ? void 0 : c.length) === ((m = i.value) == null ? void 0 : m.length);
@@ -903,7 +903,7 @@ const ft = /* @__PURE__ */ j(mt, [["render", pt], ["__scopeId", "data-v-55a6d406
       ][c].$el.focus();
     }, { moveToNextElement: Pe, moveToPreviousElement: Me, moveToFirstElement: Ue, moveToLastElement: we } = Ae(
       {
-        items: R(De),
+        items: D(De),
         isOptionDisabled: e.isOptionDisabled
       },
       Ne
@@ -920,7 +920,7 @@ const ft = /* @__PURE__ */ j(mt, [["render", pt], ["__scopeId", "data-v-55a6d406
       listboxItemsRef: r,
       // Values
       isAllSelected: _,
-      isAllItemsIncludingDisabled: N,
+      isAllItemsIncludingDisabled: R,
       isAnOptionSelected: de,
       isIndeterminate: I,
       isMultiLevelSelect: o,
@@ -1142,9 +1142,9 @@ const Ce = /* @__PURE__ */ j(yt, [["render", _t], ["__scopeId", "data-v-8c62bb32
     a.TAB
   ],
   setup(e, { emit: t, slots: d }) {
-    const p = R([]), n = Oe(e, "items"), { t: u } = fe({ messages: _e }), r = b(() => e.lazyLoadType !== X.AUTOMATIC), s = b(() => e.lazyLoadType === X.AUTOMATIC), o = () => {
-      var N;
-      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((N = e == null ? void 0 : e.virtualScroll) != null && N.itemHeight) ? e.virtualScroll.itemHeight : Tt;
+    const p = D([]), n = Oe(e, "items"), { t: u } = fe({ messages: _e }), r = b(() => e.lazyLoadType !== X.AUTOMATIC), s = b(() => e.lazyLoadType === X.AUTOMATIC), o = () => {
+      var R;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((R = e == null ? void 0 : e.virtualScroll) != null && R.itemHeight) ? e.virtualScroll.itemHeight : Tt;
     }, {
       containerRef: i,
       containerProps: f,
@@ -1161,18 +1161,21 @@ const Ce = /* @__PURE__ */ j(yt, [["render", _t], ["__scopeId", "data-v-8c62bb32
       () => r.value && e.loading ? "true" : "false"
     ), P = b(
       () => r.value ? "polite" : void 0
-    ), v = (N) => (ee) => {
-      t(N, ee);
+    ), v = (R) => (ee) => {
+      t(R, ee);
     }, h = () => {
       t(a.SHOW_MORE);
     }, _ = ze(() => {
-      const N = i.value, ee = N.scrollTop + N.clientHeight >= N.scrollHeight;
+      const R = i.value;
+      if (!R)
+        return;
+      const ee = Math.round(R.scrollTop) + R.clientHeight >= R.scrollHeight;
       e.hasMoreItems && ee && !e.loading && h();
     }), I = () => {
       s.value ? _() : l();
     }, k = b(() => {
-      var N;
-      return e.searching && ((N = e.items) == null ? void 0 : N.length) === 0;
+      var R;
+      return e.searching && ((R = e.items) == null ? void 0 : R.length) === 0;
     }), Q = b(
       () => e.lazyLoadType === X.BUTTON && e.hasMoreItems
     ), re = b(
@@ -1239,7 +1242,7 @@ function Bt(e, t, d, p, n, u) {
   }), [
     M("div", w(K(e.wrapperProps)), [
       e.isSearchResultEmpty ? (S(), B("div", Lt, [
-        e.emptyState ? (S(), D(r, w(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (S(), D(s, {
+        e.emptyState ? (S(), N(r, w(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (S(), N(s, {
           key: 1,
           el: "span"
         }, {
@@ -1249,7 +1252,7 @@ function Bt(e, t, d, p, n, u) {
           _: 1
         }))
       ])) : (S(), B(ie, { key: 1 }, [
-        e.multiple ? (S(), D(o, U({
+        e.multiple ? (S(), N(o, U({
           key: 0,
           ref: "listboxItemRef",
           items: e.items,
@@ -1263,7 +1266,7 @@ function Bt(e, t, d, p, n, u) {
               Y(e.$slots, O, w(K($)), void 0, !0)
             ])
           }))
-        ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (S(), D(i, U({
+        ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (S(), N(i, U({
           key: 1,
           ref: "listboxItemRef",
           items: e.virtualisedItems,
@@ -1297,10 +1300,10 @@ function Bt(e, t, d, p, n, u) {
     [y]
   ]);
 }
-const Ft = /* @__PURE__ */ j(ht, [["render", Bt], ["__scopeId", "data-v-fe2709d5"]]);
+const Ft = /* @__PURE__ */ j(ht, [["render", Bt], ["__scopeId", "data-v-f81dc174"]]);
 export {
   Ft as B,
   a,
   X as b
 };
-//# sourceMappingURL=listbox.d07c24e6.js.map
+//# sourceMappingURL=listbox.ac43f8ab.js.map