@adyen/bento-vue2 1.21.1 → 1.23.0

package/dist/segmented-control.js

@@ -1,13 +1,13 @@
 import { defineComponent as g, ref as r, computed as s, toRef as k, toRefs as w, onMounted as L } from "vue";
-import { B as x } from "./chunks/index.7b7ef408.js";
+import { B as x } from "./chunks/index.be6917c8.js";
 import { g as I } from "./chunks/unique-id.a2a2b458.js";
 import { C as S } from "./chunks/checkmark.a6ed8f47.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { u as $ } from "./chunks/i18n.eb5b985b.js";
 import { u as W } from "./chunks/aria-label.ac9651a5.js";
 import { o as T } from "./chunks/resize.a041304d.js";
-import { b as A } from "./chunks/tooltip.1e44a4a6.js";
-import "./assets/index15.css";
+import { b as A } from "./chunks/tooltip.eb1eb37e.js";
+import "./assets/index40.css";
 const F = g({
   name: "bento-segmented-control-button",
   components: { BentoTypography: x, CheckmarkIcon: S },

package/dist/selection-card.js

@@ -1,14 +1,14 @@
 import { defineComponent as A, useSlots as M, computed as n, inject as P, ref as p, watch as z, provide as Y } from "vue";
-import { B as j } from "./chunks/index.7b7ef408.js";
+import { B as j } from "./chunks/index.be6917c8.js";
 import { u as F } from "./chunks/aria-label.ac9651a5.js";
 import { g as k } from "./chunks/unique-id.a2a2b458.js";
 import { u as U } from "./chunks/use-has-slot.fbeb19ec.js";
 import { a as H } from "./chunks/checkbox-input.1c3cc8ed.js";
 import { a as J } from "./chunks/radio-input.c6550a9c.js";
 import { n as $ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { C as K } from "./chunks/controls-group.70d7a0aa.js";
-import { E as Q } from "./chunks/error-message.294de2ad.js";
-import "./assets/index16.css";
+import { C as K } from "./chunks/controls-group.b17e40ad.js";
+import { E as Q } from "./chunks/error-message.7022fa86.js";
+import "./assets/index38.css";
 var b = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.ERROR = "error", l))(b || {});
 const G = Symbol("selection card radio input injection key"), W = {
   name: "bento-selection-card"

package/dist/sidepanel.js

@@ -1,15 +1,15 @@
 import { defineComponent as P, toRefs as T, ref as r, computed as B, watch as h, nextTick as k, provide as f } from "vue";
-import { B as N } from "./chunks/index.7b7ef408.js";
-import { F as x } from "./chunks/footer-actions.39973cb4.js";
-import { D as G, B as L, b as F, a as R } from "./chunks/dialog-page.32cbc60e.js";
+import { B as N } from "./chunks/index.be6917c8.js";
+import { F as x } from "./chunks/footer-actions.1f22f86d.js";
+import { D as G, B as L, b as F, a as R } from "./chunks/dialog-page.3965f89e.js";
 import { n as C } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as U } from "./chunks/button.325c7a15.js";
-import { B as w } from "./chunks/index.302e9cf2.js";
+import { a as U } from "./chunks/button.a823da67.js";
+import { B as w } from "./chunks/index.9d130872.js";
 import { C as V } from "./chunks/cross.04678d81.js";
 import { S as J } from "./chunks/sidepanel.keys.1ed8a57c.js";
 import { u as K } from "./chunks/i18n.eb5b985b.js";
 import { g as Y } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index17.css";
+import "./assets/index48.css";
 const $ = {}, z = /* @__PURE__ */ P({
   ...$,
   __name: "sidepanel-page",

package/dist/status.js

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

package/dist/stepper.js

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

package/dist/stepper.js.map

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

package/dist/structured-list.js

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

package/dist/summary-grid.js

@@ -4,10 +4,10 @@ import { S as h } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { G as E } from "./chunks/grid-layout.e0025286.js";
 import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as O } from "./info-icon.js";
-import { B as L, a as g } from "./chunks/index.7b7ef408.js";
+import { B as L, a as g } from "./chunks/index.be6917c8.js";
 import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.da2d53c1.js";
-import "./assets/index45.css";
+import { C as G } from "./chunks/copy.b20b47f9.js";
+import "./assets/index32.css";
 const P = l({
   name: "bento-summary-grid",
   components: { GridLayout: E },

package/dist/tabs.js

@@ -1,10 +1,10 @@
 import { defineComponent as m, toRefs as C, ref as b, provide as u, computed as w, inject as p, onUnmounted as A, watch as N, nextTick as B } from "vue";
 import { E as k, T as I, a as h } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.7b7ef408.js";
+import { B as R } from "./chunks/index.be6917c8.js";
 import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.96fb2670.js";
-import "./assets/index21.css";
+import { F as S } from "./chunks/fixed-scroller.077a5709.js";
+import "./assets/index33.css";
 const K = m({
   props: {
     /**

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.7b7ef408.js";
+import { B as d } from "./chunks/index.be6917c8.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.99c3d860.js";
-import { b as _ } from "./chunks/tooltip.1e44a4a6.js";
+import { b as _ } from "./chunks/tooltip.eb1eb37e.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index48.css";
+import "./assets/index37.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",