@digital-ai/dot-illustrations 2.0.41 → 2.0.42

package/demo/index.html

@@ -318,5 +318,12 @@
       </div>
     </div>
 
+    <!-- Toast — pre-defined so Tailwind CDN scans the classes -->
+    <div id="toast-message" role="status" aria-live="polite"
+      style="display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:9999;
+             background:#111827;color:#fff;padding:.625rem 1.25rem;border-radius:.5rem;
+             font-size:.875rem;box-shadow:0 4px 12px rgba(0,0,0,.35);white-space:nowrap;">
+    </div>
+
   </body>
 </html>

package/demo/script.js

@@ -33,19 +33,15 @@ function hideTooltip(button) {
 
 // Toast logic
 function showToast(message) {
-  let toast = document.getElementById('toast-message');
-  if (!toast) {
-    toast = document.createElement('div');
-    toast.id = 'toast-message';
-    toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 text-base animate-fade-in';
-    document.body.appendChild(toast);
-  }
+  // Uses the pre-defined #toast-message element in index.html.
+  // Inline styles only — Tailwind CDN does not generate styles for
+  // dynamically-injected class names so we never rely on it here.
+  const toast = document.getElementById('toast-message');
+  if (!toast) return;
   toast.textContent = message;
-  toast.style.display = 'flex';
+  toast.style.display = 'block';
   clearTimeout(window._toastTimeout);
-  window._toastTimeout = setTimeout(() => {
-    toast.style.display = 'none';
-  }, 2000);
+  window._toastTimeout = setTimeout(() => { toast.style.display = 'none'; }, 2400);
 }
 
 // Patch copyCode and copyText to show toast
@@ -528,7 +524,7 @@ document.addEventListener('DOMContentLoaded', () => {
         div.dataset.itemId   = item;
         div.dataset.itemType = 'integration';
         div.innerHTML = `
-          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 ${isFav ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
             <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
           <div class="flex items-center justify-center h-36 px-4">
@@ -554,7 +550,7 @@ document.addEventListener('DOMContentLoaded', () => {
         div.dataset.itemId   = item;
         div.dataset.itemType = 'illustration';
         div.innerHTML = `
-          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 ${isFav ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
             <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
           <div class="flex items-center justify-center h-36 px-4 dot-illustration">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.41",
+  "version": "2.0.42",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {