@vlalg-nimbus/nb-buttons 2.0.2 → 2.0.3

package/dist/nb-buttons.js

@@ -1,9 +1,9 @@
-import { useCssVars as P, toRefs as F, computed as t, openBlock as D, createElementBlock as O, normalizeClass as X, normalizeStyle as H, createElementVNode as z, renderSlot as q, createTextVNode as G, createCommentVNode as T, unref as ae, withModifiers as de, toDisplayString as Q, onMounted as se, ref as ie, watch as ce } from "vue";
-const M = (e, d) => {
-  const B = e.__vccOpts || e;
-  for (const [C, y] of d)
-    B[C] = y;
-  return B;
+import { useCssVars as F, toRefs as M, computed as t, openBlock as T, createElementBlock as L, normalizeClass as X, normalizeStyle as B, createElementVNode as R, renderSlot as q, createTextVNode as G, createCommentVNode as A, unref as ae, withModifiers as de, toDisplayString as Q, onMounted as se, ref as ie, watch as ce } from "vue";
+const j = (e, d) => {
+  const N = e.__vccOpts || e;
+  for (const [C, b] of d)
+    N[C] = b;
+  return N;
 }, fe = ["id"], ve = { class: "component-content__text" }, be = /* @__PURE__ */ Object.assign({
   name: "NbButtonVavaGame",
   inheritAttrs: !1
@@ -93,39 +93,39 @@ const M = (e, d) => {
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((u) => ({
-      "4348b976": k.value,
+    const N = e;
+    F((u) => ({
+      "4348b976": H.value,
       "1735afec": Y.value,
-      "58e23cb0": W.value,
+      "58e23cb0": z.value,
       "451672cd": r.value,
-      "55b7ee16": l.value
+      "55b7ee16": n.value
     }));
     const {
       display: C,
-      textColor: y,
+      textColor: b,
       textColorHover: x,
-      buttonColor: g,
-      buttonColorHover: m,
-      uppercase: p,
+      buttonColor: p,
+      buttonColorHover: y,
+      uppercase: v,
       paddingXContent: V,
-      paddingYContent: S,
-      paddingXBorder: N,
+      paddingYContent: g,
+      paddingXBorder: w,
       paddingYBorder: s,
-      borderColor: v,
-      borderOpacity: c,
-      disabled: n,
-      fontFamily: _,
+      borderColor: c,
+      borderOpacity: m,
+      disabled: l,
+      fontFamily: S,
       fontSize: $,
-      fontWeight: w
-    } = F(B), h = t(() => {
-      const u = n.value ? "component-disabled" : "", I = C.value !== "b" ? "inline-block" : "block", L = y.value ? y.value : "#ece8e1", A = g.value ? g.value : "green", j = x.value ? x.value : "#ece8e1", E = m.value ? m.value : "cyan", J = v.value ? v.value : "#ffffff", K = !c.value || !(c.value >= 0 && c.value <= 1) ? "0.5" : c.value, U = !N.value || N.value < 0 ? 0.3 : N.value, Z = !s.value || s.value < 0 ? 0.3 : s.value, ee = !V.value || V.value < 0 ? 0.5 : V.value, oe = !S.value || S.value < 0 ? 0.5 : S.value, le = p.value ? "uppercase" : "none", ne = _.value ? _.value : "'Lato', sans-serif", ue = $.value ? $.value : "1.6em", re = !w.value || w.value < 0 ? 100 : w.value;
+      fontWeight: h
+    } = M(N), _ = t(() => {
+      const u = l.value ? "component-disabled" : "", I = C.value !== "b" ? "inline-block" : "block", D = b.value ? b.value : "#ece8e1", O = p.value ? p.value : "green", P = x.value ? x.value : "#ece8e1", E = y.value ? y.value : "cyan", J = c.value ? c.value : "#ffffff", K = !m.value || !(m.value >= 0 && m.value <= 1) ? "0.5" : m.value, U = !w.value || w.value < 0 ? 0.3 : w.value, Z = !s.value || s.value < 0 ? 0.3 : s.value, ee = !V.value || V.value < 0 ? 0.5 : V.value, oe = !g.value || g.value < 0 ? 0.5 : g.value, le = v.value ? "uppercase" : "none", ne = S.value ? S.value : "'Lato', sans-serif", ue = $.value ? $.value : "1.6em", re = !h.value || h.value < 0 ? 100 : h.value;
       return {
         disabled: u,
         display: I,
-        textColor: L,
-        buttonColor: A,
-        textColorHover: j,
+        textColor: D,
+        buttonColor: O,
+        textColorHover: P,
         buttonColorHover: E,
         borderColor: J,
         borderOpacity: K,
@@ -138,56 +138,56 @@ const M = (e, d) => {
         fontSize: ue,
         fontWeight: re
       };
-    }), b = t(() => h.value.disabled), i = t(() => ({
-      display: h.value.display
-    })), f = t(() => {
-      const u = h.value;
+    }), f = t(() => _.value.disabled), i = t(() => ({
+      display: _.value.display
+    })), k = t(() => {
+      const u = _.value;
       return {
         padding: `${u.paddingYBorder}rem ${u.paddingXBorder}rem`,
         fontSize: u.fontSize,
         fontWeight: u.fontWeight
       };
     }), a = t(() => {
-      const u = h.value;
+      const u = _.value;
       return {
         textTransform: u.uppercase,
         padding: `${u.paddingYContent}rem ${u.paddingXContent}rem`,
         backgroundColor: u.buttonColor
       };
     }), o = t(() => ({
-      backgroundColor: h.value.buttonColorHover
-    })), k = t(() => h.value.font), r = t(() => h.value.borderColor), l = t(() => h.value.borderOpacity), Y = t(() => h.value.textColor), W = t(() => h.value.textColorHover), R = () => {
+      backgroundColor: _.value.buttonColorHover
+    })), H = t(() => _.value.font), r = t(() => _.value.borderColor), n = t(() => _.value.borderOpacity), Y = t(() => _.value.textColor), z = t(() => _.value.textColorHover), W = () => {
       d("clicked");
     };
-    return (u, I) => e.nbId ? (D(), O("div", {
+    return (u, I) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", b.value]),
-      style: H([i.value]),
-      onClick: R
+      class: X(["nb-wrapper", f.value]),
+      style: B([i.value]),
+      onClick: W
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: X(["nb-reset", "component"]),
-        style: H([f.value])
+        style: B([k.value])
       }, [
-        z("div", {
+        R("div", {
           class: "component-content",
-          style: H([a.value])
+          style: B([a.value])
         }, [
-          z("span", ve, [
+          R("span", ve, [
             q(u.$slots, "text", {}, () => [
               G("Default Text")
             ], !0)
           ]),
-          z("span", {
+          R("span", {
             class: "component-content__mask",
-            style: H([o.value])
+            style: B([o.value])
           }, null, 4)
         ], 4)
       ], 12, fe)
-    ], 6)) : T("", !0);
+    ], 6)) : A("", !0);
   }
-}), pe = /* @__PURE__ */ M(be, [["__scopeId", "data-v-09b2bb91"]]);
+}), pe = /* @__PURE__ */ j(be, [["__scopeId", "data-v-09b2bb91"]]);
 const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
   name: "NbButtonShowHover",
   inheritAttrs: !1
@@ -259,47 +259,47 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((a) => ({
+    const N = e;
+    F((a) => ({
       e35bf122: i.value,
-      "122f086c": h.value,
-      "590fef9e": b.value,
+      "122f086c": _.value,
+      "590fef9e": f.value,
       "383cafc6": e.textColorHover,
-      66192716: ae(y)
+      66192716: ae(b)
     }));
     const {
       text: C,
-      textColor: y,
+      textColor: b,
       buttonColorHover: x,
-      buttonColorOpacityHover: g,
-      paddingX: m,
-      paddingY: p,
+      buttonColorOpacityHover: p,
+      paddingX: y,
+      paddingY: v,
       disabled: V,
-      borderRadius: S,
-      verticalAlign: N,
+      borderRadius: g,
+      verticalAlign: w,
       fontFamily: s,
-      fontSize: v,
-      fontWeight: c
-    } = F(B), n = t(() => {
-      const a = C.value ? C.value : "Default Text", o = V.value ? "component-disabled" : "", k = N.value ? N.value : "middle", r = y ? y.value : "ffffff", l = !m.value || m.value < 0 ? 1 : m.value, Y = !p.value || p.value < 0 ? 0.2 : p.value, W = !S.value || S.value < 0 ? 0 : S.value, R = x.value ? x.value : "10, 38, 184", u = !g.value || g.value < 0 ? 0.1 : g.value, I = s.value ? s.value : "'Lato', sans-serif", L = v.value ? v.value : "1.6rem", A = !c.value || c.value < 0 ? 100 : c.value;
+      fontSize: c,
+      fontWeight: m
+    } = M(N), l = t(() => {
+      const a = C.value ? C.value : "Default Text", o = V.value ? "component-disabled" : "", H = w.value ? w.value : "middle", r = b ? b.value : "ffffff", n = !y.value || y.value < 0 ? 1 : y.value, Y = !v.value || v.value < 0 ? 0.2 : v.value, z = !g.value || g.value < 0 ? 0 : g.value, W = x.value ? x.value : "10, 38, 184", u = !p.value || p.value < 0 ? 0.1 : p.value, I = s.value ? s.value : "'Lato', sans-serif", D = c.value ? c.value : "1.6rem", O = !m.value || m.value < 0 ? 100 : m.value;
       return {
         disabled: o,
-        borderRadius: W,
+        borderRadius: z,
         textColor: r,
-        paddingX: l,
+        paddingX: n,
         paddingY: Y,
-        buttonColorHover: R,
+        buttonColorHover: W,
         buttonColorOpacityHover: u,
         font: I,
-        fontSize: L,
-        fontWeight: A,
+        fontSize: D,
+        fontWeight: O,
         text: a,
-        verticalAlign: k
+        verticalAlign: H
       };
-    }), _ = t(() => n.value.disabled), $ = t(() => ({
-      verticalAlign: n.value.verticalAlign
-    })), w = t(() => {
-      const a = n.value;
+    }), S = t(() => l.value.disabled), $ = t(() => ({
+      verticalAlign: l.value.verticalAlign
+    })), h = t(() => {
+      const a = l.value;
       return {
         color: a.textColor,
         padding: `${a.paddingY}rem 0`,
@@ -307,31 +307,31 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
         fontSize: a.fontSize,
         fontWeight: a.fontWeight
       };
-    }), h = t(() => {
-      const a = n.value;
+    }), _ = t(() => {
+      const a = l.value;
       return `${a.paddingY}rem ${a.paddingX}rem`;
-    }), b = t(() => {
-      const a = n.value;
+    }), f = t(() => {
+      const a = l.value;
       return `rgba(${a.buttonColorHover}, ${a.buttonColorOpacityHover})`;
-    }), i = t(() => n.value.font), f = () => {
+    }), i = t(() => l.value.font), k = () => {
       d("clicked");
     };
-    return (a, o) => e.nbId ? (D(), O("div", {
+    return (a, o) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", _.value]),
-      style: H([$.value]),
-      onClick: f
+      class: X(["nb-wrapper", S.value]),
+      style: B([$.value]),
+      onClick: k
     }, [
-      z("a", {
+      R("a", {
         id: e.nbId,
         class: "nb-reset component tertiary",
-        style: H([w.value]),
+        style: B([h.value]),
         onClick: o[0] || (o[0] = de(() => {
         }, ["prevent"]))
-      }, Q(n.value.text), 13, ye)
-    ], 6)) : T("", !0);
+      }, Q(l.value.text), 13, ye)
+    ], 6)) : A("", !0);
   }
-}), me = /* @__PURE__ */ M(ge, [["__scopeId", "data-v-7f17ac3f"]]);
+}), me = /* @__PURE__ */ j(ge, [["__scopeId", "data-v-7f17ac3f"]]);
 const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
   name: "NbButtonPrevNext",
   inheritAttrs: !1
