customizable-toast-notification 3.7.1 → 3.9.0

package/CHANGELOG.md

@@ -1,27 +1,54 @@
 # Changelog
 
-## [3.4.0] - 2025-01-19
+## [3.9.0] - 2025-09-16
 
 ### ✨ Major Release - Production Ready
 
-**🚀 New Features:**
+Added
+CTA support with button/link variants: options.cta { label, onClick, href, variant, target, rel, autoClose, ariaLabel }.
 
-- Zero-crash guarantee
-- Dynamic versioning with CDN cache-busting
-- Comprehensive error handling and memory leak prevention
+Pause-on-hover/focus for interactive toasts using a pausable timer; auto-enabled when CTA is present (can be overridden via options.pauseOnHover).
 
-**🔧 Improvements:**
+Robust grouping for identical notifications using full-message hashing plus same-frame coalescing to avoid race conditions under rapid clicks.
 
-- Reduced cognitive complexity
-- Modular architecture with helper functions separation
-- Professional build output with author branding preservation
+Grouped-count badge rendered at toast’s top-right; visible above the toast surface with subtle pulse on updates.
 
-**🛠️ Fixes:**
+Strict queueing with MAX_VISIBLE=3; overflow toasts are queued and displayed when a slot frees after exit animation.
 
-- Rollup build warnings and mixed exports issues
-- CDN caching problems with automatic invalidation
-- Code organization for better maintainability
+Container singleton per normalized position id; reuses the same DOM node and reattaches if detached to prevent duplicate containers.
 
-**⬆️ Upgrade:** Fully backward compatible - no breaking changes
+Accessibility improvements: toast containers use role=status and aria-atomic to announce updates without stealing focus.
+
+Changed
+Toast DOM structure now uses outer(overflow: visible) + inner(overflow: hidden) wrappers so badges can extend visually while progress bars remain clipped by border-radius.
+
+Dismiss timing refactored to a PausableTimer utility for accurate pause/resume semantics.
+
+Fixed
+Duplicate toasts created during rapid consecutive calls now group reliably instead of stacking.
+
+Enforced visible limit so more than 3 toasts never render concurrently.
+
+Badge layering ensured above toast and no clipping behind rounded corners, even with large border-radius (e.g., 50px).
+
+Progress bar overflow prevented with inner clipping wrapper.
+
+Eliminated duplicate container elements with the same id and cleaned up stray nodes.
+
+Transition-aware removal uses transitionend with a safe fallback to prevent stuck toasts or early slot release.
+
+Documentation
+README updated with installation (npm/CDN), API tables, CTA usage examples, pause-on-hover behavior, grouping/queue semantics, and accessibility notes.
+
+Migration Notes
+No breaking changes. All new features are opt-in via options.cta and options.pauseOnHover. Existing integrations continue to work as-is.
+
+Internal
+Stress tests for grouping/queue/CTA interactions added.
+
+Housekeeping around timers and DOM cleanup for reliability.
+
+[3.4.x] - 2025-08-xx
+Previous fixes and enhancements (see prior entries).
 
 **Author:** Priyanshu Patel | **License:** Apache-2.0

package/README.md

@@ -9,13 +9,20 @@ A **lightweight**, **zero-dependency** toast notification library for modern Jav
 
 ## ✨ Key Features
 
-- 🚫 **Zero Dependencies** - Lightweight and fast
+- 🚫 **Zero Dependencies** - Pure JavaScript with no external requirements Lightweight and fast
 - 🛡️ **Production Ready** - Reliable and scalable for production environments
 - 🎨 **Highly Customizable** - Colors, positions, animations, progress bars
 - 🌐 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
 - 📱 **Responsive** - Works on all screen sizes and devices
 - ⚡ **CDN Ready** - Easy integration via CDN or npm
-- 🔧 **TypeScript Ready** - Full type support (coming soon)
+- 🎨 **Fully Customizable** - Colors, positions, animations, and styling
+- ♿ **Accessible** - ARIA live regions and keyboard navigation support
+- 🔄 **Smart Grouping** - Duplicate notifications are automatically grouped with badges
+- ⏸️ **Pause on Hover** - CTA toasts pause when user hovers or focuses
+- 🎯 **Call-to-Action** - Built-in support for interactive buttons and links
+- 📊 **Queue Management** - Maximum 3 visible toasts with intelligent queueing
+- 🌈 **Multiple Themes** - Success, error, warning, and info styles
+- 🔧 **TypeScript Ready** - TypeScript definitions included Full type support (coming soon)
 
 ## 📦 Installation
 
@@ -67,32 +74,103 @@ Creates and displays a toast notification.
 
 #### Options
 
