@samline/notify 0.2.6 → 0.3.0

package/README.md

@@ -50,8 +50,8 @@ Use the browser build when your project loads scripts directly and cannot compil
 
 
 ```html
-<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css" />
+<script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css" />
 
 <script>
   // Always use an array of strings as the second argument
@@ -81,7 +81,7 @@ Choose the entrypoint matching your stack so you only import what you need.
 | Use case      | Import                                                                                                                                        | Guide                              |
 | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
 | Vanilla JS    | `import { notify, initToasters } from '@samline/notify/vanilla'`                                                                              | [docs/vanilla.md](docs/vanilla.md) |
-| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
+| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.3/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
 | React         | `import { Toaster, notify } from '@samline/notify/react'`                                                                                      | [docs/react.md](docs/react.md)     |
 | Vue           | `import { Toaster, notify } from '@samline/notify/vue'`                                                                                        | [docs/vue.md](docs/vue.md)         |
 | Svelte        | `import Toaster, { notify } from '@samline/notify/svelte'`                                                                                     | [docs/svelte.md](docs/svelte.md)   |

package/dist/index.cjs.js

@@ -1018,18 +1018,6 @@ function animate(target, keyframesOrOptions, options) {
     return factory(target, keyframesOrOptions, options);
 }
 
-// SVG Gooey Filter para animaciones morphing estilo Sileo
-const gooeySVG = `<svg width="0" height="0" style="position:absolute">
-  <filter id="sileo-gooey">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
-    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -14" result="goo" />
-    <feComponentTransfer in="goo" result="thresholded">
-      <feFuncA type="table" tableValues="0 1" />
-    </feComponentTransfer>
-    <feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
-  </filter>
-</svg>`;
-
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -1062,8 +1050,6 @@ function createContainer(position, root, opts) {
                 c.style.marginLeft = `${opts.offset.left}px`;
         }
     }
-    // Aplica el filtro gooey a los toasters
-    c.style.filter = 'url(#sileo-gooey)';
     return c;
 }
 function renderToast(item) {
@@ -1073,43 +1059,6 @@ function renderToast(item) {
     el.setAttribute('data-type', item.options.type || 'info');
     el.style.opacity = '0';
     el.style.transform = 'translateY(-6px)';
-    // Soporte visual para fill y roundness
-    if (item.options.fill) {
-        el.style.background = item.options.fill;
-    }
-    if (item.options.roundness) {
-        el.style.borderRadius = item.options.roundness + 'px';
-        el.style.setProperty('--sileo-roundness', item.options.roundness + 'px');
-    }
-    // Badge SVG animado (efecto Sileo)
-    const badge = document.createElement('div');
-    badge.className = 'sileo-toast-badge';
-    badge.setAttribute('data-sileo-badge', '');
-    // Icono SVG custom o por tipo
-    if (item.options.icon) {
-        if (typeof item.options.icon === 'string') {
-            badge.innerHTML = item.options.icon;
-        }
-        else if (item.options.icon instanceof HTMLElement) {
-            badge.appendChild(item.options.icon);
-        }
-    }
-    else {
-        // Icono por tipo (ejemplo simple, puedes mejorar SVGs)
-        badge.innerHTML = {
-            success: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#16a34a"/><path d="M6 10.5l2.5 2.5 5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            error: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#ef4444"/><path d="M7 7l6 6M13 7l-6 6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            info: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#2563eb"/><text x="10" y="15" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>',
-            warning: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#f59e0b"/><path d="M10 6v4m0 3h.01" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            action: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#6366f1"/><path d="M7 10h6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            loading: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" stroke="#fff" stroke-width="3" opacity=".3"/><path d="M18 10a8 8 0 1 1-8-8" stroke="#fff" stroke-width="3"/></svg>',
-        }[item.options.type || 'info'] || '';
-    }
-    // Aplica clases custom de styles.badge si existen
-    if (item.options.styles && item.options.styles.badge) {
-        badge.className += ' ' + item.options.styles.badge;
-    }
-    // Cuerpo del toast
     const body = document.createElement('div');
     body.style.display = 'flex';
     body.style.flexDirection = 'column';
@@ -1117,28 +1066,18 @@ function renderToast(item) {
     const header = document.createElement('div');
     header.className = 'sileo-toast-header';
     header.textContent = item.options.title || '';
-    if (item.options.styles && item.options.styles.title) {
-        header.className += ' ' + item.options.styles.title;
-    }
     body.appendChild(header);
     if (item.options.description) {
         const desc = document.createElement('div');
         desc.className = 'sileo-toast-desc';
         desc.textContent = item.options.description;
-        if (item.options.styles && item.options.styles.description) {
-            desc.className += ' ' + item.options.styles.description;
-        }
         body.appendChild(desc);
     }
-    el.appendChild(badge);
     el.appendChild(body);
     if (item.options.button) {
         const btn = document.createElement('button');
         btn.className = 'sileo-toast-btn';
         btn.textContent = item.options.button.title;
-        if (item.options.styles && item.options.styles.button) {
-            btn.className += ' ' + item.options.styles.button;
-        }
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
             try {
@@ -1157,16 +1096,6 @@ function renderToast(item) {
     close.innerHTML = '×';
     close.addEventListener('click', () => sileo.dismiss(item.id));
     el.appendChild(close);
-    // Soporte para autopilot: expansión/colapso automático (simulado)
-    if (item.options.autopilot !== false) {
-        setTimeout(() => {
-            el.style.transform = 'scale(1.03)';
-            el.style.transition = 'transform 0.18s cubic-bezier(.22,1,.36,1)';
-            setTimeout(() => {
-                el.style.transform = 'scale(1)';
-            }, 180);
-        }, 120);
-    }
     if (typeof item.options.duration === 'number') {
         if (item.options.duration > 0) {
             setTimeout(() => sileo.dismiss(item.id), item.options.duration);
@@ -1176,16 +1105,6 @@ function renderToast(item) {
 }
 function initToasters(root = document.body, positions = ['top-right'], opts) {
     const containers = {};
-    // Inyecta el SVG filter gooey solo una vez
-    if (!document.getElementById('sileo-gooey-svg')) {
-        const div = document.createElement('div');
-        div.id = 'sileo-gooey-svg';
-        div.style.position = 'absolute';
-        div.style.width = '0';
-        div.style.height = '0';
-        div.innerHTML = gooeySVG;
-        document.body.appendChild(div);
-    }
     positions.forEach((pos) => {
         const c = createContainer(pos, root, opts);
         root.appendChild(c);

package/dist/index.esm.js

@@ -1014,18 +1014,6 @@ function animate(target, keyframesOrOptions, options) {
     return factory(target, keyframesOrOptions, options);
 }
 
-// SVG Gooey Filter para animaciones morphing estilo Sileo
-const gooeySVG = `<svg width="0" height="0" style="position:absolute">
-  <filter id="sileo-gooey">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
-    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -14" result="goo" />
-    <feComponentTransfer in="goo" result="thresholded">
-      <feFuncA type="table" tableValues="0 1" />
-    </feComponentTransfer>
-    <feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
-  </filter>
-</svg>`;
-
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -1058,8 +1046,6 @@ function createContainer(position, root, opts) {
                 c.style.marginLeft = `${opts.offset.left}px`;
         }
     }
-    // Aplica el filtro gooey a los toasters
-    c.style.filter = 'url(#sileo-gooey)';
     return c;
 }
 function renderToast(item) {
@@ -1069,43 +1055,6 @@ function renderToast(item) {
     el.setAttribute('data-type', item.options.type || 'info');
     el.style.opacity = '0';
     el.style.transform = 'translateY(-6px)';
-    // Soporte visual para fill y roundness
-    if (item.options.fill) {
-        el.style.background = item.options.fill;
-    }
-    if (item.options.roundness) {
-        el.style.borderRadius = item.options.roundness + 'px';
-        el.style.setProperty('--sileo-roundness', item.options.roundness + 'px');
-    }
-    // Badge SVG animado (efecto Sileo)
-    const badge = document.createElement('div');
-    badge.className = 'sileo-toast-badge';
-    badge.setAttribute('data-sileo-badge', '');
-    // Icono SVG custom o por tipo
-    if (item.options.icon) {
-        if (typeof item.options.icon === 'string') {
-            badge.innerHTML = item.options.icon;
-        }
-        else if (item.options.icon instanceof HTMLElement) {
-            badge.appendChild(item.options.icon);
-        }
-    }
-    else {
-        // Icono por tipo (ejemplo simple, puedes mejorar SVGs)
-        badge.innerHTML = {
-            success: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#16a34a"/><path d="M6 10.5l2.5 2.5 5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            error: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#ef4444"/><path d="M7 7l6 6M13 7l-6 6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            info: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#2563eb"/><text x="10" y="15" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>',
-            warning: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#f59e0b"/><path d="M10 6v4m0 3h.01" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            action: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#6366f1"/><path d="M7 10h6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-            loading: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" stroke="#fff" stroke-width="3" opacity=".3"/><path d="M18 10a8 8 0 1 1-8-8" stroke="#fff" stroke-width="3"/></svg>',
-        }[item.options.type || 'info'] || '';
-    }
-    // Aplica clases custom de styles.badge si existen
-    if (item.options.styles && item.options.styles.badge) {
-        badge.className += ' ' + item.options.styles.badge;
-    }
-    // Cuerpo del toast
     const body = document.createElement('div');
     body.style.display = 'flex';
     body.style.flexDirection = 'column';
@@ -1113,28 +1062,18 @@ function renderToast(item) {
     const header = document.createElement('div');
     header.className = 'sileo-toast-header';
     header.textContent = item.options.title || '';
-    if (item.options.styles && item.options.styles.title) {
-        header.className += ' ' + item.options.styles.title;
-    }
     body.appendChild(header);
     if (item.options.description) {
         const desc = document.createElement('div');
         desc.className = 'sileo-toast-desc';
         desc.textContent = item.options.description;
-        if (item.options.styles && item.options.styles.description) {
-            desc.className += ' ' + item.options.styles.description;
-        }
         body.appendChild(desc);
     }
-    el.appendChild(badge);
     el.appendChild(body);
     if (item.options.button) {
         const btn = document.createElement('button');
         btn.className = 'sileo-toast-btn';
         btn.textContent = item.options.button.title;
-        if (item.options.styles && item.options.styles.button) {
-            btn.className += ' ' + item.options.styles.button;
-        }
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
             try {
@@ -1153,16 +1092,6 @@ function renderToast(item) {
     close.innerHTML = '×';
     close.addEventListener('click', () => sileo.dismiss(item.id));
     el.appendChild(close);
-    // Soporte para autopilot: expansión/colapso automático (simulado)
-    if (item.options.autopilot !== false) {
-        setTimeout(() => {
-            el.style.transform = 'scale(1.03)';
-            el.style.transition = 'transform 0.18s cubic-bezier(.22,1,.36,1)';
-            setTimeout(() => {
-                el.style.transform = 'scale(1)';
-            }, 180);
-        }, 120);
-    }
     if (typeof item.options.duration === 'number') {
         if (item.options.duration > 0) {
             setTimeout(() => sileo.dismiss(item.id), item.options.duration);
@@ -1172,16 +1101,6 @@ function renderToast(item) {
 }
 function initToasters(root = document.body, positions = ['top-right'], opts) {
     const containers = {};
-    // Inyecta el SVG filter gooey solo una vez
-    if (!document.getElementById('sileo-gooey-svg')) {
-        const div = document.createElement('div');
-        div.id = 'sileo-gooey-svg';
-        div.style.position = 'absolute';
-        div.style.width = '0';
-        div.style.height = '0';
-        div.innerHTML = gooeySVG;
-        document.body.appendChild(div);
-    }
     positions.forEach((pos) => {
         const c = createContainer(pos, root, opts);
         root.appendChild(c);

package/dist/notify.umd.js

@@ -1020,18 +1020,6 @@
         return factory(target, keyframesOrOptions, options);
     }
 
-    // SVG Gooey Filter para animaciones morphing estilo Sileo
-    const gooeySVG = `<svg width="0" height="0" style="position:absolute">
-  <filter id="sileo-gooey">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
-    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -14" result="goo" />
-    <feComponentTransfer in="goo" result="thresholded">
-      <feFuncA type="table" tableValues="0 1" />
-    </feComponentTransfer>
-    <feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
-  </filter>
-</svg>`;
-
     const POSITIONS = [
         'top-left',
         'top-center',
@@ -1064,8 +1052,6 @@
                     c.style.marginLeft = `${opts.offset.left}px`;
             }
         }
-        // Aplica el filtro gooey a los toasters
-        c.style.filter = 'url(#sileo-gooey)';
         return c;
     }
     function renderToast(item) {
@@ -1075,43 +1061,6 @@
         el.setAttribute('data-type', item.options.type || 'info');
         el.style.opacity = '0';
         el.style.transform = 'translateY(-6px)';
-        // Soporte visual para fill y roundness
-        if (item.options.fill) {
-            el.style.background = item.options.fill;
-        }
-        if (item.options.roundness) {
-            el.style.borderRadius = item.options.roundness + 'px';
-            el.style.setProperty('--sileo-roundness', item.options.roundness + 'px');
-        }
-        // Badge SVG animado (efecto Sileo)
-        const badge = document.createElement('div');
-        badge.className = 'sileo-toast-badge';
-        badge.setAttribute('data-sileo-badge', '');
-        // Icono SVG custom o por tipo
-        if (item.options.icon) {
-            if (typeof item.options.icon === 'string') {
-                badge.innerHTML = item.options.icon;
-            }
-            else if (item.options.icon instanceof HTMLElement) {
-                badge.appendChild(item.options.icon);
-            }
-        }
-        else {
-            // Icono por tipo (ejemplo simple, puedes mejorar SVGs)
-            badge.innerHTML = {
-                success: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#16a34a"/><path d="M6 10.5l2.5 2.5 5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-                error: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#ef4444"/><path d="M7 7l6 6M13 7l-6 6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-                info: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#2563eb"/><text x="10" y="15" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>',
-                warning: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#f59e0b"/><path d="M10 6v4m0 3h.01" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-                action: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="#6366f1"/><path d="M7 10h6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>',
-                loading: '<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" stroke="#fff" stroke-width="3" opacity=".3"/><path d="M18 10a8 8 0 1 1-8-8" stroke="#fff" stroke-width="3"/></svg>',
-            }[item.options.type || 'info'] || '';
-        }
-        // Aplica clases custom de styles.badge si existen
-        if (item.options.styles && item.options.styles.badge) {
-            badge.className += ' ' + item.options.styles.badge;
-        }
-        // Cuerpo del toast
         const body = document.createElement('div');
         body.style.display = 'flex';
         body.style.flexDirection = 'column';
@@ -1119,28 +1068,18 @@
         const header = document.createElement('div');
         header.className = 'sileo-toast-header';
         header.textContent = item.options.title || '';
-        if (item.options.styles && item.options.styles.title) {
-            header.className += ' ' + item.options.styles.title;
-        }
         body.appendChild(header);
         if (item.options.description) {
             const desc = document.createElement('div');
             desc.className = 'sileo-toast-desc';
             desc.textContent = item.options.description;
-            if (item.options.styles && item.options.styles.description) {
-                desc.className += ' ' + item.options.styles.description;
-            }
             body.appendChild(desc);
         }
-        el.appendChild(badge);
         el.appendChild(body);
         if (item.options.button) {
             const btn = document.createElement('button');
             btn.className = 'sileo-toast-btn';
             btn.textContent = item.options.button.title;
-            if (item.options.styles && item.options.styles.button) {
-                btn.className += ' ' + item.options.styles.button;
-            }
             btn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 try {
@@ -1159,16 +1098,6 @@
         close.innerHTML = '×';
         close.addEventListener('click', () => sileo.dismiss(item.id));
         el.appendChild(close);
-        // Soporte para autopilot: expansión/colapso automático (simulado)
-        if (item.options.autopilot !== false) {
-            setTimeout(() => {
-                el.style.transform = 'scale(1.03)';
-                el.style.transition = 'transform 0.18s cubic-bezier(.22,1,.36,1)';
-                setTimeout(() => {
-                    el.style.transform = 'scale(1)';
-                }, 180);
-            }, 120);
-        }
         if (typeof item.options.duration === 'number') {
             if (item.options.duration > 0) {
                 setTimeout(() => sileo.dismiss(item.id), item.options.duration);
@@ -1178,16 +1107,6 @@
     }
     function initToasters(root = document.body, positions = ['top-right'], opts) {
         const containers = {};
-        // Inyecta el SVG filter gooey solo una vez
-        if (!document.getElementById('sileo-gooey-svg')) {
-            const div = document.createElement('div');
-            div.id = 'sileo-gooey-svg';
-            div.style.position = 'absolute';
-            div.style.width = '0';
-            div.style.height = '0';
-            div.innerHTML = gooeySVG;
-            document.body.appendChild(div);
-        }
         positions.forEach((pos) => {
             const c = createContainer(pos, root, opts);
             root.appendChild(c);

package/dist/styles.css

@@ -43,20 +43,13 @@
   background: var(--sileo-bg);
   color: var(--sileo-foreground);
   padding: 0.75rem 0.875rem;
-  border-radius: var(--sileo-roundness, 1rem);
-  /* Multiple layered shadows for depth (outer, mid, subtle glow) */
-  box-shadow:
-    0 0.75rem 1.6rem rgba(2,6,23,0.55),
-    0 0.25rem 0.6rem rgba(2,6,23,0.35),
-    inset 0 0.25rem 0.6rem rgba(255,255,255,0.02);
+  border-radius: 0.625rem;
+  box-shadow: 0 0.375rem 1.125rem rgba(2,6,23,0.6);
   display: flex;
   gap: 0.5rem;
   align-items: center;
   position: relative;
   overflow: hidden;
-  /* Efecto gooey visual */
-  backdrop-filter: blur(6px) saturate(1.2);
-  filter: url(#sileo-gooey);
 }
 
 .sileo-toast[data-type="success"]{ border-left: 0.25rem solid var(--sileo-success); }
@@ -65,50 +58,6 @@
 .sileo-toast[data-type="warning"]{ border-left: 0.25rem solid var(--sileo-warning); }
 
 .sileo-toast-header{ font-weight: 600; font-size: 0.875rem; }
-
-/* Badge circular con blur y animación */
-.sileo-toast-badge {
-  width: 2.25rem;
-  height: 2.25rem;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
-  border-radius: 50%;
-  background: rgba(255,255,255,0.08);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.5rem;
-  box-shadow: 0 0 0.5rem 0.08rem rgba(0,0,0,0.12), 0 0 0.25rem rgba(16,24,40,0.2) inset;
-  backdrop-filter: blur(2.5px);
-  animation: sileo-badge-pop 0.38s cubic-bezier(.22,1,.36,1) both;
-}
-
-/* Left accent / green rim similar to Sileo */
-.sileo-toast::before{
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 8%;
-  bottom: 8%;
-  width: 0.6rem;
-  border-radius: 999px;
-  background: linear-gradient(180deg, rgba(34,197,94,1) 0%, rgba(6,95,70,1) 100%);
-  box-shadow: 0 6px 18px rgba(16,185,129,0.18);
-  transform: translateX(-8%);
-  pointer-events: none;
-  mix-blend-mode: screen;
-}
-
-/* Slight top badge overlap to create the 'pill' effect */
-.sileo-toast[data-type="success"] .sileo-toast-badge{
-  box-shadow: 0 6px 18px rgba(16,185,129,0.12), 0 0 0.25rem rgba(0,0,0,0.18) inset;
-}
-
-@keyframes sileo-badge-pop {
-  0% { transform: scale(0.7); opacity: 0; }
-  60% { transform: scale(1.15); opacity: 1; }
-  100% { transform: scale(1); opacity: 1; }
-}
 .sileo-toast-desc{ font-size: 0.8125rem; opacity: 0.85; margin-top: 0.25rem; }
 .sileo-toast-btn{ margin-left: 0.5rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.08); padding: 0.375rem 0.5rem; border-radius: 0.375rem; cursor: pointer; }
 .sileo-toast-close{ position: absolute; right: 0.5rem; top: 0.375rem; background: transparent; border: none; color: inherit; font-size: 1rem; cursor: pointer; }

package/docs/browser.md

@@ -1,6 +1,9 @@
 
 # Browser / CDN usage
 
+```html
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
 Use this package directly in the browser when you cannot use npm modules or a bundler (e.g. Shopify, WordPress, static HTML).
 
 ## Quick start