@@ -420,8 +420,8 @@ const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((a) => ({
+    const N = e;
+    F((a) => ({
       "2446b547": i.value,
       a50bbbd2: e.colorPrimary,
       "0f9f603e": e.textColor,
@@ -430,87 +430,87 @@ const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
     }));
     const {
       paddingX: C,
-      paddingY: y,
+      paddingY: b,
       marginBetween: x,
-      borderRadius: g,
-      disabled: m,
-      disabledPreview: p,
+      borderRadius: p,
+      disabled: y,
+      disabledPreview: v,
       disabledNext: V,
-      fontFamily: S,
-      fontSize: N,
+      fontFamily: g,
+      fontSize: w,
       fontWeight: s
-    } = F(B), v = t(() => {
-      const a = m.value ? "component-disabled" : "", o = p.value ? "component-disabled" : "", k = V.value ? "component-disabled" : "", r = !x.value || x.value < 0 ? 0 : x.value, l = !g.value || g.value < 0 ? 0 : g.value, Y = !C.value || C.value < 0 ? 1 : C.value, W = !y.value || y.value < 0 ? 10 : y.value, R = N.value ? N.value : "1.6em", u = !s.value || s.value < 0 ? 100 : s.value;
+    } = M(N), c = t(() => {
+      const a = y.value ? "component-disabled" : "", o = v.value ? "component-disabled" : "", H = V.value ? "component-disabled" : "", r = !x.value || x.value < 0 ? 0 : x.value, n = !p.value || p.value < 0 ? 0 : p.value, Y = !C.value || C.value < 0 ? 1 : C.value, z = !b.value || b.value < 0 ? 10 : b.value, W = w.value ? w.value : "1.6em", u = !s.value || s.value < 0 ? 100 : s.value;
       return {
         disabled: a,
         disabledPreview: o,
-        disabledNext: k,
+        disabledNext: H,
         marginBetween: `${r}px`,
-        borderRadius: `${l}px`,
+        borderRadius: `${n}px`,
         paddingX: `${Y}px`,
-        paddingY: `${W}px`,
-        fontSize: R,
+        paddingY: `${z}px`,
+        fontSize: W,
         fontWeight: u
       };
-    }), c = t(() => v.value.disabled), n = t(() => v.value.disabledPreview), _ = t(() => v.value.disabledNext), $ = t(() => ({
-      display: v.value.display
-    })), w = t(() => {
-      const a = v.value;
+    }), m = t(() => c.value.disabled), l = t(() => c.value.disabledPreview), S = t(() => c.value.disabledNext), $ = t(() => ({
+      display: c.value.display
+    })), h = t(() => {
+      const a = c.value;
       return {
         fontSize: a.fontSize,
         fontWeight: a.fontWeight
       };
-    }), h = t(() => {
-      const a = v.value;
+    }), _ = t(() => {
+      const a = c.value;
       return {
         borderRadius: `${a.borderRadius} 0px 0px ${a.borderRadius}`,
         marginRight: a.marginBetween,
         padding: `${a.paddingX} ${a.paddingY}`
       };
-    }), b = t(() => {
-      const a = v.value;
+    }), f = t(() => {
+      const a = c.value;
       return {
         borderRadius: `0px ${a.borderRadius} ${a.borderRadius} 0px`,
         marginLeft: a.marginBetween,
         padding: `${a.paddingX} ${a.paddingY}`
       };
-    }), i = t(() => `'${S.value ? S.value : "'Lato', sans-serif"}'`), f = (a) => {
+    }), i = t(() => `'${g.value ? g.value : "'Lato', sans-serif"}'`), k = (a) => {
       d("clicked", a);
     };
-    return (a, o) => e.nbId ? (D(), O("div", {
+    return (a, o) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", c.value]),
-      style: H([$.value])
+      class: X(["nb-wrapper", m.value]),
+      style: B([$.value])
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: X(["nb-reset", "component"]),
-        style: H(w.value)
+        style: B(h.value)
       }, [
-        e.showPreview ? (D(), O("div", {
+        e.showPreview ? (T(), L("div", {
           key: 0,
-          onClick: o[0] || (o[0] = (k) => f("preview")),
-          class: X(["buttonNextPreview buttonPreview", n.value]),
-          style: H(h.value)
+          onClick: o[0] || (o[0] = (H) => k("preview")),
+          class: X(["buttonNextPreview buttonPreview", l.value]),
+          style: B(_.value)
         }, [
           q(a.$slots, "prev", {}, () => [
             G("← Preview")
           ], !0)
-        ], 6)) : T("", !0),
-        e.showNext ? (D(), O("div", {
+        ], 6)) : A("", !0),
+        e.showNext ? (T(), L("div", {
           key: 1,
-          onClick: o[1] || (o[1] = (k) => f("next")),
-          class: X(["buttonNextPreview buttonNext", _.value]),
-          style: H(b.value)
+          onClick: o[1] || (o[1] = (H) => k("next")),
+          class: X(["buttonNextPreview buttonNext", S.value]),
+          style: B(f.value)
         }, [
           q(a.$slots, "next", {}, () => [
             G("Next →")
           ], !0)
-        ], 6)) : T("", !0)
+        ], 6)) : A("", !0)
       ], 12, Ve)
-    ], 6)) : T("", !0);
+    ], 6)) : A("", !0);
   }
