@vlalg-nimbus/nb-buttons 3.1.0 → 4.0.0

package/dist/nb-buttons.js

@@ -1,10 +1,10 @@
-import { useCssVars as F, toRefs as M, computed as t, openBlock as O, createElementBlock as L, normalizeClass as Y, normalizeStyle as N, createElementVNode as $, renderSlot as A, createTextVNode as P, createCommentVNode as T, unref as ae, withModifiers as se, onMounted as oe, ref as ie, watch as ce, toDisplayString as fe } from "vue";
-const j = (e, s) => {
-  const w = e.__vccOpts || e;
-  for (const [k, x] of s)
-    w[k] = x;
-  return w;
-}, be = ["tabIndex"], ve = ["id"], pe = { class: "component-content__text" }, ye = /* @__PURE__ */ Object.assign({
+import { useCssVars as U, toRefs as J, computed as t, openBlock as _, createElementBlock as P, normalizeClass as E, normalizeStyle as Y, unref as I, withKeys as L, withModifiers as j, createElementVNode as D, renderSlot as M, createTextVNode as G, createCommentVNode as K, onMounted as ie, ref as ve, watch as pe, toDisplayString as ye } from "vue";
+const Q = (e, c) => {
+  const X = e.__vccOpts || e;
+  for (const [R, W] of c)
+    X[R] = W;
+  return X;
+}, ge = ["tabIndex", "aria-label", "aria-disabled"], me = ["id"], Ve = { class: "component-content__text" }, xe = /* @__PURE__ */ Object.assign({
   name: "NbButtonVavaGame",
   inheritAttrs: !1
 }, {
@@ -18,14 +18,26 @@ const j = (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"
@@ -96,103 +108,110 @@ const j = (e, s) => {
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((p) => ({
-      "546fa782": n.value,
-      "09c37ef8": H.value,
-      "4617f524": X.value,
-      "6926a24e": W.value,
-      "1edb7201": d.value
+  setup(e, { emit: c }) {
+    U((i) => ({
+      "3b94cba3": l.value,
+      "6146add9": b.value,
+      "2753eae3": z.value,
+      "4edfa97a": s.value,
+      dd0b6f3c: f.value
     }));
-    const w = s, k = e, {
-      display: x,
-      textColor: m,
-      textColorHover: C,
-      buttonColor: y,
-      buttonColorHover: g,
-      uppercase: S,
-      paddingXContent: i,
-      paddingYContent: h,
-      paddingXBorder: _,
-      paddingYBorder: b,
-      borderColor: c,
+    const X = c, R = e, {
+      display: W,
+      textColor: T,
+      textColorHover: $,
+      buttonColor: N,
+      buttonColorHover: m,
+      uppercase: y,
+      paddingXContent: C,
+      paddingYContent: S,
+      paddingXBorder: h,
+      paddingYBorder: g,
+      borderColor: V,
       borderOpacity: u,
-      disabled: v,
-      fontFamily: z,
-      fontSize: I,
-      fontWeight: f
-    } = M(k), V = t(() => {
-      const p = v.value ? "component-disabled" : "", D = x.value !== "b" ? "inline-block" : "block", q = m.value ? m.value : "#ece8e1", G = y.value ? y.value : "green", E = C.value ? C.value : "#ece8e1", J = g.value ? g.value : "cyan", K = c.value ? c.value : "#ffffff", Q = !u.value || !(u.value >= 0 && u.value <= 1) ? "0.5" : u.value, U = !_.value || _.value < 0 ? 0.3 : _.value, Z = !b.value || b.value < 0 ? 0.3 : b.value, ee = !i.value || i.value < 0 ? 0.5 : i.value, le = !h.value || h.value < 0 ? 0.5 : h.value, ne = S.value ? "uppercase" : "none", ue = z.value ? z.value : "'Lato', sans-serif", re = I.value ? I.value : "1.6em", de = !f.value || f.value < 0 ? 100 : f.value;
+      disabled: x,
+      fontFamily: k,
+      fontSize: H,
+      fontWeight: r
+    } = J(R), B = t(() => {
+      const i = x.value ? "component-disabled" : "", p = W.value !== "b" ? "inline-block" : "block", A = T.value ? T.value : "#ece8e1", O = N.value ? N.value : "green", F = $.value ? $.value : "#ece8e1", q = m.value ? m.value : "cyan", Z = V.value ? V.value : "#ffffff", ee = !u.value || !(u.value >= 0 && u.value <= 1) ? "0.5" : u.value, te = !h.value || h.value < 0 ? 0.3 : h.value, ae = !g.value || g.value < 0 ? 0.3 : g.value, oe = !C.value || C.value < 0 ? 0.5 : C.value, le = !S.value || S.value < 0 ? 0.5 : S.value, ne = y.value ? "uppercase" : "none", ue = k.value ? k.value : "'Lato', sans-serif", re = H.value ? H.value : "1.6em", de = !r.value || r.value < 0 ? 100 : r.value;
       return {
-        disabled: p,
-        display: D,
-        textColor: q,
-        buttonColor: G,
-        textColorHover: E,
-        buttonColorHover: J,
-        borderColor: K,
-        borderOpacity: Q,
-        paddingXBorder: U,
-        paddingYBorder: Z,
-        paddingXContent: ee,
+        disabled: i,
+        display: p,
+        textColor: A,
+        buttonColor: O,
+        textColorHover: F,
+        buttonColorHover: q,
+        borderColor: Z,
+        borderOpacity: ee,
+        paddingXBorder: te,
+        paddingYBorder: ae,
+        paddingXContent: oe,
         paddingYContent: le,
         uppercase: ne,
         font: ue,
         fontSize: re,
         fontWeight: de
       };
-    }), o = t(() => V.value.disabled), B = t(() => ({
-      display: V.value.display
-    })), r = t(() => {
-      const p = V.value;
+    }), d = t(() => B.value.disabled), w = t(() => ({
+      display: B.value.display
+    })), v = t(() => {
+      const i = B.value;
       return {
-        padding: `${p.paddingYBorder}rem ${p.paddingXBorder}rem`,
-        fontSize: p.fontSize,
-        fontWeight: p.fontWeight
+        padding: `${i.paddingYBorder}rem ${i.paddingXBorder}rem`,
+        fontSize: i.fontSize,
+        fontWeight: i.fontWeight
       };
-    }), l = t(() => {
-      const p = V.value;
+    }), n = t(() => {
+      const i = B.value;
       return {
-        textTransform: p.uppercase,
-        padding: `${p.paddingYContent}rem ${p.paddingXContent}rem`,
-        backgroundColor: p.buttonColor
+        textTransform: i.uppercase,
+        padding: `${i.paddingYContent}rem ${i.paddingXContent}rem`,
+        backgroundColor: i.buttonColor
       };
     }), a = t(() => ({
-      backgroundColor: V.value.buttonColorHover
-    })), n = t(() => V.value.font), W = t(() => V.value.borderColor), d = t(() => V.value.borderOpacity), H = t(() => V.value.textColor), X = t(() => V.value.textColorHover), R = () => {
-      w("clicked");
+      backgroundColor: B.value.buttonColorHover
+    })), l = t(() => B.value.font), s = t(() => B.value.borderColor), f = t(() => B.value.borderOpacity), b = t(() => B.value.textColor), z = t(() => B.value.textColorHover), o = () => {
+      X("clicked");
     };
-    return (p, D) => e.nbId ? (O(), L("div", {
+    return (i, p) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", o.value]),
-      style: N([B.value]),
+      class: E(["nb-wrapper", d.value]),
+      style: Y([w.value]),
       tabIndex: e.tabIndex,
-      onClick: R
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(x),
+      onClick: o,
+      onKeydown: [
+        p[0] || (p[0] = L((A) => !I(x) && e.hasTabIndexEnter && o(), ["enter"])),
+        p[1] || (p[1] = L(j((A) => !I(x) && e.hasTabIndexSpace && o(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component"]),
-        style: N([r.value])
+        class: E(["nb-reset", "component"]),
+        style: Y([v.value])
       }, [
-        $("div", {
+        D("div", {
           class: "component-content",
-          style: N([l.value])
+          style: Y([n.value])
         }, [
-          $("span", pe, [
-            A(p.$slots, "content", {}, () => [
-              D[0] || (D[0] = P("Default Text"))
+          D("span", Ve, [
+            M(i.$slots, "content", {}, () => [
+              p[2] || (p[2] = G("Default Text"))
             ], !0)
           ]),
-          $("span", {
+          D("span", {
             class: "component-content__mask",
-            style: N([a.value])
+            style: Y([a.value])
           }, null, 4)
         ], 4)
-      ], 12, ve)
-    ], 14, be)) : T("", !0);
+      ], 12, me)
+    ], 46, ge)) : K("", !0);
   }
-}), ge = /* @__PURE__ */ j(ye, [["__scopeId", "data-v-4c5461c7"]]);
-const me = ["tabIndex"], Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
+}), Ce = /* @__PURE__ */ Q(xe, [["__scopeId", "data-v-c8141ce9"]]);
+const Se = ["tabIndex", "aria-label", "aria-disabled"], he = ["id"], Be = /* @__PURE__ */ Object.assign({
   name: "NbButtonShowHover",
   inheritAttrs: !1
 }, {
@@ -206,6 +225,18 @@ const me = ["tabIndex"], Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
       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"
@@ -262,83 +293,90 @@ const me = ["tabIndex"], Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((r) => ({
-      f362db14: o.value,
-      "7e7ab6b3": f.value,
-      "4281574a": V.value,
-      b6ef43e6: e.textColorHover,
-      "492d686f": ae(x)
+  setup(e, { emit: c }) {
+    U((v) => ({
+      "630b5d13": d.value,
+      "6584a110": r.value,
+      "3cc5d20d": B.value,
+      e8db6f2c: e.textColorHover,
+      "7e70901c": I(W)
     }));
-    const w = s, k = e, {
-      textColor: x,
-      buttonColorHover: m,
-      buttonColorOpacityHover: C,
-      paddingX: y,
-      paddingY: g,
-      disabled: S,
-      borderRadius: i,
-      verticalAlign: h,
-      fontFamily: _,
-      fontSize: b,
-      fontWeight: c
-    } = M(k), u = t(() => {
-      const r = S.value ? "component-disabled" : "", l = h.value ? h.value : "middle", a = x ? x.value : "ffffff", n = !y.value || y.value < 0 ? 1 : y.value, W = !g.value || g.value < 0 ? 0.2 : g.value, d = !i.value || i.value < 0 ? 0 : i.value, H = m.value ? m.value : "10, 38, 184", X = !C.value || C.value < 0 ? 0.1 : C.value, R = _.value ? _.value : "'Lato', sans-serif", p = b.value ? b.value : "1.6rem", D = !c.value || c.value < 0 ? 100 : c.value;
+    const X = c, R = e, {
+      textColor: W,
+      buttonColorHover: T,
+      buttonColorOpacityHover: $,
+      paddingX: N,
+      paddingY: m,
+      disabled: y,
+      borderRadius: C,
+      verticalAlign: S,
+      fontFamily: h,
+      fontSize: g,
+      fontWeight: V
+    } = J(R), u = t(() => {
+      const v = y.value ? "component-disabled" : "", n = S.value ? S.value : "middle", a = W ? W.value : "ffffff", l = !N.value || N.value < 0 ? 1 : N.value, s = !m.value || m.value < 0 ? 0.2 : m.value, f = !C.value || C.value < 0 ? 0 : C.value, b = T.value ? T.value : "10, 38, 184", z = !$.value || $.value < 0 ? 0.1 : $.value, o = h.value ? h.value : "'Lato', sans-serif", i = g.value ? g.value : "1.6rem", p = !V.value || V.value < 0 ? 100 : V.value;
       return {
-        disabled: r,
-        borderRadius: d,
+        disabled: v,
+        borderRadius: f,
         textColor: a,
-        paddingX: n,
-        paddingY: W,
-        buttonColorHover: H,
-        buttonColorOpacityHover: X,
-        font: R,
-        fontSize: p,
-        fontWeight: D,
-        verticalAlign: l
+        paddingX: l,
+        paddingY: s,
+        buttonColorHover: b,
+        buttonColorOpacityHover: z,
+        font: o,
+        fontSize: i,
+        fontWeight: p,
+        verticalAlign: n
       };
-    }), v = t(() => u.value.disabled), z = t(() => ({
+    }), x = t(() => u.value.disabled), k = t(() => ({
       verticalAlign: u.value.verticalAlign
-    })), I = t(() => {
-      const r = u.value;
+    })), H = t(() => {
+      const v = u.value;
       return {
-        color: r.textColor,
-        padding: `${r.paddingY}rem 0`,
-        borderRadius: `${r.borderRadius}rem`,
-        fontSize: r.fontSize,
-        fontWeight: r.fontWeight
+        color: v.textColor,
+        padding: `${v.paddingY}rem 0`,
+        borderRadius: `${v.borderRadius}rem`,
+        fontSize: v.fontSize,
+        fontWeight: v.fontWeight
       };
-    }), f = t(() => {
-      const r = u.value;
-      return `${r.paddingY}rem ${r.paddingX}rem`;
-    }), V = t(() => {
-      const r = u.value;
-      return `rgba(${r.buttonColorHover}, ${r.buttonColorOpacityHover})`;
-    }), o = t(() => u.value.font), B = () => {
-      w("clicked");
+    }), r = t(() => {
+      const v = u.value;
+      return `${v.paddingY}rem ${v.paddingX}rem`;
+    }), B = t(() => {
+      const v = u.value;
+      return `rgba(${v.buttonColorHover}, ${v.buttonColorOpacityHover})`;
+    }), d = t(() => u.value.font), w = () => {
+      X("clicked");
     };
-    return (r, l) => e.nbId ? (O(), L("div", {
+    return (v, n) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", v.value]),
-      style: N([z.value]),
+      class: E(["nb-wrapper", x.value]),
+      style: Y([k.value]),
       tabIndex: e.tabIndex,
-      onClick: B
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(y),
+      onClick: w,
+      onKeydown: [
+        n[1] || (n[1] = L((a) => !I(y) && e.hasTabIndexEnter && w(), ["enter"])),
+        n[2] || (n[2] = L(j((a) => !I(y) && e.hasTabIndexSpace && w(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("a", {
+      D("a", {
         id: e.nbId,
         class: "nb-reset component tertiary",
-        style: N([I.value]),
-        onClick: l[0] || (l[0] = se(() => {
+        style: Y([H.value]),
+        onClick: n[0] || (n[0] = j(() => {
         }, ["prevent"]))
       }, [
-        A(r.$slots, "content", {}, () => [
-          l[1] || (l[1] = P("Default Text"))
+        M(v.$slots, "content", {}, () => [
+          n[3] || (n[3] = G("Default Text"))
         ], !0)
-      ], 12, Ve)
-    ], 14, me)) : T("", !0);
+      ], 12, he)
+    ], 46, Se)) : K("", !0);
   }
-}), xe = /* @__PURE__ */ j(Ce, [["__scopeId", "data-v-42182b51"]]);
-const Se = ["id"], _e = ["tabIndex"], he = ["tabIndex"], Ne = /* @__PURE__ */ Object.assign({
+}), we = /* @__PURE__ */ Q(Be, [["__scopeId", "data-v-f844cd94"]]);
+const Ie = ["id"], $e = ["tabIndex", "aria-label", "aria-disabled"], Ne = ["tabIndex", "aria-label", "aria-disabled"], He = /* @__PURE__ */ Object.assign({
   name: "NbButtonPrevNext",
   inheritAttrs: !1
 }, {
@@ -356,6 +394,22 @@ const Se = ["id"], _e = ["tabIndex"], he = ["tabIndex"], Ne = /* @__PURE__ */ Ob
       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"
@@ -433,100 +487,114 @@ const Se = ["id"], _e = ["tabIndex"], he = ["tabIndex"], Ne = /* @__PURE__ */ Ob
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((l) => ({
-      "4b4228f2": B.value,
-      "4c181857": e.colorPrimary,
-      "0921dc04": e.textColor,
-      "38f38aee": e.colorSecondary,
-      ec255444: e.textColorHover
+  setup(e, { emit: c }) {
+    U((n) => ({
+      "16c88917": w.value,
+      "6e1325e7": e.colorPrimary,
+      "118d2324": e.textColor,
+      "72f42419": e.colorSecondary,
+      "195b3f6e": e.textColorHover
     }));
-    const w = s, k = e, {
-      paddingX: x,
-      paddingY: m,
-      marginBetween: C,
-      borderRadius: y,
-      disabled: g,
-      disabledPreview: S,
-      disabledNext: i,
-      fontFamily: h,
-      fontSize: _,
-      fontWeight: b
-    } = M(k), c = t(() => {
-      const l = g.value ? "component-disabled" : "", a = S.value ? "component-disabled" : "", n = i.value ? "component-disabled" : "", W = !C.value || C.value < 0 ? 0 : C.value, d = !y.value || y.value < 0 ? 0 : y.value, H = !x.value || x.value < 0 ? 1 : x.value, X = !m.value || m.value < 0 ? 10 : m.value, R = _.value ? _.value : "1.6em", p = !b.value || b.value < 0 ? 100 : b.value;
+    const X = c, R = e, {
+      paddingX: W,
+      paddingY: T,
+      marginBetween: $,
+      borderRadius: N,
+      disabled: m,
+      disabledPreview: y,
+      disabledNext: C,
+      fontFamily: S,
+      fontSize: h,
+      fontWeight: g
+    } = J(R), V = t(() => {
+      const n = m.value ? "component-disabled" : "", a = y.value ? "component-disabled" : "", l = C.value ? "component-disabled" : "", s = !$.value || $.value < 0 ? 0 : $.value, f = !N.value || N.value < 0 ? 0 : N.value, b = !W.value || W.value < 0 ? 1 : W.value, z = !T.value || T.value < 0 ? 10 : T.value, o = h.value ? h.value : "1.6em", i = !g.value || g.value < 0 ? 100 : g.value;
       return {
-        disabled: l,
+        disabled: n,
         disabledPreview: a,
-        disabledNext: n,
-        marginBetween: `${W}px`,
-        borderRadius: `${d}px`,
-        paddingX: `${H}px`,
-        paddingY: `${X}px`,
-        fontSize: R,
-        fontWeight: p
+        disabledNext: l,
+        marginBetween: `${s}px`,
+        borderRadius: `${f}px`,
+        paddingX: `${b}px`,
+        paddingY: `${z}px`,
+        fontSize: o,
+        fontWeight: i
       };
-    }), u = t(() => c.value.disabled), v = t(() => c.value.disabledPreview), z = t(() => c.value.disabledNext), I = t(() => ({
-      display: c.value.display
-    })), f = t(() => {
-      const l = c.value;
+    }), u = t(() => V.value.disabled), x = t(() => V.value.disabledPreview), k = t(() => V.value.disabledNext), H = t(() => ({
+      display: V.value.display
+    })), r = t(() => {
+      const n = V.value;
       return {
-        fontSize: l.fontSize,
-        fontWeight: l.fontWeight
+        fontSize: n.fontSize,
+        fontWeight: n.fontWeight
       };
-    }), V = t(() => {
-      const l = c.value;
+    }), B = t(() => {
+      const n = V.value;
       return {
-        borderRadius: `${l.borderRadius} 0px 0px ${l.borderRadius}`,
-        marginRight: l.marginBetween,
-        padding: `${l.paddingX} ${l.paddingY}`
+        borderRadius: `${n.borderRadius} 0px 0px ${n.borderRadius}`,
+        marginRight: n.marginBetween,
+        padding: `${n.paddingX} ${n.paddingY}`
       };
-    }), o = t(() => {
-      const l = c.value;
+    }), d = t(() => {
+      const n = V.value;
       return {
-        borderRadius: `0px ${l.borderRadius} ${l.borderRadius} 0px`,
-        marginLeft: l.marginBetween,
-        padding: `${l.paddingX} ${l.paddingY}`
+        borderRadius: `0px ${n.borderRadius} ${n.borderRadius} 0px`,
+        marginLeft: n.marginBetween,
+        padding: `${n.paddingX} ${n.paddingY}`
       };
-    }), B = t(() => `'${h.value ? h.value : "'Lato', sans-serif"}'`), r = (l) => {
-      w("clicked", l);
+    }), w = t(() => `'${S.value ? S.value : "'Lato', sans-serif"}'`), v = (n) => {
+      X("clicked", n);
     };
-    return (l, a) => e.nbId ? (O(), L("div", {
+    return (n, a) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", u.value]),
-      style: N([I.value])
+      class: E(["nb-wrapper", u.value]),
+      style: Y([H.value])
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component"]),
-        style: N(f.value)
+        class: E(["nb-reset", "component"]),
+        style: Y(r.value)
       }, [
-        e.showPreview ? (O(), L("div", {
+        e.showPreview ? (_(), P("div", {
           key: 0,
-          class: Y(["buttonNextPreview buttonPreview", v.value]),
-          style: N(V.value),
+          class: E(["buttonNextPreview buttonPreview", x.value]),
+          style: Y(B.value),
           tabIndex: e.tabIndexPrev,
-          onClick: a[0] || (a[0] = (n) => r("preview"))
+          role: "button",
+          "aria-label": e.ariaLabelPrev,
+          "aria-disabled": I(m),
+          onClick: a[0] || (a[0] = (l) => v("preview")),
+          onKeydown: [
+            a[1] || (a[1] = L((l) => !I(m) && e.hasTabIndexEnter && v("preview"), ["enter"])),
+            a[2] || (a[2] = L(j((l) => !I(m) && e.hasTabIndexSpace && v("preview"), ["prevent"]), ["space"]))
+          ]
         }, [
-          A(l.$slots, "prev", {}, () => [
-            a[2] || (a[2] = P("← Preview"))
+          M(n.$slots, "prev", {}, () => [
+            a[6] || (a[6] = G("← Preview"))
           ], !0)
-        ], 14, _e)) : T("", !0),
-        e.showNext ? (O(), L("div", {
+        ], 46, $e)) : K("", !0),
+        e.showNext ? (_(), P("div", {
           key: 1,
-          class: Y(["buttonNextPreview buttonNext", z.value]),
-          style: N(o.value),
+          class: E(["buttonNextPreview buttonNext", k.value]),
+          style: Y(d.value),
           tabIndex: e.tabIndexNext,
-          onClick: a[1] || (a[1] = (n) => r("next"))
+          role: "button",
+          "aria-label": e.ariaLabelNext,
+          "aria-disabled": I(m),
+          onClick: a[3] || (a[3] = (l) => v("next")),
+          onKeydown: [
+            a[4] || (a[4] = L((l) => !I(m) && e.hasTabIndexEnter && v("next"), ["enter"])),
+            a[5] || (a[5] = L(j((l) => !I(m) && e.hasTabIndexSpace && v("next"), ["prevent"]), ["space"]))
+          ]
         }, [
-          A(l.$slots, "next", {}, () => [
-            a[3] || (a[3] = P("Next →"))
+          M(n.$slots, "next", {}, () => [
+            a[7] || (a[7] = G("Next →"))
           ], !0)
-        ], 14, he)) : T("", !0)
-      ], 12, Se)
-    ], 6)) : T("", !0);
+        ], 46, Ne)) : K("", !0)
+      ], 12, Ie)
+    ], 6)) : K("", !0);
   }
-}), we = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-c022e18a"]]);
-const Be = ["tabIndex"], $e = ["id"], Ie = /* @__PURE__ */ Object.assign({
+}), Te = /* @__PURE__ */ Q(He, [["__scopeId", "data-v-235db30a"]]);
+const ke = ["tabIndex", "aria-label", "aria-disabled"], We = ["id"], ze = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical",
   inheritAttrs: !1
 }, {
@@ -540,14 +608,26 @@ const Be = ["tabIndex"], $e = ["id"], Ie = /* @__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"
@@ -599,46 +679,46 @@ const Be = ["tabIndex"], $e = ["id"], Ie = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((a) => ({
-      c1c6e3f2: o.value,
-      "92c532ce": ae(m),
-      fefb92d0: r.value,
-      "7e4c7986": B.value
+  setup(e, { emit: c }) {
+    U((a) => ({
+      "75e08b28": d.value,
+      "38d76e94": I(T),
+      "1e761906": v.value,
+      60007562: w.value
     }));
-    const w = s, k = e, {
-      display: x,
-      buttonColor: m,
-      textColor: C,
-      containerColor: y,
-      paddingX: g,
-      paddingY: S,
-      borderRadius: i,
-      disabled: h,
-      animationSlow: _,
-      fontFamily: b,
-      fontSize: c,
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      textColor: $,
+      containerColor: N,
+      paddingX: m,
+      paddingY: y,
+      borderRadius: C,
+      disabled: S,
+      animationSlow: h,
+      fontFamily: g,
+      fontSize: V,
       fontWeight: u
-    } = M(k), v = t(() => {
-      const a = h.value ? "component-disabled" : "", n = x.value !== "b" ? "inline-block" : "block", W = y.value ? y.value : "#ffffff", d = m.value ? m.value : "#bbbbbb", H = C.value ? C.value : "#ffffff", X = !g.value || g.value < 0 ? 1 : g.value, R = !S.value || S.value < 0 ? 0.2 : S.value, p = !i.value || i.value < 0 ? 0 : i.value, D = _.value ? "" : "component-transition__no-slow", q = b.value ? b.value : "'Lato', sans-serif", G = c.value ? c.value : "1.6em", E = !u.value || u.value < 0 ? 100 : u.value;
+    } = J(R), x = t(() => {
+      const a = S.value ? "component-disabled" : "", l = W.value !== "b" ? "inline-block" : "block", s = N.value ? N.value : "#ffffff", f = T.value ? T.value : "#bbbbbb", b = $.value ? $.value : "#ffffff", z = !m.value || m.value < 0 ? 1 : m.value, o = !y.value || y.value < 0 ? 0.2 : y.value, i = !C.value || C.value < 0 ? 0 : C.value, p = h.value ? "" : "component-transition__no-slow", A = g.value ? g.value : "'Lato', sans-serif", O = V.value ? V.value : "1.6em", F = !u.value || u.value < 0 ? 100 : u.value;
       return {
         disabled: a,
-        display: n,
-        containerColor: W,
-        buttonColor: d,
-        textColor: H,
-        paddingX: X,
-        paddingY: R,
-        borderRadius: p,
-        animationSlow: D,
-        font: q,
-        fontSize: G,
-        fontWeight: E
+        display: l,
+        containerColor: s,
+        buttonColor: f,
+        textColor: b,
+        paddingX: z,
+        paddingY: o,
+        borderRadius: i,
+        animationSlow: p,
+        font: A,
+        fontSize: O,
+        fontWeight: F
       };
-    }), z = t(() => v.value.disabled), I = t(() => ({
-      display: v.value.display
-    })), f = t(() => {
-      const a = v.value;
+    }), k = t(() => x.value.disabled), H = t(() => ({
+      display: x.value.display
+    })), r = t(() => {
+      const a = x.value;
       return {
         border: `2px solid ${a.containerColor}`,
         color: a.textColor,
@@ -648,29 +728,36 @@ const Be = ["tabIndex"], $e = ["id"], Ie = /* @__PURE__ */ Object.assign({
         fontSize: a.fontSize,
         fontWeight: a.fontWeight
       };
-    }), V = t(() => v.value.animationSlow), o = t(() => v.value.font), B = t(() => v.value.textColor), r = t(() => v.value.buttonColor), l = () => {
-      w("clicked");
+    }), B = t(() => x.value.animationSlow), d = t(() => x.value.font), w = t(() => x.value.textColor), v = t(() => x.value.buttonColor), n = () => {
+      X("clicked");
     };
-    return (a, n) => e.nbId ? (O(), L("div", {
+    return (a, l) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", z.value]),
-      style: N([I.value]),
+      class: E(["nb-wrapper", k.value]),
+      style: Y([H.value]),
       tabIndex: e.tabIndex,
-      onClick: l
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(S),
+      onClick: n,
+      onKeydown: [
+        l[0] || (l[0] = L((s) => !I(S) && e.hasTabIndexEnter && n(), ["enter"])),
+        l[1] || (l[1] = L(j((s) => !I(S) && e.hasTabIndexSpace && n(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component", "component-transition", V.value]),
-        style: N([f.value])
+        class: E(["nb-reset", "component", "component-transition", B.value]),
+        style: Y([r.value])
       }, [
-        A(a.$slots, "content", {}, () => [
-          n[0] || (n[0] = P("Default Text"))
+        M(a.$slots, "content", {}, () => [
+          l[2] || (l[2] = G("Default Text"))
         ], !0)
-      ], 14, $e)
-    ], 14, Be)) : T("", !0);
+      ], 14, We)
+    ], 46, ke)) : K("", !0);
   }
-}), He = /* @__PURE__ */ j(Ie, [["__scopeId", "data-v-be829b62"]]);
-const ke = ["tabIndex"], ze = ["id"], We = /* @__PURE__ */ Object.assign({
+}), Ye = /* @__PURE__ */ Q(ze, [["__scopeId", "data-v-cd185961"]]);
+const Xe = ["tabIndex", "aria-label", "aria-disabled"], Le = ["id"], Re = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical2",
   inheritAttrs: !1
 }, {
@@ -684,14 +771,26 @@ const ke = ["tabIndex"], ze = ["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"
@@ -739,74 +838,81 @@ const ke = ["tabIndex"], ze = ["id"], We = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((o) => ({
-      edd2a4d6: f.value
+  setup(e, { emit: c }) {
+    U((d) => ({
+      "41c9f13c": r.value
     }));
-    const w = s, k = e, {
-      display: x,
-      buttonColor: m,
-      textColor: C,
-      paddingX: y,
-      paddingY: g,
-      borderRadius: S,
-      shadowColor: i,
-      disabled: h,
-      fontFamily: _,
-      fontSize: b,
-      fontWeight: c
-    } = M(k), u = t(() => {
-      const o = h.value ? "component-disabled" : "", B = x.value !== "b" ? "inline-block" : "block", r = m.value ? m.value : "#bbbbbb", l = i.value ? i.value : "#002f3c", a = C.value ? C.value : "#ffffff", n = !y.value || y.value < 0 ? 1 : y.value, W = !g.value || g.value < 0 ? 1 : g.value, d = !S.value || S.value < 0 ? 0 : S.value, H = _.value ? _.value : "'Lato', sans-serif", X = b.value ? b.value : "1.6em", R = !c.value || c.value < 0 ? 100 : c.value;
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      textColor: $,
+      paddingX: N,
+      paddingY: m,
+      borderRadius: y,
+      shadowColor: C,
+      disabled: S,
+      fontFamily: h,
+      fontSize: g,
+      fontWeight: V
+    } = J(R), u = t(() => {
+      const d = S.value ? "component-disabled" : "", w = W.value !== "b" ? "inline-block" : "block", v = T.value ? T.value : "#bbbbbb", n = C.value ? C.value : "#002f3c", a = $.value ? $.value : "#ffffff", l = !N.value || N.value < 0 ? 1 : N.value, s = !m.value || m.value < 0 ? 1 : m.value, f = !y.value || y.value < 0 ? 0 : y.value, b = h.value ? h.value : "'Lato', sans-serif", z = g.value ? g.value : "1.6em", o = !V.value || V.value < 0 ? 100 : V.value;
       return {
-        disabled: o,
-        display: B,
-        buttonColor: r,
-        shadowColor: l,
+        disabled: d,
+        display: w,
+        buttonColor: v,
+        shadowColor: n,
         textColor: a,
-        paddingX: n,
-        paddingY: W,
-        borderRadius: d,
-        font: H,
-        fontSize: X,
-        fontWeight: R
+        paddingX: l,
+        paddingY: s,
+        borderRadius: f,
+        font: b,
+        fontSize: z,
+        fontWeight: o
       };
-    }), v = t(() => u.value.disabled), z = t(() => ({
+    }), x = t(() => u.value.disabled), k = t(() => ({
       display: u.value.display
-    })), I = t(() => {
-      const o = u.value;
+    })), H = t(() => {
+      const d = u.value;
       return {
-        color: o.textColor,
-        backgroundColor: o.buttonColor,
-        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${o.shadowColor}`,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        borderRadius: `${o.borderRadius}rem`,
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        color: d.textColor,
+        backgroundColor: d.buttonColor,
+        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${d.shadowColor}`,
+        padding: `${d.paddingY}rem ${d.paddingX}rem`,
+        padding: `${d.paddingY}rem ${d.paddingX}rem`,
+        borderRadius: `${d.borderRadius}rem`,
+        fontSize: d.fontSize,
+        fontWeight: d.fontWeight
       };
-    }), f = t(() => u.value.font), V = () => {
-      w("clicked");
+    }), r = t(() => u.value.font), B = () => {
+      X("clicked");
     };
-    return (o, B) => e.nbId ? (O(), L("div", {
+    return (d, w) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", v.value]),
-      style: N([z.value]),
+      class: E(["nb-wrapper", x.value]),
+      style: Y([k.value]),
       tabIndex: e.tabIndex,
-      onClick: V
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(S),
+      onClick: B,
+      onKeydown: [
+        w[0] || (w[0] = L((v) => !I(S) && e.hasTabIndexEnter && B(), ["enter"])),
+        w[1] || (w[1] = L(j((v) => !I(S) && e.hasTabIndexSpace && B(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component", "component-transition"]),
-        style: N([I.value])
+        class: E(["nb-reset", "component", "component-transition"]),
+        style: Y([H.value])
       }, [
-        A(o.$slots, "content", {}, () => [
-          B[0] || (B[0] = P("Default Text"))
+        M(d.$slots, "content", {}, () => [
+          w[2] || (w[2] = G("Default Text"))
         ], !0)
-      ], 12, ze)
-    ], 14, ke)) : T("", !0);
+      ], 12, Le)
+    ], 46, Xe)) : K("", !0);
   }
-}), Ye = /* @__PURE__ */ j(We, [["__scopeId", "data-v-5321163a"]]);
-const Xe = ["tabIndex"], Re = ["id"], De = /* @__PURE__ */ Object.assign({
+}), Ae = /* @__PURE__ */ Q(Re, [["__scopeId", "data-v-d1239e03"]]);
+const De = ["tabIndex", "aria-label", "aria-disabled"], Ee = ["id"], Oe = /* @__PURE__ */ Object.assign({
   name: "NbButtonHamburger",
   inheritAttrs: !1
 }, {
@@ -820,6 +926,18 @@ const Xe = ["tabIndex"], Re = ["id"], De = /* @__PURE__ */ Object.assign({
       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,
@@ -858,78 +976,85 @@ const Xe = ["tabIndex"], Re = ["id"], De = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((o) => ({
-      "49b4686b": I.value,
-      "61c85f08": f.value
+  setup(e, { emit: c }) {
+    U((d) => ({
+      "05489a45": H.value,
+      b1646024: r.value
     }));
-    const w = s, k = e;
-    oe(() => {
-      x.value = m.value;
+    const X = c, R = e;
+    ie(() => {
+      W.value = T.value;
     });
-    const x = ie(!1), {
-      status: m,
-      color: C,
-      containerColor: y,
-      containerColorHover: g,
-      colorHover: S,
-      paddingX: i,
-      paddingY: h,
-      disabled: _
-    } = M(k), b = t(() => {
-      const o = _.value ? "component-disabled" : "", B = x.value ? "change" : "", r = y.value ? y.value : "#333333", l = C.value ? C.value : "#ffffff", a = !i.value || i.value < 0 ? 3 : i.value, n = !h.value || h.value < 0 ? 3 : h.value, W = g.value ? g.value : "yellow", d = S.value ? S.value : "red";
+    const W = ve(!1), {
+      status: T,
+      color: $,
+      containerColor: N,
+      containerColorHover: m,
+      colorHover: y,
+      paddingX: C,
+      paddingY: S,
+      disabled: h
+    } = J(R), g = t(() => {
+      const d = h.value ? "component-disabled" : "", w = W.value ? "change" : "", v = N.value ? N.value : "#333333", n = $.value ? $.value : "#ffffff", a = !C.value || C.value < 0 ? 3 : C.value, l = !S.value || S.value < 0 ? 3 : S.value, s = m.value ? m.value : "yellow", f = y.value ? y.value : "red";
       return {
-        disabled: o,
-        buttonStatus: B,
-        containerColor: r,
+        disabled: d,
+        buttonStatus: w,
+        containerColor: v,
         paddingX: a,
-        paddingY: n,
-        color: l,
-        containerColorHover: W,
-        colorHover: d
+        paddingY: l,
+        color: n,
+        containerColorHover: s,
+        colorHover: f
       };
-    }), c = t(() => b.value.disabled), u = t(() => {
-      const o = b.value;
+    }), V = t(() => g.value.disabled), u = t(() => {
+      const d = g.value;
       return {
-        padding: `${o.paddingY}px ${o.paddingX}px`,
-        backgroundColor: o.containerColor
+        padding: `${d.paddingY}px ${d.paddingX}px`,
+        backgroundColor: d.containerColor
       };
-    }), v = t(() => ({
-      backgroundColor: b.value.color
-    })), z = t(() => b.value.buttonStatus), I = t(() => b.value.containerColorHover), f = t(() => b.value.colorHover), V = () => {
-      const o = !x.value;
-      x.value = o, w("clicked", o);
+    }), x = t(() => ({
+      backgroundColor: g.value.color
+    })), k = t(() => g.value.buttonStatus), H = t(() => g.value.containerColorHover), r = t(() => g.value.colorHover), B = () => {
+      const d = !W.value;
+      W.value = d, X("clicked", d);
     };
-    return ce(m, () => {
-      x.value = m.value;
-    }), (o, B) => e.nbId ? (O(), L("div", {
+    return pe(T, () => {
+      W.value = T.value;
+    }), (d, w) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", c.value]),
-      style: N([u.value]),
+      class: E(["nb-wrapper", V.value]),
+      style: Y([u.value]),
       tabIndex: e.tabIndex,
-      onClick: V
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(h),
+      onClick: B,
+      onKeydown: [
+        w[0] || (w[0] = L((v) => !I(h) && e.hasTabIndexEnter && B(), ["enter"])),
+        w[1] || (w[1] = L(j((v) => !I(h) && e.hasTabIndexSpace && B(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component", z.value])
+        class: E(["nb-reset", "component", k.value])
       }, [
-        $("div", {
+        D("div", {
           class: "component__line-one",
-          style: N(v.value)
+          style: Y(x.value)
         }, null, 4),
-        $("div", {
+        D("div", {
           class: "component__line-two",
-          style: N(v.value)
+          style: Y(x.value)
         }, null, 4),
-        $("div", {
+        D("div", {
           class: "component__line-three",
-          style: N(v.value)
+          style: Y(x.value)
         }, null, 4)
-      ], 10, Re)
-    ], 14, Xe)) : T("", !0);
+      ], 10, Ee)
+    ], 46, De)) : K("", !0);
   }
-}), Oe = /* @__PURE__ */ j(De, [["__scopeId", "data-v-6bdc0122"]]);
-const Le = ["tabIndex"], Te = ["id"], Ae = /* @__PURE__ */ Object.assign({
+}), Fe = /* @__PURE__ */ Q(Oe, [["__scopeId", "data-v-ee16aa34"]]);
+const _e = ["tabIndex", "aria-label", "aria-disabled"], Pe = ["id"], Ke = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorOutside",
   inheritAttrs: !1
 }, {
@@ -943,14 +1068,26 @@ const Le = ["tabIndex"], Te = ["id"], Ae = /* @__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"
@@ -998,85 +1135,92 @@ const Le = ["tabIndex"], Te = ["id"], Ae = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((a) => ({
-      "376a4432": o.value,
-      "43f10443": r.value,
-      "3d6f03f8": V.value,
-      "933400b0": B.value
+  setup(e, { emit: c }) {
+    U((a) => ({
+      "1be7c59c": d.value,
+      "25955d43": v.value,
+      bccb6a10: B.value,
+      "374c98a8": w.value
     }));
-    const w = s, k = e, {
-      display: x,
-      buttonColor: m,
-      borderColor: C,
-      textColor: y,
-      paddingX: g,
-      paddingY: S,
-      borderRadius: i,
-      disabled: h,
-      fontFamily: _,
-      fontSize: b,
-      fontWeight: c
-    } = M(k), u = t(() => {
-      const a = h.value ? "component-disabled" : "", n = x.value !== "b" ? "inline-block" : "block", W = m.value ? m.value : "#bbbbbb", d = C.value ? C.value : "#ffe54c", H = y.value ? y.value : "#ffffff", X = !g.value || g.value < 0 ? 1 : g.value, R = !S.value || S.value < 0 ? 0.2 : S.value, p = !i.value || i.value < 0 ? 0 : i.value, D = _.value ? _.value : "'Lato', sans-serif", q = b.value ? b.value : "1.6em", G = !c.value || c.value < 0 ? 200 : c.value;
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      borderColor: $,
+      textColor: N,
+      paddingX: m,
+      paddingY: y,
+      borderRadius: C,
+      disabled: S,
+      fontFamily: h,
+      fontSize: g,
+      fontWeight: V
+    } = J(R), u = t(() => {
+      const a = S.value ? "component-disabled" : "", l = W.value !== "b" ? "inline-block" : "block", s = T.value ? T.value : "#bbbbbb", f = $.value ? $.value : "#ffe54c", b = N.value ? N.value : "#ffffff", z = !m.value || m.value < 0 ? 1 : m.value, o = !y.value || y.value < 0 ? 0.2 : y.value, i = !C.value || C.value < 0 ? 0 : C.value, p = h.value ? h.value : "'Lato', sans-serif", A = g.value ? g.value : "1.6em", O = !V.value || V.value < 0 ? 200 : V.value;
       return {
         disabled: a,
-        display: n,
-        buttonColor: W,
-        borderColor: d,
-        textColor: H,
-        paddingX: X,
-        paddingY: R,
-        borderRadius: p,
-        font: D,
-        fontSize: q,
-        fontWeight: G
+        display: l,
+        buttonColor: s,
+        borderColor: f,
+        textColor: b,
+        paddingX: z,
+        paddingY: o,
+        borderRadius: i,
+        font: p,
+        fontSize: A,
+        fontWeight: O
       };
-    }), v = t(() => u.value.disabled), z = t(() => ({
+    }), x = t(() => u.value.disabled), k = t(() => ({
       display: u.value.display
-    })), I = t(() => {
+    })), H = t(() => {
       const a = u.value;
       return {
         color: a.textColor,
         fontSize: a.fontSize,
         fontWeight: a.fontWeight
       };
-    }), f = t(() => {
+    }), r = t(() => {
       const a = u.value;
       return {
         padding: `${a.paddingY}rem ${a.paddingX}rem`,
         border: `1px solid ${a.borderColor}`,
-        borderRadius: V.value
+        borderRadius: B.value
       };
-    }), V = t(() => `${u.value.borderRadius}rem`), o = t(() => u.value.font), B = t(() => u.value.textColor), r = t(() => u.value.buttonColor), l = () => {
-      w("clicked");
+    }), B = t(() => `${u.value.borderRadius}rem`), d = t(() => u.value.font), w = t(() => u.value.textColor), v = t(() => u.value.buttonColor), n = () => {
+      X("clicked");
     };
-    return (a, n) => e.nbId ? (O(), L("div", {
+    return (a, l) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", v.value]),
-      style: N([z.value]),
+      class: E(["nb-wrapper", x.value]),
+      style: Y([k.value]),
       tabIndex: e.tabIndex,
-      onClick: l
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(S),
+      onClick: n,
+      onKeydown: [
+        l[0] || (l[0] = L((s) => !I(S) && e.hasTabIndexEnter && n(), ["enter"])),
+        l[1] || (l[1] = L(j((s) => !I(S) && e.hasTabIndexSpace && n(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component"]),
-        style: N([I.value])
+        class: E(["nb-reset", "component"]),
+        style: Y([H.value])
       }, [
-        $("div", {
+        D("div", {
           class: "component-content",
-          style: N([f.value])
+          style: Y([r.value])
         }, [
-          A(a.$slots, "content", {}, () => [
-            n[0] || (n[0] = P("Default Text"))
+          M(a.$slots, "content", {}, () => [
+            l[2] || (l[2] = G("Default Text"))
           ], !0)
         ], 4),
-        n[1] || (n[1] = $("div", { class: "component-shadow" }, null, -1))
-      ], 12, Te)
-    ], 14, Le)) : T("", !0);
+        l[3] || (l[3] = D("div", { class: "component-shadow" }, null, -1))
+      ], 12, Pe)
+    ], 46, _e)) : K("", !0);
   }
-}), Pe = /* @__PURE__ */ j(Ae, [["__scopeId", "data-v-9e02fc57"]]);
-const Fe = ["tabIndex"], Me = ["id"], je = /* @__PURE__ */ Object.assign({
+}), je = /* @__PURE__ */ Q(Ke, [["__scopeId", "data-v-4ae432a3"]]);
+const qe = ["tabIndex", "aria-label", "aria-disabled"], Me = ["id"], Ge = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorHover",
   inheritAttrs: !1
 }, {
@@ -1090,14 +1234,26 @@ const Fe = ["tabIndex"], Me = ["id"], je = /* @__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"
@@ -1149,80 +1305,88 @@ const Fe = ["tabIndex"], Me = ["id"], je = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((n) => ({
-      "150d2f08": V.value,
-      "7b6bece6": r.value,
-      "00c8e0ea": B.value,
-      "6c59bfaf": l.value,
-      be18611c: o.value
+  setup(e, { emit: c }) {
+    U((l) => ({
+      "37a8072e": B.value,
+      "420521fa": v.value,
+      "2e48555d": w.value,
+      "37cde362": n.value,
+      f8f7c1c2: d.value
     }));
-    const w = s, k = e, {
-      display: x,
-      textColor: m,
-      paddingX: C,
-      paddingY: y,
-      borderRadius: g,
-      disabled: S,
-      fontFamily: i,
-      fontSize: h,
-      fontWeight: _,
-      textColorHover: b,
-      buttonColor: c,
+    const X = c, R = e, {
+      display: W,
+      textColor: T,
+      paddingX: $,
+      paddingY: N,
+      borderRadius: m,
+      disabled: y,
+      fontFamily: C,
+      fontSize: S,
+      fontWeight: h,
+      textColorHover: g,
+      buttonColor: V,
       buttonColorHover: u
-    } = M(k), v = t(() => {
-      const n = S.value ? "component-disabled" : "", W = x.value !== "b" ? "inline-block" : "block", d = m ? m.value : "ffffff", H = !C.value || C.value < 0 ? 1 : C.value, X = !y.value || y.value < 0 ? 0.2 : y.value, R = !g.value || g.value < 0 ? 0 : g.value, p = i.value ? i.value : "'Lato', sans-serif", D = h.value ? h.value : "1.6rem", q = !_.value || _.value < 0 ? 100 : _.value, G = b.value ? b.value : "#cccccc", E = c.value ? c.value : "#bbbbbb", J = u.value ? u.value : "#959595";
+    } = J(R), x = t(() => {
+      const l = y.value ? "component-disabled" : "", s = W.value !== "b" ? "inline-block" : "block", f = T ? T.value : "ffffff", b = !$.value || $.value < 0 ? 1 : $.value, z = !N.value || N.value < 0 ? 0.2 : N.value, o = !m.value || m.value < 0 ? 0 : m.value, i = C.value ? C.value : "'Lato', sans-serif", p = S.value ? S.value : "1.6rem", A = !h.value || h.value < 0 ? 100 : h.value, O = g.value ? g.value : "#cccccc", F = V.value ? V.value : "#bbbbbb", q = u.value ? u.value : "#959595";
       return {
-        disabled: n,
-        display: W,
-        font: p,
-        fontSize: D,
-        fontWeight: q,
-        textColor: d,
-        paddingX: H,
-        paddingY: X,
-        borderRadius: R,
-        textColorHover: G,
-        buttonColor: E,
-        buttonColorHover: J
+        disabled: l,
+        display: s,
+        font: i,
+        fontSize: p,
+        fontWeight: A,
+        textColor: f,
+        paddingX: b,
+        paddingY: z,
+        borderRadius: o,
+        textColorHover: O,
+        buttonColor: F,
+        buttonColorHover: q
       };
-    }), z = t(() => v.value.disabled), I = t(() => {
-      const n = v.value;
+    }), k = t(() => x.value.disabled), H = t(() => {
+      const l = x.value;
       return {
-        display: n.display,
-        borderRadius: `${n.borderRadius}rem`
+        display: l.display,
+        borderRadius: `${l.borderRadius}rem`
       };
-    }), f = t(() => {
-      const n = v.value;
+    }), r = t(() => {
+      const l = x.value;
       return {
-        color: n.textColor,
-        padding: `${n.paddingY}rem ${n.paddingX}rem`,
-        borderRadius: `${n.borderRadius}rem`,
-        fontSize: n.fontSize,
-        fontWeight: n.fontWeight
+        color: l.textColor,
+        padding: `${l.paddingY}rem ${l.paddingX}rem`,
+        borderRadius: `${l.borderRadius}rem`,
+        fontSize: l.fontSize,
+        fontWeight: l.fontWeight
       };
-    }), V = t(() => v.value.font), o = t(() => v.value.textColor), B = t(() => v.value.textColorHover), r = t(() => v.value.buttonColor), l = t(() => v.value.buttonColorHover), a = () => {
-      w("clicked");
+    }), B = t(() => x.value.font), d = t(() => x.value.textColor), w = t(() => x.value.textColorHover), v = t(() => x.value.buttonColor), n = t(() => x.value.buttonColorHover), a = () => {
+      X("clicked");
     };
-    return (n, W) => (O(), L("div", {
-      class: Y(["nb-wrapper", z.value]),
-      style: N([I.value]),
+    return (l, s) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", k.value]),
+      style: Y([H.value]),
       tabIndex: e.tabIndex,
-      onClick: a
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(y),
+      onClick: a,
+      onKeydown: [
+        s[0] || (s[0] = L((f) => !I(y) && e.hasTabIndexEnter && a(), ["enter"])),
+        s[1] || (s[1] = L(j((f) => !I(y) && e.hasTabIndexSpace && a(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
         class: "nb-reset component component-transition",
-        style: N([f.value])
+        style: Y([r.value])
       }, [
-        A(n.$slots, "content", {}, () => [
-          W[0] || (W[0] = P("Default Text"))
+        M(l.$slots, "content", {}, () => [
+          s[2] || (s[2] = G("Default Text"))
         ], !0)
       ], 12, Me)
-    ], 14, Fe));
+    ], 46, qe)) : K("", !0);
   }
-}), qe = /* @__PURE__ */ j(je, [["__scopeId", "data-v-a503e43d"]]);
-const Ge = ["tabIndex"], Ee = ["id"], Je = { class: "first-child" }, Ke = { class: "last-child" }, Qe = /* @__PURE__ */ Object.assign({
+}), Ue = /* @__PURE__ */ Q(Ge, [["__scopeId", "data-v-d083f1f8"]]);
+const Je = ["tabIndex", "aria-label", "aria-disabled"], Qe = ["id"], Ze = { class: "first-child" }, et = { class: "last-child" }, tt = /* @__PURE__ */ Object.assign({
   name: "NbButtonAlternateText",
   inheritAttrs: !1
 }, {
@@ -1236,14 +1400,26 @@ const Ge = ["tabIndex"], Ee = ["id"], Je = { class: "first-child" }, Ke = { clas
       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"
@@ -1309,93 +1485,100 @@ const Ge = ["tabIndex"], Ee = ["id"], Je = { class: "first-child" }, Ke = { clas
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((d) => ({
-      db8c30f0: r.value,
-      "85cc2104": l.value,
-      "02321768": a.value,
-      "6d685699": n.value
+  setup(e, { emit: c }) {
+    U((f) => ({
+      "516e8559": v.value,
+      "48b787e2": n.value,
+      "0e5ada5b": a.value,
+      "1291c2ea": l.value
     }));
-    const w = s, k = e, {
-      display: x,
-      buttonColor: m,
-      borderColor: C,
-      buttonHoverColor: y,
-      showBorder: g,
-      borderRadius: S,
-      textColor: i,
-      textHoverColor: h,
-      width: _,
-      paddingX: b,
-      paddingY: c,
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      borderColor: $,
+      buttonHoverColor: N,
+      showBorder: m,
+      borderRadius: y,
+      textColor: C,
+      textHoverColor: S,
+      width: h,
+      paddingX: g,
+      paddingY: V,
       disabled: u,
-      fontFamily: v,
-      fontSize: z,
-      fontWeight: I
-    } = M(k), f = t(() => {
-      const d = u.value ? "component-disabled" : "", H = x.value !== "b" ? "inline-block" : "block", X = m.value ? m.value : "#ffffff", R = y.value ? y.value : "#000000", p = C.value ? C.value : "#ffe54c", D = !S.value || S.value < 0 ? 0 : S.value, q = [!1, !0].includes(g.value) ? g.value : !0, G = i.value ? i.value : "#ffffff", E = h.value ? h.value : "#000000", J = !_.value || _.value < 86 ? 86 : _.value, K = !b.value || b.value < 0 ? 1 : b.value, Q = !c.value || c.value < 0 ? 0.4 : c.value, U = v.value ? v.value : "'Lato', sans-serif", Z = z.value ? z.value : "1.6em", ee = !I.value || I.value < 0 ? 200 : I.value;
+      fontFamily: x,
+      fontSize: k,
+      fontWeight: H
+    } = J(R), r = t(() => {
+      const f = u.value ? "component-disabled" : "", b = W.value !== "b" ? "inline-block" : "block", z = T.value ? T.value : "#ffffff", o = N.value ? N.value : "#000000", i = $.value ? $.value : "#ffe54c", p = !y.value || y.value < 0 ? 0 : y.value, A = [!1, !0].includes(m.value) ? m.value : !0, O = C.value ? C.value : "#ffffff", F = S.value ? S.value : "#000000", q = !h.value || h.value < 86 ? 86 : h.value, Z = !g.value || g.value < 0 ? 1 : g.value, ee = !V.value || V.value < 0 ? 0.4 : V.value, te = x.value ? x.value : "'Lato', sans-serif", ae = k.value ? k.value : "1.6em", oe = !H.value || H.value < 0 ? 200 : H.value;
       return {
-        disabled: d,
-        display: H,
-        buttonColor: X,
-        buttonHoverColor: R,
-        borderColor: p,
-        showBorder: q,
-        borderRadius: D,
-        textColor: G,
-        textHoverColor: E,
-        width: J,
-        paddingX: K,
-        paddingY: Q,
-        font: U,
-        fontSize: Z,
-        fontWeight: ee
+        disabled: f,
+        display: b,
+        buttonColor: z,
+        buttonHoverColor: o,
+        borderColor: i,
+        showBorder: A,
+        borderRadius: p,
+        textColor: O,
+        textHoverColor: F,
+        width: q,
+        paddingX: Z,
+        paddingY: ee,
+        font: te,
+        fontSize: ae,
+        fontWeight: oe
       };
-    }), V = t(() => f.value.disabled), o = t(() => ({
-      display: f.value.display
-    })), B = t(() => {
-      const d = f.value, H = d.display === "block" ? "auto" : `${d.width}px`;
+    }), B = t(() => r.value.disabled), d = t(() => ({
+      display: r.value.display
+    })), w = t(() => {
+      const f = r.value, b = f.display === "block" ? "auto" : `${f.width}px`;
       return {
-        ...d.showBorder ? { border: `1px solid ${d.borderColor}` } : {},
-        borderRadius: `${d.borderRadius}rem`,
-        background: d.buttonColor,
+        ...f.showBorder ? { border: `1px solid ${f.borderColor}` } : {},
+        borderRadius: `${f.borderRadius}rem`,
+        background: f.buttonColor,
         minWidth: "33px",
-        width: H,
-        padding: `${d.paddingY}rem ${d.paddingX}rem`,
+        width: b,
+        padding: `${f.paddingY}rem ${f.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: d.fontSize,
-        fontWeight: d.fontWeight
+        fontSize: f.fontSize,
+        fontWeight: f.fontWeight
       };
-    }), r = t(() => f.value.font), l = t(() => f.value.textColor), a = t(() => f.value.textHoverColor), n = t(() => f.value.buttonHoverColor), W = () => {
-      w("clicked");
+    }), v = t(() => r.value.font), n = t(() => r.value.textColor), a = t(() => r.value.textHoverColor), l = t(() => r.value.buttonHoverColor), s = () => {
+      X("clicked");
     };
-    return (d, H) => e.nbId ? (O(), L("div", {
+    return (f, b) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", V.value]),
-      style: N([o.value]),
+      class: E(["nb-wrapper", B.value]),
+      style: Y([d.value]),
       tabIndex: e.tabIndex,
-      onClick: W
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(u),
+      onClick: s,
+      onKeydown: [
+        b[0] || (b[0] = L((z) => !I(u) && e.hasTabIndexEnter && s(), ["enter"])),
+        b[1] || (b[1] = L(j((z) => !I(u) && e.hasTabIndexSpace && s(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component"]),
-        style: N([B.value])
+        class: E(["nb-reset", "component"]),
+        style: Y([w.value])
       }, [
-        $("div", Je, [
-          A(d.$slots, "content", {}, () => [
-            H[0] || (H[0] = P("Default Text"))
+        D("div", Ze, [
+          M(f.$slots, "content", {}, () => [
+            b[2] || (b[2] = G("Default Text"))
           ], !0)
         ]),
-        $("div", Ke, [
-          A(d.$slots, "content", {}, () => [
-            H[1] || (H[1] = P("Default Text"))
+        D("div", et, [
+          M(f.$slots, "content", {}, () => [
+            b[3] || (b[3] = G("Default Text"))
           ], !0)
         ])
-      ], 12, Ee)
-    ], 14, Ge)) : T("", !0);
+      ], 12, Qe)
+    ], 46, Je)) : K("", !0);
   }
-}), Ue = /* @__PURE__ */ j(Qe, [["__scopeId", "data-v-3ce7e9d1"]]);
-const Ze = ["tabIndex"], et = ["id"], tt = /* @__PURE__ */ Object.assign({
+}), at = /* @__PURE__ */ Q(tt, [["__scopeId", "data-v-b10ffc3e"]]);
+const ot = ["tabIndex", "aria-label", "aria-disabled"], lt = ["id"], nt = /* @__PURE__ */ Object.assign({
   name: "NbButtonBack",
   inheritAttrs: !1
 }, {
@@ -1409,6 +1592,18 @@ const Ze = ["tabIndex"], et = ["id"], tt = /* @__PURE__ */ Object.assign({
       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"
@@ -1442,88 +1637,1056 @@ const Ze = ["tabIndex"], et = ["id"], tt = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: s }) {
-    F((f) => ({
-      "76ffedba": u.value,
-      "1d39e94e": c.value,
-      f64dd3f4: b.value
-    })), oe(() => {
-      z();
+  setup(e, { emit: c }) {
+    U((r) => ({
+      aa62e326: u.value,
+      adaa07ba: V.value,
+      40060860: g.value
+    })), ie(() => {
+      k();
     });
-    const w = s, k = e, {
-      color: x,
-      textColor: m,
-      disabled: C,
-      fontFamily: y,
-      fontSize: g,
-      fontWeight: S
-    } = M(k), i = t(() => {
-      const f = C.value ? "component-disabled" : "", V = x.value ? x.value : "#77d2ff", o = m.value ? m.value : "#6dc1ec", B = y.value ? y.value : "'Lato', sans-serif", r = g.value ? g.value : "1.6em", l = !S.value || S.value < 0 ? 400 : S.value;
+    const X = c, R = e, {
+      color: W,
+      textColor: T,
+      disabled: $,
+      fontFamily: N,
+      fontSize: m,
+      fontWeight: y
+    } = J(R), C = t(() => {
+      const r = $.value ? "component-disabled" : "", B = W.value ? W.value : "#77d2ff", d = T.value ? T.value : "#6dc1ec", w = N.value ? N.value : "'Lato', sans-serif", v = m.value ? m.value : "1.6em", n = !y.value || y.value < 0 ? 400 : y.value;
       return {
-        color: V,
-        textColor: o,
-        font: B,
-        fontSize: r,
-        fontWeight: l,
-        disabled: f
+        color: B,
+        textColor: d,
+        font: w,
+        fontSize: v,
+        fontWeight: n,
+        disabled: r
       };
-    }), h = t(() => ({})), _ = t(() => {
-      const f = i.value;
+    }), S = t(() => ({})), h = t(() => {
+      const r = C.value;
       return {
-        fontSize: f.fontSize,
-        fontWeight: f.fontWeight
+        fontSize: r.fontSize,
+        fontWeight: r.fontWeight
       };
-    }), b = t(() => i.value.color), c = t(() => i.value.textColor), u = t(() => i.value.font), v = t(() => i.value.disabled), z = () => {
-    }, I = () => {
-      w("clicked");
+    }), g = t(() => C.value.color), V = t(() => C.value.textColor), u = t(() => C.value.font), x = t(() => C.value.disabled), k = () => {
+    }, H = () => {
+      X("clicked");
     };
-    return (f, V) => e.nbId ? (O(), L("div", {
+    return (r, B) => e.nbId ? (_(), P("div", {
       key: 0,
-      class: Y(["nb-wrapper", v.value]),
-      style: N([h.value]),
+      class: E(["nb-wrapper", x.value]),
+      style: Y([S.value]),
       tabIndex: e.tabIndex,
-      onClick: I
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I($),
+      onClick: H,
+      onKeydown: [
+        B[0] || (B[0] = L((d) => !I($) && e.hasTabIndexEnter && H(), ["enter"])),
+        B[1] || (B[1] = L(j((d) => !I($) && e.hasTabIndexSpace && H(), ["prevent"]), ["space"]))
+      ]
     }, [
-      $("div", {
+      D("div", {
         id: e.nbId,
-        class: Y(["nb-reset", "component"]),
-        style: N([_.value])
+        class: E(["nb-reset", "component"]),
+        style: Y([h.value])
       }, [
-        V[0] || (V[0] = $("svg", {
+        B[2] || (B[2] = D("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "1em",
           height: "1em",
           viewBox: "0 0 16 16"
         }, [
-          $("path", {
+          D("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)),
-        $("span", null, fe(e.text), 1)
-      ], 12, et)
-    ], 14, Ze)) : T("", !0);
+        D("span", null, ye(e.text), 1)
+      ], 12, lt)
+    ], 46, ot)) : K("", !0);
+  }
+}), ut = /* @__PURE__ */ Q(nt, [["__scopeId", "data-v-1df91d2a"]]);
+const rt = ["tabIndex", "aria-label", "aria-disabled"], dt = ["id"], st = /* @__PURE__ */ Object.assign({
+  name: "NbButtonGradientBorderToBackground",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonGradientBorderToBackground",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        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"
+    },
+    textHoverColor: {
+      type: String,
+      default: "blue"
+    },
+    buttonColor: {
+      type: String,
+      default: "linear-gradient(120deg,#fa7faa,#ff9691 25%,#ffb287 50%,transparent 55%,transparent)"
+    },
+    buttonHoverColor: {
+      type: String,
+      default: "linear-gradient(11deg, #c83852, #b44092 50%, #6a5fc1)"
+    },
+    borderColor: {
+      type: String,
+      default: "#ffe54c"
+    },
+    showBorder: {
+      type: Boolean,
+      default: !0,
+      validator: (e) => typeof e == "boolean" && [!0, !1].includes(e)
+    },
+    borderRadius: {
+      type: Number,
+      default: 0.375
+    },
+    width: {
+      type: Number,
+      default: 86,
+      validator: (e) => e || 86
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    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: 200,
+      validator: (e) => e || 200
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    U((o) => ({
+      "9a6bd336": v.value,
+      af7fbc14: f.value,
+      "0b36ee1b": l.value,
+      d9aa144e: a.value,
+      "01d4b136": n.value,
+      c5bce062: s.value,
+      "779f80e6": b.value
+    }));
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      borderColor: $,
+      buttonHoverColor: N,
+      showBorder: m,
+      borderRadius: y,
+      textColor: C,
+      textHoverColor: S,
+      width: h,
+      paddingX: g,
+      paddingY: V,
+      disabled: u,
+      fontFamily: x,
+      fontSize: k,
+      fontWeight: H
+    } = J(R), r = t(() => {
+      const o = u.value ? "component-disabled" : "", i = W.value !== "b" ? "inline-block" : "block", p = T.value ? T.value : "#ffffff", A = N.value ? N.value : "#000000", O = $.value ? $.value : "#ffe54c", F = !y.value || y.value < 0 ? 0 : y.value, q = [!1, !0].includes(m.value) ? m.value : !0, Z = C.value ? C.value : "#ffffff", ee = S.value ? S.value : "#000000", te = !h.value || h.value < 86 ? 86 : h.value, ae = !g.value || g.value < 0 ? 1 : g.value, oe = !V.value || V.value < 0 ? 0.2 : V.value, le = x.value ? x.value : "'Lato', sans-serif", ne = k.value ? k.value : "1.6em", ue = !H.value || H.value < 0 ? 200 : H.value;
+      return {
+        disabled: o,
+        display: i,
+        buttonColor: p,
+        buttonHoverColor: A,
+        borderColor: O,
+        showBorder: q,
+        borderRadius: F,
+        textColor: Z,
+        textHoverColor: ee,
+        width: te,
+        paddingX: ae,
+        paddingY: oe,
+        font: le,
+        fontSize: ne,
+        fontWeight: ue
+      };
+    }), B = t(() => r.value.disabled), d = t(() => ({
+      display: r.value.display
+    })), w = t(() => {
+      const o = r.value;
+      return {
+        minWidth: "33px",
+        width: o.display === "block" ? "auto" : `${o.width}px`,
+        lineHeight: "1.42857143",
+        fontSize: o.fontSize,
+        fontWeight: o.fontWeight
+      };
+    }), v = t(() => r.value.font), n = t(() => {
+      const o = r.value;
+      return `${o.paddingY}rem ${o.paddingX}rem`;
+    }), a = t(() => `${r.value.borderRadius}rem`), l = t(() => r.value.textColor), s = t(() => r.value.textHoverColor), f = t(() => r.value.buttonColor), b = t(() => r.value.buttonHoverColor), z = () => {
+      X("clicked");
+    };
+    return (o, i) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", B.value]),
+      style: Y([d.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(u),
+      onClick: z,
+      onKeydown: [
+        i[0] || (i[0] = L((p) => !I(u) && e.hasTabIndexEnter && z(), ["enter"])),
+        i[1] || (i[1] = L(j((p) => !I(u) && e.hasTabIndexSpace && z(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      D("div", {
+        id: e.nbId,
+        class: "nb-reset component",
+        style: Y([w.value])
+      }, [
+        M(o.$slots, "content", {}, () => [
+          i[2] || (i[2] = G("Default Text"))
+        ], !0)
+      ], 12, dt)
+    ], 46, rt)) : K("", !0);
+  }
+}), it = /* @__PURE__ */ Q(st, [["__scopeId", "data-v-551d4abb"]]);
+const ft = ["tabIndex", "aria-label", "aria-disabled"], bt = ["id"], ct = /* @__PURE__ */ Object.assign({
+  name: "NbButtonNormal",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonNormal",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        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"
+    },
+    textHoverColor: {
+      type: String,
+      default: "blue"
+    },
+    buttonColor: {
+      type: String,
+      default: "tomato"
+    },
+    buttonHoverColor: {
+      type: String,
+      default: "green"
+    },
+    borderColor: {
+      type: String,
+      default: "#ffe54c"
+    },
+    showBorder: {
+      type: Boolean,
+      default: !0,
+      validator: (e) => typeof e == "boolean" && [!0, !1].includes(e)
+    },
+    borderRadius: {
+      type: Number,
+      default: 0.375
+    },
+    width: {
+      type: Number,
+      default: 86,
+      validator: (e) => e || 86
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    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: 200,
+      validator: (e) => e || 200
+    },
+    hasAnimation: {
+      type: Boolean,
+      default: !1
+    },
+    animationDuration: {
+      type: Number,
+      default: 0.3
+    },
+    animationDurationType: {
+      type: String,
+      default: "s",
+      // ms, s, etc.
+      validator: (e) => ["ms", "s"].indexOf(e) !== -1
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    U((p) => ({
+      "4459caa6": l.value,
+      "5c71f5c8": s.value,
+      "0b267cb7": b.value,
+      "53d6f26a": o.value,
+      "9c869d24": f.value,
+      "5c0e9276": z.value
+    }));
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      borderColor: $,
+      buttonHoverColor: N,
+      showBorder: m,
+      borderRadius: y,
+      textColor: C,
+      textHoverColor: S,
+      width: h,
+      paddingX: g,
+      paddingY: V,
+      disabled: u,
+      fontFamily: x,
+      fontSize: k,
+      fontWeight: H,
+      hasAnimation: r,
+      animationDuration: B,
+      animationDurationType: d
+    } = J(R), w = t(() => {
+      const p = u.value ? "component-disabled" : "", A = W.value !== "b" ? "inline-block" : "block", O = T.value ? T.value : "#ffffff", F = N.value ? N.value : "#000000", q = $.value ? $.value : "#ffe54c", Z = !y.value || y.value < 0 ? 0 : y.value, ee = [!1, !0].includes(m.value) ? m.value : !0, te = C.value ? C.value : "#ffffff", ae = S.value ? S.value : "#000000", oe = !h.value || h.value < 86 ? 86 : h.value, le = !g.value || g.value < 0 ? 1 : g.value, ne = !V.value || V.value < 0 ? 0.2 : V.value, ue = x.value ? x.value : "'Lato', sans-serif", re = k.value ? k.value : "1.6em", de = !H.value || H.value < 0 ? 200 : H.value, fe = r.value ? "component-transition" : "", be = !B.value || B.value < 0 ? 0.3 : B.value, ce = !d.value || d.value < 0 ? "ms" : d.value;
+      return {
+        disabled: p,
+        display: A,
+        buttonColor: O,
+        buttonHoverColor: F,
+        borderColor: q,
+        showBorder: ee,
+        borderRadius: Z,
+        textColor: te,
+        textHoverColor: ae,
+        width: oe,
+        paddingX: le,
+        paddingY: ne,
+        font: ue,
+        fontSize: re,
+        fontWeight: de,
+        hasAnimation: fe,
+        animationDuration: be,
+        animationDurationType: ce
+      };
+    }), v = t(() => w.value.disabled), n = t(() => ({
+      display: w.value.display
+    })), a = t(() => {
+      const p = w.value, A = p.display === "block" ? "auto" : `${p.width}px`;
+      return {
+        ...p.showBorder ? { border: `1px solid ${p.borderColor}` } : {},
+        borderRadius: `${p.borderRadius}rem`,
+        minWidth: "33px",
+        width: A,
+        padding: `${p.paddingY}rem ${p.paddingX}rem`,
+        lineHeight: "1.42857143",
+        fontSize: p.fontSize,
+        fontWeight: p.fontWeight
+      };
+    }), l = t(() => w.value.font), s = t(() => w.value.textColor), f = t(() => w.value.textHoverColor), b = t(() => w.value.buttonColor), z = t(() => w.value.buttonHoverColor), o = t(() => {
+      const p = w.value;
+      return p.hasAnimation ? `all ${p.animationDuration}${p.animationDurationType} ease-in-out` : "";
+    }), i = () => {
+      X("clicked");
+    };
+    return (p, A) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", v.value]),
+      style: Y([n.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(u),
+      onClick: i,
+      onKeydown: [
+        A[0] || (A[0] = L((O) => !I(u) && e.hasTabIndexEnter && i(), ["enter"])),
+        A[1] || (A[1] = L(j((O) => !I(u) && e.hasTabIndexSpace && i(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      D("div", {
+        id: e.nbId,
+        class: E(["nb-reset component", { "component-transition": I(r) }]),
+        style: Y([a.value])
+      }, [
+        M(p.$slots, "content", {}, () => [
+          A[2] || (A[2] = G("Default Text"))
+        ], !0)
+      ], 14, bt)
+    ], 46, ft)) : K("", !0);
+  }
+}), vt = /* @__PURE__ */ Q(ct, [["__scopeId", "data-v-a7ab7bdc"]]);
+const pt = ["tabIndex", "aria-label", "aria-disabled"], yt = ["id"], gt = /* @__PURE__ */ Object.assign({
+  name: "NbButtonShadow",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonShadow",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        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: "#000000"
+    },
+    textHoverColor: {
+      type: String,
+      default: "tomato"
+    },
+    buttonColor: {
+      type: String,
+      default: "#faf77d"
+    },
+    buttonHoverColor: {
+      type: String,
+      default: "#faf77d"
+    },
+    buttonShadowColor: {
+      type: String,
+      default: "#01d7b0"
+    },
+    borderColor: {
+      type: String,
+      default: "#191a1b"
+    },
+    borderRadius: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 86,
+      validator: (e) => e || 86
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    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: 200,
+      validator: (e) => e || 200
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    U((o) => ({
+      "932e9364": v.value,
+      b5ada742: l.value,
+      "30817ec4": n.value,
+      de146bc2: f.value,
+      "300cdfc6": s.value,
+      "105400c6": a.value,
+      a7aceb46: b.value
+    }));
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      borderColor: $,
+      buttonHoverColor: N,
+      buttonShadowColor: m,
+      borderRadius: y,
+      textColor: C,
+      textHoverColor: S,
+      width: h,
+      paddingX: g,
+      paddingY: V,
+      disabled: u,
+      fontFamily: x,
+      fontSize: k,
+      fontWeight: H
+    } = J(R), r = t(() => {
+      const o = u.value ? "component-disabled" : "", i = W.value !== "b" ? "inline-block" : "block", p = T.value ? T.value : "#ffffff", A = N.value ? N.value : "#000000", O = m.value ? m.value : "#01d7b0", F = $.value ? $.value : "#ffe54c", q = !y.value || y.value < 0 ? 0 : y.value, Z = C.value ? C.value : "#ffffff", ee = S.value ? S.value : "#000000", te = !h.value || h.value < 86 ? 86 : h.value, ae = !g.value || g.value < 0 ? 1 : g.value, oe = !V.value || V.value < 0 ? 0.2 : V.value, le = x.value ? x.value : "'Lato', sans-serif", ne = k.value ? k.value : "1.6em", ue = !H.value || H.value < 0 ? 200 : H.value;
+      return {
+        disabled: o,
+        display: i,
+        buttonColor: p,
+        buttonHoverColor: A,
+        buttonShadowColor: O,
+        borderColor: F,
+        borderRadius: q,
+        textColor: Z,
+        textHoverColor: ee,
+        width: te,
+        paddingX: ae,
+        paddingY: oe,
+        font: le,
+        fontSize: ne,
+        fontWeight: ue
+      };
+    }), B = t(() => r.value.disabled), d = t(() => ({
+      display: r.value.display
+    })), w = t(() => {
+      const o = r.value, i = o.display === "block" ? "auto" : `${o.width}px`;
+      return {
+        border: `2px solid ${o.borderColor}`,
+        borderRadius: `${o.borderRadius}rem`,
+        minWidth: "33px",
+        width: i,
+        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        lineHeight: "1.42857143",
+        fontSize: o.fontSize,
+        fontWeight: o.fontWeight
+      };
+    }), v = t(() => r.value.font), n = t(() => r.value.textColor), a = t(() => r.value.textHoverColor), l = t(() => r.value.buttonColor), s = t(() => r.value.buttonHoverColor), f = t(() => {
+      const o = r.value;
+      return `3px 3px 0 -1px ${o.buttonShadowColor}, 3px 3px 0 ${o.buttonShadowColor}`;
+    }), b = t(() => {
+      const o = r.value;
+      return `0 0 0 -1px ${o.buttonShadowColor}, 0 0 0 ${o.buttonShadowColor};`;
+    }), z = () => {
+      X("clicked");
+    };
+    return (o, i) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", B.value]),
+      style: Y([d.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(u),
+      onClick: z,
+      onKeydown: [
+        i[0] || (i[0] = L((p) => !I(u) && e.hasTabIndexEnter && z(), ["enter"])),
+        i[1] || (i[1] = L(j((p) => !I(u) && e.hasTabIndexSpace && z(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      D("div", {
+        id: e.nbId,
+        class: "nb-reset component",
+        style: Y([w.value])
+      }, [
+        M(o.$slots, "content", {}, () => [
+          i[2] || (i[2] = G("Default Text"))
+        ], !0)
+      ], 12, yt)
+    ], 46, pt)) : K("", !0);
+  }
+}), mt = /* @__PURE__ */ Q(gt, [["__scopeId", "data-v-40806072"]]);
+const Vt = ["tabIndex", "aria-label", "aria-disabled"], xt = ["id"], Ct = /* @__PURE__ */ Object.assign({
+  name: "NbButtonUnderlineExpand",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonUnderlineExpand",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        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: "rgb(0, 105, 255)"
+    },
+    textHoverColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    borderColor: {
+      type: String,
+      default: "rgb(0, 105, 255)"
+    },
+    borderHoverColor: {
+      type: String,
+      default: "rgb(20, 51, 214)"
+    },
+    borderHeight: {
+      type: Number,
+      default: 1.5,
+      validator: (e) => e || 1.5
+    },
+    width: {
+      type: Number,
+      default: 86,
+      validator: (e) => e || 86
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    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: 200,
+      validator: (e) => e || 200
+    },
+    textAlign: {
+      type: String,
+      default: "middle",
+      validator: (e) => ["left", "center", "right"].includes(e)
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    U((b) => ({
+      "7a81bde5": w.value,
+      "7d23359b": v.value,
+      "348d6e88": a.value,
+      "4d2cba24": s.value,
+      fd940f62: n.value,
+      aa789c64: l.value
+    }));
+    const X = c, R = e, {
+      display: W,
+      borderColor: T,
+      borderHoverColor: $,
+      borderHeight: N,
+      textColor: m,
+      textHoverColor: y,
+      width: C,
+      paddingX: S,
+      paddingY: h,
+      disabled: g,
+      fontFamily: V,
+      fontSize: u,
+      fontWeight: x,
+      textAlign: k
+    } = J(R), H = t(() => {
+      const b = g.value ? "component-disabled" : "", z = W.value !== "b" ? "inline-block" : "block", o = T.value ? T.value : "#ffffff", i = $.value ? $.value : "#000000", p = N.value ? N.value : 1.5, A = m.value ? m.value : "#ffffff", O = y.value ? y.value : "#000000", F = !C.value || C.value < 86 ? 86 : C.value, q = !S.value || S.value < 0 ? 1 : S.value, Z = !h.value || h.value < 0 ? 0.2 : h.value, ee = V.value ? V.value : "'Lato', sans-serif", te = u.value ? u.value : "1.6em", ae = !x.value || x.value < 0 ? 200 : x.value, oe = k.value ? k.value : "center";
+      return {
+        disabled: b,
+        display: z,
+        borderColor: o,
+        borderHoverColor: i,
+        borderHeight: p,
+        textColor: A,
+        textHoverColor: O,
+        width: F,
+        paddingX: q,
+        paddingY: Z,
+        font: ee,
+        fontSize: te,
+        fontWeight: ae,
+        textAlign: oe
+      };
+    }), r = t(() => H.value.disabled), B = t(() => {
+      const b = H.value;
+      return {
+        display: b.display,
+        textAlign: b.textAlign
+      };
+    }), d = t(() => {
+      const b = H.value;
+      return {
+        minWidth: "33px",
+        width: b.display === "block" ? "auto" : `${b.width}px`,
+        padding: `${b.paddingY}rem ${b.paddingX}rem`,
+        lineHeight: "1.42857143",
+        fontSize: b.fontSize,
+        fontWeight: b.fontWeight
+      };
+    }), w = t(() => H.value.font), v = t(() => H.value.textColor), n = t(() => H.value.textHoverColor), a = t(() => H.value.borderColor), l = t(() => H.value.borderHoverColor), s = t(() => `${H.value.borderHeight}px`), f = () => {
+      X("clicked");
+    };
+    return (b, z) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", r.value]),
+      style: Y([B.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(g),
+      onClick: f,
+      onKeydown: [
+        z[0] || (z[0] = L((o) => !I(g) && e.hasTabIndexEnter && f(), ["enter"])),
+        z[1] || (z[1] = L(j((o) => !I(g) && e.hasTabIndexSpace && f(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      D("div", {
+        id: e.nbId,
+        class: "nb-reset component",
+        style: Y([d.value])
+      }, [
+        M(b.$slots, "content", {}, () => [
+          z[2] || (z[2] = G("Default Text"))
+        ], !0)
+      ], 12, xt)
+    ], 46, Vt)) : K("", !0);
+  }
+}), St = /* @__PURE__ */ Q(Ct, [["__scopeId", "data-v-2c21f930"]]);
+const ht = ["tabIndex", "aria-label", "aria-disabled"], Bt = ["id"], wt = /* @__PURE__ */ Object.assign({
+  name: "NbButtonUnderlineExpand",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonUnderlineFill",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        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: "rgb(0, 105, 255)"
+    },
+    textHoverColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    buttonColor: {
+      type: String,
+      default: "rgb(0, 105, 255)"
+    },
+    buttonHoverColor: {
+      type: String,
+      default: "rgb(20, 51, 214)"
+    },
+    borderColor: {
+      type: String,
+      default: "#ffe54c"
+    },
+    width: {
+      type: Number,
+      default: 86,
+      validator: (e) => e || 86
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    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: 200,
+      validator: (e) => e || 200
+    },
+    textAlign: {
+      type: String,
+      default: "middle",
+      validator: (e) => ["left", "center", "right"].includes(e)
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: c }) {
+    U((s) => ({
+      49544310: d.value,
+      69196589: n.value,
+      "0abc0b24": w.value,
+      b41efd9a: a.value,
+      bf3f8148: v.value
+    }));
+    const X = c, R = e, {
+      display: W,
+      buttonColor: T,
+      buttonHoverColor: $,
+      textColor: N,
+      textHoverColor: m,
+      width: y,
+      paddingX: C,
+      paddingY: S,
+      disabled: h,
+      fontFamily: g,
+      fontSize: V,
+      fontWeight: u,
+      textAlign: x
+    } = J(R), k = t(() => {
+      const s = h.value ? "component-disabled" : "", f = W.value !== "b" ? "inline-block" : "block", b = T.value ? T.value : "#ffffff", z = $.value ? $.value : "#000000", o = N.value ? N.value : "#ffffff", i = m.value ? m.value : "#000000", p = !y.value || y.value < 86 ? 86 : y.value, A = !C.value || C.value < 0 ? 1 : C.value, O = !S.value || S.value < 0 ? 0.2 : S.value, F = g.value ? g.value : "'Lato', sans-serif", q = V.value ? V.value : "1.6em", Z = !u.value || u.value < 0 ? 200 : u.value, ee = x.value ? x.value : "center";
+      return {
+        disabled: s,
+        display: f,
+        buttonColor: b,
+        buttonHoverColor: z,
+        textColor: o,
+        textHoverColor: i,
+        width: p,
+        paddingX: A,
+        paddingY: O,
+        font: F,
+        fontSize: q,
+        fontWeight: Z,
+        textAlign: ee
+      };
+    }), H = t(() => k.value.disabled), r = t(() => {
+      const s = k.value;
+      return {
+        display: s.display,
+        textAlign: s.textAlign
+      };
+    }), B = t(() => {
+      const s = k.value;
+      return {
+        minWidth: "33px",
+        width: s.display === "block" ? "auto" : `${s.width}px`,
+        padding: `${s.paddingY}rem ${s.paddingX}rem`,
+        lineHeight: "1.42857143",
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight
+      };
+    }), d = t(() => k.value.font), w = t(() => k.value.textColor), v = t(() => k.value.textHoverColor), n = t(() => {
+      const s = k.value;
+      return `linear-gradient(${s.buttonColor}, ${s.buttonColor}) center bottom / 1px 1px repeat-x`;
+    }), a = t(() => {
+      const s = k.value;
+      return `linear-gradient(${s.buttonHoverColor}, ${s.buttonHoverColor}) center bottom / 100% 100% repeat-x`;
+    }), l = () => {
+      X("clicked");
+    };
+    return (s, f) => e.nbId ? (_(), P("div", {
+      key: 0,
+      class: E(["nb-wrapper", H.value]),
+      style: Y([r.value]),
+      tabIndex: e.tabIndex,
+      role: "button",
+      "aria-label": e.ariaLabel,
+      "aria-disabled": I(h),
+      onClick: l,
+      onKeydown: [
+        f[0] || (f[0] = L((b) => !I(h) && e.hasTabIndexEnter && l(), ["enter"])),
+        f[1] || (f[1] = L(j((b) => !I(h) && e.hasTabIndexSpace && l(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      D("div", {
+        id: e.nbId,
+        class: "nb-reset component",
+        style: Y([B.value])
+      }, [
+        M(s.$slots, "content", {}, () => [
+          f[2] || (f[2] = G("Default Text"))
+        ], !0)
+      ], 12, Bt)
+    ], 46, ht)) : K("", !0);
   }
-}), at = /* @__PURE__ */ j(tt, [["__scopeId", "data-v-c0bdc145"]]), te = {
-  NbButtonVavaGame: ge,
-  NbButtonShowHover: xe,
-  NbButtonPrevNext: we,
-  NbButtonMechanical: He,
-  NbButtonMechanical2: Ye,
-  NbButtonHamburger: Oe,
-  NbButtonColorOutside: Pe,
-  NbButtonColorHover: qe,
-  NbButtonAlternateText: Ue,
-  NbButtonBack: at
-}, lt = {
+}), It = /* @__PURE__ */ Q(wt, [["__scopeId", "data-v-d0692556"]]), se = {
+  NbButtonVavaGame: Ce,
+  NbButtonShowHover: we,
+  NbButtonPrevNext: Te,
+  NbButtonMechanical: Ye,
+  NbButtonMechanical2: Ae,
+  NbButtonHamburger: Fe,
+  NbButtonColorOutside: je,
+  NbButtonColorHover: Ue,
+  NbButtonAlternateText: at,
+  NbButtonBack: ut,
+  NbButtonNormal: vt,
+  NbButtonShadow: mt,
+  NbButtonUnderlineExpand: St,
+  NbButtonUnderlineFill: It,
+  NbButtonGradientBorderToBackground: it
+}, 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 se)
+      if (Object.prototype.hasOwnProperty.call(se, c)) {
+        const X = se[c];
+        e.component(X.name, X);
       }
   }
 };
 export {
-  lt as default
+  Nt as default
 };