@adyen/bento-vue3 1.89.2 → 1.90.0

package/dist/chunks/input-time.DeJ8lDio.js

@@ -0,0 +1,103 @@
+import { defineComponent as I, useSlots as _, ref as b, computed as B, watch as D, openBlock as V, createBlock as S, unref as d, mergeProps as $, createSlots as k, withCtx as p, renderSlot as m, createTextVNode as w, toDisplayString as x } from "vue";
+import { B as E } from "./input-field.DnYjM6yy.js";
+import { d as M } from "./debounce.DUTu11PS.js";
+import { u as A } from "./index.B875RXHM.js";
+import { u as F } from "./use-has-slot.CyMiImRQ.js";
+import { _ as C } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/input-time.css";
+const N = /[\d]/, q = /^\d{2}$/, K = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), L = (o) => {
+  const { selectionStart: t } = o.target, n = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"], i = N.test(o.key) || n.includes(o.key), u = [1, 2, 4, 5].includes(t) && o.key === ":";
+  !i && !u && o.preventDefault();
+}, O = (o) => {
+  if (!o)
+    return o;
+  let t = o;
+  if (t.length === 1 && parseInt(o, 10) > 2)
+    return `0${t}:`;
+  const [n, i] = t.slice(-2);
+  return [2, 5].includes(t.length) && i === ":" && (t = `${t.slice(0, t.length - 2)}0${n}`), (q.test(t) || K.test(t)) && (t += ":"), t;
+}, g = {
+  "en-US": { invalidTimeFormat: "Invalid time format", timeFormatDescription: "HH:MM:SS" }
+}, R = {
+  i18n: { messages: g },
+  name: "bento-input-time",
+  inheritAttrs: !1,
+  model: { prop: "modelValue" }
+}, U = /* @__PURE__ */ I({
+  ...R,
+  props: {
+    condensed: { type: Boolean, default: !1 },
+    modelValue: { default: void 0 },
+    description: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    label: { default: "" },
+    optional: { type: Boolean, default: !1 },
+    placeholder: { default: "" },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    tooltipText: { default: null }
+  },
+  emits: ["update:model-value", "keydown", "input:valid", "input:error"],
+  setup(o, { emit: t }) {
+    const i = _(), u = F(i), { t: c } = A({ messages: g }), e = o, r = t, s = b(!1), y = B(() => e.errorMessage ? e.errorMessage : s.value ? c("invalidTimeFormat") : null), T = M((l) => {
+      if (!l) {
+        s.value = !1;
+        return;
+      }
+      const a = f(l);
+      s.value = !a, r(a ? "input:valid" : "input:error");
+    }, 300);
+    D(
+      () => e.modelValue,
+      (l) => {
+        const a = String(l ?? "");
+        a.length === 8 && f(a) && (s.value = !1);
+      }
+    );
+    const v = (l) => {
+      if (e.disabled || e.readonly)
+        return;
+      const a = O(String(l ?? ""));
+      r("update:model-value", a), T(a);
+    }, h = (l) => {
+      L(l), r("keydown", l);
+    };
+    return (l, a) => (V(), S(d(E), $({
+      class: "b-input-time",
+      condensed: e.condensed,
+      disabled: e.disabled,
+      "error-message": y.value,
+      label: e.label,
+      "model-value": e.modelValue,
+      optional: e.optional,
+      placeholder: e.placeholder,
+      readonly: e.readonly,
+      required: e.required,
+      "tooltip-text": e.tooltipText
+    }, l.$attrs, {
+      "onUpdate:modelValue": v,
+      onKeydown: h
+    }), k({
+      description: p(() => [
+        m(l.$slots, "description", {}, () => [
+          w(x(e.description ? `${e.description} ${d(c)("timeFormatDescription")}` : d(c)("timeFormatDescription")), 1)
+        ], !0)
+      ]),
+      _: 2
+    }, [
+      d(u)("default") ? {
+        name: "default",
+        fn: p(() => [
+          m(l.$slots, "default", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["condensed", "disabled", "error-message", "label", "model-value", "optional", "placeholder", "readonly", "required", "tooltip-text"]));
+  }
+}), Q = /* @__PURE__ */ C(U, [["__scopeId", "data-v-250fa173"]]);
+export {
+  Q as B,
+  f as i
+};
+//# sourceMappingURL=input-time.DeJ8lDio.js.map

package/dist/chunks/input-time.DeJ8lDio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-time.DeJ8lDio.js","sources":["../../../vue2/src/utils/ts/time-input.ts","../../../vue2/src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isValidKey = validDigitRegex.test(event.key) || allowedKeys.includes(event.key);\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n\n    if (!isValidKey && !isValidColon) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"computedErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"props.modelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"props.placeholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { useHasSlot } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoInputTimeProps>(), {\n        condensed: false,\n        description: undefined,\n        disabled: false,\n        errorMessage: null,\n        label: '',\n        modelValue: undefined,\n        optional: false,\n        placeholder: '',\n        readonly: false,\n        required: false,\n        tooltipText: null,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: 'update:model-value', value: BentoInputFieldValue): void;\n\n        /**\n         * Emitted when a key is pressed down\n         */\n        (e: 'keydown', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when the time value passes validation (complete HH:MM:SS format)\n         */\n        (e: 'input:valid'): void;\n\n        /**\n         * Emitted when the time value fails validation\n         */\n        (e: 'input:error'): void;\n    }>();\n\n    const internalError = ref(false);\n\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n        const formatted = formatTimeInputValue(String(value ?? ''));\n        emit('update:model-value', formatted);\n        validateTimeWithDebounce(formatted);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        validateTimeInput(event);\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","validateTimeInput","event","selectionStart","allowedKeys","isValidKey","isValidColon","formatTimeInputValue","value","formattedValue","secondToLastDigit","lastDigit","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","props","__props","emit","__emit","internalError","ref","computedErrorMessage","computed","validateTimeWithDebounce","debounce","isValid","watch","newValue","onInput","formatted","onKeyDown"],"mappings":";;;;;;;AAAA,MAAAA,IAAA,QAEAC,IAAA,WACAC,IAAA,iBAQOC,IAAA,CAAAC,MAAA,8CAAA,KAAAA,CAAA,GAGAC,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,gBAAAC,EAAA,IAAAD,EAAA,QAEAE,IAAA,CAAA,aAAA,OAAA,aAAA,YAAA,GACAC,IAAAT,EAAA,KAAAM,EAAA,GAAA,KAAAE,EAAA,SAAAF,EAAA,GAAA,GACAI,IAAA,CAAA,GAAA,GAAA,GAAA,CAAA,EAAA,SAAAH,CAAA,KAAAD,EAAA,QAAA;AAEA,EAAA,CAAAG,KAAA,CAAAC,KACIJ,EAAA,eAAA;AAER,GAEOK,IAAA,CAAAC,MAAA;AACH,MAAA,CAAAA;AACI,WAAAA;AAGJ,MAAAC,IAAAD;AAGA,MAAAC,EAAA,WAAA,KAAA,SAAAD,GAAA,EAAA,IAAA;AACI,WAAA,IAAAC,CAAA;AAGJ,QAAA,CAAAC,GAAAC,CAAA,IAAAF,EAAA,MAAA,EAAA;AACA,SAAA,CAAA,GAAA,CAAA,EAAA,SAAAA,EAAA,MAAA,KAAAE,MAAA,QACIF,IAAA,GAAAA,EAAA,MAAA,GAAAA,EAAA,SAAA,CAAA,CAAA,IAAAC,CAAA,MAIJb,EAAA,KAAAY,CAAA,KAAAX,EAAA,KAAAW,CAAA,OACIA,KAAA,MAEJA;AACJ;;GCuHIG,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAAA,EACX,cAAA;AAAA,EACQ,OAAA,EAAA,MAAA,aAAA;AAElB;;;;;;;;;;;;;;;;;AA3HA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAGA,EAAA,GAAAI,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC,GAcAC,IAAAC,GAsBAC,IAAAC,EAAA,EAAA,GAEAC,IAAAC,EAAA,MACIP,EAAA,eACIA,EAAA,eAEJI,EAAA,QAAAN,EAAA,mBAAA,IAAA,IAAsD,GAmB1DU,IAAAC,EAhBA,CAAA7B,MAAA;AACI,UAAA,CAAAA,GAAA;AACI,QAAAwB,EAAA,QAAA;AACA;AAAA,MAAA;AAGJ,YAAAM,IAAA/B,EAAAC,CAAA;AACA,MAAAwB,EAAA,QAAA,CAAAM,GAGIR,EADJQ,IACI,gBAEA,aAFA;AAAA,IAGJ,GAGJ,GAAA;AAGA,IAAAC;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,CAAAY,MAAA;AAER,cAAAhC,IAAA,OAAAgC,KAAA,EAAA;AAEA,QAAAhC,EAAA,WAAA,KAAAD,EAAAC,CAAA,MACIwB,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAS,IAAA,CAAAzB,MAAA;AACI,UAAAY,EAAA,YAAAA,EAAA;AACI;AAEJ,YAAAc,IAAA3B,EAAA,OAAAC,KAAA,EAAA,CAAA;AACA,MAAAc,EAAA,sBAAAY,CAAA,GACAN,EAAAM,CAAA;AAAA,IAAkC,GAGtCC,IAAA,CAAAjC,MAAA;AACI,MAAAD,EAAAC,CAAA,GACAoB,EAAA,WAAApB,CAAA;AAAA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{inspector.B9k4tJWe.js → inspector.DMhKNW1K.js}

@@ -1,19 +1,19 @@
-import { ref as v, watch as x, defineComponent as $, computed as b, openBlock as f, createElementBlock as S, normalizeClass as N, createElementVNode as s, renderSlot as w, createVNode as i, Transition as K, withCtx as l, withKeys as z, unref as n, Fragment as G, createTextVNode as H, toDisplayString as T, createCommentVNode as E, createBlock as O, nextTick as Y } from "vue";
+import { ref as v, watch as w, defineComponent as z, computed as S, openBlock as f, createElementBlock as b, normalizeClass as N, createElementVNode as i, renderSlot as L, createVNode as r, Transition as $, withCtx as l, withKeys as K, unref as n, Fragment as G, createTextVNode as A, toDisplayString as M, createCommentVNode as y, createBlock as F, nextTick as Y } from "vue";
 import { d as U, B as X } from "./typography.B3J6_tYk.js";
-import { B as k } from "./button.DWF7FSIw.js";
+import { B as E } from "./button.DWF7FSIw.js";
 import { B as j } from "./loading-indicator.BPol9I84.js";
-import { B as q, s as J, g as W, a as Q, f as Z } from "./focus-trap.BAiM_ywb.js";
+import { B as q, s as J, g as W, a as Z, f as Q } from "./focus-trap.BAiM_ywb.js";
 import { E as ee } from "./expand.BrywY9jl.js";
 import { C as te } from "./cross.CCHdi6v3.js";
 import { g as ne } from "./generate-uid.DBWe4g6T.js";
 import { u as oe } from "./index.B875RXHM.js";
-import { a as ae, b as se } from "./index.DDwcHPb6.js";
-import { _ as ie } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { a as ae, b as ie } from "./index.DDwcHPb6.js";
+import { _ as re } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/inspector.css";
-function re(_) {
-  const t = v([]), r = ae();
-  return x(r, (o) => {
-    !_.value || !o || !_.value.contains(o) || (t.value.unshift(o), t.value.length > 3 && t.value.pop());
+function se(C) {
+  const t = v([]), s = ae();
+  return w(s, (o) => {
+    !C.value || !o || !C.value.contains(o) || (t.value.unshift(o), t.value.length > 3 && t.value.pop());
   }), {
     findValidFocusFallback: () => {
       for (const o of t.value)
@@ -23,12 +23,19 @@ function re(_) {
     }
   };
 }
-const I = {
+const H = {
+  "de-DE": { close: "Schließen", expand: "Anzeigen", inspector: "Inspektor", returnToMainContent: "Zurück zum Hauptinhalt (Strg+Shift+S)", returnToMainContentDescription: "Mit der Tastenkombination Strg + Umschalt + S können Sie zwischen dem Inspektor und den Seitenbereichen navigieren." },
+  "en-GB": { close: "Close", expand: "Expand", inspector: "Inspector", returnToMainContent: "Return to main content (Ctrl+Shift+S)", returnToMainContentDescription: "You can use Ctrl + Shift + S to navigate between the inspector and page sections." },
   "en-US": { close: "Close", expand: "Expand", inspector: "Inspector", returnToMainContent: "Return to main content (Ctrl+Shift+S)", returnToMainContentDescription: "You can use Ctrl + Shift + S to navigate between the inspector and page sections." },
+  "es-ES": { close: "Cerrar", expand: "Ampliar", inspector: "Inspector", returnToMainContent: "Volver al contenido principal (Ctrl+Shift+S)", returnToMainContentDescription: "Puedes usar Ctrl + Shift + S para navegar entre las secciones del inspector y de la página." },
+  "es-MX": { close: "Cerrar", expand: "Ampliar", inspector: "Inspector", returnToMainContent: "Volver al contenido principal (Ctrl+Shift+S)", returnToMainContentDescription: "Puedes usar Ctrl + Shift + S para navegar entre las secciones del inspector y de la página." },
+  "fr-FR": { close: "Fermer", expand: "Développer", inspector: "Inspecteur", returnToMainContent: "Retour au contenu principal (Ctrl+Maj+S)", returnToMainContentDescription: "Vous pouvez utiliser Ctrl + Shift + S pour naviguer entre les sections de l'inspecteur et de la page." },
+  "it-IT": { close: "Chiudi", expand: "Espandi", inspector: "Ispettore", returnToMainContent: "Torna al contenuto principale (Ctrl+Shift+S)", returnToMainContentDescription: "Puoi usare Ctrl + Shift + S per navigare tra le sezioni ispettore e pagina." },
   "ja-JP": { close: "閉じる", expand: "展開", inspector: "インスペクター", returnToMainContent: "メインコンテンツに戻る（Ctrl+Shift+S）", returnToMainContentDescription: "Ctrl + Shift + S を使用して、インスペクターとページセクション間を移動できます。" },
-  "pt-BR": { close: "Fechar", expand: "Expandir", inspector: "Inspetor", returnToMainContent: "Voltar ao conteúdo principal (Ctrl+Shift+S)", returnToMainContentDescription: "Você pode usar Ctrl + Shift + S para navegar entre as seções do inspetor e da página." }
-}, ce = { class: "b-inspector__page" }, le = ["aria-label"], pe = { class: "b-inspector__container" }, ue = { class: "b-inspector__header" }, de = ["id"], fe = { class: "b-inspector__icons" }, ve = { class: "b-inspector__content" }, _e = { i18n: { messages: I } }, me = /* @__PURE__ */ $({
-  ..._e,
+  "pt-BR": { close: "Fechar", expand: "Expandir", inspector: "Inspetor", returnToMainContent: "Voltar ao conteúdo principal (Ctrl+Shift+S)", returnToMainContentDescription: "Você pode usar Ctrl + Shift + S para navegar entre as seções do inspetor e da página." },
+  "zh-CN": { close: "关闭", expand: "展开", inspector: "检查器", returnToMainContent: "返回主内容（Ctrl+Shift+S）", returnToMainContentDescription: "您可以使用 Ctrl + Shift + S 在检查器和页面分区之间导航。" }
+}, ce = { class: "b-inspector__page" }, le = ["aria-label"], pe = { class: "b-inspector__container" }, ue = { class: "b-inspector__header" }, de = ["id"], fe = { class: "b-inspector__icons" }, ve = { class: "b-inspector__content" }, Ce = { i18n: { messages: H } }, me = /* @__PURE__ */ z({
+  ...Ce,
   __name: "inspector",
   props: {
     activePage: { default: "" },
@@ -41,122 +48,122 @@ const I = {
     pageFocusAnchor: { default: null }
   },
   emits: ["update:is-open", "update:active-page", "expand"],
-  setup(_, { emit: B }) {
-    const t = _, r = B, { t: c } = oe({ messages: I }), o = ne("returnToMainContentDescription"), L = v(null), m = v(null), M = v(null), C = v(null), { width: A } = se(L), p = b(() => {
+  setup(C, { emit: k }) {
+    const t = C, s = k, { t: c } = oe({ messages: H }), o = ne("returnToMainContentDescription"), B = v(null), m = v(null), x = v(null), g = v(null), { width: D } = ie(B), p = S(() => {
       const d = t.size === "small" ? 740 : 915;
-      return A.value > 0 && A.value < d;
-    }), g = b(() => t.pageFocusAnchor), D = b(() => ({
+      return D.value > 0 && D.value < d;
+    }), _ = S(() => t.pageFocusAnchor), O = S(() => ({
       [`b-inspector--${t.size}`]: !0,
       [`b-inspector--${t.relativeLayout}`]: !0,
       "b-inspector--is-compact": p.value
-    })), P = b(() => `${c("inspector")}, ${t.title}`), { findValidFocusFallback: h } = re(M), y = async () => {
-      t.isOpen ? (await Y(), J(m.value, g.value)) : u(g.value ?? h());
+    })), P = S(() => `${c("inspector")}, ${t.title}`), { findValidFocusFallback: h } = se(x), T = async () => {
+      t.isOpen ? (await Y(), J(m.value, _.value)) : u(_.value ?? h());
     }, R = (e) => {
       if (p.value)
         return;
       const a = e.shiftKey ? -1 : 1, d = W(a, m.value);
-      Q() === d && (e.preventDefault(), C.value = document.activeElement, u(g.value ?? h()), r("update:active-page", void 0));
+      Z() === d && (e.preventDefault(), g.value = document.activeElement, u(_.value ?? h()), s("update:active-page", void 0));
     }, V = (e) => {
       const a = e.shiftKey && e.ctrlKey && e.key === "S";
-      t.isOpen && !p.value && a && F();
-    }, F = () => {
-      Z(m.value) ? (C.value = document.activeElement, u(g.value ?? h()), r("update:active-page", void 0)) : u(C.value);
+      t.isOpen && !p.value && a && I();
+    }, I = () => {
+      Q(m.value) ? (g.value = document.activeElement, u(_.value ?? h()), s("update:active-page", void 0)) : u(g.value);
     }, u = (e) => {
       e && (e?.focus(), document.activeElement !== e && u(e.parentElement));
     };
-    return x(
+    return w(
       () => t.activePage,
       () => {
-        t.activePage && y();
+        t.activePage && T();
       }
     ), t.activePage || U(
       'BentoInspector "active-page" as optional',
       `Make sure to set the "active-page" prop and keep it in sync with "update:active-page".
             "active-page" prop will be required in the next version`,
       "2.0.0"
-    ), (e, a) => (f(), S("div", {
+    ), (e, a) => (f(), b("div", {
       ref_key: "wrapper",
-      ref: L,
-      class: N(["b-inspector", D.value]),
+      ref: B,
+      class: N(["b-inspector", O.value]),
       onKeydown: V
     }, [
-      s("div", {
+      i("div", {
         ref_key: "page",
-        ref: M,
+        ref: x,
         class: "b-inspector__page-wrapper"
       }, [
-        s("div", ce, [
-          w(e.$slots, "page", {}, void 0, !0)
+        i("div", ce, [
+          L(e.$slots, "page", {}, void 0, !0)
         ])
       ], 512),
-      i(K, {
+      r($, {
         name: "b-inspector__animation",
         mode: "out-in",
-        onBeforeEnter: y,
-        onAfterLeave: y
+        onBeforeEnter: T,
+        onAfterLeave: T
       }, {
         default: l(() => [
-          e.isOpen ? (f(), S("aside", {
+          e.isOpen ? (f(), b("aside", {
             key: 0,
             ref_key: "inspector",
             ref: m,
             class: "b-inspector__container-wrapper",
             "aria-label": P.value,
-            onKeydown: z(R, ["tab"])
+            onKeydown: K(R, ["tab"])
           }, [
-            i(n(q), {
+            r(n(q), {
               disabled: !p.value
             }, {
               default: l(() => [
-                s("div", pe, [
-                  s("div", ue, [
-                    p.value ? E("", !0) : (f(), S(G, { key: 0 }, [
-                      i(n(k), {
+                i("div", pe, [
+                  i("div", ue, [
+                    p.value ? y("", !0) : (f(), b(G, { key: 0 }, [
+                      r(n(E), {
                         class: "b-inspector__return-content",
                         variant: "secondary",
                         condensed: "",
                         "aria-describedby": n(o),
-                        onClick: F
+                        onClick: I
                       }, {
                         default: l(() => [
-                          H(T(n(c)("returnToMainContent")), 1)
+                          A(M(n(c)("returnToMainContent")), 1)
                         ]),
                         _: 1
                       }, 8, ["aria-describedby"]),
-                      s("span", {
+                      i("span", {
                         id: n(o),
                         class: "b-inspector__return-content-description"
-                      }, T(n(c)("returnToMainContentDescription")), 9, de)
+                      }, M(n(c)("returnToMainContentDescription")), 9, de)
                     ], 64)),
-                    i(n(X), {
+                    r(n(X), {
                       el: "h2",
                       variant: "title",
                       class: "b-inspector__title"
                     }, {
                       default: l(() => [
-                        H(T(e.title), 1)
+                        A(M(e.title), 1)
                       ]),
                       _: 1
                     }),
-                    s("div", fe, [
-                      e.expandable ? (f(), O(n(k), {
+                    i("div", fe, [
+                      e.expandable ? (f(), F(n(E), {
                         key: 0,
                         variant: "tertiary",
-                        onClick: a[0] || (a[0] = (d) => r("expand"))
+                        onClick: a[0] || (a[0] = (d) => s("expand"))
                       }, {
                         iconLeft: l(() => [
-                          i(n(ee), {
+                          r(n(ee), {
                             "svg-title": n(c)("expand")
                           }, null, 8, ["svg-title"])
                         ]),
                         _: 1
-                      })) : E("", !0),
-                      i(n(k), {
+                      })) : y("", !0),
+                      r(n(E), {
                         variant: "tertiary",
-                        onClick: a[1] || (a[1] = (d) => r("update:is-open", !1))
+                        onClick: a[1] || (a[1] = (d) => s("update:is-open", !1))
                       }, {
                         iconLeft: l(() => [
-                          i(n(te), {
+                          r(n(te), {
                             "svg-title": n(c)("close")
                           }, null, 8, ["svg-title"])
                         ]),
@@ -164,25 +171,25 @@ const I = {
                       })
                     ])
                   ]),
-                  s("div", ve, [
-                    e.loading ? (f(), O(n(j), {
+                  i("div", ve, [
+                    e.loading ? (f(), F(n(j), {
                       key: 0,
                       large: "",
                       class: "b-inspector__loading-indicator"
-                    })) : w(e.$slots, "content", { key: 1 }, void 0, !0)
+                    })) : L(e.$slots, "content", { key: 1 }, void 0, !0)
                   ])
                 ])
               ]),
               _: 3
             }, 8, ["disabled"])
-          ], 40, le)) : E("", !0)
+          ], 40, le)) : y("", !0)
         ]),
         _: 3
       })
     ], 34));
   }
-}), Me = /* @__PURE__ */ ie(me, [["__scopeId", "data-v-7df4c2ca"]]);
+}), xe = /* @__PURE__ */ re(me, [["__scopeId", "data-v-7df4c2ca"]]);
 export {
-  Me as B
+  xe as B
 };
-//# sourceMappingURL=inspector.B9k4tJWe.js.map
+//# sourceMappingURL=inspector.DMhKNW1K.js.map

package/dist/chunks/{inspector.B9k4tJWe.js.map → inspector.DMhKNW1K.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.B9k4tJWe.js","sources":["../../../vue2/src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../../vue2/src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                            <div class=\"b-inspector__icons\">\n                                <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                    <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                                </bento-button>\n                                <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                    <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                                </bento-button>\n                            </div>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\" />\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoInspectorProps>(), {\n        activePage: '',\n        expandable: false,\n        isOpen: false,\n        loading: false,\n        size: 'small',\n        relativeLayout: 'push-content',\n        pageFocusAnchor: null,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update to keep isOpen prop in sync\n         */\n        (e: 'update:is-open', value: boolean): void;\n        /**\n         * Emits update to keep activePage prop in sync\n         */\n        (e: 'update:active-page', value: string): void;\n        /**\n         * Emits event when user click expand button\n         */\n        (e: 'expand'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","props","__props","emit","__emit","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":"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"}
+{"version":3,"file":"inspector.DMhKNW1K.js","sources":["../../../vue2/src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../../vue2/src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                            <div class=\"b-inspector__icons\">\n                                <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                    <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                                </bento-button>\n                                <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                    <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                                </bento-button>\n                            </div>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\" />\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoInspectorProps>(), {\n        activePage: '',\n        expandable: false,\n        isOpen: false,\n        loading: false,\n        size: 'small',\n        relativeLayout: 'push-content',\n        pageFocusAnchor: null,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update to keep isOpen prop in sync\n         */\n        (e: 'update:is-open', value: boolean): void;\n        /**\n         * Emits update to keep activePage prop in sync\n         */\n        (e: 'update:active-page', value: string): void;\n        /**\n         * Emits event when user click expand button\n         */\n        (e: 'expand'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","props","__props","emit","__emit","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":"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"}

package/dist/chunks/{list-item.DO5uULke.js → list-item.BHvXpqaS.js}

@@ -2,7 +2,7 @@ import { defineComponent as f, computed as b, openBlock as e, createBlock as n,
 import { _ as y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { C as E } from "./chevron-right-small.BCinNiMt.js";
 import { B as N } from "./status.H00BAmRx.js";
-import { B as V } from "./tag.DujMVFh-.js";
+import { B as V } from "./tag.YN2r-Pp3.js";
 import { B as v } from "./typography.B3J6_tYk.js";
 import { u as x } from "./use-has-slot.CyMiImRQ.js";
 import "../assets/list-item.css";
@@ -125,4 +125,4 @@ export {
   tt as a,
   Z as l
 };
-//# sourceMappingURL=list-item.DO5uULke.js.map
+//# sourceMappingURL=list-item.BHvXpqaS.js.map

package/dist/chunks/{list-item.DO5uULke.js.map → list-item.BHvXpqaS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"list-item.DO5uULke.js","sources":["../../../vue2/src/components/list/list.vue","../../../vue2/src/components/list/components/list-item/list-item.vue"],"sourcesContent":["<template>\n    <component :is=\"listElement\" class=\"b-list\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import type { BentoListProps } from './list.types';\n\n    const props = withDefaults(defineProps<BentoListProps>(), {\n        type: 'unordered',\n    });\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\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    export default {\n        name: 'bento-list',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li 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            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\">\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography v-if=\"props.label\" class=\"b-list-item__label\" el=\"span\" stronger>\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, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\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 type { BentoListItemProps } from './list-item.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(defineProps<BentoListItemProps>(), {\n        showStatus: false,\n        statusColor: 'blue',\n        tag: undefined,\n        withChevron: false,\n        showTopDivider: false,\n        showBottomDivider: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when a clickable list item is triggered.\n         */\n        (e: 'click'): void;\n    }>();\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</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    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["__default__$1","props","__props","listElement","computed","__default__","slots","useSlots","hasSlot","useHasSlot","emit","__emit","onItemClick","onItemKeydown","event","conditionalClasses"],"mappings":";;;;;;;;AA2CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;AAnCA,UAAAC,IAAAC,GAIAC,IAAAC,EAAA,MAAAH,EAAA,SAAA,YAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;GCqHAI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAL,IAAAC,GASAQ,IAAAC,GAOAC,IAAA,MAAA;AACI,MAAAX,EAAA,eAGAS,EAAA,OAAA;AAAA,IAAY,GAGhBG,IAAA,CAAAC,MAAA;AACI,MAAAb,EAAA,gBAGAa,EAAA,QAAA,WAAAA,EAAA,QAAA,SACIA,EAAA,eAAA,GACAJ,EAAA,OAAA;AAAA,IACJ,GAGJK,IAAAX,EAAA,OAAA;AAAA,MAA2C,iCAAAH,EAAA;AAAA,MACA,mCAAAA,EAAA;AAAA,MACE,sCAAAA,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"list-item.BHvXpqaS.js","sources":["../../../vue2/src/components/list/list.vue","../../../vue2/src/components/list/components/list-item/list-item.vue"],"sourcesContent":["<template>\n    <component :is=\"listElement\" class=\"b-list\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import type { BentoListProps } from './list.types';\n\n    const props = withDefaults(defineProps<BentoListProps>(), {\n        type: 'unordered',\n    });\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\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    export default {\n        name: 'bento-list',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li 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            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\">\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography v-if=\"props.label\" class=\"b-list-item__label\" el=\"span\" stronger>\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, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\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 type { BentoListItemProps } from './list-item.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(defineProps<BentoListItemProps>(), {\n        showStatus: false,\n        statusColor: 'blue',\n        tag: undefined,\n        withChevron: false,\n        showTopDivider: false,\n        showBottomDivider: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when a clickable list item is triggered.\n         */\n        (e: 'click'): void;\n    }>();\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</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    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["__default__$1","props","__props","listElement","computed","__default__","slots","useSlots","hasSlot","useHasSlot","emit","__emit","onItemClick","onItemKeydown","event","conditionalClasses"],"mappings":";;;;;;;;AA2CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;AAnCA,UAAAC,IAAAC,GAIAC,IAAAC,EAAA,MAAAH,EAAA,SAAA,YAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;GCqHAI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAL,IAAAC,GASAQ,IAAAC,GAOAC,IAAA,MAAA;AACI,MAAAX,EAAA,eAGAS,EAAA,OAAA;AAAA,IAAY,GAGhBG,IAAA,CAAAC,MAAA;AACI,MAAAb,EAAA,gBAGAa,EAAA,QAAA,WAAAA,EAAA,QAAA,SACIA,EAAA,eAAA,GACAJ,EAAA,OAAA;AAAA,IACJ,GAGJK,IAAAX,EAAA,OAAA;AAAA,MAA2C,iCAAAH,EAAA;AAAA,MACA,mCAAAA,EAAA;AAAA,MACE,sCAAAA,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.Cvplth7d.js → listbox-option-tag.CVxaZqbc.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, computed as i, resolveComponent as t, openBlock as e, createElementBlock as s, createElementVNode as l, createVNode as c, createBlock as m, withCtx as _, createTextVNode as b, toDisplayString as d, createCommentVNode as g } from "vue";
-import { B as f } from "./tag.DujMVFh-.js";
+import { B as f } from "./tag.YN2r-Pp3.js";
 import { B as u } from "./typography.B3J6_tYk.js";
 import { _ as h } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/listbox-option-tag.css";
@@ -54,4 +54,4 @@ const O = /* @__PURE__ */ h(y, [["render", x], ["__scopeId", "data-v-f55ef3b1"]]
 export {
   O as L
 };
-//# sourceMappingURL=listbox-option-tag.Cvplth7d.js.map
+//# sourceMappingURL=listbox-option-tag.CVxaZqbc.js.map

package/dist/chunks/{listbox-option-tag.Cvplth7d.js.map → listbox-option-tag.CVxaZqbc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.Cvplth7d.js","sources":["../../../vue2/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","openBlock","createElementBlock","_hoisted_1","createElementVNode","_ctx","_hoisted_2","createTextVNode","toDisplayString","createCommentVNode"],"mappings":";;;;;AAmBI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAC;AAAA,IACR,iBAAAC;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,SAFPC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;AAzCW,SAAAE,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA,IAA2BC,EAAA,QAAA;AAAA;IACqE,GAAA;AAAA;QAAzB,OAAA;AAAA,QAAY,OAAAC,EAAA,OAAA,MAAA,SAAA;AAAA,QAHlG,SAAAA,EAAA;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAK4C,GAAA,GAAAC,CAAA;AAAA;MAAW,KAAA;AAAA,MAAM,IAAA;AAAA,MAL7D,OAAA;AAAA,IAAA,GAAA;AAAA;QAAAC,EAAAC,EAAAH,EAAA,OAAA,KAAA,GAAA,CAAA;AAAA,MAAA,CAAA;AAAA,MAAA,GAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA;;;"}
+{"version":3,"file":"listbox-option-tag.CVxaZqbc.js","sources":["../../../vue2/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","openBlock","createElementBlock","_hoisted_1","createElementVNode","_ctx","_hoisted_2","createTextVNode","toDisplayString","createCommentVNode"],"mappings":";;;;;AAmBI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAC;AAAA,IACR,iBAAAC;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,SAFPC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;AAzCW,SAAAE,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA,IAA2BC,EAAA,QAAA;AAAA;IACqE,GAAA;AAAA;QAAzB,OAAA;AAAA,QAAY,OAAAC,EAAA,OAAA,MAAA,SAAA;AAAA,QAHlG,SAAAA,EAAA;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAK4C,GAAA,GAAAC,CAAA;AAAA;MAAW,KAAA;AAAA,MAAM,IAAA;AAAA,MAL7D,OAAA;AAAA,IAAA,GAAA;AAAA;QAAAC,EAAAC,EAAAH,EAAA,OAAA,KAAA,GAAA,CAAA;AAAA,MAAA,CAAA;AAAA,MAAA,GAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA;;;"}