-}), xe = /* @__PURE__ */ M(Ce, [["__scopeId", "data-v-f26b5a64"]]);
+}), xe = /* @__PURE__ */ j(Ce, [["__scopeId", "data-v-f26b5a64"]]);
 const Se = ["id"], _e = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical",
   inheritAttrs: !1
@@ -581,46 +581,46 @@ const Se = ["id"], _e = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((o) => ({
-      "196eb3ca": b.value,
-      "5a845ff6": ae(y),
-      "44f25ea8": f.value,
+    const N = e;
+    F((o) => ({
+      "196eb3ca": f.value,
+      "5a845ff6": ae(b),
+      "44f25ea8": k.value,
       "3eb45b5e": i.value
     }));
     const {
       display: C,
-      buttonColor: y,
+      buttonColor: b,
       textColor: x,
-      containerColor: g,
-      paddingX: m,
-      paddingY: p,
+      containerColor: p,
+      paddingX: y,
+      paddingY: v,
       borderRadius: V,
-      disabled: S,
-      animationSlow: N,
+      disabled: g,
+      animationSlow: w,
       fontFamily: s,
-      fontSize: v,
-      fontWeight: c
-    } = F(B), n = t(() => {
-      const o = S.value ? "component-disabled" : "", k = C.value !== "b" ? "inline-block" : "block", r = g.value ? g.value : "#ffffff", l = y.value ? y.value : "#bbbbbb", Y = x.value ? x.value : "#ffffff", W = !m.value || m.value < 0 ? 1 : m.value, R = !p.value || p.value < 0 ? 0.2 : p.value, u = !V.value || V.value < 0 ? 0 : V.value, I = N.value ? "" : "component-transition__no-slow", L = s.value ? s.value : "'Lato', sans-serif", A = v.value ? v.value : "1.6em", j = !c.value || c.value < 0 ? 100 : c.value;
+      fontSize: c,
+      fontWeight: m
+    } = M(N), l = t(() => {
+      const o = g.value ? "component-disabled" : "", H = C.value !== "b" ? "inline-block" : "block", r = p.value ? p.value : "#ffffff", n = b.value ? b.value : "#bbbbbb", Y = x.value ? x.value : "#ffffff", z = !y.value || y.value < 0 ? 1 : y.value, W = !v.value || v.value < 0 ? 0.2 : v.value, u = !V.value || V.value < 0 ? 0 : V.value, I = w.value ? "" : "component-transition__no-slow", D = s.value ? s.value : "'Lato', sans-serif", O = c.value ? c.value : "1.6em", P = !m.value || m.value < 0 ? 100 : m.value;
       return {
         disabled: o,
-        display: k,
+        display: H,
         containerColor: r,
-        buttonColor: l,
+        buttonColor: n,
         textColor: Y,
-        paddingX: W,
-        paddingY: R,
+        paddingX: z,
+        paddingY: W,
         borderRadius: u,
         animationSlow: I,
-        font: L,
-        fontSize: A,
-        fontWeight: j
+        font: D,
+        fontSize: O,
+        fontWeight: P
       };
-    }), _ = t(() => n.value.disabled), $ = t(() => ({
-      display: n.value.display
-    })), w = t(() => {
-      const o = n.value;
+    }), S = t(() => l.value.disabled), $ = t(() => ({
+      display: l.value.display
+    })), h = t(() => {
+      const o = l.value;
       return {
         border: `2px solid ${o.containerColor}`,
         color: o.textColor,
@@ -630,27 +630,27 @@ const Se = ["id"], _e = /* @__PURE__ */ Object.assign({
         fontSize: o.fontSize,
         fontWeight: o.fontWeight
       };
-    }), h = t(() => n.value.animationSlow), b = t(() => n.value.font), i = t(() => n.value.textColor), f = t(() => n.value.buttonColor), a = () => {
+    }), _ = t(() => l.value.animationSlow), f = t(() => l.value.font), i = t(() => l.value.textColor), k = t(() => l.value.buttonColor), a = () => {
       d("clicked");
     };
-    return (o, k) => e.nbId ? (D(), O("div", {
+    return (o, H) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", _.value]),
-      style: H([$.value]),
+      class: X(["nb-wrapper", S.value]),
+      style: B([$.value]),
       onClick: a
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component", "component-transition", h.value]),
-        style: H([w.value])
+        class: X(["nb-reset", "component", "component-transition", _.value]),
+        style: B([h.value])
       }, [
         q(o.$slots, "content", {}, () => [
           G("Default Text")
         ], !0)
       ], 14, Se)
-    ], 6)) : T("", !0);
+    ], 6)) : A("", !0);
   }
