spicykatsu 0.0.37 → 0.0.38

package/dist/spicykatsu.es.js

@@ -1,4 +1,4 @@
-import { ref as w, watch as Y, openBlock as n, createBlock as R, Transition as E, withCtx as U, 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 W, vModelText as z, mergeProps as Z, withModifiers as N, reactive as ee, nextTick as te } from "vue";
+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";
 const le = ["aria-label"], oe = {
   key: 0,
   class: "spicyAlertIcon"
@@ -31,7 +31,7 @@ const le = ["aria-label"], oe = {
         }, o);
       }
     ), (o, r) => (n(), R(E, { name: "fade" }, {
-      default: U(() => [
+      default: z(() => [
         l.value ? (n(), s("div", {
           key: 0,
           class: k(["spicyAlert", e.variant]),
@@ -76,13 +76,13 @@ const le = ["aria-label"], oe = {
     hoverColor: String,
     borderColor: String,
     // Custom color (if outlined variant)
-    fontSize: { type: [Number, String], default: 14 },
+    fontSize: { type: [Number, String], default: 16 },
     fontWeight: { type: [Number, String], default: 500 }
   },
   emits: ["click"],
   setup(e, { emit: t }) {
     const l = e, a = C(() => ({
-      "--skFontSize": l.fontSize,
+      "--skFontSize": typeof l.fontSize == "number" ? `${l.fontSize}px` : l.fontSize,
       "--skFontWeight": l.fontWeight,
       "--skBgColor": l.bgColor,
       "--skTextColor": l.textColor,
@@ -177,7 +177,7 @@ const le = ["aria-label"], oe = {
           name: "slide",
           mode: "out-in"
         }, {
-          default: U(() => [
+          default: z(() => [
             (n(), s("div", {
               class: k(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
               key: u.value,
@@ -348,7 +348,7 @@ const le = ["aria-label"], oe = {
             }, null, 8, Te), [
               [Q, g.visible]
             ]),
-            W(" " + h(g.label), 1)
+            U(" " + h(g.label), 1)
           ])
         ]))), 128))
       ]),
@@ -418,7 +418,7 @@ const le = ["aria-label"], oe = {
         onFocus: d,
         "aria-label": e.label
       }, null, 42, Pe), [
-        [z, l.value]
+        [W, l.value]
       ]),
       b(y.$slots, "default"),
       e.error ? (n(), s("span", Ve, h(e.error), 1)) : v("", !0)
@@ -460,7 +460,7 @@ const le = ["aria-label"], oe = {
       }, [
         f("header", _e, [
           b(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
-            W(h(e.modalTitle), 1)
+            U(h(e.modalTitle), 1)
           ])
         ]),
         b(y.$slots, "default"),
@@ -483,7 +483,7 @@ const le = ["aria-label"], oe = {
 }, Ye = { class: "spicySlider" }, Ee = {
   key: 0,
   class: "spicySliderLabel"
-}, Ue = ["min", "max", "step"], We = {
+}, ze = ["min", "max", "step"], Ue = {
   __name: "SpicySlider",
   props: {
     min: { type: Number, default: 0 },
@@ -514,13 +514,13 @@ const le = ["aria-label"], oe = {
         step: e.step,
         "onUpdate:modelValue": y[0] || (y[0] = (u) => o.value = u),
         onInput: r
-      }, null, 40, Ue), [
-        [z, o.value]
+      }, null, 40, ze), [
+        [W, o.value]
       ]),
       b(d.$slots, "default")
     ]));
   }
-}, ze = ["tabindex", "aria-label", "aria-checked", "onKeydown"], He = /* @__PURE__ */ f("div", { class: "spicyToggleKnob" }, null, -1), je = [
+}, We = ["tabindex", "aria-label", "aria-checked", "onKeydown"], He = /* @__PURE__ */ f("div", { class: "spicyToggleKnob" }, null, -1), je = [
   He
 ], Xe = {
   __name: "SpicyToggle",
@@ -561,7 +561,7 @@ const le = ["aria-label"], oe = {
         A(N(r, ["prevent"]), ["space"]),
         A(N(r, ["prevent"]), ["enter"])
       ]
-    }, d.$attrs), je, 16, ze));
+    }, d.$attrs), je, 16, We));
   }
 }, Re = ["aria-hidden"], qe = {
   key: 0,
@@ -777,7 +777,7 @@ const St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, 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 = {
   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", We), e.component("SpicyToggle", Xe), e.component("SpicyTooltip", Qe)), a) {
+    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);
     }
@@ -792,7 +792,7 @@ export {
   Ie as SpicyKeyboard,
   Ae as SpicyLabel,
   Ne as SpicyModal,
-  We as SpicySlider,
+  Ue as SpicySlider,
   Xe as SpicyToggle,
   Qe as SpicyTooltip,
   pt as appendParamsToUrl,

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:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:l}){const o=t,a=e.computed(()=>({"--skFontSize":o.fontSize,"--skFontWeight":o.fontWeight,"--skBgColor":o.bgColor,"--skTextColor":o.textColor,"--skBorderColor":o.borderColor,"--hoverColor":o.hoverColor}));return(n,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"],Ae={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",Ae,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 A(t,l){const o=Math.abs(l.getTime()-t.getTime());return Math.ceil(o/(1e3*60*60*24))}function z(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 ze=Object.freeze(Object.defineProperty({__proto__:null,currentDate:H,dateAdd:z,dateDiff:A,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=z,i.dateDiff=A,i.dateIsToday=U,i.dateIsTomorrow=j,i.dateIsYesterday=W,i.dateSubtract=Y,i.dateUtils=ze,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 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"})});

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.spicyAlertIcon{margin-right:8px}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyBtn{padding:8px 16px;background-color:var(--skBgColor, #28292a);border:none;border-radius:4px;color:var(--skTextColor, #ddd);cursor:pointer;font-size:14px;transition:background-color .25s}.spicyBtn.outlined{background-color:var(--skBgColor, transparent);border:2px solid var(--skBorderColor, #515353);color:var(--skTextColor, #ddd)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--skTextColor, #ddd)}.spicyBtnIcon{margin-right:6px}.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{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}

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "author": "Sato",
   "private": false,
-  "version": "0.0.37",
+  "version": "0.0.38",
   "files": [
     "dist/",
     "package.json",