vue-toasts-lite 0.1.3 → 0.1.5

package/README.md

@@ -13,7 +13,7 @@ A lightweight toast notifications library for Vue 3.
 ## Features
 
 - 🚀 Lightweight and easy to use
-- 🎨 Multiple toast types (success, error, loading, warn)
+- 🎨 Multiple toast types (success, error, loading, warn, info)
 - 📍 Multiple positions (can show in different corners simultaneously)
 - ⚡️ Customizable duration, auto-close, and styling
 - 🎯 TypeScript support
@@ -53,6 +53,7 @@ toasts.success('Hello!')
 toasts.error('Something went wrong')
 toasts.loading('Loading...')
 toasts.warn('Warning message')
+toasts.info('Info message')
 </script>
 ```
 
@@ -64,6 +65,7 @@ toasts.success(message, options?)
 toasts.error(message, options?)
 toasts.loading(message, options?)
 toasts.warn(message, options?)
+toasts.info(message, options?)
 
 // Advanced methods
 toasts.add(options)              // Create custom toast
@@ -71,6 +73,10 @@ toasts.update(id, options)       // Update existing toast
 toasts.remove(id?)               // Remove toast(s)
 toasts.clear()                   // Clear all toasts
 toasts.promise(promise, options) // Handle promise states
+
+// Monitoring methods
+toasts.toastList                 // Get array of all active toasts
+toasts.onToastsListChange(callback) // Subscribe to toast list changes
 ```
 
 ## Options
@@ -78,7 +84,7 @@ toasts.promise(promise, options) // Handle promise states
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `message` | `string` | - | Message to display |
-| `type` | `'success' \| 'error' \| 'loading' \| 'warn'` | `'success'` | Toast type |
+| `type` | `'success' \| 'error' \| 'loading' \| 'warn' \| 'info'` | `'success'` | Toast type |
 | `duration` | `number` | `3000` | Duration in milliseconds |
 | `autoClose` | `boolean` | `true` | Auto-close behavior |
 | `position` | `ToastPosition` | `'top-center'` | Toast position |
@@ -122,16 +128,32 @@ await toasts.promise(
 )
 ```
 
-
 ## Styling
 
-Customize colors and appearance with CSS variables:
+Customize colors and appearance with CSS variables or by passing custom classes to `ToastsLiteProvider`:
+
+### Custom Classes
+
+You can pass custom classes to `ToastsLiteProvider`:
+
+```vue
+<ToastsLiteProvider 
+  container-class="custom-container"
+  wrapper-class="custom-wrapper"
+  item-class="custom-item"
+/>
+```
+
+- `container-class` - class for toast container
+- `wrapper-class` - class for toast wrapper
+- `item-class` - class for individual toast items
 
 ### CSS Variables
 
 ```css
 :root {
   --tl-font-family: system-ui, -apple-system, sans-serif;
+  --tl-font-size: 14px;
   --tl-bg: hsl(0, 0%, 100%);
   --tl-text: hsl(0, 0%, 20%);
   --tl-border: hsl(0, 0%, 85%);
@@ -139,6 +161,7 @@ Customize colors and appearance with CSS variables:
   --tl-success: hsl(145, 63%, 42%);
   --tl-error: hsl(0, 79%, 63%);
   --tl-warn: hsl(45, 100%, 51%);
+  --tl-info: hsl(210, 80%, 55%);
   --tl-icon-color: hsl(0, 0%, 100%);
   --tl-loading-border: hsl(0, 0%, 15%);
   --tl-loading-bg: hsl(0, 0%, 98%);

package/dist/index.d.ts

@@ -1,8 +1,15 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { HTMLAttributes } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_Props = {
+    containerClass?: HTMLAttributes["class"];
+    wrapperClass?: HTMLAttributes["class"];
+    itemClass?: HTMLAttributes["class"];
+};
+
 declare type Id = string;
 
 declare interface IToastsController {
@@ -12,6 +19,7 @@ declare interface IToastsController {
     loading: (message: string, options?: ToastSimpleOptions) => Id;
     error: (message: string, options?: ToastSimpleOptions) => Id;
     warn: (message: string, options?: ToastSimpleOptions) => Id;
+    info: (message: string, options?: ToastSimpleOptions) => Id;
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions) => Promise<Id>;
     remove: (id?: Id) => void;
     clear: () => void;
@@ -263,6 +271,23 @@ declare class ToastsController implements IToastsController {
      * @see {@link promise} for automatic promise-based state management
      */
     loading(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
+    /**
+     * Displays an **info** toast notification.
+     *
+     * @param message - Text content to display in the toast
+     * @param options - Optional configuration (position, duration, autoClose, id)
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Simple info message
+     * toasts.info('New version available')
+     *
+     * // With custom position
+     * toasts.info('Tip: press Cmd+K to search', { position: 'bottom-right' })
+     * ```
+     */
+    info(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
     /**
      * Displays a **promise** toast that automatically updates based on promise resolution.
      *
@@ -306,8 +331,8 @@ declare class ToastsController implements IToastsController {
 
 export declare type ToastSimpleOptions = Partial<Omit<Toast, "message">>;
 
-export declare const ToastsLiteProvider: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export declare const ToastsLiteProvider: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare type ToastType = "success" | "loading" | "error" | "warn";
+export declare type ToastType = "success" | "loading" | "error" | "warn" | "info";
 
 export { }

package/dist/index.js

@@ -1,11 +1,11 @@
 var M = Object.defineProperty;
-var $ = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var v = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
-import { ref as h, defineComponent as O, watch as L, onMounted as U, onUnmounted as k, createElementBlock as g, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as p, normalizeClass as D, toDisplayString as B, computed as P, createBlock as y, Teleport as I, Fragment as b, renderList as T, unref as m, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
+var U = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var m = (r, t, e) => U(r, typeof t != "symbol" ? t + "" : t, e);
+import { ref as p, defineComponent as D, watch as $, onMounted as L, onUnmounted as k, createElementBlock as y, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as h, normalizeClass as g, toDisplayString as B, computed as P, createBlock as C, Teleport as I, Fragment as b, renderList as w, unref as v, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
 class V extends Map {
   constructor() {
     super(...arguments);
-    v(this, "subscribers", []);
+    m(this, "subscribers", []);
   }
   set(e, o) {
     return super.set(e, o), this.notify(), this;
@@ -26,7 +26,7 @@ class V extends Map {
     this.subscribers.forEach((e) => e(Array.from(this.values())));
   }
 }
-const w = {
+const T = {
   type: "success",
   message: "Hello from Toasts Lite",
   autoClose: !0,
@@ -35,8 +35,8 @@ const w = {
 };
 class j {
   constructor() {
-    v(this, "counter", 0);
-    v(this, "toasts");
+    m(this, "counter", 0);
+    m(this, "toasts");
     this.toasts = new V();
   }
   /**
@@ -237,6 +237,25 @@ class j {
   loading(t, e) {
     return this.addOrUpdate({ ...e, message: t, type: "loading" });
   }
+  /**
+   * Displays an **info** toast notification.
+   *
+   * @param message - Text content to display in the toast
+   * @param options - Optional configuration (position, duration, autoClose, id)
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Simple info message
+   * toasts.info('New version available')
+   *
+   * // With custom position
+   * toasts.info('Tip: press Cmd+K to search', { position: 'bottom-right' })
+   * ```
+   */
+  info(t, e) {
+    return this.addOrUpdate({ ...e, message: t, type: "info" });
+  }
   /**
    * Displays a **promise** toast that automatically updates based on promise resolution.
    *
@@ -292,17 +311,17 @@ class j {
     return this.toasts.set(e, { ...this.mergeWithDefaultOptions(o), id: e }), e;
   }
   mergeWithDefaultOptions(t) {
-    const e = Object.assign({}, w);
-    for (let o in w) {
+    const e = Object.assign({}, T);
+    for (let o in T) {
       const n = o, s = t[n];
       s != null && (e[n] = s);
     }
     return e;
   }
 }
-const C = new j();
+const O = new j();
 function z() {
-  const r = h(/* @__PURE__ */ new Map());
+  const r = p(/* @__PURE__ */ new Map());
   function t(n, s, a) {
     r.value.has(n) || r.value.set(n, []);
     const i = r.value.get(n);
@@ -325,7 +344,7 @@ function z() {
 const F = {
   key: 0,
   class: "toasts-lite__icon"
-}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ O({
+}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ D({
   __name: "ToastsLiteItem",
   props: {
     id: {},
@@ -337,7 +356,7 @@ const F = {
   },
   emits: ["close"],
   setup(r, { expose: t, emit: e }) {
-    const o = r, n = e, s = h(null), a = h(0), i = h(0);
+    const o = r, n = e, s = p(null), a = p(0), i = p(0);
     function c() {
       s.value && clearTimeout(s.value), n("close");
     }
@@ -350,38 +369,43 @@ const F = {
     function f() {
       s.value && (clearTimeout(s.value), s.value = null), o.autoClose && (a.value = Date.now(), i.value = o.duration, s.value = setTimeout(c, o.duration));
     }
-    return L(
+    return $(
       () => [o.autoClose, o.duration],
       () => {
         f();
       }
-    ), U(() => {
+    ), L(() => {
       f();
     }), k(() => {
       s.value && clearTimeout(s.value);
     }), t({
       pause: u,
       resume: l
-    }), (_, J) => (d(), g("div", {
+    }), (_, J) => (d(), y("div", {
       class: "toasts-lite__toast",
       style: E(`--toast-duration: ${r.duration}s;`),
       onClick: A(c, ["prevent"])
     }, [
-      ["success", "error", "loading", "warn"].includes(r.type) ? (d(), g("div", F, [
-        p("div", {
-          class: D(`toasts-lite__${r.type}`)
+      ["success", "error", "loading", "warn", "info"].includes(r.type) ? (d(), y("div", F, [
+        h("div", {
+          class: g(`toasts-lite__${r.type}`)
         }, null, 2)
       ])) : x("", !0),
-      p("div", W, [
-        p("div", G, B(r.message), 1)
+      h("div", W, [
+        h("div", G, B(r.message), 1)
       ])
     ], 4));
   }
-}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ O({
+}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ D({
   __name: "ToastsLiteProvider",
+  props: {
+    containerClass: {},
+    wrapperClass: {},
+    itemClass: {}
+  },
   setup(r) {
-    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = h([]), { setRef: o, pauseAll: n, resumeAll: s } = z();
-    C.onToastsListChange((i) => {
+    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = p([]), { setRef: o, pauseAll: n, resumeAll: s } = z();
+    O.onToastsListChange((i) => {
       e.value = i;
     });
     const a = P(() => {
@@ -391,42 +415,43 @@ const F = {
         i.has(u) || i.set(u, []), i.get(u).push(c);
       }), i;
     });
-    return (i, c) => (d(), y(I, { to: "body" }, [
-      (d(), g(b, null, T(t, (u) => p("div", {
+    return (i, c) => (d(), C(I, { to: "body" }, [
+      (d(), y(b, null, w(t, (u) => h("div", {
         key: u,
-        class: D(["toasts-lite__toast-container", `toasts-lite__${u}`])
+        class: g(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
       }, [
-        p("div", {
-          class: "toasts-lite__toast-wrapper",
-          onMouseenter: (l) => m(n)(u),
-          onMouseleave: (l) => m(s)(u)
+        h("div", {
+          class: g(["toasts-lite__toast-wrapper", r.wrapperClass]),
+          onMouseenter: (l) => v(n)(u),
+          onMouseleave: (l) => v(s)(u)
         }, [
           N(R, {
             name: "toasts-lite",
             appear: ""
           }, {
             default: S(() => [
-              (d(!0), g(b, null, T(a.value.get(u) || [], (l, f) => (d(), y(H, {
+              (d(!0), y(b, null, w(a.value.get(u) || [], (l, f) => (d(), C(H, {
                 id: l.id,
                 ref_for: !0,
-                ref: (_) => m(o)(u, f, _),
+                ref: (_) => v(o)(u, f, _),
                 key: l.id,
                 type: l.type,
                 message: l.message,
                 "auto-close": l.autoClose,
                 duration: l.duration,
                 position: l.position,
-                onClose: (_) => m(C).remove(l.id)
-              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
+                class: g(r.itemClass),
+                onClose: (_) => v(O).remove(l.id)
+              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "class", "onClose"]))), 128))
             ]),
             _: 2
           }, 1024)
-        ], 40, q)
+        ], 42, q)
       ], 2)), 64))
     ]));
   }
 });
 export {
   X as ToastsLiteProvider,
-  C as toasts
+  O as toasts
 };

package/dist/style.css

@@ -1 +1 @@
-:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}
+:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-font-size: var(--tl-font-size, 14px);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-info: var(--tl-info, hsl(210, 80%, 55%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);font-size:var(--toasts-lite-font-size);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__info{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-info);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__info:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "scheron",