@@ -8,19 +11,23 @@ Use this package directly in the browser when you cannot use npm modules or a bu
 Add the stylesheet and UMD bundle to your HTML:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.3/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.2.3/dist/notify.umd.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const api = window.notify; // or window.notifications for legacy
     // Always use an array of strings as the second argument
     // Correct usage:
     api.initToasters(document.body, ['top-left']);
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
     api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
   });
 </script>
 ```
 
+    <script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css" />
 
 
 ## API
@@ -40,8 +47,8 @@ Add the stylesheet and UMD bundle to your HTML:
 
 ### Advanced Options
 
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
+All notification methods accept advanced options:
+
 | Property      | Type                                   | Default     | Description                                 |
 | ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
 | `title`       | string                                 | —           | Toast title                                 |
@@ -55,8 +62,8 @@ Add the stylesheet and UMD bundle to your HTML:
 | `styles`      | { title, description, badge, button }  | —           | Custom class overrides for sub-elements     |
 | `roundness`   | number                                 | 16          | Border radius in pixels                     |
 | `autopilot`   | boolean \| object                      | true        | Auto expand/collapse timing                 |
-    <script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css" />
+
+#### Example: Advanced Toast
 
 ```js
 api.success({

package/docs/vanilla.md

@@ -178,8 +178,8 @@ notify.success({
 If you are not using a bundler, use the [Browser guide](./browser.md) for CDN usage. Example:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
 <script>
 	document.addEventListener('DOMContentLoaded', () => {
 		const api = window.notify;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samline/notify",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Notifications engine inspired by Sileo, with adapters for vanilla, React, Vue and Svelte.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",