spicykatsu 0.0.38 → 0.0.39

package/README.md

@@ -1,7 +1,7 @@
-# SpicyKatsuLib
-
-Fun, simple library for Vue3. Something for me to play around with in my projects.  
-
-Included will be componenets and utilites.
-
+# SpicyKatsuLib
+
+Fun, simple library for Vue3. Something for me to play around with in my projects.  
+
+Included will be componenets and utilites.
+
 Docs: [SpicyKatsu Docs](https://satoru8.gitlab.io/spicykatsuvlib/)

package/dist/spicykatsu.es.js

@@ -1,11 +1,11 @@
-import { ref as w, watch as Y, openBlock as n, createBlock as R, Transition as E, withCtx as z, createElementBlock as s, normalizeClass as k, withKeys as A, toDisplayString as h, createCommentVNode as v, renderSlot as b, computed as C, normalizeStyle as I, onMounted as q, onUnmounted as G, createElementVNode as f, createVNode as J, Fragment as D, renderList as F, withDirectives as _, vModelCheckbox as Q, createTextVNode as U, vModelText as W, mergeProps as Z, withModifiers as N, reactive as ee, nextTick as te } from "vue";
+import { ref as S, watch as V, openBlock as n, createBlock as K, Transition as F, withCtx as P, createElementBlock as s, normalizeClass as b, withKeys as T, toDisplayString as g, createCommentVNode as p, renderSlot as h, computed as m, resolveDirective as X, withDirectives as M, normalizeStyle as k, createElementVNode as f, onMounted as q, onUnmounted as G, createVNode as J, Fragment as Y, renderList as A, vModelText as L, createTextVNode as Q, mergeProps as Z, withModifiers as O, reactive as ee, nextTick as te } from "vue";
 const le = ["aria-label"], oe = {
   key: 0,
   class: "spicyAlertIcon"
 }, ae = {
   key: 1,
   class: "spicyAlertText"
-}, ne = {
+}, ie = {
   __name: "SpicyAlert",
   props: {
     variant: {
@@ -20,47 +20,52 @@ const le = ["aria-label"], oe = {
     autoClose: { type: Number, default: 0 }
   },
   setup(e) {
-    const t = e, l = w(!0), a = () => {
+    const t = e, l = S(!0), a = () => {
       l.value = !1;
     };
-    return Y(
+    return V(
       () => t.autoClose,
       (o) => {
         o > 0 && setTimeout(() => {
           l.value = !1;
         }, o);
       }
-    ), (o, r) => (n(), R(E, { name: "fade" }, {
-      default: z(() => [
+    ), (o, r) => (n(), K(F, { name: "fade" }, {
+      default: P(() => [
         l.value ? (n(), s("div", {
           key: 0,
-          class: k(["spicyAlert", e.variant]),
+          class: b(["spicyAlert", e.variant]),
           "aria-atomic": "true",
           "aria-label": e.text,
           role: "alert",
-          onKeydown: A(a, ["enter"])
+          onKeydown: T(a, ["enter"])
         }, [
-          e.iconOnly || e.text ? (n(), s("span", oe, h(e.icon), 1)) : v("", !0),
-          !e.iconOnly && e.text ? (n(), s("span", ae, h(e.text), 1)) : v("", !0),
+          e.iconOnly || e.text ? (n(), s("span", oe, g(e.icon), 1)) : p("", !0),
+          !e.iconOnly && e.text ? (n(), s("span", ae, g(e.text), 1)) : p("", !0),
           e.closable ? (n(), s("button", {
             key: 2,
             class: "spicyAlertCloseBtn",
             onClick: a,
             "aria-label": "Close alert"
-          }, " X ")) : v("", !0),
-          b(o.$slots, "default")
-        ], 42, le)) : v("", !0)
+          }, " X ")) : p("", !0),
+          h(o.$slots, "default")
+        ], 42, le)) : p("", !0)
       ]),
       _: 3
     }));
   }
-}, se = ["disabled", "aria-label", "aria-disabled", "tabindex"], ie = {
+}, ne = ["disabled", "aria-label", "aria-disabled", "tabindex"], se = {
   key: 0,
-  class: "spicyBtnIcon"
-}, re = {
+  class: "spicyBtnIcon spicyMDI",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, re = ["d"], ce = {
   key: 1,
+  class: "spicyBtnIcon"
+}, ue = {
+  key: 2,
   class: "spicyBtnText"
-}, ce = {
+}, de = {
   __name: "SpicyBtn",
   props: {
     variant: {
@@ -69,8 +74,9 @@ const le = ["aria-label"], oe = {
       validator: (e) => ["outlined", "filled"].includes(e)
     },
     disabled: { type: Boolean, default: !1 },
-    text: { type: String, default: "Button" },
+    text: { type: String, default: "" },
     icon: String,
+    mdi: String,
     bgColor: String,
     textColor: String,
     hoverColor: String,
@@ -81,47 +87,59 @@ const le = ["aria-label"], oe = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
+    const l = e, a = m(() => ({
       "--skFontSize": typeof l.fontSize == "number" ? `${l.fontSize}px` : l.fontSize,
       "--skFontWeight": l.fontWeight,
       "--skBgColor": l.bgColor,
       "--skTextColor": l.textColor,
       "--skBorderColor": l.borderColor,
       "--hoverColor": l.hoverColor
-    }));
-    return (o, r) => (n(), s("button", {
-      class: k(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
-      style: I({ ...a.value }),
-      disabled: e.disabled,
-      onClick: r[0] || (r[0] = (d) => o.$emit("click")),
-      role: "button",
-      "aria-label": e.text,
-      "aria-disabled": e.disabled,
-      tabindex: e.disabled ? -1 : 0
-    }, [
-      e.icon ? (n(), s("span", ie, h(e.icon), 1)) : v("", !0),
-      e.text ? (n(), s("span", re, h(e.text), 1)) : v("", !0),
-      b(o.$slots, "default")
-    ], 14, se));
+    })), o = m(() => !l.text && (l.icon || l.mdi));
+    return (r, d) => {
+      const y = X("spicyRipple");
+      return M((n(), s("button", {
+        class: b(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled, rounded: o.value }]),
+        style: k({ ...a.value }),
+        disabled: e.disabled,
+        onClick: d[0] || (d[0] = (c) => r.$emit("click")),
+        role: "button",
+        "aria-label": e.text,
+        "aria-disabled": e.disabled,
+        tabindex: e.disabled ? -1 : 0
+      }, [
+        e.mdi ? (n(), s("svg", se, [
+          f("path", {
+            fill: "currentColor",
+            class: "mdi-icon",
+            d: e.mdi
+          }, null, 8, re)
+        ])) : p("", !0),
+        e.icon && !e.mdi ? (n(), s("span", ce, g(e.icon), 1)) : p("", !0),
+        e.text ? (n(), s("span", ue, g(e.text), 1)) : p("", !0),
+        h(r.$slots, "default")
+      ], 14, ne)), [
+        [y]
+      ]);
+    };
   }
-}, ue = { class: "spicyCarouselWrapper" }, de = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, pe = { class: "spicyCarouselTitle" }, fe = { key: 0 }, ve = {
+}, ye = ["aria-label"], pe = { class: "spicyCarouselInfoText" }, fe = { class: "spicyCarouselTitle" }, ge = { key: 0 }, he = {
   key: 0,
   class: "spicyCarouselNavControls"
-}, he = /* @__PURE__ */ f("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), ge = [
-  he
-], me = /* @__PURE__ */ f("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), be = [
-  me
-], Se = {
+}, ve = /* @__PURE__ */ f("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), me = [
+  ve
+], be = /* @__PURE__ */ f("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), Se = [
+  be
+], Ce = {
   key: 1,
   class: "spicyCarouselPagination"
-}, Ce = ["onClick"], ke = { class: "spicyCarouselPage" }, we = {
+}, ke = ["onClick"], we = { class: "spicyCarouselPage" }, xe = {
   __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" },
+    activeColor: { type: String, default: "var(--skPrimaryColor)" },
     loop: { type: Boolean, default: !0 },
     initialSlide: { type: Number, default: 0 },
     slides: { type: Array, required: !0 },
@@ -132,94 +150,96 @@ const le = ["aria-label"], oe = {
   },
   setup(e) {
     let t, l, a = !1;
-    const o = e, r = C(() => ({
+    const o = e, r = m(() => ({
       "--width": o.width,
       "--height": o.height,
       "--activeColor": o.activeColor
-    })), d = C(() => o.slides[u.value].title), y = C(() => i.value.fullScreen === !1 ? !1 : o.fullScreen), u = w(o.initialSlide), i = C(() => o.slides[u.value]);
-    let c;
-    const p = () => {
-      u.value = (u.value - 1 + o.slides.length) % o.slides.length;
-    }, $ = () => {
-      u.value = (u.value + 1) % o.slides.length;
-    }, g = (S) => {
-      u.value = S;
-    }, B = () => {
-      clearInterval(c);
-    }, T = () => {
-      o.autoplay && (c = setInterval($, o.autoplaySpeed));
+    })), d = m(() => o.slides[c.value].title), y = m(() => i.value.fullScreen === !1 ? !1 : o.fullScreen), c = S(o.initialSlide), i = m(() => o.slides[c.value]);
+    let u;
+    const w = () => {
+      c.value = (c.value - 1 + o.slides.length) % o.slides.length;
     }, x = () => {
+      c.value = (c.value + 1) % o.slides.length;
+    }, E = (v) => {
+      c.value = v;
+    }, U = () => {
+      clearInterval(u);
+    }, W = () => {
+      o.autoplay && (u = setInterval(x, o.autoplaySpeed));
+    }, R = () => {
       window.open(i.value.img);
-    }, m = () => {
-      o.enableImageClick && x();
-    }, O = (S) => {
-      t = S.touches[0].clientX, l = S.touches[0].clientY, a = !1;
-    }, X = (S) => {
+    }, H = () => {
+      o.enableImageClick && R();
+    }, _ = (v) => {
+      t = v.touches[0].clientX, l = v.touches[0].clientY, a = !1;
+    }, j = (v) => {
       if (!a) {
-        const P = S.touches[0].clientX - t, L = S.touches[0].clientY - l;
-        Math.abs(P) > Math.abs(L) && (P > 40 ? (p(), a = !0) : P < -40 && ($(), a = !0));
+        const $ = v.touches[0].clientX - t, I = v.touches[0].clientY - l;
+        Math.abs($) > Math.abs(I) && ($ > 40 ? (w(), a = !0) : $ < -40 && (x(), a = !0));
       }
     };
     return q(() => {
-      o.autoplay && (c = setInterval($, o.autoplaySpeed));
+      o.autoplay && (u = setInterval(x, o.autoplaySpeed));
     }), G(() => {
-      clearInterval(c);
-    }), (S, P) => (n(), s("div", ue, [
+      clearInterval(u);
+    }), (v, $) => (n(), s("div", {
+      class: "spicyCarouselWrapper",
+      style: k({ ...r.value })
+    }, [
       f("div", {
         class: "spicyCarouselContainer",
-        style: I({ ...r.value }),
-        onMouseenter: B,
-        onMouseleave: T,
-        onTouchstart: O,
-        onTouchmove: X
+        onMouseenter: U,
+        onMouseleave: W,
+        onTouchstart: _,
+        onTouchmove: j
       }, [
-        J(E, {
+        J(F, {
           name: "slide",
           mode: "out-in"
         }, {
-          default: z(() => [
+          default: P(() => [
             (n(), s("div", {
-              class: k(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
-              key: u.value,
-              style: I({ backgroundImage: `url(${i.value.img})` }),
-              onClick: m
+              class: b(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
+              key: c.value,
+              style: k({ backgroundImage: `url(${i.value.img})` }),
+              onClick: H
             }, [
-              e.slides[u.value].text ? (n(), s("div", {
+              e.slides[c.value].text ? (n(), s("div", {
                 key: 0,
-                class: k(["spicyCarouselTextOverlay", { fullScreen: y.value }]),
-                "aria-label": e.slides[u.value].text
+                class: b(["spicyCarouselTextOverlay", { fullScreen: y.value }]),
+                "aria-label": e.slides[c.value].text
               }, [
-                f("span", ye, h(e.slides[u.value].text), 1)
-              ], 10, de)) : v("", !0),
-              b(S.$slots, "default")
+                f("span", pe, g(e.slides[c.value].text), 1)
+              ], 10, ye)) : p("", !0),
+              h(v.$slots, "default")
             ], 6))
           ]),
           _: 3
         })
-      ], 36),
-      f("div", pe, [
-        d.value ? (n(), s("h2", fe, h(i.value.title), 1)) : v("", !0)
+      ], 32),
+      f("div", fe, [
+        d.value ? (n(), s("h2", ge, g(i.value.title), 1)) : p("", !0)
       ]),
-      e.showNavigation ? (n(), s("div", ve, [
+      e.showNavigation ? (n(), s("div", he, [
         f("button", {
           class: "spicyCarouselPrevBtn",
-          onClick: p
-        }, ge),
+          onClick: w
+        }, me),
         f("button", {
           class: "spicyCarouselNextBtn",
-          onClick: $
-        }, be)
-      ])) : v("", !0),
-      e.showPagination ? (n(), s("div", Se, [
-        (n(!0), s(D, null, F(e.slides, (L, V) => (n(), s("button", {
-          key: V,
-          onClick: (ht) => g(V),
-          class: k(["spicyCarouselPageBtn", { active: V === u.value }])
+          onClick: x
+        }, Se)
+      ])) : p("", !0),
+      e.showPagination ? (n(), s("div", Ce, [
+        (n(!0), s(Y, null, A(e.slides, (I, B) => (n(), s("button", {
+          key: B,
+          onClick: (dt) => E(B),
+          class: b(["spicyCarouselPageBtn", { active: B === c.value }])
         }, [
-          f("span", ke, h(V + 1), 1)
-        ], 10, Ce))), 128))
-      ])) : v("", !0)
-    ]));
+          f("span", we, g(B + 1), 1)
+        ], 10, ke))), 128))
+      ])) : p("", !0)
+    ], 4));
   }
 }, $e = {
   __name: "SpicyDivider",
@@ -230,161 +250,24 @@ const le = ["aria-label"], oe = {
     bgColor: { type: String, default: "var(--skBgColor)" }
   },
   setup(e) {
-    const t = e, l = C(() => ({
+    const t = e, l = m(() => ({
       width: t.width,
       height: t.height,
       borderBottom: `${t.height} ${t.variant} ${t.bgColor}`
     }));
     return (a, o) => (n(), s("div", {
       class: "spicyDivider",
-      style: I(l.value),
+      style: k(l.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      b(a.$slots, "default")
+      h(a.$slots, "default")
     ], 4));
   }
-}, xe = { class: "kbContainer" }, Be = { class: "kbSidebar" }, Te = ["onUpdate:modelValue"], Me = { class: "spicyKB" }, De = ["onMousedown", "onTouchstart", "onClick"], Fe = { class: "keyText" }, Ie = {
-  __name: "SpicyKeyboard",
-  emits: ["input"],
-  setup(e, { emit: t }) {
-    const l = w(null), a = w([
-      {
-        label: "Function Keys",
-        visible: !1,
-        layout: [
-          [
-            "Esc",
-            "F1",
-            "F2",
-            "F3",
-            "F4",
-            "F5",
-            "F6",
-            "F7",
-            "F8",
-            "F9",
-            "F10",
-            "F11",
-            "F12",
-            "PrtScr",
-            "ScrLk",
-            "Pause"
-          ]
-          // ['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", "."]
-        ]
-      }
-    ]), o = C(
-      () => a.value.filter((p) => p.visible).map((p) => p)
-    ), r = t, d = (p) => {
-      l.value = p;
-    }, y = () => {
-      l.value = null;
-    }, u = (p) => {
-      r("input", p);
-    }, i = (p) => [
-      "Backspace",
-      "Tab",
-      "Caps",
-      "Enter",
-      "Shift",
-      "Ctrl",
-      "Win",
-      "Alt",
-      "Space",
-      "Fn",
-      "Ins",
-      "Del",
-      "Home",
-      "End",
-      "PgUp",
-      "PgDn",
-      "NumLock"
-    ].includes(p) ? `key-${p.toLowerCase()}` : "", c = (p, $, g) => {
-      const B = (x) => ["Backspace", "Tab", "Caps", "Enter", "Shift", "Space"].includes(x), T = (x) => ["Ctrl", "Win", "Alt", "Fn"].includes(x);
-      return B(p) ? "key-wide" : T(p) ? "key-small" : $[g].length === 1 ? "key-fullwidth" : "";
-    };
-    return (p, $) => (n(), s("div", xe, [
-      f("div", Be, [
-        (n(!0), s(D, null, F(a.value, (g, B) => (n(), s("div", {
-          class: "sidebar",
-          key: B
-        }, [
-          f("label", null, [
-            _(f("input", {
-              type: "checkbox",
-              "onUpdate:modelValue": (T) => g.visible = T
-            }, null, 8, Te), [
-              [Q, g.visible]
-            ]),
-            U(" " + h(g.label), 1)
-          ])
-        ]))), 128))
-      ]),
-      f("div", Me, [
-        (n(!0), s(D, null, F(o.value, (g, B) => (n(), s("div", {
-          class: k(["kbSection", { [g.label.toLowerCase().replace(/\s+/g, "")]: !0 }]),
-          key: B
-        }, [
-          (n(!0), s(D, null, F(g.layout, (T, x) => (n(), s("div", {
-            class: "spicyKBRow",
-            key: x
-          }, [
-            (n(!0), s(D, null, F(T, (m) => (n(), s("button", {
-              key: m,
-              class: k(["spicyKBKey", [
-                { "is-active": l.value === m },
-                i(m),
-                c(m, g.layout, x)
-              ]]),
-              onMousedown: (O) => d(m),
-              onMouseup: y,
-              onTouchstart: (O) => d(m),
-              onTouchend: y,
-              onClick: (O) => u(m)
-            }, [
-              f("span", Fe, h(m), 1)
-            ], 42, De))), 128))
-          ]))), 128))
-        ], 2))), 128))
-      ])
-    ]));
-  }
-}, Oe = { class: "spicyInputLabel" }, Pe = ["placeholder", "aria-label"], Ve = {
+}, Be = { class: "spicyInputLabel" }, Te = ["placeholder", "aria-label"], Me = {
   key: 0,
   class: "spicyInputError"
-}, Ae = {
+}, De = {
   __name: "SpicyLabel",
   props: {
     value: { type: String, default: "" },
@@ -398,33 +281,33 @@ const le = ["aria-label"], oe = {
     }
   },
   setup(e) {
-    const l = w(e.value), a = w(!1), o = (y) => {
+    const l = S(e.value), a = S(!1), o = (y) => {
       l.value = y.target.value;
     }, r = () => {
       a.value = !1;
     }, d = () => {
       a.value = !0;
     };
-    return (y, u) => (n(), s("div", {
-      class: k(["spicyInputWrapper", [e.variant, { hasValue: l.value || e.value, hasFocus: a.value, hasError: e.error }]])
+    return (y, c) => (n(), s("div", {
+      class: b(["spicyInputWrapper", [e.variant, { hasValue: l.value || e.value, hasFocus: a.value, hasError: e.error }]])
     }, [
-      f("label", Oe, h(e.label), 1),
-      _(f("input", {
-        class: k(["spicyInput", e.variant]),
-        "onUpdate:modelValue": u[0] || (u[0] = (i) => l.value = i),
+      f("label", Be, g(e.label), 1),
+      M(f("input", {
+        class: b(["spicyInput", e.variant]),
+        "onUpdate:modelValue": c[0] || (c[0] = (i) => l.value = i),
         placeholder: e.placeholder,
         onInput: o,
         onBlur: r,
         onFocus: d,
         "aria-label": e.label
-      }, null, 42, Pe), [
-        [W, l.value]
+      }, null, 42, Te), [
+        [L, l.value]
       ]),
-      b(y.$slots, "default"),
-      e.error ? (n(), s("span", Ve, h(e.error), 1)) : v("", !0)
+      h(y.$slots, "default"),
+      e.error ? (n(), s("span", Me, g(e.error), 1)) : p("", !0)
     ], 2));
   }
-}, _e = { class: "spicyModalHeader" }, Ke = { class: "spicyModalActions" }, Le = ["onClick"], Ne = {
+}, Ie = { class: "spicyModalHeader" }, Oe = { class: "spicyModalActions" }, Ve = ["onClick"], Fe = {
   __name: "SpicyModal",
   props: {
     width: { type: String, default: "50%" },
@@ -439,7 +322,7 @@ const le = ["aria-label"], oe = {
   },
   emits: ["update:visible"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
+    const l = e, a = m(() => ({
       "--width": l.width,
       "--height": l.height,
       "--skBorderRadius": l.borderRadius,
@@ -449,41 +332,41 @@ const le = ["aria-label"], oe = {
     }, d = (y) => {
       l.closeOnClick && y.target.classList.contains("spicyModalOverlay") && r();
     };
-    return (y, u) => e.visible ? (n(), s("div", {
+    return (y, c) => e.visible ? (n(), s("div", {
       key: 0,
       class: "spicyModalOverlay",
       onClick: d
     }, [
       f("div", {
         class: "spicyModal",
-        style: I({ ...a.value })
+        style: k({ ...a.value })
       }, [
-        f("header", _e, [
-          b(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
-            U(h(e.modalTitle), 1)
+        f("header", Ie, [
+          h(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
+            Q(g(e.modalTitle), 1)
           ])
         ]),
-        b(y.$slots, "default"),
-        f("div", Ke, [
-          b(y.$slots, "spicyModalActions"),
+        h(y.$slots, "default"),
+        f("div", Oe, [
+          h(y.$slots, "spicyModalActions"),
           e.actions.length === 0 && e.closeBtn ? (n(), s("button", {
             key: 0,
             class: "spicyModalCloseBtn spicyModalActionBtn",
             onClick: r
-          }, " Close ")) : v("", !0),
-          (n(!0), s(D, null, F(e.actions, (i) => (n(), s("button", {
+          }, " Close ")) : p("", !0),
+          (n(!0), s(Y, null, A(e.actions, (i) => (n(), s("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
             key: i.label,
             onClick: i.handler
-          }, h(i.label), 9, Le))), 128))
+          }, g(i.label), 9, Ve))), 128))
         ])
       ], 4)
-    ])) : v("", !0);
+    ])) : p("", !0);
   }
-}, Ye = { class: "spicySlider" }, Ee = {
+}, Pe = { class: "spicySlider" }, Ye = {
   key: 0,
   class: "spicySliderLabel"
-}, ze = ["min", "max", "step"], Ue = {
+}, Ae = ["min", "max", "step"], Le = {
   __name: "SpicySlider",
   props: {
     min: { type: Number, default: 0 },
@@ -494,8 +377,8 @@ const le = ["aria-label"], oe = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = t, o = w(l.modelValue);
-    Y(
+    const l = e, a = t, o = S(l.modelValue);
+    V(
       () => l.modelValue,
       (d) => {
         o.value = d;
@@ -504,25 +387,25 @@ const le = ["aria-label"], oe = {
     const r = (d) => {
       a("update:modelValue", Number(d.target.value));
     };
-    return (d, y) => (n(), s("div", Ye, [
-      e.label ? (n(), s("label", Ee, h(e.label), 1)) : v("", !0),
-      _(f("input", {
+    return (d, y) => (n(), s("div", Pe, [
+      e.label ? (n(), s("label", Ye, g(e.label), 1)) : p("", !0),
+      M(f("input", {
         class: "spicySliderInput",
         type: "range",
         min: e.min,
         max: e.max,
         step: e.step,
-        "onUpdate:modelValue": y[0] || (y[0] = (u) => o.value = u),
+        "onUpdate:modelValue": y[0] || (y[0] = (c) => o.value = c),
         onInput: r
-      }, null, 40, ze), [
-        [W, o.value]
+      }, null, 40, Ae), [
+        [L, o.value]
       ]),
-      b(d.$slots, "default")
+      h(d.$slots, "default")
     ]));
   }
-}, We = ["tabindex", "aria-label", "aria-checked", "onKeydown"], He = /* @__PURE__ */ f("div", { class: "spicyToggleKnob" }, null, -1), je = [
-  He
-], Xe = {
+}, Ne = ["tabindex", "aria-label", "aria-checked", "onKeydown"], ze = /* @__PURE__ */ f("div", { class: "spicyToggleKnob" }, null, -1), Ee = [
+  ze
+], Ue = {
   __name: "SpicyToggle",
   props: {
     modelValue: Boolean,
@@ -543,7 +426,7 @@ const le = ["aria-label"], oe = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
+    const l = e, a = m(() => ({
       "--skBorderColor": l.borderColor,
       "--activeColor": l.activeColor
     })), o = t, r = () => {
@@ -558,18 +441,18 @@ const le = ["aria-label"], oe = {
       "aria-checked": e.modelValue.toString(),
       onClick: r,
       onKeydown: [
-        A(N(r, ["prevent"]), ["space"]),
-        A(N(r, ["prevent"]), ["enter"])
+        T(O(r, ["prevent"]), ["space"]),
+        T(O(r, ["prevent"]), ["enter"])
       ]
-    }, d.$attrs), je, 16, We));
+    }, d.$attrs), Ee, 16, Ne));
   }
-}, Re = ["aria-hidden"], qe = {
+}, We = ["aria-hidden"], Re = {
   key: 0,
   class: "spicyTooltipIcon"
-}, Ge = ["aria-label"], Je = {
+}, He = ["aria-label"], _e = {
   key: 2,
   class: "spicyTooltipIcon"
-}, Qe = {
+}, je = {
   __name: "SpicyTooltip",
   props: {
     text: String,
@@ -582,63 +465,63 @@ const le = ["aria-label"], oe = {
     }
   },
   setup(e) {
-    const t = e, l = w(!1), a = w(null), o = ee({
+    const t = e, l = S(!1), a = S(null), o = ee({
       position: "absolute",
       top: "0px",
       left: "0px",
       maxWidth: "175px"
     }), r = (i) => {
-      const c = i.right - window.innerWidth;
-      c > 0 && (o.left = `${parseInt(o.left) - c - 5}px`), i.left < 0 && (o.left = "5px");
+      const u = i.right - window.innerWidth;
+      u > 0 && (o.left = `${parseInt(o.left) - u - 5}px`), i.left < 0 && (o.left = "5px");
     }, d = {
-      top: (i, c) => {
-        o.left = `${i.left + (i.width - c.width) / 2}px`, o.top = `${i.top - c.height - 5}px`;
+      top: (i, u) => {
+        o.left = `${i.left + (i.width - u.width) / 2}px`, o.top = `${i.top - u.height - 5}px`;
       },
-      bottom: (i, c) => {
-        o.left = `${i.left + (i.width - c.width) / 2}px`, o.top = `${i.bottom + 5}px`;
+      bottom: (i, u) => {
+        o.left = `${i.left + (i.width - u.width) / 2}px`, o.top = `${i.bottom + 5}px`;
       },
-      left: (i, c) => {
-        o.left = `${i.left - c.width - 5}px`, o.top = `${i.top + (i.height - c.height) / 2}px`;
+      left: (i, u) => {
+        o.left = `${i.left - u.width - 5}px`, o.top = `${i.top + (i.height - u.height) / 2}px`;
       },
-      right: (i, c) => {
-        o.left = `${i.right + 5}px`, o.top = `${i.top + (i.height - c.height) / 2}px`;
+      right: (i, u) => {
+        o.left = `${i.right + 5}px`, o.top = `${i.top + (i.height - u.height) / 2}px`;
       }
     }, y = () => {
       l.value = !0, te(() => {
         if (a.value && l.value) {
-          const i = a.value.getBoundingClientRect(), c = a.value.querySelector(".spicyTooltip").getBoundingClientRect(), p = d[t.position];
-          p(i, c), r(c);
+          const i = a.value.getBoundingClientRect(), u = a.value.querySelector(".spicyTooltip").getBoundingClientRect(), w = d[t.position];
+          w(i, u), r(u);
         }
       });
-    }, u = () => {
+    }, c = () => {
       l.value = !1;
     };
-    return (i, c) => (n(), s("div", {
+    return (i, u) => (n(), s("div", {
       onMouseover: y,
-      onMouseleave: u,
+      onMouseleave: c,
       ref_key: "host",
       ref: a
     }, [
-      b(i.$slots, "default"),
+      h(i.$slots, "default"),
       l.value ? (n(), s("div", {
         key: 0,
         class: "spicyTooltip",
-        style: I(o),
+        style: k(o),
         role: "tooltip",
         "aria-hidden": !l.value
       }, [
-        e.prependIcon ? (n(), s("span", qe, h(e.prependIcon), 1)) : v("", !0),
+        e.prependIcon ? (n(), s("span", Re, g(e.prependIcon), 1)) : p("", !0),
         e.text ? (n(), s("span", {
           key: 1,
           class: "spicyTooltipText",
           "aria-label": e.text
-        }, h(e.text), 9, Ge)) : v("", !0),
-        e.appendIcon ? (n(), s("span", Je, h(e.appendIcon), 1)) : v("", !0)
-      ], 12, Re)) : v("", !0)
+        }, g(e.text), 9, He)) : p("", !0),
+        e.appendIcon ? (n(), s("span", _e, g(e.appendIcon), 1)) : p("", !0)
+      ], 12, We)) : p("", !0)
     ], 544));
   }
 };
-function H(e, t) {
+function N(e, t) {
   const l = {
     YYYY: () => e.getFullYear().toString(),
     MM: () => (e.getMonth() + 1).toString().padStart(2, "0"),
@@ -646,58 +529,58 @@ function H(e, t) {
   };
   return t.replace(/YYYY|MM|DD/g, (a) => l[a]());
 }
-function Ze(e) {
+function Ke(e) {
   const [t, l, a] = e.split("-");
   return new Date(Number(t), Number(l) - 1, Number(a));
 }
-function et(e, t) {
+function Xe(e, t) {
   const l = Math.abs(t.getTime() - e.getTime());
   return Math.ceil(l / (1e3 * 60 * 60 * 24));
 }
-function tt(e, t) {
+function qe(e, t) {
   const l = new Date(e);
   return l.setDate(e.getDate() + t), l;
 }
-function lt(e, t) {
+function Ge(e, t) {
   const l = new Date(e);
   return l.setDate(e.getDate() - t), l;
 }
-function ot(e) {
+function Je(e) {
   const t = /* @__PURE__ */ new Date();
   return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function at(e) {
+function Qe(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 nt(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 st(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
+function et(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.'
     );
-  let a = H(/* @__PURE__ */ new Date(), e);
+  let a = N(/* @__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 mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: st,
-  dateAdd: tt,
-  dateDiff: et,
-  dateIsToday: ot,
-  dateIsTomorrow: nt,
-  dateIsYesterday: at,
-  dateSubtract: lt,
-  formatDate: H,
-  parseDate: Ze
+  currentDate: et,
+  dateAdd: qe,
+  dateDiff: Xe,
+  dateIsToday: Je,
+  dateIsTomorrow: Ze,
+  dateIsYesterday: Qe,
+  dateSubtract: Ge,
+  formatDate: N,
+  parseDate: Ke
 }, Symbol.toStringTag, { value: "Module" }));
-function it(e) {
+function tt(e) {
   const t = /* @__PURE__ */ new WeakMap();
   function l(a) {
-    if (M(a) || typeof a != "object")
+    if (C(a) || typeof a != "object")
       return a;
     if (t.has(a))
       return t.get(a);
@@ -709,114 +592,126 @@ function it(e) {
   }
   return l(e);
 }
-function j(...e) {
+function z(...e) {
   const t = {};
   return e.forEach((l) => {
-    if (!M(l)) {
+    if (!C(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] = j(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 rt(...e) {
-  return M(e[0]) ? e[0] : Object.assign({}, ...e);
+function lt(...e) {
+  return C(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function ct(e) {
-  return M(e) ? [] : Object.keys(e);
+function ot(e) {
+  return C(e) ? [] : Object.keys(e);
 }
-function ut(e) {
-  return M(e) ? [] : Object.values(e);
+function at(e) {
+  return C(e) ? [] : Object.values(e);
 }
-function dt(e) {
-  return M(e) ? [] : Object.entries(e);
+function it(e) {
+  return C(e) ? [] : Object.entries(e);
 }
-function M(e) {
+function C(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  deepClone: it,
-  deepMerge: j,
-  getObjectEntries: dt,
-  getObjectKeys: ct,
-  getObjectValues: ut,
-  isObjectEmpty: M,
-  mergeObjects: rt
+  deepClone: tt,
+  deepMerge: z,
+  getObjectEntries: it,
+  getObjectKeys: ot,
+  getObjectValues: at,
+  isObjectEmpty: C,
+  mergeObjects: lt
 }, Symbol.toStringTag, { value: "Module" }));
-function K(e) {
+function D(e) {
   try {
     return new URL(e), !0;
   } catch (t) {
     return console.error("Invalid URL:", t), !1;
   }
 }
-function yt(e) {
-  return K(e) ? new URL(e).hostname : null;
+function nt(e) {
+  return D(e) ? new URL(e).hostname : null;
 }
-function pt(e, t) {
-  if (!K(e)) return e;
+function st(e, t) {
+  if (!D(e)) return e;
   const l = new URL(e);
   return Object.keys(t).forEach((a) => l.searchParams.append(a, t[a])), l.toString();
 }
-function ft(e, t, l = "https") {
+function rt(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 St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendParamsToUrl: pt,
-  generateUrl: ft,
-  getHostname: yt,
-  isUrlValid: K
-}, Symbol.toStringTag, { value: "Module" })), vt = ':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)}', Ct = {
+  appendParamsToUrl: st,
+  generateUrl: rt,
+  getHostname: nt,
+  isUrlValid: D
+}, Symbol.toStringTag, { value: "Module" })), ct = ':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)}.spicyRipple{position:absolute;border-radius:50%;background:#fff9;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}', ut = {
+  beforeMount(e) {
+    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (t) => {
+      const l = document.createElement("span"), a = Math.max(e.clientWidth, e.clientHeight), o = a / 2;
+      l.style.width = l.style.height = `${a}px`, l.style.left = `${t.clientX - e.getBoundingClientRect().left - o}px`, l.style.top = `${t.clientY - e.getBoundingClientRect().top - o}px`, l.classList.add("spicyRipple");
+      const r = e.querySelector(".spicyRipple");
+      r && r.remove(), e.appendChild(l), l.addEventListener("animationend", () => {
+        l.remove();
+      });
+    });
+  }
+}, ht = {
   install(e, t = {}) {
-    const { useComponents: l = !0, useStyles: a = !0 } = t;
-    if (l && (e.component("SpicyAlert", ne), e.component("SpicyBtn", ce), e.component("SpicyCarousel", we), e.component("SpicyDivider", $e), e.component("SpicyKeyboard", Ie), e.component("SpicyLabel", Ae), e.component("SpicyModal", Ne), e.component("SpicySlider", Ue), e.component("SpicyToggle", Xe), e.component("SpicyTooltip", Qe)), a) {
-      const o = document.createElement("style");
-      o.textContent = vt, document.head.appendChild(o);
+    const { useComponents: l = !0, useStyles: a = !0, useDirectives: o = !0 } = t;
+    if (l && (e.component("SpicyAlert", ie), e.component("SpicyBtn", de), e.component("SpicyCarousel", xe), e.component("SpicyDivider", $e), e.component("SpicyLabel", De), e.component("SpicyModal", Fe), e.component("SpicySlider", Le), e.component("SpicyToggle", Ue), e.component("SpicyTooltip", je)), a) {
+      const r = document.createElement("style");
+      r.textContent = ct, document.head.appendChild(r);
     }
+    o && e.directive("spicyRipple", ut);
   }
 };
 export {
-  ne as SpicyAlert,
-  ce as SpicyBtn,
-  we as SpicyCarousel,
+  ie as SpicyAlert,
+  de as SpicyBtn,
+  xe as SpicyCarousel,
   $e as SpicyDivider,
-  Ct as SpicyKatsu,
-  Ie as SpicyKeyboard,
-  Ae as SpicyLabel,
-  Ne as SpicyModal,
-  Ue as SpicySlider,
-  Xe as SpicyToggle,
-  Qe as SpicyTooltip,
-  pt as appendParamsToUrl,
-  st as currentDate,
-  tt as dateAdd,
-  et as dateDiff,
-  ot as dateIsToday,
-  nt as dateIsTomorrow,
-  at as dateIsYesterday,
-  lt as dateSubtract,
-  mt as dateUtils,
-  it as deepClone,
-  j as deepMerge,
-  H as formatDate,
-  ft as generateUrl,
-  yt as getHostname,
-  dt as getObjectEntries,
-  ct as getObjectKeys,
-  ut as getObjectValues,
-  M as isObjectEmpty,
-  K as isUrlValid,
-  rt as mergeObjects,
-  bt as objUtils,
-  Ze as parseDate,
-  vt as spicyStyles,
-  St as urlUtils
+  ht as SpicyKatsu,
+  De as SpicyLabel,
+  Fe as SpicyModal,
+  Le as SpicySlider,
+  Ue as SpicyToggle,
+  je as SpicyTooltip,
+  st as appendParamsToUrl,
+  et as currentDate,
+  qe as dateAdd,
+  Xe as dateDiff,
+  Je as dateIsToday,
+  Ze as dateIsTomorrow,
+  Qe as dateIsYesterday,
+  Ge as dateSubtract,
+  pt as dateUtils,
+  tt as deepClone,
+  z as deepMerge,
+  N as formatDate,
+  rt as generateUrl,
+  nt as getHostname,
+  it as getObjectEntries,
+  ot as getObjectKeys,
+  at as getObjectValues,
+  C as isObjectEmpty,
+  D as isUrlValid,
+  lt as mergeObjects,
+  ft as objUtils,
+  Ke as parseDate,
+  ut as ripple,
+  ct as spicyStyles,
+  gt as urlUtils
 };

package/dist/spicykatsu.umd.js

@@ -1 +1 @@
-(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.SpicyKatsu={},i.Vue))})(this,function(i,e){"use strict";const le=["aria-label"],oe={key:0,class:"spicyAlertIcon"},ne={key:1,class:"spicyAlertText"},T={__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,s)=>(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",oe,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",ne,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),e.renderSlot(n.$slots,"default")],42,le)):e.createCommentVNode("",!0)]),_:3}))}},ae=["disabled","aria-label","aria-disabled","tabindex"],ie={key:0,class:"spicyBtnIcon"},re={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:16},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skFontSize":typeof o.fontSize=="number"?`${o.fontSize}px`:o.fontSize,"--skFontWeight":o.fontWeight,"--skBgColor":o.bgColor,"--skTextColor":o.textColor,"--skBorderColor":o.borderColor,"--hoverColor":o.hoverColor}));return(n,s)=>(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:s[0]||(s[0]=y=>n.$emit("click")),role:"button","aria-label":t.text,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0},[t.icon?(e.openBlock(),e.createElementBlock("span",ie,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],14,ae))}},se={class:"spicyCarouselWrapper"},ce=["aria-label"],de={class:"spicyCarouselInfoText"},ye={class:"spicyCarouselTitle"},pe={key:0},ue={key:0,class:"spicyCarouselNavControls"},me=[e.createElementVNode("span",{class:"spicyCarouselPrevBtnIcon"},"<",-1)],fe=[e.createElementVNode("span",{class:"spicyCarouselNextBtnIcon"},">",-1)],ge={key:1,class:"spicyCarouselPagination"},he=["onClick"],ke={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,s=e.computed(()=>({"--width":n.width,"--height":n.height,"--activeColor":n.activeColor})),y=e.computed(()=>n.slides[d.value].title),p=e.computed(()=>r.value.fullScreen===!1?!1:n.fullScreen),d=e.ref(n.initialSlide),r=e.computed(()=>n.slides[d.value]);let c;const u=()=>{d.value=(d.value-1+n.slides.length)%n.slides.length},k=()=>{d.value=(d.value+1)%n.slides.length},m=g=>{d.value=g},b=()=>{clearInterval(c)},C=()=>{n.autoplay&&(c=setInterval(k,n.autoplaySpeed))},S=()=>{window.open(r.value.img)},f=()=>{n.enableImageClick&&S()},w=g=>{l=g.touches[0].clientX,o=g.touches[0].clientY,a=!1},je=g=>{if(!a){const E=g.touches[0].clientX-l,te=g.touches[0].clientY-o;Math.abs(E)>Math.abs(te)&&(E>40?(u(),a=!0):E<-40&&(k(),a=!0))}};return e.onMounted(()=>{n.autoplay&&(c=setInterval(k,n.autoplaySpeed))}),e.onUnmounted(()=>{clearInterval(c)}),(g,E)=>(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("div",{class:"spicyCarouselContainer",style:e.normalizeStyle({...s.value}),onMouseenter:b,onMouseleave:C,onTouchstart:w,onTouchmove:je},[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(${r.value.img})`}),onClick:f},[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",de,e.toDisplayString(t.slides[d.value].text),1)],10,ce)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],6))]),_:3})],36),e.createElementVNode("div",ye,[y.value?(e.openBlock(),e.createElementBlock("h2",pe,e.toDisplayString(r.value.title),1)):e.createCommentVNode("",!0)]),t.showNavigation?(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:u},me),e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:k},fe)])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(te,$)=>(e.openBlock(),e.createElementBlock("button",{key:$,onClick:qe=>m($),class:e.normalizeClass(["spicyCarouselPageBtn",{active:$===d.value}])},[e.createElementVNode("span",ke,e.toDisplayString($+1),1)],10,he))),128))])):e.createCommentVNode("",!0)]))}},F={__name:"SpicyDivider",props:{variant:{type:String,default:"solid",validator:t=>["solid","dashed"].includes(t)},width:{type:String,default:"100%"},height:{type:String,default:"1px"},bgColor:{type:String,default:"var(--skBgColor)"}},setup(t){const l=t,o=e.computed(()=>({width:l.width,height:l.height,borderBottom:`${l.height} ${l.variant} ${l.bgColor}`}));return(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyDivider",style:e.normalizeStyle(o.value),role:"separator","aria-orientation":"horizontal"},[e.renderSlot(a.$slots,"default")],4))}},Se={class:"kbContainer"},be={class:"kbSidebar"},Ce=["onUpdate:modelValue"],Be={class:"spicyKB"},we=["onMousedown","onTouchstart","onClick"],Ee={class:"keyText"},I={__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(u=>u.visible).map(u=>u)),s=l,y=u=>{o.value=u},p=()=>{o.value=null},d=u=>{s("input",u)},r=u=>["Backspace","Tab","Caps","Enter","Shift","Ctrl","Win","Alt","Space","Fn","Ins","Del","Home","End","PgUp","PgDn","NumLock"].includes(u)?`key-${u.toLowerCase()}`:"",c=(u,k,m)=>{const b=S=>["Backspace","Tab","Caps","Enter","Shift","Space"].includes(S),C=S=>["Ctrl","Win","Alt","Fn"].includes(S);return b(u)?"key-wide":C(u)?"key-small":k[m].length===1?"key-fullwidth":""};return(u,k)=>(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(m,b)=>(e.openBlock(),e.createElementBlock("div",{class:"sidebar",key:b},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{type:"checkbox","onUpdate:modelValue":C=>m.visible=C},null,8,Ce),[[e.vModelCheckbox,m.visible]]),e.createTextVNode(" "+e.toDisplayString(m.label),1)])]))),128))]),e.createElementVNode("div",Be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(m,b)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kbSection",{[m.label.toLowerCase().replace(/\s+/g,"")]:!0}]),key:b},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.layout,(C,S)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyKBRow",key:S},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C,f=>(e.openBlock(),e.createElementBlock("button",{key:f,class:e.normalizeClass(["spicyKBKey",[{"is-active":o.value===f},r(f),c(f,m.layout,S)]]),onMousedown:w=>y(f),onMouseup:p,onTouchstart:w=>y(f),onTouchend:p,onClick:w=>d(f)},[e.createElementVNode("span",Ee,e.toDisplayString(f),1)],42,we))),128))]))),128))],2))),128))])]))}},$e={class:"spicyInputLabel"},Ve=["placeholder","aria-label"],De={key:0,class:"spicyInputError"},O={__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},s=()=>{a.value=!1},y=()=>{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",$e,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["spicyInput",t.variant]),"onUpdate:modelValue":d[0]||(d[0]=r=>o.value=r),placeholder:t.placeholder,onInput:n,onBlur:s,onFocus:y,"aria-label":t.label},null,42,Ve),[[e.vModelText,o.value]]),e.renderSlot(p.$slots,"default"),t.error?(e.openBlock(),e.createElementBlock("span",De,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)],2))}},Te={class:"spicyModalHeader"},Ne={class:"spicyModalActions"},Me=["onClick"],x={__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,s=()=>{n("update:visible",!1)},y=p=>{o.closeOnClick&&p.target.classList.contains("spicyModalOverlay")&&s()};return(p,d)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:y},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...a.value})},[e.createElementVNode("header",Te,[e.renderSlot(p.$slots,"spicyModalHeader",{title:t.modalTitle},()=>[e.createTextVNode(e.toDisplayString(t.modalTitle),1)])]),e.renderSlot(p.$slots,"default"),e.createElementVNode("div",Ne,[e.renderSlot(p.$slots,"spicyModalActions"),t.actions.length===0&&t.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:s}," Close ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.actions,r=>(e.openBlock(),e.createElementBlock("button",{class:"spicyModalExtraBtn spicyModalActionBtn",key:r.label,onClick:r.handler},e.toDisplayString(r.label),9,Me))),128))])],4)])):e.createCommentVNode("",!0)}},Fe={class:"spicySlider"},Ie={key:0,class:"spicySliderLabel"},Oe=["min","max","step"],_={__name:"SpicySlider",props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},label:{type:String,default:""},modelValue:{type:Number,default:0}},emits:["update:modelValue"],setup(t,{emit:l}){const o=t,a=l,n=e.ref(o.modelValue);e.watch(()=>o.modelValue,y=>{n.value=y});const s=y=>{a("update:modelValue",Number(y.target.value))};return(y,p)=>(e.openBlock(),e.createElementBlock("div",Fe,[t.label?(e.openBlock(),e.createElementBlock("label",Ie,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{class:"spicySliderInput",type:"range",min:t.min,max:t.max,step:t.step,"onUpdate:modelValue":p[0]||(p[0]=d=>n.value=d),onInput:s},null,40,Oe),[[e.vModelText,n.value]]),e.renderSlot(y.$slots,"default")]))}},xe=["tabindex","aria-label","aria-checked","onKeydown"],_e=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],K={__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,s=()=>{n("update:modelValue",!o.modelValue)};return(y,p)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["spicyToggle",{outlined:t.variant==="outlined","is-active":t.modelValue}],tabindex:y.disabled?-1:0,role:"switch",style:{...a.value},"aria-label":t.label,"aria-checked":t.modelValue.toString(),onClick:s,onKeydown:[e.withKeys(e.withModifiers(s,["prevent"]),["space"]),e.withKeys(e.withModifiers(s,["prevent"]),["enter"])]},y.$attrs),_e,16,xe))}},Ke=["aria-hidden"],Pe={key:0,class:"spicyTooltipIcon"},Le=["aria-label"],ze={key:2,class:"spicyTooltipIcon"},P={__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"}),s=r=>{const c=r.right-window.innerWidth;c>0&&(n.left=`${parseInt(n.left)-c-5}px`),r.left<0&&(n.left="5px")},y={top:(r,c)=>{n.left=`${r.left+(r.width-c.width)/2}px`,n.top=`${r.top-c.height-5}px`},bottom:(r,c)=>{n.left=`${r.left+(r.width-c.width)/2}px`,n.top=`${r.bottom+5}px`},left:(r,c)=>{n.left=`${r.left-c.width-5}px`,n.top=`${r.top+(r.height-c.height)/2}px`},right:(r,c)=>{n.left=`${r.right+5}px`,n.top=`${r.top+(r.height-c.height)/2}px`}},p=()=>{o.value=!0,e.nextTick(()=>{if(a.value&&o.value){const r=a.value.getBoundingClientRect(),c=a.value.querySelector(".spicyTooltip").getBoundingClientRect(),u=y[l.position];u(r,c),s(c)}})},d=()=>{o.value=!1};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:p,onMouseleave:d,ref_key:"host",ref:a},[e.renderSlot(r.$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",Pe,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,Le)):e.createCommentVNode("",!0),t.appendIcon?(e.openBlock(),e.createElementBlock("span",ze,e.toDisplayString(t.appendIcon),1)):e.createCommentVNode("",!0)],12,Ke)):e.createCommentVNode("",!0)],544))}};function V(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 L(t){const[l,o,a]=t.split("-");return new Date(Number(l),Number(o)-1,Number(a))}function z(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 Y(t,l){const o=new Date(t);return o.setDate(t.getDate()-l),o}function U(t){const l=new Date;return t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function W(t){const l=new Date;return l.setDate(l.getDate()-1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function j(t){const l=new Date;return l.setDate(l.getDate()+1),t.getDate()===l.getDate()&&t.getMonth()===l.getMonth()&&t.getFullYear()===l.getFullYear()}function H(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=V(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 Ae=Object.freeze(Object.defineProperty({__proto__:null,currentDate:H,dateAdd:A,dateDiff:z,dateIsToday:U,dateIsTomorrow:j,dateIsYesterday:W,dateSubtract:Y,formatDate:V,parseDate:L},Symbol.toStringTag,{value:"Module"}));function X(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 s in a)Object.prototype.hasOwnProperty.call(a,s)&&(n[s]=o(a[s]));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 R(...t){return h(t[0])?t[0]:Object.assign({},...t)}function q(t){return h(t)?[]:Object.keys(t)}function G(t){return h(t)?[]:Object.values(t)}function J(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 Ye=Object.freeze(Object.defineProperty({__proto__:null,deepClone:X,deepMerge:D,getObjectEntries:J,getObjectKeys:q,getObjectValues:G,isObjectEmpty:h,mergeObjects:R},Symbol.toStringTag,{value:"Module"}));function B(t){try{return new URL(t),!0}catch(l){return console.error("Invalid URL:",l),!1}}function Q(t){return B(t)?new URL(t).hostname:null}function Z(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 v(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 Ue=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:Z,generateUrl:v,getHostname:Q,isUrlValid:B},Symbol.toStringTag,{value:"Module"})),ee=':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)}',We={install(t,l={}){const{useComponents:o=!0,useStyles:a=!0}=l;if(o&&(t.component("SpicyAlert",T),t.component("SpicyBtn",N),t.component("SpicyCarousel",M),t.component("SpicyDivider",F),t.component("SpicyKeyboard",I),t.component("SpicyLabel",O),t.component("SpicyModal",x),t.component("SpicySlider",_),t.component("SpicyToggle",K),t.component("SpicyTooltip",P)),a){const n=document.createElement("style");n.textContent=ee,document.head.appendChild(n)}}};i.SpicyAlert=T,i.SpicyBtn=N,i.SpicyCarousel=M,i.SpicyDivider=F,i.SpicyKatsu=We,i.SpicyKeyboard=I,i.SpicyLabel=O,i.SpicyModal=x,i.SpicySlider=_,i.SpicyToggle=K,i.SpicyTooltip=P,i.appendParamsToUrl=Z,i.currentDate=H,i.dateAdd=A,i.dateDiff=z,i.dateIsToday=U,i.dateIsTomorrow=j,i.dateIsYesterday=W,i.dateSubtract=Y,i.dateUtils=Ae,i.deepClone=X,i.deepMerge=D,i.formatDate=V,i.generateUrl=v,i.getHostname=Q,i.getObjectEntries=J,i.getObjectKeys=q,i.getObjectValues=G,i.isObjectEmpty=h,i.isUrlValid=B,i.mergeObjects=R,i.objUtils=Ye,i.parseDate=L,i.spicyStyles=ee,i.urlUtils=Ue,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.SpicyKatsu={},i.Vue))})(this,function(i,e){"use strict";const G=["aria-label"],J={key:0,class:"spicyAlertIcon"},Q={key:1,class:"spicyAlertText"},B={__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 o=t,l=e.ref(!0),a=()=>{l.value=!1};return e.watch(()=>o.autoClose,n=>{n>0&&setTimeout(()=>{l.value=!1},n)}),(n,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.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",J,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",Q,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),e.renderSlot(n.$slots,"default")],42,G)):e.createCommentVNode("",!0)]),_:3}))}},Z=["disabled","aria-label","aria-disabled","tabindex"],ee={key:0,class:"spicyBtnIcon spicyMDI",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},te=["d"],oe={key:1,class:"spicyBtnIcon"},le={key:2,class:"spicyBtnText"},w={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},disabled:{type:Boolean,default:!1},text:{type:String,default:""},icon:String,mdi:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:16},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:o}){const l=t,a=e.computed(()=>({"--skFontSize":typeof l.fontSize=="number"?`${l.fontSize}px`:l.fontSize,"--skFontWeight":l.fontWeight,"--skBgColor":l.bgColor,"--skTextColor":l.textColor,"--skBorderColor":l.borderColor,"--hoverColor":l.hoverColor})),n=e.computed(()=>!l.text&&(l.icon||l.mdi));return(s,y)=>{const p=e.resolveDirective("spicyRipple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["spicyBtn",{outlined:t.variant==="outlined",disabled:t.disabled,rounded:n.value}]),style:e.normalizeStyle({...a.value}),disabled:t.disabled,onClick:y[0]||(y[0]=c=>s.$emit("click")),role:"button","aria-label":t.text,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0},[t.mdi?(e.openBlock(),e.createElementBlock("svg",ee,[e.createElementVNode("path",{fill:"currentColor",class:"mdi-icon",d:t.mdi},null,8,te)])):e.createCommentVNode("",!0),t.icon&&!t.mdi?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default")],14,Z)),[[p]])}}},ne=["aria-label"],ae={class:"spicyCarouselInfoText"},ie={class:"spicyCarouselTitle"},re={key:0},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"},$={__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:"var(--skPrimaryColor)"},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 o,l,a=!1;const n=t,s=e.computed(()=>({"--width":n.width,"--height":n.height,"--activeColor":n.activeColor})),y=e.computed(()=>n.slides[c.value].title),p=e.computed(()=>r.value.fullScreen===!1?!1:n.fullScreen),c=e.ref(n.initialSlide),r=e.computed(()=>n.slides[c.value]);let d;const f=()=>{c.value=(c.value-1+n.slides.length)%n.slides.length},h=()=>{c.value=(c.value+1)%n.slides.length},Oe=u=>{c.value=u},ze=()=>{clearInterval(d)},Fe=()=>{n.autoplay&&(d=setInterval(h,n.autoplaySpeed))},Pe=()=>{window.open(r.value.img)},Ye=()=>{n.enableImageClick&&Pe()},Ae=u=>{o=u.touches[0].clientX,l=u.touches[0].clientY,a=!1},Le=u=>{if(!a){const S=u.touches[0].clientX-o,q=u.touches[0].clientY-l;Math.abs(S)>Math.abs(q)&&(S>40?(f(),a=!0):S<-40&&(h(),a=!0))}};return e.onMounted(()=>{n.autoplay&&(d=setInterval(h,n.autoplaySpeed))}),e.onUnmounted(()=>{clearInterval(d)}),(u,S)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyCarouselWrapper",style:e.normalizeStyle({...s.value})},[e.createElementVNode("div",{class:"spicyCarouselContainer",onMouseenter:ze,onMouseleave:Fe,onTouchstart:Ae,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:c.value,style:e.normalizeStyle({backgroundImage:`url(${r.value.img})`}),onClick:Ye},[t.slides[c.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyCarouselTextOverlay",{fullScreen:p.value}]),"aria-label":t.slides[c.value].text},[e.createElementVNode("span",ae,e.toDisplayString(t.slides[c.value].text),1)],10,ne)):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"default")],6))]),_:3})],32),e.createElementVNode("div",ie,[y.value?(e.openBlock(),e.createElementBlock("h2",re,e.toDisplayString(r.value.title),1)):e.createCommentVNode("",!0)]),t.showNavigation?(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:f},ce),e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:h},de)])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(q,k)=>(e.openBlock(),e.createElementBlock("button",{key:k,onClick:We=>Oe(k),class:e.normalizeClass(["spicyCarouselPageBtn",{active:k===c.value}])},[e.createElementVNode("span",ue,e.toDisplayString(k+1),1)],10,pe))),128))])):e.createCommentVNode("",!0)],4))}},D={__name:"SpicyDivider",props:{variant:{type:String,default:"solid",validator:t=>["solid","dashed"].includes(t)},width:{type:String,default:"100%"},height:{type:String,default:"1px"},bgColor:{type:String,default:"var(--skBgColor)"}},setup(t){const o=t,l=e.computed(()=>({width:o.width,height:o.height,borderBottom:`${o.height} ${o.variant} ${o.bgColor}`}));return(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyDivider",style:e.normalizeStyle(l.value),role:"separator","aria-orientation":"horizontal"},[e.renderSlot(a.$slots,"default")],4))}},me={class:"spicyInputLabel"},fe=["placeholder","aria-label"],ge={key:0,class:"spicyInputError"},E={__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 o=t,l=e.ref(o.value),a=e.ref(!1),n=p=>{l.value=p.target.value},s=()=>{a.value=!1},y=()=>{a.value=!0};return(p,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[t.variant,{hasValue:l.value||t.value,hasFocus:a.value,hasError:t.error}]])},[e.createElementVNode("label",me,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["spicyInput",t.variant]),"onUpdate:modelValue":c[0]||(c[0]=r=>l.value=r),placeholder:t.placeholder,onInput:n,onBlur:s,onFocus:y,"aria-label":t.label},null,42,fe),[[e.vModelText,l.value]]),e.renderSlot(p.$slots,"default"),t.error?(e.openBlock(),e.createElementBlock("span",ge,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)],2))}},he={class:"spicyModalHeader"},Se={class:"spicyModalActions"},ke=["onClick"],V={__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:o}){const l=t,a=e.computed(()=>({"--width":l.width,"--height":l.height,"--skBorderRadius":l.borderRadius,"--skBgColor":l.bgColor})),n=o,s=()=>{n("update:visible",!1)},y=p=>{l.closeOnClick&&p.target.classList.contains("spicyModalOverlay")&&s()};return(p,c)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:y},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...a.value})},[e.createElementVNode("header",he,[e.renderSlot(p.$slots,"spicyModalHeader",{title:t.modalTitle},()=>[e.createTextVNode(e.toDisplayString(t.modalTitle),1)])]),e.renderSlot(p.$slots,"default"),e.createElementVNode("div",Se,[e.renderSlot(p.$slots,"spicyModalActions"),t.actions.length===0&&t.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:s}," Close ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.actions,r=>(e.openBlock(),e.createElementBlock("button",{class:"spicyModalExtraBtn spicyModalActionBtn",key:r.label,onClick:r.handler},e.toDisplayString(r.label),9,ke))),128))])],4)])):e.createCommentVNode("",!0)}},be={class:"spicySlider"},Ce={key:0,class:"spicySliderLabel"},Be=["min","max","step"],T={__name:"SpicySlider",props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},label:{type:String,default:""},modelValue:{type:Number,default:0}},emits:["update:modelValue"],setup(t,{emit:o}){const l=t,a=o,n=e.ref(l.modelValue);e.watch(()=>l.modelValue,y=>{n.value=y});const s=y=>{a("update:modelValue",Number(y.target.value))};return(y,p)=>(e.openBlock(),e.createElementBlock("div",be,[t.label?(e.openBlock(),e.createElementBlock("label",Ce,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{class:"spicySliderInput",type:"range",min:t.min,max:t.max,step:t.step,"onUpdate:modelValue":p[0]||(p[0]=c=>n.value=c),onInput:s},null,40,Be),[[e.vModelText,n.value]]),e.renderSlot(y.$slots,"default")]))}},we=["tabindex","aria-label","aria-checked","onKeydown"],$e=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],N={__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:o}){const l=t,a=e.computed(()=>({"--skBorderColor":l.borderColor,"--activeColor":l.activeColor})),n=o,s=()=>{n("update:modelValue",!l.modelValue)};return(y,p)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["spicyToggle",{outlined:t.variant==="outlined","is-active":t.modelValue}],tabindex:y.disabled?-1:0,role:"switch",style:{...a.value},"aria-label":t.label,"aria-checked":t.modelValue.toString(),onClick:s,onKeydown:[e.withKeys(e.withModifiers(s,["prevent"]),["space"]),e.withKeys(e.withModifiers(s,["prevent"]),["enter"])]},y.$attrs),$e,16,we))}},De=["aria-hidden"],Ee={key:0,class:"spicyTooltipIcon"},Ve=["aria-label"],Te={key:2,class:"spicyTooltipIcon"},M={__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 o=t,l=e.ref(!1),a=e.ref(null),n=e.reactive({position:"absolute",top:"0px",left:"0px",maxWidth:"175px"}),s=r=>{const d=r.right-window.innerWidth;d>0&&(n.left=`${parseInt(n.left)-d-5}px`),r.left<0&&(n.left="5px")},y={top:(r,d)=>{n.left=`${r.left+(r.width-d.width)/2}px`,n.top=`${r.top-d.height-5}px`},bottom:(r,d)=>{n.left=`${r.left+(r.width-d.width)/2}px`,n.top=`${r.bottom+5}px`},left:(r,d)=>{n.left=`${r.left-d.width-5}px`,n.top=`${r.top+(r.height-d.height)/2}px`},right:(r,d)=>{n.left=`${r.right+5}px`,n.top=`${r.top+(r.height-d.height)/2}px`}},p=()=>{l.value=!0,e.nextTick(()=>{if(a.value&&l.value){const r=a.value.getBoundingClientRect(),d=a.value.querySelector(".spicyTooltip").getBoundingClientRect(),f=y[o.position];f(r,d),s(d)}})},c=()=>{l.value=!1};return(r,d)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:p,onMouseleave:c,ref_key:"host",ref:a},[e.renderSlot(r.$slots,"default"),l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(n),role:"tooltip","aria-hidden":!l.value},[t.prependIcon?(e.openBlock(),e.createElementBlock("span",Ee,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,Ve)):e.createCommentVNode("",!0),t.appendIcon?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(t.appendIcon),1)):e.createCommentVNode("",!0)],12,De)):e.createCommentVNode("",!0)],544))}};function b(t,o){const l={YYYY:()=>t.getFullYear().toString(),MM:()=>(t.getMonth()+1).toString().padStart(2,"0"),DD:()=>t.getDate().toString().padStart(2,"0")};return o.replace(/YYYY|MM|DD/g,a=>l[a]())}function I(t){const[o,l,a]=t.split("-");return new Date(Number(o),Number(l)-1,Number(a))}function x(t,o){const l=Math.abs(o.getTime()-t.getTime());return Math.ceil(l/(1e3*60*60*24))}function O(t,o){const l=new Date(t);return l.setDate(t.getDate()+o),l}function z(t,o){const l=new Date(t);return l.setDate(t.getDate()-o),l}function F(t){const o=new Date;return t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function P(t){const o=new Date;return o.setDate(o.getDate()-1),t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function Y(t){const o=new Date;return o.setDate(o.getDate()+1),t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function A(t="YYYY-MM-DD",o={show:!0,separator:"-"}){if(typeof t!="string"||typeof o!="object"||!o.hasOwnProperty("show")||typeof o.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let a=b(new Date,t);return o.separator&&o.separator!=="-"&&(a=a.replace(/-/g,o.separator)),o.show?{value:a,isVisible:!0}:{value:a,isVisible:!1}}const Ne=Object.freeze(Object.defineProperty({__proto__:null,currentDate:A,dateAdd:O,dateDiff:x,dateIsToday:F,dateIsTomorrow:Y,dateIsYesterday:P,dateSubtract:z,formatDate:b,parseDate:I},Symbol.toStringTag,{value:"Module"}));function L(t){const o=new WeakMap;function l(a){if(m(a)||typeof a!="object")return a;if(o.has(a))return o.get(a);const n=Array.isArray(a)?[]:{};o.set(a,n);for(const s in a)Object.prototype.hasOwnProperty.call(a,s)&&(n[s]=l(a[s]));return n}return l(t)}function C(...t){const o={};return t.forEach(l=>{if(!m(l)){for(const a in l)if(Object.prototype.hasOwnProperty.call(l,a)){const n=l[a];n!==void 0&&(typeof n=="object"&&n!==null&&!Array.isArray(n)?o[a]=C(o[a]||{},n):o[a]=n)}}}),o}function U(...t){return m(t[0])?t[0]:Object.assign({},...t)}function j(t){return m(t)?[]:Object.keys(t)}function _(t){return m(t)?[]:Object.values(t)}function W(t){return m(t)?[]:Object.entries(t)}function m(t){return t===null||typeof t!="object"?!1:Array.isArray(t)?t.length===0:Object.keys(t).length===0}const Me=Object.freeze(Object.defineProperty({__proto__:null,deepClone:L,deepMerge:C,getObjectEntries:W,getObjectKeys:j,getObjectValues:_,isObjectEmpty:m,mergeObjects:U},Symbol.toStringTag,{value:"Module"}));function g(t){try{return new URL(t),!0}catch(o){return console.error("Invalid URL:",o),!1}}function K(t){return g(t)?new URL(t).hostname:null}function R(t,o){if(!g(t))return t;const l=new URL(t);return Object.keys(o).forEach(a=>l.searchParams.append(a,o[a])),l.toString()}function H(t,o,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(t))throw new Error("Invalid hostname: "+t);return o.startsWith("/")||(o="/"+o),o.endsWith("/")&&o.length>1&&(o=o.slice(0,-1)),o==="/"&&(o=""),`${l.toLowerCase()}://${t}${o}`}const Ie=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:R,generateUrl:H,getHostname:K,isUrlValid:g},Symbol.toStringTag,{value:"Module"})),v=':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)}.spicyRipple{position:absolute;border-radius:50%;background:#fff9;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}',X={beforeMount(t){t.style.position="relative",t.style.overflow="hidden",t.addEventListener("click",o=>{const l=document.createElement("span"),a=Math.max(t.clientWidth,t.clientHeight),n=a/2;l.style.width=l.style.height=`${a}px`,l.style.left=`${o.clientX-t.getBoundingClientRect().left-n}px`,l.style.top=`${o.clientY-t.getBoundingClientRect().top-n}px`,l.classList.add("spicyRipple");const s=t.querySelector(".spicyRipple");s&&s.remove(),t.appendChild(l),l.addEventListener("animationend",()=>{l.remove()})})}},xe={install(t,o={}){const{useComponents:l=!0,useStyles:a=!0,useDirectives:n=!0}=o;if(l&&(t.component("SpicyAlert",B),t.component("SpicyBtn",w),t.component("SpicyCarousel",$),t.component("SpicyDivider",D),t.component("SpicyLabel",E),t.component("SpicyModal",V),t.component("SpicySlider",T),t.component("SpicyToggle",N),t.component("SpicyTooltip",M)),a){const s=document.createElement("style");s.textContent=v,document.head.appendChild(s)}n&&t.directive("spicyRipple",X)}};i.SpicyAlert=B,i.SpicyBtn=w,i.SpicyCarousel=$,i.SpicyDivider=D,i.SpicyKatsu=xe,i.SpicyLabel=E,i.SpicyModal=V,i.SpicySlider=T,i.SpicyToggle=N,i.SpicyTooltip=M,i.appendParamsToUrl=R,i.currentDate=A,i.dateAdd=O,i.dateDiff=x,i.dateIsToday=F,i.dateIsTomorrow=Y,i.dateIsYesterday=P,i.dateSubtract=z,i.dateUtils=Ne,i.deepClone=L,i.deepMerge=C,i.formatDate=b,i.generateUrl=H,i.getHostname=K,i.getObjectEntries=W,i.getObjectKeys=j,i.getObjectValues=_,i.isObjectEmpty=m,i.isUrlValid=g,i.mergeObjects=U,i.objUtils=Me,i.parseDate=I,i.ripple=X,i.spicyStyles=v,i.urlUtils=Ie,Object.defineProperty(i,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:var(--skFontSize, 16px);font-weight:var(--skFontWeight, 500);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);background-color:#0009}.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:var(--skPrimaryColor)}.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}.spicyDivider{width:100%;border:none}.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}.spicySlider{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.spicySliderLabel{margin-bottom:5px;font-size:16px}.spicySliderInput{width:100%}.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{display:flex;align-items:center;justify-content:center;text-align:center;gap:6px;padding:8px 16px;background-color:var(--skBgColor, #28292a);border:none;border-radius:4px;color:var(--skTextColor, #ddd);cursor:pointer;font-size:var(--skFontSize, 16px);font-weight:var(--skFontWeight, 500);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{min-width:30px}.mdi-icon{width:30px;height:30px}.spicyBtn.rounded{border-radius:90px}.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);background-color:#0009}.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:var(--skPrimaryColor)}.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{background:var(--activeColor, --skPrimaryColor)}.spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.pointCursor{cursor:pointer}.spicyDivider{width:100%;border: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}.spicySlider{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.spicySliderLabel{margin-bottom:5px;font-size:16px}.spicySliderInput{width:100%}.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

@@ -1,35 +1,36 @@
-{
-  "name": "spicykatsu",
-  "description": "Simple Library for Vue3.",
-  "license": "MIT",
-  "author": "Sato",
-  "private": false,
-  "version": "0.0.38",
-  "files": [
-    "dist/",
-    "package.json",
-    "README.md"
-  ],
-  "type": "module",
-  "main": "dist/spicykatsu.es.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "publish": "npm publish",
-    "docsdev": "vitepress dev docs",
-    "docsbuild": "vitepress build 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",
-    "vue-tsc": "^2.0.13"
-  }
-}
+{
+  "name": "spicykatsu",
+  "description": "Simple Library for Vue3.",
+  "license": "MIT",
+  "author": "Sato",
+  "private": false,
+  "version": "0.0.39",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "dist/spicykatsu.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "publish": "npm publish",
+    "docsdev": "vitepress dev docs",
+    "docsbuild": "vitepress build docs",
+    "docspreview": "vitepress preview docs",
+    "prettier": "prettier --config ./.prettier.json --write ./src"
+  },
+  "dependencies": {
+    "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "@mdi/js": "^7.4.47",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1",
+    "vitepress": "^1.3.3",
+    "vue-tsc": "^2.0.29"
+  }
+}