@samline/notify 0.2.3 → 0.2.6

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.3/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.6/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/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.3/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.6/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,6 +1018,18 @@ 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',
@@ -1050,6 +1062,8 @@ 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) {
@@ -1059,6 +1073,43 @@ 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';
@@ -1066,18 +1117,28 @@ 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 {
@@ -1096,6 +1157,16 @@ 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);
@@ -1105,6 +1176,16 @@ 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,6 +1014,18 @@ 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',
@@ -1046,6 +1058,8 @@ 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) {
@@ -1055,6 +1069,43 @@ 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';
@@ -1062,18 +1113,28 @@ 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 {
@@ -1092,6 +1153,16 @@ 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);
@@ -1101,6 +1172,16 @@ 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,6 +1020,18 @@
         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',
@@ -1052,6 +1064,8 @@
                     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) {
@@ -1061,6 +1075,43 @@
         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';
@@ -1068,18 +1119,28 @@
         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 {
@@ -1098,6 +1159,16 @@
         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);
@@ -1107,6 +1178,16 @@
     }
     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,13 +43,20 @@
   background: var(--sileo-bg);
   color: var(--sileo-foreground);
   padding: 0.75rem 0.875rem;
-  border-radius: 0.625rem;
-  box-shadow: 0 0.375rem 1.125rem rgba(2,6,23,0.6);
+  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);
   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); }
@@ -58,6 +65,50 @@
 .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

@@ -8,8 +8,8 @@ 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.3/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.2.3/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.2.6/dist/notify.umd.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const api = window.notify; // or window.notifications for legacy
@@ -40,8 +40,8 @@ Add the stylesheet and UMD bundle to your HTML:
 
 ### Advanced Options
 
-All notification methods accept 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>
 | Property      | Type                                   | Default     | Description                                 |
 | ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
 | `title`       | string                                 | —           | Toast title                                 |
@@ -55,8 +55,8 @@ All notification methods accept advanced options:
 | `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                 |
-
-#### Example: Advanced Toast
+    <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" />
 
 ```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.0/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.2.0/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.2.6/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.3",
+  "version": "0.2.6",
   "description": "Notifications engine inspired by Sileo, with adapters for vanilla, React, Vue and Svelte.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",