-}), he = /* @__PURE__ */ M(_e, [["__scopeId", "data-v-11d6e180"]]);
+}), he = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-11d6e180"]]);
 const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical2",
   inheritAttrs: !1
@@ -721,42 +721,42 @@ const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((i) => ({
-      ba36237e: h.value
+    const N = e;
+    F((i) => ({
+      ba36237e: _.value
     }));
     const {
       text: C,
-      display: y,
+      display: b,
       buttonColor: x,
-      textColor: g,
-      paddingX: m,
-      paddingY: p,
+      textColor: p,
+      paddingX: y,
+      paddingY: v,
       borderRadius: V,
-      shadowColor: S,
-      disabled: N,
+      shadowColor: g,
+      disabled: w,
       fontFamily: s,
-      fontSize: v,
-      fontWeight: c
-    } = F(B), n = t(() => {
-      const i = N.value ? "component-disabled" : "", f = y.value !== "b" ? "inline-block" : "block", a = x.value ? x.value : "#bbbbbb", o = S.value ? S.value : "#002f3c", k = g.value ? g.value : "#ffffff", r = !m.value || m.value < 0 ? 1 : m.value, l = !p.value || p.value < 0 ? 1 : p.value, Y = !V.value || V.value < 0 ? 0 : V.value, W = s.value ? s.value : "'Lato', sans-serif", R = v.value ? v.value : "1.6em", u = !c.value || c.value < 0 ? 100 : c.value;
+      fontSize: c,
+      fontWeight: m
+    } = M(N), l = t(() => {
+      const i = w.value ? "component-disabled" : "", k = b.value !== "b" ? "inline-block" : "block", a = x.value ? x.value : "#bbbbbb", o = g.value ? g.value : "#002f3c", H = p.value ? p.value : "#ffffff", r = !y.value || y.value < 0 ? 1 : y.value, n = !v.value || v.value < 0 ? 1 : v.value, Y = !V.value || V.value < 0 ? 0 : V.value, z = s.value ? s.value : "'Lato', sans-serif", W = c.value ? c.value : "1.6em", u = !m.value || m.value < 0 ? 100 : m.value;
       return {
         disabled: i,
-        display: f,
+        display: k,
         buttonColor: a,
         shadowColor: o,
-        textColor: k,
+        textColor: H,
         paddingX: r,
-        paddingY: l,
+        paddingY: n,
         borderRadius: Y,
-        font: W,
-        fontSize: R,
+        font: z,
+        fontSize: W,
         fontWeight: u
       };
-    }), _ = t(() => n.value.disabled), $ = t(() => ({
-      display: n.value.display
-    })), w = t(() => {
-      const i = n.value;
+    }), S = t(() => l.value.disabled), $ = t(() => ({
+      display: l.value.display
+    })), h = t(() => {
+      const i = l.value;
       return {
         color: i.textColor,
         backgroundColor: i.buttonColor,
@@ -767,23 +767,23 @@ const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
         fontSize: i.fontSize,
         fontWeight: i.fontWeight
       };
-    }), h = t(() => n.value.font), b = () => {
+    }), _ = t(() => l.value.font), f = () => {
       d("clicked");
     };
-    return (i, f) => e.nbId ? (D(), O("div", {
+    return (i, k) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", _.value]),
-      style: H([$.value]),
-      onClick: b
+      class: X(["nb-wrapper", S.value]),
+      style: B([$.value]),
+      onClick: f
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: X(["nb-reset", "component", "component-transition"]),
-        style: H([w.value])
-      }, Q(B.text), 13, Ne)
-    ], 6)) : T("", !0);
+        style: B([h.value])
+      }, Q(N.text), 13, Ne)
+    ], 6)) : A("", !0);
   }
-}), Be = /* @__PURE__ */ M(we, [["__scopeId", "data-v-20a2a691"]]);
+}), Be = /* @__PURE__ */ j(we, [["__scopeId", "data-v-20a2a691"]]);
 const He = ["id"], $e = /* @__PURE__ */ Object.assign({
   name: "NbButtonHamburger",
   inheritAttrs: !1
@@ -833,74 +833,74 @@ const He = ["id"], $e = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((b) => ({
+    const N = e;
+    F((f) => ({
       "4f0c7280": $.value,
-      "86dec5da": w.value
+      "86dec5da": h.value
     })), se(() => {
-      C.value = y.value;
+      C.value = b.value;
     });
     const C = ie(!1), {
-      status: y,
+      status: b,
       color: x,
-      containerColor: g,
-      containerColorHover: m,
-      colorHover: p,
+      containerColor: p,
+      containerColorHover: y,
+      colorHover: v,
       paddingX: V,
-      paddingY: S,
-      disabled: N
-    } = F(B), s = t(() => {
-      const b = N.value ? "component-disabled" : "", i = C.value ? "change" : "", f = g.value ? g.value : "#333333", a = x.value ? x.value : "#ffffff", o = !V.value || V.value < 0 ? 3 : V.value, k = !S.value || S.value < 0 ? 3 : S.value, r = m.value ? m.value : "yellow", l = p.value ? p.value : "red";
+      paddingY: g,
+      disabled: w
+    } = M(N), s = t(() => {
+      const f = w.value ? "component-disabled" : "", i = C.value ? "change" : "", k = p.value ? p.value : "#333333", a = x.value ? x.value : "#ffffff", o = !V.value || V.value < 0 ? 3 : V.value, H = !g.value || g.value < 0 ? 3 : g.value, r = y.value ? y.value : "yellow", n = v.value ? v.value : "red";
       return {
-        disabled: b,
+        disabled: f,
         buttonStatus: i,
-        containerColor: f,
+        containerColor: k,
         paddingX: o,
-        paddingY: k,
+        paddingY: H,
         color: a,
         containerColorHover: r,
-        colorHover: l
+        colorHover: n
       };
-    }), v = t(() => s.value.disabled), c = t(() => {
-      const b = s.value;
+    }), c = t(() => s.value.disabled), m = t(() => {
+      const f = s.value;
       return {
-        padding: `${b.paddingY}px ${b.paddingX}px`,
-        backgroundColor: b.containerColor
+        padding: `${f.paddingY}px ${f.paddingX}px`,
+        backgroundColor: f.containerColor
       };
-    }), n = t(() => ({
+    }), l = t(() => ({
       backgroundColor: s.value.color
-    })), _ = t(() => s.value.buttonStatus), $ = t(() => s.value.containerColorHover), w = t(() => s.value.colorHover), h = () => {
-      const b = !C.value;
-      C.value = b, d("clicked", b);
+    })), S = t(() => s.value.buttonStatus), $ = t(() => s.value.containerColorHover), h = t(() => s.value.colorHover), _ = () => {
+      const f = !C.value;
+      C.value = f, d("clicked", f);
     };
-    return ce(y, () => {
-      C.value = y.value;
-    }), (b, i) => e.nbId ? (D(), O("div", {
+    return ce(b, () => {
+      C.value = b.value;
+    }), (f, i) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", v.value]),
-      style: H([c.value]),
-      onClick: h
+      class: X(["nb-wrapper", c.value]),
+      style: B([m.value]),
+      onClick: _
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component", _.value])
+        class: X(["nb-reset", "component", S.value])
       }, [
-        z("div", {
+        R("div", {
           class: "component__line-one",
-          style: H(n.value)
+          style: B(l.value)
         }, null, 4),
-        z("div", {
+        R("div", {
           class: "component__line-two",
-          style: H(n.value)
+          style: B(l.value)
         }, null, 4),
-        z("div", {
+        R("div", {
           class: "component__line-three",
-          style: H(n.value)
+          style: B(l.value)
         }, null, 4)
       ], 10, He)
-    ], 6)) : T("", !0);
+    ], 6)) : A("", !0);
   }
-}), ke = /* @__PURE__ */ M($e, [["__scopeId", "data-v-37573ac0"]]);
+}), ke = /* @__PURE__ */ j($e, [["__scopeId", "data-v-37573ac0"]]);
 const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorOutside",
   inheritAttrs: !1
@@ -950,6 +950,10 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
       default: !1,
       validator: (e) => typeof e == "boolean" && [!0, !1].includes(e)
     },
