@black-kro/ui - npm Package Compare versions

Comparing version 0.1.45 to 0.1.46

dist/index.common.js

@@ -1,1 +0,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("vue"),o=require("@vueuse/core"),r=(e=require("focus-trap"))&&"object"==typeof e&&"default"in e?e.default:e,n=function(){return(n=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};function a(){for(var e=0,t=0,o=arguments.length;t<o;t++)e+=arguments[t].length;var r=Array(e),n=0;for(t=0;t<o;t++)for(var a=arguments[t],l=0,i=a.length;l<i;l++,n++)r[n]=a[l];return r}var l=Symbol();function i(){return{icons:t.inject(l)}}var s,c=function(){s=o.useLocalStorage("kro.theme","default-dark"),t.watch((function(){return s.value}),(function(){document.documentElement.className="kro-theme__"+s.value}),{immediate:!0})},d={explore:"M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z",home:"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z","arrow-right":"M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z",menu:"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z",settings:"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",external:"M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z",search:"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",success:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z",error:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z",warning:"M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",info:"M10 3H14V14H10V3M10 21V17H14V21H10Z",close:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",question:"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z",invert:"M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z","chevron-down":"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"},u=[{name:"to",description:"Denotes the target route of the link.",type:"string | object",values:"-",default:"undefined"},{name:"exact",description:"Exactly match the link. Without this, '/' will match every route.",type:"bool",values:"-",default:"undefined"},{name:"activeClass",description:"Configure the active CSS class applied when the link is active",type:"string",values:"-",default:"undefined"},{name:"exactActiveClass",description:"Configure the active CSS class applied when the link is active with exact match.",type:"string",values:"-",default:"undefined"},{name:"href",description:"Designates the component as anchor and applies the href attribute.",type:"string",values:"-",default:"undefined"},{name:"target",description:"Designates the target attribute. This should only be applied when using the href prop.",type:"string",values:"-",default:"undefined"}],p={to:{type:[String,Object]},href:String,target:{type:String,default:"_blank"},exact:{type:Boolean,default:!1},activeClass:String,exactActiveClass:String},f=function(e){return{tag:e.to?"router-link":e.href?"a":null,componentProps:t.computed((function(){return e.to?{to:e.to}:e.href?{href:e.href}:{}})),routeData:e}},m={name:"KroIcon",props:{icon:{type:String,required:!0}},setup:function(e){var o=i().icons;return{iconDefinition:t.computed((function(){return o&&o[e.icon]?o[e.icon]:(console.error('Kro UI Error: No Icon Named "'+e.icon+'". Did you register your icon in the kro ui plugin?'),"M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z")}))}}};const v={class:"kro-icon",viewBox:"0 0 24 24"};m.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("svg",v,[t.createVNode("path",{d:n.iconDefinition},null,8,["d"])])},m.__file="src/components/Icon/Icon.vue";var h={name:"KroSpinner"};const k={class:"kro-spinner"};h.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",k)},h.__file="src/components/Spinner/Spinner.vue";var y={name:"KroSquircle"};const g={class:"kro-squircle",viewBox:"0 0 400 400","enable-background":"new 0 0 400 400","xml:space":"preserve"},b=t.createVNode("path",{d:"M 0,200 C 0,0 0,0 200,0 S 400,0 400,200 400,400 200,400 0,400 0,200"},null,-1);y.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("svg",g,[b])},y.__file="src/components/Squircle/Squircle.vue";var _={name:"KroButton",components:{KroIcon:m,KroSpinner:h,KroSquircle:y},props:n(n({},p),{loading:{type:Boolean,default:!1},type:String,primary:Boolean,outline:Boolean,raised:Boolean,icon:String,hideExternalIcon:Boolean,warning:Boolean,error:Boolean,success:Boolean}),setup:function(e){var o=f(e),r=o.tag;return{componentProps:o.componentProps,componentType:t.computed((function(){return r||"button"}))}}};const V={class:"kro-button__spinner"};_.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-squircle"),s=t.resolveComponent("kro-icon"),c=t.resolveComponent("kro-spinner");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.componentType),t.mergeProps({class:{"kro-button":!0,"kro-button--primary":r.primary,"kro-button--outline":r.outline,"kro-button--raised":r.raised,"kro-button--warning":r.warning,"kro-button--success":r.success,"kro-button--error":r.error,"kro-button--is-icon-button":r.icon&&!e.$slots.default},rel:"noreferrer"},n.componentProps,{target:e.href?e.target:""}),{default:t.withCtx(()=>[r.icon&&!e.$slots.default?t.createVNode(i,{key:0,class:"kro-button__squircle"}):t.createCommentVNode("v-if",!0),t.createVNode("span",{class:{"kro-button__content":!0,"kro-button__content--is-loading":r.loading}},[r.icon?t.createVNode(s,{key:0,class:"kro-button__icon",icon:r.icon},null,8,["icon"]):t.createCommentVNode("v-if",!0),t.renderSlot(e.$slots,"default"),!e.href||r.icon&&!e.$slots.default||r.hideExternalIcon?t.createCommentVNode("v-if",!0):t.createVNode(s,{key:1,icon:"external"})],2),t.withDirectives(t.createVNode("span",V,[t.createVNode(c)],512),[[t.vShow,r.loading]])]),_:3},16,["class","target"])},_.__file="src/components/Button/Button.vue";var x={title:"KroButton",description:"A styled button with added functionality",props:a([{name:"loading",description:"Displays a loading indicator over the button",type:"bool",values:"-",default:"false"},{name:"type",description:"The type of the button",type:"string",values:["button","reset","submit"],default:"button"},{name:"primary",description:"Applies a style to the button to indicate that it is a primary button",type:"bool",values:"-",default:"false"},{name:"outline",description:"Give the button an outline style",type:"bool",values:"-",default:"false"},{name:"raised",description:"Apply a shadow to the button",type:"string",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the button",type:"string",values:"-",default:"undefined"},{name:"hideExternalIcon",description:"Hides the external link icon for buttons that are links.",type:"bool",values:"-",default:"false"}],u)},B={name:"KroButtonGroup"};const S={class:"kro-button-group"};B.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",S,[t.renderSlot(e.$slots,"default")])},B.__file="src/components/ButtonGroup/ButtonGroup.vue";var w={name:"KroSwitch",emits:["update:modelValue"],props:{value:String},setup:function(e,t){var o=t.emit,r=t.attrs;return{update:function(t){t.target.checked?e.value?Array.isArray(r.modelValue)&&o("update:modelValue",a(r.modelValue,[e.value])):o("update:modelValue",!0):e.value?Array.isArray(r.modelValue)&&o("update:modelValue",r.modelValue.filter((function(t){return t!=e.value}))):o("update:modelValue",!1)}}}};const C={class:"kro-switch"},N={class:"kro-switch__container"},A={class:"kro-switch__track"},L=t.createVNode("div",{class:"kro-switch__knob"},null,-1),K={key:0,class:"kro-switch__label"};w.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",C,[t.createVNode("div",N,[t.createVNode("input",{class:"kro-switch__input",checked:Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(r.value)>-1:!!e.$attrs.modelValue,type:"checkbox",onChange:o[1]||(o[1]=(...e)=>n.update(...e))},null,40,["checked"]),t.createVNode("div",A,[t.createVNode("div",{class:{"kro-switch__track-active":!0,"kro-switch__track-active--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(r.value)>-1:!!e.$attrs.modelValue}},null,2)]),t.createVNode("div",{class:{"kro-switch__knob-container":!0,"kro-switch__knob-container--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(r.value)>-1:!!e.$attrs.modelValue}},[L],2)]),e.$slots.default?(t.openBlock(),t.createBlock("div",K,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("v-if",!0)])},w.__file="src/components/Switch/Switch.vue";var M={name:"KroTextfield",emits:["update:modelValue"],props:{label:{type:String},type:{type:String,default:"text"},required:{type:Boolean},disabled:{type:Boolean},multiline:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},min:{type:Number},max:{type:Number},maxlength:{type:Number},name:{type:String},id:{type:String},autoResize:{type:Boolean,default:!0},loading:{type:Boolean},success:{type:Boolean},error:{type:Boolean},message:{type:String}},setup:function(e){var o=t.ref(!1),r=t.ref();return{focused:o,runAutoResize:function(){e.autoResize&&r.value&&(r.value.style.height="auto",r.value.style.height=r.value.scrollHeight+"px")},inputRef:r}}};const $={key:2,class:"block pr-2"},D={key:0,class:"pl-4 text-xs font-medium"};M.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-spinner"),s=t.resolveComponent("kro-icon");return t.openBlock(),t.createBlock("div",{class:["kro-textfield",{"kro-textfield--is-textarea":r.multiline}]},[t.createVNode("div",{class:{"kro-textfield__container":!0,"kro-textfield--focused":n.focused,"kro-textfield--has-text":e.$attrs.modelValue,"kro-textfield--is-textarea":r.multiline}},[t.createVNode("label",{class:{"kro-textfield__label":!0,"kro-textfield--focused":n.focused,"kro-textfield--has-text":e.$attrs.modelValue},for:r.id},t.toDisplayString(r.label),11,["for"]),t.createVNode("span",{class:{"kro-textfield__pseudo-label":!0,"kro-textfield--focused":n.focused,"kro-textfield--has-text":e.$attrs.modelValue}},t.toDisplayString(r.label),3),r.multiline?(t.openBlock(),t.createBlock("textarea",{key:1,ref:"inputRef",class:"kro-textfield__input",disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,maxlength:r.maxlength,name:r.name,id:r.id,value:e.$attrs.modelValue,onInput:o[4]||(o[4]=t=>{e.$emit("update:modelValue",t.target.value),n.runAutoResize()}),onFocus:o[5]||(o[5]=e=>n.focused=!0),onBlur:o[6]||(o[6]=e=>n.focused=!1)},null,40,["disabled","required","readonly","autofocus","maxlength","name","id","value"])):(t.openBlock(),t.createBlock("input",{key:0,class:"kro-textfield__input",disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,type:r.type,min:r.min,max:r.max,maxlength:r.maxlength,name:r.name,id:r.id,value:e.$attrs.modelValue,onInput:o[1]||(o[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:o[2]||(o[2]=e=>n.focused=!0),onBlur:o[3]||(o[3]=e=>n.focused=!1)},null,40,["disabled","required","readonly","autofocus","type","min","max","maxlength","name","id","value"])),r.loading||r.success||r.error?(t.openBlock(),t.createBlock("div",$,[r.loading?t.createVNode(i,{key:0,class:"kro-textfield__spinner"}):r.success?t.createVNode(s,{key:1,class:"kro-textfield__success-icon",icon:"success"}):r.error?t.createVNode(s,{key:2,class:"kro-textfield__error-icon",icon:"error"}):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0)],2),e.$slots.default?(t.openBlock(),t.createBlock("div",D,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("v-if",!0)],2)},M.__file="src/components/Textfield/Textfield.vue";var T={name:"KroToolbar",props:{small:Boolean,padded:Boolean,raised:Boolean}};T.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",{class:{"kro-toolbar":!0,"kro-toolbar--small":r.small,"kro-toolbar--raised":r.raised,"kro-toolbar--padded":r.padded}},[t.renderSlot(e.$slots,"default")],2)},T.__file="src/components/Toolbar/Toolbar.vue";var H={name:"KroSurface",props:{padded:{type:Boolean,default:!0},raised:{type:Boolean,default:!0},outline:{type:Boolean,default:!1},icon:String,label:String}};const q={key:0,class:"kro-surface__label-container"},O={key:1,class:"kro-surface__label"};H.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-icon");return t.openBlock(),t.createBlock("div",{class:{"kro-surface":!0,"kro-surface--padded":r.padded,"kro-surface--raised":r.raised,"kro-surface--outline":r.outline}},[r.icon||r.label?(t.openBlock(),t.createBlock("div",q,[r.icon?t.createVNode(i,{key:0,class:"kro-surface__icon",icon:r.icon},null,8,["icon"]):t.createCommentVNode("v-if",!0),r.label?(t.openBlock(),t.createBlock("div",O,t.toDisplayString(r.label),1)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.renderSlot(e.$slots,"default")],2)},H.__file="src/components/Surface/Surface.vue";var P=t.defineComponent({emits:["update:active","activate","deactivate"],props:{active:{type:Boolean,default:!0},escapeDeactivates:{type:Boolean,default:!0},returnFocusOnDeactivate:{type:Boolean,default:!0},allowOutsideClick:{type:Boolean,default:!0},initialFocus:{type:[String,Function],default:void 0},fallbackFocus:{type:[String,Function],default:void 0}},setup:function(e,o){var n,a=o.slots,l=o.emit,i=t.ref(null);return t.onMounted((function(){t.watch((function(){return e.active}),(function(t){var o,a;t&&i.value?(n=r(i.value,{escapeDeactivates:e.escapeDeactivates,allowOutsideClick:function(){return e.allowOutsideClick},returnFocusOnDeactivate:e.returnFocusOnDeactivate,onActivate:function(){l("update:active",!0),l("activate")},onDeactivate:function(){l("update:active",!1),l("deactivate")},initialFocus:"string"==typeof e.initialFocus?e.initialFocus:null!==(a=null===(o=e.initialFocus)||void 0===o?void 0:o.call(e))&&void 0!==a?a:i.value,fallbackFocus:e.fallbackFocus})).activate():null==n||n.deactivate()}),{immediate:!0})})),t.onUnmounted((function(){null==n||n.deactivate(),n=null})),function(){var e,o=null===(e=a.default)||void 0===e?void 0:e.call(a);if(!o||!o.length||o.length>1)throw new Error("FocusTrap requires exactly one child");return t.cloneVNode(o[0],{ref:i})}}}),E=function(){return{disableDocumentScroll:function(){document.documentElement.classList.add("kro-helper--prevent-scroll")},enableDocumentScroll:function(){document.documentElement.classList.remove("kro-helper--prevent-scroll")},disableDocumentSelect:function(){document.documentElement.classList.add("kro-helper--prevent-select")},enableDocumentSelect:function(){document.documentElement.classList.remove("kro-helper--prevent-select")},enableAppFocus:function(){var e;null===(e=document.querySelector("#app"))||void 0===e||e.removeAttribute("tabindex")},disableAppFocus:function(){var e;null===(e=document.querySelector("#app"))||void 0===e||e.setAttribute("tabindex","-1")}}},F={title:"Dialog Title",message:"Dialog Message",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},I={title:"Confirmation Dialog",message:"Dialog Message",icon:"question",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},z=t.ref([]),j=function(e,o,r){var l=n(n({},e),{isOpen:t.ref(!0),resolve:o,reject:r,destroy:function(){z.value.splice(z.value.indexOf(this),1)}});z.value=a(z.value,[l])};var Z={name:"KroDialog",inheritAttrs:!1,emits:["update:modelValue","close","open","close-animation-end"],components:{KroSurface:H,FocusTrap:P}},R=t.defineComponent(n(n({},Z),{props:{persistent:{type:null,required:!1}},setup:function(e,o){var r=o.emit,n=o.attrs,a=E(),l=a.disableDocumentScroll,i=a.enableDocumentScroll,s=t.ref(null),c=!1;t.onUpdated((function(){c||!0!==n.modelValue||(r("update:modelValue",!0),r("open"),l(),window.addEventListener("keydown",u),s.value&&s.value.focus())}));var d=function(){c=!0,r("update:modelValue",!0),r("open"),l(),window.addEventListener("keydown",u),s.value&&s.value.focus()},u=function(t){(function(t){return"keydown"!==(null==t?void 0:t.type)||"Escape"===t.key&&!e.persistent})(t)&&(r("update:modelValue",!1),r("close"),window.removeEventListener("keydown",u),i(),c=!1)};return{dialog:s,onDialogLeaveAnimationComplete:function(){r("close-animation-end")},open:d,close:u,toggle:function(){n.modelValue?u(null):d()}}}}));const W={tabindex:"-1",ref:"dialog",class:"kro-dialog__container p-4 fixed inset-0 grid grid-cols-1 items-center justify-center pointer-events-none"},U={class:"grid grid-row gap-4"},G={key:0,class:"kro-dialog__header text-lg"},X={class:"kro-dialog__body"},Y={key:1,class:"kro-dialog__footer flex flex-row align-middle gap-4"};R.render=function(e,o,r,n,a,l){const i=t.resolveComponent("focus-trap"),s=t.resolveComponent("kro-surface");return t.openBlock(),t.createBlock(t.Fragment,null,[t.renderSlot(e.$slots,"activator",{close:n.close,open:n.open,toggle:n.toggle}),(t.openBlock(),t.createBlock(t.Teleport,{to:"#kro-portal"},[t.createVNode(t.Transition,{appear:"",name:"kro-dialog-scrim"},{default:t.withCtx(()=>[e.$attrs.modelValue?(t.openBlock(),t.createBlock("div",{key:0,onClick:o[1]||(o[1]=()=>{r.persistent||n.close()}),class:"kro-dialog__scrim fixed inset-0"})):t.createCommentVNode("v-if",!0)]),_:1}),t.createVNode("div",W,[t.createVNode(t.Transition,{appear:"",name:"kro-dialog","onAfter-leave":n.onDialogLeaveAnimationComplete},{default:t.withCtx(()=>[e.$attrs.modelValue?t.createVNode(s,t.mergeProps({key:0,class:"kro-dialog pointer-events-auto max-w-xl"},e.$attrs),{default:t.withCtx(()=>[t.createVNode(i,{modelValue:e.$attrs.modelValue,"onUpdate:modelValue":o[2]||(o[2]=t=>e.$attrs.modelValue=t)},{default:t.withCtx(()=>[t.createVNode("div",U,[e.$slots.header?(t.openBlock(),t.createBlock("div",G,[t.renderSlot(e.$slots,"header",{open:n.open,close:n.close,toggle:n.toggle})])):t.createCommentVNode("v-if",!0),t.createVNode("div",X,[t.renderSlot(e.$slots,"default",{open:n.open,close:n.close,toggle:n.toggle})]),e.$slots.footer?(t.openBlock(),t.createBlock("div",Y,[t.renderSlot(e.$slots,"footer",{open:n.open,close:n.close,toggle:n.toggle})])):t.createCommentVNode("v-if",!0)])]),_:3},8,["modelValue"])]),_:1},16):t.createCommentVNode("v-if",!0)]),_:1},8,["onAfter-leave"])],512)]))],64)},R.__file="src/components/Dialog/Dialog.vue";var Q={name:"KroDivider",props:{vertical:Boolean,inset:Boolean,label:String}};const J={key:0};Q.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",{class:["kro-divider",{"kro-divider--vertical":r.vertical,"kro-divider--inset":r.inset}]},[r.label?(t.openBlock(),t.createBlock("span",J,t.toDisplayString(r.label),1)):t.createCommentVNode("v-if",!0)],2)},Q.__file="src/components/Divider/Divider.vue";var ee={name:"KroAlert",components:{KroIcon:m,KroButton:_},emits:["dismissed","show"],props:{type:{type:String,default:"info"},dismissible:{type:Boolean,default:!1},tag:{type:String,default:"div"},icon:String,outline:{type:Boolean,default:!1}},setup:function(e,o){var r=o.emit,n=t.ref(!1);return{iconName:t.computed((function(){var t=e.type,o=e.icon;return o||("warning"===t?"warning":"info"===t?"info":"error"===t?"error":"success"===t?"success":null)})),isHidden:n,hide:function(){r("dismissed"),n.value=!0},show:function(){r("show"),n.value=!1}}}};const te={class:"kro-alert__icon"},oe={key:0};ee.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-icon"),s=t.resolveComponent("kro-button");return t.withDirectives((t.openBlock(),t.createBlock(t.resolveDynamicComponent(r.tag),{class:{"kro-alert":!0,"kro-alert--error":"error"===r.type,"kro-alert--info":"info"===r.type,"kro-alert--warning":"warning"===r.type,"kro-alert--success":"success"===r.type,"kro-alert--outline":r.outline,"kro-alert--has-icon":n.iconName,"kro-alert--is-dismissible":r.dismissible}},{default:t.withCtx(()=>[t.createVNode("div",te,[n.iconName?t.createVNode(i,{key:0,icon:n.iconName},null,8,["icon"]):t.createCommentVNode("v-if",!0)]),t.createVNode("div",null,[t.renderSlot(e.$slots,"default")]),r.dismissible?(t.openBlock(),t.createBlock("div",oe,[t.createVNode(s,{onClick:n.hide,icon:"close"},null,8,["onClick"])])):t.createCommentVNode("v-if",!0)]),_:3},8,["class"])),[[t.vShow,!n.isHidden]])},ee.__file="src/components/Alert/Alert.vue";var re=t.defineComponent(n(n({},{name:"ComposableDialogs"}),{setup:function(){return{instances:z}}}));re.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-icon"),s=t.resolveComponent("kro-button"),c=t.resolveComponent("kro-dialog");return t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(n.instances,e=>(t.openBlock(),t.createBlock("div",null,[t.createVNode(c,{modelValue:e.isOpen,"onUpdate:modelValue":t=>e.isOpen=t,"onClose-animation-end":t=>e.destroy(),class:{"kro-composable-dialog--centered":"centered"===e.style}},{header:t.withCtx(()=>[t.createVNode("div",{class:["flex items-center",{"flex-col":"centered"===e.style}]},[e.icon?t.createVNode(i,{key:0,style:{color:e.iconColor?e.iconColor:""},class:[{"kro-composable-dialog__icon--large":"centered"===e.style},"mr-4"],icon:e.icon},null,8,["style","class","icon"]):t.createCommentVNode("v-if",!0),t.createTextVNode(" "+t.toDisplayString(e.title),1)],2)]),default:t.withCtx(()=>[t.createVNode("div",{class:{"text-center":"centered"===e.style}},t.toDisplayString(e.message),3)]),footer:t.withCtx(({close:o})=>[t.createVNode("div",{class:["flex flex-row flex-1 gap-4",{"justify-end":"centered"!==e.style,"justify-center":"centered"===e.style}]},[e.rejectButton.hidden?t.createCommentVNode("v-if",!0):t.createVNode(s,t.mergeProps({key:0},e.rejectButton.attributes,{onClick:()=>{e.reject(),o()}}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.rejectButton.text),1)]),_:2},1040,["onClick"]),e.resolveButton.hidden?t.createCommentVNode("v-if",!0):t.createVNode(s,t.mergeProps({key:1},e.resolveButton.attributes,{onClick:()=>{e.resolve(),o()}}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.resolveButton.text),1)]),_:2},1040,["onClick"])],2)]),_:2},1032,["modelValue","onUpdate:modelValue","onClose-animation-end","class"])]))),256)},re.__file="src/components/App/components/ComposableDialogs.vue";var ne={name:"KroApp",components:{ComposableDialogs:re}};const ae={class:"kro-app"},le={class:"kro-app__content"};ne.render=function(e,o,r,n,a,l){const i=t.resolveComponent("composable-dialogs");return t.openBlock(),t.createBlock("div",ae,[t.createVNode("div",le,[t.renderSlot(e.$slots,"default")]),t.createVNode(i)])},ne.__file="src/components/App/App.vue";var ie={name:"KroListItem",props:n(n({},p),{tag:{type:String,default:"div"},href:{type:String,default:void 0},to:{type:[String,Object]}}),setup:function(e){var o=f(e),r=o.tag;return{componentProps:o.componentProps,componentType:t.computed((function(){return r||"div"}))}}};const se={key:0,class:"kro-list-item__icon"},ce={class:"kro-list-item__content"},de={class:"kro-list-item__title"},ue={key:0,class:"kro-list-item__subtitle"},pe={key:1,class:"kro-list-item__action"};ie.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.componentType),t.mergeProps(n.componentProps,{class:"kro-list-item"}),{default:t.withCtx(()=>[e.$slots.icon?(t.openBlock(),t.createBlock("div",se,[t.renderSlot(e.$slots,"icon")])):t.createCommentVNode("v-if",!0),t.createVNode("div",ce,[t.createVNode("span",de,[t.renderSlot(e.$slots,"default")]),e.$slots.subtitle?(t.openBlock(),t.createBlock("span",ue,[t.renderSlot(e.$slots,"subtitle")])):t.createCommentVNode("v-if",!0)]),e.$slots.action?(t.openBlock(),t.createBlock("div",pe,[t.renderSlot(e.$slots,"action")])):t.createCommentVNode("v-if",!0)]),_:3},16)},ie.__file="src/components/List/ListItem.vue";var fe={title:"KroListItem",description:"",props:a([{name:"tag",description:"",type:"string",values:"-",default:"div"}],u),slots:[{name:"#icon",description:"Item icon slot",props:[]},{name:"#subtitle",description:"Item subtitle slot",props:[]},{name:"#action",description:"Action on the right side of the item",props:[]},{name:"#default",description:"Main text of the item",props:[]}]},me={name:"KroMenu",emits:["open","close"],props:{offsetX:{type:Boolean,default:!1},offsetY:{type:Boolean,default:!1},left:Boolean,right:Boolean,top:Boolean,bottom:Boolean},setup:function(e,o){var r=o.emit,n=t.ref(!1),a=t.ref(null),l=t.ref(null),i=t.reactive({"kro-menu__content--y-bottom":!1,"kro-menu__content--y-bottom-offset":!1,"kro-menu__content--y-top":!1,"kro-menu__content--y-top-offset":!1,"kro-menu__content--x-left":!1,"kro-menu__content--x-left-offset":!1,"kro-menu__content--x-right":!1,"kro-menu__content--x-right-offset":!1}),s=function(){Object.keys(i).forEach((function(e){return i[e]=!1}));var t=e.offsetX,o=e.offsetY,s=e.left,c=e.right,d=e.top,u=e.bottom,p=function(e,t,o){if(!e.value||!t.value)return{canFit:{top:!1,bottom:!1,left:!1,right:!1}};var r=window.innerWidth,n=window.innerHeight,a=e.value.getBoundingClientRect(),l=t.value,i=o.offsetX?a.width:0,s=o.offsetY?a.height:0;return{canFit:{bottom:l.offsetHeight+a.top+s<n,top:l.offsetHeight<a.top,left:l.offsetTop<a.left,right:l.offsetWidth+a.left+i<r}}}(a,l,{offsetX:t,offsetY:o}).canFit;p.top&&d?i["kro-menu__content--y-top"+(o?"-offset":"")]=!0:p.bottom&&u||p.bottom?i["kro-menu__content--y-bottom"+(o?"-offset":"")]=!0:p.top&&(i["kro-menu__content--y-top"+(o?"-offset":"")]=!0),p.left&&s?i["kro-menu__content--x-left"+(t?"-offset":"")]=!0:p.right&&c||p.right?i["kro-menu__content--x-right"+(t?"-offset":"")]=!0:p.left&&(i["kro-menu__content--x-left"+(t?"-offset":"")]=!0),r("open"),n.value=!0},c=function(){r("close"),n.value=!1};return{isOpen:n,classes:i,open:s,close:c,toggle:function(){n.value?c():s()},menu:l,container:a}}};const ve={ref:"container",class:"kro-menu"};me.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",ve,[t.createVNode("div",{onClick:o[1]||(o[1]=(...e)=>n.close(...e)),class:["kro-menu__scrim",{"kro-menu__scrim--is-open":n.isOpen}]},null,2),t.renderSlot(e.$slots,"activator",{open:n.open}),t.createVNode("div",{ref:"menu",class:["kro-menu__content",{...n.classes,"kro-menu__content--is-open":n.isOpen}]},[t.renderSlot(e.$slots,"default")],2)],512)},me.__file="src/components/Menu/Menu.vue";var he={name:"KroAvatar",props:{src:String,color:String,small:Boolean,large:Boolean}};he.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",{class:["kro-avatar",{"kro-avatar__small":r.small,"kro-avatar__large":r.large}]},[r.src?(t.openBlock(),t.createBlock("img",{key:0,src:r.src,alt:""},null,8,["src"])):r.color?(t.openBlock(),t.createBlock("div",{key:1,style:{backgroundColor:r.color},class:"kro-avatar__color-circle"},null,4)):t.createCommentVNode("v-if",!0)],2)},he.__file="src/components/Avatar/Avatar.vue";var ke={name:"KroProgressBar",props:{stream:Boolean,indeterminate:Boolean,rounded:{type:Boolean,default:!0},value:{type:Number,default:0},bufferValue:{type:Number,default:100}}};const ye=t.createVNode("div",{class:"kro-progress-bar__stream"},[t.createVNode("div",{class:"kro-progress-bar__stream-content"})],-1),ge=t.createVNode("div",{class:"kro-progress-bar__indeterminate"},null,-1);ke.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",{class:{"kro-progress-bar":!0,"kro-progress-bar--is-stream":r.stream,"kro-progress-bar--is-indeterminate":r.indeterminate,"kro-progress-bar--rounded":r.rounded}},[ye,t.createVNode("div",{class:"kro-progress-bar__buffer",style:{"--kro-progress-bar-buffer-value":r.bufferValue-100+"%"}},null,4),t.createVNode("div",{class:"kro-progress-bar__progress",style:{"--kro-progress-bar-value":r.value-100+"%"}},null,4),ge],2)},ke.__file="src/components/ProgressBar/ProgressBar.vue";var be={name:"KroLayout",components:{KroToolbar:T},emits:["update:is-drawer-open","update:is-drawer-hidden"]},_e=t.defineComponent(n(n({},be),{props:{absolute:{type:Boolean,required:!1},responsiveWidth:{type:Number,required:!1},temporary:{type:Boolean,required:!1},right:{type:Boolean,required:!1},toolbarHeight:{type:String,required:!1},clipToolbar:{type:Boolean,required:!1},mini:{type:Boolean,required:!1}},setup:function(e,r){var n=t.ref(!!r.slots.drawer),a=o.useMediaQuery("(max-width: "+(e.responsiveWidth||768)+"px)"),l=t.computed((function(){return e.mini?"6rem":"16rem"})),i=t.computed((function(){return a.value||e.temporary||!n.value?"0":"var(--drawerWidth)"})),s=t.computed((function(){return e.toolbarHeight||"4rem"})),c=t.computed((function(){return e.clipToolbar?"var(--contentOffsetLeft)":"0"})),d=t.computed((function(){return e.clipToolbar||a.value||e.temporary?"0":"var(--toolbarHeight)"}));return t.onUpdated((function(){n.value=!!r.slots.drawer})),t.watchEffect((function(){r.emit("update:is-drawer-open",!(a.value||e.temporary)),r.emit("update:is-drawer-hidden",a.value||e.temporary)})),t.useCssVars((function(e){return{drawerWidth:l,toolbarHeight:s,toolbarLeftOffset:c,drawerOffsetTop:d,contentOffsetLeft:i}})),{hasDrawer:n,isSmallScreen:a,drawerWidth:l,contentOffsetLeft:i,toolbarHeight:s,toolbarLeftOffset:c,drawerOffsetTop:d}}}));const Ve={class:"kro-layout"},xe={key:2,class:"kro-layout__toolbar"},Be={class:"kro-layout__container"},Se={key:0,class:"kro-layout__content"},we={key:1,class:"kro-layout__footer"};_e.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",Ve,[e.$slots.drawer?(t.openBlock(),t.createBlock("div",{key:0,class:["kro-layout__scrim",{"kro-layout__scrim--is-open":e.$attrs["is-drawer-open"]&&(n.isSmallScreen||r.temporary)}],onClick:o[1]||(o[1]=t=>e.$emit("update:is-drawer-open",!1))},null,2)):t.createCommentVNode("v-if",!0),e.$slots.drawer?(t.openBlock(),t.createBlock("div",{key:1,class:["kro-layout__drawer",{"kro-layout__drawer--hidden":n.isSmallScreen||r.temporary,"kro-layout__drawer--is-open":e.$attrs["is-drawer-open"]}]},[t.renderSlot(e.$slots,"drawer")],2)):t.createCommentVNode("v-if",!0),e.$slots.toolbar?(t.openBlock(),t.createBlock("div",xe,[t.renderSlot(e.$slots,"toolbar")])):t.createCommentVNode("v-if",!0),t.createVNode("div",Be,[e.$slots.default?(t.openBlock(),t.createBlock("div",Se,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("v-if",!0),e.$slots.footer?(t.openBlock(),t.createBlock("div",we,[t.renderSlot(e.$slots,"footer")])):t.createCommentVNode("v-if",!0)])])},_e.__file="src/components/Layout/Layout.vue";var Ce={name:"KroNavigation",emits:["update:modelValue"],props:{temporary:{type:Boolean,default:!1}},setup:function(e,t){var o=t.emit;return{open:function(){return o("update:modelValue",!0)},close:function(){return o("update:modelValue",!1)}}}};const Ne={class:"kro-navigation"};Ce.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",Ne,[t.createVNode("div",{class:{"kro-navigation__scrim":!0,"kro-navigation--is-open":e.$attrs.modelValue,"kro-navigation--is-temporary":r.temporary},onClick:o[1]||(o[1]=(...e)=>n.close(...e))},null,2),t.createVNode("div",{class:{"kro-navigation__content":!0,"kro-navigation--is-open":e.$attrs.modelValue,"kro-navigation--is-temporary":r.temporary}},[t.renderSlot(e.$slots,"default",{close:n.close,open:n.open})],2)])},Ce.__file="src/components/Navigation/Navigation.vue";var Ae={name:"KroSelect",emits:["update:modeValue"],props:{label:{type:String},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},name:{type:String},id:{type:String}},setup:function(e,o){var r=o.attrs,n=t.ref(!1),a=t.ref(null);return t.onMounted((function(){a.value&&Array.from(a.value.options).forEach((function(e){e.value===r.modelValue&&(e.selected=!0)}))})),{focused:n,select:a}}};const Le={class:"kro-select"},Ke={class:"kro-select__hidden-label"},Me=t.createVNode("option",{selected:"",hidden:""},null,-1);Ae.render=function(e,o,r,n,a,l){const i=t.resolveComponent("kro-icon");return t.openBlock(),t.createBlock("div",Le,[t.createVNode("div",{class:{"kro-select__container":!0,"kro-select--focused":n.focused,"kro-select--has-text":e.$attrs.modelValue}},[t.createVNode("label",{class:{"kro-select__label":!0,"kro-select--focused":n.focused,"kro-select--has-text":e.$attrs.modelValue},for:r.id},t.toDisplayString(r.label),11,["for"]),t.createVNode("div",Ke,t.toDisplayString(r.label),1),t.createVNode("span",{class:{"kro-select__pseudo-label":!0,"kro-select--focused":n.focused,"kro-select--has-text":e.$attrs.modelValue}},t.toDisplayString(r.label),3),t.createVNode("select",{class:"kro-select__input",ref:"select",disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,name:r.name,id:r.id,value:e.$attrs.modelValue,onChange:o[1]||(o[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:o[2]||(o[2]=e=>n.focused=!0),onBlur:o[3]||(o[3]=e=>n.focused=!1)},[Me,t.renderSlot(e.$slots,"default")],40,["disabled","required","readonly","autofocus","name","id","value"]),t.createVNode(i,{class:"kro-select__icon",icon:"chevron-down"})],2)])},Ae.__file="src/components/Select/Select.vue";var $e={name:"KroSlider",emits:["update:modelValue"],props:{disabled:{type:Boolean,default:!1},step:{type:Number,default:1},ticks:{default:!1,type:[Boolean,String]},min:{type:Number,default:0},max:{type:Number,default:100}},setup:function(e,r){var n=r.emit,a=r.attrs,l=t.ref(),i=t.ref(),s=function(e){var r=o.useMouseInElement(e),n=r.x,a=r.elementPositionX,l=r.elementWidth,i=t.computed((function(){return Math.min(Math.max(0,n.value-a.value),l.value)/(l.value||1)}));return{elementWidth:l,targetPercentage:i}}(l).targetPercentage,c=function(e){var r=t.ref(0),n=t.ref(0),a=t.ref(0),l=t.ref(0),i=function(e){var t=e.getBoundingClientRect(),o=t.left,i=t.top,s=t.width,c=t.height;r.value=s,n.value=c,a.value=o,l.value=i};t.watch(e,(function(e){var t=e||document.body;i(t)}));var s=o.useThrottleFn((function(){var t=e.value||document.body;i(t)}),250);return o.useEventListener("resize",s),{elementWidth:r,elementHeight:n,elementLeft:a,elementTop:l}}(l).elementWidth,d=t.ref(!1),u=E(),p=u.disableDocumentSelect,f=u.enableDocumentSelect,m=function(){d.value=!1,f(),removeEventListener("touchcancel",m),removeEventListener("touchend",m),removeEventListener("mouseup",m)},v=function(){d.value=!0,p(),addEventListener("touchcancel",m),addEventListener("touchend",m),addEventListener("mouseup",m)},h=t.computed((function(){return c.value/Math.ceil((e.max-e.min)/e.step)})),k=function(){n("update:modelValue",Math.max(e.min,Math.min(e.max,a.modelValue-e.step)))},y=function(){n("update:modelValue",Math.max(e.min,Math.min(e.max,a.modelValue+e.step)))};return t.onMounted((function(){n("update:modelValue",Math.max(e.min,Math.min(a.modelValue||0,e.max)))})),t.watchEffect((function(){d.value&&n("update:modelValue",Math.max(e.min,Math.min(Math.round(s.value*(e.max-e.min)/e.step)*e.step+e.min,e.max)))})),{knobRef:i,sliderRef:l,targetPercentage:s,enableEditing:v,trackSpacing:h,isEditing:d,onSliderClick:function(){setTimeout((function(){i.value.focus()}),0),v()},incrementValue:function(e){"ArrowLeft"===e.key&&k(),"ArrowRight"===e.key&&y()},subtractValue:k,addValue:y}}};const De={class:"kro-slider__track-container"},Te={ref:"sliderRef",class:"kro-slider__track"},He=t.createVNode("div",{class:"kro-slider__progress"},null,-1),qe={class:"kro-slider__knob-container"},Oe=t.createVNode("div",{class:"kro-slider__thumb"},null,-1),Pe={key:0},Ee={key:1};$e.render=function(e,o,r,n,a,l){return t.openBlock(),t.createBlock("div",{class:"kro-slider",onTouchstartPassive:o[2]||(o[2]=(...e)=>n.enableEditing(...e)),onMousedown:o[3]||(o[3]=(...e)=>n.onSliderClick(...e)),style:{"--kro-slider-progress":(e.$attrs.modelValue-r.min)/(r.max-r.min)*100-100+"%"}},[t.createVNode("div",De,[t.createVNode("div",Te,[r.ticks?(t.openBlock(),t.createBlock("div",{key:0,style:{"--kro-slider-tick-spacing":n.trackSpacing+"px"},class:"kro-slider__markers"},null,4)):t.createCommentVNode("v-if",!0),He],512),t.createVNode("div",qe,[t.createVNode("button",{ref:"knobRef",class:"kro-slider__knob",tabindex:"0",onKeydown:o[1]||(o[1]=(...e)=>n.incrementValue(...e))},null,544),t.createVNode("div",{class:["kro-slider__preview-value",{"kro-slider__preview-value--is-active":n.isEditing}]},[Oe,e.$slots.thumb?(t.openBlock(),t.createBlock("span",Ee,[t.renderSlot(e.$slots,"thumb",{value:e.$attrs.modelValue})])):(t.openBlock(),t.createBlock("span",Pe,t.toDisplayString(e.$attrs.modelValue),1))],2)])])],36)},$e.__file="src/components/Slider/Slider.vue";var Fe,Ie,ze={mounted:function(){console.log("Ok Tooltip")}},je=(Fe=Object.freeze({__proto__:null,KroButton:_,KroButtonGroup:B,KroIcon:m,KroSpinner:h,KroSquircle:y,KroSwitch:w,KroTextfield:M,KroToolbar:T,KroDialog:R,KroSurface:H,KroDivider:Q,KroAlert:ee,KroApp:ne,KroListItem:ie,KroMenu:me,KroAvatar:he,KroProgressBar:ke,KroLayout:_e,KroNavigation:Ce,KroSelect:Ae,KroSlider:$e}),Ie=Object.freeze({__proto__:null,Tooltip:ze}),{install:function(e,t){var o=n({},d);if(t&&t.hasOwnProperty("icons")&&(o=n(n({},o),t.icons)),Fe)for(var r in Fe){var a=Fe[r];a&&e.component(r,a)}if(Ie)for(var r in Ie){var i=Ie[r];i&&e.directive(r,i)}e.provide(l,o),c()}}),Ze=Object.freeze({__proto__:null,ButtonMetadata:x,ButtonGroupMetadata:{title:"KroButtonGroup",description:"A container for multiple related buttons"},IconMetadata:{title:"KroIcon",description:"Display an SVG icon",props:[{name:"icon",description:"The name of the icon to display",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-icon-size",description:"The size of the icon",type:"size",default:"1.5rem"}]},SpinnerMetadata:{title:"KroSpinner",description:"A loading indicator",css:[{name:"--kro-spinner-size",description:"Sets the size of the spinner",type:"size",default:"2.5rem"},{name:"--kro-spinner-thickness",description:"Sets the thickness of the spinner",type:"size",default:"0.35rem"},{name:"--kro-spinner-color",description:"Sets the color of the spinner",type:"size",default:"--kro-foreground"}]},SquircleMetadata:{title:"KroSquircle",description:"A component used for visual effect."},SwitchMetadata:{title:"KroSwitch",description:"",props:[{name:"v-model",description:"The value of the switch",type:"bool",values:"-",default:"undefined"}],css:[{name:"--kro-switch-track-background",description:"The color of the track background.",type:"color",default:"--kro-background-secondary"},{name:"--kro-switch-track-active-background",description:"The track color when the switch is set to true.",type:"color",default:"--kro-primary-darken"},{name:"--kro-switch-knob-color",description:"The color of the switch knob.",type:"color",default:"--kro-primary"},{name:"--kro-switch-knob-shadow",description:"The shadow of the switch knob.",type:"shadow",default:"--kro-shadow"}]},TextfieldMetadata:{title:"KroTextfield",description:"",props:[{name:"v-model",description:"The value of the textfield",type:"string",values:"-",default:"undefined"},{name:"label",description:"The textfield label",type:"string",values:"-",default:"undefined"},{name:"type",description:"The textfield type",type:"string",values:"text | tel | email | password | url | search",default:"text"},{name:"required",description:"Marks the textfield as required",type:"bool",values:"-",default:"false"},{name:"disabled",description:"Marks the textfield as disabled",type:"bool",values:"-",default:"false"},{name:"multiline",description:"Makes the textfield into a textarea than can support multiple lines.",type:"bool",values:"-",default:"false"},{name:"readonly",description:"Marks the textfield as readonly",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"Autofocuses the textfield when the component loads.",type:"bool",values:"-",default:"false"},{name:"min",description:"Sets the min value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"max",description:"Sets the max value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"maxlength",description:"Sets the max amount of characters that the textfield will accept",type:"number",values:"-",default:"undefined"},{name:"name",description:"Sets the name of the textfield.",type:"string",values:"-",default:"undefined"},{name:"id",description:"Sets the id of the textfield",type:"string",values:"-",default:"undefined"},{name:"autoresize",description:"If the textfield is multiline, then this will autoresize the textfield vertically as the user types.",type:"bool",values:"-",default:"true"}],css:[{name:"--kro-textfield-border-color",description:"The border color of the textifled",type:"color",default:"--kro-divider"},{name:"--kro-textifled-focused-border-color",description:"The border color of the textifled when it is focused",type:"color",default:"--kro-primary"}]},ToolbarMetadata:{title:"KroToolbar",description:"",props:[{name:"small",description:"Makes the height of the toolbar smaller.",type:"bool",values:"-",default:"false"},{name:"padded",description:"Adds padding to the toolbar.",type:"bool",values:"-",default:"false"},{name:"raised",description:"Adds a shadow to the toolbar.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-toolbar-height",description:"The height of the toolbar",type:"size",default:"4rem"},{name:"--kro-toolbar-background",description:"The background color of the toolbar",type:"color",default:"--kro-background-secondary"},{name:"--kro-toolbar-shadow",description:"The shadow of a raised toolbar",type:"color",default:"--kro-background-shadow"}]},DialogMetadata:{title:"KroDialog",description:"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.",props:[{name:"v-model",description:"Contorls the open state of the dialog",type:"bool",values:"-",default:"false"},{name:"persistent",description:"If enabled, the dialog can only be closed by the close button",type:"bool",values:"-",default:"false"}],events:[{name:"@open",description:"Fired when the dialog is opened",parameters:[]},{name:"@close",description:"Fired when the dialog is closed",parameters:[]}],slots:[{name:"#activator",description:"Slots the button that can be used to open the dialog",props:["open","close","toggle"]},{name:"#title",description:"Slot for the title of the dialog",props:["open","close","toggle"]},{name:"#controls",description:"Slot for the controls of the dialog",props:["open","close","toggle"]},{name:"#default",description:"Slot for the content of the dialog",props:[]}]},SurfaceMetadata:{title:"KroSurface",description:"A surface that contains content and can have a label",props:[{name:"padded",description:"Adds a padding to the container.",type:"bool",values:"-",default:"true"},{name:"raised",description:"Adds a shadow to the container.",type:"bool",values:"-",default:"true"},{name:"outline",description:"Adds an outline to the container.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the container.",type:"bool",values:"-",default:"undefined"},{name:"label",description:"Adds a label to the container.",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-surface-background",description:"",type:"color",default:"--kro-background-secondary"},{name:"--kro-surface-outline",description:"Sets the outline color of and outlined container",type:"color",default:"--kro-divider"},{name:"--kro-surface-shadow",description:"Sets the shadow of a raised container",type:"shadow",default:"--kro-shadow"}]},DividerMetadata:{title:"KroDivider",description:"",props:[{name:"vertical",description:"Makes the divider a vertical divider",type:"bool",values:"-",default:"false"}]},AlertMetadata:{title:"KroAlert",description:"",props:[{name:"type",description:"Defines the type of alert that is shown.",type:"string",values:["info","error","warning","success"],default:"info"},{name:"dismissible",description:"Shows a close icon on the alert allowing the user to dismiss the alert.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Sets the icon that is displayed on the alert.",type:"string",values:"-",default:"undefined"},{name:"tag",description:"Sets the root tage of the alert",type:"string",values:"-",default:"div"},{name:"outline",description:"Give the alert an outline style.",type:"bool",values:"-",default:"false"}],events:[{name:"@dismissed",description:"Fires when the alert is dismissed",parameters:[]},{name:"@show",description:"Fires when the alert is shown after being dismissed",parameters:[]}],slots:[{name:"#default",description:"Slot for the text content of the alert.",props:[]}]},AppMetadata:{title:"KroApp",description:""},ListMetadata:fe,MenuMetadata:{title:"KroMenu",description:"",props:[{name:"offsetX",description:"Offsets the menu horizontally so it is not covering the activator element.",type:"bool",values:"-",default:"false"},{name:"offsetY",description:"Offsets the menu vertically so it is not coverting the activator element",type:"bool",values:"-",default:"false"},{name:"left",description:"Positions the menu to open to the left of the activator.",type:"bool",values:"-",default:"false"},{name:"right",description:"Positions the menu to open to the right of the activator.",type:"bool",values:"-",default:"false"},{name:"top",description:"Positions the menut to open above the activator.",type:"bool",values:"-",default:"false"},{name:"bottom",description:"Positions the element to open below the activator.",type:"bool",values:"-",default:"false"}],slots:[{name:"#default",description:"",props:[]}],css:[{name:"--kro-menu-min-width",description:"",type:"size",default:"200px"},{name:"--kro-menu-max-width",description:"",type:"size",default:"300px"}]},AvatarMetadata:{title:"KroAvatar",description:"",props:[{name:"src",description:"Sets the image of the avatar",type:"string",values:"-",default:"undefined"},{name:"color",description:"Sets the color of the avatar.",type:"string",values:"-",default:"undefined"},{name:"small",description:"Makes the avatar smaller.",type:"bool",values:"-",default:"false"},{name:"large",description:"Makes the avatar larger.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-avatar-size",description:"",default:"3rem",type:"CSS Size Unit"},{name:"--kro-avatar-radius",description:"",default:"50%",type:"CSS Size Unit"}]},ProgressBarMetadata:{title:"KroProgressBar",description:"",props:[{name:"stream",description:"Display a speical style to the progress bar to indicate it is a stream",type:"bool",values:"-",default:"false"},{name:"indeterminate",description:"Display a special style to the progress bar to indicate that is indeterminate.",type:"",values:"-",default:"false"},{name:"rounded",description:"Applies a rounded style to the progress bar.",type:"bool",values:"-",default:"true"},{name:"value",description:"Sets the value of the progress bar.",type:"number",values:"-",default:"0"},{name:"bufferValue",description:"Sets the buffer value of the progress bar.",type:"number",values:"-",default:"100"}],css:[]},LayoutMetadata:{title:"KroLayout",description:"",props:[{name:"responsiveWidth",default:"768",description:"The width at which the drawer is hidden",type:"number",values:[]},{name:"temporary",default:"false",description:"Hides the drawer by default",type:"bool",values:[]},{name:"clipToolbar",default:"false",description:"Shifts the toolbar to the right to make room for the drawer",type:"bool",values:[]},{name:"mini",default:"false",description:"Makes the drawer smaller",type:"bool",values:[]},{name:"v-model:is-drawer-open",default:"true or false",description:"Controls the open state of the drawer",type:"bool",values:[]},{name:"v-model:is-drawer-hidden",default:"true or false",description:"Indicates if the drawer is in a default hidden state",type:"bool",values:[]}],slots:[{name:"#drawer",description:"Contains the sidebar navigation of the page",props:[]},{name:"#toolbar",description:"Contains the toolbar of the page",props:[]},{name:"#footer",description:"Contains the footer content of the page",props:[]},{name:"#default",description:"Contains the contents of the page",props:[]}]},NavigationMetadata:{title:"KroNavigation",description:"",css:[{name:"--kro-navigation-width",description:"Sets the width of the navigation menu",type:"size",default:"275px"}]},SelectMetadata:{title:"KroSelect",description:"A styled select component.",props:[{name:"label",description:"",type:"bool",values:"-",default:"false"},{name:"required",description:"",type:"bool",values:"-",default:"false"},{name:"disabled",description:"",type:"bool",values:"-",default:"false"},{name:"readonly",description:"",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"",type:"string",values:"-",default:"undefined"},{name:"name",description:"",type:"string",values:"-",default:"undefined"},{name:"id",description:"",type:"string",values:"-",default:"undefined"}]},SliderMetadata:{title:"KroSlider",description:"",props:[{name:"v-model",description:"The value of the slider",type:"number",values:"-",default:"undefined"},{name:"disabled",description:"Disables the slider",type:"bool",values:"-",default:"false"},{name:"steps",description:"Sets the step amount for each tick",type:"number",values:"-",default:"1"},{name:"ticks",description:"Display the ticks on the slider",type:"bool",values:"-",default:"false"},{name:"min",description:"Set the min value of the slider",type:"number",values:"-",default:"0"},{name:"max",description:"Set the max value of the slider",type:"number",values:"-",default:"100"}],slots:[{name:"#thumb",description:"A slot to replace the default value of the thumb.",props:["value"]}],css:[{name:"--kro-slider-tick-color",description:"The color of the tick marks on the slider.",type:"color",default:"rgba(0, 0, 0, .24)"},{name:"--kro-slider-track-color",description:"The color of the slider track.",type:"color",default:"--kro-background-secondary"},{name:"--kro-slider-progress-color",description:"The color of the progress bar on the track.",type:"color",default:"--kro-primary"},{name:"--kro-slider-knob-color",description:"The color of the knob on the slider.",type:"color",default:"--kro-primary-lighten"},{name:"--kro-slider-thumb-foreground",description:"The foreground color of the thumb.",type:"color",default:"--kro-primary-foreground"},{name:"--kro-slider-thumb-background",description:"The background color of the thumb.",type:"color",default:"--kro-primary"}]}});exports.KroAlert=ee,exports.KroApp=ne,exports.KroAvatar=he,exports.KroButton=_,exports.KroButtonGroup=B,exports.KroDialog=R,exports.KroDivider=Q,exports.KroIcon=m,exports.KroLayout=_e,exports.KroListItem=ie,exports.KroMenu=me,exports.KroNavigation=Ce,exports.KroProgressBar=ke,exports.KroSelect=Ae,exports.KroSlider=$e,exports.KroSpinner=h,exports.KroSquircle=y,exports.KroSurface=H,exports.KroSwitch=w,exports.KroTextfield=M,exports.KroToolbar=T,exports.KroUIBaseConfigurationPlugin=function(){return{install:function(e,t){var o=n({},d);if(t&&t.hasOwnProperty("icons")&&(o=n(n({},o),t.icons)),t.components&&Array.isArray(t.components))for(var r in t.components){var a=t.components[r];a&&e.component(r,a)}e.provide(l,o),c()}}},exports.KroUIPlugin=je,exports.Metadata=Ze,exports.useDialog=function(){return{createDialog:function(e){return new Promise((function(t,o){j(n(n({},F),e),t,o)}))},createConfirmationDialog:function(e){return new Promise((function(t,o){j(n(n({},I),e),t,o)}))}}},exports.useIcons=i,exports.useTheme=function(){return{setTheme:function(e){s.value=e},getTheme:function(){return s.value},theme:s}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@vueuse/core"),o=require("@purge-icons/generated"),r=require("focus-trap");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(o),l=a(r);let s;const i=()=>{s=t.useLocalStorage("kro.theme","default-dark"),e.watch(()=>s.value,()=>{document.documentElement.className="kro-theme__"+s.value},{immediate:!0})},c=[{name:"to",description:"Denotes the target route of the link.",type:"string | object",values:"-",default:"undefined"},{name:"exact",description:"Exactly match the link. Without this, '/' will match every route.",type:"bool",values:"-",default:"undefined"},{name:"activeClass",description:"Configure the active CSS class applied when the link is active",type:"string",values:"-",default:"undefined"},{name:"exactActiveClass",description:"Configure the active CSS class applied when the link is active with exact match.",type:"string",values:"-",default:"undefined"},{name:"href",description:"Designates the component as anchor and applies the href attribute.",type:"string",values:"-",default:"undefined"},{name:"target",description:"Designates the target attribute. This should only be applied when using the href prop.",type:"string",values:"-",default:"undefined"}],d={to:{type:[String,Object]},href:String,target:{type:String,default:"_blank"},exact:{type:Boolean,default:!1},activeClass:String,exactActiveClass:String},u=t=>({tag:t.to?"router-link":t.href?"a":null,componentProps:e.computed(()=>t.to?{to:t.to}:t.href?{href:t.href}:{}),routeData:t});
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function p(e,t,o,r){return new(o||(o=Promise))((function(a,n){function l(e){try{i(r.next(e))}catch(e){n(e)}}function s(e){try{i(r.throw(e))}catch(e){n(e)}}function i(e){var t;e.done?a(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(l,s)}i((r=r.apply(e,t||[])).next())}))}var m=e.defineComponent(Object.assign(Object.assign({},{name:"KroIcon"}),{props:{icon:{type:String,required:!0}},setup:function(t){const o=e.ref(null),r=()=>p(this,void 0,void 0,(function*(){if(o.value){yield e.nextTick();const r=n.default.renderSVG(t.icon,{});if(r)o.value.textContent="",o.value.appendChild(r);else{const e=document.createElement("span");e.className="iconify",e.dataset.icon=t.icon,o.value.textContent="",o.value.appendChild(e)}}}));return e.watch(()=>t.icon,r,{flush:"post"}),e.onMounted(r),{el:o}}}));m.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{ref:"el",class:[t.$attrs.class,"kro-icon"]},null,2)},m.__file="src/components/Icon/Icon.vue";var f={name:"KroSpinner"};const v={class:"kro-spinner"};f.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",v)},f.__file="src/components/Spinner/Spinner.vue";var k={name:"KroSquircle"};const h={class:"kro-squircle",viewBox:"0 0 400 400","enable-background":"new 0 0 400 400","xml:space":"preserve"},y=e.createVNode("path",{d:"M 0,200 C 0,0 0,0 200,0 S 400,0 400,200 400,400 200,400 0,400 0,200"},null,-1);k.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("svg",h,[y])},k.__file="src/components/Squircle/Squircle.vue";var g={name:"KroButton",components:{KroIcon:m,KroSpinner:f,KroSquircle:k},props:Object.assign(Object.assign({},d),{loading:{type:Boolean,default:!1},type:String,primary:Boolean,outline:Boolean,raised:Boolean,icon:String,hideExternalIcon:Boolean,warning:Boolean,error:Boolean,success:Boolean}),setup(t){const{tag:o,componentProps:r}=u(t);return{componentProps:r,componentType:e.computed(()=>o||"button")}}};const b={class:"kro-button__spinner"};g.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-squircle"),i=e.resolveComponent("kro-icon"),c=e.resolveComponent("kro-spinner");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.componentType),e.mergeProps({class:{"kro-button":!0,"kro-button--primary":r.primary,"kro-button--outline":r.outline,"kro-button--raised":r.raised,"kro-button--warning":r.warning,"kro-button--success":r.success,"kro-button--error":r.error,"kro-button--is-icon-button":r.icon&&!t.$slots.default},rel:"noreferrer"},a.componentProps,{target:t.href?t.target:""}),{default:e.withCtx(()=>[r.icon&&!t.$slots.default?(e.openBlock(),e.createBlock(s,{key:0,class:"kro-button__squircle"})):e.createCommentVNode("v-if",!0),e.createVNode("span",{class:{"kro-button__content":!0,"kro-button__content--is-loading":r.loading}},[r.icon?(e.openBlock(),e.createBlock(i,{key:0,class:"kro-button__icon",icon:r.icon},null,8,["icon"])):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"default"),!t.href||r.icon&&!t.$slots.default||r.hideExternalIcon?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock(i,{key:1,icon:"external"}))],2),e.withDirectives(e.createVNode("span",b,[e.createVNode(c)],512),[[e.vShow,r.loading]])]),_:3},16,["class","target"])},g.__file="src/components/Button/Button.vue";const _={title:"KroButton",description:"A styled button with added functionality",props:[{name:"loading",description:"Displays a loading indicator over the button",type:"bool",values:"-",default:"false"},{name:"type",description:"The type of the button",type:"string",values:["button","reset","submit"],default:"button"},{name:"primary",description:"Applies a style to the button to indicate that it is a primary button",type:"bool",values:"-",default:"false"},{name:"outline",description:"Give the button an outline style",type:"bool",values:"-",default:"false"},{name:"raised",description:"Apply a shadow to the button",type:"string",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the button",type:"string",values:"-",default:"undefined"},{name:"hideExternalIcon",description:"Hides the external link icon for buttons that are links.",type:"bool",values:"-",default:"false"},...c]};var B={name:"KroButtonGroup"};const x={class:"kro-button-group"};B.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",x,[e.renderSlot(t.$slots,"default")])},B.__file="src/components/ButtonGroup/ButtonGroup.vue";var S={name:"KroSwitch",props:{value:String},emits:["update:modelValue"],setup:(e,{emit:t,attrs:o})=>({update:r=>{r.target.checked?e.value?Array.isArray(o.modelValue)&&t("update:modelValue",[...o.modelValue,e.value]):t("update:modelValue",!0):e.value?Array.isArray(o.modelValue)&&t("update:modelValue",o.modelValue.filter(t=>t!==e.value)):t("update:modelValue",!1)}})};const w={class:"kro-switch"},V={class:"kro-switch__container"},C={class:"kro-switch__track"},N=e.createVNode("div",{class:"kro-switch__knob"},null,-1),K={key:0,class:"kro-switch__label"};S.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",w,[e.createVNode("div",V,[e.createVNode("input",{class:"kro-switch__input",checked:Array.isArray(t.$attrs.modelValue)?t.$attrs.modelValue.indexOf(r.value)>-1:!!t.$attrs.modelValue,type:"checkbox",onChange:o[1]||(o[1]=(...e)=>a.update(...e))},null,40,["checked"]),e.createVNode("div",C,[e.createVNode("div",{class:{"kro-switch__track-active":!0,"kro-switch__track-active--is-active":Array.isArray(t.$attrs.modelValue)?t.$attrs.modelValue.indexOf(r.value)>-1:!!t.$attrs.modelValue}},null,2)]),e.createVNode("div",{class:{"kro-switch__knob-container":!0,"kro-switch__knob-container--is-active":Array.isArray(t.$attrs.modelValue)?t.$attrs.modelValue.indexOf(r.value)>-1:!!t.$attrs.modelValue}},[N],2)]),t.$slots.default?(e.openBlock(),e.createBlock("div",K,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("v-if",!0)])},S.__file="src/components/Switch/Switch.vue";var $={name:"KroTextfield",props:{label:{type:String},type:{type:String,default:"text"},required:{type:Boolean},disabled:{type:Boolean},multiline:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},min:{type:Number},max:{type:Number},maxlength:{type:Number},name:{type:String},id:{type:String},autoResize:{type:Boolean,default:!0},loading:{type:Boolean},success:{type:Boolean},error:{type:Boolean},message:{type:String}},emits:["update:modelValue"],setup(t){const o=e.ref(!1),r=e.ref();return{focused:o,runAutoResize:()=>{t.autoResize&&r.value&&(r.value.style.height="auto",r.value.style.height=r.value.scrollHeight+"px")},inputRef:r}}};const A={key:2,class:"block pr-2"},D={key:0,class:"pl-4 text-xs font-medium"};$.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-spinner"),i=e.resolveComponent("kro-icon");return e.openBlock(),e.createBlock("div",{class:["kro-textfield",{"kro-textfield--is-textarea":r.multiline}]},[e.createVNode("div",{class:{"kro-textfield__container":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":t.$attrs.modelValue,"kro-textfield--is-textarea":r.multiline}},[e.createVNode("label",{class:{"kro-textfield__label":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":t.$attrs.modelValue},for:r.id},e.toDisplayString(r.label),11,["for"]),e.createVNode("span",{class:{"kro-textfield__pseudo-label":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":t.$attrs.modelValue}},e.toDisplayString(r.label),3),r.multiline?(e.openBlock(),e.createBlock("textarea",{key:1,id:r.id,ref:"inputRef",class:"kro-textfield__input",disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,maxlength:r.maxlength,name:r.name,value:t.$attrs.modelValue,onInput:o[4]||(o[4]=e=>{t.$emit("update:modelValue",e.target.value),a.runAutoResize()}),onFocus:o[5]||(o[5]=e=>a.focused=!0),onBlur:o[6]||(o[6]=e=>a.focused=!1)},null,40,["id","disabled","required","readonly","autofocus","maxlength","name","value"])):(e.openBlock(),e.createBlock("input",{key:0,class:"kro-textfield__input",id:r.id,disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,type:r.type,min:r.min,max:r.max,maxlength:r.maxlength,name:r.name,value:t.$attrs.modelValue,onInput:o[1]||(o[1]=e=>t.$emit("update:modelValue",e.target.value)),onFocus:o[2]||(o[2]=e=>a.focused=!0),onBlur:o[3]||(o[3]=e=>a.focused=!1)},null,40,["id","disabled","required","readonly","autofocus","type","min","max","maxlength","name","value"])),r.loading||r.success||r.error?(e.openBlock(),e.createBlock("div",A,[r.loading?(e.openBlock(),e.createBlock(s,{key:0,class:"kro-textfield__spinner"})):r.success?(e.openBlock(),e.createBlock(i,{key:1,class:"kro-textfield__success-icon",icon:"mdi:check"})):r.error?(e.openBlock(),e.createBlock(i,{key:2,class:"kro-textfield__error-icon",icon:"mdi:alert"})):e.createCommentVNode("v-if",!0)])):e.createCommentVNode("v-if",!0)],2),t.$slots.default?(e.openBlock(),e.createBlock("div",D,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("v-if",!0)],2)},$.__file="src/components/Textfield/Textfield.vue";var T={name:"KroToolbar",props:{small:Boolean,padded:Boolean,raised:Boolean}};T.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{class:{"kro-toolbar":!0,"kro-toolbar--small":r.small,"kro-toolbar--raised":r.raised,"kro-toolbar--padded":r.padded}},[e.renderSlot(t.$slots,"default")],2)},T.__file="src/components/Toolbar/Toolbar.vue";var M={name:"KroSurface",props:{padded:{type:Boolean,default:!0},raised:{type:Boolean,default:!0},outline:{type:Boolean,default:!1},icon:String,label:String}};const O={key:0,class:"kro-surface__label-container"},q={key:1,class:"kro-surface__label"};M.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-icon");return e.openBlock(),e.createBlock("div",{class:{"kro-surface":!0,"kro-surface--padded":r.padded,"kro-surface--raised":r.raised,"kro-surface--outline":r.outline}},[r.icon||r.label?(e.openBlock(),e.createBlock("div",O,[r.icon?(e.openBlock(),e.createBlock(s,{key:0,class:"kro-surface__icon",icon:r.icon},null,8,["icon"])):e.createCommentVNode("v-if",!0),r.label?(e.openBlock(),e.createBlock("div",q,e.toDisplayString(r.label),1)):e.createCommentVNode("v-if",!0)])):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"default")],2)},M.__file="src/components/Surface/Surface.vue";const L=e.defineComponent({emits:["update:active","activate","deactivate"],props:{active:{type:Boolean,default:!0},escapeDeactivates:{type:Boolean,default:!0},returnFocusOnDeactivate:{type:Boolean,default:!0},allowOutsideClick:{type:Boolean,default:!0},initialFocus:{type:[String,Function],default:void 0},fallbackFocus:{type:[String,Function],default:void 0}},setup(t,{slots:o,emit:r}){let a;const n=e.ref(null);return e.onMounted(()=>{e.watch(()=>t.active,e=>{var o,s;e&&n.value?(a=l.default(n.value,{escapeDeactivates:t.escapeDeactivates,allowOutsideClick:()=>t.allowOutsideClick,returnFocusOnDeactivate:t.returnFocusOnDeactivate,onActivate:()=>{r("update:active",!0),r("activate")},onDeactivate:()=>{r("update:active",!1),r("deactivate")},initialFocus:"string"==typeof t.initialFocus?t.initialFocus:null!==(s=null===(o=t.initialFocus)||void 0===o?void 0:o.call(t))&&void 0!==s?s:n.value,fallbackFocus:t.fallbackFocus}),a.activate()):null==a||a.deactivate()},{immediate:!0})}),e.onUnmounted(()=>{null==a||a.deactivate(),a=null}),()=>{var t;const r=null===(t=o.default)||void 0===t?void 0:t.call(o);if(!r||!r.length||r.length>1)throw new Error("FocusTrap requires exactly one child");return e.cloneVNode(r[0],{ref:n})}}}),j=()=>({disableDocumentScroll:()=>{document.documentElement.classList.add("kro-helper--prevent-scroll")},enableDocumentScroll:()=>{document.documentElement.classList.remove("kro-helper--prevent-scroll")},disableDocumentSelect:()=>{document.documentElement.classList.add("kro-helper--prevent-select")},enableDocumentSelect:()=>{document.documentElement.classList.remove("kro-helper--prevent-select")},enableAppFocus:()=>{var e;null===(e=document.querySelector("#app"))||void 0===e||e.removeAttribute("tabindex")},disableAppFocus:()=>{var e;null===(e=document.querySelector("#app"))||void 0===e||e.setAttribute("tabindex","-1")}}),E={title:"Dialog Title",message:"Dialog Message",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},P={title:"Confirmation Dialog",message:"Dialog Message",icon:"mdi:help-circle",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},F=e.ref([]),I=(t,o,r)=>{const a=Object.assign(Object.assign({},t),{isOpen:e.ref(!0),resolve:o,reject:r,destroy(){F.value.splice(F.value.indexOf(this),1)}});F.value=[...F.value,a]};const z={name:"KroDialog",components:{KroSurface:M,FocusTrap:L},inheritAttrs:!1,emits:["update:modelValue","close","open","close-animation-end"]};var H=e.defineComponent(Object.assign(Object.assign({},z),{props:{persistent:{type:null,required:!1}},setup:function(t,{emit:o,attrs:r}){const{disableDocumentScroll:a,enableDocumentScroll:n}=j(),l=e.ref(null);let s=!1;e.onUpdated(()=>{s||!0!==r.modelValue||(o("update:modelValue",!0),o("open"),a(),window.addEventListener("keydown",c),l.value&&l.value.focus())});const i=()=>{s=!0,o("update:modelValue",!0),o("open"),a(),window.addEventListener("keydown",c),l.value&&l.value.focus()},c=e=>{(e=>"keydown"!==(null==e?void 0:e.type)||"Escape"===e.key&&!t.persistent)(e)&&(o("update:modelValue",!1),o("close"),window.removeEventListener("keydown",c),n(),s=!1)};return{dialog:l,onDialogLeaveAnimationComplete:()=>{o("close-animation-end")},open:i,close:c,toggle:()=>{r.modelValue?c(null):i()}}}}));const R={ref:"dialog",tabindex:"-1",class:"kro-dialog__container"},W={class:"grid grid-row gap-4"},G={key:0,class:"kro-dialog__header text-lg"},U={class:"kro-dialog__body"},X={key:1,class:"kro-dialog__footer"};H.render=function(t,o,r,a,n,l){const s=e.resolveComponent("focus-trap"),i=e.resolveComponent("kro-surface");return e.openBlock(),e.createBlock(e.Fragment,null,[e.renderSlot(t.$slots,"activator",{close:a.close,open:a.open,toggle:a.toggle}),(e.openBlock(),e.createBlock(e.Teleport,{to:"#kro-portal"},[e.createVNode(e.Transition,{appear:"",name:"kro-dialog-scrim"},{default:e.withCtx(()=>[t.$attrs.modelValue?(e.openBlock(),e.createBlock("div",{key:0,class:"kro-dialog__scrim fixed inset-0",onClick:o[1]||(o[1]=()=>{r.persistent||a.close()})})):e.createCommentVNode("v-if",!0)]),_:1}),e.createVNode("div",R,[e.createVNode(e.Transition,{appear:"",name:"kro-dialog","onAfter-leave":a.onDialogLeaveAnimationComplete},{default:e.withCtx(()=>[t.$attrs.modelValue?(e.openBlock(),e.createBlock(i,e.mergeProps({key:0,class:"kro-dialog"},t.$attrs),{default:e.withCtx(()=>[e.createVNode(s,{modelValue:t.$attrs.modelValue,"onUpdate:modelValue":o[2]||(o[2]=e=>t.$attrs.modelValue=e)},{default:e.withCtx(()=>[e.createVNode("div",W,[t.$slots.header?(e.openBlock(),e.createBlock("div",G,[e.renderSlot(t.$slots,"header",{open:a.open,close:a.close,toggle:a.toggle})])):e.createCommentVNode("v-if",!0),e.createVNode("div",U,[e.renderSlot(t.$slots,"default",{open:a.open,close:a.close,toggle:a.toggle})]),t.$slots.footer?(e.openBlock(),e.createBlock("div",X,[e.renderSlot(t.$slots,"footer",{open:a.open,close:a.close,toggle:a.toggle})])):e.createCommentVNode("v-if",!0)])]),_:3},8,["modelValue"])]),_:1},16)):e.createCommentVNode("v-if",!0)]),_:1},8,["onAfter-leave"])],512)]))],64)},H.__file="src/components/Dialog/Dialog.vue";var Y={name:"KroDivider",props:{vertical:Boolean,inset:Boolean,label:String}};const Q={key:0};Y.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{class:["kro-divider",{"kro-divider--vertical":r.vertical,"kro-divider--inset":r.inset}]},[r.label?(e.openBlock(),e.createBlock("span",Q,e.toDisplayString(r.label),1)):e.createCommentVNode("v-if",!0)],2)},Y.__file="src/components/Divider/Divider.vue";var J={name:"KroAlert",components:{KroIcon:m,KroButton:g},props:{type:{type:String,default:"info"},dismissible:{type:Boolean,default:!1},tag:{type:String,default:"div"},icon:String,outline:{type:Boolean,default:!1}},emits:["dismissed","show"],setup(t,{emit:o}){const r=e.ref(!1);return{iconName:e.computed(()=>{const{type:e,icon:o}=t;return o||("warning"===e||"info"===e?"mdi:alert-circle":"error"===e?"mdi:alert":"success"===e?"mdi:check":null)}),isHidden:r,hide:()=>{o("dismissed"),r.value=!0},show:()=>{o("show"),r.value=!1}}}};const Z={class:"kro-alert__icon"},ee={key:0};J.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-icon"),i=e.resolveComponent("kro-button");return e.withDirectives((e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.tag),{class:{"kro-alert":!0,"kro-alert--error":"error"===r.type,"kro-alert--info":"info"===r.type,"kro-alert--warning":"warning"===r.type,"kro-alert--success":"success"===r.type,"kro-alert--outline":r.outline,"kro-alert--has-icon":a.iconName,"kro-alert--is-dismissible":r.dismissible}},{default:e.withCtx(()=>[e.createVNode("div",Z,[a.iconName?(e.openBlock(),e.createBlock(s,{key:0,icon:a.iconName},null,8,["icon"])):e.createCommentVNode("v-if",!0)]),e.createVNode("div",null,[e.renderSlot(t.$slots,"default")]),r.dismissible?(e.openBlock(),e.createBlock("div",ee,[e.createVNode(i,{icon:"close",onClick:a.hide},null,8,["onClick"])])):e.createCommentVNode("v-if",!0)]),_:3},8,["class"])),[[e.vShow,!a.isHidden]])},J.__file="src/components/Alert/Alert.vue";var te=e.defineComponent(Object.assign(Object.assign({},{name:"ComposableDialogs"}),{setup:function(){return{instances:F}}}));te.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-icon"),i=e.resolveComponent("kro-button"),c=e.resolveComponent("kro-dialog");return e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(a.instances,(t,o)=>(e.openBlock(),e.createBlock("div",{key:o},[e.createVNode(c,{modelValue:t.isOpen,"onUpdate:modelValue":e=>t.isOpen=e,class:{"kro-composable-dialog--centered":"centered"===t.style},"onClose-animation-end":e=>t.destroy()},{header:e.withCtx(()=>[e.createVNode("div",{class:["flex items-center",{"flex-col":"centered"===t.style}]},[t.icon?(e.openBlock(),e.createBlock(s,{key:0,style:{color:t.iconColor?t.iconColor:""},class:[{"kro-composable-dialog__icon--large":"centered"===t.style},"mr-4"],icon:t.icon},null,8,["style","class","icon"])):e.createCommentVNode("v-if",!0),e.createTextVNode(" "+e.toDisplayString(t.title),1)],2)]),default:e.withCtx(()=>[e.createVNode("div",{class:{"text-center":"centered"===t.style}},e.toDisplayString(t.message),3)]),footer:e.withCtx(({close:o})=>[e.createVNode("div",{class:["flex flex-row flex-1 gap-4",{"justify-end":"centered"!==t.style,"justify-center":"centered"===t.style}]},[t.rejectButton.hidden?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock(i,e.mergeProps({key:0},t.rejectButton.attributes,{onClick:()=>{t.reject(),o()}}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.rejectButton.text),1)]),_:2},1040,["onClick"])),t.resolveButton.hidden?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock(i,e.mergeProps({key:1},t.resolveButton.attributes,{onClick:()=>{t.resolve(),o()}}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.resolveButton.text),1)]),_:2},1040,["onClick"]))],2)]),_:2},1032,["modelValue","onUpdate:modelValue","class","onClose-animation-end"])]))),128)},te.__file="src/components/App/components/ComposableDialogs.vue";var oe={name:"KroApp",components:{ComposableDialogs:te}};const re={class:"kro-app"},ae={class:"kro-app__content"};oe.render=function(t,o,r,a,n,l){const s=e.resolveComponent("composable-dialogs");return e.openBlock(),e.createBlock("div",re,[e.createVNode("div",ae,[e.renderSlot(t.$slots,"default")]),e.createVNode(s)])},oe.__file="src/components/App/App.vue";var ne={name:"KroListItem",props:Object.assign(Object.assign({},d),{tag:{type:String,default:"div"}}),setup(t){const{tag:o,componentProps:r}=u(t);return{componentProps:r,componentType:e.computed(()=>o||"div")}}};const le={key:0,class:"kro-list-item__icon"},se={class:"kro-list-item__content"},ie={class:"kro-list-item__title"},ce={key:0,class:"kro-list-item__subtitle"},de={key:1,class:"kro-list-item__action"};ne.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.componentType),e.mergeProps(a.componentProps,{class:"kro-list-item"}),{default:e.withCtx(()=>[t.$slots.icon?(e.openBlock(),e.createBlock("div",le,[e.renderSlot(t.$slots,"icon")])):e.createCommentVNode("v-if",!0),e.createVNode("div",se,[e.createVNode("span",ie,[e.renderSlot(t.$slots,"default")]),t.$slots.subtitle?(e.openBlock(),e.createBlock("span",ce,[e.renderSlot(t.$slots,"subtitle")])):e.createCommentVNode("v-if",!0)]),t.$slots.action?(e.openBlock(),e.createBlock("div",de,[e.renderSlot(t.$slots,"action")])):e.createCommentVNode("v-if",!0)]),_:3},16)},ne.__file="src/components/List/ListItem.vue";const ue={title:"KroListItem",description:"",props:[{name:"tag",description:"",type:"string",values:"-",default:"div"},...c],slots:[{name:"#icon",description:"Item icon slot",props:[]},{name:"#subtitle",description:"Item subtitle slot",props:[]},{name:"#action",description:"Action on the right side of the item",props:[]},{name:"#default",description:"Main text of the item",props:[]}]};var pe={name:"KroMenu",props:{offsetX:{type:Boolean,default:!1},offsetY:{type:Boolean,default:!1},left:Boolean,right:Boolean,top:Boolean,bottom:Boolean},emits:["open","close"],setup(t,{emit:o}){const r=e.ref(!1),a=e.ref(null),n=e.ref(null),l=e.reactive({"kro-menu__content--y-bottom":!1,"kro-menu__content--y-bottom-offset":!1,"kro-menu__content--y-top":!1,"kro-menu__content--y-top-offset":!1,"kro-menu__content--x-left":!1,"kro-menu__content--x-left-offset":!1,"kro-menu__content--x-right":!1,"kro-menu__content--x-right-offset":!1}),s=()=>{Object.keys(l).forEach(e=>l[e]=!1);const{offsetX:e,offsetY:s,left:i,right:c,top:d,bottom:u}=t,{canFit:p}=((e,t,o)=>{if(!e.value||!t.value)return{canFit:{top:!1,bottom:!1,left:!1,right:!1}};const{innerWidth:r,innerHeight:a}=window,n=e.value.getBoundingClientRect(),l=t.value,s=o.offsetX?n.width:0,i=o.offsetY?n.height:0;return{canFit:{bottom:l.offsetHeight+n.top+i<a,top:l.offsetHeight<n.top,left:l.offsetTop<n.left,right:l.offsetWidth+n.left+s<r}}})(a,n,{offsetX:e,offsetY:s});p.top&&d?l["kro-menu__content--y-top"+(s?"-offset":"")]=!0:p.bottom&&u||p.bottom?l["kro-menu__content--y-bottom"+(s?"-offset":"")]=!0:p.top&&(l["kro-menu__content--y-top"+(s?"-offset":"")]=!0),p.left&&i?l["kro-menu__content--x-left"+(e?"-offset":"")]=!0:p.right&&c||p.right?l["kro-menu__content--x-right"+(e?"-offset":"")]=!0:p.left&&(l["kro-menu__content--x-left"+(e?"-offset":"")]=!0),o("open"),r.value=!0},i=()=>{o("close"),r.value=!1};return{isOpen:r,classes:l,open:s,close:i,toggle:()=>{r.value?i():s()},menu:n,container:a}}};const me={ref:"container",class:"kro-menu"};pe.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",me,[e.createVNode("div",{class:["kro-menu__scrim",{"kro-menu__scrim--is-open":a.isOpen}],onClick:o[1]||(o[1]=(...e)=>a.close(...e))},null,2),e.renderSlot(t.$slots,"activator",{open:a.open}),e.createVNode("div",{ref:"menu",class:["kro-menu__content",{...a.classes,"kro-menu__content--is-open":a.isOpen}]},[e.renderSlot(t.$slots,"default")],2)],512)},pe.__file="src/components/Menu/Menu.vue";var fe={name:"KroAvatar",props:{src:String,color:String,small:Boolean,large:Boolean}};fe.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{class:["kro-avatar",{"kro-avatar__small":r.small,"kro-avatar__large":r.large}]},[r.src?(e.openBlock(),e.createBlock("img",{key:0,src:r.src,alt:""},null,8,["src"])):r.color?(e.openBlock(),e.createBlock("div",{key:1,style:{backgroundColor:r.color},class:"kro-avatar__color-circle"},null,4)):e.createCommentVNode("v-if",!0)],2)},fe.__file="src/components/Avatar/Avatar.vue";var ve={name:"KroProgressBar",props:{stream:Boolean,indeterminate:Boolean,rounded:{type:Boolean,default:!0},value:{type:Number,default:0},bufferValue:{type:Number,default:100}}};const ke=e.createVNode("div",{class:"kro-progress-bar__stream"},[e.createVNode("div",{class:"kro-progress-bar__stream-content"})],-1),he=e.createVNode("div",{class:"kro-progress-bar__indeterminate"},null,-1);ve.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{class:{"kro-progress-bar":!0,"kro-progress-bar--is-stream":r.stream,"kro-progress-bar--is-indeterminate":r.indeterminate,"kro-progress-bar--rounded":r.rounded}},[ke,e.createVNode("div",{class:"kro-progress-bar__buffer",style:{"--kro-progress-bar-buffer-value":r.bufferValue-100+"%"}},null,4),e.createVNode("div",{class:"kro-progress-bar__progress",style:{"--kro-progress-bar-value":r.value-100+"%"}},null,4),he],2)},ve.__file="src/components/ProgressBar/ProgressBar.vue";var ye=e.defineComponent(Object.assign(Object.assign({},{name:"KroLayout",emits:["update:is-drawer-open","update:is-drawer-hidden"]}),{props:{absolute:{type:Boolean,required:!1},responsiveWidth:{type:Number,required:!1},temporary:{type:Boolean,required:!1},right:{type:Boolean,required:!1},toolbarHeight:{type:String,required:!1},clipToolbar:{type:Boolean,required:!1},mini:{type:Boolean,required:!1}},setup:function(o,r){const a=e.ref(!!r.slots.drawer),n=t.useMediaQuery(`(max-width: ${o.responsiveWidth||768}px)`),l=e.computed(()=>o.mini?"6rem":"16rem"),s=e.computed(()=>n.value||o.temporary||!a.value?"0":"var(--drawerWidth)"),i=e.computed(()=>o.toolbarHeight||"4rem"),c=e.computed(()=>o.clipToolbar?"var(--contentOffsetLeft)":"0"),d=e.computed(()=>o.clipToolbar||n.value||o.temporary?"0":"var(--toolbarHeight)");return e.onUpdated(()=>{a.value=!!r.slots.drawer}),e.watchEffect(()=>{r.emit("update:is-drawer-open",!(n.value||o.temporary)),r.emit("update:is-drawer-hidden",n.value||o.temporary)}),e.useCssVars(e=>({drawerWidth:l,toolbarHeight:i,toolbarLeftOffset:c,drawerOffsetTop:d,contentOffsetLeft:s})),{hasDrawer:a,isSmallScreen:n,drawerWidth:l,contentOffsetLeft:s,toolbarHeight:i,toolbarLeftOffset:c,drawerOffsetTop:d}}}));const ge={class:"kro-layout"},be={key:2,class:"kro-layout__toolbar"},_e={class:"kro-layout__container"},Be={key:0,class:"kro-layout__content"},xe={key:1,class:"kro-layout__footer"};ye.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",ge,[t.$slots.drawer?(e.openBlock(),e.createBlock("div",{key:0,class:["kro-layout__scrim",{"kro-layout__scrim--is-open":t.$attrs["is-drawer-open"]&&(a.isSmallScreen||r.temporary)}],onClick:o[1]||(o[1]=e=>t.$emit("update:is-drawer-open",!1))},null,2)):e.createCommentVNode("v-if",!0),t.$slots.drawer?(e.openBlock(),e.createBlock("div",{key:1,class:["kro-layout__drawer",{"kro-layout__drawer--hidden":a.isSmallScreen||r.temporary,"kro-layout__drawer--is-open":t.$attrs["is-drawer-open"]}]},[e.renderSlot(t.$slots,"drawer")],2)):e.createCommentVNode("v-if",!0),t.$slots.toolbar?(e.openBlock(),e.createBlock("div",be,[e.renderSlot(t.$slots,"toolbar")])):e.createCommentVNode("v-if",!0),e.createVNode("div",_e,[t.$slots.default?(e.openBlock(),e.createBlock("div",Be,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("v-if",!0),t.$slots.footer?(e.openBlock(),e.createBlock("div",xe,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("v-if",!0)])])},ye.__file="src/components/Layout/Layout.vue";var Se={name:"KroSelect",props:{label:{type:String},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},name:{type:String},id:{type:String}},emits:["update:modelValue"],setup(t,{attrs:o}){const r=e.ref(!1),a=e.ref(null);return e.onMounted(()=>{a.value&&Array.from(a.value.options).forEach(e=>{e.value===o.modelValue&&(e.selected=!0)})}),{focused:r,select:a}}};const we={class:"kro-select"},Ve={class:"kro-select__hidden-label"},Ce=e.createVNode("option",{selected:"",hidden:""},null,-1);Se.render=function(t,o,r,a,n,l){const s=e.resolveComponent("kro-icon");return e.openBlock(),e.createBlock("div",we,[e.createVNode("div",{class:{"kro-select__container":!0,"kro-select--focused":a.focused,"kro-select--has-text":t.$attrs.modelValue}},[e.createVNode("label",{class:{"kro-select__label":!0,"kro-select--focused":a.focused,"kro-select--has-text":t.$attrs.modelValue},for:r.id},e.toDisplayString(r.label),11,["for"]),e.createVNode("div",Ve,e.toDisplayString(r.label),1),e.createVNode("span",{class:{"kro-select__pseudo-label":!0,"kro-select--focused":a.focused,"kro-select--has-text":t.$attrs.modelValue}},e.toDisplayString(r.label),3),e.createVNode("select",{id:r.id,ref:"select",class:"kro-select__input",disabled:r.disabled,required:r.required,readonly:r.readonly,autofocus:r.autofocus,name:r.name,value:t.$attrs.modelValue,onChange:o[1]||(o[1]=e=>t.$emit("update:modelValue",e.target.value)),onFocus:o[2]||(o[2]=e=>a.focused=!0),onBlur:o[3]||(o[3]=e=>a.focused=!1)},[Ce,e.renderSlot(t.$slots,"default")],40,["id","disabled","required","readonly","autofocus","name","value"]),e.createVNode(s,{class:"kro-select__icon",icon:"mdi:chevron-down"})],2)])},Se.__file="src/components/Select/Select.vue";var Ne={name:"KroSlider",props:{disabled:{type:Boolean,default:!1},step:{type:Number,default:1},ticks:{default:!1,type:[Boolean,String]},min:{type:Number,default:0},max:{type:Number,default:100}},emits:["update:modelValue"],setup(o,{emit:r,attrs:a}){const n=e.ref(),l=e.ref(),{targetPercentage:s}=(o=>{const{x:r,elementPositionX:a,elementWidth:n}=t.useMouseInElement(o),l=e.computed(()=>Math.min(Math.max(0,r.value-a.value),n.value)/(n.value||1));return{elementWidth:n,targetPercentage:l}})(n),{elementWidth:i}=(o=>{const r=e.ref(0),a=e.ref(0),n=e.ref(0),l=e.ref(0),s=e=>{const{left:t,top:o,width:s,height:i}=e.getBoundingClientRect();r.value=s,a.value=i,n.value=t,l.value=o};e.watch(o,e=>{const t=e||document.body;s(t)});const i=t.useThrottleFn(()=>{const e=o.value||document.body;s(e)},250);return t.useEventListener("resize",i),{elementWidth:r,elementHeight:a,elementLeft:n,elementTop:l}})(n),c=e.ref(!1),{disableDocumentSelect:d,enableDocumentSelect:u}=j(),p=()=>{c.value=!1,u(),removeEventListener("touchcancel",p),removeEventListener("touchend",p),removeEventListener("mouseup",p)},m=()=>{c.value=!0,d(),addEventListener("touchcancel",p),addEventListener("touchend",p),addEventListener("mouseup",p)},f=e.computed(()=>i.value/Math.ceil((o.max-o.min)/o.step)),v=()=>{r("update:modelValue",Math.max(o.min,Math.min(o.max,a.modelValue-o.step)))},k=()=>{r("update:modelValue",Math.max(o.min,Math.min(o.max,a.modelValue+o.step)))};return e.onMounted(()=>{r("update:modelValue",Math.max(o.min,Math.min(a.modelValue||0,o.max)))}),e.watchEffect(()=>{c.value&&r("update:modelValue",Math.max(o.min,Math.min(Math.round(s.value*(o.max-o.min)/o.step)*o.step+o.min,o.max)))}),{knobRef:l,sliderRef:n,targetPercentage:s,enableEditing:m,trackSpacing:f,isEditing:c,onSliderClick:()=>{setTimeout(()=>{l.value.focus()},0),m()},incrementValue:e=>{"ArrowLeft"===e.key&&v(),"ArrowRight"===e.key&&k()},subtractValue:v,addValue:k}}};const Ke={class:"kro-slider__track-container"},$e={ref:"sliderRef",class:"kro-slider__track"},Ae=e.createVNode("div",{class:"kro-slider__progress"},null,-1),De={class:"kro-slider__knob-container"},Te=e.createVNode("div",{class:"kro-slider__thumb"},null,-1),Me={key:0},Oe={key:1};Ne.render=function(t,o,r,a,n,l){return e.openBlock(),e.createBlock("div",{class:"kro-slider",style:{"--kro-slider-progress":(t.$attrs.modelValue-r.min)/(r.max-r.min)*100-100+"%"},onTouchstartPassive:o[2]||(o[2]=(...e)=>a.enableEditing(...e)),onMousedown:o[3]||(o[3]=(...e)=>a.onSliderClick(...e))},[e.createVNode("div",Ke,[e.createVNode("div",$e,[r.ticks?(e.openBlock(),e.createBlock("div",{key:0,style:{"--kro-slider-tick-spacing":a.trackSpacing+"px"},class:"kro-slider__markers"},null,4)):e.createCommentVNode("v-if",!0),Ae],512),e.createVNode("div",De,[e.createVNode("button",{ref:"knobRef",class:"kro-slider__knob",tabindex:"0",onKeydown:o[1]||(o[1]=(...e)=>a.incrementValue(...e))},null,544),e.createVNode("div",{class:["kro-slider__preview-value",{"kro-slider__preview-value--is-active":a.isEditing}]},[Te,t.$slots.thumb?(e.openBlock(),e.createBlock("span",Oe,[e.renderSlot(t.$slots,"thumb",{value:t.$attrs.modelValue})])):(e.openBlock(),e.createBlock("span",Me,e.toDisplayString(t.$attrs.modelValue),1))],2)])])],36)},Ne.__file="src/components/Slider/Slider.vue";const qe={mounted(){console.log("Ok Tooltip")}};const Le=(je=Object.freeze({__proto__:null,KroButton:g,KroButtonGroup:B,KroIcon:m,KroSpinner:f,KroSquircle:k,KroSwitch:S,KroTextfield:$,KroToolbar:T,KroDialog:H,KroSurface:M,KroDivider:Y,KroAlert:J,KroApp:oe,KroListItem:ne,KroMenu:pe,KroAvatar:fe,KroProgressBar:ve,KroLayout:ye,KroSelect:Se,KroSlider:Ne}),Ee=Object.freeze({__proto__:null,Tooltip:qe}),{install(e){je&&Object.entries(je).forEach(([t,o])=>{o&&e.component(t,o)}),Ee&&Object.entries(Ee).forEach(([t,o])=>{o&&e.directive(t,o)}),i()}});var je,Ee,Pe=Object.freeze({__proto__:null,ButtonMetadata:_,ButtonGroupMetadata:{title:"KroButtonGroup",description:"A container for multiple related buttons"},IconMetadata:{title:"KroIcon",description:"Display an SVG icon",props:[{name:"icon",description:"The name of the icon to display",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-icon-size",description:"The size of the icon",type:"size",default:"1.5rem"}]},SpinnerMetadata:{title:"KroSpinner",description:"A loading indicator",css:[{name:"--kro-spinner-size",description:"Sets the size of the spinner",type:"size",default:"2.5rem"},{name:"--kro-spinner-thickness",description:"Sets the thickness of the spinner",type:"size",default:"0.35rem"},{name:"--kro-spinner-color",description:"Sets the color of the spinner",type:"size",default:"--kro-foreground"}]},SquircleMetadata:{title:"KroSquircle",description:"A component used for visual effect."},SwitchMetadata:{title:"KroSwitch",description:"",props:[{name:"v-model",description:"The value of the switch",type:"bool",values:"-",default:"undefined"}],css:[{name:"--kro-switch-track-background",description:"The color of the track background.",type:"color",default:"--kro-background-secondary"},{name:"--kro-switch-track-active-background",description:"The track color when the switch is set to true.",type:"color",default:"--kro-primary-darken"},{name:"--kro-switch-knob-color",description:"The color of the switch knob.",type:"color",default:"--kro-primary"},{name:"--kro-switch-knob-shadow",description:"The shadow of the switch knob.",type:"shadow",default:"--kro-shadow"}]},TextfieldMetadata:{title:"KroTextfield",description:"",props:[{name:"v-model",description:"The value of the textfield",type:"string",values:"-",default:"undefined"},{name:"label",description:"The textfield label",type:"string",values:"-",default:"undefined"},{name:"type",description:"The textfield type",type:"string",values:"text | tel | email | password | url | search",default:"text"},{name:"required",description:"Marks the textfield as required",type:"bool",values:"-",default:"false"},{name:"disabled",description:"Marks the textfield as disabled",type:"bool",values:"-",default:"false"},{name:"multiline",description:"Makes the textfield into a textarea than can support multiple lines.",type:"bool",values:"-",default:"false"},{name:"readonly",description:"Marks the textfield as readonly",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"Autofocuses the textfield when the component loads.",type:"bool",values:"-",default:"false"},{name:"min",description:"Sets the min value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"max",description:"Sets the max value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"maxlength",description:"Sets the max amount of characters that the textfield will accept",type:"number",values:"-",default:"undefined"},{name:"name",description:"Sets the name of the textfield.",type:"string",values:"-",default:"undefined"},{name:"id",description:"Sets the id of the textfield",type:"string",values:"-",default:"undefined"},{name:"autoresize",description:"If the textfield is multiline, then this will autoresize the textfield vertically as the user types.",type:"bool",values:"-",default:"true"}],css:[{name:"--kro-textfield-border-color",description:"The border color of the textifled",type:"color",default:"--kro-divider"},{name:"--kro-textifled-focused-border-color",description:"The border color of the textifled when it is focused",type:"color",default:"--kro-primary"}]},ToolbarMetadata:{title:"KroToolbar",description:"",props:[{name:"small",description:"Makes the height of the toolbar smaller.",type:"bool",values:"-",default:"false"},{name:"padded",description:"Adds padding to the toolbar.",type:"bool",values:"-",default:"false"},{name:"raised",description:"Adds a shadow to the toolbar.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-toolbar-height",description:"The height of the toolbar",type:"size",default:"4rem"},{name:"--kro-toolbar-background",description:"The background color of the toolbar",type:"color",default:"--kro-background-secondary"},{name:"--kro-toolbar-shadow",description:"The shadow of a raised toolbar",type:"color",default:"--kro-background-shadow"}]},DialogMetadata:{title:"KroDialog",description:"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.",props:[{name:"v-model",description:"Contorls the open state of the dialog",type:"bool",values:"-",default:"false"},{name:"persistent",description:"If enabled, the dialog can only be closed by the close button",type:"bool",values:"-",default:"false"}],events:[{name:"@open",description:"Fired when the dialog is opened",parameters:[]},{name:"@close",description:"Fired when the dialog is closed",parameters:[]}],slots:[{name:"#activator",description:"Slots the button that can be used to open the dialog",props:["open","close","toggle"]},{name:"#title",description:"Slot for the title of the dialog",props:["open","close","toggle"]},{name:"#controls",description:"Slot for the controls of the dialog",props:["open","close","toggle"]},{name:"#default",description:"Slot for the content of the dialog",props:[]}]},SurfaceMetadata:{title:"KroSurface",description:"A surface that contains content and can have a label",props:[{name:"padded",description:"Adds a padding to the container.",type:"bool",values:"-",default:"true"},{name:"raised",description:"Adds a shadow to the container.",type:"bool",values:"-",default:"true"},{name:"outline",description:"Adds an outline to the container.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the container.",type:"bool",values:"-",default:"undefined"},{name:"label",description:"Adds a label to the container.",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-surface-background",description:"",type:"color",default:"--kro-background-secondary"},{name:"--kro-surface-outline",description:"Sets the outline color of and outlined container",type:"color",default:"--kro-divider"},{name:"--kro-surface-shadow",description:"Sets the shadow of a raised container",type:"shadow",default:"--kro-shadow"}]},DividerMetadata:{title:"KroDivider",description:"",props:[{name:"vertical",description:"Makes the divider a vertical divider",type:"bool",values:"-",default:"false"}]},AlertMetadata:{title:"KroAlert",description:"",props:[{name:"type",description:"Defines the type of alert that is shown.",type:"string",values:["info","error","warning","success"],default:"info"},{name:"dismissible",description:"Shows a close icon on the alert allowing the user to dismiss the alert.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Sets the icon that is displayed on the alert.",type:"string",values:"-",default:"undefined"},{name:"tag",description:"Sets the root tage of the alert",type:"string",values:"-",default:"div"},{name:"outline",description:"Give the alert an outline style.",type:"bool",values:"-",default:"false"}],events:[{name:"@dismissed",description:"Fires when the alert is dismissed",parameters:[]},{name:"@show",description:"Fires when the alert is shown after being dismissed",parameters:[]}],slots:[{name:"#default",description:"Slot for the text content of the alert.",props:[]}]},AppMetadata:{title:"KroApp",description:""},ListMetadata:ue,MenuMetadata:{title:"KroMenu",description:"",props:[{name:"offsetX",description:"Offsets the menu horizontally so it is not covering the activator element.",type:"bool",values:"-",default:"false"},{name:"offsetY",description:"Offsets the menu vertically so it is not coverting the activator element",type:"bool",values:"-",default:"false"},{name:"left",description:"Positions the menu to open to the left of the activator.",type:"bool",values:"-",default:"false"},{name:"right",description:"Positions the menu to open to the right of the activator.",type:"bool",values:"-",default:"false"},{name:"top",description:"Positions the menut to open above the activator.",type:"bool",values:"-",default:"false"},{name:"bottom",description:"Positions the element to open below the activator.",type:"bool",values:"-",default:"false"}],slots:[{name:"#default",description:"",props:[]}],css:[{name:"--kro-menu-min-width",description:"",type:"size",default:"200px"},{name:"--kro-menu-max-width",description:"",type:"size",default:"300px"}]},AvatarMetadata:{title:"KroAvatar",description:"",props:[{name:"src",description:"Sets the image of the avatar",type:"string",values:"-",default:"undefined"},{name:"color",description:"Sets the color of the avatar.",type:"string",values:"-",default:"undefined"},{name:"small",description:"Makes the avatar smaller.",type:"bool",values:"-",default:"false"},{name:"large",description:"Makes the avatar larger.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-avatar-size",description:"",default:"3rem",type:"CSS Size Unit"},{name:"--kro-avatar-radius",description:"",default:"50%",type:"CSS Size Unit"}]},ProgressBarMetadata:{title:"KroProgressBar",description:"",props:[{name:"stream",description:"Display a speical style to the progress bar to indicate it is a stream",type:"bool",values:"-",default:"false"},{name:"indeterminate",description:"Display a special style to the progress bar to indicate that is indeterminate.",type:"",values:"-",default:"false"},{name:"rounded",description:"Applies a rounded style to the progress bar.",type:"bool",values:"-",default:"true"},{name:"value",description:"Sets the value of the progress bar.",type:"number",values:"-",default:"0"},{name:"bufferValue",description:"Sets the buffer value of the progress bar.",type:"number",values:"-",default:"100"}],css:[]},LayoutMetadata:{title:"KroLayout",description:"",props:[{name:"responsiveWidth",default:"768",description:"The width at which the drawer is hidden",type:"number",values:[]},{name:"temporary",default:"false",description:"Hides the drawer by default",type:"bool",values:[]},{name:"clipToolbar",default:"false",description:"Shifts the toolbar to the right to make room for the drawer",type:"bool",values:[]},{name:"mini",default:"false",description:"Makes the drawer smaller",type:"bool",values:[]},{name:"v-model:is-drawer-open",default:"true or false",description:"Controls the open state of the drawer",type:"bool",values:[]},{name:"v-model:is-drawer-hidden",default:"true or false",description:"Indicates if the drawer is in a default hidden state",type:"bool",values:[]}],slots:[{name:"#drawer",description:"Contains the sidebar navigation of the page",props:[]},{name:"#toolbar",description:"Contains the toolbar of the page",props:[]},{name:"#footer",description:"Contains the footer content of the page",props:[]},{name:"#default",description:"Contains the contents of the page",props:[]}]},SelectMetadata:{title:"KroSelect",description:"A styled select component.",props:[{name:"label",description:"",type:"bool",values:"-",default:"false"},{name:"required",description:"",type:"bool",values:"-",default:"false"},{name:"disabled",description:"",type:"bool",values:"-",default:"false"},{name:"readonly",description:"",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"",type:"string",values:"-",default:"undefined"},{name:"name",description:"",type:"string",values:"-",default:"undefined"},{name:"id",description:"",type:"string",values:"-",default:"undefined"}]},SliderMetadata:{title:"KroSlider",description:"",props:[{name:"v-model",description:"The value of the slider",type:"number",values:"-",default:"undefined"},{name:"disabled",description:"Disables the slider",type:"bool",values:"-",default:"false"},{name:"steps",description:"Sets the step amount for each tick",type:"number",values:"-",default:"1"},{name:"ticks",description:"Display the ticks on the slider",type:"bool",values:"-",default:"false"},{name:"min",description:"Set the min value of the slider",type:"number",values:"-",default:"0"},{name:"max",description:"Set the max value of the slider",type:"number",values:"-",default:"100"}],slots:[{name:"#thumb",description:"A slot to replace the default value of the thumb.",props:["value"]}],css:[{name:"--kro-slider-tick-color",description:"The color of the tick marks on the slider.",type:"color",default:"rgba(0, 0, 0, .24)"},{name:"--kro-slider-track-color",description:"The color of the slider track.",type:"color",default:"--kro-background-secondary"},{name:"--kro-slider-progress-color",description:"The color of the progress bar on the track.",type:"color",default:"--kro-primary"},{name:"--kro-slider-knob-color",description:"The color of the knob on the slider.",type:"color",default:"--kro-primary-lighten"},{name:"--kro-slider-thumb-foreground",description:"The foreground color of the thumb.",type:"color",default:"--kro-primary-foreground"},{name:"--kro-slider-thumb-background",description:"The background color of the thumb.",type:"color",default:"--kro-primary"}]}});exports.KroAlert=J,exports.KroApp=oe,exports.KroAvatar=fe,exports.KroButton=g,exports.KroButtonGroup=B,exports.KroDialog=H,exports.KroDivider=Y,exports.KroIcon=m,exports.KroLayout=ye,exports.KroListItem=ne,exports.KroMenu=pe,exports.KroProgressBar=ve,exports.KroSelect=Se,exports.KroSlider=Ne,exports.KroSpinner=f,exports.KroSquircle=k,exports.KroSurface=M,exports.KroSwitch=S,exports.KroTextfield=$,exports.KroToolbar=T,exports.KroUIBaseConfigurationPlugin=()=>({install(e,t){t.components&&Array.isArray(t.components)&&Object.entries(t.components).forEach(([t,o])=>{e.component(t,o)}),i()}}),exports.KroUIPlugin=Le,exports.Metadata=Pe,exports.useDialog=()=>({createDialog:e=>new Promise((t,o)=>{I(Object.assign(Object.assign({},E),e),t,o)}),createConfirmationDialog:e=>new Promise((t,o)=>{I(Object.assign(Object.assign({},P),e),t,o)})}),exports.useTheme=()=>({setTheme:e=>{s.value=e},getTheme:()=>s.value,theme:s});

dist/index.esm.js

@@ -1,2 +0,2 @@
-import{inject as e,watch as t,computed as o,openBlock as a,createBlock as n,createVNode as r,resolveComponent as i,resolveDynamicComponent as l,mergeProps as s,withCtx as u,createCommentVNode as d,renderSlot as c,withDirectives as p,vShow as f,ref as m,toDisplayString as v,defineComponent as h,onMounted as y,onUnmounted as k,cloneVNode as g,onUpdated as b,Fragment as _,Teleport as w,Transition as x,renderList as S,createTextVNode as V,reactive as A,watchEffect as L,useCssVars as B}from"vue";import{useLocalStorage as K,useThrottleFn as C,useEventListener as M,useMediaQuery as $,useMouseInElement as T}from"@vueuse/core";import H from"focus-trap";
+import{watch as e,computed as t,defineComponent as o,ref as a,onMounted as r,nextTick as n,openBlock as s,createBlock as l,createVNode as i,resolveComponent as d,resolveDynamicComponent as c,mergeProps as u,withCtx as p,createCommentVNode as f,renderSlot as m,withDirectives as v,vShow as h,toDisplayString as y,onUnmounted as k,cloneVNode as b,onUpdated as g,Fragment as _,Teleport as x,Transition as w,renderList as S,createTextVNode as B,reactive as K,watchEffect as $,useCssVars as A}from"vue";import{useLocalStorage as V,useThrottleFn as T,useEventListener as M,useMediaQuery as O,useMouseInElement as C}from"@vueuse/core";import D from"@purge-icons/generated";import q from"focus-trap";let j;const L=()=>({setTheme:e=>{j.value=e},getTheme:()=>j.value,theme:j}),E=()=>{j=V("kro.theme","default-dark"),e(()=>j.value,()=>{document.documentElement.className="kro-theme__"+j.value},{immediate:!0})},F=[{name:"to",description:"Denotes the target route of the link.",type:"string | object",values:"-",default:"undefined"},{name:"exact",description:"Exactly match the link. Without this, '/' will match every route.",type:"bool",values:"-",default:"undefined"},{name:"activeClass",description:"Configure the active CSS class applied when the link is active",type:"string",values:"-",default:"undefined"},{name:"exactActiveClass",description:"Configure the active CSS class applied when the link is active with exact match.",type:"string",values:"-",default:"undefined"},{name:"href",description:"Designates the component as anchor and applies the href attribute.",type:"string",values:"-",default:"undefined"},{name:"target",description:"Designates the target attribute. This should only be applied when using the href prop.",type:"string",values:"-",default:"undefined"}],P={to:{type:[String,Object]},href:String,target:{type:String,default:"_blank"},exact:{type:Boolean,default:!1},activeClass:String,exactActiveClass:String},z=e=>({tag:e.to?"router-link":e.href?"a":null,componentProps:t(()=>e.to?{to:e.to}:e.href?{href:e.href}:{}),routeData:e});
 /*! *****************************************************************************
@@ -15,2 +15,3 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var D=function(){return(D=Object.assign||function(e){for(var t,o=1,a=arguments.length;o<a;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};function q(){for(var e=0,t=0,o=arguments.length;t<o;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<o;t++)for(var r=arguments[t],i=0,l=r.length;i<l;i++,n++)a[n]=r[i];return a}var O=Symbol();function P(){return{icons:e(O)}}var E,F=function(){return{setTheme:function(e){E.value=e},getTheme:function(){return E.value},theme:E}},z=function(){E=K("kro.theme","default-dark"),t((function(){return E.value}),(function(){document.documentElement.className="kro-theme__"+E.value}),{immediate:!0})},I={explore:"M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z",home:"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z","arrow-right":"M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z",menu:"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z",settings:"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",external:"M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z",search:"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",success:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z",error:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z",warning:"M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",info:"M10 3H14V14H10V3M10 21V17H14V21H10Z",close:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",question:"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z",invert:"M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z","chevron-down":"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"},N=[{name:"to",description:"Denotes the target route of the link.",type:"string | object",values:"-",default:"undefined"},{name:"exact",description:"Exactly match the link. Without this, '/' will match every route.",type:"bool",values:"-",default:"undefined"},{name:"activeClass",description:"Configure the active CSS class applied when the link is active",type:"string",values:"-",default:"undefined"},{name:"exactActiveClass",description:"Configure the active CSS class applied when the link is active with exact match.",type:"string",values:"-",default:"undefined"},{name:"href",description:"Designates the component as anchor and applies the href attribute.",type:"string",values:"-",default:"undefined"},{name:"target",description:"Designates the target attribute. This should only be applied when using the href prop.",type:"string",values:"-",default:"undefined"}],j={to:{type:[String,Object]},href:String,target:{type:String,default:"_blank"},exact:{type:Boolean,default:!1},activeClass:String,exactActiveClass:String},Z=function(e){return{tag:e.to?"router-link":e.href?"a":null,componentProps:o((function(){return e.to?{to:e.to}:e.href?{href:e.href}:{}})),routeData:e}},R={name:"KroIcon",props:{icon:{type:String,required:!0}},setup:function(e){var t=P().icons;return{iconDefinition:o((function(){return t&&t[e.icon]?t[e.icon]:(console.error('Kro UI Error: No Icon Named "'+e.icon+'". Did you register your icon in the kro ui plugin?'),"M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z")}))}}};const W={class:"kro-icon",viewBox:"0 0 24 24"};R.render=function(e,t,o,i,l,s){return a(),n("svg",W,[r("path",{d:i.iconDefinition},null,8,["d"])])},R.__file="src/components/Icon/Icon.vue";var G={name:"KroSpinner"};const U={class:"kro-spinner"};G.render=function(e,t,o,r,i,l){return a(),n("div",U)},G.__file="src/components/Spinner/Spinner.vue";var X={name:"KroSquircle"};const Y={class:"kro-squircle",viewBox:"0 0 400 400","enable-background":"new 0 0 400 400","xml:space":"preserve"},J=r("path",{d:"M 0,200 C 0,0 0,0 200,0 S 400,0 400,200 400,400 200,400 0,400 0,200"},null,-1);X.render=function(e,t,o,r,i,l){return a(),n("svg",Y,[J])},X.__file="src/components/Squircle/Squircle.vue";var Q={name:"KroButton",components:{KroIcon:R,KroSpinner:G,KroSquircle:X},props:D(D({},j),{loading:{type:Boolean,default:!1},type:String,primary:Boolean,outline:Boolean,raised:Boolean,icon:String,hideExternalIcon:Boolean,warning:Boolean,error:Boolean,success:Boolean}),setup:function(e){var t=Z(e),a=t.tag;return{componentProps:t.componentProps,componentType:o((function(){return a||"button"}))}}};const ee={class:"kro-button__spinner"};Q.render=function(e,t,o,m,v,h){const y=i("kro-squircle"),k=i("kro-icon"),g=i("kro-spinner");return a(),n(l(m.componentType),s({class:{"kro-button":!0,"kro-button--primary":o.primary,"kro-button--outline":o.outline,"kro-button--raised":o.raised,"kro-button--warning":o.warning,"kro-button--success":o.success,"kro-button--error":o.error,"kro-button--is-icon-button":o.icon&&!e.$slots.default},rel:"noreferrer"},m.componentProps,{target:e.href?e.target:""}),{default:u(()=>[o.icon&&!e.$slots.default?r(y,{key:0,class:"kro-button__squircle"}):d("v-if",!0),r("span",{class:{"kro-button__content":!0,"kro-button__content--is-loading":o.loading}},[o.icon?r(k,{key:0,class:"kro-button__icon",icon:o.icon},null,8,["icon"]):d("v-if",!0),c(e.$slots,"default"),!e.href||o.icon&&!e.$slots.default||o.hideExternalIcon?d("v-if",!0):r(k,{key:1,icon:"external"})],2),p(r("span",ee,[r(g)],512),[[f,o.loading]])]),_:3},16,["class","target"])},Q.__file="src/components/Button/Button.vue";var te={title:"KroButton",description:"A styled button with added functionality",props:q([{name:"loading",description:"Displays a loading indicator over the button",type:"bool",values:"-",default:"false"},{name:"type",description:"The type of the button",type:"string",values:["button","reset","submit"],default:"button"},{name:"primary",description:"Applies a style to the button to indicate that it is a primary button",type:"bool",values:"-",default:"false"},{name:"outline",description:"Give the button an outline style",type:"bool",values:"-",default:"false"},{name:"raised",description:"Apply a shadow to the button",type:"string",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the button",type:"string",values:"-",default:"undefined"},{name:"hideExternalIcon",description:"Hides the external link icon for buttons that are links.",type:"bool",values:"-",default:"false"}],N)},oe={name:"KroButtonGroup"};const ae={class:"kro-button-group"};oe.render=function(e,t,o,r,i,l){return a(),n("div",ae,[c(e.$slots,"default")])},oe.__file="src/components/ButtonGroup/ButtonGroup.vue";var ne={name:"KroSwitch",emits:["update:modelValue"],props:{value:String},setup:function(e,t){var o=t.emit,a=t.attrs;return{update:function(t){t.target.checked?e.value?Array.isArray(a.modelValue)&&o("update:modelValue",q(a.modelValue,[e.value])):o("update:modelValue",!0):e.value?Array.isArray(a.modelValue)&&o("update:modelValue",a.modelValue.filter((function(t){return t!=e.value}))):o("update:modelValue",!1)}}}};const re={class:"kro-switch"},ie={class:"kro-switch__container"},le={class:"kro-switch__track"},se=r("div",{class:"kro-switch__knob"},null,-1),ue={key:0,class:"kro-switch__label"};ne.render=function(e,t,o,i,l,s){return a(),n("div",re,[r("div",ie,[r("input",{class:"kro-switch__input",checked:Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue,type:"checkbox",onChange:t[1]||(t[1]=(...e)=>i.update(...e))},null,40,["checked"]),r("div",le,[r("div",{class:{"kro-switch__track-active":!0,"kro-switch__track-active--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue}},null,2)]),r("div",{class:{"kro-switch__knob-container":!0,"kro-switch__knob-container--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue}},[se],2)]),e.$slots.default?(a(),n("div",ue,[c(e.$slots,"default")])):d("v-if",!0)])},ne.__file="src/components/Switch/Switch.vue";var de={name:"KroTextfield",emits:["update:modelValue"],props:{label:{type:String},type:{type:String,default:"text"},required:{type:Boolean},disabled:{type:Boolean},multiline:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},min:{type:Number},max:{type:Number},maxlength:{type:Number},name:{type:String},id:{type:String},autoResize:{type:Boolean,default:!0},loading:{type:Boolean},success:{type:Boolean},error:{type:Boolean},message:{type:String}},setup:function(e){var t=m(!1),o=m();return{focused:t,runAutoResize:function(){e.autoResize&&o.value&&(o.value.style.height="auto",o.value.style.height=o.value.scrollHeight+"px")},inputRef:o}}};const ce={key:2,class:"block pr-2"},pe={key:0,class:"pl-4 text-xs font-medium"};de.render=function(e,t,o,l,s,u){const p=i("kro-spinner"),f=i("kro-icon");return a(),n("div",{class:["kro-textfield",{"kro-textfield--is-textarea":o.multiline}]},[r("div",{class:{"kro-textfield__container":!0,"kro-textfield--focused":l.focused,"kro-textfield--has-text":e.$attrs.modelValue,"kro-textfield--is-textarea":o.multiline}},[r("label",{class:{"kro-textfield__label":!0,"kro-textfield--focused":l.focused,"kro-textfield--has-text":e.$attrs.modelValue},for:o.id},v(o.label),11,["for"]),r("span",{class:{"kro-textfield__pseudo-label":!0,"kro-textfield--focused":l.focused,"kro-textfield--has-text":e.$attrs.modelValue}},v(o.label),3),o.multiline?(a(),n("textarea",{key:1,ref:"inputRef",class:"kro-textfield__input",disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,maxlength:o.maxlength,name:o.name,id:o.id,value:e.$attrs.modelValue,onInput:t[4]||(t[4]=t=>{e.$emit("update:modelValue",t.target.value),l.runAutoResize()}),onFocus:t[5]||(t[5]=e=>l.focused=!0),onBlur:t[6]||(t[6]=e=>l.focused=!1)},null,40,["disabled","required","readonly","autofocus","maxlength","name","id","value"])):(a(),n("input",{key:0,class:"kro-textfield__input",disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,type:o.type,min:o.min,max:o.max,maxlength:o.maxlength,name:o.name,id:o.id,value:e.$attrs.modelValue,onInput:t[1]||(t[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:t[2]||(t[2]=e=>l.focused=!0),onBlur:t[3]||(t[3]=e=>l.focused=!1)},null,40,["disabled","required","readonly","autofocus","type","min","max","maxlength","name","id","value"])),o.loading||o.success||o.error?(a(),n("div",ce,[o.loading?r(p,{key:0,class:"kro-textfield__spinner"}):o.success?r(f,{key:1,class:"kro-textfield__success-icon",icon:"success"}):o.error?r(f,{key:2,class:"kro-textfield__error-icon",icon:"error"}):d("v-if",!0)])):d("v-if",!0)],2),e.$slots.default?(a(),n("div",pe,[c(e.$slots,"default")])):d("v-if",!0)],2)},de.__file="src/components/Textfield/Textfield.vue";var fe={name:"KroToolbar",props:{small:Boolean,padded:Boolean,raised:Boolean}};fe.render=function(e,t,o,r,i,l){return a(),n("div",{class:{"kro-toolbar":!0,"kro-toolbar--small":o.small,"kro-toolbar--raised":o.raised,"kro-toolbar--padded":o.padded}},[c(e.$slots,"default")],2)},fe.__file="src/components/Toolbar/Toolbar.vue";var me={name:"KroSurface",props:{padded:{type:Boolean,default:!0},raised:{type:Boolean,default:!0},outline:{type:Boolean,default:!1},icon:String,label:String}};const ve={key:0,class:"kro-surface__label-container"},he={key:1,class:"kro-surface__label"};me.render=function(e,t,o,l,s,u){const p=i("kro-icon");return a(),n("div",{class:{"kro-surface":!0,"kro-surface--padded":o.padded,"kro-surface--raised":o.raised,"kro-surface--outline":o.outline}},[o.icon||o.label?(a(),n("div",ve,[o.icon?r(p,{key:0,class:"kro-surface__icon",icon:o.icon},null,8,["icon"]):d("v-if",!0),o.label?(a(),n("div",he,v(o.label),1)):d("v-if",!0)])):d("v-if",!0),c(e.$slots,"default")],2)},me.__file="src/components/Surface/Surface.vue";var ye=h({emits:["update:active","activate","deactivate"],props:{active:{type:Boolean,default:!0},escapeDeactivates:{type:Boolean,default:!0},returnFocusOnDeactivate:{type:Boolean,default:!0},allowOutsideClick:{type:Boolean,default:!0},initialFocus:{type:[String,Function],default:void 0},fallbackFocus:{type:[String,Function],default:void 0}},setup:function(e,o){var a,n=o.slots,r=o.emit,i=m(null);return y((function(){t((function(){return e.active}),(function(t){var o,n;t&&i.value?(a=H(i.value,{escapeDeactivates:e.escapeDeactivates,allowOutsideClick:function(){return e.allowOutsideClick},returnFocusOnDeactivate:e.returnFocusOnDeactivate,onActivate:function(){r("update:active",!0),r("activate")},onDeactivate:function(){r("update:active",!1),r("deactivate")},initialFocus:"string"==typeof e.initialFocus?e.initialFocus:null!==(n=null===(o=e.initialFocus)||void 0===o?void 0:o.call(e))&&void 0!==n?n:i.value,fallbackFocus:e.fallbackFocus})).activate():null==a||a.deactivate()}),{immediate:!0})})),k((function(){null==a||a.deactivate(),a=null})),function(){var e,t=null===(e=n.default)||void 0===e?void 0:e.call(n);if(!t||!t.length||t.length>1)throw new Error("FocusTrap requires exactly one child");return g(t[0],{ref:i})}}}),ke=function(){return{disableDocumentScroll:function(){document.documentElement.classList.add("kro-helper--prevent-scroll")},enableDocumentScroll:function(){document.documentElement.classList.remove("kro-helper--prevent-scroll")},disableDocumentSelect:function(){document.documentElement.classList.add("kro-helper--prevent-select")},enableDocumentSelect:function(){document.documentElement.classList.remove("kro-helper--prevent-select")},enableAppFocus:function(){var e;null===(e=document.querySelector("#app"))||void 0===e||e.removeAttribute("tabindex")},disableAppFocus:function(){var e;null===(e=document.querySelector("#app"))||void 0===e||e.setAttribute("tabindex","-1")}}},ge={title:"Dialog Title",message:"Dialog Message",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},be={title:"Confirmation Dialog",message:"Dialog Message",icon:"question",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},_e=m([]),we=function(e,t,o){var a=D(D({},e),{isOpen:m(!0),resolve:t,reject:o,destroy:function(){_e.value.splice(_e.value.indexOf(this),1)}});_e.value=q(_e.value,[a])},xe=function(){return{createDialog:function(e){return new Promise((function(t,o){we(D(D({},ge),e),t,o)}))},createConfirmationDialog:function(e){return new Promise((function(t,o){we(D(D({},be),e),t,o)}))}}};var Se=h(D(D({},{name:"KroDialog",inheritAttrs:!1,emits:["update:modelValue","close","open","close-animation-end"],components:{KroSurface:me,FocusTrap:ye}}),{props:{persistent:{type:null,required:!1}},setup:function(e,t){var o=t.emit,a=t.attrs,n=ke(),r=n.disableDocumentScroll,i=n.enableDocumentScroll,l=m(null),s=!1;b((function(){s||!0!==a.modelValue||(o("update:modelValue",!0),o("open"),r(),window.addEventListener("keydown",d),l.value&&l.value.focus())}));var u=function(){s=!0,o("update:modelValue",!0),o("open"),r(),window.addEventListener("keydown",d),l.value&&l.value.focus()},d=function(t){(function(t){return"keydown"!==(null==t?void 0:t.type)||"Escape"===t.key&&!e.persistent})(t)&&(o("update:modelValue",!1),o("close"),window.removeEventListener("keydown",d),i(),s=!1)};return{dialog:l,onDialogLeaveAnimationComplete:function(){o("close-animation-end")},open:u,close:d,toggle:function(){a.modelValue?d(null):u()}}}}));const Ve={tabindex:"-1",ref:"dialog",class:"kro-dialog__container p-4 fixed inset-0 grid grid-cols-1 items-center justify-center pointer-events-none"},Ae={class:"grid grid-row gap-4"},Le={key:0,class:"kro-dialog__header text-lg"},Be={class:"kro-dialog__body"},Ke={key:1,class:"kro-dialog__footer flex flex-row align-middle gap-4"};Se.render=function(e,t,o,l,p,f){const m=i("focus-trap"),v=i("kro-surface");return a(),n(_,null,[c(e.$slots,"activator",{close:l.close,open:l.open,toggle:l.toggle}),(a(),n(w,{to:"#kro-portal"},[r(x,{appear:"",name:"kro-dialog-scrim"},{default:u(()=>[e.$attrs.modelValue?(a(),n("div",{key:0,onClick:t[1]||(t[1]=()=>{o.persistent||l.close()}),class:"kro-dialog__scrim fixed inset-0"})):d("v-if",!0)]),_:1}),r("div",Ve,[r(x,{appear:"",name:"kro-dialog","onAfter-leave":l.onDialogLeaveAnimationComplete},{default:u(()=>[e.$attrs.modelValue?r(v,s({key:0,class:"kro-dialog pointer-events-auto max-w-xl"},e.$attrs),{default:u(()=>[r(m,{modelValue:e.$attrs.modelValue,"onUpdate:modelValue":t[2]||(t[2]=t=>e.$attrs.modelValue=t)},{default:u(()=>[r("div",Ae,[e.$slots.header?(a(),n("div",Le,[c(e.$slots,"header",{open:l.open,close:l.close,toggle:l.toggle})])):d("v-if",!0),r("div",Be,[c(e.$slots,"default",{open:l.open,close:l.close,toggle:l.toggle})]),e.$slots.footer?(a(),n("div",Ke,[c(e.$slots,"footer",{open:l.open,close:l.close,toggle:l.toggle})])):d("v-if",!0)])]),_:3},8,["modelValue"])]),_:1},16):d("v-if",!0)]),_:1},8,["onAfter-leave"])],512)]))],64)},Se.__file="src/components/Dialog/Dialog.vue";var Ce={name:"KroDivider",props:{vertical:Boolean,inset:Boolean,label:String}};const Me={key:0};Ce.render=function(e,t,o,r,i,l){return a(),n("div",{class:["kro-divider",{"kro-divider--vertical":o.vertical,"kro-divider--inset":o.inset}]},[o.label?(a(),n("span",Me,v(o.label),1)):d("v-if",!0)],2)},Ce.__file="src/components/Divider/Divider.vue";var $e={name:"KroAlert",components:{KroIcon:R,KroButton:Q},emits:["dismissed","show"],props:{type:{type:String,default:"info"},dismissible:{type:Boolean,default:!1},tag:{type:String,default:"div"},icon:String,outline:{type:Boolean,default:!1}},setup:function(e,t){var a=t.emit,n=m(!1);return{iconName:o((function(){var t=e.type,o=e.icon;return o||("warning"===t?"warning":"info"===t?"info":"error"===t?"error":"success"===t?"success":null)})),isHidden:n,hide:function(){a("dismissed"),n.value=!0},show:function(){a("show"),n.value=!1}}}};const Te={class:"kro-alert__icon"},He={key:0};$e.render=function(e,t,o,s,m,v){const h=i("kro-icon"),y=i("kro-button");return p((a(),n(l(o.tag),{class:{"kro-alert":!0,"kro-alert--error":"error"===o.type,"kro-alert--info":"info"===o.type,"kro-alert--warning":"warning"===o.type,"kro-alert--success":"success"===o.type,"kro-alert--outline":o.outline,"kro-alert--has-icon":s.iconName,"kro-alert--is-dismissible":o.dismissible}},{default:u(()=>[r("div",Te,[s.iconName?r(h,{key:0,icon:s.iconName},null,8,["icon"]):d("v-if",!0)]),r("div",null,[c(e.$slots,"default")]),o.dismissible?(a(),n("div",He,[r(y,{onClick:s.hide,icon:"close"},null,8,["onClick"])])):d("v-if",!0)]),_:3},8,["class"])),[[f,!s.isHidden]])},$e.__file="src/components/Alert/Alert.vue";var De=h(D(D({},{name:"ComposableDialogs"}),{setup:function(){return{instances:_e}}}));De.render=function(e,t,o,l,c,p){const f=i("kro-icon"),m=i("kro-button"),h=i("kro-dialog");return a(!0),n(_,null,S(l.instances,e=>(a(),n("div",null,[r(h,{modelValue:e.isOpen,"onUpdate:modelValue":t=>e.isOpen=t,"onClose-animation-end":t=>e.destroy(),class:{"kro-composable-dialog--centered":"centered"===e.style}},{header:u(()=>[r("div",{class:["flex items-center",{"flex-col":"centered"===e.style}]},[e.icon?r(f,{key:0,style:{color:e.iconColor?e.iconColor:""},class:[{"kro-composable-dialog__icon--large":"centered"===e.style},"mr-4"],icon:e.icon},null,8,["style","class","icon"]):d("v-if",!0),V(" "+v(e.title),1)],2)]),default:u(()=>[r("div",{class:{"text-center":"centered"===e.style}},v(e.message),3)]),footer:u(({close:t})=>[r("div",{class:["flex flex-row flex-1 gap-4",{"justify-end":"centered"!==e.style,"justify-center":"centered"===e.style}]},[e.rejectButton.hidden?d("v-if",!0):r(m,s({key:0},e.rejectButton.attributes,{onClick:()=>{e.reject(),t()}}),{default:u(()=>[V(v(e.rejectButton.text),1)]),_:2},1040,["onClick"]),e.resolveButton.hidden?d("v-if",!0):r(m,s({key:1},e.resolveButton.attributes,{onClick:()=>{e.resolve(),t()}}),{default:u(()=>[V(v(e.resolveButton.text),1)]),_:2},1040,["onClick"])],2)]),_:2},1032,["modelValue","onUpdate:modelValue","onClose-animation-end","class"])]))),256)},De.__file="src/components/App/components/ComposableDialogs.vue";var qe={name:"KroApp",components:{ComposableDialogs:De}};const Oe={class:"kro-app"},Pe={class:"kro-app__content"};qe.render=function(e,t,o,l,s,u){const d=i("composable-dialogs");return a(),n("div",Oe,[r("div",Pe,[c(e.$slots,"default")]),r(d)])},qe.__file="src/components/App/App.vue";var Ee={name:"KroListItem",props:D(D({},j),{tag:{type:String,default:"div"},href:{type:String,default:void 0},to:{type:[String,Object]}}),setup:function(e){var t=Z(e),a=t.tag;return{componentProps:t.componentProps,componentType:o((function(){return a||"div"}))}}};const Fe={key:0,class:"kro-list-item__icon"},ze={class:"kro-list-item__content"},Ie={class:"kro-list-item__title"},Ne={key:0,class:"kro-list-item__subtitle"},je={key:1,class:"kro-list-item__action"};Ee.render=function(e,t,o,i,p,f){return a(),n(l(i.componentType),s(i.componentProps,{class:"kro-list-item"}),{default:u(()=>[e.$slots.icon?(a(),n("div",Fe,[c(e.$slots,"icon")])):d("v-if",!0),r("div",ze,[r("span",Ie,[c(e.$slots,"default")]),e.$slots.subtitle?(a(),n("span",Ne,[c(e.$slots,"subtitle")])):d("v-if",!0)]),e.$slots.action?(a(),n("div",je,[c(e.$slots,"action")])):d("v-if",!0)]),_:3},16)},Ee.__file="src/components/List/ListItem.vue";var Ze={title:"KroListItem",description:"",props:q([{name:"tag",description:"",type:"string",values:"-",default:"div"}],N),slots:[{name:"#icon",description:"Item icon slot",props:[]},{name:"#subtitle",description:"Item subtitle slot",props:[]},{name:"#action",description:"Action on the right side of the item",props:[]},{name:"#default",description:"Main text of the item",props:[]}]},Re={name:"KroMenu",emits:["open","close"],props:{offsetX:{type:Boolean,default:!1},offsetY:{type:Boolean,default:!1},left:Boolean,right:Boolean,top:Boolean,bottom:Boolean},setup:function(e,t){var o=t.emit,a=m(!1),n=m(null),r=m(null),i=A({"kro-menu__content--y-bottom":!1,"kro-menu__content--y-bottom-offset":!1,"kro-menu__content--y-top":!1,"kro-menu__content--y-top-offset":!1,"kro-menu__content--x-left":!1,"kro-menu__content--x-left-offset":!1,"kro-menu__content--x-right":!1,"kro-menu__content--x-right-offset":!1}),l=function(){Object.keys(i).forEach((function(e){return i[e]=!1}));var t=e.offsetX,l=e.offsetY,s=e.left,u=e.right,d=e.top,c=e.bottom,p=function(e,t,o){if(!e.value||!t.value)return{canFit:{top:!1,bottom:!1,left:!1,right:!1}};var a=window.innerWidth,n=window.innerHeight,r=e.value.getBoundingClientRect(),i=t.value,l=o.offsetX?r.width:0,s=o.offsetY?r.height:0;return{canFit:{bottom:i.offsetHeight+r.top+s<n,top:i.offsetHeight<r.top,left:i.offsetTop<r.left,right:i.offsetWidth+r.left+l<a}}}(n,r,{offsetX:t,offsetY:l}).canFit;p.top&&d?i["kro-menu__content--y-top"+(l?"-offset":"")]=!0:p.bottom&&c||p.bottom?i["kro-menu__content--y-bottom"+(l?"-offset":"")]=!0:p.top&&(i["kro-menu__content--y-top"+(l?"-offset":"")]=!0),p.left&&s?i["kro-menu__content--x-left"+(t?"-offset":"")]=!0:p.right&&u||p.right?i["kro-menu__content--x-right"+(t?"-offset":"")]=!0:p.left&&(i["kro-menu__content--x-left"+(t?"-offset":"")]=!0),o("open"),a.value=!0},s=function(){o("close"),a.value=!1};return{isOpen:a,classes:i,open:l,close:s,toggle:function(){a.value?s():l()},menu:r,container:n}}};const We={ref:"container",class:"kro-menu"};Re.render=function(e,t,o,i,l,s){return a(),n("div",We,[r("div",{onClick:t[1]||(t[1]=(...e)=>i.close(...e)),class:["kro-menu__scrim",{"kro-menu__scrim--is-open":i.isOpen}]},null,2),c(e.$slots,"activator",{open:i.open}),r("div",{ref:"menu",class:["kro-menu__content",{...i.classes,"kro-menu__content--is-open":i.isOpen}]},[c(e.$slots,"default")],2)],512)},Re.__file="src/components/Menu/Menu.vue";var Ge={name:"KroAvatar",props:{src:String,color:String,small:Boolean,large:Boolean}};Ge.render=function(e,t,o,r,i,l){return a(),n("div",{class:["kro-avatar",{"kro-avatar__small":o.small,"kro-avatar__large":o.large}]},[o.src?(a(),n("img",{key:0,src:o.src,alt:""},null,8,["src"])):o.color?(a(),n("div",{key:1,style:{backgroundColor:o.color},class:"kro-avatar__color-circle"},null,4)):d("v-if",!0)],2)},Ge.__file="src/components/Avatar/Avatar.vue";var Ue={name:"KroProgressBar",props:{stream:Boolean,indeterminate:Boolean,rounded:{type:Boolean,default:!0},value:{type:Number,default:0},bufferValue:{type:Number,default:100}}};const Xe=r("div",{class:"kro-progress-bar__stream"},[r("div",{class:"kro-progress-bar__stream-content"})],-1),Ye=r("div",{class:"kro-progress-bar__indeterminate"},null,-1);Ue.render=function(e,t,o,i,l,s){return a(),n("div",{class:{"kro-progress-bar":!0,"kro-progress-bar--is-stream":o.stream,"kro-progress-bar--is-indeterminate":o.indeterminate,"kro-progress-bar--rounded":o.rounded}},[Xe,r("div",{class:"kro-progress-bar__buffer",style:{"--kro-progress-bar-buffer-value":o.bufferValue-100+"%"}},null,4),r("div",{class:"kro-progress-bar__progress",style:{"--kro-progress-bar-value":o.value-100+"%"}},null,4),Ye],2)},Ue.__file="src/components/ProgressBar/ProgressBar.vue";var Je=h(D(D({},{name:"KroLayout",components:{KroToolbar:fe},emits:["update:is-drawer-open","update:is-drawer-hidden"]}),{props:{absolute:{type:Boolean,required:!1},responsiveWidth:{type:Number,required:!1},temporary:{type:Boolean,required:!1},right:{type:Boolean,required:!1},toolbarHeight:{type:String,required:!1},clipToolbar:{type:Boolean,required:!1},mini:{type:Boolean,required:!1}},setup:function(e,t){var a=m(!!t.slots.drawer),n=$("(max-width: "+(e.responsiveWidth||768)+"px)"),r=o((function(){return e.mini?"6rem":"16rem"})),i=o((function(){return n.value||e.temporary||!a.value?"0":"var(--drawerWidth)"})),l=o((function(){return e.toolbarHeight||"4rem"})),s=o((function(){return e.clipToolbar?"var(--contentOffsetLeft)":"0"})),u=o((function(){return e.clipToolbar||n.value||e.temporary?"0":"var(--toolbarHeight)"}));return b((function(){a.value=!!t.slots.drawer})),L((function(){t.emit("update:is-drawer-open",!(n.value||e.temporary)),t.emit("update:is-drawer-hidden",n.value||e.temporary)})),B((function(e){return{drawerWidth:r,toolbarHeight:l,toolbarLeftOffset:s,drawerOffsetTop:u,contentOffsetLeft:i}})),{hasDrawer:a,isSmallScreen:n,drawerWidth:r,contentOffsetLeft:i,toolbarHeight:l,toolbarLeftOffset:s,drawerOffsetTop:u}}}));const Qe={class:"kro-layout"},et={key:2,class:"kro-layout__toolbar"},tt={class:"kro-layout__container"},ot={key:0,class:"kro-layout__content"},at={key:1,class:"kro-layout__footer"};Je.render=function(e,t,o,i,l,s){return a(),n("div",Qe,[e.$slots.drawer?(a(),n("div",{key:0,class:["kro-layout__scrim",{"kro-layout__scrim--is-open":e.$attrs["is-drawer-open"]&&(i.isSmallScreen||o.temporary)}],onClick:t[1]||(t[1]=t=>e.$emit("update:is-drawer-open",!1))},null,2)):d("v-if",!0),e.$slots.drawer?(a(),n("div",{key:1,class:["kro-layout__drawer",{"kro-layout__drawer--hidden":i.isSmallScreen||o.temporary,"kro-layout__drawer--is-open":e.$attrs["is-drawer-open"]}]},[c(e.$slots,"drawer")],2)):d("v-if",!0),e.$slots.toolbar?(a(),n("div",et,[c(e.$slots,"toolbar")])):d("v-if",!0),r("div",tt,[e.$slots.default?(a(),n("div",ot,[c(e.$slots,"default")])):d("v-if",!0),e.$slots.footer?(a(),n("div",at,[c(e.$slots,"footer")])):d("v-if",!0)])])},Je.__file="src/components/Layout/Layout.vue";var nt={name:"KroNavigation",emits:["update:modelValue"],props:{temporary:{type:Boolean,default:!1}},setup:function(e,t){var o=t.emit;return{open:function(){return o("update:modelValue",!0)},close:function(){return o("update:modelValue",!1)}}}};const rt={class:"kro-navigation"};nt.render=function(e,t,o,i,l,s){return a(),n("div",rt,[r("div",{class:{"kro-navigation__scrim":!0,"kro-navigation--is-open":e.$attrs.modelValue,"kro-navigation--is-temporary":o.temporary},onClick:t[1]||(t[1]=(...e)=>i.close(...e))},null,2),r("div",{class:{"kro-navigation__content":!0,"kro-navigation--is-open":e.$attrs.modelValue,"kro-navigation--is-temporary":o.temporary}},[c(e.$slots,"default",{close:i.close,open:i.open})],2)])},nt.__file="src/components/Navigation/Navigation.vue";var it={name:"KroSelect",emits:["update:modeValue"],props:{label:{type:String},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},name:{type:String},id:{type:String}},setup:function(e,t){var o=t.attrs,a=m(!1),n=m(null);return y((function(){n.value&&Array.from(n.value.options).forEach((function(e){e.value===o.modelValue&&(e.selected=!0)}))})),{focused:a,select:n}}};const lt={class:"kro-select"},st={class:"kro-select__hidden-label"},ut=r("option",{selected:"",hidden:""},null,-1);it.render=function(e,t,o,l,s,u){const d=i("kro-icon");return a(),n("div",lt,[r("div",{class:{"kro-select__container":!0,"kro-select--focused":l.focused,"kro-select--has-text":e.$attrs.modelValue}},[r("label",{class:{"kro-select__label":!0,"kro-select--focused":l.focused,"kro-select--has-text":e.$attrs.modelValue},for:o.id},v(o.label),11,["for"]),r("div",st,v(o.label),1),r("span",{class:{"kro-select__pseudo-label":!0,"kro-select--focused":l.focused,"kro-select--has-text":e.$attrs.modelValue}},v(o.label),3),r("select",{class:"kro-select__input",ref:"select",disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,name:o.name,id:o.id,value:e.$attrs.modelValue,onChange:t[1]||(t[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:t[2]||(t[2]=e=>l.focused=!0),onBlur:t[3]||(t[3]=e=>l.focused=!1)},[ut,c(e.$slots,"default")],40,["disabled","required","readonly","autofocus","name","id","value"]),r(d,{class:"kro-select__icon",icon:"chevron-down"})],2)])},it.__file="src/components/Select/Select.vue";var dt={name:"KroSlider",emits:["update:modelValue"],props:{disabled:{type:Boolean,default:!1},step:{type:Number,default:1},ticks:{default:!1,type:[Boolean,String]},min:{type:Number,default:0},max:{type:Number,default:100}},setup:function(e,a){var n=a.emit,r=a.attrs,i=m(),l=m(),s=function(e){var t=T(e),a=t.x,n=t.elementPositionX,r=t.elementWidth,i=o((function(){return Math.min(Math.max(0,a.value-n.value),r.value)/(r.value||1)}));return{elementWidth:r,targetPercentage:i}}(i).targetPercentage,u=function(e){var o=m(0),a=m(0),n=m(0),r=m(0),i=function(e){var t=e.getBoundingClientRect(),i=t.left,l=t.top,s=t.width,u=t.height;o.value=s,a.value=u,n.value=i,r.value=l};t(e,(function(e){var t=e||document.body;i(t)}));var l=C((function(){var t=e.value||document.body;i(t)}),250);return M("resize",l),{elementWidth:o,elementHeight:a,elementLeft:n,elementTop:r}}(i).elementWidth,d=m(!1),c=ke(),p=c.disableDocumentSelect,f=c.enableDocumentSelect,v=function(){d.value=!1,f(),removeEventListener("touchcancel",v),removeEventListener("touchend",v),removeEventListener("mouseup",v)},h=function(){d.value=!0,p(),addEventListener("touchcancel",v),addEventListener("touchend",v),addEventListener("mouseup",v)},k=o((function(){return u.value/Math.ceil((e.max-e.min)/e.step)})),g=function(){n("update:modelValue",Math.max(e.min,Math.min(e.max,r.modelValue-e.step)))},b=function(){n("update:modelValue",Math.max(e.min,Math.min(e.max,r.modelValue+e.step)))};return y((function(){n("update:modelValue",Math.max(e.min,Math.min(r.modelValue||0,e.max)))})),L((function(){d.value&&n("update:modelValue",Math.max(e.min,Math.min(Math.round(s.value*(e.max-e.min)/e.step)*e.step+e.min,e.max)))})),{knobRef:l,sliderRef:i,targetPercentage:s,enableEditing:h,trackSpacing:k,isEditing:d,onSliderClick:function(){setTimeout((function(){l.value.focus()}),0),h()},incrementValue:function(e){"ArrowLeft"===e.key&&g(),"ArrowRight"===e.key&&b()},subtractValue:g,addValue:b}}};const ct={class:"kro-slider__track-container"},pt={ref:"sliderRef",class:"kro-slider__track"},ft=r("div",{class:"kro-slider__progress"},null,-1),mt={class:"kro-slider__knob-container"},vt=r("div",{class:"kro-slider__thumb"},null,-1),ht={key:0},yt={key:1};dt.render=function(e,t,o,i,l,s){return a(),n("div",{class:"kro-slider",onTouchstartPassive:t[2]||(t[2]=(...e)=>i.enableEditing(...e)),onMousedown:t[3]||(t[3]=(...e)=>i.onSliderClick(...e)),style:{"--kro-slider-progress":(e.$attrs.modelValue-o.min)/(o.max-o.min)*100-100+"%"}},[r("div",ct,[r("div",pt,[o.ticks?(a(),n("div",{key:0,style:{"--kro-slider-tick-spacing":i.trackSpacing+"px"},class:"kro-slider__markers"},null,4)):d("v-if",!0),ft],512),r("div",mt,[r("button",{ref:"knobRef",class:"kro-slider__knob",tabindex:"0",onKeydown:t[1]||(t[1]=(...e)=>i.incrementValue(...e))},null,544),r("div",{class:["kro-slider__preview-value",{"kro-slider__preview-value--is-active":i.isEditing}]},[vt,e.$slots.thumb?(a(),n("span",yt,[c(e.$slots,"thumb",{value:e.$attrs.modelValue})])):(a(),n("span",ht,v(e.$attrs.modelValue),1))],2)])])],36)},dt.__file="src/components/Slider/Slider.vue";var kt,gt,bt={mounted:function(){console.log("Ok Tooltip")}},_t=function(){return{install:function(e,t){var o=D({},I);if(t&&t.hasOwnProperty("icons")&&(o=D(D({},o),t.icons)),t.components&&Array.isArray(t.components))for(var a in t.components){var n=t.components[a];n&&e.component(a,n)}e.provide(O,o),z()}}},wt=(kt=Object.freeze({__proto__:null,KroButton:Q,KroButtonGroup:oe,KroIcon:R,KroSpinner:G,KroSquircle:X,KroSwitch:ne,KroTextfield:de,KroToolbar:fe,KroDialog:Se,KroSurface:me,KroDivider:Ce,KroAlert:$e,KroApp:qe,KroListItem:Ee,KroMenu:Re,KroAvatar:Ge,KroProgressBar:Ue,KroLayout:Je,KroNavigation:nt,KroSelect:it,KroSlider:dt}),gt=Object.freeze({__proto__:null,Tooltip:bt}),{install:function(e,t){var o=D({},I);if(t&&t.hasOwnProperty("icons")&&(o=D(D({},o),t.icons)),kt)for(var a in kt){var n=kt[a];n&&e.component(a,n)}if(gt)for(var a in gt){var r=gt[a];r&&e.directive(a,r)}e.provide(O,o),z()}}),xt=Object.freeze({__proto__:null,ButtonMetadata:te,ButtonGroupMetadata:{title:"KroButtonGroup",description:"A container for multiple related buttons"},IconMetadata:{title:"KroIcon",description:"Display an SVG icon",props:[{name:"icon",description:"The name of the icon to display",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-icon-size",description:"The size of the icon",type:"size",default:"1.5rem"}]},SpinnerMetadata:{title:"KroSpinner",description:"A loading indicator",css:[{name:"--kro-spinner-size",description:"Sets the size of the spinner",type:"size",default:"2.5rem"},{name:"--kro-spinner-thickness",description:"Sets the thickness of the spinner",type:"size",default:"0.35rem"},{name:"--kro-spinner-color",description:"Sets the color of the spinner",type:"size",default:"--kro-foreground"}]},SquircleMetadata:{title:"KroSquircle",description:"A component used for visual effect."},SwitchMetadata:{title:"KroSwitch",description:"",props:[{name:"v-model",description:"The value of the switch",type:"bool",values:"-",default:"undefined"}],css:[{name:"--kro-switch-track-background",description:"The color of the track background.",type:"color",default:"--kro-background-secondary"},{name:"--kro-switch-track-active-background",description:"The track color when the switch is set to true.",type:"color",default:"--kro-primary-darken"},{name:"--kro-switch-knob-color",description:"The color of the switch knob.",type:"color",default:"--kro-primary"},{name:"--kro-switch-knob-shadow",description:"The shadow of the switch knob.",type:"shadow",default:"--kro-shadow"}]},TextfieldMetadata:{title:"KroTextfield",description:"",props:[{name:"v-model",description:"The value of the textfield",type:"string",values:"-",default:"undefined"},{name:"label",description:"The textfield label",type:"string",values:"-",default:"undefined"},{name:"type",description:"The textfield type",type:"string",values:"text | tel | email | password | url | search",default:"text"},{name:"required",description:"Marks the textfield as required",type:"bool",values:"-",default:"false"},{name:"disabled",description:"Marks the textfield as disabled",type:"bool",values:"-",default:"false"},{name:"multiline",description:"Makes the textfield into a textarea than can support multiple lines.",type:"bool",values:"-",default:"false"},{name:"readonly",description:"Marks the textfield as readonly",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"Autofocuses the textfield when the component loads.",type:"bool",values:"-",default:"false"},{name:"min",description:"Sets the min value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"max",description:"Sets the max value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"maxlength",description:"Sets the max amount of characters that the textfield will accept",type:"number",values:"-",default:"undefined"},{name:"name",description:"Sets the name of the textfield.",type:"string",values:"-",default:"undefined"},{name:"id",description:"Sets the id of the textfield",type:"string",values:"-",default:"undefined"},{name:"autoresize",description:"If the textfield is multiline, then this will autoresize the textfield vertically as the user types.",type:"bool",values:"-",default:"true"}],css:[{name:"--kro-textfield-border-color",description:"The border color of the textifled",type:"color",default:"--kro-divider"},{name:"--kro-textifled-focused-border-color",description:"The border color of the textifled when it is focused",type:"color",default:"--kro-primary"}]},ToolbarMetadata:{title:"KroToolbar",description:"",props:[{name:"small",description:"Makes the height of the toolbar smaller.",type:"bool",values:"-",default:"false"},{name:"padded",description:"Adds padding to the toolbar.",type:"bool",values:"-",default:"false"},{name:"raised",description:"Adds a shadow to the toolbar.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-toolbar-height",description:"The height of the toolbar",type:"size",default:"4rem"},{name:"--kro-toolbar-background",description:"The background color of the toolbar",type:"color",default:"--kro-background-secondary"},{name:"--kro-toolbar-shadow",description:"The shadow of a raised toolbar",type:"color",default:"--kro-background-shadow"}]},DialogMetadata:{title:"KroDialog",description:"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.",props:[{name:"v-model",description:"Contorls the open state of the dialog",type:"bool",values:"-",default:"false"},{name:"persistent",description:"If enabled, the dialog can only be closed by the close button",type:"bool",values:"-",default:"false"}],events:[{name:"@open",description:"Fired when the dialog is opened",parameters:[]},{name:"@close",description:"Fired when the dialog is closed",parameters:[]}],slots:[{name:"#activator",description:"Slots the button that can be used to open the dialog",props:["open","close","toggle"]},{name:"#title",description:"Slot for the title of the dialog",props:["open","close","toggle"]},{name:"#controls",description:"Slot for the controls of the dialog",props:["open","close","toggle"]},{name:"#default",description:"Slot for the content of the dialog",props:[]}]},SurfaceMetadata:{title:"KroSurface",description:"A surface that contains content and can have a label",props:[{name:"padded",description:"Adds a padding to the container.",type:"bool",values:"-",default:"true"},{name:"raised",description:"Adds a shadow to the container.",type:"bool",values:"-",default:"true"},{name:"outline",description:"Adds an outline to the container.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the container.",type:"bool",values:"-",default:"undefined"},{name:"label",description:"Adds a label to the container.",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-surface-background",description:"",type:"color",default:"--kro-background-secondary"},{name:"--kro-surface-outline",description:"Sets the outline color of and outlined container",type:"color",default:"--kro-divider"},{name:"--kro-surface-shadow",description:"Sets the shadow of a raised container",type:"shadow",default:"--kro-shadow"}]},DividerMetadata:{title:"KroDivider",description:"",props:[{name:"vertical",description:"Makes the divider a vertical divider",type:"bool",values:"-",default:"false"}]},AlertMetadata:{title:"KroAlert",description:"",props:[{name:"type",description:"Defines the type of alert that is shown.",type:"string",values:["info","error","warning","success"],default:"info"},{name:"dismissible",description:"Shows a close icon on the alert allowing the user to dismiss the alert.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Sets the icon that is displayed on the alert.",type:"string",values:"-",default:"undefined"},{name:"tag",description:"Sets the root tage of the alert",type:"string",values:"-",default:"div"},{name:"outline",description:"Give the alert an outline style.",type:"bool",values:"-",default:"false"}],events:[{name:"@dismissed",description:"Fires when the alert is dismissed",parameters:[]},{name:"@show",description:"Fires when the alert is shown after being dismissed",parameters:[]}],slots:[{name:"#default",description:"Slot for the text content of the alert.",props:[]}]},AppMetadata:{title:"KroApp",description:""},ListMetadata:Ze,MenuMetadata:{title:"KroMenu",description:"",props:[{name:"offsetX",description:"Offsets the menu horizontally so it is not covering the activator element.",type:"bool",values:"-",default:"false"},{name:"offsetY",description:"Offsets the menu vertically so it is not coverting the activator element",type:"bool",values:"-",default:"false"},{name:"left",description:"Positions the menu to open to the left of the activator.",type:"bool",values:"-",default:"false"},{name:"right",description:"Positions the menu to open to the right of the activator.",type:"bool",values:"-",default:"false"},{name:"top",description:"Positions the menut to open above the activator.",type:"bool",values:"-",default:"false"},{name:"bottom",description:"Positions the element to open below the activator.",type:"bool",values:"-",default:"false"}],slots:[{name:"#default",description:"",props:[]}],css:[{name:"--kro-menu-min-width",description:"",type:"size",default:"200px"},{name:"--kro-menu-max-width",description:"",type:"size",default:"300px"}]},AvatarMetadata:{title:"KroAvatar",description:"",props:[{name:"src",description:"Sets the image of the avatar",type:"string",values:"-",default:"undefined"},{name:"color",description:"Sets the color of the avatar.",type:"string",values:"-",default:"undefined"},{name:"small",description:"Makes the avatar smaller.",type:"bool",values:"-",default:"false"},{name:"large",description:"Makes the avatar larger.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-avatar-size",description:"",default:"3rem",type:"CSS Size Unit"},{name:"--kro-avatar-radius",description:"",default:"50%",type:"CSS Size Unit"}]},ProgressBarMetadata:{title:"KroProgressBar",description:"",props:[{name:"stream",description:"Display a speical style to the progress bar to indicate it is a stream",type:"bool",values:"-",default:"false"},{name:"indeterminate",description:"Display a special style to the progress bar to indicate that is indeterminate.",type:"",values:"-",default:"false"},{name:"rounded",description:"Applies a rounded style to the progress bar.",type:"bool",values:"-",default:"true"},{name:"value",description:"Sets the value of the progress bar.",type:"number",values:"-",default:"0"},{name:"bufferValue",description:"Sets the buffer value of the progress bar.",type:"number",values:"-",default:"100"}],css:[]},LayoutMetadata:{title:"KroLayout",description:"",props:[{name:"responsiveWidth",default:"768",description:"The width at which the drawer is hidden",type:"number",values:[]},{name:"temporary",default:"false",description:"Hides the drawer by default",type:"bool",values:[]},{name:"clipToolbar",default:"false",description:"Shifts the toolbar to the right to make room for the drawer",type:"bool",values:[]},{name:"mini",default:"false",description:"Makes the drawer smaller",type:"bool",values:[]},{name:"v-model:is-drawer-open",default:"true or false",description:"Controls the open state of the drawer",type:"bool",values:[]},{name:"v-model:is-drawer-hidden",default:"true or false",description:"Indicates if the drawer is in a default hidden state",type:"bool",values:[]}],slots:[{name:"#drawer",description:"Contains the sidebar navigation of the page",props:[]},{name:"#toolbar",description:"Contains the toolbar of the page",props:[]},{name:"#footer",description:"Contains the footer content of the page",props:[]},{name:"#default",description:"Contains the contents of the page",props:[]}]},NavigationMetadata:{title:"KroNavigation",description:"",css:[{name:"--kro-navigation-width",description:"Sets the width of the navigation menu",type:"size",default:"275px"}]},SelectMetadata:{title:"KroSelect",description:"A styled select component.",props:[{name:"label",description:"",type:"bool",values:"-",default:"false"},{name:"required",description:"",type:"bool",values:"-",default:"false"},{name:"disabled",description:"",type:"bool",values:"-",default:"false"},{name:"readonly",description:"",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"",type:"string",values:"-",default:"undefined"},{name:"name",description:"",type:"string",values:"-",default:"undefined"},{name:"id",description:"",type:"string",values:"-",default:"undefined"}]},SliderMetadata:{title:"KroSlider",description:"",props:[{name:"v-model",description:"The value of the slider",type:"number",values:"-",default:"undefined"},{name:"disabled",description:"Disables the slider",type:"bool",values:"-",default:"false"},{name:"steps",description:"Sets the step amount for each tick",type:"number",values:"-",default:"1"},{name:"ticks",description:"Display the ticks on the slider",type:"bool",values:"-",default:"false"},{name:"min",description:"Set the min value of the slider",type:"number",values:"-",default:"0"},{name:"max",description:"Set the max value of the slider",type:"number",values:"-",default:"100"}],slots:[{name:"#thumb",description:"A slot to replace the default value of the thumb.",props:["value"]}],css:[{name:"--kro-slider-tick-color",description:"The color of the tick marks on the slider.",type:"color",default:"rgba(0, 0, 0, .24)"},{name:"--kro-slider-track-color",description:"The color of the slider track.",type:"color",default:"--kro-background-secondary"},{name:"--kro-slider-progress-color",description:"The color of the progress bar on the track.",type:"color",default:"--kro-primary"},{name:"--kro-slider-knob-color",description:"The color of the knob on the slider.",type:"color",default:"--kro-primary-lighten"},{name:"--kro-slider-thumb-foreground",description:"The foreground color of the thumb.",type:"color",default:"--kro-primary-foreground"},{name:"--kro-slider-thumb-background",description:"The background color of the thumb.",type:"color",default:"--kro-primary"}]}});export{$e as KroAlert,qe as KroApp,Ge as KroAvatar,Q as KroButton,oe as KroButtonGroup,Se as KroDialog,Ce as KroDivider,R as KroIcon,Je as KroLayout,Ee as KroListItem,Re as KroMenu,nt as KroNavigation,Ue as KroProgressBar,it as KroSelect,dt as KroSlider,G as KroSpinner,X as KroSquircle,me as KroSurface,ne as KroSwitch,de as KroTextfield,fe as KroToolbar,_t as KroUIBaseConfigurationPlugin,wt as KroUIPlugin,xt as Metadata,xe as useDialog,P as useIcons,F as useTheme};
+***************************************************************************** */
+function I(e,t,o,a){return new(o||(o=Promise))((function(r,n){function s(e){try{i(a.next(e))}catch(e){n(e)}}function l(e){try{i(a.throw(e))}catch(e){n(e)}}function i(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(s,l)}i((a=a.apply(e,t||[])).next())}))}var N=o(Object.assign(Object.assign({},{name:"KroIcon"}),{props:{icon:{type:String,required:!0}},setup:function(t){const o=a(null),s=()=>I(this,void 0,void 0,(function*(){if(o.value){yield n();const e=D.renderSVG(t.icon,{});if(e)o.value.textContent="",o.value.appendChild(e);else{const e=document.createElement("span");e.className="iconify",e.dataset.icon=t.icon,o.value.textContent="",o.value.appendChild(e)}}}));return e(()=>t.icon,s,{flush:"post"}),r(s),{el:o}}}));N.render=function(e,t,o,a,r,n){return s(),l("div",{ref:"el",class:[e.$attrs.class,"kro-icon"]},null,2)},N.__file="src/components/Icon/Icon.vue";var H={name:"KroSpinner"};const R={class:"kro-spinner"};H.render=function(e,t,o,a,r,n){return s(),l("div",R)},H.__file="src/components/Spinner/Spinner.vue";var W={name:"KroSquircle"};const G={class:"kro-squircle",viewBox:"0 0 400 400","enable-background":"new 0 0 400 400","xml:space":"preserve"},X=i("path",{d:"M 0,200 C 0,0 0,0 200,0 S 400,0 400,200 400,400 200,400 0,400 0,200"},null,-1);W.render=function(e,t,o,a,r,n){return s(),l("svg",G,[X])},W.__file="src/components/Squircle/Squircle.vue";var U={name:"KroButton",components:{KroIcon:N,KroSpinner:H,KroSquircle:W},props:Object.assign(Object.assign({},P),{loading:{type:Boolean,default:!1},type:String,primary:Boolean,outline:Boolean,raised:Boolean,icon:String,hideExternalIcon:Boolean,warning:Boolean,error:Boolean,success:Boolean}),setup(e){const{tag:o,componentProps:a}=z(e);return{componentProps:a,componentType:t(()=>o||"button")}}};const Y={class:"kro-button__spinner"};U.render=function(e,t,o,a,r,n){const y=d("kro-squircle"),k=d("kro-icon"),b=d("kro-spinner");return s(),l(c(a.componentType),u({class:{"kro-button":!0,"kro-button--primary":o.primary,"kro-button--outline":o.outline,"kro-button--raised":o.raised,"kro-button--warning":o.warning,"kro-button--success":o.success,"kro-button--error":o.error,"kro-button--is-icon-button":o.icon&&!e.$slots.default},rel:"noreferrer"},a.componentProps,{target:e.href?e.target:""}),{default:p(()=>[o.icon&&!e.$slots.default?(s(),l(y,{key:0,class:"kro-button__squircle"})):f("v-if",!0),i("span",{class:{"kro-button__content":!0,"kro-button__content--is-loading":o.loading}},[o.icon?(s(),l(k,{key:0,class:"kro-button__icon",icon:o.icon},null,8,["icon"])):f("v-if",!0),m(e.$slots,"default"),!e.href||o.icon&&!e.$slots.default||o.hideExternalIcon?f("v-if",!0):(s(),l(k,{key:1,icon:"external"}))],2),v(i("span",Y,[i(b)],512),[[h,o.loading]])]),_:3},16,["class","target"])},U.__file="src/components/Button/Button.vue";const J={title:"KroButton",description:"A styled button with added functionality",props:[{name:"loading",description:"Displays a loading indicator over the button",type:"bool",values:"-",default:"false"},{name:"type",description:"The type of the button",type:"string",values:["button","reset","submit"],default:"button"},{name:"primary",description:"Applies a style to the button to indicate that it is a primary button",type:"bool",values:"-",default:"false"},{name:"outline",description:"Give the button an outline style",type:"bool",values:"-",default:"false"},{name:"raised",description:"Apply a shadow to the button",type:"string",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the button",type:"string",values:"-",default:"undefined"},{name:"hideExternalIcon",description:"Hides the external link icon for buttons that are links.",type:"bool",values:"-",default:"false"},...F]};var Q={name:"KroButtonGroup"};const Z={class:"kro-button-group"};Q.render=function(e,t,o,a,r,n){return s(),l("div",Z,[m(e.$slots,"default")])},Q.__file="src/components/ButtonGroup/ButtonGroup.vue";var ee={name:"KroSwitch",props:{value:String},emits:["update:modelValue"],setup:(e,{emit:t,attrs:o})=>({update:a=>{a.target.checked?e.value?Array.isArray(o.modelValue)&&t("update:modelValue",[...o.modelValue,e.value]):t("update:modelValue",!0):e.value?Array.isArray(o.modelValue)&&t("update:modelValue",o.modelValue.filter(t=>t!==e.value)):t("update:modelValue",!1)}})};const te={class:"kro-switch"},oe={class:"kro-switch__container"},ae={class:"kro-switch__track"},re=i("div",{class:"kro-switch__knob"},null,-1),ne={key:0,class:"kro-switch__label"};ee.render=function(e,t,o,a,r,n){return s(),l("div",te,[i("div",oe,[i("input",{class:"kro-switch__input",checked:Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue,type:"checkbox",onChange:t[1]||(t[1]=(...e)=>a.update(...e))},null,40,["checked"]),i("div",ae,[i("div",{class:{"kro-switch__track-active":!0,"kro-switch__track-active--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue}},null,2)]),i("div",{class:{"kro-switch__knob-container":!0,"kro-switch__knob-container--is-active":Array.isArray(e.$attrs.modelValue)?e.$attrs.modelValue.indexOf(o.value)>-1:!!e.$attrs.modelValue}},[re],2)]),e.$slots.default?(s(),l("div",ne,[m(e.$slots,"default")])):f("v-if",!0)])},ee.__file="src/components/Switch/Switch.vue";var se={name:"KroTextfield",props:{label:{type:String},type:{type:String,default:"text"},required:{type:Boolean},disabled:{type:Boolean},multiline:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},min:{type:Number},max:{type:Number},maxlength:{type:Number},name:{type:String},id:{type:String},autoResize:{type:Boolean,default:!0},loading:{type:Boolean},success:{type:Boolean},error:{type:Boolean},message:{type:String}},emits:["update:modelValue"],setup(e){const t=a(!1),o=a();return{focused:t,runAutoResize:()=>{e.autoResize&&o.value&&(o.value.style.height="auto",o.value.style.height=o.value.scrollHeight+"px")},inputRef:o}}};const le={key:2,class:"block pr-2"},ie={key:0,class:"pl-4 text-xs font-medium"};se.render=function(e,t,o,a,r,n){const c=d("kro-spinner"),u=d("kro-icon");return s(),l("div",{class:["kro-textfield",{"kro-textfield--is-textarea":o.multiline}]},[i("div",{class:{"kro-textfield__container":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":e.$attrs.modelValue,"kro-textfield--is-textarea":o.multiline}},[i("label",{class:{"kro-textfield__label":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":e.$attrs.modelValue},for:o.id},y(o.label),11,["for"]),i("span",{class:{"kro-textfield__pseudo-label":!0,"kro-textfield--focused":a.focused,"kro-textfield--has-text":e.$attrs.modelValue}},y(o.label),3),o.multiline?(s(),l("textarea",{key:1,id:o.id,ref:"inputRef",class:"kro-textfield__input",disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,maxlength:o.maxlength,name:o.name,value:e.$attrs.modelValue,onInput:t[4]||(t[4]=t=>{e.$emit("update:modelValue",t.target.value),a.runAutoResize()}),onFocus:t[5]||(t[5]=e=>a.focused=!0),onBlur:t[6]||(t[6]=e=>a.focused=!1)},null,40,["id","disabled","required","readonly","autofocus","maxlength","name","value"])):(s(),l("input",{key:0,class:"kro-textfield__input",id:o.id,disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,type:o.type,min:o.min,max:o.max,maxlength:o.maxlength,name:o.name,value:e.$attrs.modelValue,onInput:t[1]||(t[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:t[2]||(t[2]=e=>a.focused=!0),onBlur:t[3]||(t[3]=e=>a.focused=!1)},null,40,["id","disabled","required","readonly","autofocus","type","min","max","maxlength","name","value"])),o.loading||o.success||o.error?(s(),l("div",le,[o.loading?(s(),l(c,{key:0,class:"kro-textfield__spinner"})):o.success?(s(),l(u,{key:1,class:"kro-textfield__success-icon",icon:"mdi:check"})):o.error?(s(),l(u,{key:2,class:"kro-textfield__error-icon",icon:"mdi:alert"})):f("v-if",!0)])):f("v-if",!0)],2),e.$slots.default?(s(),l("div",ie,[m(e.$slots,"default")])):f("v-if",!0)],2)},se.__file="src/components/Textfield/Textfield.vue";var de={name:"KroToolbar",props:{small:Boolean,padded:Boolean,raised:Boolean}};de.render=function(e,t,o,a,r,n){return s(),l("div",{class:{"kro-toolbar":!0,"kro-toolbar--small":o.small,"kro-toolbar--raised":o.raised,"kro-toolbar--padded":o.padded}},[m(e.$slots,"default")],2)},de.__file="src/components/Toolbar/Toolbar.vue";var ce={name:"KroSurface",props:{padded:{type:Boolean,default:!0},raised:{type:Boolean,default:!0},outline:{type:Boolean,default:!1},icon:String,label:String}};const ue={key:0,class:"kro-surface__label-container"},pe={key:1,class:"kro-surface__label"};ce.render=function(e,t,o,a,r,n){const i=d("kro-icon");return s(),l("div",{class:{"kro-surface":!0,"kro-surface--padded":o.padded,"kro-surface--raised":o.raised,"kro-surface--outline":o.outline}},[o.icon||o.label?(s(),l("div",ue,[o.icon?(s(),l(i,{key:0,class:"kro-surface__icon",icon:o.icon},null,8,["icon"])):f("v-if",!0),o.label?(s(),l("div",pe,y(o.label),1)):f("v-if",!0)])):f("v-if",!0),m(e.$slots,"default")],2)},ce.__file="src/components/Surface/Surface.vue";const fe=o({emits:["update:active","activate","deactivate"],props:{active:{type:Boolean,default:!0},escapeDeactivates:{type:Boolean,default:!0},returnFocusOnDeactivate:{type:Boolean,default:!0},allowOutsideClick:{type:Boolean,default:!0},initialFocus:{type:[String,Function],default:void 0},fallbackFocus:{type:[String,Function],default:void 0}},setup(t,{slots:o,emit:n}){let s;const l=a(null);return r(()=>{e(()=>t.active,e=>{var o,a;e&&l.value?(s=q(l.value,{escapeDeactivates:t.escapeDeactivates,allowOutsideClick:()=>t.allowOutsideClick,returnFocusOnDeactivate:t.returnFocusOnDeactivate,onActivate:()=>{n("update:active",!0),n("activate")},onDeactivate:()=>{n("update:active",!1),n("deactivate")},initialFocus:"string"==typeof t.initialFocus?t.initialFocus:null!==(a=null===(o=t.initialFocus)||void 0===o?void 0:o.call(t))&&void 0!==a?a:l.value,fallbackFocus:t.fallbackFocus}),s.activate()):null==s||s.deactivate()},{immediate:!0})}),k(()=>{null==s||s.deactivate(),s=null}),()=>{var e;const t=null===(e=o.default)||void 0===e?void 0:e.call(o);if(!t||!t.length||t.length>1)throw new Error("FocusTrap requires exactly one child");return b(t[0],{ref:l})}}}),me=()=>({disableDocumentScroll:()=>{document.documentElement.classList.add("kro-helper--prevent-scroll")},enableDocumentScroll:()=>{document.documentElement.classList.remove("kro-helper--prevent-scroll")},disableDocumentSelect:()=>{document.documentElement.classList.add("kro-helper--prevent-select")},enableDocumentSelect:()=>{document.documentElement.classList.remove("kro-helper--prevent-select")},enableAppFocus:()=>{var e;null===(e=document.querySelector("#app"))||void 0===e||e.removeAttribute("tabindex")},disableAppFocus:()=>{var e;null===(e=document.querySelector("#app"))||void 0===e||e.setAttribute("tabindex","-1")}}),ve={title:"Dialog Title",message:"Dialog Message",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},he={title:"Confirmation Dialog",message:"Dialog Message",icon:"mdi:help-circle",style:"default",resolveButton:{text:"Ok",attributes:{primary:!0}},rejectButton:{text:"Cancel"}},ye=a([]),ke=(e,t,o)=>{const r=Object.assign(Object.assign({},e),{isOpen:a(!0),resolve:t,reject:o,destroy(){ye.value.splice(ye.value.indexOf(this),1)}});ye.value=[...ye.value,r]},be=()=>({createDialog:e=>new Promise((t,o)=>{ke(Object.assign(Object.assign({},ve),e),t,o)}),createConfirmationDialog:e=>new Promise((t,o)=>{ke(Object.assign(Object.assign({},he),e),t,o)})});const ge={name:"KroDialog",components:{KroSurface:ce,FocusTrap:fe},inheritAttrs:!1,emits:["update:modelValue","close","open","close-animation-end"]};var _e=o(Object.assign(Object.assign({},ge),{props:{persistent:{type:null,required:!1}},setup:function(e,{emit:t,attrs:o}){const{disableDocumentScroll:r,enableDocumentScroll:n}=me(),s=a(null);let l=!1;g(()=>{l||!0!==o.modelValue||(t("update:modelValue",!0),t("open"),r(),window.addEventListener("keydown",d),s.value&&s.value.focus())});const i=()=>{l=!0,t("update:modelValue",!0),t("open"),r(),window.addEventListener("keydown",d),s.value&&s.value.focus()},d=o=>{(t=>"keydown"!==(null==t?void 0:t.type)||"Escape"===t.key&&!e.persistent)(o)&&(t("update:modelValue",!1),t("close"),window.removeEventListener("keydown",d),n(),l=!1)};return{dialog:s,onDialogLeaveAnimationComplete:()=>{t("close-animation-end")},open:i,close:d,toggle:()=>{o.modelValue?d(null):i()}}}}));const xe={ref:"dialog",tabindex:"-1",class:"kro-dialog__container"},we={class:"grid grid-row gap-4"},Se={key:0,class:"kro-dialog__header text-lg"},Be={class:"kro-dialog__body"},Ke={key:1,class:"kro-dialog__footer"};_e.render=function(e,t,o,a,r,n){const c=d("focus-trap"),v=d("kro-surface");return s(),l(_,null,[m(e.$slots,"activator",{close:a.close,open:a.open,toggle:a.toggle}),(s(),l(x,{to:"#kro-portal"},[i(w,{appear:"",name:"kro-dialog-scrim"},{default:p(()=>[e.$attrs.modelValue?(s(),l("div",{key:0,class:"kro-dialog__scrim fixed inset-0",onClick:t[1]||(t[1]=()=>{o.persistent||a.close()})})):f("v-if",!0)]),_:1}),i("div",xe,[i(w,{appear:"",name:"kro-dialog","onAfter-leave":a.onDialogLeaveAnimationComplete},{default:p(()=>[e.$attrs.modelValue?(s(),l(v,u({key:0,class:"kro-dialog"},e.$attrs),{default:p(()=>[i(c,{modelValue:e.$attrs.modelValue,"onUpdate:modelValue":t[2]||(t[2]=t=>e.$attrs.modelValue=t)},{default:p(()=>[i("div",we,[e.$slots.header?(s(),l("div",Se,[m(e.$slots,"header",{open:a.open,close:a.close,toggle:a.toggle})])):f("v-if",!0),i("div",Be,[m(e.$slots,"default",{open:a.open,close:a.close,toggle:a.toggle})]),e.$slots.footer?(s(),l("div",Ke,[m(e.$slots,"footer",{open:a.open,close:a.close,toggle:a.toggle})])):f("v-if",!0)])]),_:3},8,["modelValue"])]),_:1},16)):f("v-if",!0)]),_:1},8,["onAfter-leave"])],512)]))],64)},_e.__file="src/components/Dialog/Dialog.vue";var $e={name:"KroDivider",props:{vertical:Boolean,inset:Boolean,label:String}};const Ae={key:0};$e.render=function(e,t,o,a,r,n){return s(),l("div",{class:["kro-divider",{"kro-divider--vertical":o.vertical,"kro-divider--inset":o.inset}]},[o.label?(s(),l("span",Ae,y(o.label),1)):f("v-if",!0)],2)},$e.__file="src/components/Divider/Divider.vue";var Ve={name:"KroAlert",components:{KroIcon:N,KroButton:U},props:{type:{type:String,default:"info"},dismissible:{type:Boolean,default:!1},tag:{type:String,default:"div"},icon:String,outline:{type:Boolean,default:!1}},emits:["dismissed","show"],setup(e,{emit:o}){const r=a(!1);return{iconName:t(()=>{const{type:t,icon:o}=e;return o||("warning"===t||"info"===t?"mdi:alert-circle":"error"===t?"mdi:alert":"success"===t?"mdi:check":null)}),isHidden:r,hide:()=>{o("dismissed"),r.value=!0},show:()=>{o("show"),r.value=!1}}}};const Te={class:"kro-alert__icon"},Me={key:0};Ve.render=function(e,t,o,a,r,n){const u=d("kro-icon"),y=d("kro-button");return v((s(),l(c(o.tag),{class:{"kro-alert":!0,"kro-alert--error":"error"===o.type,"kro-alert--info":"info"===o.type,"kro-alert--warning":"warning"===o.type,"kro-alert--success":"success"===o.type,"kro-alert--outline":o.outline,"kro-alert--has-icon":a.iconName,"kro-alert--is-dismissible":o.dismissible}},{default:p(()=>[i("div",Te,[a.iconName?(s(),l(u,{key:0,icon:a.iconName},null,8,["icon"])):f("v-if",!0)]),i("div",null,[m(e.$slots,"default")]),o.dismissible?(s(),l("div",Me,[i(y,{icon:"close",onClick:a.hide},null,8,["onClick"])])):f("v-if",!0)]),_:3},8,["class"])),[[h,!a.isHidden]])},Ve.__file="src/components/Alert/Alert.vue";var Oe=o(Object.assign(Object.assign({},{name:"ComposableDialogs"}),{setup:function(){return{instances:ye}}}));Oe.render=function(e,t,o,a,r,n){const c=d("kro-icon"),m=d("kro-button"),v=d("kro-dialog");return s(!0),l(_,null,S(a.instances,(e,t)=>(s(),l("div",{key:t},[i(v,{modelValue:e.isOpen,"onUpdate:modelValue":t=>e.isOpen=t,class:{"kro-composable-dialog--centered":"centered"===e.style},"onClose-animation-end":t=>e.destroy()},{header:p(()=>[i("div",{class:["flex items-center",{"flex-col":"centered"===e.style}]},[e.icon?(s(),l(c,{key:0,style:{color:e.iconColor?e.iconColor:""},class:[{"kro-composable-dialog__icon--large":"centered"===e.style},"mr-4"],icon:e.icon},null,8,["style","class","icon"])):f("v-if",!0),B(" "+y(e.title),1)],2)]),default:p(()=>[i("div",{class:{"text-center":"centered"===e.style}},y(e.message),3)]),footer:p(({close:t})=>[i("div",{class:["flex flex-row flex-1 gap-4",{"justify-end":"centered"!==e.style,"justify-center":"centered"===e.style}]},[e.rejectButton.hidden?f("v-if",!0):(s(),l(m,u({key:0},e.rejectButton.attributes,{onClick:()=>{e.reject(),t()}}),{default:p(()=>[B(y(e.rejectButton.text),1)]),_:2},1040,["onClick"])),e.resolveButton.hidden?f("v-if",!0):(s(),l(m,u({key:1},e.resolveButton.attributes,{onClick:()=>{e.resolve(),t()}}),{default:p(()=>[B(y(e.resolveButton.text),1)]),_:2},1040,["onClick"]))],2)]),_:2},1032,["modelValue","onUpdate:modelValue","class","onClose-animation-end"])]))),128)},Oe.__file="src/components/App/components/ComposableDialogs.vue";var Ce={name:"KroApp",components:{ComposableDialogs:Oe}};const De={class:"kro-app"},qe={class:"kro-app__content"};Ce.render=function(e,t,o,a,r,n){const c=d("composable-dialogs");return s(),l("div",De,[i("div",qe,[m(e.$slots,"default")]),i(c)])},Ce.__file="src/components/App/App.vue";var je={name:"KroListItem",props:Object.assign(Object.assign({},P),{tag:{type:String,default:"div"}}),setup(e){const{tag:o,componentProps:a}=z(e);return{componentProps:a,componentType:t(()=>o||"div")}}};const Le={key:0,class:"kro-list-item__icon"},Ee={class:"kro-list-item__content"},Fe={class:"kro-list-item__title"},Pe={key:0,class:"kro-list-item__subtitle"},ze={key:1,class:"kro-list-item__action"};je.render=function(e,t,o,a,r,n){return s(),l(c(a.componentType),u(a.componentProps,{class:"kro-list-item"}),{default:p(()=>[e.$slots.icon?(s(),l("div",Le,[m(e.$slots,"icon")])):f("v-if",!0),i("div",Ee,[i("span",Fe,[m(e.$slots,"default")]),e.$slots.subtitle?(s(),l("span",Pe,[m(e.$slots,"subtitle")])):f("v-if",!0)]),e.$slots.action?(s(),l("div",ze,[m(e.$slots,"action")])):f("v-if",!0)]),_:3},16)},je.__file="src/components/List/ListItem.vue";const Ie={title:"KroListItem",description:"",props:[{name:"tag",description:"",type:"string",values:"-",default:"div"},...F],slots:[{name:"#icon",description:"Item icon slot",props:[]},{name:"#subtitle",description:"Item subtitle slot",props:[]},{name:"#action",description:"Action on the right side of the item",props:[]},{name:"#default",description:"Main text of the item",props:[]}]};var Ne={name:"KroMenu",props:{offsetX:{type:Boolean,default:!1},offsetY:{type:Boolean,default:!1},left:Boolean,right:Boolean,top:Boolean,bottom:Boolean},emits:["open","close"],setup(e,{emit:t}){const o=a(!1),r=a(null),n=a(null),s=K({"kro-menu__content--y-bottom":!1,"kro-menu__content--y-bottom-offset":!1,"kro-menu__content--y-top":!1,"kro-menu__content--y-top-offset":!1,"kro-menu__content--x-left":!1,"kro-menu__content--x-left-offset":!1,"kro-menu__content--x-right":!1,"kro-menu__content--x-right-offset":!1}),l=()=>{Object.keys(s).forEach(e=>s[e]=!1);const{offsetX:a,offsetY:l,left:i,right:d,top:c,bottom:u}=e,{canFit:p}=((e,t,o)=>{if(!e.value||!t.value)return{canFit:{top:!1,bottom:!1,left:!1,right:!1}};const{innerWidth:a,innerHeight:r}=window,n=e.value.getBoundingClientRect(),s=t.value,l=o.offsetX?n.width:0,i=o.offsetY?n.height:0;return{canFit:{bottom:s.offsetHeight+n.top+i<r,top:s.offsetHeight<n.top,left:s.offsetTop<n.left,right:s.offsetWidth+n.left+l<a}}})(r,n,{offsetX:a,offsetY:l});p.top&&c?s["kro-menu__content--y-top"+(l?"-offset":"")]=!0:p.bottom&&u||p.bottom?s["kro-menu__content--y-bottom"+(l?"-offset":"")]=!0:p.top&&(s["kro-menu__content--y-top"+(l?"-offset":"")]=!0),p.left&&i?s["kro-menu__content--x-left"+(a?"-offset":"")]=!0:p.right&&d||p.right?s["kro-menu__content--x-right"+(a?"-offset":"")]=!0:p.left&&(s["kro-menu__content--x-left"+(a?"-offset":"")]=!0),t("open"),o.value=!0},i=()=>{t("close"),o.value=!1};return{isOpen:o,classes:s,open:l,close:i,toggle:()=>{o.value?i():l()},menu:n,container:r}}};const He={ref:"container",class:"kro-menu"};Ne.render=function(e,t,o,a,r,n){return s(),l("div",He,[i("div",{class:["kro-menu__scrim",{"kro-menu__scrim--is-open":a.isOpen}],onClick:t[1]||(t[1]=(...e)=>a.close(...e))},null,2),m(e.$slots,"activator",{open:a.open}),i("div",{ref:"menu",class:["kro-menu__content",{...a.classes,"kro-menu__content--is-open":a.isOpen}]},[m(e.$slots,"default")],2)],512)},Ne.__file="src/components/Menu/Menu.vue";var Re={name:"KroAvatar",props:{src:String,color:String,small:Boolean,large:Boolean}};Re.render=function(e,t,o,a,r,n){return s(),l("div",{class:["kro-avatar",{"kro-avatar__small":o.small,"kro-avatar__large":o.large}]},[o.src?(s(),l("img",{key:0,src:o.src,alt:""},null,8,["src"])):o.color?(s(),l("div",{key:1,style:{backgroundColor:o.color},class:"kro-avatar__color-circle"},null,4)):f("v-if",!0)],2)},Re.__file="src/components/Avatar/Avatar.vue";var We={name:"KroProgressBar",props:{stream:Boolean,indeterminate:Boolean,rounded:{type:Boolean,default:!0},value:{type:Number,default:0},bufferValue:{type:Number,default:100}}};const Ge=i("div",{class:"kro-progress-bar__stream"},[i("div",{class:"kro-progress-bar__stream-content"})],-1),Xe=i("div",{class:"kro-progress-bar__indeterminate"},null,-1);We.render=function(e,t,o,a,r,n){return s(),l("div",{class:{"kro-progress-bar":!0,"kro-progress-bar--is-stream":o.stream,"kro-progress-bar--is-indeterminate":o.indeterminate,"kro-progress-bar--rounded":o.rounded}},[Ge,i("div",{class:"kro-progress-bar__buffer",style:{"--kro-progress-bar-buffer-value":o.bufferValue-100+"%"}},null,4),i("div",{class:"kro-progress-bar__progress",style:{"--kro-progress-bar-value":o.value-100+"%"}},null,4),Xe],2)},We.__file="src/components/ProgressBar/ProgressBar.vue";var Ue=o(Object.assign(Object.assign({},{name:"KroLayout",emits:["update:is-drawer-open","update:is-drawer-hidden"]}),{props:{absolute:{type:Boolean,required:!1},responsiveWidth:{type:Number,required:!1},temporary:{type:Boolean,required:!1},right:{type:Boolean,required:!1},toolbarHeight:{type:String,required:!1},clipToolbar:{type:Boolean,required:!1},mini:{type:Boolean,required:!1}},setup:function(e,o){const r=a(!!o.slots.drawer),n=O(`(max-width: ${e.responsiveWidth||768}px)`),s=t(()=>e.mini?"6rem":"16rem"),l=t(()=>n.value||e.temporary||!r.value?"0":"var(--drawerWidth)"),i=t(()=>e.toolbarHeight||"4rem"),d=t(()=>e.clipToolbar?"var(--contentOffsetLeft)":"0"),c=t(()=>e.clipToolbar||n.value||e.temporary?"0":"var(--toolbarHeight)");return g(()=>{r.value=!!o.slots.drawer}),$(()=>{o.emit("update:is-drawer-open",!(n.value||e.temporary)),o.emit("update:is-drawer-hidden",n.value||e.temporary)}),A(e=>({drawerWidth:s,toolbarHeight:i,toolbarLeftOffset:d,drawerOffsetTop:c,contentOffsetLeft:l})),{hasDrawer:r,isSmallScreen:n,drawerWidth:s,contentOffsetLeft:l,toolbarHeight:i,toolbarLeftOffset:d,drawerOffsetTop:c}}}));const Ye={class:"kro-layout"},Je={key:2,class:"kro-layout__toolbar"},Qe={class:"kro-layout__container"},Ze={key:0,class:"kro-layout__content"},et={key:1,class:"kro-layout__footer"};Ue.render=function(e,t,o,a,r,n){return s(),l("div",Ye,[e.$slots.drawer?(s(),l("div",{key:0,class:["kro-layout__scrim",{"kro-layout__scrim--is-open":e.$attrs["is-drawer-open"]&&(a.isSmallScreen||o.temporary)}],onClick:t[1]||(t[1]=t=>e.$emit("update:is-drawer-open",!1))},null,2)):f("v-if",!0),e.$slots.drawer?(s(),l("div",{key:1,class:["kro-layout__drawer",{"kro-layout__drawer--hidden":a.isSmallScreen||o.temporary,"kro-layout__drawer--is-open":e.$attrs["is-drawer-open"]}]},[m(e.$slots,"drawer")],2)):f("v-if",!0),e.$slots.toolbar?(s(),l("div",Je,[m(e.$slots,"toolbar")])):f("v-if",!0),i("div",Qe,[e.$slots.default?(s(),l("div",Ze,[m(e.$slots,"default")])):f("v-if",!0),e.$slots.footer?(s(),l("div",et,[m(e.$slots,"footer")])):f("v-if",!0)])])},Ue.__file="src/components/Layout/Layout.vue";var tt={name:"KroSelect",props:{label:{type:String},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},autofocus:{type:Boolean},name:{type:String},id:{type:String}},emits:["update:modelValue"],setup(e,{attrs:t}){const o=a(!1),n=a(null);return r(()=>{n.value&&Array.from(n.value.options).forEach(e=>{e.value===t.modelValue&&(e.selected=!0)})}),{focused:o,select:n}}};const ot={class:"kro-select"},at={class:"kro-select__hidden-label"},rt=i("option",{selected:"",hidden:""},null,-1);tt.render=function(e,t,o,a,r,n){const c=d("kro-icon");return s(),l("div",ot,[i("div",{class:{"kro-select__container":!0,"kro-select--focused":a.focused,"kro-select--has-text":e.$attrs.modelValue}},[i("label",{class:{"kro-select__label":!0,"kro-select--focused":a.focused,"kro-select--has-text":e.$attrs.modelValue},for:o.id},y(o.label),11,["for"]),i("div",at,y(o.label),1),i("span",{class:{"kro-select__pseudo-label":!0,"kro-select--focused":a.focused,"kro-select--has-text":e.$attrs.modelValue}},y(o.label),3),i("select",{id:o.id,ref:"select",class:"kro-select__input",disabled:o.disabled,required:o.required,readonly:o.readonly,autofocus:o.autofocus,name:o.name,value:e.$attrs.modelValue,onChange:t[1]||(t[1]=t=>e.$emit("update:modelValue",t.target.value)),onFocus:t[2]||(t[2]=e=>a.focused=!0),onBlur:t[3]||(t[3]=e=>a.focused=!1)},[rt,m(e.$slots,"default")],40,["id","disabled","required","readonly","autofocus","name","value"]),i(c,{class:"kro-select__icon",icon:"mdi:chevron-down"})],2)])},tt.__file="src/components/Select/Select.vue";var nt={name:"KroSlider",props:{disabled:{type:Boolean,default:!1},step:{type:Number,default:1},ticks:{default:!1,type:[Boolean,String]},min:{type:Number,default:0},max:{type:Number,default:100}},emits:["update:modelValue"],setup(o,{emit:n,attrs:s}){const l=a(),i=a(),{targetPercentage:d}=(e=>{const{x:o,elementPositionX:a,elementWidth:r}=C(e),n=t(()=>Math.min(Math.max(0,o.value-a.value),r.value)/(r.value||1));return{elementWidth:r,targetPercentage:n}})(l),{elementWidth:c}=(t=>{const o=a(0),r=a(0),n=a(0),s=a(0),l=e=>{const{left:t,top:a,width:l,height:i}=e.getBoundingClientRect();o.value=l,r.value=i,n.value=t,s.value=a};e(t,e=>{const t=e||document.body;l(t)});const i=T(()=>{const e=t.value||document.body;l(e)},250);return M("resize",i),{elementWidth:o,elementHeight:r,elementLeft:n,elementTop:s}})(l),u=a(!1),{disableDocumentSelect:p,enableDocumentSelect:f}=me(),m=()=>{u.value=!1,f(),removeEventListener("touchcancel",m),removeEventListener("touchend",m),removeEventListener("mouseup",m)},v=()=>{u.value=!0,p(),addEventListener("touchcancel",m),addEventListener("touchend",m),addEventListener("mouseup",m)},h=t(()=>c.value/Math.ceil((o.max-o.min)/o.step)),y=()=>{n("update:modelValue",Math.max(o.min,Math.min(o.max,s.modelValue-o.step)))},k=()=>{n("update:modelValue",Math.max(o.min,Math.min(o.max,s.modelValue+o.step)))};return r(()=>{n("update:modelValue",Math.max(o.min,Math.min(s.modelValue||0,o.max)))}),$(()=>{u.value&&n("update:modelValue",Math.max(o.min,Math.min(Math.round(d.value*(o.max-o.min)/o.step)*o.step+o.min,o.max)))}),{knobRef:i,sliderRef:l,targetPercentage:d,enableEditing:v,trackSpacing:h,isEditing:u,onSliderClick:()=>{setTimeout(()=>{i.value.focus()},0),v()},incrementValue:e=>{"ArrowLeft"===e.key&&y(),"ArrowRight"===e.key&&k()},subtractValue:y,addValue:k}}};const st={class:"kro-slider__track-container"},lt={ref:"sliderRef",class:"kro-slider__track"},it=i("div",{class:"kro-slider__progress"},null,-1),dt={class:"kro-slider__knob-container"},ct=i("div",{class:"kro-slider__thumb"},null,-1),ut={key:0},pt={key:1};nt.render=function(e,t,o,a,r,n){return s(),l("div",{class:"kro-slider",style:{"--kro-slider-progress":(e.$attrs.modelValue-o.min)/(o.max-o.min)*100-100+"%"},onTouchstartPassive:t[2]||(t[2]=(...e)=>a.enableEditing(...e)),onMousedown:t[3]||(t[3]=(...e)=>a.onSliderClick(...e))},[i("div",st,[i("div",lt,[o.ticks?(s(),l("div",{key:0,style:{"--kro-slider-tick-spacing":a.trackSpacing+"px"},class:"kro-slider__markers"},null,4)):f("v-if",!0),it],512),i("div",dt,[i("button",{ref:"knobRef",class:"kro-slider__knob",tabindex:"0",onKeydown:t[1]||(t[1]=(...e)=>a.incrementValue(...e))},null,544),i("div",{class:["kro-slider__preview-value",{"kro-slider__preview-value--is-active":a.isEditing}]},[ct,e.$slots.thumb?(s(),l("span",pt,[m(e.$slots,"thumb",{value:e.$attrs.modelValue})])):(s(),l("span",ut,y(e.$attrs.modelValue),1))],2)])])],36)},nt.__file="src/components/Slider/Slider.vue";const ft={mounted(){console.log("Ok Tooltip")}};const mt=()=>({install(e,t){t.components&&Array.isArray(t.components)&&Object.entries(t.components).forEach(([t,o])=>{e.component(t,o)}),E()}}),vt=(ht=Object.freeze({__proto__:null,KroButton:U,KroButtonGroup:Q,KroIcon:N,KroSpinner:H,KroSquircle:W,KroSwitch:ee,KroTextfield:se,KroToolbar:de,KroDialog:_e,KroSurface:ce,KroDivider:$e,KroAlert:Ve,KroApp:Ce,KroListItem:je,KroMenu:Ne,KroAvatar:Re,KroProgressBar:We,KroLayout:Ue,KroSelect:tt,KroSlider:nt}),yt=Object.freeze({__proto__:null,Tooltip:ft}),{install(e){ht&&Object.entries(ht).forEach(([t,o])=>{o&&e.component(t,o)}),yt&&Object.entries(yt).forEach(([t,o])=>{o&&e.directive(t,o)}),E()}});var ht,yt,kt=Object.freeze({__proto__:null,ButtonMetadata:J,ButtonGroupMetadata:{title:"KroButtonGroup",description:"A container for multiple related buttons"},IconMetadata:{title:"KroIcon",description:"Display an SVG icon",props:[{name:"icon",description:"The name of the icon to display",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-icon-size",description:"The size of the icon",type:"size",default:"1.5rem"}]},SpinnerMetadata:{title:"KroSpinner",description:"A loading indicator",css:[{name:"--kro-spinner-size",description:"Sets the size of the spinner",type:"size",default:"2.5rem"},{name:"--kro-spinner-thickness",description:"Sets the thickness of the spinner",type:"size",default:"0.35rem"},{name:"--kro-spinner-color",description:"Sets the color of the spinner",type:"size",default:"--kro-foreground"}]},SquircleMetadata:{title:"KroSquircle",description:"A component used for visual effect."},SwitchMetadata:{title:"KroSwitch",description:"",props:[{name:"v-model",description:"The value of the switch",type:"bool",values:"-",default:"undefined"}],css:[{name:"--kro-switch-track-background",description:"The color of the track background.",type:"color",default:"--kro-background-secondary"},{name:"--kro-switch-track-active-background",description:"The track color when the switch is set to true.",type:"color",default:"--kro-primary-darken"},{name:"--kro-switch-knob-color",description:"The color of the switch knob.",type:"color",default:"--kro-primary"},{name:"--kro-switch-knob-shadow",description:"The shadow of the switch knob.",type:"shadow",default:"--kro-shadow"}]},TextfieldMetadata:{title:"KroTextfield",description:"",props:[{name:"v-model",description:"The value of the textfield",type:"string",values:"-",default:"undefined"},{name:"label",description:"The textfield label",type:"string",values:"-",default:"undefined"},{name:"type",description:"The textfield type",type:"string",values:"text | tel | email | password | url | search",default:"text"},{name:"required",description:"Marks the textfield as required",type:"bool",values:"-",default:"false"},{name:"disabled",description:"Marks the textfield as disabled",type:"bool",values:"-",default:"false"},{name:"multiline",description:"Makes the textfield into a textarea than can support multiple lines.",type:"bool",values:"-",default:"false"},{name:"readonly",description:"Marks the textfield as readonly",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"Autofocuses the textfield when the component loads.",type:"bool",values:"-",default:"false"},{name:"min",description:"Sets the min value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"max",description:"Sets the max value if the textfield is a nubmer input",type:"number",values:"-",default:"undefined"},{name:"maxlength",description:"Sets the max amount of characters that the textfield will accept",type:"number",values:"-",default:"undefined"},{name:"name",description:"Sets the name of the textfield.",type:"string",values:"-",default:"undefined"},{name:"id",description:"Sets the id of the textfield",type:"string",values:"-",default:"undefined"},{name:"autoresize",description:"If the textfield is multiline, then this will autoresize the textfield vertically as the user types.",type:"bool",values:"-",default:"true"}],css:[{name:"--kro-textfield-border-color",description:"The border color of the textifled",type:"color",default:"--kro-divider"},{name:"--kro-textifled-focused-border-color",description:"The border color of the textifled when it is focused",type:"color",default:"--kro-primary"}]},ToolbarMetadata:{title:"KroToolbar",description:"",props:[{name:"small",description:"Makes the height of the toolbar smaller.",type:"bool",values:"-",default:"false"},{name:"padded",description:"Adds padding to the toolbar.",type:"bool",values:"-",default:"false"},{name:"raised",description:"Adds a shadow to the toolbar.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-toolbar-height",description:"The height of the toolbar",type:"size",default:"4rem"},{name:"--kro-toolbar-background",description:"The background color of the toolbar",type:"color",default:"--kro-background-secondary"},{name:"--kro-toolbar-shadow",description:"The shadow of a raised toolbar",type:"color",default:"--kro-background-shadow"}]},DialogMetadata:{title:"KroDialog",description:"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.",props:[{name:"v-model",description:"Contorls the open state of the dialog",type:"bool",values:"-",default:"false"},{name:"persistent",description:"If enabled, the dialog can only be closed by the close button",type:"bool",values:"-",default:"false"}],events:[{name:"@open",description:"Fired when the dialog is opened",parameters:[]},{name:"@close",description:"Fired when the dialog is closed",parameters:[]}],slots:[{name:"#activator",description:"Slots the button that can be used to open the dialog",props:["open","close","toggle"]},{name:"#title",description:"Slot for the title of the dialog",props:["open","close","toggle"]},{name:"#controls",description:"Slot for the controls of the dialog",props:["open","close","toggle"]},{name:"#default",description:"Slot for the content of the dialog",props:[]}]},SurfaceMetadata:{title:"KroSurface",description:"A surface that contains content and can have a label",props:[{name:"padded",description:"Adds a padding to the container.",type:"bool",values:"-",default:"true"},{name:"raised",description:"Adds a shadow to the container.",type:"bool",values:"-",default:"true"},{name:"outline",description:"Adds an outline to the container.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Adds an icon to the container.",type:"bool",values:"-",default:"undefined"},{name:"label",description:"Adds a label to the container.",type:"string",values:"-",default:"undefined"}],css:[{name:"--kro-surface-background",description:"",type:"color",default:"--kro-background-secondary"},{name:"--kro-surface-outline",description:"Sets the outline color of and outlined container",type:"color",default:"--kro-divider"},{name:"--kro-surface-shadow",description:"Sets the shadow of a raised container",type:"shadow",default:"--kro-shadow"}]},DividerMetadata:{title:"KroDivider",description:"",props:[{name:"vertical",description:"Makes the divider a vertical divider",type:"bool",values:"-",default:"false"}]},AlertMetadata:{title:"KroAlert",description:"",props:[{name:"type",description:"Defines the type of alert that is shown.",type:"string",values:["info","error","warning","success"],default:"info"},{name:"dismissible",description:"Shows a close icon on the alert allowing the user to dismiss the alert.",type:"bool",values:"-",default:"false"},{name:"icon",description:"Sets the icon that is displayed on the alert.",type:"string",values:"-",default:"undefined"},{name:"tag",description:"Sets the root tage of the alert",type:"string",values:"-",default:"div"},{name:"outline",description:"Give the alert an outline style.",type:"bool",values:"-",default:"false"}],events:[{name:"@dismissed",description:"Fires when the alert is dismissed",parameters:[]},{name:"@show",description:"Fires when the alert is shown after being dismissed",parameters:[]}],slots:[{name:"#default",description:"Slot for the text content of the alert.",props:[]}]},AppMetadata:{title:"KroApp",description:""},ListMetadata:Ie,MenuMetadata:{title:"KroMenu",description:"",props:[{name:"offsetX",description:"Offsets the menu horizontally so it is not covering the activator element.",type:"bool",values:"-",default:"false"},{name:"offsetY",description:"Offsets the menu vertically so it is not coverting the activator element",type:"bool",values:"-",default:"false"},{name:"left",description:"Positions the menu to open to the left of the activator.",type:"bool",values:"-",default:"false"},{name:"right",description:"Positions the menu to open to the right of the activator.",type:"bool",values:"-",default:"false"},{name:"top",description:"Positions the menut to open above the activator.",type:"bool",values:"-",default:"false"},{name:"bottom",description:"Positions the element to open below the activator.",type:"bool",values:"-",default:"false"}],slots:[{name:"#default",description:"",props:[]}],css:[{name:"--kro-menu-min-width",description:"",type:"size",default:"200px"},{name:"--kro-menu-max-width",description:"",type:"size",default:"300px"}]},AvatarMetadata:{title:"KroAvatar",description:"",props:[{name:"src",description:"Sets the image of the avatar",type:"string",values:"-",default:"undefined"},{name:"color",description:"Sets the color of the avatar.",type:"string",values:"-",default:"undefined"},{name:"small",description:"Makes the avatar smaller.",type:"bool",values:"-",default:"false"},{name:"large",description:"Makes the avatar larger.",type:"bool",values:"-",default:"false"}],css:[{name:"--kro-avatar-size",description:"",default:"3rem",type:"CSS Size Unit"},{name:"--kro-avatar-radius",description:"",default:"50%",type:"CSS Size Unit"}]},ProgressBarMetadata:{title:"KroProgressBar",description:"",props:[{name:"stream",description:"Display a speical style to the progress bar to indicate it is a stream",type:"bool",values:"-",default:"false"},{name:"indeterminate",description:"Display a special style to the progress bar to indicate that is indeterminate.",type:"",values:"-",default:"false"},{name:"rounded",description:"Applies a rounded style to the progress bar.",type:"bool",values:"-",default:"true"},{name:"value",description:"Sets the value of the progress bar.",type:"number",values:"-",default:"0"},{name:"bufferValue",description:"Sets the buffer value of the progress bar.",type:"number",values:"-",default:"100"}],css:[]},LayoutMetadata:{title:"KroLayout",description:"",props:[{name:"responsiveWidth",default:"768",description:"The width at which the drawer is hidden",type:"number",values:[]},{name:"temporary",default:"false",description:"Hides the drawer by default",type:"bool",values:[]},{name:"clipToolbar",default:"false",description:"Shifts the toolbar to the right to make room for the drawer",type:"bool",values:[]},{name:"mini",default:"false",description:"Makes the drawer smaller",type:"bool",values:[]},{name:"v-model:is-drawer-open",default:"true or false",description:"Controls the open state of the drawer",type:"bool",values:[]},{name:"v-model:is-drawer-hidden",default:"true or false",description:"Indicates if the drawer is in a default hidden state",type:"bool",values:[]}],slots:[{name:"#drawer",description:"Contains the sidebar navigation of the page",props:[]},{name:"#toolbar",description:"Contains the toolbar of the page",props:[]},{name:"#footer",description:"Contains the footer content of the page",props:[]},{name:"#default",description:"Contains the contents of the page",props:[]}]},SelectMetadata:{title:"KroSelect",description:"A styled select component.",props:[{name:"label",description:"",type:"bool",values:"-",default:"false"},{name:"required",description:"",type:"bool",values:"-",default:"false"},{name:"disabled",description:"",type:"bool",values:"-",default:"false"},{name:"readonly",description:"",type:"bool",values:"-",default:"false"},{name:"autofocus",description:"",type:"string",values:"-",default:"undefined"},{name:"name",description:"",type:"string",values:"-",default:"undefined"},{name:"id",description:"",type:"string",values:"-",default:"undefined"}]},SliderMetadata:{title:"KroSlider",description:"",props:[{name:"v-model",description:"The value of the slider",type:"number",values:"-",default:"undefined"},{name:"disabled",description:"Disables the slider",type:"bool",values:"-",default:"false"},{name:"steps",description:"Sets the step amount for each tick",type:"number",values:"-",default:"1"},{name:"ticks",description:"Display the ticks on the slider",type:"bool",values:"-",default:"false"},{name:"min",description:"Set the min value of the slider",type:"number",values:"-",default:"0"},{name:"max",description:"Set the max value of the slider",type:"number",values:"-",default:"100"}],slots:[{name:"#thumb",description:"A slot to replace the default value of the thumb.",props:["value"]}],css:[{name:"--kro-slider-tick-color",description:"The color of the tick marks on the slider.",type:"color",default:"rgba(0, 0, 0, .24)"},{name:"--kro-slider-track-color",description:"The color of the slider track.",type:"color",default:"--kro-background-secondary"},{name:"--kro-slider-progress-color",description:"The color of the progress bar on the track.",type:"color",default:"--kro-primary"},{name:"--kro-slider-knob-color",description:"The color of the knob on the slider.",type:"color",default:"--kro-primary-lighten"},{name:"--kro-slider-thumb-foreground",description:"The foreground color of the thumb.",type:"color",default:"--kro-primary-foreground"},{name:"--kro-slider-thumb-background",description:"The background color of the thumb.",type:"color",default:"--kro-primary"}]}});export{Ve as KroAlert,Ce as KroApp,Re as KroAvatar,U as KroButton,Q as KroButtonGroup,_e as KroDialog,$e as KroDivider,N as KroIcon,Ue as KroLayout,je as KroListItem,Ne as KroMenu,We as KroProgressBar,tt as KroSelect,nt as KroSlider,H as KroSpinner,W as KroSquircle,ce as KroSurface,ee as KroSwitch,se as KroTextfield,de as KroToolbar,mt as KroUIBaseConfigurationPlugin,vt as KroUIPlugin,kt as Metadata,be as useDialog,L as useTheme};

