@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/pagination.js

@@ -1,12 +1,13 @@
-import { defineComponent as y, ref as z, computed as v, resolveComponent as d, openBlock as o, createElementBlock as c, createVNode as r, withCtx as u, createBlock as f, resolveDynamicComponent as E, mergeProps as P, createSlots as U, createTextVNode as $, toDisplayString as m, createCommentVNode as C, pushScopeId as b, popScopeId as T, createElementVNode as p, normalizeClass as j } from "vue";
-import { B as k, a as R } from "./chunks/index.222d29b0.js";
-import { B as A } from "./chunks/dropdown.8b415aac.js";
-import { g as F } from "./chunks/unique-id.a2a2b458.js";
-import { g as D, a as M } from "./chunks/i18n.6c402773.js";
-import { _ as h } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as J, a as Y } from "./chunks/button.e1c39f66.js";
-import "./assets/index13.css";
-const K = {
+import { defineComponent as y, ref as A, computed as m, resolveComponent as u, openBlock as o, createElementBlock as _, createVNode as p, withCtx as c, createBlock as P, resolveDynamicComponent as E, mergeProps as C, createSlots as U, createTextVNode as N, toDisplayString as h, createCommentVNode as $, pushScopeId as T, popScopeId as w, createElementVNode as d, toRefs as V, normalizeClass as j } from "vue";
+import { u as J } from "./chunks/aria-label.ac9651a5.js";
+import { B as R } from "./chunks/index.89b00b94.js";
+import { B as F } from "./chunks/dropdown.b798a82e.js";
+import { g as M } from "./chunks/unique-id.a2a2b458.js";
+import { g as D, a as Z } from "./chunks/i18n.6c402773.js";
+import { _ as f } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { a as K } from "./chunks/button.a8462029.js";
+import "./assets/index29.css";
+const q = {
   "en-US": {
     showingItems: "Showing {itemCount} items",
     showingItemsWithTotal: "Showing {itemCount} of {totalCount} items"
@@ -31,19 +32,19 @@ const K = {
     showingItems: "Mostrando {itemCount} artículos",
     showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículos"
   }
-}, q = 50, N = [
+}, G = 50, S = [
   { label: "10", value: 10 },
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   // DEFAULT_NUMBER_OF_RESULTS
   { label: "75", value: 75 },
   { label: "100", value: 100 }
-], G = y({
+], H = y({
   name: "bento-pagination-context-results-per-page",
-  i18n: { messages: K },
+  i18n: { messages: q },
   components: {
-    BentoDropdown: A,
-    BentoTypography: k
+    BentoDropdown: F,
+    BentoTypography: R
   },
   props: {
     /**
@@ -51,8 +52,8 @@ const K = {
      */
     itemsPerPage: {
       type: Number,
-      default: q,
-      validator: (e) => N.some(({ value: a }) => a === e)
+      default: G,
+      validator: (e) => S.some(({ value: t }) => t === e)
     },
     /**
      * The total number of items the pager is paging through.
@@ -60,40 +61,36 @@ const K = {
     totalCount: { type: Number, default: null }
   },
   emits: ["select"],
-  setup(e, { emit: a }) {
-    const i = F("b-pagination-context-number-elements"), n = z(N), s = M(), l = (t) => {
-      a("select", t);
-    }, g = v(() => e.totalCount ? "showingItemsWithTotal" : "showingItems");
+  setup(e, { emit: t }) {
+    const n = M("b-pagination-context-number-elements"), i = A(S), s = Z(), l = (a) => {
+      t("select", a);
+    }, g = m(() => e.totalCount ? "showingItemsWithTotal" : "showingItems");
     return {
       // Values
-      dropdownId: i,
-      dropdownOptions: n,
+      dropdownId: n,
+      dropdownOptions: i,
       i18nComponent: s,
       translationPathKey: g,
       // Methods
       getI18nProps: D,
-      // Enums
-      BentoTypographyElement: R,
       // Events
       onSelectChange: l
     };
   }
 });
-const H = { class: "b-pagination-results-per-page" };
-function Q(e, a, i, n, s, l) {
-  const g = d("bento-dropdown"), t = d("bento-typography");
-  return o(), c("div", H, [
-    r(t, {
-      el: e.BentoTypographyElement.DIV
-    }, {
-      default: u(() => [
-        (o(), f(E(e.i18nComponent), P(e.getI18nProps(e.translationPathKey), {
+const Q = { class: "b-pagination-results-per-page" };
+function X(e, t, n, i, s, l) {
+  const g = u("bento-dropdown"), a = u("bento-typography");
+  return o(), _("div", Q, [
+    p(a, { el: "div" }, {
+      default: c(() => [
+        (o(), P(E(e.i18nComponent), C(e.getI18nProps(e.translationPathKey), {
           class: "b-pagination-results-per-page__dropdown-container",
           tag: "div",
           plural: e.totalCount
         }), U({
-          itemCount: u(() => [
-            r(g, {
+          itemCount: c(() => [
+            p(g, {
               id: e.dropdownId,
               value: e.itemsPerPage,
               items: e.dropdownOptions,
@@ -106,18 +103,18 @@ function Q(e, a, i, n, s, l) {
         }, [
           e.totalCount ? {
             name: "totalCount",
-            fn: u(() => [
-              $(m(e.totalCount), 1)
+            fn: c(() => [
+              N(h(e.totalCount), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1040, ["plural"]))
       ]),
       _: 1
-    }, 8, ["el"])
+    })
   ]);
 }
-const X = /* @__PURE__ */ h(G, [["render", Q], ["__scopeId", "data-v-ca80d3ba"]]), x = {
+const Y = /* @__PURE__ */ f(H, [["render", X], ["__scopeId", "data-v-1c7ef9c8"]]), x = {
   "en-US": {
     pageOfTotalPages: "Page {page} of {totalPages}",
     pageOneOfOne: "Page 1 of 1",
@@ -152,8 +149,8 @@ const X = /* @__PURE__ */ h(G, [["render", Q], ["__scopeId", "data-v-ca80d3ba"]]
   i18n: { messages: x },
   name: "bento-pagination-context",
   components: {
-    BentoDropdown: A,
-    BentoTypography: k
+    BentoDropdown: F,
+    BentoTypography: R
   },
   props: {
     /**
@@ -170,39 +167,37 @@ const X = /* @__PURE__ */ h(G, [["render", Q], ["__scopeId", "data-v-ca80d3ba"]]
     totalPages: { type: Number, default: null }
   },
   emits: ["page-selected"],
-  setup(e, { emit: a }) {
-    const i = F("bento-pagination-context-current-page"), n = (_) => a("page-selected", _), s = M(), l = (_) => ({
-      label: _.toString(),
-      value: _
-    }), g = (_, w) => w + 1, t = v(
+  setup(e, { emit: t }) {
+    const n = M("bento-pagination-context-current-page"), i = (r) => t("page-selected", r), s = Z(), l = (r) => ({
+      label: r.toString(),
+      value: r
+    }), g = (r, b) => b + 1, a = m(
       () => Array.from(new Array(e.totalPages), g).map(l)
     );
     return {
       // Values
-      dropdownId: i,
-      listOfAvailablePages: t,
+      dropdownId: n,
+      listOfAvailablePages: a,
       i18nComponent: s,
       // Methods
       getI18nProps: D,
       // Events
-      onPageSelectChange: n,
-      // Enums
-      BentoTypographyElement: R
+      onPageSelectChange: i
     };
   }
 });
 const te = { class: "b-pagination-context" };
-function ae(e, a, i, n, s, l) {
-  const g = d("bento-dropdown"), t = d("bento-typography");
-  return o(), c("div", te, [
-    e.totalPages > 1 ? (o(), f(t, {
+function ae(e, t, n, i, s, l) {
+  const g = u("bento-dropdown"), a = u("bento-typography");
+  return o(), _("div", te, [
+    e.totalPages > 1 ? (o(), P(a, {
       key: 0,
-      el: e.BentoTypographyElement.DIV
+      el: "div"
     }, {
-      default: u(() => [
-        (o(), f(E(e.i18nComponent), P(e.getI18nProps("pageOfTotalPages"), { tag: "div" }), {
-          page: u(() => [
-            r(g, {
+      default: c(() => [
+        (o(), P(E(e.i18nComponent), C(e.getI18nProps("pageOfTotalPages"), { tag: "div" }), {
+          page: c(() => [
+            p(g, {
               id: e.dropdownId,
               value: e.page,
               items: e.listOfAvailablePages,
@@ -211,137 +206,137 @@ function ae(e, a, i, n, s, l) {
               onInput: e.onPageSelectChange
             }, null, 8, ["id", "value", "items", "aria-label", "onInput"])
           ]),
-          totalPages: u(() => [
-            $(m(e.totalPages), 1)
+          totalPages: c(() => [
+            N(h(e.totalPages), 1)
           ]),
           _: 1
         }, 16))
       ]),
       _: 1
-    }, 8, ["el"])) : e.totalPages === 1 ? (o(), f(t, {
+    })) : e.totalPages === 1 ? (o(), P(a, {
       key: 1,
-      el: e.BentoTypographyElement.SPAN
+      el: "span"
     }, {
-      default: u(() => [
-        $(m(e.$t("pageOneOfOne")), 1)
+      default: c(() => [
+        N(h(e.$t("pageOneOfOne")), 1)
       ]),
       _: 1
-    }, 8, ["el"])) : (o(), f(t, {
+    })) : (o(), P(a, {
       key: 2,
-      el: e.BentoTypographyElement.SPAN
+      el: "span"
     }, {
-      default: u(() => [
-        $(m(e.$t("pageNumber", { page: e.page })), 1)
+      default: c(() => [
+        N(h(e.$t("pageNumber", { page: e.page })), 1)
       ]),
       _: 1
-    }, 8, ["el"]))
+    }))
   ]);
 }
-const ne = /* @__PURE__ */ h(ee, [["render", ae], ["__scopeId", "data-v-4f29e7b2"]]);
-let S = 0;
+const ne = /* @__PURE__ */ f(ee, [["render", ae], ["__scopeId", "data-v-3e3a7bc1"]]);
+let L = 0;
 const oe = {
   beforeCreate() {
-    this.uuid = S.toString(), S += 1;
+    this.uuid = L.toString(), L += 1;
   }
-}, Z = (e) => (b("data-v-d0300c1f"), e = e(), T(), e), ie = { key: 0 }, se = /* @__PURE__ */ Z(() => /* @__PURE__ */ p("path", {
+}, W = (e) => (T("data-v-d0300c1f"), e = e(), w(), e), ie = { key: 0 }, se = /* @__PURE__ */ W(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4.25 11C4.25 11.4142 4.58579 11.75 5 11.75C5.41421 11.75 5.75 11.4142 5.75 11L5.75 4.99999C5.75 4.58577 5.41421 4.24999 5 4.24999C4.58579 4.24999 4.25 4.58577 4.25 4.99998L4.25 11Z",
   "clip-rule": "evenodd"
-}, null, -1)), le = /* @__PURE__ */ Z(() => /* @__PURE__ */ p("path", {
+}, null, -1)), le = /* @__PURE__ */ W(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M11.5303 5.53031C11.8232 5.23742 11.8232 4.76255 11.5303 4.46965C11.2374 4.17676 10.7626 4.17676 10.4697 4.46965L7.46967 7.46965C7.17678 7.76255 7.17678 8.23742 7.46967 8.53031L10.4697 11.5303C10.7626 11.8232 11.2374 11.8232 11.5303 11.5303C11.8232 11.2374 11.8232 10.7625 11.5303 10.4697L9.06066 7.99998L11.5303 5.53031Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function ge(e, a, i, n, s, l) {
-  return o(), c("svg", P({ role: "img" }, e.$attrs, {
+function ge(e, t, n, i, s, l) {
+  return o(), _("svg", C({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), c("title", ie, m(e.$attrs["svg-title"]), 1)) : C("", !0),
+    e.$attrs["svg-title"] ? (o(), _("title", ie, h(e.$attrs["svg-title"]), 1)) : $("", !0),
     se,
     le
   ], 16);
 }
-const re = /* @__PURE__ */ h(oe, [["render", ge], ["__scopeId", "data-v-d0300c1f"]]);
-let L = 0;
+const re = /* @__PURE__ */ f(oe, [["render", ge], ["__scopeId", "data-v-d0300c1f"]]);
+let O = 0;
 const pe = {
   beforeCreate() {
-    this.uuid = L.toString(), L += 1;
+    this.uuid = O.toString(), O += 1;
   }
-}, V = (e) => (b("data-v-526f9959"), e = e(), T(), e), de = { key: 0 }, ue = /* @__PURE__ */ V(() => /* @__PURE__ */ p("path", {
+}, z = (e) => (T("data-v-526f9959"), e = e(), w(), e), de = { key: 0 }, ue = /* @__PURE__ */ z(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4.46967 10.4697C4.17678 10.7626 4.17678 11.2374 4.46967 11.5303C4.76256 11.8232 5.23744 11.8232 5.53033 11.5303L8.53033 8.53032C8.82322 8.23743 8.82322 7.76256 8.53033 7.46966L5.53033 4.46966C5.23744 4.17677 4.76256 4.17677 4.46967 4.46966C4.17678 4.76256 4.17678 5.23743 4.46967 5.53032L6.93934 7.99999L4.46967 10.4697Z",
   "clip-rule": "evenodd"
-}, null, -1)), ce = /* @__PURE__ */ V(() => /* @__PURE__ */ p("path", {
+}, null, -1)), ce = /* @__PURE__ */ z(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M11.75 4.99999C11.75 4.58578 11.4142 4.24999 11 4.24999C10.5858 4.24999 10.25 4.58578 10.25 4.99999V11C10.25 11.4142 10.5858 11.75 11 11.75C11.4142 11.75 11.75 11.4142 11.75 11L11.75 4.99999Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function _e(e, a, i, n, s, l) {
-  return o(), c("svg", P({ role: "img" }, e.$attrs, {
+function _e(e, t, n, i, s, l) {
+  return o(), _("svg", C({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), c("title", de, m(e.$attrs["svg-title"]), 1)) : C("", !0),
+    e.$attrs["svg-title"] ? (o(), _("title", de, h(e.$attrs["svg-title"]), 1)) : $("", !0),
     ue,
     ce
   ], 16);
 }
-const ve = /* @__PURE__ */ h(pe, [["render", _e], ["__scopeId", "data-v-526f9959"]]);
-let B = 0;
+const ve = /* @__PURE__ */ f(pe, [["render", _e], ["__scopeId", "data-v-526f9959"]]);
+let k = 0;
 const me = {
   beforeCreate() {
-    this.uuid = B.toString(), B += 1;
+    this.uuid = k.toString(), k += 1;
   }
-}, he = (e) => (b("data-v-ad07f9f1"), e = e(), T(), e), fe = { key: 0 }, Pe = /* @__PURE__ */ he(() => /* @__PURE__ */ p("path", {
+}, he = (e) => (T("data-v-ad07f9f1"), e = e(), w(), e), fe = { key: 0 }, Pe = /* @__PURE__ */ he(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M10.0303 4.46967C10.3232 4.76256 10.3232 5.23744 10.0303 5.53033L7.56066 8L10.0303 10.4697C10.3232 10.7626 10.3232 11.2374 10.0303 11.5303C9.73744 11.8232 9.26256 11.8232 8.96967 11.5303L5.96967 8.53033C5.67678 8.23744 5.67678 7.76256 5.96967 7.46967L8.96967 4.46967C9.26256 4.17678 9.73744 4.17678 10.0303 4.46967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Ce(e, a, i, n, s, l) {
-  return o(), c("svg", P({ role: "img" }, e.$attrs, {
+function Ce(e, t, n, i, s, l) {
+  return o(), _("svg", C({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), c("title", fe, m(e.$attrs["svg-title"]), 1)) : C("", !0),
+    e.$attrs["svg-title"] ? (o(), _("title", fe, h(e.$attrs["svg-title"]), 1)) : $("", !0),
     Pe
   ], 16);
 }
-const be = /* @__PURE__ */ h(me, [["render", Ce], ["__scopeId", "data-v-ad07f9f1"]]);
-let O = 0;
-const Te = {
+const be = /* @__PURE__ */ f(me, [["render", Ce], ["__scopeId", "data-v-ad07f9f1"]]);
+let B = 0;
+const $e = {
   beforeCreate() {
-    this.uuid = O.toString(), O += 1;
+    this.uuid = B.toString(), B += 1;
   }
-}, $e = (e) => (b("data-v-5d0b9449"), e = e(), T(), e), ye = { key: 0 }, we = /* @__PURE__ */ $e(() => /* @__PURE__ */ p("path", {
+}, Te = (e) => (T("data-v-5d0b9449"), e = e(), w(), e), we = { key: 0 }, Ne = /* @__PURE__ */ Te(() => /* @__PURE__ */ d("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M5.96967 11.5303C5.67678 11.2374 5.67678 10.7626 5.96967 10.4697L8.43934 8L5.96967 5.53033C5.67678 5.23744 5.67678 4.76256 5.96967 4.46967C6.26256 4.17678 6.73744 4.17678 7.03033 4.46967L10.0303 7.46967C10.171 7.61032 10.25 7.80109 10.25 8C10.25 8.19891 10.171 8.38968 10.0303 8.53033L7.03033 11.5303C6.73744 11.8232 6.26256 11.8232 5.96967 11.5303Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Ie(e, a, i, n, s, l) {
-  return o(), c("svg", P({ role: "img" }, e.$attrs, {
+function ye(e, t, n, i, s, l) {
+  return o(), _("svg", C({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), c("title", ye, m(e.$attrs["svg-title"]), 1)) : C("", !0),
-    we
+    e.$attrs["svg-title"] ? (o(), _("title", we, h(e.$attrs["svg-title"]), 1)) : $("", !0),
+    Ne
   ], 16);
 }
-const Ne = /* @__PURE__ */ h(Te, [["render", Ie], ["__scopeId", "data-v-5d0b9449"]]), Se = {
+const Ie = /* @__PURE__ */ f($e, [["render", ye], ["__scopeId", "data-v-5d0b9449"]]), Se = {
   "en-US": {
     navigateToTheFirstPage: "Navigate to the first page",
     navigateToThePreviousPage: "Navigate to the previous page",
@@ -382,11 +377,11 @@ const Ne = /* @__PURE__ */ h(Te, [["render", Ie], ["__scopeId", "data-v-5d0b9449
   i18n: { messages: Se },
   name: "adl-pagination-controls",
   components: {
-    BentoButton: J,
+    BentoButton: K,
     SkipLeft: re,
     SkipRight: ve,
     ChevronLeft: be,
-    ChevronRight: Ne
+    ChevronRight: Ie
   },
   props: {
     /**
@@ -403,97 +398,91 @@ const Ne = /* @__PURE__ */ h(Te, [["render", Ie], ["__scopeId", "data-v-5d0b9449
     totalPages: { type: Number, default: null }
   },
   emits: ["navigate"],
-  setup(e, { emit: a }) {
-    const i = v(() => e.page === 1), n = v(() => e.page === e.totalPages), s = v(() => !e.hasNext || n.value), l = v(() => {
-      const t = !e.hasNext, _ = !e.totalPages;
-      return t || n.value || _;
+  setup(e, { emit: t }) {
+    const n = m(() => e.page === 1), i = m(() => e.page === e.totalPages), s = m(() => !e.hasNext || i.value), l = m(() => {
+      const a = !e.hasNext, r = !e.totalPages;
+      return a || i.value || r;
     });
     return {
       // Values
       isNextButtonDisabled: s,
-      isCurrentPageFirst: i,
-      isCurrentPageLast: n,
+      isCurrentPageFirst: n,
+      isCurrentPageLast: i,
       isLastPageButtonDisabled: l,
       // Events
-      navigate: (t) => {
-        a("navigate", t);
-      },
-      // Enums
-      BentoButtonVariant: Y
+      navigate: (a) => {
+        t("navigate", a);
+      }
     };
   }
 });
-const Be = { class: "b-pagination-controls" }, Oe = { class: "b-pagination-controls__item" }, Ee = { class: "b-pagination-controls__item" }, ke = { class: "b-pagination-controls__item" }, Re = { class: "b-pagination-controls__item" };
-function Ae(e, a, i, n, s, l) {
-  const g = d("skip-left"), t = d("bento-button"), _ = d("chevron-left"), w = d("chevron-right"), W = d("skip-right");
-  return o(), c("ul", Be, [
-    p("li", Oe, [
-      r(t, {
+const Oe = { class: "b-pagination-controls" }, ke = { class: "b-pagination-controls__item" }, Be = { class: "b-pagination-controls__item" }, Ae = { class: "b-pagination-controls__item" }, Ee = { class: "b-pagination-controls__item" };
+function Re(e, t, n, i, s, l) {
+  const g = u("skip-left"), a = u("bento-button"), r = u("chevron-left"), b = u("chevron-right"), I = u("skip-right");
+  return o(), _("ul", Oe, [
+    d("li", ke, [
+      p(a, {
         disabled: e.isCurrentPageFirst,
-        variant: e.BentoButtonVariant.TERTIARY,
-        tertiary: "",
+        variant: "tertiary",
         condensed: "",
-        onClick: a[0] || (a[0] = (I) => e.navigate(1))
+        onClick: t[0] || (t[0] = (v) => e.navigate(1))
       }, {
-        iconLeft: u(() => [
-          r(g, {
+        iconLeft: c(() => [
+          p(g, {
             "svg-title": e.$t("navigateToTheFirstPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
-      }, 8, ["disabled", "variant"])
+      }, 8, ["disabled"])
     ]),
-    p("li", Ee, [
-      r(t, {
+    d("li", Be, [
+      p(a, {
         disabled: e.isCurrentPageFirst,
-        variant: e.BentoButtonVariant.TERTIARY,
-        tertiary: "",
+        variant: "tertiary",
         condensed: "",
-        onClick: a[1] || (a[1] = (I) => e.navigate(e.page - 1))
+        onClick: t[1] || (t[1] = (v) => e.navigate(e.page - 1))
       }, {
-        iconLeft: u(() => [
-          r(_, {
+        iconLeft: c(() => [
+          p(r, {
             "svg-title": e.$t("navigateToThePreviousPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
-      }, 8, ["disabled", "variant"])
+      }, 8, ["disabled"])
     ]),
-    p("li", ke, [
-      r(t, {
+    d("li", Ae, [
+      p(a, {
         disabled: e.isNextButtonDisabled,
-        variant: e.BentoButtonVariant.TERTIARY,
-        tertiary: "",
+        variant: "tertiary",
         condensed: "",
-        onClick: a[2] || (a[2] = (I) => e.navigate(e.page + 1))
+        onClick: t[2] || (t[2] = (v) => e.navigate(e.page + 1))
       }, {
-        iconLeft: u(() => [
-          r(w, {
+        iconLeft: c(() => [
+          p(b, {
             "svg-title": e.$t("navigateToTheNextPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
-      }, 8, ["disabled", "variant"])
+      }, 8, ["disabled"])
     ]),
-    p("li", Re, [
-      r(t, {
+    d("li", Ee, [
+      p(a, {
         disabled: e.isLastPageButtonDisabled,
-        variant: e.BentoButtonVariant.TERTIARY,
-        tertiary: "",
+        variant: "tertiary",
         condensed: "",
-        onClick: a[3] || (a[3] = (I) => e.navigate(e.totalPages))
+        onClick: t[3] || (t[3] = (v) => e.navigate(e.totalPages))
       }, {
-        iconLeft: u(() => [
-          r(W, {
+        iconLeft: c(() => [
+          p(I, {
             "svg-title": e.$t("navigateToTheLastPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
-      }, 8, ["disabled", "variant"])
+      }, 8, ["disabled"])
     ])
   ]);
 }
-const Fe = /* @__PURE__ */ h(Le, [["render", Ae], ["__scopeId", "data-v-8f38b953"]]), De = {
+const Fe = /* @__PURE__ */ f(Le, [["render", Re], ["__scopeId", "data-v-b1c3077d"]]), Me = {
   "en-US": {
     paginatedNavigation: "Paginated navigation",
     showingItemsWithTotal: "Showing {itemCount} of {totalCount} item | Showing {itemCount} of {totalCount} items"
@@ -518,15 +507,18 @@ const Fe = /* @__PURE__ */ h(Le, [["render", Ae], ["__scopeId", "data-v-8f38b953
     paginatedNavigation: "Navegación por páginas",
     showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículo | Mostrando {itemCount} de {totalCount} artículos"
   }
-}, Me = y({
-  i18n: { messages: De },
+}, De = y({
+  i18n: { messages: Me },
   name: "bento-pagination",
   components: {
     BentoPaginationContext: ne,
     BentoPaginationControls: Fe,
-    BentoPaginationResultsPerPage: X
+    BentoPaginationResultsPerPage: Y
   },
   props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * A brief description of the purpose of the navigation (for a11y).
      * Omit the term "navigation", as the screen reader will read both the role and the contents of the label.
@@ -565,54 +557,59 @@ const Fe = /* @__PURE__ */ h(Le, [["render", Ae], ["__scopeId", "data-v-8f38b953
     totalCount: { type: Number, default: null }
   },
   emits: ["navigate", "items-page", "update:page", "update:size"],
-  setup(e, { emit: a }) {
-    const i = v(
+  setup(e, { attrs: t, emit: n }) {
+    const i = A(t["aria-label"]), { ariaLabel: s } = V(e), l = J({
+      ariaLabel: i.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: s
+    }), g = m(
       () => !e.totalCount || !e.size ? null : Math.ceil(e.totalCount / e.size)
-    ), n = (t) => {
-      a("navigate", t), a("update:page", t);
-    }, s = (t) => {
-      n(t);
-    }, l = (t) => {
-      a("items-page", t), a("update:size", t), n(1);
-    }, g = v(() => ({
+    ), a = (v) => {
+      n("navigate", v), n("update:page", v);
+    }, r = (v) => {
+      a(v);
+    }, b = (v) => {
+      n("items-page", v), n("update:size", v), a(1);
+    }, I = m(() => ({
       "b-pagination__navigation--no-results-per-page": e.hidePageSize
     }));
     return {
       // Values
-      totalPages: i,
-      navigationConditionalClasses: g,
+      computedAriaLabel: l,
+      totalPages: g,
+      navigationConditionalClasses: I,
       // Events
-      navigate: n,
-      onItemsPerPageChange: l,
-      onPageSelected: s
+      navigate: a,
+      onItemsPerPageChange: b,
+      onPageSelected: r
     };
   }
 });
-const Ze = (e) => (b("data-v-1c9873b8"), e = e(), T(), e), Ve = { class: "b-pagination" }, We = ["aria-label"], ze = { class: "b-pagination__page-navigator" }, Ue = /* @__PURE__ */ Ze(() => /* @__PURE__ */ p("div", { class: "b-pagination__divider" }, null, -1));
-function je(e, a, i, n, s, l) {
-  const g = d("bento-pagination-results-per-page"), t = d("bento-pagination-context"), _ = d("bento-pagination-controls");
-  return o(), c("div", Ve, [
-    p("nav", {
-      "aria-label": e.ariaLabel,
+const Ze = (e) => (T("data-v-443af17b"), e = e(), w(), e), We = { class: "b-pagination" }, ze = ["aria-label"], Ue = { class: "b-pagination__page-navigator" }, Ve = /* @__PURE__ */ Ze(() => /* @__PURE__ */ d("div", { class: "b-pagination__divider" }, null, -1));
+function je(e, t, n, i, s, l) {
+  const g = u("bento-pagination-results-per-page"), a = u("bento-pagination-context"), r = u("bento-pagination-controls");
+  return o(), _("div", We, [
+    d("nav", {
+      "aria-label": e.computedAriaLabel,
       class: j(["b-pagination__navigation", e.navigationConditionalClasses])
     }, [
-      e.hidePageSize ? C("", !0) : (o(), f(g, {
+      e.hidePageSize ? $("", !0) : (o(), P(g, {
         key: 0,
         class: "b-pagination__results-per-page",
         "items-per-page": e.size,
         "total-count": e.totalCount,
         onSelect: e.onItemsPerPageChange
       }, null, 8, ["items-per-page", "total-count", "onSelect"])),
-      p("div", ze, [
-        r(t, {
+      d("div", Ue, [
+        p(a, {
           class: "b-pagination__context",
           "total-pages": e.totalPages,
           page: e.page,
           "total-count": e.totalCount,
           onPageSelected: e.onPageSelected
         }, null, 8, ["total-pages", "page", "total-count", "onPageSelected"]),
-        Ue,
-        r(_, {
+        Ve,
+        p(r, {
           class: "b-pagination__controls",
           "has-next": e.hasNext,
           page: e.page,
@@ -620,11 +617,11 @@ function je(e, a, i, n, s, l) {
           onNavigate: e.navigate
         }, null, 8, ["has-next", "page", "total-pages", "onNavigate"])
       ])
-    ], 10, We)
+    ], 10, ze)
   ]);
 }
-const Xe = /* @__PURE__ */ h(Me, [["render", je], ["__scopeId", "data-v-1c9873b8"]]);
+const xe = /* @__PURE__ */ f(De, [["render", je], ["__scopeId", "data-v-443af17b"]]);
 export {
-  Xe as BentoPagination
+  xe as BentoPagination
 };
 //# sourceMappingURL=pagination.js.map