Merge pull request #878 from AjayBandiwaddar/feat/ease-dropdown

feat: `ease-dropdown` — Animated CSS-only dropdown menu component

Author: SAPTARSHI-coder

submissions/examples/toast-notification/README.md

@@ -1,44 +1,89 @@
 # Toast Notification Component
 
-### What does this do?
-This submission adds a stackable, auto-dismissing toast notification component (`.ease-toast`) that slides in from the screen edge and collapses vertically upon exit.
+## 1. What does this do?
 
----
+Provides a composable toast notification system with four semantic color variants (success, danger, warning, info), a fixed stack container with four placement modifiers, an animated auto-dismiss progress bar, and a clean JS dismiss helper — delegating all entrance and exit animation entirely to existing EaseMotion animation classes.
 
-### How is it used?
+## 2. How is it used?
 
-Place `.ease-toast` elements inside a fixed `.ease-toast-container` wrapper (usually positioned top-right or bottom-right):
+**HTML structure**
 
 ```html
-<div class="ease-toast-container">
-  <!-- Success Toast -->
-  <div class="ease-toast ease-toast-success">
-    <span>Database sync complete!</span>
+<!-- Stack container — place once near </body> -->
+<div class="toast-stack">
+
+  <!-- Individual toast — add any EaseMotion entrance class -->
+  <div class="toast toast-success ease-slide-in-right">
+    <span class="toast-icon">✓</span>
+    <span class="toast-message">Changes saved successfully.</span>
+    <button class="toast-close" onclick="dismissToast(this.closest('.toast'))">✕</button>
+  </div>
+
+  <div class="toast toast-danger ease-slide-in-right">
+    <span class="toast-icon">✕</span>
+    <span class="toast-message">Something went wrong.</span>
+    <button class="toast-close" onclick="dismissToast(this.closest('.toast'))">✕</button>
   </div>
+
+</div>
+```
+
+**Optional stack placement modifiers**
+
+```html
+<div class="toast-stack toast-stack--top-right">…</div>
+<div class="toast-stack toast-stack--top-left">…</div>
+<div class="toast-stack toast-stack--bottom-left">…</div>
+<!-- default is bottom-right, no modifier needed -->
+```
+
+**Optional two-line toast (title + body)**
+
+```html
+<div class="toast toast-warning ease-slide-in-right">
+  <span class="toast-icon">⚠</span>
+  <span class="toast-message">
+    <span class="toast-title">Session expiring</span>
+    <span class="toast-body">You will be logged out in 5 minutes.</span>
+  </span>
+  <button class="toast-close">✕</button>
 </div>
 ```
 
-#### Theme Modifiers
-- **Success Accent**: `.ease-toast-success`
-- **Danger Accent**: `.ease-toast-danger`
-- **Warning Accent**: `.ease-toast-warning`
-- **Info Accent**: `.ease-toast-info`
+**Minimal JS helper (copy-paste ready)**
 
-#### Custom CSS Variables Configuration
-You can customize the toast appearance dynamically:
+```js
+function dismissToast(toast) {
+  if (!toast || toast.classList.contains('toast--dismissing')) return;
+  toast.classList.add('toast--dismissing');
+  setTimeout(() => toast.remove(), 350);
+}
 
-```css
-.my-custom-toast {
-  --toast-bg: #090c14;
-  --toast-color: #f8fafc;
-  --toast-accent: #a855f7; /* Custom purple accent border */
+function fireToast(variant, message, duration = 4000) {
+  const icons = { success: '✓', danger: '✕', warning: '⚠', info: 'ℹ' };
+  const stack = document.querySelector('.toast-stack');
+  const el = document.createElement('div');
+  el.className = `toast toast-${variant} ease-slide-in-right`;
+  el.style.setProperty('--toast-duration', `${duration}ms`);
+  el.setAttribute('role', 'alert');
+  el.innerHTML = `
+    <span class="toast-icon">${icons[variant]}</span>
+    <span class="toast-message">${message}</span>
+    <button class="toast-close" onclick="dismissToast(this.closest('.toast'))">✕</button>
+  `;
+  stack.appendChild(el);
+  setTimeout(() => dismissToast(el), duration);
 }
 ```
 
----
+## 3. Why is it useful?
+
+Toasts are one of the most animation-heavy UI patterns in any product — every project needs them and every project currently builds them from scratch.
+
+This submission fits EaseMotion's philosophy in two specific ways:
 
-### Why does it fit EaseMotion CSS?
+**Zero new keyframes.** Entrance animation is a single composable class (`ease-slide-in-right`, `ease-fade-in`, `ease-slide-up` — developer's choice). Exit animation is handled by the `.toast--dismissing` state, which reverses the same keyframes already in `animations.css`. The component itself is pure structure and color.
 
-A dynamic toast notification is a key UI pattern missing from the components library. 
+**Token-aware by default.** Every color value references a semantic alias (`--ease-color-surface`, `--ease-color-success`, `--ease-color-muted`, etc.), so toasts inherit the dark-mode overrides from `variables.css` automatically — no extra dark-mode CSS required.
 
-This implementation provides both the entry slide-in transition and the auto-dismiss exit collapse sequence in **pure CSS** (using a delayed exit animation with `animation-fill-mode: forwards`). It requires zero JavaScript runtime for animation logic, supporting EaseMotion's philosophy of highly performant, lightweight, and human-readable styling.
+The auto-dismiss progress bar uses a single `scaleX` keyframe driven by a CSS custom property (`--toast-duration`), making the dismiss duration controllable per-toast without JavaScript.