dist/vetur/tags.json

@@ -1,1 +0,1 @@
-{"kro-button":{"attributes":["loading","type","primary","outline","raised","icon","hideExternalIcon","to","exact","activeClass","exactActiveClass","href","target"],"description":"A styled button with added functionality"},"kro-button-group":{"attributes":[],"description":"A container for multiple related buttons"},"kro-icon":{"attributes":["icon"],"description":"Display an SVG icon"},"kro-spinner":{"attributes":[],"description":"A loading indicator"},"kro-squircle":{"attributes":[],"description":"A component used for visual effect."},"kro-switch":{"attributes":["v-model"],"description":""},"kro-textfield":{"attributes":["v-model","label","type","required","disabled","multiline","readonly","autofocus","min","max","maxlength","name","id","autoresize"],"description":""},"kro-toolbar":{"attributes":["small","padded","raised"],"description":""},"kro-dialog":{"attributes":["v-model","persistent"],"description":"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary."},"kro-surface":{"attributes":["padded","raised","outline","icon","label"],"description":"A surface that contains content and can have a label"},"kro-divider":{"attributes":["vertical"],"description":""},"kro-alert":{"attributes":["type","dismissible","icon","tag","outline"],"description":""},"kro-app":{"attributes":[],"description":""},"kro-list-item":{"attributes":["tag","to","exact","activeClass","exactActiveClass","href","target"],"description":""},"kro-menu":{"attributes":["offsetX","offsetY","left","right","top","bottom"],"description":""},"kro-avatar":{"attributes":["src","color","small","large"],"description":""},"kro-progress-bar":{"attributes":["stream","indeterminate","rounded","value","bufferValue"],"description":""},"kro-layout":{"attributes":["responsiveWidth","temporary","clipToolbar","mini","v-model:is-drawer-open","v-model:is-drawer-hidden"],"description":""},"kro-navigation":{"attributes":[],"description":""},"kro-select":{"attributes":["label","required","disabled","readonly","autofocus","name","id"],"description":"A styled select component."},"kro-slider":{"attributes":["v-model","disabled","steps","ticks","min","max"],"description":""}}
+{"kro-button":{"attributes":["loading","type","primary","outline","raised","icon","hideExternalIcon","to","exact","activeClass","exactActiveClass","href","target"],"description":"A styled button with added functionality"},"kro-button-group":{"attributes":[],"description":"A container for multiple related buttons"},"kro-icon":{"attributes":["icon"],"description":"Display an SVG icon"},"kro-spinner":{"attributes":[],"description":"A loading indicator"},"kro-squircle":{"attributes":[],"description":"A component used for visual effect."},"kro-switch":{"attributes":["v-model"],"description":""},"kro-textfield":{"attributes":["v-model","label","type","required","disabled","multiline","readonly","autofocus","min","max","maxlength","name","id","autoresize"],"description":""},"kro-toolbar":{"attributes":["small","padded","raised"],"description":""},"kro-dialog":{"attributes":["v-model","persistent"],"description":"Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary."},"kro-surface":{"attributes":["padded","raised","outline","icon","label"],"description":"A surface that contains content and can have a label"},"kro-divider":{"attributes":["vertical"],"description":""},"kro-alert":{"attributes":["type","dismissible","icon","tag","outline"],"description":""},"kro-app":{"attributes":[],"description":""},"kro-list-item":{"attributes":["tag","to","exact","activeClass","exactActiveClass","href","target"],"description":""},"kro-menu":{"attributes":["offsetX","offsetY","left","right","top","bottom"],"description":""},"kro-avatar":{"attributes":["src","color","small","large"],"description":""},"kro-progress-bar":{"attributes":["stream","indeterminate","rounded","value","bufferValue"],"description":""},"kro-layout":{"attributes":["responsiveWidth","temporary","clipToolbar","mini","v-model:is-drawer-open","v-model:is-drawer-hidden"],"description":""},"kro-select":{"attributes":["label","required","disabled","readonly","autofocus","name","id"],"description":"A styled select component."},"kro-slider":{"attributes":["v-model","disabled","steps","ticks","min","max"],"description":""}}