+    borderRadius: {
+      type: Number,
+      default: 0.25
+    },
     fontFamily: {
       type: String,
       default: "'Lato', sans-serif"
@@ -967,68 +971,72 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((f) => ({
-      "5c58593c": w.value,
-      f6f44b66: b.value,
-      c5265f9c: h.value
+    const N = e;
+    F((o) => ({
+      bf6244be: f.value,
+      "3087ef32": k.value,
+      b71ed32e: _.value,
+      df6e4b52: i.value
     }));
     const {
       text: C,
-      display: y,
+      display: b,
       buttonColor: x,
-      borderColor: g,
-      textColor: m,
-      paddingX: p,
+      borderColor: p,
+      textColor: y,
+      paddingX: v,
       paddingY: V,
-      disabled: S,
-      fontFamily: N,
-      fontSize: s,
-      fontWeight: v
-    } = F(B), c = t(() => {
-      const f = C.value ? C.value : "Default Text", a = S.value ? "component-disabled" : "", o = y.value !== "b" ? "inline-block" : "block", k = x.value ? x.value : "#bbbbbb", r = g.value ? g.value : "#ffe54c", l = m.value ? m.value : "#ffffff", Y = !p.value || p.value < 0 ? 1 : p.value, W = !V.value || V.value < 0 ? 0.2 : V.value, R = N.value ? N.value : "'Lato', sans-serif", u = s.value ? s.value : "1.6em", I = !v.value || v.value < 0 ? 200 : v.value;
+      borderRadius: g,
+      disabled: w,
+      fontFamily: s,
+      fontSize: c,
+      fontWeight: m
+    } = M(N), l = t(() => {
+      const o = C.value ? C.value : "Default Text", H = w.value ? "component-disabled" : "", r = b.value !== "b" ? "inline-block" : "block", n = x.value ? x.value : "#bbbbbb", Y = p.value ? p.value : "#ffe54c", z = y.value ? y.value : "#ffffff", W = !v.value || v.value < 0 ? 1 : v.value, u = !V.value || V.value < 0 ? 0.2 : V.value, I = !g.value || g.value < 0 ? 0 : g.value, D = s.value ? s.value : "'Lato', sans-serif", O = c.value ? c.value : "1.6em", P = !m.value || m.value < 0 ? 200 : m.value;
       return {
-        disabled: a,
-        display: o,
-        buttonColor: k,
-        borderColor: r,
-        textColor: l,
-        paddingX: Y,
-        paddingY: W,
-        text: f,
-        font: R,
-        fontSize: u,
-        fontWeight: I
+        disabled: H,
+        display: r,
+        buttonColor: n,
+        borderColor: Y,
+        textColor: z,
+        paddingX: W,
+        paddingY: u,
+        text: o,
+        borderRadius: I,
+        font: D,
+        fontSize: O,
+        fontWeight: P
       };
-    }), n = t(() => c.value.disabled), _ = t(() => ({
-      display: c.value.display
-    })), $ = t(() => {
-      const f = c.value;
+    }), S = t(() => l.value.disabled), $ = t(() => ({
+      display: l.value.display
+    })), h = t(() => {
+      const o = l.value;
       return {
-        border: `1px solid ${f.borderColor}`,
-        color: f.textColor,
-        padding: `${f.paddingY}rem ${f.paddingX}rem`,
-        fontSize: f.fontSize,
-        fontWeight: f.fontWeight
+        border: `1px solid ${o.borderColor}`,
+        color: o.textColor,
+        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        borderRadius: _.value,
+        fontSize: o.fontSize,
+        fontWeight: o.fontWeight
       };
-    }), w = t(() => c.value.font), h = t(() => c.value.textColor), b = t(() => c.value.buttonColor), i = () => {
+    }), _ = t(() => `${l.value.borderRadius}rem`), f = t(() => l.value.font), i = t(() => l.value.textColor), k = t(() => l.value.buttonColor), a = () => {
       d("clicked");
     };
-    return (f, a) => e.nbId ? (D(), O("div", {
+    return (o, H) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", n.value]),
-      style: H([_.value]),
-      onClick: i
+      class: X(["nb-wrapper", S.value]),
+      style: B([$.value]),
+      onClick: a
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: X(["nb-reset", "component"]),
-        style: H([$.value])
-      }, Q(c.value.text), 13, Ye)
-    ], 6)) : T("", !0);
+        style: B([h.value])
+      }, Q(l.value.text), 13, Ye)
+    ], 6)) : A("", !0);
   }
