@vlalg-nimbus/nb-buttons 3.0.0 → 3.2.0

package/dist/nb-buttons.js

@@ -1,10 +1,10 @@
-import { useCssVars as j, toRefs as q, computed as t, openBlock as O, createElementBlock as L, normalizeClass as z, normalizeStyle as N, createElementVNode as R, renderSlot as A, createTextVNode as P, createCommentVNode as T, unref as oe, withModifiers as de, onMounted as se, ref as ie, watch as ce } from "vue";
-const G = (e, s) => {
-  const w = e.__vccOpts || e;
-  for (const [Y, V] of s)
-    w[Y] = V;
-  return w;
-}, fe = ["id"], ve = { class: "component-content__text" }, be = /* @__PURE__ */ Object.assign({
+import { useCssVars as j, toRefs as q, computed as t, openBlock as O, createElementBlock as E, normalizeClass as R, normalizeStyle as w, unref as V, withKeys as W, withModifiers as F, createElementVNode as z, renderSlot as K, createTextVNode as M, createCommentVNode as P, onMounted as ne, ref as fe, watch as ce, toDisplayString as be } from "vue";
+const G = (e, c) => {
+  const H = e.__vccOpts || e;
+  for (const [Y, N] of c)
+    H[Y] = N;
+  return H;
+}, ve = ["tabIndex", "aria-label", "aria-disabled"], pe = ["id"], ye = { class: "component-content__text" }, ge = /* @__PURE__ */ Object.assign({
   name: "NbButtonVavaGame",
   inheritAttrs: !1
 }, {
@@ -18,10 +18,26 @@ const G = (e, s) => {
       type: String,
       default: "ib",
       validator: (e = "") => {
-        const s = e.toLowerCase();
-        return ["b", "ib"].includes(s);
+        const c = e.toLowerCase();
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ece8e1"
@@ -92,102 +108,110 @@ const G = (e, s) => {
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((c) => ({
-      "32e6be5f": n.value,
-      "9f7534d6": B.value,
-      "0ebea8a7": W.value,
-      "4de13b94": k.value,
-      "4e9ec21e": r.value
+  setup(e, { emit: c }) {
+    j((C) => ({
+      "3b94cba3": o.value,
+      "6146add9": T.value,
+      "2753eae3": L.value,
+      "4edfa97a": $.value,
+      dd0b6f3c: s.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      textColor: g,
-      textColorHover: m,
-      buttonColor: b,
-      buttonColorHover: p,
-      uppercase: x,
-      paddingXContent: y,
-      paddingYContent: _,
-      paddingXBorder: C,
-      paddingYBorder: f,
-      borderColor: i,
-      borderOpacity: u,
-      disabled: v,
+    const H = c, Y = e, {
+      display: N,
+      textColor: B,
+      textColorHover: x,
+      buttonColor: S,
+      buttonColorHover: i,
+      uppercase: b,
+      paddingXContent: v,
+      paddingYContent: p,
+      paddingXBorder: h,
+      paddingYBorder: m,
+      borderColor: y,
+      borderOpacity: r,
+      disabled: f,
       fontFamily: X,
-      fontSize: H,
-      fontWeight: h
-    } = q(Y), S = t(() => {
-      const c = v.value ? "component-disabled" : "", D = V.value !== "b" ? "inline-block" : "block", F = g.value ? g.value : "#ece8e1", M = b.value ? b.value : "green", E = m.value ? m.value : "#ece8e1", J = p.value ? p.value : "cyan", K = i.value ? i.value : "#ffffff", Q = !u.value || !(u.value >= 0 && u.value <= 1) ? "0.5" : u.value, U = !C.value || C.value < 0 ? 0.3 : C.value, Z = !f.value || f.value < 0 ? 0.3 : f.value, ee = !y.value || y.value < 0 ? 0.5 : y.value, ae = !_.value || _.value < 0 ? 0.5 : _.value, le = x.value ? "uppercase" : "none", ne = X.value ? X.value : "'Lato', sans-serif", ue = H.value ? H.value : "1.6em", re = !h.value || h.value < 0 ? 100 : h.value;
+      fontSize: k,
+      fontWeight: g
+    } = q(Y), d = t(() => {
+      const C = f.value ? "component-disabled" : "", A = N.value !== "b" ? "inline-block" : "block", _ = B.value ? B.value : "#ece8e1", J = S.value ? S.value : "green", Q = x.value ? x.value : "#ece8e1", U = i.value ? i.value : "cyan", Z = y.value ? y.value : "#ffffff", ee = !r.value || !(r.value >= 0 && r.value <= 1) ? "0.5" : r.value, te = !h.value || h.value < 0 ? 0.3 : h.value, ae = !m.value || m.value < 0 ? 0.3 : m.value, le = !v.value || v.value < 0 ? 0.5 : v.value, ue = !p.value || p.value < 0 ? 0.5 : p.value, re = b.value ? "uppercase" : "none", de = X.value ? X.value : "'Lato', sans-serif", se = k.value ? k.value : "1.6em", ie = !g.value || g.value < 0 ? 100 : g.value;
       return {
-        disabled: c,
-        display: D,
-        textColor: F,
-        buttonColor: M,
-        textColorHover: E,
-        buttonColorHover: J,
-        borderColor: K,
-        borderOpacity: Q,
-        paddingXBorder: U,
-        paddingYBorder: Z,
-        paddingXContent: ee,
-        paddingYContent: ae,
-        uppercase: le,
-        font: ne,
-        fontSize: ue,
-        fontWeight: re
+        disabled: C,
+        display: A,
+        textColor: _,
+        buttonColor: J,
+        textColorHover: Q,
+        buttonColorHover: U,
+        borderColor: Z,
+        borderOpacity: ee,
+        paddingXBorder: te,
+        paddingYBorder: ae,
+        paddingXContent: le,
+        paddingYContent: ue,
+        uppercase: re,
+        font: de,
+        fontSize: se,
+        fontWeight: ie
       };
-    }), a = t(() => S.value.disabled), $ = t(() => ({
-      display: S.value.display
-    })), d = t(() => {
-      const c = S.value;
+    }), n = t(() => d.value.disabled), I = t(() => ({
+      display: d.value.display
+    })), u = t(() => {
+      const C = d.value;
       return {
-        padding: `${c.paddingYBorder}rem ${c.paddingXBorder}rem`,
-        fontSize: c.fontSize,
-        fontWeight: c.fontWeight
+        padding: `${C.paddingYBorder}rem ${C.paddingXBorder}rem`,
+        fontSize: C.fontSize,
+        fontWeight: C.fontWeight
       };
     }), l = t(() => {
-      const c = S.value;
+      const C = d.value;
       return {
-        textTransform: c.uppercase,
-        padding: `${c.paddingYContent}rem ${c.paddingXContent}rem`,
-        backgroundColor: c.buttonColor
+        textTransform: C.uppercase,
+        padding: `${C.paddingYContent}rem ${C.paddingXContent}rem`,
+        backgroundColor: C.buttonColor
       };
-    }), o = t(() => ({
-      backgroundColor: S.value.buttonColorHover
-    })), n = t(() => S.value.font), k = t(() => S.value.borderColor), r = t(() => S.value.borderOpacity), B = t(() => S.value.textColor), W = t(() => S.value.textColorHover), I = () => {
-      w("clicked");
+    }), a = t(() => ({
+      backgroundColor: d.value.buttonColorHover
+    })), o = t(() => d.value.font), $ = t(() => d.value.borderColor), s = t(() => d.value.borderOpacity), T = t(() => d.value.textColor), L = t(() => d.value.textColorHover), D = () => {
+      H("clicked");
     };
-    return (c, D) => e.nbId ? (O(), L("div", {
+    return (C, A) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", a.value]),
-      style: N([$.value]),
-      onClick: I
+      class: R(["nb-wrapper", n.value]),
+      style: w([I.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(f),
+      onClick: D,
+      onKeydown: [
+        A[0] || (A[0] = W((_) => !V(f) && e.hasTabIndexEnter && D(), ["enter"])),
+        A[1] || (A[1] = W(F((_) => !V(f) && e.hasTabIndexSpace && D(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component"]),
-        style: N([d.value])
+        class: R(["nb-reset", "component"]),
+        style: w([u.value])
       }, [
-        R("div", {
+        z("div", {
           class: "component-content",
-          style: N([l.value])
+          style: w([l.value])
         }, [
-          R("span", ve, [
-            A(c.$slots, "content", {}, () => [
-              D[0] || (D[0] = P("Default Text"))
+          z("span", ye, [
+            K(C.$slots, "content", {}, () => [
+              A[2] || (A[2] = M("Default Text"))
             ], !0)
           ]),
-          R("span", {
+          z("span", {
             class: "component-content__mask",
-            style: N([o.value])
+            style: w([a.value])
           }, null, 4)
         ], 4)
-      ], 12, fe)
-    ], 6)) : T("", !0);
+      ], 12, pe)
+    ], 46, ve)) : P("", !0);
   }
-}), pe = /* @__PURE__ */ G(be, [["__scopeId", "data-v-2854e208"]]);
-const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
+}), me = /* @__PURE__ */ G(ge, [["__scopeId", "data-v-c8141ce9"]]);
+const Ve = ["tabIndex", "aria-label", "aria-disabled"], xe = ["id"], Ce = /* @__PURE__ */ Object.assign({
   name: "NbButtonShowHover",
   inheritAttrs: !1
 }, {
@@ -197,6 +221,22 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
       type: String,
       required: !0
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#145deb"
@@ -253,82 +293,90 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((d) => ({
-      ae2466b6: a.value,
-      "4cd64222": h.value,
-      "54f7cb8a": S.value,
-      "72e3e97c": e.textColorHover,
-      "3b3633a0": oe(V)
+  setup(e, { emit: c }) {
+    j((u) => ({
+      "630b5d13": n.value,
+      "6584a110": g.value,
+      "3cc5d20d": d.value,
+      e8db6f2c: e.textColorHover,
+      "7e70901c": V(N)
     }));
-    const w = s, Y = e, {
-      textColor: V,
-      buttonColorHover: g,
-      buttonColorOpacityHover: m,
-      paddingX: b,
-      paddingY: p,
-      disabled: x,
-      borderRadius: y,
-      verticalAlign: _,
-      fontFamily: C,
-      fontSize: f,
-      fontWeight: i
-    } = q(Y), u = t(() => {
-      const d = x.value ? "component-disabled" : "", l = _.value ? _.value : "middle", o = V ? V.value : "ffffff", n = !b.value || b.value < 0 ? 1 : b.value, k = !p.value || p.value < 0 ? 0.2 : p.value, r = !y.value || y.value < 0 ? 0 : y.value, B = g.value ? g.value : "10, 38, 184", W = !m.value || m.value < 0 ? 0.1 : m.value, I = C.value ? C.value : "'Lato', sans-serif", c = f.value ? f.value : "1.6rem", D = !i.value || i.value < 0 ? 100 : i.value;
+    const H = c, Y = e, {
+      textColor: N,
+      buttonColorHover: B,
+      buttonColorOpacityHover: x,
+      paddingX: S,
+      paddingY: i,
+      disabled: b,
+      borderRadius: v,
+      verticalAlign: p,
+      fontFamily: h,
+      fontSize: m,
+      fontWeight: y
+    } = q(Y), r = t(() => {
+      const u = b.value ? "component-disabled" : "", l = p.value ? p.value : "middle", a = N ? N.value : "ffffff", o = !S.value || S.value < 0 ? 1 : S.value, $ = !i.value || i.value < 0 ? 0.2 : i.value, s = !v.value || v.value < 0 ? 0 : v.value, T = B.value ? B.value : "10, 38, 184", L = !x.value || x.value < 0 ? 0.1 : x.value, D = h.value ? h.value : "'Lato', sans-serif", C = m.value ? m.value : "1.6rem", A = !y.value || y.value < 0 ? 100 : y.value;
       return {
-        disabled: d,
-        borderRadius: r,
-        textColor: o,
-        paddingX: n,
-        paddingY: k,
-        buttonColorHover: B,
-        buttonColorOpacityHover: W,
-        font: I,
-        fontSize: c,
-        fontWeight: D,
+        disabled: u,
+        borderRadius: s,
+        textColor: a,
+        paddingX: o,
+        paddingY: $,
+        buttonColorHover: T,
+        buttonColorOpacityHover: L,
+        font: D,
+        fontSize: C,
+        fontWeight: A,
         verticalAlign: l
       };
-    }), v = t(() => u.value.disabled), X = t(() => ({
-      verticalAlign: u.value.verticalAlign
-    })), H = t(() => {
-      const d = u.value;
+    }), f = t(() => r.value.disabled), X = t(() => ({
+      verticalAlign: r.value.verticalAlign
+    })), k = t(() => {
+      const u = r.value;
       return {
-        color: d.textColor,
-        padding: `${d.paddingY}rem 0`,
-        borderRadius: `${d.borderRadius}rem`,
-        fontSize: d.fontSize,
-        fontWeight: d.fontWeight
+        color: u.textColor,
+        padding: `${u.paddingY}rem 0`,
+        borderRadius: `${u.borderRadius}rem`,
+        fontSize: u.fontSize,
+        fontWeight: u.fontWeight
       };
-    }), h = t(() => {
-      const d = u.value;
-      return `${d.paddingY}rem ${d.paddingX}rem`;
-    }), S = t(() => {
-      const d = u.value;
-      return `rgba(${d.buttonColorHover}, ${d.buttonColorOpacityHover})`;
-    }), a = t(() => u.value.font), $ = () => {
-      w("clicked");
+    }), g = t(() => {
+      const u = r.value;
+      return `${u.paddingY}rem ${u.paddingX}rem`;
+    }), d = t(() => {
+      const u = r.value;
+      return `rgba(${u.buttonColorHover}, ${u.buttonColorOpacityHover})`;
+    }), n = t(() => r.value.font), I = () => {
+      H("clicked");
     };
-    return (d, l) => e.nbId ? (O(), L("div", {
+    return (u, l) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", v.value]),
-      style: N([X.value]),
-      onClick: $
+      class: R(["nb-wrapper", f.value]),
+      style: w([X.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(b),
+      onClick: I,
+      onKeydown: [
+        l[1] || (l[1] = W((a) => !V(b) && e.hasTabIndexEnter && I(), ["enter"])),
+        l[2] || (l[2] = W(F((a) => !V(b) && e.hasTabIndexSpace && I(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("a", {
+      z("a", {
         id: e.nbId,
         class: "nb-reset component tertiary",
-        style: N([H.value]),
-        onClick: l[0] || (l[0] = de(() => {
+        style: w([k.value]),
+        onClick: l[0] || (l[0] = F(() => {
         }, ["prevent"]))
       }, [
-        A(d.$slots, "content", {}, () => [
-          l[1] || (l[1] = P("Default Text"))
+        K(u.$slots, "content", {}, () => [
+          l[3] || (l[3] = M("Default Text"))
         ], !0)
-      ], 12, ye)
-    ], 6)) : T("", !0);
+      ], 12, xe)
+    ], 46, Ve)) : P("", !0);
   }
-}), me = /* @__PURE__ */ G(ge, [["__scopeId", "data-v-ac926913"]]);
-const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
+}), Se = /* @__PURE__ */ G(Ce, [["__scopeId", "data-v-f844cd94"]]);
+const Ie = ["id"], Be = ["tabIndex", "aria-label", "aria-disabled"], he = ["tabIndex", "aria-label", "aria-disabled"], Ne = /* @__PURE__ */ Object.assign({
   name: "NbButtonPrevNext",
   inheritAttrs: !1
 }, {
@@ -338,6 +386,30 @@ const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
       type: String,
       required: !0
     },
+    tabIndexPrev: {
+      type: Number,
+      default: 0
+    },
+    tabIndexNext: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabelPrev: {
+      type: String,
+      default: "Alternate Text Button"
+    },
+    ariaLabelNext: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     colorPrimary: {
       type: String,
       default: "tomato"
@@ -415,98 +487,114 @@ const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
+  setup(e, { emit: c }) {
     j((l) => ({
-      ac33d4c4: $.value,
-      "30fb3b6e": e.colorPrimary,
-      c9dcc372: e.textColor,
-      "1c2cf3e0": e.colorSecondary,
-      "7ad7e196": e.textColorHover
+      "16c88917": I.value,
+      "6e1325e7": e.colorPrimary,
+      "118d2324": e.textColor,
+      "72f42419": e.colorSecondary,
+      "195b3f6e": e.textColorHover
     }));
-    const w = s, Y = e, {
-      paddingX: V,
-      paddingY: g,
-      marginBetween: m,
-      borderRadius: b,
-      disabled: p,
-      disabledPreview: x,
-      disabledNext: y,
-      fontFamily: _,
-      fontSize: C,
-      fontWeight: f
-    } = q(Y), i = t(() => {
-      const l = p.value ? "component-disabled" : "", o = x.value ? "component-disabled" : "", n = y.value ? "component-disabled" : "", k = !m.value || m.value < 0 ? 0 : m.value, r = !b.value || b.value < 0 ? 0 : b.value, B = !V.value || V.value < 0 ? 1 : V.value, W = !g.value || g.value < 0 ? 10 : g.value, I = C.value ? C.value : "1.6em", c = !f.value || f.value < 0 ? 100 : f.value;
+    const H = c, Y = e, {
+      paddingX: N,
+      paddingY: B,
+      marginBetween: x,
+      borderRadius: S,
+      disabled: i,
+      disabledPreview: b,
+      disabledNext: v,
+      fontFamily: p,
+      fontSize: h,
+      fontWeight: m
+    } = q(Y), y = t(() => {
+      const l = i.value ? "component-disabled" : "", a = b.value ? "component-disabled" : "", o = v.value ? "component-disabled" : "", $ = !x.value || x.value < 0 ? 0 : x.value, s = !S.value || S.value < 0 ? 0 : S.value, T = !N.value || N.value < 0 ? 1 : N.value, L = !B.value || B.value < 0 ? 10 : B.value, D = h.value ? h.value : "1.6em", C = !m.value || m.value < 0 ? 100 : m.value;
       return {
         disabled: l,
-        disabledPreview: o,
-        disabledNext: n,
-        marginBetween: `${k}px`,
-        borderRadius: `${r}px`,
-        paddingX: `${B}px`,
-        paddingY: `${W}px`,
-        fontSize: I,
-        fontWeight: c
+        disabledPreview: a,
+        disabledNext: o,
+        marginBetween: `${$}px`,
+        borderRadius: `${s}px`,
+        paddingX: `${T}px`,
+        paddingY: `${L}px`,
+        fontSize: D,
+        fontWeight: C
       };
-    }), u = t(() => i.value.disabled), v = t(() => i.value.disabledPreview), X = t(() => i.value.disabledNext), H = t(() => ({
-      display: i.value.display
-    })), h = t(() => {
-      const l = i.value;
+    }), r = t(() => y.value.disabled), f = t(() => y.value.disabledPreview), X = t(() => y.value.disabledNext), k = t(() => ({
+      display: y.value.display
+    })), g = t(() => {
+      const l = y.value;
       return {
         fontSize: l.fontSize,
         fontWeight: l.fontWeight
       };
-    }), S = t(() => {
-      const l = i.value;
+    }), d = t(() => {
+      const l = y.value;
       return {
         borderRadius: `${l.borderRadius} 0px 0px ${l.borderRadius}`,
         marginRight: l.marginBetween,
         padding: `${l.paddingX} ${l.paddingY}`
       };
-    }), a = t(() => {
-      const l = i.value;
+    }), n = t(() => {
+      const l = y.value;
       return {
         borderRadius: `0px ${l.borderRadius} ${l.borderRadius} 0px`,
         marginLeft: l.marginBetween,
         padding: `${l.paddingX} ${l.paddingY}`
       };
-    }), $ = t(() => `'${_.value ? _.value : "'Lato', sans-serif"}'`), d = (l) => {
-      w("clicked", l);
+    }), I = t(() => `'${p.value ? p.value : "'Lato', sans-serif"}'`), u = (l) => {
+      H("clicked", l);
     };
-    return (l, o) => e.nbId ? (O(), L("div", {
+    return (l, a) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", u.value]),
-      style: N([H.value])
+      class: R(["nb-wrapper", r.value]),
+      style: w([k.value])
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component"]),
-        style: N(h.value)
+        class: R(["nb-reset", "component"]),
+        style: w(g.value)
       }, [
-        e.showPreview ? (O(), L("div", {
+        e.showPreview ? (O(), E("div", {
           key: 0,
-          onClick: o[0] || (o[0] = (n) => d("preview")),
-          class: z(["buttonNextPreview buttonPreview", v.value]),
-          style: N(S.value)
+          class: R(["buttonNextPreview buttonPreview", f.value]),
+          style: w(d.value),
+          tabIndex: e.tabIndexPrev,
+          role: "button",
+          "aria-label": e.ariaLabelPrev,
+          "aria-disabled": V(i),
+          onClick: a[0] || (a[0] = (o) => u("preview")),
+          onKeydown: [
+            a[1] || (a[1] = W((o) => !V(i) && e.hasTabIndexEnter && u("preview"), ["enter"])),
+            a[2] || (a[2] = W(F((o) => !V(i) && e.hasTabIndexSpace && u("preview"), ["prevent"]), ["space"]))
+          ]
         }, [
-          A(l.$slots, "prev", {}, () => [
-            o[2] || (o[2] = P("← Preview"))
+          K(l.$slots, "prev", {}, () => [
+            a[6] || (a[6] = M("← Preview"))
           ], !0)
-        ], 6)) : T("", !0),
-        e.showNext ? (O(), L("div", {
+        ], 46, Be)) : P("", !0),
+        e.showNext ? (O(), E("div", {
           key: 1,
-          onClick: o[1] || (o[1] = (n) => d("next")),
-          class: z(["buttonNextPreview buttonNext", X.value]),
-          style: N(a.value)
+          class: R(["buttonNextPreview buttonNext", X.value]),
+          style: w(n.value),
+          tabIndex: e.tabIndexNext,
+          role: "button",
+          "aria-label": e.ariaLabelNext,
+          "aria-disabled": V(i),
+          onClick: a[3] || (a[3] = (o) => u("next")),
+          onKeydown: [
+            a[4] || (a[4] = W((o) => !V(i) && e.hasTabIndexEnter && u("next"), ["enter"])),
+            a[5] || (a[5] = W(F((o) => !V(i) && e.hasTabIndexSpace && u("next"), ["prevent"]), ["space"]))
+          ]
         }, [
-          A(l.$slots, "next", {}, () => [
-            o[3] || (o[3] = P("Next →"))
+          K(l.$slots, "next", {}, () => [
+            a[7] || (a[7] = M("Next →"))
           ], !0)
-        ], 6)) : T("", !0)
-      ], 12, Ve)
-    ], 6)) : T("", !0);
+        ], 46, he)) : P("", !0)
+      ], 12, Ie)
+    ], 6)) : P("", !0);
   }
-}), Se = /* @__PURE__ */ G(Ce, [["__scopeId", "data-v-bce0a1da"]]);
-const xe = ["id"], _e = /* @__PURE__ */ Object.assign({
+}), $e = /* @__PURE__ */ G(Ne, [["__scopeId", "data-v-235db30a"]]);
+const we = ["tabIndex", "aria-label", "aria-disabled"], Te = ["id"], He = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical",
   inheritAttrs: !1
 }, {
@@ -520,10 +608,26 @@ const xe = ["id"], _e = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const s = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(s);
+        const c = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -575,77 +679,85 @@ const xe = ["id"], _e = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((o) => ({
-      "4b1889ee": a.value,
-      "7fe81952": oe(g),
-      "5683f09a": d.value,
-      "58a615bf": $.value
+  setup(e, { emit: c }) {
+    j((a) => ({
+      "75e08b28": n.value,
+      "38d76e94": V(B),
+      "1e761906": u.value,
+      60007562: I.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      buttonColor: g,
-      textColor: m,
-      containerColor: b,
-      paddingX: p,
-      paddingY: x,
-      borderRadius: y,
-      disabled: _,
-      animationSlow: C,
-      fontFamily: f,
-      fontSize: i,
-      fontWeight: u
-    } = q(Y), v = t(() => {
-      const o = _.value ? "component-disabled" : "", n = V.value !== "b" ? "inline-block" : "block", k = b.value ? b.value : "#ffffff", r = g.value ? g.value : "#bbbbbb", B = m.value ? m.value : "#ffffff", W = !p.value || p.value < 0 ? 1 : p.value, I = !x.value || x.value < 0 ? 0.2 : x.value, c = !y.value || y.value < 0 ? 0 : y.value, D = C.value ? "" : "component-transition__no-slow", F = f.value ? f.value : "'Lato', sans-serif", M = i.value ? i.value : "1.6em", E = !u.value || u.value < 0 ? 100 : u.value;
+    const H = c, Y = e, {
+      display: N,
+      buttonColor: B,
+      textColor: x,
+      containerColor: S,
+      paddingX: i,
+      paddingY: b,
+      borderRadius: v,
+      disabled: p,
+      animationSlow: h,
+      fontFamily: m,
+      fontSize: y,
+      fontWeight: r
+    } = q(Y), f = t(() => {
+      const a = p.value ? "component-disabled" : "", o = N.value !== "b" ? "inline-block" : "block", $ = S.value ? S.value : "#ffffff", s = B.value ? B.value : "#bbbbbb", T = x.value ? x.value : "#ffffff", L = !i.value || i.value < 0 ? 1 : i.value, D = !b.value || b.value < 0 ? 0.2 : b.value, C = !v.value || v.value < 0 ? 0 : v.value, A = h.value ? "" : "component-transition__no-slow", _ = m.value ? m.value : "'Lato', sans-serif", J = y.value ? y.value : "1.6em", Q = !r.value || r.value < 0 ? 100 : r.value;
       return {
-        disabled: o,
-        display: n,
-        containerColor: k,
-        buttonColor: r,
-        textColor: B,
-        paddingX: W,
-        paddingY: I,
-        borderRadius: c,
-        animationSlow: D,
-        font: F,
-        fontSize: M,
-        fontWeight: E
+        disabled: a,
+        display: o,
+        containerColor: $,
+        buttonColor: s,
+        textColor: T,
+        paddingX: L,
+        paddingY: D,
+        borderRadius: C,
+        animationSlow: A,
+        font: _,
+        fontSize: J,
+        fontWeight: Q
       };
-    }), X = t(() => v.value.disabled), H = t(() => ({
-      display: v.value.display
-    })), h = t(() => {
-      const o = v.value;
+    }), X = t(() => f.value.disabled), k = t(() => ({
+      display: f.value.display
+    })), g = t(() => {
+      const a = f.value;
       return {
-        border: `2px solid ${o.containerColor}`,
-        color: o.textColor,
-        backgroundColor: o.buttonColor,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        borderRadius: `${o.borderRadius}rem`,
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        border: `2px solid ${a.containerColor}`,
+        color: a.textColor,
+        backgroundColor: a.buttonColor,
+        padding: `${a.paddingY}rem ${a.paddingX}rem`,
+        borderRadius: `${a.borderRadius}rem`,
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight
       };
-    }), S = t(() => v.value.animationSlow), a = t(() => v.value.font), $ = t(() => v.value.textColor), d = t(() => v.value.buttonColor), l = () => {
-      w("clicked");
+    }), d = t(() => f.value.animationSlow), n = t(() => f.value.font), I = t(() => f.value.textColor), u = t(() => f.value.buttonColor), l = () => {
+      H("clicked");
     };
-    return (o, n) => e.nbId ? (O(), L("div", {
+    return (a, o) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", X.value]),
-      style: N([H.value]),
-      onClick: l
+      class: R(["nb-wrapper", X.value]),
+      style: w([k.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(p),
+      onClick: l,
+      onKeydown: [
+        o[0] || (o[0] = W(($) => !V(p) && e.hasTabIndexEnter && l(), ["enter"])),
+        o[1] || (o[1] = W(F(($) => !V(p) && e.hasTabIndexSpace && l(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component", "component-transition", S.value]),
-        style: N([h.value])
+        class: R(["nb-reset", "component", "component-transition", d.value]),
+        style: w([g.value])
       }, [
-        A(o.$slots, "content", {}, () => [
-          n[0] || (n[0] = P("Default Text"))
+        K(a.$slots, "content", {}, () => [
+          o[2] || (o[2] = M("Default Text"))
         ], !0)
-      ], 14, xe)
-    ], 6)) : T("", !0);
+      ], 14, Te)
+    ], 46, we)) : P("", !0);
   }
-}), he = /* @__PURE__ */ G(_e, [["__scopeId", "data-v-5cadef2d"]]);
-const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
+}), ke = /* @__PURE__ */ G(He, [["__scopeId", "data-v-cd185961"]]);
+const ze = ["tabIndex", "aria-label", "aria-disabled"], We = ["id"], Ye = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical2",
   inheritAttrs: !1
 }, {
@@ -659,10 +771,26 @@ const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const s = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(s);
+        const c = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -710,73 +838,81 @@ const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((a) => ({
-      "7ab7e502": h.value
+  setup(e, { emit: c }) {
+    j((n) => ({
+      "41c9f13c": g.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      buttonColor: g,
-      textColor: m,
-      paddingX: b,
-      paddingY: p,
-      borderRadius: x,
-      shadowColor: y,
-      disabled: _,
-      fontFamily: C,
-      fontSize: f,
-      fontWeight: i
-    } = q(Y), u = t(() => {
-      const a = _.value ? "component-disabled" : "", $ = V.value !== "b" ? "inline-block" : "block", d = g.value ? g.value : "#bbbbbb", l = y.value ? y.value : "#002f3c", o = m.value ? m.value : "#ffffff", n = !b.value || b.value < 0 ? 1 : b.value, k = !p.value || p.value < 0 ? 1 : p.value, r = !x.value || x.value < 0 ? 0 : x.value, B = C.value ? C.value : "'Lato', sans-serif", W = f.value ? f.value : "1.6em", I = !i.value || i.value < 0 ? 100 : i.value;
+    const H = c, Y = e, {
+      display: N,
+      buttonColor: B,
+      textColor: x,
+      paddingX: S,
+      paddingY: i,
+      borderRadius: b,
+      shadowColor: v,
+      disabled: p,
+      fontFamily: h,
+      fontSize: m,
+      fontWeight: y
+    } = q(Y), r = t(() => {
+      const n = p.value ? "component-disabled" : "", I = N.value !== "b" ? "inline-block" : "block", u = B.value ? B.value : "#bbbbbb", l = v.value ? v.value : "#002f3c", a = x.value ? x.value : "#ffffff", o = !S.value || S.value < 0 ? 1 : S.value, $ = !i.value || i.value < 0 ? 1 : i.value, s = !b.value || b.value < 0 ? 0 : b.value, T = h.value ? h.value : "'Lato', sans-serif", L = m.value ? m.value : "1.6em", D = !y.value || y.value < 0 ? 100 : y.value;
       return {
-        disabled: a,
-        display: $,
-        buttonColor: d,
+        disabled: n,
+        display: I,
+        buttonColor: u,
         shadowColor: l,
-        textColor: o,
-        paddingX: n,
-        paddingY: k,
-        borderRadius: r,
-        font: B,
-        fontSize: W,
-        fontWeight: I
+        textColor: a,
+        paddingX: o,
+        paddingY: $,
+        borderRadius: s,
+        font: T,
+        fontSize: L,
+        fontWeight: D
       };
-    }), v = t(() => u.value.disabled), X = t(() => ({
-      display: u.value.display
-    })), H = t(() => {
-      const a = u.value;
+    }), f = t(() => r.value.disabled), X = t(() => ({
+      display: r.value.display
+    })), k = t(() => {
+      const n = r.value;
       return {
-        color: a.textColor,
-        backgroundColor: a.buttonColor,
-        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${a.shadowColor}`,
-        padding: `${a.paddingY}rem ${a.paddingX}rem`,
-        padding: `${a.paddingY}rem ${a.paddingX}rem`,
-        borderRadius: `${a.borderRadius}rem`,
-        fontSize: a.fontSize,
-        fontWeight: a.fontWeight
+        color: n.textColor,
+        backgroundColor: n.buttonColor,
+        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${n.shadowColor}`,
+        padding: `${n.paddingY}rem ${n.paddingX}rem`,
+        padding: `${n.paddingY}rem ${n.paddingX}rem`,
+        borderRadius: `${n.borderRadius}rem`,
+        fontSize: n.fontSize,
+        fontWeight: n.fontWeight
       };
-    }), h = t(() => u.value.font), S = () => {
-      w("clicked");
+    }), g = t(() => r.value.font), d = () => {
+      H("clicked");
     };
-    return (a, $) => e.nbId ? (O(), L("div", {
+    return (n, I) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", v.value]),
-      style: N([X.value]),
-      onClick: S
+      class: R(["nb-wrapper", f.value]),
+      style: w([X.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(p),
+      onClick: d,
+      onKeydown: [
+        I[0] || (I[0] = W((u) => !V(p) && e.hasTabIndexEnter && d(), ["enter"])),
+        I[1] || (I[1] = W(F((u) => !V(p) && e.hasTabIndexSpace && d(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component", "component-transition"]),
-        style: N([H.value])
+        class: R(["nb-reset", "component", "component-transition"]),
+        style: w([k.value])
       }, [
-        A(a.$slots, "content", {}, () => [
-          $[0] || ($[0] = P("Default Text"))
+        K(n.$slots, "content", {}, () => [
+          I[2] || (I[2] = M("Default Text"))
         ], !0)
-      ], 12, Ne)
-    ], 6)) : T("", !0);
+      ], 12, We)
+    ], 46, ze)) : P("", !0);
   }
-}), Be = /* @__PURE__ */ G(we, [["__scopeId", "data-v-dc73d1b4"]]);
-const $e = ["id"], He = /* @__PURE__ */ Object.assign({
+}), Xe = /* @__PURE__ */ G(Ye, [["__scopeId", "data-v-d1239e03"]]);
+const Re = ["tabIndex", "aria-label", "aria-disabled"], Le = ["id"], Ae = /* @__PURE__ */ Object.assign({
   name: "NbButtonHamburger",
   inheritAttrs: !1
 }, {
@@ -786,6 +922,22 @@ const $e = ["id"], He = /* @__PURE__ */ Object.assign({
       type: String,
       required: !0
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     status: {
       type: Boolean,
       default: !1,
@@ -824,77 +976,85 @@ const $e = ["id"], He = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((a) => ({
-      f95b314e: H.value,
-      "30593c5a": h.value
+  setup(e, { emit: c }) {
+    j((n) => ({
+      "05489a45": k.value,
+      b1646024: g.value
     }));
-    const w = s, Y = e;
-    se(() => {
-      V.value = g.value;
+    const H = c, Y = e;
+    ne(() => {
+      N.value = B.value;
     });
-    const V = ie(!1), {
-      status: g,
-      color: m,
-      containerColor: b,
-      containerColorHover: p,
-      colorHover: x,
-      paddingX: y,
-      paddingY: _,
-      disabled: C
-    } = q(Y), f = t(() => {
-      const a = C.value ? "component-disabled" : "", $ = V.value ? "change" : "", d = b.value ? b.value : "#333333", l = m.value ? m.value : "#ffffff", o = !y.value || y.value < 0 ? 3 : y.value, n = !_.value || _.value < 0 ? 3 : _.value, k = p.value ? p.value : "yellow", r = x.value ? x.value : "red";
+    const N = fe(!1), {
+      status: B,
+      color: x,
+      containerColor: S,
+      containerColorHover: i,
+      colorHover: b,
+      paddingX: v,
+      paddingY: p,
+      disabled: h
+    } = q(Y), m = t(() => {
+      const n = h.value ? "component-disabled" : "", I = N.value ? "change" : "", u = S.value ? S.value : "#333333", l = x.value ? x.value : "#ffffff", a = !v.value || v.value < 0 ? 3 : v.value, o = !p.value || p.value < 0 ? 3 : p.value, $ = i.value ? i.value : "yellow", s = b.value ? b.value : "red";
       return {
-        disabled: a,
-        buttonStatus: $,
-        containerColor: d,
-        paddingX: o,
-        paddingY: n,
+        disabled: n,
+        buttonStatus: I,
+        containerColor: u,
+        paddingX: a,
+        paddingY: o,
         color: l,
-        containerColorHover: k,
-        colorHover: r
+        containerColorHover: $,
+        colorHover: s
       };
-    }), i = t(() => f.value.disabled), u = t(() => {
-      const a = f.value;
+    }), y = t(() => m.value.disabled), r = t(() => {
+      const n = m.value;
       return {
-        padding: `${a.paddingY}px ${a.paddingX}px`,
-        backgroundColor: a.containerColor
+        padding: `${n.paddingY}px ${n.paddingX}px`,
+        backgroundColor: n.containerColor
       };
-    }), v = t(() => ({
-      backgroundColor: f.value.color
-    })), X = t(() => f.value.buttonStatus), H = t(() => f.value.containerColorHover), h = t(() => f.value.colorHover), S = () => {
-      const a = !V.value;
-      V.value = a, w("clicked", a);
+    }), f = t(() => ({
+      backgroundColor: m.value.color
+    })), X = t(() => m.value.buttonStatus), k = t(() => m.value.containerColorHover), g = t(() => m.value.colorHover), d = () => {
+      const n = !N.value;
+      N.value = n, H("clicked", n);
     };
-    return ce(g, () => {
-      V.value = g.value;
-    }), (a, $) => e.nbId ? (O(), L("div", {
+    return ce(B, () => {
+      N.value = B.value;
+    }), (n, I) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", i.value]),
-      style: N([u.value]),
-      onClick: S
+      class: R(["nb-wrapper", y.value]),
+      style: w([r.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(h),
+      onClick: d,
+      onKeydown: [
+        I[0] || (I[0] = W((u) => !V(h) && e.hasTabIndexEnter && d(), ["enter"])),
+        I[1] || (I[1] = W(F((u) => !V(h) && e.hasTabIndexSpace && d(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component", X.value])
+        class: R(["nb-reset", "component", X.value])
       }, [
-        R("div", {
+        z("div", {
           class: "component__line-one",
-          style: N(v.value)
+          style: w(f.value)
         }, null, 4),
-        R("div", {
+        z("div", {
           class: "component__line-two",
-          style: N(v.value)
+          style: w(f.value)
         }, null, 4),
-        R("div", {
+        z("div", {
           class: "component__line-three",
-          style: N(v.value)
+          style: w(f.value)
         }, null, 4)
-      ], 10, $e)
-    ], 6)) : T("", !0);
+      ], 10, Le)
+    ], 46, Re)) : P("", !0);
   }
-}), ke = /* @__PURE__ */ G(He, [["__scopeId", "data-v-3ffd1dc9"]]);
-const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
+}), De = /* @__PURE__ */ G(Ae, [["__scopeId", "data-v-ee16aa34"]]);
+const Oe = ["tabIndex", "aria-label", "aria-disabled"], Ee = ["id"], Pe = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorOutside",
   inheritAttrs: !1
 }, {
@@ -908,10 +1068,26 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const s = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(s);
+        const c = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -959,84 +1135,92 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((o) => ({
-      "2ad8890e": a.value,
-      "48b2df1f": d.value,
-      fda0dac8: S.value,
-      "6c58e184": $.value
+  setup(e, { emit: c }) {
+    j((a) => ({
+      "1be7c59c": n.value,
+      "25955d43": u.value,
+      bccb6a10: d.value,
+      "374c98a8": I.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      buttonColor: g,
-      borderColor: m,
-      textColor: b,
-      paddingX: p,
-      paddingY: x,
-      borderRadius: y,
-      disabled: _,
-      fontFamily: C,
-      fontSize: f,
-      fontWeight: i
-    } = q(Y), u = t(() => {
-      const o = _.value ? "component-disabled" : "", n = V.value !== "b" ? "inline-block" : "block", k = g.value ? g.value : "#bbbbbb", r = m.value ? m.value : "#ffe54c", B = b.value ? b.value : "#ffffff", W = !p.value || p.value < 0 ? 1 : p.value, I = !x.value || x.value < 0 ? 0.2 : x.value, c = !y.value || y.value < 0 ? 0 : y.value, D = C.value ? C.value : "'Lato', sans-serif", F = f.value ? f.value : "1.6em", M = !i.value || i.value < 0 ? 200 : i.value;
+    const H = c, Y = e, {
+      display: N,
+      buttonColor: B,
+      borderColor: x,
+      textColor: S,
+      paddingX: i,
+      paddingY: b,
+      borderRadius: v,
+      disabled: p,
+      fontFamily: h,
+      fontSize: m,
+      fontWeight: y
+    } = q(Y), r = t(() => {
+      const a = p.value ? "component-disabled" : "", o = N.value !== "b" ? "inline-block" : "block", $ = B.value ? B.value : "#bbbbbb", s = x.value ? x.value : "#ffe54c", T = S.value ? S.value : "#ffffff", L = !i.value || i.value < 0 ? 1 : i.value, D = !b.value || b.value < 0 ? 0.2 : b.value, C = !v.value || v.value < 0 ? 0 : v.value, A = h.value ? h.value : "'Lato', sans-serif", _ = m.value ? m.value : "1.6em", J = !y.value || y.value < 0 ? 200 : y.value;
       return {
-        disabled: o,
-        display: n,
-        buttonColor: k,
-        borderColor: r,
-        textColor: B,
-        paddingX: W,
-        paddingY: I,
-        borderRadius: c,
-        font: D,
-        fontSize: F,
-        fontWeight: M
+        disabled: a,
+        display: o,
+        buttonColor: $,
+        borderColor: s,
+        textColor: T,
+        paddingX: L,
+        paddingY: D,
+        borderRadius: C,
+        font: A,
+        fontSize: _,
+        fontWeight: J
       };
-    }), v = t(() => u.value.disabled), X = t(() => ({
-      display: u.value.display
-    })), H = t(() => {
-      const o = u.value;
+    }), f = t(() => r.value.disabled), X = t(() => ({
+      display: r.value.display
+    })), k = t(() => {
+      const a = r.value;
       return {
-        color: o.textColor,
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        color: a.textColor,
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight
       };
-    }), h = t(() => {
-      const o = u.value;
+    }), g = t(() => {
+      const a = r.value;
       return {
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        border: `1px solid ${o.borderColor}`,
-        borderRadius: S.value
+        padding: `${a.paddingY}rem ${a.paddingX}rem`,
+        border: `1px solid ${a.borderColor}`,
+        borderRadius: d.value
       };
-    }), S = t(() => `${u.value.borderRadius}rem`), a = t(() => u.value.font), $ = t(() => u.value.textColor), d = t(() => u.value.buttonColor), l = () => {
-      w("clicked");
+    }), d = t(() => `${r.value.borderRadius}rem`), n = t(() => r.value.font), I = t(() => r.value.textColor), u = t(() => r.value.buttonColor), l = () => {
+      H("clicked");
     };
-    return (o, n) => e.nbId ? (O(), L("div", {
+    return (a, o) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", v.value]),
-      style: N([X.value]),
-      onClick: l
+      class: R(["nb-wrapper", f.value]),
+      style: w([X.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(p),
+      onClick: l,
+      onKeydown: [
+        o[0] || (o[0] = W(($) => !V(p) && e.hasTabIndexEnter && l(), ["enter"])),
+        o[1] || (o[1] = W(F(($) => !V(p) && e.hasTabIndexSpace && l(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component"]),
-        style: N([H.value])
+        class: R(["nb-reset", "component"]),
+        style: w([k.value])
       }, [
-        R("div", {
+        z("div", {
           class: "component-content",
-          style: N([h.value])
+          style: w([g.value])
         }, [
-          A(o.$slots, "content", {}, () => [
-            n[0] || (n[0] = P("Default Text"))
+          K(a.$slots, "content", {}, () => [
+            o[2] || (o[2] = M("Default Text"))
           ], !0)
         ], 4),
-        n[1] || (n[1] = R("div", { class: "component-shadow" }, null, -1))
-      ], 12, Ye)
-    ], 6)) : T("", !0);
+        o[3] || (o[3] = z("div", { class: "component-shadow" }, null, -1))
+      ], 12, Ee)
+    ], 46, Oe)) : P("", !0);
   }
-}), Re = /* @__PURE__ */ G(Xe, [["__scopeId", "data-v-e1da5764"]]);
-const ze = ["id"], We = /* @__PURE__ */ Object.assign({
+}), Fe = /* @__PURE__ */ G(Pe, [["__scopeId", "data-v-4ae432a3"]]);
+const _e = ["tabIndex", "aria-label", "aria-disabled"], Ke = ["id"], Me = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorHover",
   inheritAttrs: !1
 }, {
@@ -1050,10 +1234,26 @@ const ze = ["id"], We = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const s = e.toLowerCase();
-        return ["b", "ib"].includes(s);
+        const c = e.toLowerCase();
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -1105,79 +1305,88 @@ const ze = ["id"], We = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((n) => ({
-      "1c06a74c": S.value,
-      "32a0706b": d.value,
-      "5114b568": $.value,
-      "4ae6f391": l.value,
-      "0ed255d0": a.value
+  setup(e, { emit: c }) {
+    j((o) => ({
+      "37a8072e": d.value,
+      "420521fa": u.value,
+      "2e48555d": I.value,
+      "37cde362": l.value,
+      f8f7c1c2: n.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      textColor: g,
-      paddingX: m,
-      paddingY: b,
-      borderRadius: p,
-      disabled: x,
-      fontFamily: y,
-      fontSize: _,
-      fontWeight: C,
-      textColorHover: f,
-      buttonColor: i,
-      buttonColorHover: u
-    } = q(Y), v = t(() => {
-      const n = x.value ? "component-disabled" : "", k = V.value !== "b" ? "inline-block" : "block", r = g ? g.value : "ffffff", B = !m.value || m.value < 0 ? 1 : m.value, W = !b.value || b.value < 0 ? 0.2 : b.value, I = !p.value || p.value < 0 ? 0 : p.value, c = y.value ? y.value : "'Lato', sans-serif", D = _.value ? _.value : "1.6rem", F = !C.value || C.value < 0 ? 100 : C.value, M = f.value ? f.value : "#cccccc", E = i.value ? i.value : "#bbbbbb", J = u.value ? u.value : "#959595";
+    const H = c, Y = e, {
+      display: N,
+      textColor: B,
+      paddingX: x,
+      paddingY: S,
+      borderRadius: i,
+      disabled: b,
+      fontFamily: v,
+      fontSize: p,
+      fontWeight: h,
+      textColorHover: m,
+      buttonColor: y,
+      buttonColorHover: r
+    } = q(Y), f = t(() => {
+      const o = b.value ? "component-disabled" : "", $ = N.value !== "b" ? "inline-block" : "block", s = B ? B.value : "ffffff", T = !x.value || x.value < 0 ? 1 : x.value, L = !S.value || S.value < 0 ? 0.2 : S.value, D = !i.value || i.value < 0 ? 0 : i.value, C = v.value ? v.value : "'Lato', sans-serif", A = p.value ? p.value : "1.6rem", _ = !h.value || h.value < 0 ? 100 : h.value, J = m.value ? m.value : "#cccccc", Q = y.value ? y.value : "#bbbbbb", U = r.value ? r.value : "#959595";
       return {
-        disabled: n,
-        display: k,
-        font: c,
-        fontSize: D,
-        fontWeight: F,
-        textColor: r,
-        paddingX: B,
-        paddingY: W,
-        borderRadius: I,
-        textColorHover: M,
-        buttonColor: E,
-        buttonColorHover: J
+        disabled: o,
+        display: $,
+        font: C,
+        fontSize: A,
+        fontWeight: _,
+        textColor: s,
+        paddingX: T,
+        paddingY: L,
+        borderRadius: D,
+        textColorHover: J,
+        buttonColor: Q,
+        buttonColorHover: U
       };
-    }), X = t(() => v.value.disabled), H = t(() => {
-      const n = v.value;
+    }), X = t(() => f.value.disabled), k = t(() => {
+      const o = f.value;
       return {
-        display: n.display,
-        borderRadius: `${n.borderRadius}rem`
+        display: o.display,
+        borderRadius: `${o.borderRadius}rem`
       };
-    }), h = t(() => {
-      const n = v.value;
+    }), g = t(() => {
+      const o = f.value;
       return {
-        color: n.textColor,
-        padding: `${n.paddingY}rem ${n.paddingX}rem`,
-        borderRadius: `${n.borderRadius}rem`,
-        fontSize: n.fontSize,
-        fontWeight: n.fontWeight
+        color: o.textColor,
+        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        borderRadius: `${o.borderRadius}rem`,
+        fontSize: o.fontSize,
+        fontWeight: o.fontWeight
       };
-    }), S = t(() => v.value.font), a = t(() => v.value.textColor), $ = t(() => v.value.textColorHover), d = t(() => v.value.buttonColor), l = t(() => v.value.buttonColorHover), o = () => {
-      w("clicked");
+    }), d = t(() => f.value.font), n = t(() => f.value.textColor), I = t(() => f.value.textColorHover), u = t(() => f.value.buttonColor), l = t(() => f.value.buttonColorHover), a = () => {
+      H("clicked");
     };
-    return (n, k) => (O(), L("div", {
-      class: z(["nb-wrapper", X.value]),
-      style: N([H.value]),
-      onClick: o
+    return (o, $) => e.nbId ? (O(), E("div", {
+      key: 0,
+      class: R(["nb-wrapper", X.value]),
+      style: w([k.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(b),
+      onClick: a,
+      onKeydown: [
+        $[0] || ($[0] = W((s) => !V(b) && e.hasTabIndexEnter && a(), ["enter"])),
+        $[1] || ($[1] = W(F((s) => !V(b) && e.hasTabIndexSpace && a(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
         class: "nb-reset component component-transition",
-        style: N([h.value])
+        style: w([g.value])
       }, [
-        A(n.$slots, "content", {}, () => [
-          k[0] || (k[0] = P("Default Text"))
+        K(o.$slots, "content", {}, () => [
+          $[2] || ($[2] = M("Default Text"))
         ], !0)
-      ], 12, ze)
-    ], 6));
+      ], 12, Ke)
+    ], 46, _e)) : P("", !0);
   }
-}), Ie = /* @__PURE__ */ G(We, [["__scopeId", "data-v-fe69344f"]]);
-const De = ["id"], Oe = { class: "first-child" }, Le = { class: "last-child" }, Te = /* @__PURE__ */ Object.assign({
+}), je = /* @__PURE__ */ G(Me, [["__scopeId", "data-v-d083f1f8"]]);
+const qe = ["tabIndex", "aria-label", "aria-disabled"], Ge = ["id"], Je = { class: "first-child" }, Qe = { class: "last-child" }, Ue = /* @__PURE__ */ Object.assign({
   name: "NbButtonAlternateText",
   inheritAttrs: !1
 }, {
@@ -1191,10 +1400,26 @@ const De = ["id"], Oe = { class: "first-child" }, Le = { class: "last-child" },
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const s = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(s);
+        const c = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(c);
       }
     },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -1260,109 +1485,247 @@ const De = ["id"], Oe = { class: "first-child" }, Le = { class: "last-child" },
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    j((r) => ({
-      "42e9739f": d.value,
-      "11568ad5": l.value,
-      "03c8d755": o.value,
-      b6290fa0: n.value
+  setup(e, { emit: c }) {
+    j((s) => ({
+      "516e8559": u.value,
+      "48b787e2": l.value,
+      "0e5ada5b": a.value,
+      "1291c2ea": o.value
     }));
-    const w = s, Y = e, {
-      display: V,
-      buttonColor: g,
-      borderColor: m,
-      buttonHoverColor: b,
-      showBorder: p,
-      borderRadius: x,
-      textColor: y,
-      textHoverColor: _,
-      width: C,
-      paddingX: f,
-      paddingY: i,
-      disabled: u,
-      fontFamily: v,
+    const H = c, Y = e, {
+      display: N,
+      buttonColor: B,
+      borderColor: x,
+      buttonHoverColor: S,
+      showBorder: i,
+      borderRadius: b,
+      textColor: v,
+      textHoverColor: p,
+      width: h,
+      paddingX: m,
+      paddingY: y,
+      disabled: r,
+      fontFamily: f,
       fontSize: X,
-      fontWeight: H
-    } = q(Y), h = t(() => {
-      const r = u.value ? "component-disabled" : "", B = V.value !== "b" ? "inline-block" : "block", W = g.value ? g.value : "#ffffff", I = b.value ? b.value : "#000000", c = m.value ? m.value : "#ffe54c", D = !x.value || x.value < 0 ? 0 : x.value, F = [!1, !0].includes(p.value) ? p.value : !0, M = y.value ? y.value : "#ffffff", E = _.value ? _.value : "#000000", J = !C.value || C.value < 86 ? 86 : C.value, K = !f.value || f.value < 0 ? 1 : f.value, Q = !i.value || i.value < 0 ? 0.4 : i.value, U = v.value ? v.value : "'Lato', sans-serif", Z = X.value ? X.value : "1.6em", ee = !H.value || H.value < 0 ? 200 : H.value;
+      fontWeight: k
+    } = q(Y), g = t(() => {
+      const s = r.value ? "component-disabled" : "", T = N.value !== "b" ? "inline-block" : "block", L = B.value ? B.value : "#ffffff", D = S.value ? S.value : "#000000", C = x.value ? x.value : "#ffe54c", A = !b.value || b.value < 0 ? 0 : b.value, _ = [!1, !0].includes(i.value) ? i.value : !0, J = v.value ? v.value : "#ffffff", Q = p.value ? p.value : "#000000", U = !h.value || h.value < 86 ? 86 : h.value, Z = !m.value || m.value < 0 ? 1 : m.value, ee = !y.value || y.value < 0 ? 0.4 : y.value, te = f.value ? f.value : "'Lato', sans-serif", ae = X.value ? X.value : "1.6em", le = !k.value || k.value < 0 ? 200 : k.value;
       return {
-        disabled: r,
-        display: B,
-        buttonColor: W,
-        buttonHoverColor: I,
-        borderColor: c,
-        showBorder: F,
-        borderRadius: D,
-        textColor: M,
-        textHoverColor: E,
-        width: J,
-        paddingX: K,
-        paddingY: Q,
-        font: U,
-        fontSize: Z,
-        fontWeight: ee
+        disabled: s,
+        display: T,
+        buttonColor: L,
+        buttonHoverColor: D,
+        borderColor: C,
+        showBorder: _,
+        borderRadius: A,
+        textColor: J,
+        textHoverColor: Q,
+        width: U,
+        paddingX: Z,
+        paddingY: ee,
+        font: te,
+        fontSize: ae,
+        fontWeight: le
       };
-    }), S = t(() => h.value.disabled), a = t(() => ({
-      display: h.value.display
-    })), $ = t(() => {
-      const r = h.value, B = r.display === "block" ? "auto" : `${r.width}px`;
+    }), d = t(() => g.value.disabled), n = t(() => ({
+      display: g.value.display
+    })), I = t(() => {
+      const s = g.value, T = s.display === "block" ? "auto" : `${s.width}px`;
       return {
-        ...r.showBorder ? { border: `1px solid ${r.borderColor}` } : {},
-        borderRadius: `${r.borderRadius}rem`,
-        background: r.buttonColor,
+        ...s.showBorder ? { border: `1px solid ${s.borderColor}` } : {},
+        borderRadius: `${s.borderRadius}rem`,
+        background: s.buttonColor,
         minWidth: "33px",
-        width: B,
-        padding: `${r.paddingY}rem ${r.paddingX}rem`,
+        width: T,
+        padding: `${s.paddingY}rem ${s.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: r.fontSize,
-        fontWeight: r.fontWeight
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight
       };
-    }), d = t(() => h.value.font), l = t(() => h.value.textColor), o = t(() => h.value.textHoverColor), n = t(() => h.value.buttonHoverColor), k = () => {
-      w("clicked");
+    }), u = t(() => g.value.font), l = t(() => g.value.textColor), a = t(() => g.value.textHoverColor), o = t(() => g.value.buttonHoverColor), $ = () => {
+      H("clicked");
     };
-    return (r, B) => e.nbId ? (O(), L("div", {
+    return (s, T) => e.nbId ? (O(), E("div", {
       key: 0,
-      class: z(["nb-wrapper", S.value]),
-      style: N([a.value]),
-      onClick: k
+      class: R(["nb-wrapper", d.value]),
+      style: w([n.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(r),
+      onClick: $,
+      onKeydown: [
+        T[0] || (T[0] = W((L) => !V(r) && e.hasTabIndexEnter && $(), ["enter"])),
+        T[1] || (T[1] = W(F((L) => !V(r) && e.hasTabIndexSpace && $(), ["prevent"]), ["space"]))
+      ]
     }, [
-      R("div", {
+      z("div", {
         id: e.nbId,
-        class: z(["nb-reset", "component"]),
-        style: N([$.value])
+        class: R(["nb-reset", "component"]),
+        style: w([I.value])
       }, [
-        R("div", Oe, [
-          A(r.$slots, "content", {}, () => [
-            B[0] || (B[0] = P("Default Text"))
+        z("div", Je, [
+          K(s.$slots, "content", {}, () => [
+            T[2] || (T[2] = M("Default Text"))
           ], !0)
         ]),
-        R("div", Le, [
-          A(r.$slots, "content", {}, () => [
-            B[1] || (B[1] = P("Default Text"))
+        z("div", Qe, [
+          K(s.$slots, "content", {}, () => [
+            T[3] || (T[3] = M("Default Text"))
           ], !0)
         ])
-      ], 12, De)
-    ], 6)) : T("", !0);
+      ], 12, Ge)
+    ], 46, qe)) : P("", !0);
+  }
+}), Ze = /* @__PURE__ */ G(Ue, [["__scopeId", "data-v-b10ffc3e"]]);
+const et = ["tabIndex", "aria-label", "aria-disabled"], tt = ["id"], at = /* @__PURE__ */ Object.assign({
+  name: "NbButtonBack",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonBack",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    hasTabIndexEnter: {
+      type: Boolean,
+      default: !0
+    },
+    hasTabIndexSpace: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: "Alternate Text Button"
+    },
+    color: {
+      type: String,
+      default: "#477e99"
+    },
+    textColor: {
+      type: String,
+      default: "#77d2ff"
+    },
+    text: {
+      type: String,
+      default: "back"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1,
+      validator: (e) => typeof e == "boolean" && [!0, !1].includes(e)
+    },
+    fontFamily: {
+      type: String,
+      default: "'Lato', sans-serif"
+    },
+    fontSize: {
+      type: String,
+      default: "1.6em",
+      validator: (e) => e || "1.6em"
+    },
+    fontWeight: {
+      type: Number,
+      default: 400,
+      validator: (e) => e || 200
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    j((g) => ({
+      aa62e326: r.value,
+      adaa07ba: y.value,
+      40060860: m.value
+    })), ne(() => {
+      X();
+    });
+    const H = c, Y = e, {
+      color: N,
+      textColor: B,
+      disabled: x,
+      fontFamily: S,
+      fontSize: i,
+      fontWeight: b
+    } = q(Y), v = t(() => {
+      const g = x.value ? "component-disabled" : "", d = N.value ? N.value : "#77d2ff", n = B.value ? B.value : "#6dc1ec", I = S.value ? S.value : "'Lato', sans-serif", u = i.value ? i.value : "1.6em", l = !b.value || b.value < 0 ? 400 : b.value;
+      return {
+        color: d,
+        textColor: n,
+        font: I,
+        fontSize: u,
+        fontWeight: l,
+        disabled: g
+      };
+    }), p = t(() => ({})), h = t(() => {
+      const g = v.value;
+      return {
+        fontSize: g.fontSize,
+        fontWeight: g.fontWeight
+      };
+    }), m = t(() => v.value.color), y = t(() => v.value.textColor), r = t(() => v.value.font), f = t(() => v.value.disabled), X = () => {
+    }, k = () => {
+      H("clicked");
+    };
+    return (g, d) => e.nbId ? (O(), E("div", {
+      key: 0,
+      class: R(["nb-wrapper", f.value]),
+      style: w([p.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": V(x),
+      onClick: k,
+      onKeydown: [
+        d[0] || (d[0] = W((n) => !V(x) && e.hasTabIndexEnter && k(), ["enter"])),
+        d[1] || (d[1] = W(F((n) => !V(x) && e.hasTabIndexSpace && k(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      z("div", {
+        id: e.nbId,
+        class: R(["nb-reset", "component"]),
+        style: w([h.value])
+      }, [
+        d[2] || (d[2] = z("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "1em",
+          height: "1em",
+          viewBox: "0 0 16 16"
+        }, [
+          z("path", {
+            d: "M14 8a.75.75 0 01-.75.75H4.56l1.22 1.22a.75.75 0 11-1.06 1.06l-2.5-2.5a.75.75 0 010-1.06l2.5-2.5a.75.75 0 111.06 1.06L4.56 7.25h8.69A.75.75 0 0114 8z",
+            "clip-rule": "evenodd"
+          })
+        ], -1)),
+        z("span", null, be(e.text), 1)
+      ], 12, tt)
+    ], 46, et)) : P("", !0);
   }
-}), Ae = /* @__PURE__ */ G(Te, [["__scopeId", "data-v-e5288afa"]]), te = {
-  NbButtonVavaGame: pe,
-  NbButtonShowHover: me,
-  NbButtonPrevNext: Se,
-  NbButtonMechanical: he,
-  NbButtonMechanical2: Be,
-  NbButtonHamburger: ke,
-  NbButtonColorOutside: Re,
-  NbButtonColorHover: Ie,
-  NbButtonAlternateText: Ae
-}, Fe = {
+}), lt = /* @__PURE__ */ G(at, [["__scopeId", "data-v-1df91d2a"]]), oe = {
+  NbButtonVavaGame: me,
+  NbButtonShowHover: Se,
+  NbButtonPrevNext: $e,
+  NbButtonMechanical: ke,
+  NbButtonMechanical2: Xe,
+  NbButtonHamburger: De,
+  NbButtonColorOutside: Fe,
+  NbButtonColorHover: je,
+  NbButtonAlternateText: Ze,
+  NbButtonBack: lt
+}, nt = {
   install(e) {
-    for (const s in te)
-      if (Object.prototype.hasOwnProperty.call(te, s)) {
-        const w = te[s];
-        e.component(w.name, w);
+    for (const c in oe)
+      if (Object.prototype.hasOwnProperty.call(oe, c)) {
+        const H = oe[c];
+        e.component(H.name, H);
       }
   }
 };
 export {
-  Fe as default
+  nt as default
 };