package.json

 {
   "name": "@black-kro/ui",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "private": false,
@@ -23,18 +23,28 @@ "main": "./dist/index.common.js",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --open",
     "build": "rm -rf ./dist && rollup -c && node ./build/vetur.js",
-    "docs": "vitepress dev docs",
-    "prepublishOnly": "yarn build"
+    "docs": "cross-env NODE_ENV=production vite build",
+    "prepublishOnly": "npm build",
+    "lint": "eslint ./src --fix"
   },
   "dependencies": {
-    "@vueuse/core": "^4.0.0-beta.2",
+    "@iconify/iconify": "2.0.0-rc.1",
+    "@vueuse/core": "^4.0.0-beta.15",
     "focus-trap": "^5.1.0",
-    "vue": "3.0.0-rc.10",
-    "vue-router": "4.0.0-beta.6"
+    "vue": "3.0.0",
+    "vue-router": "4.0.0-beta.9"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.3.0",
+    "@antfu/eslint-config-vue": "^0.3.3",
+    "@black-kro/vite-plugin-markdown": "0.0.7",
+    "@iconify/json": "^1.1.224",
+    "@purge-icons/generated": "^0.4.0",
     "@rollup/plugin-buble": "^0.21.3",
-    "@vue/compiler-sfc": "3.0.0-rc.10",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@vue/compiler-sfc": "3.0.0",
+    "@vuedx/typescript-plugin-vue": "^0.2.4-0",
     "autoprefixer": "^9.8.5",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.9.0",
+    "rollup": "^2.27.1",
     "rollup-plugin-clean": "^1.0.0",
@@ -49,5 +59,8 @@ "rollup-plugin-copy": "^3.3.0",
     "tailwindcss": "^1.6.0",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.7",
-    "vite": "1.0.0-rc.4"
+    "typescript": "^4.0.2",
+    "vite": "^1.0.0-rc.4",
+    "vite-plugin-components": "^0.2.13",
+    "vite-plugin-purge-icons": "^0.4.0",
+    "vite-plugin-voie": "^0.4.0",
+    "voie-pages": "^0.4.0"
   },