-}), ze = /* @__PURE__ */ M(Xe, [["__scopeId", "data-v-b0bef095"]]);
-const We = ["id"], Re = /* @__PURE__ */ Object.assign({
+}), Re = /* @__PURE__ */ j(Xe, [["__scopeId", "data-v-34a3b3a9"]]);
+const ze = ["id"], We = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorHover",
   inheritAttrs: !1
 }, {
@@ -1102,53 +1110,53 @@ const We = ["id"], Re = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((r) => ({
-      ea8f1624: b.value,
+    const N = e;
+    F((r) => ({
+      ea8f1624: f.value,
       "68a00a02": a.value,
-      a1f5bb90: f.value,
+      a1f5bb90: k.value,
       "7c8ae57d": o.value,
       "0ca91538": i.value
     }));
     const {
       text: C,
-      display: y,
+      display: b,
       textColor: x,
-      paddingX: g,
-      paddingY: m,
-      borderRadius: p,
+      paddingX: p,
+      paddingY: y,
+      borderRadius: v,
       disabled: V,
-      fontFamily: S,
-      fontSize: N,
+      fontFamily: g,
+      fontSize: w,
       fontWeight: s,
-      textColorHover: v,
-      buttonColor: c,
-      buttonColorHover: n
-    } = F(B), _ = t(() => {
-      const r = C.value ? C.value : "Default Text", l = V.value ? "component-disabled" : "", Y = y.value !== "b" ? "inline-block" : "block", W = x ? x.value : "ffffff", R = !g.value || g.value < 0 ? 1 : g.value, u = !m.value || m.value < 0 ? 0.2 : m.value, I = !p.value || p.value < 0 ? 0 : p.value, L = S.value ? S.value : "'Lato', sans-serif", A = N.value ? N.value : "1.6rem", j = !s.value || s.value < 0 ? 100 : s.value, E = v.value ? v.value : "#cccccc", J = c.value ? c.value : "#bbbbbb", K = n.value ? n.value : "#959595";
+      textColorHover: c,
+      buttonColor: m,
+      buttonColorHover: l
+    } = M(N), S = t(() => {
+      const r = C.value ? C.value : "Default Text", n = V.value ? "component-disabled" : "", Y = b.value !== "b" ? "inline-block" : "block", z = x ? x.value : "ffffff", W = !p.value || p.value < 0 ? 1 : p.value, u = !y.value || y.value < 0 ? 0.2 : y.value, I = !v.value || v.value < 0 ? 0 : v.value, D = g.value ? g.value : "'Lato', sans-serif", O = w.value ? w.value : "1.6rem", P = !s.value || s.value < 0 ? 100 : s.value, E = c.value ? c.value : "#cccccc", J = m.value ? m.value : "#bbbbbb", K = l.value ? l.value : "#959595";
       return {
-        disabled: l,
+        disabled: n,
         display: Y,
-        font: L,
-        fontSize: A,
-        fontWeight: j,
+        font: D,
+        fontSize: O,
+        fontWeight: P,
         text: r,
-        textColor: W,
-        paddingX: R,
+        textColor: z,
+        paddingX: W,
         paddingY: u,
         borderRadius: I,
         textColorHover: E,
         buttonColor: J,
         buttonColorHover: K
       };
-    }), $ = t(() => _.value.disabled), w = t(() => {
-      const r = _.value;
+    }), $ = t(() => S.value.disabled), h = t(() => {
+      const r = S.value;
       return {
         display: r.display,
         borderRadius: `${r.borderRadius}rem`
       };
-    }), h = t(() => {
-      const r = _.value;
+    }), _ = t(() => {
+      const r = S.value;
       return {
         color: r.textColor,
         padding: `${r.paddingY}rem ${r.paddingX}rem`,
@@ -1156,22 +1164,22 @@ const We = ["id"], Re = /* @__PURE__ */ Object.assign({
         fontSize: r.fontSize,
         fontWeight: r.fontWeight
       };
-    }), b = t(() => _.value.font), i = t(() => _.value.textColor), f = t(() => _.value.textColorHover), a = t(() => _.value.buttonColor), o = t(() => _.value.buttonColorHover), k = () => {
+    }), f = t(() => S.value.font), i = t(() => S.value.textColor), k = t(() => S.value.textColorHover), a = t(() => S.value.buttonColor), o = t(() => S.value.buttonColorHover), H = () => {
       d("clicked");
     };
-    return (r, l) => (D(), O("div", {
+    return (r, n) => (T(), L("div", {
       class: X(["nb-wrapper", $.value]),
-      style: H([w.value]),
-      onClick: k
+      style: B([h.value]),
+      onClick: H
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: "nb-reset component component-transition",
-        style: H([h.value])
-      }, Q(_.value.text), 13, We)
+        style: B([_.value])
+      }, Q(S.value.text), 13, ze)
     ], 6));
   }
-}), Ie = /* @__PURE__ */ M(Re, [["__scopeId", "data-v-14a4a2ac"]]);
+}), Ie = /* @__PURE__ */ j(We, [["__scopeId", "data-v-14a4a2ac"]]);
 const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" }, Le = /* @__PURE__ */ Object.assign({
   name: "NbButtonAlternateText",
   inheritAttrs: !1
