spicykatsu 0.0.35 → 0.0.36

package/dist/spicykatsu.es.js

@@ -1,11 +1,11 @@
-import { ref as k, watch as H, openBlock as n, createBlock as j, Transition as _, withCtx as V, createElementBlock as i, normalizeClass as S, withKeys as K, toDisplayString as f, createCommentVNode as p, computed as $, normalizeStyle as I, renderSlot as B, onMounted as X, onUnmounted as R, createVNode as q, createElementVNode as y, Fragment as M, renderList as F, withDirectives as E, vModelCheckbox as G, createTextVNode as U, vModelText as J, mergeProps as Q, withModifiers as Y, reactive as Z, nextTick as ee } from "vue";
-const te = ["aria-label"], le = {
+import { ref as x, watch as j, openBlock as n, createBlock as X, Transition as V, withCtx as E, createElementBlock as s, normalizeClass as S, withKeys as _, toDisplayString as v, createCommentVNode as f, computed as w, normalizeStyle as I, renderSlot as B, onMounted as R, onUnmounted as q, createElementVNode as y, createVNode as G, Fragment as F, renderList as D, withDirectives as N, vModelCheckbox as J, createTextVNode as U, vModelText as Q, mergeProps as Z, withModifiers as Y, reactive as ee, nextTick as te } from "vue";
+const le = ["aria-label"], oe = {
   key: 0,
   class: "spicyAlertIcon"
-}, oe = {
+}, ae = {
   key: 1,
   class: "spicyAlertText"
-}, ae = {
+}, ne = {
   __name: "SpicyAlert",
   props: {
     variant: {
@@ -20,46 +20,46 @@ const te = ["aria-label"], le = {
     autoClose: { type: Number, default: 0 }
   },
   setup(e) {
-    const t = e, l = k(!0), a = () => {
+    const t = e, l = x(!0), a = () => {
       l.value = !1;
     };
-    return H(
+    return j(
       () => t.autoClose,
       (o) => {
         o > 0 && setTimeout(() => {
           l.value = !1;
         }, o);
       }
-    ), (o, c) => (n(), j(_, { name: "fade" }, {
-      default: V(() => [
-        l.value ? (n(), i("div", {
+    ), (o, c) => (n(), X(V, { name: "fade" }, {
+      default: E(() => [
+        l.value ? (n(), s("div", {
           key: 0,
           class: S(["spicyAlert", e.variant]),
           "aria-atomic": "true",
           "aria-label": e.text,
           role: "alert",
-          onKeydown: K(a, ["enter"])
+          onKeydown: _(a, ["enter"])
         }, [
-          e.iconOnly || e.text ? (n(), i("span", le, f(e.icon), 1)) : p("", !0),
-          !e.iconOnly && e.text ? (n(), i("span", oe, f(e.text), 1)) : p("", !0),
-          e.closable ? (n(), i("button", {
+          e.iconOnly || e.text ? (n(), s("span", oe, v(e.icon), 1)) : f("", !0),
+          !e.iconOnly && e.text ? (n(), s("span", ae, v(e.text), 1)) : f("", !0),
+          e.closable ? (n(), s("button", {
             key: 2,
             class: "spicyAlertCloseBtn",
             onClick: a,
             "aria-label": "Close alert"
-          }, " X ")) : p("", !0)
-        ], 42, te)) : p("", !0)
+          }, " X ")) : f("", !0)
+        ], 42, le)) : f("", !0)
       ]),
       _: 1
     }));
   }
-}, ne = ["disabled", "aria-label", "aria-disabled"], se = {
+}, se = ["disabled", "aria-label", "aria-disabled"], ie = {
   key: 0,
   class: "spicyBtnIcon"
-}, ie = {
+}, re = {
   key: 1,
   class: "spicyBtnText"
-}, re = {
+}, ce = {
   __name: "SpicyBtn",
   props: {
     variant: {
@@ -80,7 +80,7 @@ const te = ["aria-label"], le = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const l = e, a = $(() => ({
+    const l = e, a = w(() => ({
       "--skFontSize": l.fontSize,
       "--skFontWeight": l.fontWeight,
       "--skBgColor": l.bgColor,
@@ -88,141 +88,142 @@ const te = ["aria-label"], le = {
       "--skBorderColor": l.borderColor,
       "--hoverColor": l.hoverColor
     }));
-    return (o, c) => (n(), i("button", {
+    return (o, c) => (n(), s("button", {
       class: S(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
       style: I({ ...a.value }),
       disabled: e.disabled,
-      onClick: c[0] || (c[0] = (v) => o.$emit("click")),
+      onClick: c[0] || (c[0] = (g) => o.$emit("click")),
       role: "button",
       "aria-label": e.text,
       "aria-disabled": e.disabled
     }, [
-      e.icon ? (n(), i("span", se, f(e.icon), 1)) : p("", !0),
-      e.text ? (n(), i("span", ie, f(e.text), 1)) : p("", !0),
+      e.icon ? (n(), s("span", ie, v(e.icon), 1)) : f("", !0),
+      e.text ? (n(), s("span", re, v(e.text), 1)) : f("", !0),
       B(o.$slots, "default")
-    ], 14, ne));
+    ], 14, se));
   }
-}, ce = ["aria-label"], ue = { class: "spicyCarouselInfoText" }, de = {
+}, ue = { class: "spicyCarouselWrapper" }, de = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, pe = { class: "spicyCarouselTitle" }, fe = { key: 0 }, ve = {
   key: 0,
   class: "spicyCarouselNavControls"
-}, ye = /* @__PURE__ */ y("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), pe = [
-  ye
-], fe = /* @__PURE__ */ y("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), ve = [
-  fe
-], ge = {
+}, ge = /* @__PURE__ */ y("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), he = [
+  ge
+], be = /* @__PURE__ */ y("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), me = [
+  be
+], Se = {
   key: 1,
   class: "spicyCarouselPagination"
-}, he = ["onClick"], be = { class: "spicyCarouselPage" }, me = {
+}, Ce = ["onClick"], ke = { class: "spicyCarouselPage" }, we = {
   __name: "SpicyCarousel",
   props: {
     autoplay: { type: Boolean, default: !1 },
     autoplaySpeed: { type: Number, default: 5e3 },
     showNavigation: { type: Boolean, default: !0 },
     showPagination: { type: Boolean, default: !0 },
-    activeColor: { type: String, default: "rgba(0, 255, 234, 0.5)" },
+    activeColor: { type: String, default: "#00ffea80" },
     loop: { type: Boolean, default: !0 },
     initialSlide: { type: Number, default: 0 },
     slides: { type: Array, required: !0 },
-    width: { type: String, default: "540px" },
-    height: { type: String, default: "300px" },
+    width: { type: String, default: "580px" },
+    height: { type: String, default: "360px" },
     fullScreen: { type: Boolean, default: !1 },
     enableImageClick: { type: Boolean, default: !1 }
   },
   setup(e) {
     let t, l, a = !1;
-    const o = e, c = $(() => ({
+    const o = e, c = w(() => ({
       "--width": o.width,
       "--height": o.height,
       "--activeColor": o.activeColor
-    })), v = $(() => g.value.fullScreen === !1 ? !1 : o.fullScreen), r = k(o.initialSlide), g = $(() => o.slides[r.value]);
-    let s;
+    })), g = w(() => o.slides[u.value].title), p = w(() => i.value.fullScreen === !1 ? !1 : o.fullScreen), u = x(o.initialSlide), i = w(() => o.slides[u.value]);
+    let r;
     const d = () => {
-      r.value = (r.value - 1 + o.slides.length) % o.slides.length;
-    }, u = () => {
-      r.value = (r.value + 1) % o.slides.length;
-    }, D = (m) => {
-      r.value = m;
-    }, h = () => {
-      clearInterval(s);
-    }, w = () => {
-      o.autoplay && (s = setInterval(u, o.autoplaySpeed));
-    }, x = () => {
-      window.open(g.value.img);
+      u.value = (u.value - 1 + o.slides.length) % o.slides.length;
     }, C = () => {
-      o.enableImageClick && x();
-    }, b = (m) => {
-      t = m.touches[0].clientX, l = m.touches[0].clientY, a = !1;
+      u.value = (u.value + 1) % o.slides.length;
+    }, h = (m) => {
+      u.value = m;
+    }, $ = () => {
+      clearInterval(r);
+    }, T = () => {
+      o.autoplay && (r = setInterval(C, o.autoplaySpeed));
+    }, k = () => {
+      window.open(i.value.img);
+    }, b = () => {
+      o.enableImageClick && k();
     }, O = (m) => {
+      t = m.touches[0].clientX, l = m.touches[0].clientY, a = !1;
+    }, H = (m) => {
       if (!a) {
-        const P = m.touches[0].clientX - t, N = m.touches[0].clientY - l;
-        Math.abs(P) > Math.abs(N) && (P > 40 ? (d(), a = !0) : P < -40 && (u(), a = !0));
+        const P = m.touches[0].clientX - t, L = m.touches[0].clientY - l;
+        Math.abs(P) > Math.abs(L) && (P > 40 ? (d(), a = !0) : P < -40 && (C(), a = !0));
       }
     };
-    return X(() => {
-      o.autoplay && (s = setInterval(u, o.autoplaySpeed));
-    }), R(() => {
-      clearInterval(s);
-    }), (m, P) => (n(), i("div", {
-      class: "spicyCarouselContainer",
-      style: I({ ...c.value }),
-      onMouseenter: h,
-      onMouseleave: w,
-      onTouchstart: b,
-      onTouchmove: O
-    }, [
-      q(_, {
-        name: "slide",
-        mode: "out-in"
-      }, {
-        default: V(() => [
-          (n(), i("div", {
-            class: S(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
-            key: r.value,
-            style: I({ backgroundImage: `url(${g.value.img})` }),
-            onClick: C
-          }, [
-            e.slides[r.value].text ? (n(), i("div", {
-              key: 0,
-              class: S(["spicyCarouselTextOverlay", { fullScreen: v.value }]),
-              "aria-label": e.slides[r.value].text
+    return R(() => {
+      o.autoplay && (r = setInterval(C, o.autoplaySpeed));
+    }), q(() => {
+      clearInterval(r);
+    }), (m, P) => (n(), s("div", ue, [
+      y("div", {
+        class: "spicyCarouselContainer",
+        style: I({ ...c.value }),
+        onMouseenter: $,
+        onMouseleave: T,
+        onTouchstart: O,
+        onTouchmove: H
+      }, [
+        G(V, {
+          name: "slide",
+          mode: "out-in"
+        }, {
+          default: E(() => [
+            (n(), s("div", {
+              class: S(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
+              key: u.value,
+              style: I({ backgroundImage: `url(${i.value.img})` }),
+              onClick: b
             }, [
-              y("span", ue, f(e.slides[r.value].text), 1)
-            ], 10, ce)) : p("", !0),
-            B(m.$slots, "default")
-          ], 6))
-        ]),
-        _: 3
-      }),
-      e.showNavigation ? (n(), i("div", de, [
-        y("div", { class: "spicyCarouselPrevNav" }, [
-          y("button", {
-            class: "spicyCarouselPrevBtn",
-            onClick: d
-          }, pe)
-        ]),
-        y("div", { class: "spicyCarouselNextNav" }, [
-          y("button", {
-            class: "spicyCarouselNextBtn",
-            onClick: u
-          }, ve)
-        ])
-      ])) : p("", !0),
-      e.showPagination ? (n(), i("div", ge, [
-        (n(!0), i(M, null, F(e.slides, (N, A) => (n(), i("button", {
+              e.slides[u.value].text ? (n(), s("div", {
+                key: 0,
+                class: S(["spicyCarouselTextOverlay", { fullScreen: p.value }]),
+                "aria-label": e.slides[u.value].text
+              }, [
+                y("span", ye, v(e.slides[u.value].text), 1)
+              ], 10, de)) : f("", !0),
+              B(m.$slots, "default")
+            ], 6))
+          ]),
+          _: 3
+        })
+      ], 36),
+      y("div", pe, [
+        g.value ? (n(), s("h2", fe, v(i.value.title), 1)) : f("", !0)
+      ]),
+      e.showNavigation ? (n(), s("div", ve, [
+        y("button", {
+          class: "spicyCarouselPrevBtn",
+          onClick: d
+        }, he),
+        y("button", {
+          class: "spicyCarouselNextBtn",
+          onClick: C
+        }, me)
+      ])) : f("", !0),
+      e.showPagination ? (n(), s("div", Se, [
+        (n(!0), s(F, null, D(e.slides, (L, A) => (n(), s("button", {
           key: A,
-          onClick: (it) => D(A),
-          class: S(["spicyCarouselPageBtn", { active: A === r.value }])
+          onClick: (dt) => h(A),
+          class: S(["spicyCarouselPageBtn", { active: A === u.value }])
         }, [
-          y("span", be, f(A + 1), 1)
-        ], 10, he))), 128))
-      ])) : p("", !0)
-    ], 36));
+          y("span", ke, v(A + 1), 1)
+        ], 10, Ce))), 128))
+      ])) : f("", !0)
+    ]));
   }
-}, Se = { class: "kbContainer" }, Ce = { class: "kbSidebar" }, ke = ["onUpdate:modelValue"], we = { class: "spicyKB" }, xe = ["onMousedown", "onTouchstart", "onClick"], $e = { class: "keyText" }, Be = {
+}, xe = { class: "kbContainer" }, $e = { class: "kbSidebar" }, Te = ["onUpdate:modelValue"], Be = { class: "spicyKB" }, Me = ["onMousedown", "onTouchstart", "onClick"], Fe = { class: "keyText" }, De = {
   __name: "SpicyKeyboard",
   emits: ["input"],
   setup(e, { emit: t }) {
-    const l = k(null), a = k([
+    const l = x(null), a = x([
       {
         label: "Function Keys",
         visible: !1,
@@ -279,15 +280,15 @@ const te = ["aria-label"], le = {
           ["0", "."]
         ]
       }
-    ]), o = $(
-      () => a.value.filter((u) => u.visible).map((u) => u)
-    ), c = t, v = (u) => {
-      l.value = u;
-    }, r = () => {
+    ]), o = w(
+      () => a.value.filter((d) => d.visible).map((d) => d)
+    ), c = t, g = (d) => {
+      l.value = d;
+    }, p = () => {
       l.value = null;
-    }, g = (u) => {
-      c("input", u);
-    }, s = (u) => [
+    }, u = (d) => {
+      c("input", d);
+    }, i = (d) => [
       "Backspace",
       "Tab",
       "Caps",
@@ -305,60 +306,60 @@ const te = ["aria-label"], le = {
       "PgUp",
       "PgDn",
       "NumLock"
-    ].includes(u) ? `key-${u.toLowerCase()}` : "", d = (u, D, h) => {
-      const w = (C) => ["Backspace", "Tab", "Caps", "Enter", "Shift", "Space"].includes(C), x = (C) => ["Ctrl", "Win", "Alt", "Fn"].includes(C);
-      return w(u) ? "key-wide" : x(u) ? "key-small" : D[h].length === 1 ? "key-fullwidth" : "";
+    ].includes(d) ? `key-${d.toLowerCase()}` : "", r = (d, C, h) => {
+      const $ = (k) => ["Backspace", "Tab", "Caps", "Enter", "Shift", "Space"].includes(k), T = (k) => ["Ctrl", "Win", "Alt", "Fn"].includes(k);
+      return $(d) ? "key-wide" : T(d) ? "key-small" : C[h].length === 1 ? "key-fullwidth" : "";
     };
-    return (u, D) => (n(), i("div", Se, [
-      y("div", Ce, [
-        (n(!0), i(M, null, F(a.value, (h, w) => (n(), i("div", {
+    return (d, C) => (n(), s("div", xe, [
+      y("div", $e, [
+        (n(!0), s(F, null, D(a.value, (h, $) => (n(), s("div", {
           class: "sidebar",
-          key: w
+          key: $
         }, [
           y("label", null, [
-            E(y("input", {
+            N(y("input", {
               type: "checkbox",
-              "onUpdate:modelValue": (x) => h.visible = x
-            }, null, 8, ke), [
-              [G, h.visible]
+              "onUpdate:modelValue": (T) => h.visible = T
+            }, null, 8, Te), [
+              [J, h.visible]
             ]),
-            U(" " + f(h.label), 1)
+            U(" " + v(h.label), 1)
           ])
         ]))), 128))
       ]),
-      y("div", we, [
-        (n(!0), i(M, null, F(o.value, (h, w) => (n(), i("div", {
+      y("div", Be, [
+        (n(!0), s(F, null, D(o.value, (h, $) => (n(), s("div", {
           class: S(["kbSection", { [h.label.toLowerCase().replace(/\s+/g, "")]: !0 }]),
-          key: w
+          key: $
         }, [
-          (n(!0), i(M, null, F(h.layout, (x, C) => (n(), i("div", {
+          (n(!0), s(F, null, D(h.layout, (T, k) => (n(), s("div", {
             class: "spicyKBRow",
-            key: C
+            key: k
           }, [
-            (n(!0), i(M, null, F(x, (b) => (n(), i("button", {
+            (n(!0), s(F, null, D(T, (b) => (n(), s("button", {
               key: b,
               class: S(["spicyKBKey", [
                 { "is-active": l.value === b },
-                s(b),
-                d(b, h.layout, C)
+                i(b),
+                r(b, h.layout, k)
               ]]),
-              onMousedown: (O) => v(b),
-              onMouseup: r,
-              onTouchstart: (O) => v(b),
-              onTouchend: r,
-              onClick: (O) => g(b)
+              onMousedown: (O) => g(b),
+              onMouseup: p,
+              onTouchstart: (O) => g(b),
+              onTouchend: p,
+              onClick: (O) => u(b)
             }, [
-              y("span", $e, f(b), 1)
-            ], 42, xe))), 128))
+              y("span", Fe, v(b), 1)
+            ], 42, Me))), 128))
           ]))), 128))
         ], 2))), 128))
       ])
     ]));
   }
-}, Te = { class: "spicyInputLabel" }, Me = ["placeholder", "aria-label"], Fe = {
+}, Ie = { class: "spicyInputLabel" }, Oe = ["placeholder", "aria-label"], Pe = {
   key: 0,
   class: "spicyInputError"
-}, De = {
+}, Ae = {
   __name: "SpicyLabel",
   props: {
     value: { type: String, default: "" },
@@ -372,33 +373,33 @@ const te = ["aria-label"], le = {
     }
   },
   setup(e) {
-    const l = k(e.value), a = k(!1), o = (r) => {
-      l.value = r.target.value;
+    const l = x(e.value), a = x(!1), o = (p) => {
+      l.value = p.target.value;
     }, c = () => {
       a.value = !1;
-    }, v = () => {
+    }, g = () => {
       a.value = !0;
     };
-    return (r, g) => (n(), i("div", {
+    return (p, u) => (n(), s("div", {
       class: S(["spicyInputWrapper", [e.variant, { hasValue: l.value || e.value, hasFocus: a.value, hasError: e.error }]])
     }, [
-      y("label", Te, f(e.label), 1),
-      E(y("input", {
+      y("label", Ie, v(e.label), 1),
+      N(y("input", {
         class: S(["spicyInput", e.variant]),
-        "onUpdate:modelValue": g[0] || (g[0] = (s) => l.value = s),
+        "onUpdate:modelValue": u[0] || (u[0] = (i) => l.value = i),
         placeholder: e.placeholder,
         onInput: o,
         onBlur: c,
-        onFocus: v,
+        onFocus: g,
         "aria-label": e.label
-      }, null, 42, Me), [
-        [J, l.value]
+      }, null, 42, Oe), [
+        [Q, l.value]
       ]),
-      B(r.$slots, "default"),
-      e.error ? (n(), i("span", Fe, f(e.error), 1)) : p("", !0)
+      B(p.$slots, "default"),
+      e.error ? (n(), s("span", Pe, v(e.error), 1)) : f("", !0)
     ], 2));
   }
-}, Ie = { class: "spicyModalHeader" }, Oe = { class: "spicyModalActions" }, Pe = ["onClick"], Ae = {
+}, _e = { class: "spicyModalHeader" }, Ke = { class: "spicyModalActions" }, Le = ["onClick"], Ye = {
   __name: "SpicyModal",
   props: {
     width: { type: String, default: "50%" },
@@ -413,50 +414,50 @@ const te = ["aria-label"], le = {
   },
   emits: ["update:visible"],
   setup(e, { emit: t }) {
-    const l = e, a = $(() => ({
+    const l = e, a = w(() => ({
       "--width": l.width,
       "--height": l.height,
       "--skBorderRadius": l.borderRadius,
       "--skBgColor": l.bgColor
     })), o = t, c = () => {
       o("update:visible", !1);
-    }, v = (r) => {
-      l.closeOnClick && r.target.classList.contains("spicyModalOverlay") && c();
+    }, g = (p) => {
+      l.closeOnClick && p.target.classList.contains("spicyModalOverlay") && c();
     };
-    return (r, g) => e.visible ? (n(), i("div", {
+    return (p, u) => e.visible ? (n(), s("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: v
+      onClick: g
     }, [
       y("div", {
         class: "spicyModal",
         style: I({ ...a.value })
       }, [
-        y("header", Ie, [
-          B(r.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
-            U(f(e.modalTitle), 1)
+        y("header", _e, [
+          B(p.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
+            U(v(e.modalTitle), 1)
           ])
         ]),
-        B(r.$slots, "default"),
-        y("div", Oe, [
-          B(r.$slots, "spicyModalActions"),
-          e.actions.length === 0 && e.closeBtn ? (n(), i("button", {
+        B(p.$slots, "default"),
+        y("div", Ke, [
+          B(p.$slots, "spicyModalActions"),
+          e.actions.length === 0 && e.closeBtn ? (n(), s("button", {
             key: 0,
             class: "spicyModalCloseBtn spicyModalActionBtn",
             onClick: c
-          }, " Close ")) : p("", !0),
-          (n(!0), i(M, null, F(e.actions, (s) => (n(), i("button", {
+          }, " Close ")) : f("", !0),
+          (n(!0), s(F, null, D(e.actions, (i) => (n(), s("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
-            key: s.label,
-            onClick: s.handler
-          }, f(s.label), 9, Pe))), 128))
+            key: i.label,
+            onClick: i.handler
+          }, v(i.label), 9, Le))), 128))
         ])
       ], 4)
-    ])) : p("", !0);
+    ])) : f("", !0);
   }
-}, Ke = ["aria-label", "aria-checked", "onKeydown"], Le = /* @__PURE__ */ y("div", { class: "spicyToggleKnob" }, null, -1), Ne = [
-  Le
-], Ye = {
+}, Ve = ["aria-label", "aria-checked", "onKeydown"], Ee = /* @__PURE__ */ y("div", { class: "spicyToggleKnob" }, null, -1), Ne = [
+  Ee
+], Ue = {
   __name: "SpicyToggle",
   props: {
     modelValue: Boolean,
@@ -477,13 +478,13 @@ const te = ["aria-label"], le = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = $(() => ({
+    const l = e, a = w(() => ({
       "--skBorderColor": l.borderColor,
       "--activeColor": l.activeColor
     })), o = t, c = () => {
       o("update:modelValue", !l.modelValue);
     };
-    return (v, r) => (n(), i("div", Q({
+    return (g, p) => (n(), s("div", Z({
       class: ["spicyToggle", { outlined: e.variant === "outlined", "is-active": e.modelValue }],
       tabindex: "0",
       role: "switch",
@@ -492,18 +493,18 @@ const te = ["aria-label"], le = {
       "aria-checked": e.modelValue.toString(),
       onClick: c,
       onKeydown: [
-        K(Y(c, ["prevent"]), ["space"]),
-        K(Y(c, ["prevent"]), ["enter"])
+        _(Y(c, ["prevent"]), ["space"]),
+        _(Y(c, ["prevent"]), ["enter"])
       ]
-    }, v.$attrs), Ne, 16, Ke));
+    }, g.$attrs), Ne, 16, Ve));
   }
-}, _e = ["aria-hidden"], Ve = {
+}, We = ["aria-hidden"], ze = {
   key: 0,
   class: "spicyTooltipIcon"
-}, Ee = ["aria-label"], Ue = {
+}, He = ["aria-label"], je = {
   key: 2,
   class: "spicyTooltipIcon"
-}, We = {
+}, Xe = {
   __name: "SpicyTooltip",
   props: {
     text: String,
@@ -516,59 +517,59 @@ const te = ["aria-label"], le = {
     }
   },
   setup(e) {
-    const t = e, l = k(!1), a = k(null), o = Z({
+    const t = e, l = x(!1), a = x(null), o = ee({
       position: "absolute",
       top: "0px",
       left: "0px",
       maxWidth: "175px"
-    }), c = (s) => {
-      const d = s.right - window.innerWidth;
-      d > 0 && (o.left = `${parseInt(o.left) - d - 5}px`), s.left < 0 && (o.left = "5px");
-    }, v = {
-      top: (s, d) => {
-        o.left = `${s.left + (s.width - d.width) / 2}px`, o.top = `${s.top - d.height - 5}px`;
+    }), c = (i) => {
+      const r = i.right - window.innerWidth;
+      r > 0 && (o.left = `${parseInt(o.left) - r - 5}px`), i.left < 0 && (o.left = "5px");
+    }, g = {
+      top: (i, r) => {
+        o.left = `${i.left + (i.width - r.width) / 2}px`, o.top = `${i.top - r.height - 5}px`;
       },
-      bottom: (s, d) => {
-        o.left = `${s.left + (s.width - d.width) / 2}px`, o.top = `${s.bottom + 5}px`;
+      bottom: (i, r) => {
+        o.left = `${i.left + (i.width - r.width) / 2}px`, o.top = `${i.bottom + 5}px`;
       },
-      left: (s, d) => {
-        o.left = `${s.left - d.width - 5}px`, o.top = `${s.top + (s.height - d.height) / 2}px`;
+      left: (i, r) => {
+        o.left = `${i.left - r.width - 5}px`, o.top = `${i.top + (i.height - r.height) / 2}px`;
       },
-      right: (s, d) => {
-        o.left = `${s.right + 5}px`, o.top = `${s.top + (s.height - d.height) / 2}px`;
+      right: (i, r) => {
+        o.left = `${i.right + 5}px`, o.top = `${i.top + (i.height - r.height) / 2}px`;
       }
-    }, r = () => {
-      l.value = !0, ee(() => {
+    }, p = () => {
+      l.value = !0, te(() => {
         if (a.value && l.value) {
-          const s = a.value.getBoundingClientRect(), d = a.value.querySelector(".spicyTooltip").getBoundingClientRect(), u = v[t.position];
-          u(s, d), c(d);
+          const i = a.value.getBoundingClientRect(), r = a.value.querySelector(".spicyTooltip").getBoundingClientRect(), d = g[t.position];
+          d(i, r), c(r);
         }
       });
-    }, g = () => {
+    }, u = () => {
       l.value = !1;
     };
-    return (s, d) => (n(), i("div", {
-      onMouseover: r,
-      onMouseleave: g,
+    return (i, r) => (n(), s("div", {
+      onMouseover: p,
+      onMouseleave: u,
       ref_key: "host",
       ref: a
     }, [
-      B(s.$slots, "default"),
-      l.value ? (n(), i("div", {
+      B(i.$slots, "default"),
+      l.value ? (n(), s("div", {
         key: 0,
         class: "spicyTooltip",
         style: I(o),
         role: "tooltip",
         "aria-hidden": !l.value
       }, [
-        e.prependIcon ? (n(), i("span", Ve, f(e.prependIcon), 1)) : p("", !0),
-        e.text ? (n(), i("span", {
+        e.prependIcon ? (n(), s("span", ze, v(e.prependIcon), 1)) : f("", !0),
+        e.text ? (n(), s("span", {
           key: 1,
           class: "spicyTooltipText",
           "aria-label": e.text
-        }, f(e.text), 9, Ee)) : p("", !0),
-        e.appendIcon ? (n(), i("span", Ue, f(e.appendIcon), 1)) : p("", !0)
-      ], 12, _e)) : p("", !0)
+        }, v(e.text), 9, He)) : f("", !0),
+        e.appendIcon ? (n(), s("span", je, v(e.appendIcon), 1)) : f("", !0)
+      ], 12, We)) : f("", !0)
     ], 544));
   }
 };
@@ -580,35 +581,35 @@ function W(e, t) {
   };
   return t.replace(/YYYY|MM|DD/g, (a) => l[a]());
 }
-function ze(e) {
+function Re(e) {
   const [t, l, a] = e.split("-");
   return new Date(Number(t), Number(l) - 1, Number(a));
 }
-function He(e, t) {
+function qe(e, t) {
   const l = Math.abs(t.getTime() - e.getTime());
   return Math.ceil(l / (1e3 * 60 * 60 * 24));
 }
-function je(e, t) {
+function Ge(e, t) {
   const l = new Date(e);
   return l.setDate(e.getDate() + t), l;
 }
-function Xe(e, t) {
+function Je(e, t) {
   const l = new Date(e);
   return l.setDate(e.getDate() - t), l;
 }
-function Re(e) {
+function Qe(e) {
   const t = /* @__PURE__ */ new Date();
   return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function qe(e) {
+function Ze(e) {
   const t = /* @__PURE__ */ new Date();
   return t.setDate(t.getDate() - 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function Ge(e) {
+function et(e) {
   const t = /* @__PURE__ */ new Date();
   return t.setDate(t.getDate() + 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function Je(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
+function tt(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
   if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
     throw new Error(
       'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
@@ -616,22 +617,22 @@ function Je(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
   let a = W(/* @__PURE__ */ new Date(), e);
   return t.separator && t.separator !== "-" && (a = a.replace(/-/g, t.separator)), t.show ? { value: a, isVisible: !0 } : { value: a, isVisible: !1 };
 }
-const ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: Je,
-  dateAdd: je,
-  dateDiff: He,
-  dateIsToday: Re,
-  dateIsTomorrow: Ge,
-  dateIsYesterday: qe,
-  dateSubtract: Xe,
+  currentDate: tt,
+  dateAdd: Ge,
+  dateDiff: qe,
+  dateIsToday: Qe,
+  dateIsTomorrow: et,
+  dateIsYesterday: Ze,
+  dateSubtract: Je,
   formatDate: W,
-  parseDate: ze
+  parseDate: Re
 }, Symbol.toStringTag, { value: "Module" }));
-function Qe(e) {
+function lt(e) {
   const t = /* @__PURE__ */ new WeakMap();
   function l(a) {
-    if (T(a) || typeof a != "object")
+    if (M(a) || typeof a != "object")
       return a;
     if (t.has(a))
       return t.get(a);
@@ -646,112 +647,109 @@ function Qe(e) {
 function z(...e) {
   const t = {};
   return e.forEach((l) => {
-    if (!T(l)) {
+    if (!M(l)) {
       for (const a in l)
         if (Object.prototype.hasOwnProperty.call(l, a)) {
           const o = l[a];
-          o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[a] = z(
-            t[a] || {},
-            o
-          ) : t[a] = o);
+          o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[a] = z(t[a] || {}, o) : t[a] = o);
         }
     }
   }), t;
 }
-function Ze(...e) {
-  return T(e[0]) ? e[0] : Object.assign({}, ...e);
+function ot(...e) {
+  return M(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function et(e) {
-  return T(e) ? [] : Object.keys(e);
+function at(e) {
+  return M(e) ? [] : Object.keys(e);
 }
-function tt(e) {
-  return T(e) ? [] : Object.values(e);
+function nt(e) {
+  return M(e) ? [] : Object.values(e);
 }
-function lt(e) {
-  return T(e) ? [] : Object.entries(e);
+function st(e) {
+  return M(e) ? [] : Object.entries(e);
 }
-function T(e) {
+function M(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const ut = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  deepClone: Qe,
+  deepClone: lt,
   deepMerge: z,
-  getObjectEntries: lt,
-  getObjectKeys: et,
-  getObjectValues: tt,
-  isObjectEmpty: T,
-  mergeObjects: Ze
+  getObjectEntries: st,
+  getObjectKeys: at,
+  getObjectValues: nt,
+  isObjectEmpty: M,
+  mergeObjects: ot
 }, Symbol.toStringTag, { value: "Module" }));
-function L(e) {
+function K(e) {
   try {
     return new URL(e), !0;
   } catch (t) {
     return console.error("Invalid URL:", t), !1;
   }
 }
-function ot(e) {
-  return L(e) ? new URL(e).hostname : null;
+function it(e) {
+  return K(e) ? new URL(e).hostname : null;
 }
-function at(e, t) {
-  if (!L(e)) return e;
+function rt(e, t) {
+  if (!K(e)) return e;
   const l = new URL(e);
   return Object.keys(t).forEach((a) => l.searchParams.append(a, t[a])), l.toString();
 }
-function nt(e, t, l = "https") {
+function ct(e, t, l = "https") {
   if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(l.toLowerCase()))
     throw new Error("Invalid protocol: " + l);
   if (!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))
     throw new Error("Invalid hostname: " + e);
   return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${l.toLowerCase()}://${e}${t}`;
 }
-const dt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendParamsToUrl: at,
-  generateUrl: nt,
-  getHostname: ot,
-  isUrlValid: L
-}, Symbol.toStringTag, { value: "Module" })), st = ':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}', yt = {
+  appendParamsToUrl: rt,
+  generateUrl: ct,
+  getHostname: it,
+  isUrlValid: K
+}, Symbol.toStringTag, { value: "Module" })), ut = ':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}', gt = {
   install(e, t = {}) {
     const { useComponents: l = !0, useStyles: a = !0 } = t;
-    if (l && (e.component("SpicyAlert", ae), e.component("SpicyBtn", re), e.component("SpicyCarousel", me), e.component("SpicyKeyboard", Be), e.component("SpicyLabel", De), e.component("SpicyModal", Ae), e.component("SpicyToggle", Ye), e.component("SpicyTooltip", We)), a) {
+    if (l && (e.component("SpicyAlert", ne), e.component("SpicyBtn", ce), e.component("SpicyCarousel", we), e.component("SpicyKeyboard", De), e.component("SpicyLabel", Ae), e.component("SpicyModal", Ye), e.component("SpicyToggle", Ue), e.component("SpicyTooltip", Xe)), a) {
       const o = document.createElement("style");
-      o.textContent = st, document.head.appendChild(o);
+      o.textContent = ut, document.head.appendChild(o);
     }
   }
 };
 export {
-  ae as SpicyAlert,
-  re as SpicyBtn,
-  me as SpicyCarousel,
-  yt as SpicyKatsu,
-  Be as SpicyKeyboard,
-  De as SpicyLabel,
-  Ae as SpicyModal,
-  Ye as SpicyToggle,
-  We as SpicyTooltip,
-  at as appendParamsToUrl,
-  Je as currentDate,
-  je as dateAdd,
-  He as dateDiff,
-  Re as dateIsToday,
-  Ge as dateIsTomorrow,
-  qe as dateIsYesterday,
-  Xe as dateSubtract,
-  ct as dateUtils,
-  Qe as deepClone,
+  ne as SpicyAlert,
+  ce as SpicyBtn,
+  we as SpicyCarousel,
+  gt as SpicyKatsu,
+  De as SpicyKeyboard,
+  Ae as SpicyLabel,
+  Ye as SpicyModal,
+  Ue as SpicyToggle,
+  Xe as SpicyTooltip,
+  rt as appendParamsToUrl,
+  tt as currentDate,
+  Ge as dateAdd,
+  qe as dateDiff,
+  Qe as dateIsToday,
+  et as dateIsTomorrow,
+  Ze as dateIsYesterday,
+  Je as dateSubtract,
+  pt as dateUtils,
+  lt as deepClone,
   z as deepMerge,
   W as formatDate,
-  nt as generateUrl,
-  ot as getHostname,
-  lt as getObjectEntries,
-  et as getObjectKeys,
-  tt as getObjectValues,
-  T as isObjectEmpty,
-  L as isUrlValid,
-  Ze as mergeObjects,
-  ut as objUtils,
-  ze as parseDate,
-  st as spicyStyles,
-  dt as urlUtils
+  ct as generateUrl,
+  it as getHostname,
+  st as getObjectEntries,
+  at as getObjectKeys,
+  nt as getObjectValues,
+  M as isObjectEmpty,
+  K as isUrlValid,
+  ot as mergeObjects,
+  ft as objUtils,
+  Re as parseDate,
+  ut as spicyStyles,
+  vt as urlUtils
 };

package/dist/spicykatsu.umd.js

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SpicyKatsu={},r.Vue))})(this,function(r,e){"use strict";const ee=["aria-label"],te={key:0,class:"spicyAlertIcon"},le={key:1,class:"spicyAlertText"},V={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:t=>["info","success","warning","error","custom"].includes(t)},text:{type:String,default:""},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(t){const l=t,o=e.ref(!0),a=()=>{o.value=!1};return e.watch(()=>l.autoClose,n=>{n>0&&setTimeout(()=>{o.value=!1},n)}),(n,c)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyAlert",t.variant]),"aria-atomic":"true","aria-label":t.text,role:"alert",onKeydown:e.withKeys(a,["enter"])},[t.iconOnly||t.text?(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.closable?(e.openBlock(),e.createElementBlock("button",{key:2,class:"spicyAlertCloseBtn",onClick:a,"aria-label":"Close alert"}," X ")):e.createCommentVNode("",!0)],42,ee)):e.createCommentVNode("",!0)]),_:1}))}},oe=["disabled","aria-label","aria-disabled"],ne={key:0,class:"spicyBtnIcon"},ae={key:1,class:"spicyBtnText"},N={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skFontSize":o.fontSize,"--skFontWeight":o.fontWeight,"--skBgColor":o.bgColor,"--skTextColor":o.textColor,"--skBorderColor":o.borderColor,"--hoverColor":o.hoverColor}));return(n,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["spicyBtn",{outlined:t.variant==="outlined",disabled:t.disabled}]),style:e.normalizeStyle({...a.value}),disabled:t.disabled,onClick:c[0]||(c[0]=p=>n.$emit("click")),role:"button","aria-label":t.text,"aria-disabled":t.disabled},[t.icon?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",ae,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],14,oe))}},re=["aria-label"],ie={class:"spicyCarouselInfoText"},se={key:0,class:"spicyCarouselNavControls"},ce=[e.createElementVNode("span",{class:"spicyCarouselPrevBtnIcon"},"<",-1)],de=[e.createElementVNode("span",{class:"spicyCarouselNextBtnIcon"},">",-1)],ye={key:1,class:"spicyCarouselPagination"},pe=["onClick"],ue={class:"spicyCarouselPage"},M={__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{type:String,default:"rgba(0, 255, 234, 0.5)"},loop:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},slides:{type:Array,required:!0},width:{type:String,default:"540px"},height:{type:String,default:"300px"},fullScreen:{type:Boolean,default:!1},enableImageClick:{type:Boolean,default:!1}},setup(t){let l,o,a=!1;const n=t,c=e.computed(()=>({"--width":n.width,"--height":n.height,"--activeColor":n.activeColor})),p=e.computed(()=>u.value.fullScreen===!1?!1:n.fullScreen),s=e.ref(n.initialSlide),u=e.computed(()=>n.slides[s.value]);let i;const y=()=>{s.value=(s.value-1+n.slides.length)%n.slides.length},d=()=>{s.value=(s.value+1)%n.slides.length},C=g=>{s.value=g},f=()=>{clearInterval(i)},S=()=>{n.autoplay&&(i=setInterval(d,n.autoplaySpeed))},b=()=>{window.open(u.value.img)},k=()=>{n.enableImageClick&&b()},m=g=>{l=g.touches[0].clientX,o=g.touches[0].clientY,a=!1},w=g=>{if(!a){const E=g.touches[0].clientX-l,v=g.touches[0].clientY-o;Math.abs(E)>Math.abs(v)&&(E>40?(y(),a=!0):E<-40&&(d(),a=!0))}};return e.onMounted(()=>{n.autoplay&&(i=setInterval(d,n.autoplaySpeed))}),e.onUnmounted(()=>{clearInterval(i)}),(g,E)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyCarouselContainer",style:e.normalizeStyle({...c.value}),onMouseenter:f,onMouseleave:S,onTouchstart:m,onTouchmove:w},[e.createVNode(e.Transition,{name:"slide",mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyCarouselSlide",{pointCursor:n.enableImageClick}]),key:s.value,style:e.normalizeStyle({backgroundImage:`url(${u.value.img})`}),onClick:k},[t.slides[s.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyCarouselTextOverlay",{fullScreen:p.value}]),"aria-label":t.slides[s.value].text},[e.createElementVNode("span",ie,e.toDisplayString(t.slides[s.value].text),1)],10,re)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],6))]),_:3}),t.showNavigation?(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("div",{class:"spicyCarouselPrevNav"},[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:y},ce)]),e.createElementVNode("div",{class:"spicyCarouselNextNav"},[e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:d},de)])])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(v,T)=>(e.openBlock(),e.createElementBlock("button",{key:T,onClick:_e=>C(T),class:e.normalizeClass(["spicyCarouselPageBtn",{active:T===s.value}])},[e.createElementVNode("span",ue,e.toDisplayString(T+1),1)],10,pe))),128))])):e.createCommentVNode("",!0)],36))}},fe={class:"kbContainer"},me={class:"kbSidebar"},ge=["onUpdate:modelValue"],he={class:"spicyKB"},ke=["onMousedown","onTouchstart","onClick"],Se={class:"keyText"},F={__name:"SpicyKeyboard",emits:["input"],setup(t,{emit:l}){const o=e.ref(null),a=e.ref([{label:"Function Keys",visible:!1,layout:[["Esc","F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12","PrtScr","ScrLk","Pause"]]},{label:"Main Keys",visible:!0,layout:[["`","1","2","3","4","5","6","7","8","9","0","-","=","Backspace"],["Tab","Q","W","E","R","T","Y","U","I","O","P","[","]","\\"],["Caps","A","S","D","F","G","H","J","K","L",";","'","Enter"],["Shift","Z","X","C","V","B","N","M",",",".","/","Shift"],["Ctrl","Win","Alt","Space","Alt","Fn","Ctrl"]]},{label:"Arrow Keys",visible:!0,layout:[["Ins","Home","PgUp"],["Del","End","PgDn"],["&uarr;","&larr;","&darr;","&rarr;"]]},{label:"Numpad",visible:!0,layout:[["NumLock","/","*","-"],["7","8","9","+"],["4","5","6"],["1","2","3","Enter"],["0","."]]}]),n=e.computed(()=>a.value.filter(d=>d.visible).map(d=>d)),c=l,p=d=>{o.value=d},s=()=>{o.value=null},u=d=>{c("input",d)},i=d=>["Backspace","Tab","Caps","Enter","Shift","Ctrl","Win","Alt","Space","Fn","Ins","Del","Home","End","PgUp","PgDn","NumLock"].includes(d)?`key-${d.toLowerCase()}`:"",y=(d,C,f)=>{const S=k=>["Backspace","Tab","Caps","Enter","Shift","Space"].includes(k),b=k=>["Ctrl","Win","Alt","Fn"].includes(k);return S(d)?"key-wide":b(d)?"key-small":C[f].length===1?"key-fullwidth":""};return(d,C)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(f,S)=>(e.openBlock(),e.createElementBlock("div",{class:"sidebar",key:S},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{type:"checkbox","onUpdate:modelValue":b=>f.visible=b},null,8,ge),[[e.vModelCheckbox,f.visible]]),e.createTextVNode(" "+e.toDisplayString(f.label),1)])]))),128))]),e.createElementVNode("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(f,S)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kbSection",{[f.label.toLowerCase().replace(/\s+/g,"")]:!0}]),key:S},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.layout,(b,k)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyKBRow",key:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b,m=>(e.openBlock(),e.createElementBlock("button",{key:m,class:e.normalizeClass(["spicyKBKey",[{"is-active":o.value===m},i(m),y(m,f.layout,k)]]),onMousedown:w=>p(m),onMouseup:s,onTouchstart:w=>p(m),onTouchend:s,onClick:w=>u(m)},[e.createElementVNode("span",Se,e.toDisplayString(m),1)],42,ke))),128))]))),128))],2))),128))])]))}},be={class:"spicyInputLabel"},Ce=["placeholder","aria-label"],Be={key:0,class:"spicyInputError"},I={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:""},error:{type:String,default:""},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)}},setup(t){const l=t,o=e.ref(l.value),a=e.ref(!1),n=s=>{o.value=s.target.value},c=()=>{a.value=!1},p=()=>{a.value=!0};return(s,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[t.variant,{hasValue:o.value||t.value,hasFocus:a.value,hasError:t.error}]])},[e.createElementVNode("label",be,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["spicyInput",t.variant]),"onUpdate:modelValue":u[0]||(u[0]=i=>o.value=i),placeholder:t.placeholder,onInput:n,onBlur:c,onFocus:p,"aria-label":t.label},null,42,Ce),[[e.vModelText,o.value]]),e.renderSlot(s.$slots,"default"),t.error?(e.openBlock(),e.createElementBlock("span",Be,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)],2))}},we={class:"spicyModalHeader"},Ee={class:"spicyModalActions"},Te=["onClick"],O={__name:"SpicyModal",props:{width:{type:String,default:"50%"},height:{type:String,default:"auto"},borderRadius:{type:String,default:"8px"},bgColor:{type:String,default:"#2b2b2b"},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},actions:{type:Array,default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{type:String,default:""}},emits:["update:visible"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--width":o.width,"--height":o.height,"--skBorderRadius":o.borderRadius,"--skBgColor":o.bgColor})),n=l,c=()=>{n("update:visible",!1)},p=s=>{o.closeOnClick&&s.target.classList.contains("spicyModalOverlay")&&c()};return(s,u)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:p},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...a.value})},[e.createElementVNode("header",we,[e.renderSlot(s.$slots,"spicyModalHeader",{title:t.modalTitle},()=>[e.createTextVNode(e.toDisplayString(t.modalTitle),1)])]),e.renderSlot(s.$slots,"default"),e.createElementVNode("div",Ee,[e.renderSlot(s.$slots,"spicyModalActions"),t.actions.length===0&&t.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:c}," Close ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.actions,i=>(e.openBlock(),e.createElementBlock("button",{class:"spicyModalExtraBtn spicyModalActionBtn",key:i.label,onClick:i.handler},e.toDisplayString(i.label),9,Te))),128))])],4)])):e.createCommentVNode("",!0)}},$e=["aria-label","aria-checked","onKeydown"],De=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],P={__name:"SpicyToggle",props:{modelValue:Boolean,label:{type:String,default:"Toggle"},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},borderColor:String,activeColor:{type:String,default:"var(--skPrimaryColor)"}},emits:["update:modelValue"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skBorderColor":o.borderColor,"--activeColor":o.activeColor})),n=l,c=()=>{n("update:modelValue",!o.modelValue)};return(p,s)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["spicyToggle",{outlined:t.variant==="outlined","is-active":t.modelValue}],tabindex:"0",role:"switch",style:{...a.value},"aria-label":t.label,"aria-checked":t.modelValue.toString(),onClick:c,onKeydown:[e.withKeys(e.withModifiers(c,["prevent"]),["space"]),e.withKeys(e.withModifiers(c,["prevent"]),["enter"])]},p.$attrs),De,16,$e))}},Ve=["aria-hidden"],Ne={key:0,class:"spicyTooltipIcon"},Me=["aria-label"],Fe={key:2,class:"spicyTooltipIcon"},x={__name:"SpicyTooltip",props:{text:String,prependIcon:String,appendIcon:String,position:{type:String,default:"top",validator:t=>["top","bottom","left","right"].includes(t)}},setup(t){const l=t,o=e.ref(!1),a=e.ref(null),n=e.reactive({position:"absolute",top:"0px",left:"0px",maxWidth:"175px"}),c=i=>{const y=i.right-window.innerWidth;y>0&&(n.left=`${parseInt(n.left)-y-5}px`),i.left<0&&(n.left="5px")},p={top:(i,y)=>{n.left=`${i.left+(i.width-y.width)/2}px`,n.top=`${i.top-y.height-5}px`},bottom:(i,y)=>{n.left=`${i.left+(i.width-y.width)/2}px`,n.top=`${i.bottom+5}px`},left:(i,y)=>{n.left=`${i.left-y.width-5}px`,n.top=`${i.top+(i.height-y.height)/2}px`},right:(i,y)=>{n.left=`${i.right+5}px`,n.top=`${i.top+(i.height-y.height)/2}px`}},s=()=>{o.value=!0,e.nextTick(()=>{if(a.value&&o.value){const i=a.value.getBoundingClientRect(),y=a.value.querySelector(".spicyTooltip").getBoundingClientRect(),d=p[l.position];d(i,y),c(y)}})},u=()=>{o.value=!1};return(i,y)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:s,onMouseleave:u,ref_key:"host",ref:a},[e.renderSlot(i.$slots,"default"),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(n),role:"tooltip","aria-hidden":!o.value},[t.prependIcon?(e.openBlock(),e.createElementBlock("span",Ne,e.toDisplayString(t.prependIcon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",{key:1,class:"spicyTooltipText","aria-label":t.text},e.toDisplayString(t.text),9,Me)):e.createCommentVNode("",!0),t.appendIcon?(e.openBlock(),e.createElementBlock("span",Fe,e.toDisplayString(t.appendIcon),1)):e.createCommentVNode("",!0)],12,Ve)):e.createCommentVNode("",!0)],544))}};function $(t,l){const o={YYYY:()=>t.getFullYear().toString(),MM:()=>(t.getMonth()+1).toString().padStart(2,"0"),DD:()=>t.getDate().toString().padStart(2,"0")};return l.replace(/YYYY|MM|DD/g,a=>o[a]())}function K(t){const[l,o,a]=t.split("-");return new Date(Number(l),Number(o)-1,Number(a))}function A(t,l){const o=Math.abs(l.getTime()-t.getTime());return Math.ceil(o/(1e3*60*60*24))}function L(t,l){const o=new Date(t);return o.setDate(t.getDate()+l),o}function _(t,l){const o=new Date(t);return o.setDate(t.getDate()-l),o}function z(t){const l=new Date;return t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function Y(t){const l=new Date;return l.setDate(l.getDate()-1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function U(t){const l=new Date;return l.setDate(l.getDate()+1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function W(t="YYYY-MM-DD",l={show:!0,separator:"-"}){if(typeof t!="string"||typeof l!="object"||!l.hasOwnProperty("show")||typeof l.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let a=$(new Date,t);return l.separator&&l.separator!=="-"&&(a=a.replace(/-/g,l.separator)),l.show?{value:a,isVisible:!0}:{value:a,isVisible:!1}}const Ie=Object.freeze(Object.defineProperty({__proto__:null,currentDate:W,dateAdd:L,dateDiff:A,dateIsToday:z,dateIsTomorrow:U,dateIsYesterday:Y,dateSubtract:_,formatDate:$,parseDate:K},Symbol.toStringTag,{value:"Module"}));function j(t){const l=new WeakMap;function o(a){if(h(a)||typeof a!="object")return a;if(l.has(a))return l.get(a);const n=Array.isArray(a)?[]:{};l.set(a,n);for(const c in a)Object.prototype.hasOwnProperty.call(a,c)&&(n[c]=o(a[c]));return n}return o(t)}function D(...t){const l={};return t.forEach(o=>{if(!h(o)){for(const a in o)if(Object.prototype.hasOwnProperty.call(o,a)){const n=o[a];n!==void 0&&(typeof n=="object"&&n!==null&&!Array.isArray(n)?l[a]=D(l[a]||{},n):l[a]=n)}}}),l}function H(...t){return h(t[0])?t[0]:Object.assign({},...t)}function X(t){return h(t)?[]:Object.keys(t)}function R(t){return h(t)?[]:Object.values(t)}function q(t){return h(t)?[]:Object.entries(t)}function h(t){return t===null||typeof t!="object"?!1:Array.isArray(t)?t.length===0:Object.keys(t).length===0}const Oe=Object.freeze(Object.defineProperty({__proto__:null,deepClone:j,deepMerge:D,getObjectEntries:q,getObjectKeys:X,getObjectValues:R,isObjectEmpty:h,mergeObjects:H},Symbol.toStringTag,{value:"Module"}));function B(t){try{return new URL(t),!0}catch(l){return console.error("Invalid URL:",l),!1}}function G(t){return B(t)?new URL(t).hostname:null}function J(t,l){if(!B(t))return t;const o=new URL(t);return Object.keys(l).forEach(a=>o.searchParams.append(a,l[a])),o.toString()}function Q(t,l,o="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(o.toLowerCase()))throw new Error("Invalid protocol: "+o);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(t))throw new Error("Invalid hostname: "+t);return l.startsWith("/")||(l="/"+l),l.endsWith("/")&&l.length>1&&(l=l.slice(0,-1)),l==="/"&&(l=""),`${o.toLowerCase()}://${t}${l}`}const Pe=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:J,generateUrl:Q,getHostname:G,isUrlValid:B},Symbol.toStringTag,{value:"Module"})),Z=':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}',xe={install(t,l={}){const{useComponents:o=!0,useStyles:a=!0}=l;if(o&&(t.component("SpicyAlert",V),t.component("SpicyBtn",N),t.component("SpicyCarousel",M),t.component("SpicyKeyboard",F),t.component("SpicyLabel",I),t.component("SpicyModal",O),t.component("SpicyToggle",P),t.component("SpicyTooltip",x)),a){const n=document.createElement("style");n.textContent=Z,document.head.appendChild(n)}}};r.SpicyAlert=V,r.SpicyBtn=N,r.SpicyCarousel=M,r.SpicyKatsu=xe,r.SpicyKeyboard=F,r.SpicyLabel=I,r.SpicyModal=O,r.SpicyToggle=P,r.SpicyTooltip=x,r.appendParamsToUrl=J,r.currentDate=W,r.dateAdd=L,r.dateDiff=A,r.dateIsToday=z,r.dateIsTomorrow=U,r.dateIsYesterday=Y,r.dateSubtract=_,r.dateUtils=Ie,r.deepClone=j,r.deepMerge=D,r.formatDate=$,r.generateUrl=Q,r.getHostname=G,r.getObjectEntries=q,r.getObjectKeys=X,r.getObjectValues=R,r.isObjectEmpty=h,r.isUrlValid=B,r.mergeObjects=H,r.objUtils=Oe,r.parseDate=K,r.spicyStyles=Z,r.urlUtils=Pe,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SpicyKatsu={},r.Vue))})(this,function(r,e){"use strict";const ee=["aria-label"],te={key:0,class:"spicyAlertIcon"},le={key:1,class:"spicyAlertText"},V={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:t=>["info","success","warning","error","custom"].includes(t)},text:{type:String,default:""},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(t){const l=t,o=e.ref(!0),a=()=>{o.value=!1};return e.watch(()=>l.autoClose,n=>{n>0&&setTimeout(()=>{o.value=!1},n)}),(n,c)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyAlert",t.variant]),"aria-atomic":"true","aria-label":t.text,role:"alert",onKeydown:e.withKeys(a,["enter"])},[t.iconOnly||t.text?(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.closable?(e.openBlock(),e.createElementBlock("button",{key:2,class:"spicyAlertCloseBtn",onClick:a,"aria-label":"Close alert"}," X ")):e.createCommentVNode("",!0)],42,ee)):e.createCommentVNode("",!0)]),_:1}))}},oe=["disabled","aria-label","aria-disabled"],ne={key:0,class:"spicyBtnIcon"},ae={key:1,class:"spicyBtnText"},N={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skFontSize":o.fontSize,"--skFontWeight":o.fontWeight,"--skBgColor":o.bgColor,"--skTextColor":o.textColor,"--skBorderColor":o.borderColor,"--hoverColor":o.hoverColor}));return(n,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["spicyBtn",{outlined:t.variant==="outlined",disabled:t.disabled}]),style:e.normalizeStyle({...a.value}),disabled:t.disabled,onClick:c[0]||(c[0]=u=>n.$emit("click")),role:"button","aria-label":t.text,"aria-disabled":t.disabled},[t.icon?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",ae,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],14,oe))}},re={class:"spicyCarouselWrapper"},ie=["aria-label"],se={class:"spicyCarouselInfoText"},ce={class:"spicyCarouselTitle"},de={key:0},ye={key:0,class:"spicyCarouselNavControls"},pe=[e.createElementVNode("span",{class:"spicyCarouselPrevBtnIcon"},"<",-1)],ue=[e.createElementVNode("span",{class:"spicyCarouselNextBtnIcon"},">",-1)],fe={key:1,class:"spicyCarouselPagination"},me=["onClick"],ge={class:"spicyCarouselPage"},M={__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{type:String,default:"#00ffea80"},loop:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},slides:{type:Array,required:!0},width:{type:String,default:"580px"},height:{type:String,default:"360px"},fullScreen:{type:Boolean,default:!1},enableImageClick:{type:Boolean,default:!1}},setup(t){let l,o,a=!1;const n=t,c=e.computed(()=>({"--width":n.width,"--height":n.height,"--activeColor":n.activeColor})),u=e.computed(()=>n.slides[d.value].title),p=e.computed(()=>i.value.fullScreen===!1?!1:n.fullScreen),d=e.ref(n.initialSlide),i=e.computed(()=>n.slides[d.value]);let s;const y=()=>{d.value=(d.value-1+n.slides.length)%n.slides.length},k=()=>{d.value=(d.value+1)%n.slides.length},f=g=>{d.value=g},b=()=>{clearInterval(s)},C=()=>{n.autoplay&&(s=setInterval(k,n.autoplaySpeed))},S=()=>{window.open(i.value.img)},m=()=>{n.enableImageClick&&S()},w=g=>{l=g.touches[0].clientX,o=g.touches[0].clientY,a=!1},Le=g=>{if(!a){const E=g.touches[0].clientX-l,v=g.touches[0].clientY-o;Math.abs(E)>Math.abs(v)&&(E>40?(y(),a=!0):E<-40&&(k(),a=!0))}};return e.onMounted(()=>{n.autoplay&&(s=setInterval(k,n.autoplaySpeed))}),e.onUnmounted(()=>{clearInterval(s)}),(g,E)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",{class:"spicyCarouselContainer",style:e.normalizeStyle({...c.value}),onMouseenter:b,onMouseleave:C,onTouchstart:w,onTouchmove:Le},[e.createVNode(e.Transition,{name:"slide",mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyCarouselSlide",{pointCursor:n.enableImageClick}]),key:d.value,style:e.normalizeStyle({backgroundImage:`url(${i.value.img})`}),onClick:m},[t.slides[d.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyCarouselTextOverlay",{fullScreen:p.value}]),"aria-label":t.slides[d.value].text},[e.createElementVNode("span",se,e.toDisplayString(t.slides[d.value].text),1)],10,ie)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],6))]),_:3})],36),e.createElementVNode("div",ce,[u.value?(e.openBlock(),e.createElementBlock("h2",de,e.toDisplayString(i.value.title),1)):e.createCommentVNode("",!0)]),t.showNavigation?(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:y},pe),e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:k},ue)])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(v,T)=>(e.openBlock(),e.createElementBlock("button",{key:T,onClick:We=>f(T),class:e.normalizeClass(["spicyCarouselPageBtn",{active:T===d.value}])},[e.createElementVNode("span",ge,e.toDisplayString(T+1),1)],10,me))),128))])):e.createCommentVNode("",!0)]))}},he={class:"kbContainer"},ke={class:"kbSidebar"},Se=["onUpdate:modelValue"],be={class:"spicyKB"},Ce=["onMousedown","onTouchstart","onClick"],Be={class:"keyText"},F={__name:"SpicyKeyboard",emits:["input"],setup(t,{emit:l}){const o=e.ref(null),a=e.ref([{label:"Function Keys",visible:!1,layout:[["Esc","F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12","PrtScr","ScrLk","Pause"]]},{label:"Main Keys",visible:!0,layout:[["`","1","2","3","4","5","6","7","8","9","0","-","=","Backspace"],["Tab","Q","W","E","R","T","Y","U","I","O","P","[","]","\\"],["Caps","A","S","D","F","G","H","J","K","L",";","'","Enter"],["Shift","Z","X","C","V","B","N","M",",",".","/","Shift"],["Ctrl","Win","Alt","Space","Alt","Fn","Ctrl"]]},{label:"Arrow Keys",visible:!0,layout:[["Ins","Home","PgUp"],["Del","End","PgDn"],["&uarr;","&larr;","&darr;","&rarr;"]]},{label:"Numpad",visible:!0,layout:[["NumLock","/","*","-"],["7","8","9","+"],["4","5","6"],["1","2","3","Enter"],["0","."]]}]),n=e.computed(()=>a.value.filter(y=>y.visible).map(y=>y)),c=l,u=y=>{o.value=y},p=()=>{o.value=null},d=y=>{c("input",y)},i=y=>["Backspace","Tab","Caps","Enter","Shift","Ctrl","Win","Alt","Space","Fn","Ins","Del","Home","End","PgUp","PgDn","NumLock"].includes(y)?`key-${y.toLowerCase()}`:"",s=(y,k,f)=>{const b=S=>["Backspace","Tab","Caps","Enter","Shift","Space"].includes(S),C=S=>["Ctrl","Win","Alt","Fn"].includes(S);return b(y)?"key-wide":C(y)?"key-small":k[f].length===1?"key-fullwidth":""};return(y,k)=>(e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("div",ke,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(f,b)=>(e.openBlock(),e.createElementBlock("div",{class:"sidebar",key:b},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{type:"checkbox","onUpdate:modelValue":C=>f.visible=C},null,8,Se),[[e.vModelCheckbox,f.visible]]),e.createTextVNode(" "+e.toDisplayString(f.label),1)])]))),128))]),e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(f,b)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kbSection",{[f.label.toLowerCase().replace(/\s+/g,"")]:!0}]),key:b},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.layout,(C,S)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyKBRow",key:S},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C,m=>(e.openBlock(),e.createElementBlock("button",{key:m,class:e.normalizeClass(["spicyKBKey",[{"is-active":o.value===m},i(m),s(m,f.layout,S)]]),onMousedown:w=>u(m),onMouseup:p,onTouchstart:w=>u(m),onTouchend:p,onClick:w=>d(m)},[e.createElementVNode("span",Be,e.toDisplayString(m),1)],42,Ce))),128))]))),128))],2))),128))])]))}},we={class:"spicyInputLabel"},Ee=["placeholder","aria-label"],Te={key:0,class:"spicyInputError"},I={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:""},error:{type:String,default:""},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)}},setup(t){const l=t,o=e.ref(l.value),a=e.ref(!1),n=p=>{o.value=p.target.value},c=()=>{a.value=!1},u=()=>{a.value=!0};return(p,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[t.variant,{hasValue:o.value||t.value,hasFocus:a.value,hasError:t.error}]])},[e.createElementVNode("label",we,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["spicyInput",t.variant]),"onUpdate:modelValue":d[0]||(d[0]=i=>o.value=i),placeholder:t.placeholder,onInput:n,onBlur:c,onFocus:u,"aria-label":t.label},null,42,Ee),[[e.vModelText,o.value]]),e.renderSlot(p.$slots,"default"),t.error?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)],2))}},De={class:"spicyModalHeader"},$e={class:"spicyModalActions"},Ve=["onClick"],O={__name:"SpicyModal",props:{width:{type:String,default:"50%"},height:{type:String,default:"auto"},borderRadius:{type:String,default:"8px"},bgColor:{type:String,default:"#2b2b2b"},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},actions:{type:Array,default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{type:String,default:""}},emits:["update:visible"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--width":o.width,"--height":o.height,"--skBorderRadius":o.borderRadius,"--skBgColor":o.bgColor})),n=l,c=()=>{n("update:visible",!1)},u=p=>{o.closeOnClick&&p.target.classList.contains("spicyModalOverlay")&&c()};return(p,d)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:u},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...a.value})},[e.createElementVNode("header",De,[e.renderSlot(p.$slots,"spicyModalHeader",{title:t.modalTitle},()=>[e.createTextVNode(e.toDisplayString(t.modalTitle),1)])]),e.renderSlot(p.$slots,"default"),e.createElementVNode("div",$e,[e.renderSlot(p.$slots,"spicyModalActions"),t.actions.length===0&&t.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:c}," Close ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.actions,i=>(e.openBlock(),e.createElementBlock("button",{class:"spicyModalExtraBtn spicyModalActionBtn",key:i.label,onClick:i.handler},e.toDisplayString(i.label),9,Ve))),128))])],4)])):e.createCommentVNode("",!0)}},Ne=["aria-label","aria-checked","onKeydown"],Me=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],_={__name:"SpicyToggle",props:{modelValue:Boolean,label:{type:String,default:"Toggle"},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},borderColor:String,activeColor:{type:String,default:"var(--skPrimaryColor)"}},emits:["update:modelValue"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skBorderColor":o.borderColor,"--activeColor":o.activeColor})),n=l,c=()=>{n("update:modelValue",!o.modelValue)};return(u,p)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["spicyToggle",{outlined:t.variant==="outlined","is-active":t.modelValue}],tabindex:"0",role:"switch",style:{...a.value},"aria-label":t.label,"aria-checked":t.modelValue.toString(),onClick:c,onKeydown:[e.withKeys(e.withModifiers(c,["prevent"]),["space"]),e.withKeys(e.withModifiers(c,["prevent"]),["enter"])]},u.$attrs),Me,16,Ne))}},Fe=["aria-hidden"],Ie={key:0,class:"spicyTooltipIcon"},Oe=["aria-label"],_e={key:2,class:"spicyTooltipIcon"},K={__name:"SpicyTooltip",props:{text:String,prependIcon:String,appendIcon:String,position:{type:String,default:"top",validator:t=>["top","bottom","left","right"].includes(t)}},setup(t){const l=t,o=e.ref(!1),a=e.ref(null),n=e.reactive({position:"absolute",top:"0px",left:"0px",maxWidth:"175px"}),c=i=>{const s=i.right-window.innerWidth;s>0&&(n.left=`${parseInt(n.left)-s-5}px`),i.left<0&&(n.left="5px")},u={top:(i,s)=>{n.left=`${i.left+(i.width-s.width)/2}px`,n.top=`${i.top-s.height-5}px`},bottom:(i,s)=>{n.left=`${i.left+(i.width-s.width)/2}px`,n.top=`${i.bottom+5}px`},left:(i,s)=>{n.left=`${i.left-s.width-5}px`,n.top=`${i.top+(i.height-s.height)/2}px`},right:(i,s)=>{n.left=`${i.right+5}px`,n.top=`${i.top+(i.height-s.height)/2}px`}},p=()=>{o.value=!0,e.nextTick(()=>{if(a.value&&o.value){const i=a.value.getBoundingClientRect(),s=a.value.querySelector(".spicyTooltip").getBoundingClientRect(),y=u[l.position];y(i,s),c(s)}})},d=()=>{o.value=!1};return(i,s)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:p,onMouseleave:d,ref_key:"host",ref:a},[e.renderSlot(i.$slots,"default"),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(n),role:"tooltip","aria-hidden":!o.value},[t.prependIcon?(e.openBlock(),e.createElementBlock("span",Ie,e.toDisplayString(t.prependIcon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",{key:1,class:"spicyTooltipText","aria-label":t.text},e.toDisplayString(t.text),9,Oe)):e.createCommentVNode("",!0),t.appendIcon?(e.openBlock(),e.createElementBlock("span",_e,e.toDisplayString(t.appendIcon),1)):e.createCommentVNode("",!0)],12,Fe)):e.createCommentVNode("",!0)],544))}};function D(t,l){const o={YYYY:()=>t.getFullYear().toString(),MM:()=>(t.getMonth()+1).toString().padStart(2,"0"),DD:()=>t.getDate().toString().padStart(2,"0")};return l.replace(/YYYY|MM|DD/g,a=>o[a]())}function P(t){const[l,o,a]=t.split("-");return new Date(Number(l),Number(o)-1,Number(a))}function x(t,l){const o=Math.abs(l.getTime()-t.getTime());return Math.ceil(o/(1e3*60*60*24))}function A(t,l){const o=new Date(t);return o.setDate(t.getDate()+l),o}function L(t,l){const o=new Date(t);return o.setDate(t.getDate()-l),o}function z(t){const l=new Date;return t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function Y(t){const l=new Date;return l.setDate(l.getDate()-1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function U(t){const l=new Date;return l.setDate(l.getDate()+1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function W(t="YYYY-MM-DD",l={show:!0,separator:"-"}){if(typeof t!="string"||typeof l!="object"||!l.hasOwnProperty("show")||typeof l.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let a=D(new Date,t);return l.separator&&l.separator!=="-"&&(a=a.replace(/-/g,l.separator)),l.show?{value:a,isVisible:!0}:{value:a,isVisible:!1}}const Ke=Object.freeze(Object.defineProperty({__proto__:null,currentDate:W,dateAdd:A,dateDiff:x,dateIsToday:z,dateIsTomorrow:U,dateIsYesterday:Y,dateSubtract:L,formatDate:D,parseDate:P},Symbol.toStringTag,{value:"Module"}));function j(t){const l=new WeakMap;function o(a){if(h(a)||typeof a!="object")return a;if(l.has(a))return l.get(a);const n=Array.isArray(a)?[]:{};l.set(a,n);for(const c in a)Object.prototype.hasOwnProperty.call(a,c)&&(n[c]=o(a[c]));return n}return o(t)}function $(...t){const l={};return t.forEach(o=>{if(!h(o)){for(const a in o)if(Object.prototype.hasOwnProperty.call(o,a)){const n=o[a];n!==void 0&&(typeof n=="object"&&n!==null&&!Array.isArray(n)?l[a]=$(l[a]||{},n):l[a]=n)}}}),l}function H(...t){return h(t[0])?t[0]:Object.assign({},...t)}function X(t){return h(t)?[]:Object.keys(t)}function R(t){return h(t)?[]:Object.values(t)}function q(t){return h(t)?[]:Object.entries(t)}function h(t){return t===null||typeof t!="object"?!1:Array.isArray(t)?t.length===0:Object.keys(t).length===0}const Pe=Object.freeze(Object.defineProperty({__proto__:null,deepClone:j,deepMerge:$,getObjectEntries:q,getObjectKeys:X,getObjectValues:R,isObjectEmpty:h,mergeObjects:H},Symbol.toStringTag,{value:"Module"}));function B(t){try{return new URL(t),!0}catch(l){return console.error("Invalid URL:",l),!1}}function G(t){return B(t)?new URL(t).hostname:null}function J(t,l){if(!B(t))return t;const o=new URL(t);return Object.keys(l).forEach(a=>o.searchParams.append(a,l[a])),o.toString()}function Q(t,l,o="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(o.toLowerCase()))throw new Error("Invalid protocol: "+o);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(t))throw new Error("Invalid hostname: "+t);return l.startsWith("/")||(l="/"+l),l.endsWith("/")&&l.length>1&&(l=l.slice(0,-1)),l==="/"&&(l=""),`${o.toLowerCase()}://${t}${l}`}const xe=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:J,generateUrl:Q,getHostname:G,isUrlValid:B},Symbol.toStringTag,{value:"Module"})),Z=':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}',Ae={install(t,l={}){const{useComponents:o=!0,useStyles:a=!0}=l;if(o&&(t.component("SpicyAlert",V),t.component("SpicyBtn",N),t.component("SpicyCarousel",M),t.component("SpicyKeyboard",F),t.component("SpicyLabel",I),t.component("SpicyModal",O),t.component("SpicyToggle",_),t.component("SpicyTooltip",K)),a){const n=document.createElement("style");n.textContent=Z,document.head.appendChild(n)}}};r.SpicyAlert=V,r.SpicyBtn=N,r.SpicyCarousel=M,r.SpicyKatsu=Ae,r.SpicyKeyboard=F,r.SpicyLabel=I,r.SpicyModal=O,r.SpicyToggle=_,r.SpicyTooltip=K,r.appendParamsToUrl=J,r.currentDate=W,r.dateAdd=A,r.dateDiff=x,r.dateIsToday=z,r.dateIsTomorrow=U,r.dateIsYesterday=Y,r.dateSubtract=L,r.dateUtils=Ke,r.deepClone=j,r.deepMerge=$,r.formatDate=D,r.generateUrl=Q,r.getHostname=G,r.getObjectEntries=q,r.getObjectKeys=X,r.getObjectValues=R,r.isObjectEmpty=h,r.isUrlValid=B,r.mergeObjects=H,r.objUtils=Pe,r.parseDate=P,r.spicyStyles=Z,r.urlUtils=xe,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.spicyAlertIcon{margin-right:8px}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyBtn{padding:8px 16px;background-color:var(--skBgColor, #28292a);border:none;border-radius:4px;color:var(--skTextColor, #ddd);cursor:pointer;font-size:14px;transition:background-color .25s}.spicyBtn.outlined{background-color:var(--skBgColor, transparent);border:2px solid var(--skBorderColor, #515353);color:var(--skTextColor, #ddd)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--skTextColor, #ddd)}.spicyBtnIcon{margin-right:6px}.spicyCarouselContainer{position:relative;overflow:hidden;width:var(--width, 540px);height:var(--height, 300px);border-radius:var(--borderRadius)}.spicyCarouselSlide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .3s ease}.spicyCarouselTextOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.spicyCarouselTextOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#00000059}.slide-enter-active,.slide-leave-active{transition:opacity .3s}.slide-enter,.slide-leave-to{opacity:0}.spicyCarouselPrevNav,.spicyCarouselNextNav{width:100%;display:flex;align-items:center}.spicyCarouselNavControls{height:100%;display:flex}.spicyCarouselPrevBtn,.spicyCarouselNextBtn{position:absolute;border:none;font-size:24px;color:#ccc;cursor:pointer;z-index:1;text-shadow:0 0 5px black;background:#00000080;height:35px;width:35px;border-radius:50%}.spicyCarouselPrevBtnIcon,.spicyCarouselNextBtnIcon{display:flex;align-items:center;justify-content:center}.spicyCarouselPrevBtn{left:6px}.spicyCarouselNextBtn{right:6px}.spicyCarouselPagination{position:absolute;bottom:4px;left:50%;transform:translate(-50%);text-shadow:0 0 5px black}.spicyCarouselPageBtn{border:none;color:#ccc;cursor:pointer;margin:0 4px;background:#00000080;height:25px;width:25px;border-radius:50%;font-weight:700}.spicyCarouselPageBtn.active{background:var(--activeColor);font-weight:700}.pointCursor{cursor:pointer}.kbContainer{display:flex;gap:10px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0}.kbSidebar{display:flex;flex-direction:column;gap:5px}.sidebar label{display:flex;align-items:center;gap:5px}.spicyKB{display:flex;flex-direction:row;gap:5px;background-color:#333;border-radius:5px;padding:10px}.kbSection{display:flex;flex-direction:column;gap:5px}.spicyKBRow{display:flex;gap:5px}.spicyKBKey{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0;cursor:pointer;transition:background-color .2s ease;font-family:Courier New,Courier,monospace;font-weight:700;text-transform:uppercase}.spicyKBKey:hover,.spicyKBKey.is-active{background-color:#e0e0e0}.key-backspace{width:100px}.key-tab,.key-caps,.key-enter,.key-shift{width:120px}.key-ctrl,.key-win,.key-alt,.key-fn{width:70px}.key-space{width:400px}.key-fullwidth{width:100%}.key-small{width:60px}.key-wide{width:80px}.keyText{-webkit-user-select:none;user-select:none}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor, var(--skTextColor));transition:top .25s,font-size .25s,color .25s;pointer-events:none;font-size:18px;background-color:transparent}.spicyInput{padding:20px 16px 8px;border:none;border-bottom:1px solid var(--skBorderColor, #515353);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor, var(--skTextColor, #ddd))}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--skLabelFocus)}.outlined .spicyInput{border:1px solid var(--skBorderColor, #515353);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--skBorderColor, #515353)}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-18px;font-size:16px;color:var(--skLabelFocus);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.spicyModalActionBtn:hover{text-decoration:underline}.spicyToggle{width:50px;height:24px;background-color:var(--skBgSecondaryColor, #424344);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyToggle.is-active .spicyToggleKnob{transform:translate(26px)}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyToggle.outlined.is-active{background-color:var(--activeColor, var(--skPrimaryColor));border-color:var(--activeColor, var(--skPrimaryColor))}.spicyTooltip{z-index:9999;background-color:var(--skBgColor);color:var(--skTextColor);padding:8px;border-radius:4px;font-size:15px;border:1px solid var(--skBorderColor);display:flex;align-items:center;justify-content:center}.spicyTooltipIcon{font-size:18px}
+.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.spicyAlertIcon{margin-right:8px}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyBtn{padding:8px 16px;background-color:var(--skBgColor, #28292a);border:none;border-radius:4px;color:var(--skTextColor, #ddd);cursor:pointer;font-size:14px;transition:background-color .25s}.spicyBtn.outlined{background-color:var(--skBgColor, transparent);border:2px solid var(--skBorderColor, #515353);color:var(--skTextColor, #ddd)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--skTextColor, #ddd)}.spicyBtnIcon{margin-right:6px}.spicyCarouselWrapper{position:relative;width:var(--width, 580px);height:var(--height, 360px);padding:30px;display:flex;align-items:center;justify-content:center}.spicyCarouselTitle{position:absolute;top:0;width:var(--width, 580px);background-color:#0009;height:30px;color:#ccc;font-size:18px;font-weight:700}.spicyCarouselContainer{position:relative;overflow:hidden;width:100%;height:100%;border-radius:var(--borderRadius)}.spicyCarouselSlide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s ease}.spicyCarouselTextOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.spicyCarouselTextOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#0000004d}.slide-enter-active,.slide-leave-active{transition:opacity .3s}.slide-enter,.slide-leave-to{opacity:0}.spicyCarouselNavControls{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.spicyCarouselNextBtn{border-radius:0 6px 6px 0}.spicyCarouselPrevBtn{border-radius:6px 0 0 6px}.spicyCarouselPrevBtn,.spicyCarouselNextBtn{border:none;font-size:24px;color:#ccc;cursor:pointer;background:#0009;height:100%;width:30px;display:flex;align-items:center;justify-content:center;transition:transform .3s;pointer-events:auto;z-index:2}.spicyCarouselPrevBtn:hover,.spicyCarouselNextBtn:hover{background:#000000bf}.spicyCarouselPagination{position:absolute;background:#0009;bottom:0;left:50%;height:30px;width:var(--width, 580px);transform:translate(-50%);display:flex;gap:8px;z-index:2;align-items:center;justify-content:center;pointer-events:auto}.spicyCarouselPageBtn{border:none;color:#fff;cursor:pointer;background:#00b7ff80;height:26px;width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}.spicyCarouselPageBtn.active,.spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.pointCursor{cursor:pointer}.kbContainer{display:flex;gap:10px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0}.kbSidebar{display:flex;flex-direction:column;gap:5px}.sidebar label{display:flex;align-items:center;gap:5px}.spicyKB{display:flex;flex-direction:row;gap:5px;background-color:#333;border-radius:5px;padding:10px}.kbSection{display:flex;flex-direction:column;gap:5px}.spicyKBRow{display:flex;gap:5px}.spicyKBKey{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0;cursor:pointer;transition:background-color .2s ease;font-family:Courier New,Courier,monospace;font-weight:700;text-transform:uppercase}.spicyKBKey:hover,.spicyKBKey.is-active{background-color:#e0e0e0}.key-backspace{width:100px}.key-tab,.key-caps,.key-enter,.key-shift{width:120px}.key-ctrl,.key-win,.key-alt,.key-fn{width:70px}.key-space{width:400px}.key-fullwidth{width:100%}.key-small{width:60px}.key-wide{width:80px}.keyText{-webkit-user-select:none;user-select:none}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor, var(--skTextColor));transition:top .25s,font-size .25s,color .25s;pointer-events:none;font-size:18px;background-color:transparent}.spicyInput{padding:20px 16px 8px;border:none;border-bottom:1px solid var(--skBorderColor, #515353);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor, var(--skTextColor, #ddd))}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--skLabelFocus)}.outlined .spicyInput{border:1px solid var(--skBorderColor, #515353);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--skBorderColor, #515353)}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-18px;font-size:16px;color:var(--skLabelFocus);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.spicyModalActionBtn:hover{text-decoration:underline}.spicyToggle{width:50px;height:24px;background-color:var(--skBgSecondaryColor, #424344);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyToggle.is-active .spicyToggleKnob{transform:translate(26px)}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyToggle.outlined.is-active{background-color:var(--activeColor, var(--skPrimaryColor));border-color:var(--activeColor, var(--skPrimaryColor))}.spicyTooltip{z-index:9999;background-color:var(--skBgColor);color:var(--skTextColor);padding:8px;border-radius:4px;font-size:15px;border:1px solid var(--skBorderColor);display:flex;align-items:center;justify-content:center}.spicyTooltipIcon{font-size:18px}

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "author": "Sato",
   "private": false,
-  "version": "0.0.35",
+  "version": "0.0.36",
   "files": [
     "dist/",
     "package.json",
@@ -18,13 +18,15 @@
     "publish": "npm publish",
     "docsdev": "vitepress dev docs",
     "docsbuild": "vitepress build docs",
-    "docspreview": "vitepress preview docs"
+    "docspreview": "vitepress preview docs",
+    "prettier": "prettier --config ./.prettier.json --write --ignore-path .gitignore ./src"
   },
   "dependencies": {
     "vue": "^3.4.23"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "prettier": "^3.3.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.9",
     "vitepress": "^1.1.3",