@@ -54,0 +67,0 @@ "vetur": {

README.md

@@ -32,27 +32,19 @@ <p align="center">
 import { createApp } from 'vue';
-import App from 'your-app-component';
+import App from 'App.vue';
 
 // Import Kro UI Library
-import KroUI from '@black-kro/ui';
+import { KroUIPlugin } from '@black-kro/ui';
 
-// Base Styles for Kro UI
+// Base Styles and theme for Kro UI
 import '@black-kro/ui/dist/kro-ui.common.css';
+import '@black-kro/ui/dist/themes/default.scss';
 
-// If using the Nord theme, import it from the package.
-import '@black-kro/ui/dist/themes/nord.scss';
-
 // Create New Vue App
 createApp(App)
-    .use(KroUI, {
-
-        // Register Your Icons Here
+    .use(KroUIPlugin, {
         icons: {
-            // Icons use SVG path definitions
             'menu': 'M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z',
         }
-
     })
     .mount('#app');
-
-
 ```
@@ -88,3 +80,2 @@ ## Contributing
 - `docs`: Contains docs for the UI library.
-- `packages`: Contains various libraries used in project. Main packages of interst will be `press` which handles the docs.
 - `src`: Contains the source code for the UI components.
@@ -91,0 +82,0 @@ - `components`: Contains folders which each represent a different component.

src/components/Alert/index.ts

@@ -1,64 +0,64 @@
-import { ComponentMetadata } from '../../types';
+import type { ComponentMetadata } from '../../types'
 
-export { default as KroAlert } from './Alert.vue';
+export { default as KroAlert } from './Alert.vue'
 
 export const Metadata: ComponentMetadata = {
-        title: 'KroAlert',
-        description: '',
-        props: [
-            {
-                name: 'type',
-                description: 'Defines the type of alert that is shown.',
-                type: 'string',
-                values: ['info', 'error', 'warning', 'success'],
-                default: 'info',
-            },
-            {
-                name: 'dismissible',
-                description: 'Shows a close icon on the alert allowing the user to dismiss the alert.',
-                type: 'bool',
-                values: '-',
-                default: 'false',
-            },
-            {
-                name: 'icon',
-                description: 'Sets the icon that is displayed on the alert.',
-                type: 'string',
-                values: '-',
-                default: 'undefined',
-            },
-            {
-                name: 'tag',
-                description: 'Sets the root tage of the alert',
-                type: 'string',
-                values: '-',
-                default: 'div',
-            },
-            {
-                name: 'outline',
-                description: 'Give the alert an outline style.',
-                type: 'bool',
-                values: '-',
-                default: 'false',
-            },
-        ],
-        events: [
-            {
-                name: '@dismissed',
-                description: 'Fires when the alert is dismissed',
-                parameters: [],
-            },
-            {
-                name: '@show',
-                description: 'Fires when the alert is shown after being dismissed',
-                parameters: [],
-            }
-        ],
-        slots: [
-            {
-                name: '#default',
-                description: 'Slot for the text content of the alert.',
-                props: [],
-            }
-        ]
-};
+  title: 'KroAlert',
+  description: '',
+  props: [
+    {
+      name: 'type',
+      description: 'Defines the type of alert that is shown.',
+      type: 'string',
+      values: ['info', 'error', 'warning', 'success'],
+      default: 'info',
+    },
+    {
+      name: 'dismissible',
+      description: 'Shows a close icon on the alert allowing the user to dismiss the alert.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'icon',
+      description: 'Sets the icon that is displayed on the alert.',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'tag',
+      description: 'Sets the root tage of the alert',
+      type: 'string',
+      values: '-',
+      default: 'div',
+    },
+    {
+      name: 'outline',
+      description: 'Give the alert an outline style.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+  events: [
+    {
+      name: '@dismissed',
+      description: 'Fires when the alert is dismissed',
+      parameters: [],
+    },
+    {
+      name: '@show',
+      description: 'Fires when the alert is shown after being dismissed',
+      parameters: [],
+    },
+  ],
+  slots: [
+    {
+      name: '#default',
+      description: 'Slot for the text content of the alert.',
+      props: [],
+    },
+  ],
+}

src/components/App/index.ts

@@ -1,8 +0,8 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroApp } from './App.vue';
+export { default as KroApp } from './App.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroApp',
-    description: '',
-}
+  title: 'KroApp',
+  description: '',
+}

src/components/Avatar/index.ts

@@ -1,52 +0,52 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroAvatar } from './Avatar.vue';
+export { default as KroAvatar } from './Avatar.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroAvatar',
-    description: '',
-    props: [
-        {
-            name: 'src',
-            description: 'Sets the image of the avatar',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'color',
-            description: 'Sets the color of the avatar.',
-            type: 'string',
-            values: '-',
-            default: 'undefined'
-        },
-        {
-            name: 'small',
-            description: 'Makes the avatar smaller.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'large',
-            description: 'Makes the avatar larger.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-    ],
-    css: [
-        {
-            name: '--kro-avatar-size',
-            description: '',
-            default: '3rem',
-            type: 'CSS Size Unit'
-        },
-        {
-            name: '--kro-avatar-radius',
-            description: '',
-            default: '50%',
-            type: 'CSS Size Unit'
-        },
-    ]
-};
+  title: 'KroAvatar',
+  description: '',
+  props: [
+    {
+      name: 'src',
+      description: 'Sets the image of the avatar',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'color',
+      description: 'Sets the color of the avatar.',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'small',
+      description: 'Makes the avatar smaller.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'large',
+      description: 'Makes the avatar larger.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-avatar-size',
+      description: '',
+      default: '3rem',
+      type: 'CSS Size Unit',
+    },
+    {
+      name: '--kro-avatar-radius',
+      description: '',
+      default: '50%',
+      type: 'CSS Size Unit',
+    },
+  ],
+}

src/components/Button/index.ts

@@ -1,61 +0,61 @@
-import { ComponentMetadata } from '../../types';
-import { RoutablePropsMetadata } from '../../composables/useRoutable';
-export { default as KroButton } from './Button.vue';
+import { ComponentMetadata } from '../../types'
+import { RoutablePropsMetadata } from '../../composables/useRoutable'
+export { default as KroButton } from './Button.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroButton',
-    description: 'A styled button with added functionality',
-    props: [
-        {
-            name: 'loading',
-            description: 'Displays a loading indicator over the button',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'type',
-            description: 'The type of the button',
-            type: 'string',
-            values: ['button', 'reset', 'submit'],
-            default: 'button',
-        },
-        {
-            name: 'primary',
-            description: 'Applies a style to the button to indicate that it is a primary button',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'outline',
-            description: 'Give the button an outline style',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'raised',
-            description: 'Apply a shadow to the button',
-            type: 'string',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'icon',
-            description: 'Adds an icon to the button',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'hideExternalIcon',
-            description: 'Hides the external link icon for buttons that are links.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
+  title: 'KroButton',
+  description: 'A styled button with added functionality',
+  props: [
+    {
+      name: 'loading',
+      description: 'Displays a loading indicator over the button',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'type',
+      description: 'The type of the button',
+      type: 'string',
+      values: ['button', 'reset', 'submit'],
+      default: 'button',
+    },
+    {
+      name: 'primary',
+      description: 'Applies a style to the button to indicate that it is a primary button',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'outline',
+      description: 'Give the button an outline style',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'raised',
+      description: 'Apply a shadow to the button',
+      type: 'string',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'icon',
+      description: 'Adds an icon to the button',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'hideExternalIcon',
+      description: 'Hides the external link icon for buttons that are links.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
 
-        ...RoutablePropsMetadata,
-    ]
-};
+    ...RoutablePropsMetadata,
+  ],
+}

src/components/ButtonGroup/index.ts

@@ -1,8 +0,8 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroButtonGroup } from './ButtonGroup.vue';
+export { default as KroButtonGroup } from './ButtonGroup.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroButtonGroup',
-    description: 'A container for multiple related buttons',
-};
+  title: 'KroButtonGroup',
+  description: 'A container for multiple related buttons',
+}

src/components/Dialog/index.ts

@@ -1,58 +0,58 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroDialog } from './Dialog.vue';
+export { default as KroDialog } from './Dialog.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroDialog',
-    description: 'Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.',
-    props: [
-        {
-            name: 'v-model',
-            description: 'Contorls the open state of the dialog',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'persistent',
-            description: 'If enabled, the dialog can only be closed by the close button',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-    ],
-    events: [
-        {
-            name: '@open',
-            description: 'Fired when the dialog is opened',
-            parameters: []
-        },
-        {
-            name: '@close',
-            description: 'Fired when the dialog is closed',
-            parameters: [],
-        }
-    ],
-    slots: [
-        {
-            name: '#activator',
-            description: 'Slots the button that can be used to open the dialog',
-            props: ['open', 'close', 'toggle'],
-        },
-        {
-            name: '#title',
-            description: 'Slot for the title of the dialog',
-            props: ['open', 'close', 'toggle'],
-        },
-        {
-            name: '#controls',
-            description: 'Slot for the controls of the dialog',
-            props: ['open', 'close', 'toggle'],
-        },
-        {
-            name: '#default',
-            description: 'Slot for the content of the dialog',
-            props: [],
-        },
-    ],
-};
+  title: 'KroDialog',
+  description: 'Dialogs are used to display important information requiring the users immediate attention, often to confirm an action or to display an important error message, and should only be used when necessary.',
+  props: [
+    {
+      name: 'v-model',
+      description: 'Contorls the open state of the dialog',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'persistent',
+      description: 'If enabled, the dialog can only be closed by the close button',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+  events: [
+    {
+      name: '@open',
+      description: 'Fired when the dialog is opened',
+      parameters: [],
+    },
+    {
+      name: '@close',
+      description: 'Fired when the dialog is closed',
+      parameters: [],
+    },
+  ],
+  slots: [
+    {
+      name: '#activator',
+      description: 'Slots the button that can be used to open the dialog',
+      props: ['open', 'close', 'toggle'],
+    },
+    {
+      name: '#title',
+      description: 'Slot for the title of the dialog',
+      props: ['open', 'close', 'toggle'],
+    },
+    {
+      name: '#controls',
+      description: 'Slot for the controls of the dialog',
+      props: ['open', 'close', 'toggle'],
+    },
+    {
+      name: '#default',
+      description: 'Slot for the content of the dialog',
+      props: [],
+    },
+  ],
+}

src/components/Divider/index.ts

@@ -1,17 +0,17 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroDivider } from './Divider.vue';
+export { default as KroDivider } from './Divider.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroDivider',
-    description: '',
-    props: [
-        {
-            name: 'vertical',
-            description: 'Makes the divider a vertical divider',
-            type: 'bool',
-            values: '-',
-            default: 'false'
-        }
-    ]
-};
+  title: 'KroDivider',
+  description: '',
+  props: [
+    {
+      name: 'vertical',
+      description: 'Makes the divider a vertical divider',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+}

src/components/FocusTrap/FocusTrap.ts

 import {
-    defineComponent,
-    onMounted,
-    watch,
-    ref,
-    cloneVNode,
-    onUnmounted,
-    PropType
-  } from 'vue'
-  import createFocusTrap, { FocusTrap as FocusTrapI } from 'focus-trap'
-  
-  const FocusTrap = defineComponent({
-    emits: ['update:active', 'activate', 'deactivate'],
-    props: {
-      active: {
-        // TODO: could be options for activate
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
-      escapeDeactivates: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
-      returnFocusOnDeactivate: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
-      allowOutsideClick: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
-      initialFocus: {
-        type: [String, Function] as PropType<string | (() => HTMLElement)>,
-        default: undefined,
-      },
-      fallbackFocus: {
-        type: [String, Function] as PropType<string | (() => HTMLElement)>,
-        default: undefined,
-      },
+  defineComponent,
+  onMounted,
+  watch,
+  ref,
+  cloneVNode,
+  onUnmounted,
+  PropType,
+} from 'vue'
+import createFocusTrap, { FocusTrap as FocusTrapI } from 'focus-trap'
+
+const FocusTrap = defineComponent({
+  emits: ['update:active', 'activate', 'deactivate'],
+  props: {
+    active: {
+      // TODO: could be options for activate
+      type: Boolean as PropType<boolean>,
+      default: true,
     },
-    setup(props, { slots, emit }) {
-      let trap: FocusTrapI | null
-      const el = ref<HTMLElement | null>(null)
-      onMounted(function () {
-        watch(
-          () => props.active,
-          active => {
-            if (active && el.value) {
-              // has no effect if already activated
-              trap = createFocusTrap(el.value, {
-                escapeDeactivates: props.escapeDeactivates,
-                allowOutsideClick: () => props.allowOutsideClick,
-                returnFocusOnDeactivate: props.returnFocusOnDeactivate,
-                onActivate: () => {
-                  emit('update:active', true)
-                  emit('activate')
-                },
-                onDeactivate: () => {
-                  emit('update:active', false)
-                  emit('deactivate')
-                },
-                initialFocus:
+    escapeDeactivates: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+    returnFocusOnDeactivate: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+    allowOutsideClick: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+    initialFocus: {
+      type: [String, Function] as PropType<string | (() => HTMLElement)>,
+      default: undefined,
+    },
+    fallbackFocus: {
+      type: [String, Function] as PropType<string | (() => HTMLElement)>,
+      default: undefined,
+    },
+  },
+  setup(props, { slots, emit }) {
+    let trap: FocusTrapI | null
+    const el = ref<HTMLElement | null>(null)
+    onMounted(() => {
+      watch(
+        () => props.active,
+        (active) => {
+          if (active && el.value) {
+            // has no effect if already activated
+            trap = createFocusTrap(el.value, {
+              escapeDeactivates: props.escapeDeactivates,
+              allowOutsideClick: () => props.allowOutsideClick,
+              returnFocusOnDeactivate: props.returnFocusOnDeactivate,
+              onActivate: () => {
+                emit('update:active', true)
+                emit('activate')
+              },
+              onDeactivate: () => {
+                emit('update:active', false)
+                emit('deactivate')
+              },
+              initialFocus:
                   typeof props.initialFocus === 'string'
                     ? props.initialFocus
                     : props.initialFocus?.() ?? el.value,
-                fallbackFocus: props.fallbackFocus,
-              })
-              trap.activate()
-            } else {
+              fallbackFocus: props.fallbackFocus,
+            })
+            trap.activate()
+          }
+          else {
               trap?.deactivate()
-            }
-          },
-          { immediate: true }
-        )
-      })
-      onUnmounted(() => {
+          }
+        },
+        { immediate: true },
+      )
+    })
+    onUnmounted(() => {
         trap?.deactivate()
         trap = null
-      })
-      return () => {
-        const vNodes = slots.default?.()
-        if (!vNodes || !vNodes.length || vNodes.length > 1) {
-          throw new Error('FocusTrap requires exactly one child')
-        }
-        const vnode = cloneVNode(vNodes[0], { ref: el })
-        return vnode
-      }
-    },
-  })
-  
-  export default FocusTrap
+    })
+    return () => {
+      const vNodes = slots.default?.()
+      if (!vNodes || !vNodes.length || vNodes.length > 1)
+        throw new Error('FocusTrap requires exactly one child')
+
+      const vnode = cloneVNode(vNodes[0], { ref: el })
+      return vnode
+    }
+  },
+})
+
+export default FocusTrap

src/components/FocusTrap/index.ts

@@ -1,1 +0,1 @@
-export { default as FocusTrap } from './FocusTrap';
+export { default as FocusTrap } from './FocusTrap'

src/components/Icon/index.ts

@@ -1,25 +0,25 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroIcon } from './Icon.vue';
+export { default as KroIcon } from './Icon.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroIcon',
-    description: 'Display an SVG icon',
-    props: [
-        {
-            name: 'icon',
-            description: 'The name of the icon to display',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        }
-    ],
-    css: [
-        {
-            name: '--kro-icon-size',
-            description: 'The size of the icon',
-            type: 'size',
-            default: '1.5rem'
-        }
-    ],
-}
+  title: 'KroIcon',
+  description: 'Display an SVG icon',
+  props: [
+    {
+      name: 'icon',
+      description: 'The name of the icon to display',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-icon-size',
+      description: 'The size of the icon',
+      type: 'size',
+      default: '1.5rem',
+    },
+  ],
+}

src/components/index.ts

@@ -1,21 +0,20 @@
-export { KroButton } from './Button';
-export { KroButtonGroup } from './ButtonGroup';
-export { KroIcon } from './Icon';
-export { KroSpinner } from './Spinner';
-export { KroSquircle } from './Squircle';
-export { KroSwitch } from './Switch';
-export { KroTextfield } from './Textfield';
-export { KroToolbar } from './Toolbar';
-export { KroDialog } from './Dialog';
-export { KroSurface } from './Surface';
-export { KroDivider } from './Divider';
-export { KroAlert } from './Alert';
-export { KroApp } from './App';
-export { KroListItem } from './List';
-export { KroMenu } from './Menu';
-export { KroAvatar } from './Avatar';
-export { KroProgressBar } from './ProgressBar';
-export { KroLayout } from './Layout';
-export { KroNavigation } from './Navigation';
-export { KroSelect } from './Select';
-export { KroSlider } from './Slider';
+export { KroButton } from './Button'
+export { KroButtonGroup } from './ButtonGroup'
+export { KroIcon } from './Icon'
+export { KroSpinner } from './Spinner'
+export { KroSquircle } from './Squircle'
+export { KroSwitch } from './Switch'
+export { KroTextfield } from './Textfield'
+export { KroToolbar } from './Toolbar'
+export { KroDialog } from './Dialog'
+export { KroSurface } from './Surface'
+export { KroDivider } from './Divider'
+export { KroAlert } from './Alert'
+export { KroApp } from './App'
+export { KroListItem } from './List'
+export { KroMenu } from './Menu'
+export { KroAvatar } from './Avatar'
+export { KroProgressBar } from './ProgressBar'
+export { KroLayout } from './Layout'
+export { KroSelect } from './Select'
+export { KroSlider } from './Slider'

src/components/Layout/index.ts

@@ -1,74 +0,74 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroLayout } from './Layout.vue';
+export { default as KroLayout } from './Layout.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroLayout',
-    description: '',
-    props: [
-        {
-            name: 'responsiveWidth',
-            default: '768',
-            description: 'The width at which the drawer is hidden',
-            type: 'number',
-            values: [],
-        },
-        {
-            name: 'temporary',
-            default: 'false',
-            description: 'Hides the drawer by default',
-            type: 'bool',
-            values: []
-        },
-        {
-            name: 'clipToolbar',
-            default: 'false',
-            description: 'Shifts the toolbar to the right to make room for the drawer',
-            type: 'bool',
-            values: []
-        },
-        {
-            name: 'mini',
-            default: 'false',
-            description: 'Makes the drawer smaller',
-            type: 'bool',
-            values: []
-        },
-        {
-            name: 'v-model:is-drawer-open',
-            default: 'true or false',
-            description: 'Controls the open state of the drawer',
-            type: 'bool',
-            values: []
-        },
-        {
-            name: 'v-model:is-drawer-hidden',
-            default: 'true or false',
-            description: 'Indicates if the drawer is in a default hidden state',
-            type: 'bool',
-            values: []
-        },
-    ],
-    slots: [
-        {
-            name: '#drawer',
-            description: 'Contains the sidebar navigation of the page',
-            props: [],
-        },
-        {
-            name: '#toolbar',
-            description: 'Contains the toolbar of the page',
-            props: [],
-        },
-        {
-            name: '#footer',
-            description: 'Contains the footer content of the page',
-            props: [],
-        },
-        {
-            name: '#default',
-            description: 'Contains the contents of the page',
-            props: [],
-        }
-    ],
-}
+  title: 'KroLayout',
+  description: '',
+  props: [
+    {
+      name: 'responsiveWidth',
+      default: '768',
+      description: 'The width at which the drawer is hidden',
+      type: 'number',
+      values: [],
+    },
+    {
+      name: 'temporary',
+      default: 'false',
+      description: 'Hides the drawer by default',
+      type: 'bool',
+      values: [],
+    },
+    {
+      name: 'clipToolbar',
+      default: 'false',
+      description: 'Shifts the toolbar to the right to make room for the drawer',
+      type: 'bool',
+      values: [],
+    },
+    {
+      name: 'mini',
+      default: 'false',
+      description: 'Makes the drawer smaller',
+      type: 'bool',
+      values: [],
+    },
+    {
+      name: 'v-model:is-drawer-open',
+      default: 'true or false',
+      description: 'Controls the open state of the drawer',
+      type: 'bool',
+      values: [],
+    },
+    {
+      name: 'v-model:is-drawer-hidden',
+      default: 'true or false',
+      description: 'Indicates if the drawer is in a default hidden state',
+      type: 'bool',
+      values: [],
+    },
+  ],
+  slots: [
+    {
+      name: '#drawer',
+      description: 'Contains the sidebar navigation of the page',
+      props: [],
+    },
+    {
+      name: '#toolbar',
+      description: 'Contains the toolbar of the page',
+      props: [],
+    },
+    {
+      name: '#footer',
+      description: 'Contains the footer content of the page',
+      props: [],
+    },
+    {
+      name: '#default',
+      description: 'Contains the contents of the page',
+      props: [],
+    },
+  ],
+}

src/components/List/index.ts

@@ -1,42 +0,42 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
+import { RoutablePropsMetadata } from '../../composables/useRoutable'
 
-export { default as KroListItem } from './ListItem.vue';
-import { RoutablePropsMetadata } from '../../composables/useRoutable';
+export { default as KroListItem } from './ListItem.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroListItem',
-    description: '',
-    props: [
-        {
-            name: 'tag',
-            description: '',
-            type: 'string',
-            values: '-',
-            default: 'div',
-        },
+  title: 'KroListItem',
+  description: '',
+  props: [
+    {
+      name: 'tag',
+      description: '',
+      type: 'string',
+      values: '-',
+      default: 'div',
+    },
 
-        ...RoutablePropsMetadata,
-    ],
-    slots: [
-        {
-            name: '#icon',
-            description: 'Item icon slot',
-            props: []
-        },
-        {
-            name: '#subtitle',
-            description: 'Item subtitle slot',
-            props: []
-        },
-        {
-            name: '#action',
-            description: 'Action on the right side of the item',
-            props: []
-        },
-        {
-            name: '#default',
-            description: 'Main text of the item',
-            props: []
-        },
-    ]
-}
+    ...RoutablePropsMetadata,
+  ],
+  slots: [
+    {
+      name: '#icon',
+      description: 'Item icon slot',
+      props: [],
+    },
+    {
+      name: '#subtitle',
+      description: 'Item subtitle slot',
+      props: [],
+    },
+    {
+      name: '#action',
+      description: 'Action on the right side of the item',
+      props: [],
+    },
+    {
+      name: '#default',
+      description: 'Main text of the item',
+      props: [],
+    },
+  ],
+}

src/components/Menu/composables/menu.ts

@@ -1,32 +0,30 @@
-import { Ref } from 'vue';
+import { Ref } from 'vue'
 
 interface PositioningOptions {
-    offsetX: Boolean,
-    offsetY: Boolean,
-};
+  offsetX: Boolean
+  offsetY: Boolean
+}
 
 export const usePositioning = (containerEl: Ref<HTMLElement | null>, targetEl: Ref<HTMLElement | null>, options: PositioningOptions) => {
+  if (!containerEl.value || !targetEl.value)
+    return { canFit: { top: false, bottom: false, left: false, right: false } }
 
-    if (!containerEl.value || !targetEl.value)
-        return { canFit: { top: false, bottom: false, left: false, right: false, } };
+  const { innerWidth: windowWidth, innerHeight: windowHeight } = window
 
-    const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
+  const container = containerEl.value.getBoundingClientRect()
+  const target = targetEl.value
 
+  const offsetX = options.offsetX ? container.width : 0
+  const offsetY = options.offsetY ? container.height : 0
 
-    const container = containerEl.value.getBoundingClientRect();
-    const target = targetEl.value;
+  const canFit = {
+    bottom: (target.offsetHeight + container.top + offsetY) < windowHeight,
+    top: target.offsetHeight < container.top,
+    left: target.offsetTop < container.left,
+    right: (target.offsetWidth + container.left + offsetX) < windowWidth,
+  }
 
-    const offsetX = options.offsetX ? container.width : 0;
-    const offsetY = options.offsetY ? container.height : 0;
-
-    const canFit = {
-        bottom: (target.offsetHeight + container.top + offsetY) < windowHeight,
-        top: target.offsetHeight < container.top,
-        left: target.offsetTop < container.left,
-        right: (target.offsetWidth + container.left + offsetX) < windowWidth,
-    };
-
-    return {
-        canFit
-    }
-};
+  return {
+    canFit,
+  }
+}

src/components/Menu/index.ts

@@ -1,73 +0,73 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroMenu } from './Menu.vue';
+export { default as KroMenu } from './Menu.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroMenu',
-    description: '',
-    props: [
-        {
-            name: 'offsetX',
-            description: 'Offsets the menu horizontally so it is not covering the activator element.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'offsetY',
-            description: 'Offsets the menu vertically so it is not coverting the activator element',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'left',
-            description: 'Positions the menu to open to the left of the activator.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'right',
-            description: 'Positions the menu to open to the right of the activator.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'top',
-            description: 'Positions the menut to open above the activator.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'bottom',
-            description: 'Positions the element to open below the activator.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        }
-    ],
-    slots: [
-        {
-            name: '#default',
-            description: '',
-            props: [],
-        }
-    ],
-    css: [
-        {
-            name: '--kro-menu-min-width',
-            description: '',
-            type: 'size',
-            default: '200px',
-        },
-        {
-            name: '--kro-menu-max-width',
-            description: '',
-            type: 'size',
-            default: '300px',
-        },
-    ]
-}
+  title: 'KroMenu',
+  description: '',
+  props: [
+    {
+      name: 'offsetX',
+      description: 'Offsets the menu horizontally so it is not covering the activator element.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'offsetY',
+      description: 'Offsets the menu vertically so it is not coverting the activator element',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'left',
+      description: 'Positions the menu to open to the left of the activator.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'right',
+      description: 'Positions the menu to open to the right of the activator.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'top',
+      description: 'Positions the menut to open above the activator.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'bottom',
+      description: 'Positions the element to open below the activator.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+  slots: [
+    {
+      name: '#default',
+      description: '',
+      props: [],
+    },
+  ],
+  css: [
+    {
+      name: '--kro-menu-min-width',
+      description: '',
+      type: 'size',
+      default: '200px',
+    },
+    {
+      name: '--kro-menu-max-width',
+      description: '',
+      type: 'size',
+      default: '300px',
+    },
+  ],
+}

src/components/metadata.ts

@@ -1,21 +0,20 @@
-export { Metadata as ButtonMetadata } from './Button';
-export { Metadata as ButtonGroupMetadata } from './ButtonGroup';
-export { Metadata as IconMetadata } from './Icon';
-export { Metadata as SpinnerMetadata } from './Spinner';
-export { Metadata as SquircleMetadata } from './Squircle';
-export { Metadata as SwitchMetadata } from './Switch';
-export { Metadata as TextfieldMetadata } from './Textfield';
-export { Metadata as ToolbarMetadata } from './Toolbar';
-export { Metadata as DialogMetadata } from './Dialog';
-export { Metadata as SurfaceMetadata } from './Surface';
-export { Metadata as DividerMetadata } from './Divider';
-export { Metadata as AlertMetadata } from './Alert';
-export { Metadata as AppMetadata } from './App';
-export { Metadata as ListMetadata } from './List';
-export { Metadata as MenuMetadata } from './Menu';
-export { Metadata as AvatarMetadata } from './Avatar';
-export { Metadata as ProgressBarMetadata } from './ProgressBar';
-export { Metadata as LayoutMetadata } from './Layout';
-export { Metadata as NavigationMetadata } from './Navigation';
-export { Metadata as SelectMetadata } from './Select';
-export { Metadata as SliderMetadata } from './Slider';
+export { Metadata as ButtonMetadata } from './Button'
+export { Metadata as ButtonGroupMetadata } from './ButtonGroup'
+export { Metadata as IconMetadata } from './Icon'
+export { Metadata as SpinnerMetadata } from './Spinner'
+export { Metadata as SquircleMetadata } from './Squircle'
+export { Metadata as SwitchMetadata } from './Switch'
+export { Metadata as TextfieldMetadata } from './Textfield'
+export { Metadata as ToolbarMetadata } from './Toolbar'
+export { Metadata as DialogMetadata } from './Dialog'
+export { Metadata as SurfaceMetadata } from './Surface'
+export { Metadata as DividerMetadata } from './Divider'
+export { Metadata as AlertMetadata } from './Alert'
+export { Metadata as AppMetadata } from './App'
+export { Metadata as ListMetadata } from './List'
+export { Metadata as MenuMetadata } from './Menu'
+export { Metadata as AvatarMetadata } from './Avatar'
+export { Metadata as ProgressBarMetadata } from './ProgressBar'
+export { Metadata as LayoutMetadata } from './Layout'
+export { Metadata as SelectMetadata } from './Select'
+export { Metadata as SliderMetadata } from './Slider'

src/components/ProgressBar/index.ts

@@ -1,48 +0,48 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroProgressBar } from './ProgressBar.vue';
+export { default as KroProgressBar } from './ProgressBar.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroProgressBar',
-    description: '',
-    props: [
-        {
-            name: 'stream',
-            description: 'Display a speical style to the progress bar to indicate it is a stream',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'indeterminate',
-            description: 'Display a special style to the progress bar to indicate that is indeterminate.',
-            type: '',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'rounded',
-            description: 'Applies a rounded style to the progress bar.',
-            type: 'bool',
-            values: '-',
-            default: 'true',
-        },
-        {
-            name: 'value',
-            description: 'Sets the value of the progress bar.',
-            type: 'number',
-            values: '-',
-            default: '0',
-        },
-        {
-            name: 'bufferValue',
-            description: 'Sets the buffer value of the progress bar.',
-            type: 'number',
-            values: '-',
-            default: '100',
-        },
-    ],
-    css: [
+  title: 'KroProgressBar',
+  description: '',
+  props: [
+    {
+      name: 'stream',
+      description: 'Display a speical style to the progress bar to indicate it is a stream',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'indeterminate',
+      description: 'Display a special style to the progress bar to indicate that is indeterminate.',
+      type: '',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'rounded',
+      description: 'Applies a rounded style to the progress bar.',
+      type: 'bool',
+      values: '-',
+      default: 'true',
+    },
+    {
+      name: 'value',
+      description: 'Sets the value of the progress bar.',
+      type: 'number',
+      values: '-',
+      default: '0',
+    },
+    {
+      name: 'bufferValue',
+      description: 'Sets the buffer value of the progress bar.',
+      type: 'number',
+      values: '-',
+      default: '100',
+    },
+  ],
+  css: [
 
-    ],
-}
+  ],
+}

src/components/Select/index.ts

@@ -1,59 +0,59 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSelect } from './Select.vue';
+export { default as KroSelect } from './Select.vue'
 
 export const Metadata: ComponentMetadata = {
-    title: 'KroSelect',
-    description: 'A styled select component.',
-    props: [
-        {
-            name: 'label',
-            description: '',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'required',
-            description: '',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'disabled',
-            description: '',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'readonly',
-            description: '',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'autofocus',
-            description: '',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'name',
-            description: '',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'id',
-            description: '',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-    ]
-}
+  title: 'KroSelect',
+  description: 'A styled select component.',
+  props: [
+    {
+      name: 'label',
+      description: '',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'required',
+      description: '',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'disabled',
+      description: '',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'readonly',
+      description: '',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'autofocus',
+      description: '',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'name',
+      description: '',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'id',
+      description: '',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+  ],
+}

src/components/Slider/composables/slider.ts

@@ -1,17 +0,15 @@
-import { Ref, computed } from 'vue';
-import { useMouseInElement } from '@vueuse/core';
+import { Ref, computed } from 'vue'
+import { useMouseInElement } from '@vueuse/core'
 
 export const useSliderContainer = (target?: Ref<HTMLElement | null>) => {
+  const { x, elementPositionX, elementWidth } = useMouseInElement(target)
 
-    const { x, elementPositionX, elementWidth } = useMouseInElement(target);
+  const targetPercentage = computed(() => {
+    return Math.min(Math.max(0, x.value - elementPositionX.value), elementWidth.value) / (elementWidth.value || 1)
+  })
 
-    const targetPercentage = computed(() => {
-        return Math.min(Math.max(0, x.value - elementPositionX.value), elementWidth.value) / (elementWidth.value || 1);
-    })
-
-    return {
-        elementWidth,
-        targetPercentage,
-    }
-
-};
+  return {
+    elementWidth,
+    targetPercentage,
+  }
+}

src/components/Slider/index.ts

@@ -1,97 +0,97 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSlider } from './Slider.vue';
+export { default as KroSlider } from './Slider.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroSlider',
-    description: '',
-    props: [
-        {
-            name: 'v-model',
-            description: 'The value of the slider',
-            type: 'number',
-            values: '-',
-            default: 'undefined'
-        },
-        {
-            name: 'disabled',
-            description: 'Disables the slider',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'steps',
-            description: 'Sets the step amount for each tick',
-            type: 'number',
-            values: '-',
-            default: '1',
-        },
-        {
-            name: 'ticks',
-            description: 'Display the ticks on the slider',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'min',
-            description: 'Set the min value of the slider',
-            type: 'number',
-            values: '-',
-            default: '0',
-        },
-        {
-            name: 'max',
-            description: 'Set the max value of the slider',
-            type: 'number',
-            values: '-',
-            default: '100',
-        },
-    ],
-    slots: [
-        {
-            name: '#thumb',
-            description: 'A slot to replace the default value of the thumb.',
-            props: ['value']
-        }
-    ],
-    css: [
-        {
-            name: '--kro-slider-tick-color',
-            description: 'The color of the tick marks on the slider.',
-            type: 'color',
-            default: 'rgba(0, 0, 0, .24)',
-        },
-        {
-            name: '--kro-slider-track-color',
-            description: 'The color of the slider track.',
-            type: 'color',
-            default: '--kro-background-secondary',
-        },
-        {
-            name: '--kro-slider-progress-color',
-            description: 'The color of the progress bar on the track.',
-            type: 'color',
-            default: '--kro-primary',
-        },
-        {
-            name: '--kro-slider-knob-color',
-            description: 'The color of the knob on the slider.',
-            type: 'color',
-            default: '--kro-primary-lighten',
-        },
-        {
-            name: '--kro-slider-thumb-foreground',
-            description: 'The foreground color of the thumb.',
-            type: 'color',
-            default: '--kro-primary-foreground',
-        },
-        {
-            name: '--kro-slider-thumb-background',
-            description: 'The background color of the thumb.',
-            type: 'color',
-            default: '--kro-primary',
-        },
-    ],
-}
+export const Metadata: ComponentMetadata = {
+  title: 'KroSlider',
+  description: '',
+  props: [
+    {
+      name: 'v-model',
+      description: 'The value of the slider',
+      type: 'number',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'disabled',
+      description: 'Disables the slider',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'steps',
+      description: 'Sets the step amount for each tick',
+      type: 'number',
+      values: '-',
+      default: '1',
+    },
+    {
+      name: 'ticks',
+      description: 'Display the ticks on the slider',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'min',
+      description: 'Set the min value of the slider',
+      type: 'number',
+      values: '-',
+      default: '0',
+    },
+    {
+      name: 'max',
+      description: 'Set the max value of the slider',
+      type: 'number',
+      values: '-',
+      default: '100',
+    },
+  ],
+  slots: [
+    {
+      name: '#thumb',
+      description: 'A slot to replace the default value of the thumb.',
+      props: ['value'],
+    },
+  ],
+  css: [
+    {
+      name: '--kro-slider-tick-color',
+      description: 'The color of the tick marks on the slider.',
+      type: 'color',
+      default: 'rgba(0, 0, 0, .24)',
+    },
+    {
+      name: '--kro-slider-track-color',
+      description: 'The color of the slider track.',
+      type: 'color',
+      default: '--kro-background-secondary',
+    },
+    {
+      name: '--kro-slider-progress-color',
+      description: 'The color of the progress bar on the track.',
+      type: 'color',
+      default: '--kro-primary',
+    },
+    {
+      name: '--kro-slider-knob-color',
+      description: 'The color of the knob on the slider.',
+      type: 'color',
+      default: '--kro-primary-lighten',
+    },
+    {
+      name: '--kro-slider-thumb-foreground',
+      description: 'The foreground color of the thumb.',
+      type: 'color',
+      default: '--kro-primary-foreground',
+    },
+    {
+      name: '--kro-slider-thumb-background',
+      description: 'The background color of the thumb.',
+      type: 'color',
+      default: '--kro-primary',
+    },
+  ],
+}

src/components/Spinner/index.ts

@@ -1,28 +0,28 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSpinner } from './Spinner.vue';
+export { default as KroSpinner } from './Spinner.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroSpinner',
-    description: 'A loading indicator',
-    css: [
-        {
-            name: '--kro-spinner-size',
-            description: 'Sets the size of the spinner',
-            type: 'size',
-            default: '2.5rem',
-        },
-        {
-            name: '--kro-spinner-thickness',
-            description: 'Sets the thickness of the spinner',
-            type: 'size',
-            default: '0.35rem',
-        },
-        {
-            name: '--kro-spinner-color',
-            description: 'Sets the color of the spinner',
-            type: 'size',
-            default: '--kro-foreground',
-        },
-    ]
-};
+export const Metadata: ComponentMetadata = {
+  title: 'KroSpinner',
+  description: 'A loading indicator',
+  css: [
+    {
+      name: '--kro-spinner-size',
+      description: 'Sets the size of the spinner',
+      type: 'size',
+      default: '2.5rem',
+    },
+    {
+      name: '--kro-spinner-thickness',
+      description: 'Sets the thickness of the spinner',
+      type: 'size',
+      default: '0.35rem',
+    },
+    {
+      name: '--kro-spinner-color',
+      description: 'Sets the color of the spinner',
+      type: 'size',
+      default: '--kro-foreground',
+    },
+  ],
+}

src/components/Squircle/index.ts

@@ -1,8 +0,8 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSquircle } from './Squircle.vue';
+export { default as KroSquircle } from './Squircle.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroSquircle',
-    description: 'A component used for visual effect.',
-};
+export const Metadata: ComponentMetadata = {
+  title: 'KroSquircle',
+  description: 'A component used for visual effect.',
+}

src/components/Surface/index.ts

@@ -1,65 +0,65 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSurface } from './Surface.vue';
+export { default as KroSurface } from './Surface.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroSurface',
-    description: 'A surface that contains content and can have a label',
-    props: [
-        {
-            name: 'padded',
-            description: 'Adds a padding to the container.',
-            type: 'bool',
-            values: '-',
-            default: 'true'
-        },
-        {
-            name: 'raised',
-            description: 'Adds a shadow to the container.',
-            type: 'bool',
-            values: '-',
-            default: 'true'
-        },
-        {
-            name: 'outline',
-            description: 'Adds an outline to the container.',
-            type: 'bool',
-            values: '-',
-            default: 'false'
-        },
-        {
-            name: 'icon',
-            description: 'Adds an icon to the container.',
-            type: 'bool',
-            values: '-',
-            default: 'undefined'
-        },
-        {
-            name: 'label',
-            description: 'Adds a label to the container.',
-            type: 'string',
-            values: '-',
-            default: 'undefined'
-        },
-    ],
-    css: [
-        {
-            name: '--kro-surface-background',
-            description: '',
-            type: 'color',
-            default: '--kro-background-secondary',
-        },
-        {
-            name: '--kro-surface-outline',
-            description: 'Sets the outline color of and outlined container',
-            type: 'color',
-            default: '--kro-divider',
-        },
-        {
-            name: '--kro-surface-shadow',
-            description: 'Sets the shadow of a raised container',
-            type: 'shadow',
-            default: '--kro-shadow',
-        },
-    ]
-};
+export const Metadata: ComponentMetadata = {
+  title: 'KroSurface',
+  description: 'A surface that contains content and can have a label',
+  props: [
+    {
+      name: 'padded',
+      description: 'Adds a padding to the container.',
+      type: 'bool',
+      values: '-',
+      default: 'true',
+    },
+    {
+      name: 'raised',
+      description: 'Adds a shadow to the container.',
+      type: 'bool',
+      values: '-',
+      default: 'true',
+    },
+    {
+      name: 'outline',
+      description: 'Adds an outline to the container.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'icon',
+      description: 'Adds an icon to the container.',
+      type: 'bool',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'label',
+      description: 'Adds a label to the container.',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-surface-background',
+      description: '',
+      type: 'color',
+      default: '--kro-background-secondary',
+    },
+    {
+      name: '--kro-surface-outline',
+      description: 'Sets the outline color of and outlined container',
+      type: 'color',
+      default: '--kro-divider',
+    },
+    {
+      name: '--kro-surface-shadow',
+      description: 'Sets the shadow of a raised container',
+      type: 'shadow',
+      default: '--kro-shadow',
+    },
+  ],
+}

src/components/Switch/index.ts

@@ -1,43 +0,43 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroSwitch } from './Switch.vue';
+export { default as KroSwitch } from './Switch.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroSwitch',
-    description: '',
-    props: [
-        {
-            name: 'v-model',
-            description: 'The value of the switch',
-            type: 'bool',
-            values: '-',
-            default: 'undefined',
-        },
-    ],
-    css: [
-        {
-            name: '--kro-switch-track-background',
-            description: 'The color of the track background.',
-            type: 'color',
-            default: '--kro-background-secondary',
-        },
-        {
-            name: '--kro-switch-track-active-background',
-            description: 'The track color when the switch is set to true.',
-            type: 'color',
-            default: '--kro-primary-darken',
-        },
-        {
-            name: '--kro-switch-knob-color',
-            description: 'The color of the switch knob.',
-            type: 'color',
-            default: '--kro-primary',
-        },
-        {
-            name: '--kro-switch-knob-shadow',
-            description: 'The shadow of the switch knob.',
-            type: 'shadow',
-            default: '--kro-shadow',
-        },
-    ]
-};
+export const Metadata: ComponentMetadata = {
+  title: 'KroSwitch',
+  description: '',
+  props: [
+    {
+      name: 'v-model',
+      description: 'The value of the switch',
+      type: 'bool',
+      values: '-',
+      default: 'undefined',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-switch-track-background',
+      description: 'The color of the track background.',
+      type: 'color',
+      default: '--kro-background-secondary',
+    },
+    {
+      name: '--kro-switch-track-active-background',
+      description: 'The track color when the switch is set to true.',
+      type: 'color',
+      default: '--kro-primary-darken',
+    },
+    {
+      name: '--kro-switch-knob-color',
+      description: 'The color of the switch knob.',
+      type: 'color',
+      default: '--kro-primary',
+    },
+    {
+      name: '--kro-switch-knob-shadow',
+      description: 'The shadow of the switch knob.',
+      type: 'shadow',
+      default: '--kro-shadow',
+    },
+  ],
+}

src/components/Tabs/index.ts

@@ -1,2 +0,2 @@
-export { default as KroTab } from './Tab.vue';
-export { default as KroTabs } from './Tabs.vue';
+export { default as KroTab } from './Tab.vue'
+export { default as KroTabs } from './Tabs.vue'

src/components/Textfield/index.ts

@@ -1,122 +0,122 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroTextfield } from './Textfield.vue';
+export { default as KroTextfield } from './Textfield.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroTextfield',
-    description: '',
-    props: [
-        {
-            name: 'v-model',
-            description: 'The value of the textfield',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'label',
-            description: 'The textfield label',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'type',
-            description: 'The textfield type',
-            type: 'string',
-            values: 'text | tel | email | password | url | search',
-            default: 'text',
-        },
-        {
-            name: 'required',
-            description: 'Marks the textfield as required',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'disabled',
-            description: 'Marks the textfield as disabled',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'multiline',
-            description: 'Makes the textfield into a textarea than can support multiple lines.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'readonly',
-            description: 'Marks the textfield as readonly',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'autofocus',
-            description: 'Autofocuses the textfield when the component loads.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'min',
-            description: 'Sets the min value if the textfield is a nubmer input',
-            type: 'number',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'max',
-            description: 'Sets the max value if the textfield is a nubmer input',
-            type: 'number',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'maxlength',
-            description: 'Sets the max amount of characters that the textfield will accept',
-            type: 'number',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'name',
-            description: 'Sets the name of the textfield.',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'id',
-            description: 'Sets the id of the textfield',
-            type: 'string',
-            values: '-',
-            default: 'undefined',
-        },
-        {
-            name: 'autoresize',
-            description: 'If the textfield is multiline, then this will autoresize the textfield vertically as the user types.',
-            type: 'bool',
-            values: '-',
-            default: 'true',
-        },
-    ],
-    css: [
-        {
-            name: '--kro-textfield-border-color',
-            description: 'The border color of the textifled',
-            type: 'color',
-            default: '--kro-divider',
-        },
-        {
-            name: '--kro-textifled-focused-border-color',
-            description: 'The border color of the textifled when it is focused',
-            type: 'color',
-            default: '--kro-primary',
-        },
-    ]
-}
+export const Metadata: ComponentMetadata = {
+  title: 'KroTextfield',
+  description: '',
+  props: [
+    {
+      name: 'v-model',
+      description: 'The value of the textfield',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'label',
+      description: 'The textfield label',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'type',
+      description: 'The textfield type',
+      type: 'string',
+      values: 'text | tel | email | password | url | search',
+      default: 'text',
+    },
+    {
+      name: 'required',
+      description: 'Marks the textfield as required',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'disabled',
+      description: 'Marks the textfield as disabled',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'multiline',
+      description: 'Makes the textfield into a textarea than can support multiple lines.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'readonly',
+      description: 'Marks the textfield as readonly',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'autofocus',
+      description: 'Autofocuses the textfield when the component loads.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'min',
+      description: 'Sets the min value if the textfield is a nubmer input',
+      type: 'number',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'max',
+      description: 'Sets the max value if the textfield is a nubmer input',
+      type: 'number',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'maxlength',
+      description: 'Sets the max amount of characters that the textfield will accept',
+      type: 'number',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'name',
+      description: 'Sets the name of the textfield.',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'id',
+      description: 'Sets the id of the textfield',
+      type: 'string',
+      values: '-',
+      default: 'undefined',
+    },
+    {
+      name: 'autoresize',
+      description: 'If the textfield is multiline, then this will autoresize the textfield vertically as the user types.',
+      type: 'bool',
+      values: '-',
+      default: 'true',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-textfield-border-color',
+      description: 'The border color of the textifled',
+      type: 'color',
+      default: '--kro-divider',
+    },
+    {
+      name: '--kro-textifled-focused-border-color',
+      description: 'The border color of the textifled when it is focused',
+      type: 'color',
+      default: '--kro-primary',
+    },
+  ],
+}

src/components/Toolbar/index.ts

@@ -1,51 +0,51 @@
-import { ComponentMetadata } from '../../types';
+import { ComponentMetadata } from '../../types'
 
-export { default as KroToolbar } from './Toolbar.vue';
+export { default as KroToolbar } from './Toolbar.vue'
 
-export const Metadata : ComponentMetadata = {
-    title: 'KroToolbar',
-    description: '',
-    props: [
-        {
-            name: 'small',
-            description: 'Makes the height of the toolbar smaller.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'padded',
-            description: 'Adds padding to the toolbar.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-        {
-            name: 'raised',
-            description: 'Adds a shadow to the toolbar.',
-            type: 'bool',
-            values: '-',
-            default: 'false',
-        },
-    ],
-    css: [
-        {
-            name: '--kro-toolbar-height',
-            description: 'The height of the toolbar',
-            type: 'size',
-            default: '4rem',
-        },
-        {
-            name: '--kro-toolbar-background',
-            description: 'The background color of the toolbar',
-            type: 'color',
-            default: '--kro-background-secondary',
-        },
-        {
-            name: '--kro-toolbar-shadow',
-            description: 'The shadow of a raised toolbar',
-            type: 'color',
-            default: '--kro-background-shadow',
-        },
-    ]
-};
+export const Metadata: ComponentMetadata = {
+  title: 'KroToolbar',
+  description: '',
+  props: [
+    {
+      name: 'small',
+      description: 'Makes the height of the toolbar smaller.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'padded',
+      description: 'Adds padding to the toolbar.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+    {
+      name: 'raised',
+      description: 'Adds a shadow to the toolbar.',
+      type: 'bool',
+      values: '-',
+      default: 'false',
+    },
+  ],
+  css: [
+    {
+      name: '--kro-toolbar-height',
+      description: 'The height of the toolbar',
+      type: 'size',
+      default: '4rem',
+    },
+    {
+      name: '--kro-toolbar-background',
+      description: 'The background color of the toolbar',
+      type: 'color',
+      default: '--kro-background-secondary',
+    },
+    {
+      name: '--kro-toolbar-shadow',
+      description: 'The shadow of a raised toolbar',
+      type: 'color',
+      default: '--kro-background-shadow',
+    },
+  ],
+}

src/composables/common.ts

@@ -1,82 +0,80 @@
-import { ref, watch } from 'vue';
-import { useThrottleFn, useEventListener } from '@vueuse/core';
+import { ref, watch, Ref } from 'vue'
+import { useThrottleFn, useEventListener } from '@vueuse/core'
 
 export const useWindow = () => {
-
-    /**
+  /**
      * Disables the document from scrolling.
      */
-    const disableDocumentScroll = () => {
-        document.documentElement.classList.add('kro-helper--prevent-scroll');
-    };
-        
-    /**
+  const disableDocumentScroll = () => {
+    document.documentElement.classList.add('kro-helper--prevent-scroll')
+  }
+
+  /**
      * Enables the document scrolling
      */
-    const enableDocumentScroll = () => {
-        document.documentElement.classList.remove('kro-helper--prevent-scroll');
-    };
+  const enableDocumentScroll = () => {
+    document.documentElement.classList.remove('kro-helper--prevent-scroll')
+  }
 
-    const disableDocumentSelect = () => {
-        document.documentElement.classList.add('kro-helper--prevent-select');
-    };
+  const disableDocumentSelect = () => {
+    document.documentElement.classList.add('kro-helper--prevent-select')
+  }
 
-    const enableDocumentSelect = () => {
-        document.documentElement.classList.remove('kro-helper--prevent-select');
-    };
+  const enableDocumentSelect = () => {
+    document.documentElement.classList.remove('kro-helper--prevent-select')
+  }
 
-    const disableAppFocus = () => {
-        document.querySelector('#app')?.setAttribute('tabindex', '-1');
-    };
-    
-    const enableAppFocus = () => {
-        document.querySelector('#app')?.removeAttribute('tabindex');
-    };
+  const disableAppFocus = () => {
+        document.querySelector('#app')?.setAttribute('tabindex', '-1')
+  }
 
-    return {
-        disableDocumentScroll,
-        enableDocumentScroll,
+  const enableAppFocus = () => {
+        document.querySelector('#app')?.removeAttribute('tabindex')
+  }
 
-        disableDocumentSelect,
-        enableDocumentSelect,
+  return {
+    disableDocumentScroll,
+    enableDocumentScroll,
 
-        enableAppFocus,
-        disableAppFocus,
-    }
+    disableDocumentSelect,
+    enableDocumentSelect,
 
-};
+    enableAppFocus,
+    disableAppFocus,
+  }
+}
 
-export const useElement = (target) => {
-    const elementWidth = ref(0);
-    const elementHeight = ref(0);
-    const elementLeft = ref(0);
-    const elementTop = ref(0);
+export const useElement = (target: Ref<any>) => {
+  const elementWidth = ref(0)
+  const elementHeight = ref(0)
+  const elementLeft = ref(0)
+  const elementTop = ref(0)
 
-    const updateRefs = (el: HTMLElement) => {
-        const { left, top, width, height } = el.getBoundingClientRect();
-    
-        elementWidth.value = width;
-        elementHeight.value = height;
-        elementLeft.value = left;
-        elementTop.value = top;
-    }
+  const updateRefs = (el: HTMLElement) => {
+    const { left, top, width, height } = el.getBoundingClientRect()
 
-    watch(target, (el: HTMLElement) => {
-        const ele = el || document.body;
-        updateRefs(ele);
-    });
+    elementWidth.value = width
+    elementHeight.value = height
+    elementLeft.value = left
+    elementTop.value = top
+  }
 
-    const throttledFn = useThrottleFn(() => {
-        const ele = target.value || document.body;
-        updateRefs(ele);
-    }, 250)
+  watch(target, (el: HTMLElement) => {
+    const ele = el || document.body
+    updateRefs(ele)
+  })
 
-    useEventListener('resize', throttledFn);
+  const throttledFn = useThrottleFn(() => {
+    const ele = target.value || document.body
+    updateRefs(ele)
+  }, 250)
 
-    return {
-        elementWidth,
-        elementHeight,
-        elementLeft,
-        elementTop,
-    }
-};
+  useEventListener('resize', throttledFn)
+
+  return {
+    elementWidth,
+    elementHeight,
+    elementLeft,
+    elementTop,
+  }
+}

src/composables/index.ts

@@ -1,5 +0,3 @@
-// export { useDialog, DialogType } from './useDialog';
-export { useIcons } from './icons';
-export { useTheme } from './useTheme';
-export { useWindow, useElement } from './common';
-export { useDialog } from './useDialog';
+export { useTheme } from './useTheme'
+export { useWindow, useElement } from './common'
+export { useDialog } from './useDialog'

src/composables/useDialog/index.ts

@@ -1,125 +0,104 @@
-import { watch, Ref, ref } from 'vue';
+import { ref } from 'vue'
 
 interface DialogConfiguration {
-    title: string;
-    message: string;
-    style?: string;
-    icon?: string;
-    iconColor?: string;
-    persistent?: boolean;
-    
-    resolveButton?: {
-        text: string;
-        hidden?: boolean;
-        attributes?: any;
-    };
-    
-    rejectButton?: {
-        text: string;
-        hidden?: boolean;
-        attributes?: any;
-    };
-};
+  title: string
+  message: string
+  style?: string
+  icon?: string
+  iconColor?: string
+  persistent?: boolean
 
+  resolveButton?: {
+    text: string
+    hidden?: boolean
+    attributes?: any
+  }
+
+  rejectButton?: {
+    text: string
+    hidden?: boolean
+    attributes?: any
+  }
+}
+
 const defaultDialogConfiguration: DialogConfiguration = {
-    title: 'Dialog Title',
-    message: 'Dialog Message',
-    style: 'default',
-    resolveButton: {
-        text: 'Ok',
-        attributes: {
-            primary: true,
-        }
+  title: 'Dialog Title',
+  message: 'Dialog Message',
+  style: 'default',
+  resolveButton: {
+    text: 'Ok',
+    attributes: {
+      primary: true,
     },
-    rejectButton: {
-        text: 'Cancel',
-    }
-};
+  },
+  rejectButton: {
+    text: 'Cancel',
+  },
+}
 
 const defaultConfirmationDialogConfiguration: DialogConfiguration = {
-    title: 'Confirmation Dialog',
-    message: 'Dialog Message',
-    icon: 'question',
-    style: 'default',
-    resolveButton: {
-        text: 'Ok',
-        attributes: {
-            primary: true,
-        }
+  title: 'Confirmation Dialog',
+  message: 'Dialog Message',
+  icon: 'mdi:help-circle',
+  style: 'default',
+  resolveButton: {
+    text: 'Ok',
+    attributes: {
+      primary: true,
     },
-    rejectButton: {
-        text: 'Cancel',
-    }
-};
+  },
+  rejectButton: {
+    text: 'Cancel',
+  },
+}
 
-const defaultAlertDialogConfiguration: DialogConfiguration = {
-    title: 'Dialog Title',
-    message: 'Dialog Message',
-    style: 'default',
-    resolveButton: {
-        text: 'Ok',
-        attributes: {
-            primary: true,
-        }
-    },
-    rejectButton: {
-        text: 'Cancel',
-    }
-};
-
 interface DialogInstance extends DialogConfiguration {
-    isOpen: any;
-    resolve: any;
-    reject: any;
-    destroy: any;
+  isOpen: any
+  resolve: any
+  reject: any
+  destroy: any
 }
 
-export const dialogInstances = ref<DialogInstance[]>([]);
+export const dialogInstances = ref<DialogInstance[]>([])
 
-const createDialogInstance = (configuration: DialogConfiguration, resolve, reject) => {
-    const instance: DialogInstance = {
-        ...configuration,
-        isOpen: ref(true),
-        resolve,
-        reject,
-        destroy () {
-            dialogInstances.value.splice(dialogInstances.value.indexOf(this), 1);
-        }
-    };
+const createDialogInstance = (configuration: DialogConfiguration, resolve: any, reject: any) => {
+  const instance: DialogInstance = {
+    ...configuration,
+    isOpen: ref(true),
+    resolve,
+    reject,
+    destroy() {
+      dialogInstances.value.splice(dialogInstances.value.indexOf(this), 1)
+    },
+  }
 
-    dialogInstances.value = [
-        ...dialogInstances.value,
-        instance,
-    ]
+  dialogInstances.value = [
+    ...dialogInstances.value,
+    instance,
+  ]
 }
 
-const destroyDialogInstance = () => {
-
-}
-
 export const useDialog = () => {
+  const createDialog = (options: DialogConfiguration) => {
+    return new Promise((resolve, reject) => {
+      createDialogInstance({
+        ...defaultDialogConfiguration,
+        ...options,
+      }, resolve, reject)
+    })
+  }
 
-    const createDialog = (options: DialogConfiguration) => {
-        return new Promise((resolve, reject) => {
-            createDialogInstance({
-                ...defaultDialogConfiguration,
-                ...options,
-            }, resolve, reject)
-        });
-    };
+  const createConfirmationDialog = (options: DialogConfiguration) => {
+    return new Promise((resolve, reject) => {
+      createDialogInstance({
+        ...defaultConfirmationDialogConfiguration,
+        ...options,
+      }, resolve, reject)
+    })
+  }
 
-    const createConfirmationDialog = (options: DialogConfiguration) => {
-        return new Promise((resolve, reject) => {
-            createDialogInstance({
-                ...defaultConfirmationDialogConfiguration,
-                ...options,
-            }, resolve, reject);
-        });
-    };
-
-    return {
-        createDialog,
-        createConfirmationDialog,
-    }
-
-};
+  return {
+    createDialog,
+    createConfirmationDialog,
+  }
+}

src/composables/useRoutable/index.ts

@@ -1,93 +0,92 @@
-import { ComponentPropsOptions, PropType, computed } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-import { ComponentProp } from '../../types';
+import { PropType, computed } from 'vue'
+import { RouteLocationRaw } from 'vue-router'
+import { ComponentProp } from '../../types'
 
-export const RoutablePropsMetadata : ComponentProp[] = [
-    {
-        name: 'to',
-        description: 'Denotes the target route of the link.',
-        type: 'string | object',
-        values: '-',
-        default: 'undefined',
-    },
-    {
-        name: 'exact',
-        description: 'Exactly match the link. Without this, \'/\' will match every route.',
-        type: 'bool',
-        values: '-',
-        default: 'undefined',
-    },
-    {
-        name: 'activeClass',
-        description: 'Configure the active CSS class applied when the link is active',
-        type: 'string',
-        values: '-',
-        default: 'undefined',
-    },
-    {
-        name: 'exactActiveClass',
-        description: 'Configure the active CSS class applied when the link is active with exact match.',
-        type: 'string',
-        values: '-',
-        default: 'undefined',
-    },
-    {
-        name: 'href',
-        description: 'Designates the component as anchor and applies the href attribute.',
-        type: 'string',
-        values: '-',
-        default: 'undefined',
-    },
-    {
-        name: 'target',
-        description: 'Designates the target attribute. This should only be applied when using the href prop.',
-        type: 'string',
-        values: '-',
-        default: 'undefined',
-    },
-];
+export const RoutablePropsMetadata: ComponentProp[] = [
+  {
+    name: 'to',
+    description: 'Denotes the target route of the link.',
+    type: 'string | object',
+    values: '-',
+    default: 'undefined',
+  },
+  {
+    name: 'exact',
+    description: 'Exactly match the link. Without this, \'/\' will match every route.',
+    type: 'bool',
+    values: '-',
+    default: 'undefined',
+  },
+  {
+    name: 'activeClass',
+    description: 'Configure the active CSS class applied when the link is active',
+    type: 'string',
+    values: '-',
+    default: 'undefined',
+  },
+  {
+    name: 'exactActiveClass',
+    description: 'Configure the active CSS class applied when the link is active with exact match.',
+    type: 'string',
+    values: '-',
+    default: 'undefined',
+  },
+  {
+    name: 'href',
+    description: 'Designates the component as anchor and applies the href attribute.',
+    type: 'string',
+    values: '-',
+    default: 'undefined',
+  },
+  {
+    name: 'target',
+    description: 'Designates the target attribute. This should only be applied when using the href prop.',
+    type: 'string',
+    values: '-',
+    default: 'undefined',
+  },
+]
 
 export const RoutableProps = {
-    to: {
-        type: [String, Object] as PropType<RouteLocationRaw>,
-    },
-    /**
+  to: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+  /**
      * Turns the button into a link
      */
-    href: String,
+  href: String,
 
-    /**
+  /**
      * If the button is a link, then this will set the target
      */
-    target: {
-        type: String,
-        default: '_blank'    
-    },
-    exact: {
-        type: Boolean,
-        default: false,
-    },
-    activeClass: String,
-    exactActiveClass: String,
-};
+  target: {
+    type: String,
+    default: '_blank',
+  },
+  exact: {
+    type: Boolean,
+    default: false,
+  },
+  activeClass: String,
+  exactActiveClass: String,
+}
 
-export const useRoutable = (props) => {
-    const tag = props.to ? 'router-link' : props.href ? 'a' : null;
-    const componentProps = computed(() => {
-        if (props.to)
-            return { to: props.to }
+export const useRoutable = (props: any) => {
+  const tag = props.to ? 'router-link' : props.href ? 'a' : null
+  const componentProps = computed(() => {
+    if (props.to)
+      return { to: props.to }
 
-        if (props.href)
-            return { href: props.href }
+    if (props.href)
+      return { href: props.href }
 
-        return {}
-    });
-    const routeData = props;
+    return {}
+  })
+  const routeData = props
 
-    return {
-        tag,
-        componentProps,
-        routeData,
-    }
-
-};
+  return {
+    tag,
+    componentProps,
+    routeData,
+  }
+}

src/composables/useTheme.ts

@@ -1,37 +0,34 @@
-import { watch } from 'vue';
-import { useLocalStorage } from '@vueuse/core';
+import { watch } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 
 const applyTheme = () => {
-    document.documentElement.className = `kro-theme__${theme.value}`;
+  document.documentElement.className = `kro-theme__${theme.value}`
 }
 
-let theme;
+let theme: any
 
 export const useTheme = () => {
+  const setTheme = (schema: string) => {
+    theme.value = schema
+  }
 
-    const setTheme = (schema: string) => {
-        theme.value = schema;
-    };
+  const getTheme = () => {
+    return theme.value
+  }
 
-    const getTheme = () => {
-        return theme.value;
-    }
+  return {
+    setTheme,
+    getTheme,
+    theme,
+  }
+}
 
-    return {
-        setTheme,
-        getTheme,
-        theme,
-    }
-
-};
-
 export const registerThemeWatcher = () => {
-    theme = useLocalStorage('kro.theme', 'default-dark');
+  theme = useLocalStorage('kro.theme', 'default-dark')
 
-    watch(() => theme.value, () => {
-        applyTheme();
-    }, {
-        immediate: true
-    });
+  watch(() => theme.value, () => {
+    applyTheme()
+  }, {
+    immediate: true,
+  })
 }
-

src/directives/index.ts

@@ -1,1 +0,1 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip'

src/directives/Tooltip/index.ts

@@ -1,1 +0,1 @@
-export { ToolitpDirective as Tooltip } from './Tooltip';
+export { ToolitpDirective as Tooltip } from './Tooltip'

src/directives/Tooltip/Tooltip.ts

@@ -1,9 +0,9 @@
-import { Directive } from 'vue';
+import { Directive } from 'vue'
 
 export const ToolitpDirective: Directive = {
 
-    mounted() {
-        console.log('Ok Tooltip')
-    }
+  mounted() {
+    console.log('Ok Tooltip')
+  },
 
-};
+}

src/index.ts

 /**
  * Import Base Styles
  */
-import './styles/main.scss';
+import './styles/main.scss'
 
-export { KroUIPlugin, KroUIBaseConfigurationPlugin } from './install';
-export { useTheme, useIcons, useDialog } from './composables';
+export { KroUIPlugin, KroUIBaseConfigurationPlugin } from './install'
+export { useTheme, useDialog } from './composables'
 
-export * from './components';
-export * as Metadata from './components/metadata';
+export * from './components'
+export * as Metadata from './components/metadata'
+
+/**
+ * This SCSS import should be below the components otherwise it will cause some problems.
+ */
+// eslint-disable-next-line
+import './styles/tailwind.scss'

src/install.ts

@@ -1,84 +0,53 @@
-import { Plugin } from 'vue';
-import { IconSymbol } from './composables/icons';
-import { registerThemeWatcher } from './composables/useTheme';
+import type { Plugin } from 'vue'
+import { registerThemeWatcher } from './composables/useTheme'
 
-import defaultIcons from './assets/icons';
+import * as KroComponents from './components'
+import * as KroDirectives from './directives'
 
-import * as KroComponents from './components';
-import * as KroDirectives from './directives';
-
-interface KroUIOptions {
-    icons: string[];
+interface KroUIConfiguration {
+  icons: string[]
+  components: any
 }
 
-interface KroUIConfiguration {
-    icons: string[],
-    components: any,
-};
-
 export const KroUIBaseConfigurationPlugin = (): Plugin => ({
-    install(app, config: KroUIConfiguration) {
-        let icons = { ...defaultIcons };
-        
-        if (config && config.hasOwnProperty('icons'))
-            icons = { ...icons, ...config.icons };
-
-        if (config.components && Array.isArray(config.components))
-            for (const key in config.components) {
-                const component = config.components[key];
-
-                if (component)
-                    app.component(key, component);
-            }
-
-
-        app.provide(IconSymbol, icons);
-        registerThemeWatcher();
+  install(app, config: KroUIConfiguration) {
+    if (config.components && Array.isArray(config.components)) {
+      Object.entries(config.components).forEach(([key, value]: [string, any]) => {
+        app.component(key, value)
+      })
     }
-});
 
-const KroUIPluginBase = (components: any, directives): Plugin => ({
-    install(app, config: KroUIOptions) {
+    registerThemeWatcher()
+  },
+})
 
-        let icons = { ...defaultIcons };
-
-        if (config && config.hasOwnProperty('icons'))
-            icons = { ...icons, ...config.icons };
-
-        /**
+const KroUIPluginBase = (components: any, directives: any): Plugin => ({
+  install(app) {
+    /**
          * Register Components
          */
-        if (components)
-            for (const key in components) {
-                const component = components[key];
+    if (components) {
+      Object.entries(components).forEach(([key, value]: [string, any]) => {
+        if (value)
+          app.component(key, value)
+      })
+    }
 
-                if (component)
-                    app.component(key, component);
-            }
-
-        /**
+    /**
          * Register Directives
          */
-        if (directives)
-            for (const key in directives) {
-                const directive = directives[key];
+    if (directives) {
+      Object.entries(directives).forEach(([key, value]: [string, any]) => {
+        if (value)
+          app.directive(key, value)
+      })
+    }
 
-                if (directive)
-                    app.directive(key, directive);
-            }
-                
-
-        /**
-         * Register Icons
-         */
-        app.provide(IconSymbol, icons);
-
-        /**
+    /**
          * Register the theme watcher
          */
-        registerThemeWatcher();
+    registerThemeWatcher()
+  },
+})
 
-    }
-});
-
-export const KroUIPlugin = KroUIPluginBase(KroComponents, KroDirectives);
+export const KroUIPlugin = KroUIPluginBase(KroComponents, KroDirectives)

src/shims-vue.d.ts

 declare module '*.vue' {
-    import { ComponentOptions } from 'vue'
-    var component: ComponentOptions
-    export default component
+  import { ComponentOptions } from 'vue'
+  // eslint-disable-next-line
+  var component: ComponentOptions
+  export default component
 }
 
 declare module '*.md' {
-    import { ComponentOptions } from 'vue'
-    var component: ComponentOptions
-    export default component
-}
+  import { ComponentOptions } from 'vue'
+  // eslint-disable-next-line
+  var component: ComponentOptions
+  export default component
+}

src/types/index.ts

 export interface ComponentProp {
-    name: string;
-    description: string;
-    type: string;
-    values: string[] | string;
-    default: string;
-};
+  name: string
+  description: string
+  type: string
+  values: string[] | string
+  default: string
+}
 
 export interface ComponentEvent {
-    name: string;
-    description: string;
-    parameters: string[],
-};
+  name: string
+  description: string
+  parameters: string[]
+}
 
 export interface ComponentSlots {
-    name: string;
-    description: string;
-    props: string[],
-};
+  name: string
+  description: string
+  props: string[]
+}
 
 export interface ComponentCSSProperties {
-    name: string;
-    description: string;
-    type: string;
-    default: string;
-};
+  name: string
+  description: string
+  type: string
+  default: string
+}
 
 export interface ComponentMetadata {
-    title: String;
-    description: string;
-    props?: ComponentProp[];
-    events?: ComponentEvent[];
-    slots?: ComponentSlots[];
-    css?: ComponentCSSProperties[];
-};
+  title: String
+  description: string
+  props?: ComponentProp[]
+  events?: ComponentEvent[]
+  slots?: ComponentSlots[]
+  css?: ComponentCSSProperties[]
+}

tailwind.config.js

 module.exports = {
     purge: {
-        enabled: true,
+        enabled: false,
         content: [
@@ -10,2 +10,4 @@ './index.html',
             './demo/**/*.vue',
+            './docs/**/*.vue',
+            './docs/.config/**/*.vue',
         ]
@@ -15,2 +17,3 @@ },
         removeDeprecatedGapUtilities: true,
+        purgeLayersByDefault: true,
     },
@@ -17,0 +20,0 @@ experimental: {

tsconfig.json

 {
-    "compilerOptions": {
-      "target": "ES5",
-      "module": "esnext",
-      "strict": true,
-      "jsx": "preserve",
-      "importHelpers": true,
-      "moduleResolution": "node",
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "noImplicitAny": false,
-      "sourceMap": true,
-      "declaration": true,
-      "baseUrl": ".",
-      "declarationDir": "./dist",
-      "removeComments": true,
-      "paths": {
-        "@lib/*": ["src/*"],
-        "@lib": ["src"],
-        "@docs/*": ["docs/*"],
-        "@docs": ["docs"],
-        "@kro-press/*": ["packages/press/*"],
-        "@kro-press": ["packages/press"],
-      },
-      "lib": [
-        "esnext",
-        "dom",
-        "dom.iterable",
-        "scripthost"
-      ]
-    },
-    "include": [
-      "src/**/*.ts",
-      "src/**/*.tsx",
-      "src/**/*.vue",
-    ],
-    "exclude": [
-      "node_modules"
-    ]
-  }
-  
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2016",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }],
+    "paths": {
+      "/~/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "docs/**/*.ts", "docs/**/*.vue", "docs/.config/**/*.ts", "docs/.config/**/*.vue"],
+  "exclude": ["dist", "node_modules"]
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3070401

increased by483.17%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

27

increased by68.75%

Number of package files

149

decreased by-10.24%

Lines of code

2869

decreased by-13.66%

Number of lines in readme file

86

decreased by-9.47%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@iconify/iconify@2.0.0-rc.1

• + Added@iconify/iconify@2.0.0-rc.1(transitive)

• + Added@vue/compiler-core@3.0.0(transitive)

• + Added@vue/compiler-dom@3.0.0(transitive)

• + Added@vue/reactivity@3.0.0(transitive)

• + Added@vue/runtime-core@3.0.0(transitive)

• + Added@vue/runtime-dom@3.0.0(transitive)

• + Added@vue/shared@3.0.0(transitive)

• + Addedvue@3.0.0(transitive)

• + Addedvue-router@4.0.0-beta.9(transitive)

• - Removed@vue/compiler-core@3.0.0-rc.10(transitive)

• - Removed@vue/compiler-dom@3.0.0-rc.10(transitive)

• - Removed@vue/reactivity@3.0.0-rc.10(transitive)

• - Removed@vue/runtime-core@3.0.0-rc.10(transitive)

• - Removed@vue/runtime-dom@3.0.0-rc.10(transitive)

• - Removed@vue/shared@3.0.0-rc.10(transitive)

• - Removedvue@3.0.0-rc.10(transitive)

• - Removedvue-router@4.0.0-beta.6(transitive)

• Updated@vueuse/core@^4.0.0-beta.15

• Updatedvue@3.0.0

• Updatedvue-router@4.0.0-beta.9