-| Parameter           | Type      | Default                 | Description                                   |
-| ------------------- | --------- | ----------------------- | --------------------------------------------- |
-| `message`           | `string`  | Based on `type`         | Toast message content                         |
-| `type`              | `string`  | `"info"`                | `"info"`, `"success"`, `"error"`, `"warning"` |
-| `duration`          | `number`  | `3000`                  | Auto-dismiss time in milliseconds             |
-| `position`          | `string`  | `"bottom-right"`        | Toast position on screen                      |
-| `backgroundColor`   | `string`  | Based on `type`         | Custom background color                       |
-| `textColor`         | `string`  | `"white"`               | Custom text color                             |
-| `showCloseButton`   | `boolean` | `false`                 | Show close (×) button                         |
-| `showProgressBar`   | `boolean` | `false`                 | Show countdown progress bar                   |
-| `animationDuration` | `string`  | `"0.5s"`                | CSS animation duration                        |
-| `animationEasing`   | `string`  | `"ease"`                | CSS animation easing function                 |
-| `progressColor`     | `string`  | `rgba(255,255,255,0.3)` | Progress bar color                            |
-| `progressHeight`    | `string`  | `"4px"`                 | Progress bar height                           |
-| `progressPosition`  | `string`  | `"bottom"`              | Progress bar position: `"top"` or `"bottom"`  |
+| Parameter           | Type      | Default                 | Description                                               |
+| ------------------- | --------- | ----------------------- | --------------------------------------------------------- |
+| `message`           | `string`  | Based on `type`         | Toast message content                                     |
+| `type`              | `string`  | `"info"`                | `"info"`, `"success"`, `"error"`, `"warning"`             |
+| `duration`          | `number`  | `3000`                  | Auto-dismiss time in milliseconds                         |
+| `position`          | `string`  | `"bottom-right"`        | Toast position on screen                                  |
+| `backgroundColor`   | `string`  | Based on `type`         | Custom background color                                   |
+| `textColor`         | `string`  | `"white"`               | Custom text color                                         |
+| `showCloseButton`   | `boolean` | `false`                 | Show close (×) button                                     |
+| `showProgressBar`   | `boolean` | `false`                 | Show countdown progress bar                               |
+| `animationDuration` | `string`  | `"0.5s"`                | CSS animation duration                                    |
+| `animationEasing`   | `string`  | `"ease"`                | CSS animation easing function                             |
+| `progressColor`     | `string`  | `rgba(255,255,255,0.3)` | Progress bar color                                        |
+| `progressHeight`    | `string`  | `"4px"`                 | Progress bar height                                       |
+| `progressPosition`  | `string`  | `"bottom"`              | Progress bar position: `"top"` or `"bottom"`              |
+| `pauseOnHover`      | `boolean` | `auto`                  | Pause timer on hover (auto: true for CTA toasts)          |
+| `cta`               | `object`  | `null`                  | Call-to-action configuration (see [CTA](#call-to-action)) |
 
 #### Position Options
 
 ```bash
+// Corner positions
+- "top-left", "top-right", "bottom-left", "bottom-right"
 
-- `"top-left"`, `"top-right"`, `"top-center"`, `"top-full-width"`
-- `"left-center"`, `"center"`, `"right-center"`
-- `"bottom-left"`, `"bottom-right"`, `"bottom-center"`, `"bottom-full-width"`
+// Edge positions
+- "top-center", "bottom-center", "left-center", "right-center"
+
+// Full width
+- "top-full-width", "bottom-full-width"
+
+// Center
+- "center"
 
 ```
 
+## 🎯 Call-to-Action (CTA)
+
+Add interactive buttons or links to your toasts:
+
+```bash
+// Button CTA
+createToast({
+message: "File uploaded successfully!",
+type: "success",
+cta: {
+label: "View File",
+onClick: () => {
+window.open('/files/latest');
+},
+autoClose: true // Close toast after click (default: true)
+}
+});
+
+// Link CTA
+createToast({
+message: "New version available!",
+cta: {
+label: "Download",
+href: "https://example.com/download",
+variant: "link",
+target: "_blank"
+}
+});
+
+// Advanced CTA with async action
+createToast({
+message: "Ready to sync your data?",
+cta: {
+label: "Sync Now",
+ariaLabel: "Start data synchronization",
+autoClose: false,
+onClick: async () => {
+await performDataSync();
+// Manually close if needed
+}
+}
+});
+
+```
+
+### CTA Options
+
+| Parameter   | Type       | Default    | Description                    |
+| ----------- | ---------- | ---------- | ------------------------------ |
+| `label`     | `string`   | `required` | Button/link text               |
+| `onClick`   | `function` | `null`     | Click handler (for buttons)    |
+| `href`      | `string`   | `null`     | URL (for links)                |
+| `variant`   | `string`   | `"button"` | `"button"` or `"link"`         |
+| `target`    | `string`   | `null`     | Link target (`"_blank"`, etc.) |
+| `rel`       | `string`   | `auto`     | Link relationship              |
+| `autoClose` | `boolean`  | `true`     | Close toast after CTA click    |
+| `ariaLabel` | `string`   | `label`    | Accessibility label            |
+
+## 🎨 Examples
+
+### All Toast Types
+
 ### `setDefaultColors(colors)`
 
 ```bash
@@ -182,6 +260,29 @@ createToast({ type: "success" }); // Uses your custom colors & messages
 
 ```
 
+## 🔄 Advanced Features
+
+### Smart Grouping
+
+Identical toasts (same type, message, and position) are automatically grouped:
+
+- Shows a single toast with a badge counter
+- Resets the dismiss timer when new duplicates arrive
+- Maximum of 3 toasts visible at once
+
+### Queue Management
+
+- Only 3 toasts are shown simultaneously
+- Additional toasts are queued automatically
+- Queue is processed as toasts are dismissed
+
+### Accessibility
+
+- ARIA live regions announce new toasts to screen readers
+- Keyboard navigation support (Tab, Enter, Escape)
+- High contrast badge design
+- Semantic HTML structure
+
 ## 🛡️ Reliability Features
 
 ### Production-Grade System
@@ -201,10 +302,10 @@ createToast({ type: "success" }); // Uses your custom colors & messages
 
 ## 📁 Bundle Information
 
-- **Size**: ~13KB minified, ~4KB gzipped
+- **Size**: ~8KB minified, ~4KB gzipped
 - **Dependencies**: Zero
 - **Formats**: UMD, ES Modules
-- **TypeScript**: Definitions included (coming soon)
+- **TypeScript**: Definitions included (full coming soon)
 
 ## 🤝 Contributing
 

package/dist/index.cjs

@@ -1,7 +1,7 @@
 /*!
- * Customizable Toast Notifications 3.7.1
- * Build: 2025-09-13 10:09:28
- * Cache-Buster: 1757758168805 
+ * Customizable Toast Notifications 3.9.0
+ * Build: 2025-09-16 13:41:46
+ * Cache-Buster: 1758030106007 
  * Author: Priyanshu Patel
  * Email: priyanshu.alt191@gmail.com
  * License: Apache-2.0
@@ -12,7 +12,7 @@
  * Supports flexible positioning, theming, icons, animations, and timing options
  * out of the box — with zero dependencies.
  */
-"use strict";async function t(t,e){if(!t||!e.position)throw new Error("Invalid container or position!");!function(t){t.style.top="auto",t.style.bottom="auto",t.style.left="auto",t.style.right="auto",t.style.transform="none"}(t);const o=function(t){const e=t.toLowerCase().trim();return{hasTop:e.includes("top"),hasBottom:e.includes("bottom")||e.includes("below"),hasLeft:e.includes("left"),hasRight:e.includes("right"),hasCenter:e.includes("center"),hasFullWidth:e.includes("top-full-width")||e.includes("bottom-full-width")||e.includes("fullwidth")}}(e.position);(function(t,e,o){if(!o.hasFullWidth)return!1;if(e.maxWidth="100vw",o.hasTop)return t.style.top="10px",t.style.left="10px",t.style.right="10px",!0;if(o.hasBottom)return t.style.bottom="10px",t.style.left="10px",t.style.right="10px",!0;return!1})(t,e,o)||function(t,e){if(!e.hasCenter)return!1;if(e.hasTop&&!e.hasLeft&&!e.hasRight)return t.style.top="10px",t.style.left="50%",t.style.transform="translateX(-50%)",!0;if(e.hasBottom&&!e.hasLeft&&!e.hasRight)return t.style.bottom="10px",t.style.left="50%",t.style.transform="translateX(-50%)",!0;if(e.hasLeft&&!e.hasTop&&!e.hasBottom)return t.style.left="10px",t.style.top="50%",t.style.transform="translateY(-50%)",!0;if(e.hasRight&&!e.hasTop&&!e.hasBottom)return t.style.right="10px",t.style.top="50%",t.style.transform="translateY(-50%)",!0;if(!(e.hasLeft||e.hasRight||e.hasTop||e.hasBottom))return t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)",!0;return!1}(t,o)||function(t,e){e.hasBottom?t.style.bottom="10px":e.hasTop&&(t.style.top="10px");e.hasRight?t.style.right="10px":e.hasLeft?t.style.left="10px":(t.style.bottom="10px",t.style.left="50%",t.style.transform="translateX(-50%)")}(t,o)}async function e(t){return`${t}-${Date.now()}-${Math.floor(1e5*Math.random())}`}async function o(t,e){if(!t||!e)return!1;try{return t.contains(e)||t.appendChild(e),!0}catch(o){try{return t.insertAdjacentElement("beforeend",e),!0}catch(o){try{if(t===document.body){const o=e.cloneNode(!0);return t.appendChild(o),!0}}catch(t){return!1}}}return!1}async function n(t){if(!t)return"black";try{return await async function(t){if(!t)throw new Error("Color is required");let e,o,n;if(t.startsWith("#")){const r=t.substring(1);if(3===r.length)e=parseInt(r[0]+r[0],16),o=parseInt(r[1]+r[1],16),n=parseInt(r[2]+r[2],16);else{if(6!==r.length)throw new Error(`Invalid hex color format: ${t}`);e=parseInt(r.substring(0,2),16),o=parseInt(r.substring(2,4),16),n=parseInt(r.substring(4,6),16)}}else if(t.startsWith("rgb")||t.startsWith("rgba")){const r=t.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d+(?:\.\d+)?))?\)$/);if(!r)throw new Error(`Invalid rgb/rgba color format: ${t}`);e=parseInt(r[1]),o=parseInt(r[2]),n=parseInt(r[3])}else{const r={black:[0,0,0],white:[255,255,255]}[t.toLowerCase()];if(!r)throw new Error(`Unsupported color format: ${t}`);e=r[0],o=r[1],n=r[2]}if(isNaN(e)||isNaN(o)||isNaN(n))throw new Error(`Invalid color value: ${t}`);const r=(.2126*e+.7152*o+.0722*n)/255,a=.05;return(Math.max(r,a)+.05)/Math.min(r,a)}(t)>3.5?"black":"white"}catch(t){return"black"}}async function r(t,e,o){const n=await async function(t){try{if("number"==typeof t&&t>0)return t;if("string"==typeof t){if(t.endsWith("s")&&!t.endsWith("ms")){const e=1e3*parseFloat(t);return e>0?e:500}const e=parseFloat(t);return e>0?e:500}}catch(t){}return 500}(e.animationDuration);Object.assign(t.style,{background:e.backgroundColor,padding:"12px 20px",marginBottom:"10px",borderRadius:e.borderRadius,overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"space-between",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)",minWidth:"250px",maxWidth:e.maxWidth,opacity:"0",position:"relative",transition:`opacity ${e.animationDuration} ${e.animationEasing}, transform ${e.animationDuration} ${e.animationEasing}`,transform:"translateY(20px)",zIndex:"9999"}),t._animationDuration=n;const r=document.createElement("span");r.style.position=e.fontPosition,r.style.display="inline-block",r.style.flex="1",r.style.padding=e.fontPadding,r.style.borderRadius=e.fontBorderRadius,r.style.background=e.fontBackgroundColor,r.style.fontFamily=e.fontFamily,r.style.fontSize=e.fontSize,r.style.fontWeight=e.fontWeight,r.style.lineHeight=e.fontLineHeight,r.style.color=e.textColor,r.style.userSelect="text",r.style.wordBreak="break-word",r.style.direction=e.fontDirection,r.style.webkitLineClamp="3",r.style.webkitBoxOrient="vertical",r.style.whiteSpace=e.wrapText?"normal":"nowrap",r.style.display="block",r.style.overflow="hidden",r.style.textOverflow="ellipsis",r.style.lineClamp="3",r.style.boxOrient="vertical",r.style.display="-webkit-box",r.textContent=e.message,r.setAttribute("aria-label","Toast Notification Center"),r.setAttribute("title",e.message),t.appendChild(r),e.showCloseButton&&await async function(t,e,o){const n=document.createElement("button");n.setAttribute("aria-label","Close notification"),n.setAttribute("title","Close"),n.textContent="×",Object.assign(n.style,{background:"none",border:"none",color:e.textColor,fontSize:"18px",marginLeft:"10px",cursor:"pointer"}),n.onclick=()=>o(t),t.appendChild(n),t._cleanupCloseButton=()=>{n.onclick=null}}(t,e,o),e.showProgressBar&&await async function(t,e){const o=document.createElement("div");Object.assign(o.style,{position:"absolute",left:"0",height:e.progressHeight||"4px",background:e.progressColor||"rgba(255, 255, 255, 0.3)",width:"100%",transition:`width ${e.duration||1800}ms linear`,["top"===e.progressPosition?"top":"bottom"]:"0"}),t.appendChild(o),setTimeout(()=>{!function(t){try{return t?.offsetWidth||0}catch(t){return 0}}(o),o.style.width="0%"},100)}(t,e),await async function(t){setTimeout(()=>{requestAnimationFrame(()=>{t.style.opacity="1",t.style.transform="translateY(0)"})},50)}(t)}async function a(t,e){try{const o=document.createElement("div");return o.id=`emergency-${Date.now()}`,o.innerHTML=`\n      <div style="\n        background: #333 !important;\n        color: white !important;\n        padding: 10px 15px !important;\n        position: fixed !important;\n        top: 20px !important;\n        right: 20px !important;\n        z-index: 99999 !important;\n        border-radius: 3px !important;\n        max-width: 250px !important;\n        word-wrap: break-word !important;\n        font-family: Arial, sans-serif !important;\n        font-size: 14px !important;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;\n        cursor: pointer !important;\n      " onclick="this.parentNode.removeChild(this)">\n        ${t.message||"Emergency Toast Creation Showing!"}\n        <span style="float: right; margin-left: 10px; font-weight: bold;">&times;</span>\n      </div>\n    `,o._animationDuration=500,o._isEmergencyToast=!0,setTimeout(()=>{try{o.parentNode&&o.parentNode.removeChild(o),e(o)}catch(t){}},t.duration||1800),o}catch(o){return setTimeout(()=>{try{alert(t.message||"Toast Creation Failed!"),e(null)}catch(t){e(null)}},100),null}}async function i(t,o){let n;if(!document.querySelector('[id^="toast-container-"]'))return null;try{return n=await async function(t,o){try{const n=document.createElement(t);return n.id=await e(o),n}catch(t){try{const t="div",o="fallback",n=document.createElement(t);return n.id=await e(o),n.setAttribute("data-original-tag",t),n}catch(t){}}}("div","toast"),await r(n,t,o),n}catch(e){return await a(t,o),n}}let s=[],l=[];async function c(e){try{const n=await async function(e){try{let n=document.getElementById(`toast-container-${e.position}`);return n||(n=document.createElement("div"),n.id=`toast-container-${e.position}`,n.style.position="fixed",n.style.zIndex="9999",await t(n,e),await o(document.body,n)),n}catch(t){return document.body}}(e),r=await i(e,d);if(!r)throw new Error("Toast element creation failed!");s.push(r),n.id.includes("toast-container-")&&n.appendChild(r);const a="number"==typeof e.duration&&e.duration>0?e.duration+2:1800,c=await async function(t,e){return setTimeout(()=>{t()},e)}(()=>d(r),a);return void l.push(c)}catch(t){const o=document.querySelector('[id^="toast-container-"]'),n=a(e,d);return void(o&&o?.id?.includes("toast-container-")?o.appendChild(n):alert(t.substring(0,200)))}}async function d(t){if(s.length>0){const e=s.indexOf(t);-1!==e&&s.splice(e,1)}await async function(t){if(!t)return!0;try{if(t?.parentNode?.id.includes("toast-container-"))return t.parentNode.removeChild(t),!0}catch(e){try{if(t.remove)return t.remove(),!0}catch(e){try{return t.style.display="none",t.style.opacity="0",t.style.pointerEvents="none",t.style.position="absolute",t.style.left="-9999px",!0}catch(t){return!1}}}return!0}(t)}
+"use strict";async function t(t){return`${t}-${Date.now()}-${Math.floor(1e5*Math.random())}`}async function e(t){if(!t)return"black";try{return await async function(t){if(!t)throw new Error("Color is required");let e,n,o;if(t.startsWith("#")){const i=t.substring(1);if(3===i.length)e=parseInt(i[0]+i[0],16),n=parseInt(i[1]+i[1],16),o=parseInt(i[2]+i[2],16);else{if(6!==i.length)throw new Error(`Invalid hex color format: ${t}`);e=parseInt(i.substring(0,2),16),n=parseInt(i.substring(2,4),16),o=parseInt(i.substring(4,6),16)}}else if(t.startsWith("rgb")||t.startsWith("rgba")){const i=t.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d+(?:\.\d+)?))?\)$/);if(!i)throw new Error(`Invalid rgb/rgba color format: ${t}`);e=parseInt(i[1]),n=parseInt(i[2]),o=parseInt(i[3])}else{const i={black:[0,0,0],white:[255,255,255]}[t.toLowerCase()];if(!i)throw new Error(`Unsupported color format: ${t}`);e=i[0],n=i[1],o=i[2]}if(isNaN(e)||isNaN(n)||isNaN(o))throw new Error(`Invalid color value: ${t}`);const i=(.2126*e+.7152*n+.0722*o)/255,r=.05;return(Math.max(i,r)+.05)/Math.min(i,r)}(t)>3.5?"black":"white"}catch(t){return"black"}}async function n(t,e,n){const o=await async function(t){try{if("number"==typeof t&&t>0)return t;if("string"==typeof t){if(t.endsWith("s")&&!t.endsWith("ms")){const e=1e3*parseFloat(t);return e>0?e:500}const e=parseFloat(t);return e>0?e:500}}catch(t){}return 500}(e.animationDuration);Object.assign(t.style,{background:e.backgroundColor,padding:"12px 20px",marginBottom:"10px",borderRadius:e.borderRadius,overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"space-between",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)",minWidth:"250px",maxWidth:e.maxWidth,opacity:"0",position:"relative",transition:`opacity ${e.animationDuration} ${e.animationEasing}, transform ${e.animationDuration} ${e.animationEasing}`,transform:"translateY(20px)",zIndex:"9999"}),t._animationDuration=o;const i=document.createElement("span");i.style.position=e.fontPosition,i.style.display="inline-block",i.style.flex="1",i.style.padding=e.fontPadding,i.style.borderRadius=e.fontBorderRadius,i.style.background=e.fontBackgroundColor,i.style.fontFamily=e.fontFamily,i.style.fontSize=e.fontSize,i.style.fontWeight=e.fontWeight,i.style.lineHeight=e.fontLineHeight,i.style.color=e.textColor,i.style.userSelect="text",i.style.wordBreak="break-word",i.style.direction=e.fontDirection,i.style.webkitLineClamp="3",i.style.webkitBoxOrient="vertical",i.style.whiteSpace=e.wrapText?"normal":"nowrap",i.style.display="block",i.style.overflow="hidden",i.style.textOverflow="ellipsis",i.style.lineClamp="3",i.style.boxOrient="vertical",i.style.display="-webkit-box",i.textContent=e.message,i.setAttribute("aria-label","Toast Notification Center"),i.setAttribute("title",e.message),t.appendChild(i),await async function(t,e,n){const o=e?.cta;if(!o||!o.label)return;const i=!!o.href&&"link"===o.variant,r=document.createElement(i?"a":"button");i?(r.href=o.href,o.target&&(r.target=o.target),r.rel=o.rel||("_blank"===o.target?"noopener noreferrer":"")):r.type="button";r.setAttribute("aria-label",o.ariaLabel||o.label),Object.assign(r.style,{marginLeft:"10px",padding:"6px 10px",borderRadius:"6px",fontSize:"12px",fontWeight:"600",lineHeight:"1",border:"1px solid rgba(255,255,255,0.35)",color:e.textColor||"#fff",background:"rgba(255,255,255,0.15)",cursor:"pointer",whiteSpace:"nowrap",flexShrink:"0"}),r.textContent=o.label,r.addEventListener("click",async e=>{try{if("function"==typeof o.onClick){const t=o.onClick(e);t?.then&&await t}}finally{!1!==o.autoClose&&n(t)}}),t.appendChild(r)}(t,e,n),e.showCloseButton&&await async function(t,e,n){const o=document.createElement("button");o.setAttribute("aria-label","Close notification"),o.setAttribute("title","Close"),o.textContent="×",Object.assign(o.style,{background:"none",border:"none",color:e.textColor,fontSize:"18px",marginLeft:"10px",cursor:"pointer"}),o.onclick=()=>n(t),t.appendChild(o),t._cleanupCloseButton=()=>{o.onclick=null}}(t,e,n),e.showProgressBar&&await async function(t,e){const n=document.createElement("div");Object.assign(n.style,{position:"absolute",left:"0",height:e.progressHeight||"4px",background:e.progressColor||"rgba(255, 255, 255, 0.3)",width:"100%",transition:`width ${e.duration||1800}ms linear`,["top"===e.progressPosition?"top":"bottom"]:"0"}),t.appendChild(n),setTimeout(()=>{!function(t){try{return t?.offsetWidth||0}catch(t){return 0}}(n),n.style.width="0%"},100)}(t,e),await async function(t){setTimeout(()=>{requestAnimationFrame(()=>{t.style.opacity="1",t.style.transform="translateY(0)"})},50)}(t)}async function o(t,e){try{const n=document.createElement("div");return n.id=`emergency-${Date.now()}`,n.innerHTML=`\n      <div style="\n        background: #333 !important;\n        color: white !important;\n        padding: 10px 15px !important;\n        position: fixed !important;\n        top: 20px !important;\n        right: 20px !important;\n        z-index: 99999 !important;\n        border-radius: 3px !important;\n        max-width: 250px !important;\n        word-wrap: break-word !important;\n        font-family: Arial, sans-serif !important;\n        font-size: 14px !important;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;\n        cursor: pointer !important;\n      " onclick="this.parentNode.removeChild(this)">\n        ${t.message||"Emergency Toast Creation Showing!"}\n        <span style="float: right; margin-left: 10px; font-weight: bold;">&times;</span>\n      </div>\n    `,n._animationDuration=500,n._isEmergencyToast=!0,setTimeout(()=>{try{n.parentNode&&n.parentNode.removeChild(n),e(n)}catch(t){}},t.duration||1800),n}catch(n){return setTimeout(()=>{try{alert(t.message||"Toast Creation Failed!"),e(null)}catch(t){e(null)}},100),null}}async function i(e,i){let r;if(!document.querySelector('[id^="toast-container-"]'))return null;try{return r=await async function(e,n){try{const o=document.createElement(e);return o.id=await t(n),o}catch(e){try{const e="div",n="fallback",o=document.createElement(e);return o.id=await t(n),o.setAttribute("data-original-tag",e),o}catch(t){}}}("div","toast"),await n(r,e,i),r}catch(t){return await o(e,i),r}}const r=new Map,s=new Map;function a(t="bottom-right"){return`toast-container-${function(t="bottom-right"){return String(t).toLowerCase().trim().replace(/\bbelow\b/g,"bottom").replace(/\s+/g,"-").replace(/[^a-z0-9\-]/g,"-").replace(/\-+/g,"-")}(t)}`}async function l(t={},e){const n=a(t.position);if(s.has(n))return s.get(n);const o=(async()=>{const o=r.get(n);if(o&&o.isConnected)return o;let i=document.getElementById(n);i&&!i.isConnected&&document.body.appendChild(i),i?(i.style.position=i.style.position||"fixed",i.style.zIndex=i.style.zIndex||"9999","function"==typeof e&&await e(i,t)):(i=document.createElement("div"),i.id=n,i.setAttribute("role","status"),i.setAttribute("aria-atomic","true"),i.style.position="fixed",i.style.zIndex="9999",i.style.inset="auto 10px 10px auto",i.style.display="flex",i.style.justifyContent="space-between",i.style.alignItems="center",i.style.flexDirection="column",i.style.overflow="hidden","function"==typeof e&&await e(i,t),document.body.appendChild(i));const s=document.querySelectorAll(`#${n}`);if(s.length>1)for(let t=1;t<s.length;t++)try{s[t].remove()}catch{}return r.set(n,i),i})();s.set(n,o);try{return await o}finally{s.delete(a(t.position))}}async function c(t,e){if(!t||!e.position)throw new Error("Invalid container or position!");!function(t){t.style.top="auto",t.style.bottom="auto",t.style.left="auto",t.style.right="auto",t.style.transform="none"}(t);const n=function(t){const e=t.toLowerCase().trim();return{hasTop:e.includes("top"),hasBottom:e.includes("bottom")||e.includes("below"),hasLeft:e.includes("left"),hasRight:e.includes("right"),hasCenter:e.includes("center"),hasFullWidth:e.includes("top-full-width")||e.includes("bottom-full-width")||e.includes("fullwidth")}}(e.position);(function(t,e,n){if(!n.hasFullWidth)return!1;if(e.maxWidth="100vw",n.hasTop)return t.style.top="10px",t.style.left="10px",t.style.right="10px",!0;if(n.hasBottom)return t.style.bottom="10px",t.style.left="10px",t.style.right="10px",!0;return!1})(t,e,n)||function(t,e){if(!e.hasCenter)return!1;if(e.hasTop&&!e.hasLeft&&!e.hasRight)return t.style.top="10px",t.style.left="50%",t.style.transform="translateX(-50%)",!0;if(e.hasBottom&&!e.hasLeft&&!e.hasRight)return t.style.bottom="10px",t.style.left="50%",t.style.transform="translateX(-50%)",!0;if(e.hasLeft&&!e.hasTop&&!e.hasBottom)return t.style.left="10px",t.style.top="50%",t.style.transform="translateY(-50%)",!0;if(e.hasRight&&!e.hasTop&&!e.hasBottom)return t.style.right="10px",t.style.top="50%",t.style.transform="translateY(-50%)",!0;if(!(e.hasLeft||e.hasRight||e.hasTop||e.hasBottom))return t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)",!0;return!1}(t,n)||function(t,e){e.hasBottom?t.style.bottom="10px":e.hasTop&&(t.style.top="10px");e.hasRight?t.style.right="10px":e.hasLeft?t.style.left="10px":(t.style.bottom="10px",t.style.left="50%",t.style.transform="translateX(-50%)")}(t,n)}class u{constructor(t,e){this.callback=t,this.delay=e,this.remaining=e,this.startTime=null,this.timeoutId=null,this.isPaused=!1,this.isCompleted=!1}start(){return this.isCompleted||this.timeoutId||(this.startTime=Date.now(),this.timeoutId=setTimeout(()=>{this.isCompleted=!0,this.timeoutId=null,this.callback()},this.remaining)),this}pause(){return this.isPaused||!this.timeoutId||this.isCompleted||(clearTimeout(this.timeoutId),this.timeoutId=null,this.remaining-=Date.now()-this.startTime,this.remaining=Math.max(0,this.remaining),this.isPaused=!0),this}resume(){return!this.isPaused||this.isCompleted||(this.isPaused=!1,this.start()),this}clear(){return this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.isCompleted=!0,this}getRemainingTime(){return this.isCompleted?0:this.isPaused?this.remaining:this.timeoutId?Math.max(0,this.remaining-(Date.now()-this.startTime)):this.delay}}const d=new Map,p=new Map,m=[];let f=0;function h(t){let e=5381;for(let n=0;n<t.length;n++)e=(e<<5)+e+t.charCodeAt(n);return e>>>0}async function y(t={}){const e=function({type:t="info",message:e="",position:n="bottom-right"}){return[String(t).trim().toLowerCase(),h(String(e)).toString(16),String(n).trim().toLowerCase()].join("|")}(t);if(d.has(e)){const n=d.get(e);return n.count++,n.timer.clear(),n.timer=b(n.toast,t),w(n),void C(n)}if(p.has(e))return void p.get(e).count++;const n={options:t,count:1,rafId:0};p.set(e,n),n.rafId=requestAnimationFrame(async()=>{const t=p.get(e);if(t){if(p.delete(e),f>=3)return m.push({options:t.options,key:e,count:t.count}),void v();await g(t.options,e,t.count)}})}async function g(t,e,n){try{f++;const o=await l(t,c),r=await i(t,x);if(!r)throw new Error("Toast element creation failed");const s=document.createElement("div");Object.assign(s.style,{position:"relative",display:"inline-block",overflow:"visible",marginBottom:"10px",zIndex:"0",width:"100%"});const a=document.createElement("div");Object.assign(a.style,{position:"relative",overflow:"hidden",borderRadius:t.borderRadius||"8px",zIndex:"1"}),a.appendChild(r),s.appendChild(a),o.id.includes("toast-container-")&&o.appendChild(s);const u=!1!==t.pauseOnHover&&(!0===t.pauseOnHover||!!t.cta),p={outer:s,toast:r,count:Math.max(1,0|n),timeout:null,pauseOnHover:u};d.set(e,p),r._key=e,p.count>1&&C(p),p.timer=b(r,t),w(p)}catch(e){f=Math.max(0,f-1);(document.querySelector('[id^="toast-container-"]')||document.body).appendChild(o(t,x))}}function b(t,e){const n=(e.duration||1800)+10,o=new u(()=>x(t),n);return o.start(),o}function w(t){if(!t.pauseOnHover||!t.outer||!t.timer)return;const{outer:e,timer:n}=t,o=()=>{n.pause()},i=()=>{n.resume()},r=t=>{t.target.matches("button, a, [tabindex]")&&n.pause()},s=t=>{e.contains(t.relatedTarget)||n.resume()};e.addEventListener("mouseenter",o),e.addEventListener("mouseleave",i),e.addEventListener("focusin",r),e.addEventListener("focusout",s),e._pauseCleanup=()=>{e.removeEventListener("mouseenter",o),e.removeEventListener("mouseleave",i),e.removeEventListener("focusin",r),e.removeEventListener("focusout",s)}}async function x(t){if(!t||!t._key)return;const e=d.get(t._key);var n;e&&(e.timer?.clear(),e.outer?._pauseCleanup?.(),d.delete(t._key),f=Math.max(0,f-1),e.outer.querySelector(".toast-count-badge")?.remove(),await(n=e.outer,new Promise(t=>{let e=!1;const o=()=>{e||(e=!0,async function(t){if(!t)return!0;try{if(t?.parentNode?.id.includes("toast-container-"))return t.parentNode.removeChild(t),!0}catch(e){try{if(t.remove)return t.remove(),!0}catch(e){try{return t.style.display="none",t.style.opacity="0",t.style.pointerEvents="none",t.style.position="absolute",t.style.left="-9999px",!0}catch(t){return!1}}}}(n),t())},i=n.firstElementChild||n,r=t=>{t.target===i&&(i.removeEventListener("transitionend",r,!0),o())};i.addEventListener("transitionend",r,!0),setTimeout(()=>{i.removeEventListener("transitionend",r,!0),o()},700)})),v())}function v(){for(;f<3&&m.length;){const t=m.shift();if(d.has(t.key)){const e=d.get(t.key);e.count+=t.count,C(e);continue}g(t.options,t.key,t.count)}}function C({outer:t,count:e}){if(e<2)return void t.querySelector(".toast-count-badge")?.remove();let n=t.querySelector(".toast-count-badge");n||(n=document.createElement("span"),n.className="toast-count-badge",n.setAttribute("aria-label",`${e} identical notifications`),Object.assign(n.style,{position:"absolute",top:"6px",right:"6px",backgroundColor:"#f44336",color:"#fff",borderRadius:"50%",minWidth:"20px",height:"20px",fontSize:"12px",fontWeight:"600",display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid #fff",boxShadow:"0 2px 6px rgba(0,0,0,0.3)",zIndex:"2",pointerEvents:"none",transition:"transform 150ms ease"}),t.appendChild(n)),n.textContent=e>99?"99+":String(e),n.style.transform="scale(1.2)",setTimeout(()=>n.style.transform="scale(1)",150)}
 //  * @license Apache-2.0
-let u={success:"#28a745",error:"#dc3545",warning:"#ffc107",info:"#17a2b8"},p={success:"Operation completed successfully!",error:"Something went wrong!",warning:"Warning message!",info:"Information message!"};const f=[];let y=!1;async function m(e={}){try{const r=await async function(t){const e=t?.position?.toLowerCase()?.trim(),o=e?.includes("top-full-width")||e?.includes("bottom-full-width")?"100vw":"400px",r={duration:1800,position:"bottom-right",type:"info",borderRadius:"50px",backgroundColor:void 0,textColor:void 0,showCloseButton:!0,animationDuration:"0.4s",animationType:"fade",animationEasing:"ease",showProgressBar:!0,progressColor:void 0,progressHeight:"4px",progressPosition:"bottom",fontPosition:"relative",fontPadding:void 0,fontBorderRadius:void 0,fontBackgroundColor:void 0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',fontSize:"14px",fontWeight:"400",fontLineHeight:"1.4",fontDirection:"auto",wrapText:"normal",maxWidth:o,..."object"!=typeof t||Array.isArray(t)?{}:t};r.message=t?.message??r.message;try{r.backgroundColor||(r.backgroundColor=u?.[r.type]??(window.matchMedia("(prefers-color-scheme: dark)").matches?"#f5f5f5":"#111111")),r.message=r.message||p?.[r.type]||"No Message Provided!",!r.textColor&&r.backgroundColor&&(r.textColor=await n(r.backgroundColor)),!r.progressColor&&r.backgroundColor&&(r.progressColor=await n(r.backgroundColor))}catch(t){}"string"!=typeof r.message&&(r.message="No Message Provided!");return r}(e);await async function(e){try{let n=document.getElementById(`toast-container-${e.position}`);return n||(n=document.createElement("div"),n.id=`toast-container-${e.position}`,n.style.position="fixed",n.style.zIndex="9999",await t(n,e),await o(document.body,n)),n}catch(t){return document.body}}(r),await c(r)}catch(t){const o="string"==typeof e?.message&&null!==e?.message?`${e?.message?.substring(0,200)} toast creation failed!`:"Toast creation failed!";alert(o)}}let h=!1;async function g(t={}){"undefined"!=typeof window&&"undefined"!=typeof document&&(await async function(){y||"undefined"!=typeof window&&"undefined"!=typeof document&&("complete"===document.readyState||"interactive"===document.readyState?(y=!0,f.forEach(t=>setTimeout(()=>m(t),2e3)),f.length=0):document.addEventListener("DOMContentLoaded",()=>{y=!0,f.forEach(t=>setTimeout(()=>m(t),2e3)),f.length=0},{once:!0}))}(),y?h?await m(t):(h=!0,setTimeout(await m(t),2e3)):f.push(t))}function w(t){try{t&&"object"==typeof t&&!Array.isArray(t)&&(u={...u,...t})}catch(t){}}function b(t){try{t&&"object"==typeof t&&!Array.isArray(t)&&(p={...p,...t})}catch(t){}}try{"undefined"!=typeof window&&(window.customizableToast={createToast:g,setDefaultColors:w,setDefaultMessages:b})}catch(t){}exports.createToast=g,exports.noop=function(){d(document.querySelector('[id^="toast-"]:not([id*="container"])'))},exports.setDefaultColors=w,exports.setDefaultMessages=b;
+let k={success:"#28a745",error:"#dc3545",warning:"#ffc107",info:"#17a2b8"},E={success:"Operation completed successfully!",error:"Something went wrong!",warning:"Warning message!",info:"Information message!"};const I=[];let T=!1;async function S(t={}){try{const n=await async function(t){const n=t?.position?.toLowerCase()?.trim(),o=n?.includes("top-full-width")||n?.includes("bottom-full-width")?"100vw":"400px",i={pauseOnHover:void 0,duration:1800,position:"bottom-right",type:"info",borderRadius:"50px",backgroundColor:void 0,textColor:void 0,showCloseButton:!0,animationDuration:"0.4s",animationType:"fade",animationEasing:"ease",showProgressBar:!0,progressColor:void 0,progressHeight:"4px",progressPosition:"bottom",fontPosition:"relative",fontPadding:void 0,fontBorderRadius:void 0,fontBackgroundColor:void 0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',fontSize:"14px",fontWeight:"400",fontLineHeight:"1.4",fontDirection:"auto",wrapText:"normal",maxWidth:o,..."object"!=typeof t||Array.isArray(t)?{}:t};i.message=t?.message??i.message;try{i.backgroundColor||(i.backgroundColor=k?.[i.type]??(window.matchMedia("(prefers-color-scheme: dark)").matches?"#f5f5f5":"#111111")),i.message=i.message||E?.[i.type]||"No Message Provided!",!i.textColor&&i.backgroundColor&&(i.textColor=await e(i.backgroundColor)),!i.progressColor&&i.backgroundColor&&(i.progressColor=await e(i.backgroundColor))}catch(t){}"string"!=typeof i.message&&(i.message="No Message Provided!");return i}(t);await async function(t){try{return await l(t,c)}catch(t){return document.body}}(n),await y(n)}catch(e){const n="string"==typeof t?.message&&null!==t?.message?`${t?.message?.substring(0,200)} toast creation failed!`:"Toast creation failed!";alert(n)}}let L=!1;async function A(t={}){"undefined"!=typeof window&&"undefined"!=typeof document&&(await async function(){T||"undefined"!=typeof window&&"undefined"!=typeof document&&("complete"===document.readyState||"interactive"===document.readyState?(T=!0,I.forEach(t=>setTimeout(()=>S(t),2e3)),I.length=0):document.addEventListener("DOMContentLoaded",()=>{T=!0,I.forEach(t=>setTimeout(()=>S(t),2e3)),I.length=0},{once:!0}))}(),T?L?await S(t):(L=!0,setTimeout(await S(t),2e3)):I.push(t))}function B(t){try{t&&"object"==typeof t&&!Array.isArray(t)&&(k={...k,...t})}catch(t){}}function M(t){try{t&&"object"==typeof t&&!Array.isArray(t)&&(E={...E,...t})}catch(t){}}try{"undefined"!=typeof window&&(window.customizableToast={createToast:A,setDefaultColors:B,setDefaultMessages:M})}catch(t){}exports.createToast=A,exports.noop=function(){x(document.querySelector('[id^="toast-"]:not([id*="container"])'))},exports.setDefaultColors=B,exports.setDefaultMessages=M;
 //# sourceMappingURL=index.cjs.map