@@ -1256,41 +1264,41 @@ const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" },
   },
   emits: ["clicked"],
   setup(e, { emit: d }) {
-    const B = e;
-    P((l) => ({
-      "17a23bbc": f.value,
+    const N = e;
+    F((n) => ({
+      "17a23bbc": k.value,
       "2cc4da9c": a.value,
       aa259cd0: o.value,
-      f0e00666: k.value
+      f0e00666: H.value
     }));
     const {
       display: C,
-      buttonColor: y,
+      buttonColor: b,
       borderColor: x,
-      buttonHoverColor: g,
-      showBorder: m,
-      borderRadius: p,
+      buttonHoverColor: p,
+      showBorder: y,
+      borderRadius: v,
       textColor: V,
-      textHoverColor: S,
-      width: N,
+      textHoverColor: g,
+      width: w,
       paddingX: s,
-      paddingY: v,
-      disabled: c,
-      fontFamily: n,
-      fontSize: _,
+      paddingY: c,
+      disabled: m,
+      fontFamily: l,
+      fontSize: S,
       fontWeight: $
-    } = F(B), w = t(() => {
-      const l = c.value ? "component-disabled" : "", Y = C.value !== "b" ? "inline-block" : "block", W = y.value ? y.value : "#ffffff", R = g.value ? g.value : "#000000", u = x.value ? x.value : "#ffe54c", I = !p.value || p.value < 0 ? 0 : p.value, L = [!1, !0].includes(m.value) ? m.value : !0, A = V.value ? V.value : "#ffffff", j = S.value ? S.value : "#000000", E = !N.value || N.value < 86 ? 86 : N.value, J = !s.value || s.value < 0 ? 1 : s.value, K = !v.value || v.value < 0 ? 0.4 : v.value, U = n.value ? n.value : "'Lato', sans-serif", Z = _.value ? _.value : "1.6em", ee = !$.value || $.value < 0 ? 200 : $.value;
+    } = M(N), h = t(() => {
+      const n = m.value ? "component-disabled" : "", Y = C.value !== "b" ? "inline-block" : "block", z = b.value ? b.value : "#ffffff", W = p.value ? p.value : "#000000", u = x.value ? x.value : "#ffe54c", I = !v.value || v.value < 0 ? 0 : v.value, D = [!1, !0].includes(y.value) ? y.value : !0, O = V.value ? V.value : "#ffffff", P = g.value ? g.value : "#000000", E = !w.value || w.value < 86 ? 86 : w.value, J = !s.value || s.value < 0 ? 1 : s.value, K = !c.value || c.value < 0 ? 0.4 : c.value, U = l.value ? l.value : "'Lato', sans-serif", Z = S.value ? S.value : "1.6em", ee = !$.value || $.value < 0 ? 200 : $.value;
       return {
-        disabled: l,
+        disabled: n,
         display: Y,
-        buttonColor: W,
-        buttonHoverColor: R,
+        buttonColor: z,
+        buttonHoverColor: W,
         borderColor: u,
-        showBorder: L,
+        showBorder: D,
         borderRadius: I,
-        textColor: A,
-        textHoverColor: j,
+        textColor: O,
+        textHoverColor: P,
         width: E,
         paddingX: J,
         paddingY: K,
@@ -1298,64 +1306,64 @@ const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" },
         fontSize: Z,
         fontWeight: ee
       };
-    }), h = t(() => w.value.disabled), b = t(() => ({
-      display: w.value.display
+    }), _ = t(() => h.value.disabled), f = t(() => ({
+      display: h.value.display
     })), i = t(() => {
-      const l = w.value, Y = l.display === "block" ? "auto" : `${l.width}px`;
+      const n = h.value, Y = n.display === "block" ? "auto" : `${n.width}px`;
       return {
-        ...l.showBorder ? { border: `1px solid ${l.borderColor}` } : {},
-        borderRadius: `${l.borderRadius}rem`,
-        background: l.buttonColor,
+        ...n.showBorder ? { border: `1px solid ${n.borderColor}` } : {},
+        borderRadius: `${n.borderRadius}rem`,
+        background: n.buttonColor,
         minWidth: "33px",
         width: Y,
-        padding: `${l.paddingY}rem ${l.paddingX}rem`,
+        padding: `${n.paddingY}rem ${n.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: l.fontSize,
-        fontWeight: l.fontWeight
+        fontSize: n.fontSize,
+        fontWeight: n.fontWeight
       };
-    }), f = t(() => w.value.font), a = t(() => w.value.textColor), o = t(() => w.value.textHoverColor), k = t(() => w.value.buttonHoverColor), r = () => {
+    }), k = t(() => h.value.font), a = t(() => h.value.textColor), o = t(() => h.value.textHoverColor), H = t(() => h.value.buttonHoverColor), r = () => {
       d("clicked");
     };
-    return (l, Y) => e.nbId ? (D(), O("div", {
+    return (n, Y) => e.nbId ? (T(), L("div", {
       key: 0,
-      class: X(["nb-wrapper", h.value]),
-      style: H([b.value]),
+      class: X(["nb-wrapper", _.value]),
+      style: B([f.value]),
       onClick: r
     }, [
-      z("div", {
+      R("div", {
         id: e.nbId,
         class: X(["nb-reset", "component"]),
-        style: H([i.value])
+        style: B([i.value])
       }, [
-        z("div", Oe, [
-          q(l.$slots, "content", {}, () => [
+        R("div", Oe, [
+          q(n.$slots, "content", {}, () => [
             G("Default Text")
           ], !0)
         ]),
-        z("div", Te, [
-          q(l.$slots, "content-alternate", {}, () => [
+        R("div", Te, [
+          q(n.$slots, "content-alternate", {}, () => [
             G("Default Alternate Text")
           ], !0)
         ])
       ], 12, De)
-    ], 6)) : T("", !0);
+    ], 6)) : A("", !0);
   }
-}), Ae = /* @__PURE__ */ M(Le, [["__scopeId", "data-v-e0ed856f"]]), te = {
+}), Ae = /* @__PURE__ */ j(Le, [["__scopeId", "data-v-e0ed856f"]]), te = {
   NbButtonVavaGame: pe,
   NbButtonShowHover: me,
   NbButtonPrevNext: xe,
   NbButtonMechanical: he,
   NbButtonMechanical2: Be,
   NbButtonHamburger: ke,
-  NbButtonColorOutside: ze,
+  NbButtonColorOutside: Re,
   NbButtonColorHover: Ie,
   NbButtonAlternateText: Ae
 }, Fe = {
   install(e) {
     for (const d in te)
       if (Object.prototype.hasOwnProperty.call(te, d)) {
-        const B = te[d];
-        e.component(B.name, B);
+        const N = te[d];
+        e.component(N.name, N);
       }
   }
 };