lit-toaster 0.1.2 → 0.2.1

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img alt="react-hot-toast - Try it out" src="https://res.cloudinary.com/ddlhtsgmp/image/upload/w_300,h_300,c_fill,r_10/v1755055178/lit-toaster-logo-full.png"/>
+<img alt="lit toaster logo" src="https://res.cloudinary.com/ddlhtsgmp/image/upload/w_300,h_300,c_fill,r_10/v1755055178/lit-toaster-logo-full.png"/>
 </div>
 
 <br />
@@ -82,9 +82,9 @@ declare global {
 
 ## Toaster element properties
 
-| Name         | Attribute |
-| ------------ | --------- |
-| `queueLimit` | false     |
+| Name          | Attribute |
+| ------------- | --------- |
+| `toastsLimit` | false     |
 
 ## Documentation
 

package/dist/index.d.ts

@@ -3,42 +3,44 @@ import { LitElement, TemplateResult } from 'lit';
 
 type ToastKind = 'success' | 'error' | 'warning' | 'info';
 type ToastPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+type ToastState = 'enter' | 'leave';
 type Toast = {
     id: string;
     message: string;
     duration: number;
     type: ToastKind;
     position: ToastPosition;
+    state: ToastState;
 };
 declare enum ToastEmitterEvent {
-    QUEUE_LIMIT_CHANGE = "queue-limit-change",
+    TOASTS_LIMIT_CHANGE = "toasts-limit-change",
     TOASTS_CHANGE = "toasts-change"
 }
 
 declare class ToastEmitter extends EventTarget {
-    private _queueLimit;
+    private _toastsLimit;
     private _toasts;
     get toasts(): Toast[];
-    set queueLimit(value: string | number);
+    set toastsLimit(value: string | number);
     show(message: string, duration?: number, type?: ToastKind, position?: ToastPosition): void;
-    remove(t: Toast): void;
-    private emitQueueLimitChange;
+    remove(toast: Toast): void;
+    private emitToastsLimitChange;
     private emitToastsChange;
 }
 declare const toast: ToastEmitter;
 
 declare class ToasterElement extends LitElement {
-    set queueLimit(value: number | undefined);
-    get queueLimit(): number | undefined;
+    set toastsLimit(value: number | undefined);
+    get toastsLimit(): number | undefined;
     private _toastsList;
-    private _queueLimit?;
+    private _toastsLimit?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private get groupedToasts();
     render(): TemplateResult;
     private getToastIcon;
     private dismiss;
-    private onQueueLimitChange;
+    private onToastsLimitChange;
     private onToastsChange;
     static styles: lit.CSSResult;
 }
@@ -49,4 +51,4 @@ declare global {
 }
 
 export { ToastEmitterEvent, ToasterElement, toast };
-export type { Toast, ToastKind, ToastPosition };
+export type { Toast, ToastKind, ToastPosition, ToastState };

package/dist/lit-toaster.js

@@ -1,4 +1,4 @@
-/*! lit-toaster v0.1.2 Copyright (c) 2025 Bryson Ward and contributors MIT License*/
+/*! lit-toaster v0.2.1 Copyright (c) 2025 Bryson Ward and contributors MIT License*/
 import { css, LitElement, html } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
 
@@ -15,7 +15,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 var ToastEmitterEvent;
 (function (ToastEmitterEvent) {
-    ToastEmitterEvent["QUEUE_LIMIT_CHANGE"] = "queue-limit-change";
+    ToastEmitterEvent["TOASTS_LIMIT_CHANGE"] = "toasts-limit-change";
     ToastEmitterEvent["TOASTS_CHANGE"] = "toasts-change";
 })(ToastEmitterEvent || (ToastEmitterEvent = {}));
 
@@ -26,6 +26,7 @@ const TOAST_TYPES = [
     'warning',
     'info',
 ];
+const TOAST_ANIMATION_DURATION = 200;
 
 const GUID = (() => {
     let count = 0;
@@ -37,28 +38,28 @@ const GUID = (() => {
 class ToastEmitter extends EventTarget {
     constructor() {
         super(...arguments);
-        this._queueLimit = DEFAULT_TOASTS_LIMIT;
+        this._toastsLimit = DEFAULT_TOASTS_LIMIT;
         this._toasts = [];
     }
     get toasts() {
         return this._toasts;
     }
-    set queueLimit(value) {
-        let updatedQueueLimit = this._queueLimit;
+    set toastsLimit(value) {
+        let updatedToastsLimit = this._toastsLimit;
         if (typeof value === 'number') {
-            updatedQueueLimit = value;
+            updatedToastsLimit = value;
         }
         if (typeof value === 'string') {
             const valueToNum = Number(value);
             if (!isNaN(valueToNum)) {
-                updatedQueueLimit = valueToNum;
+                updatedToastsLimit = valueToNum;
             }
         }
-        this._queueLimit = Math.max(0, updatedQueueLimit);
-        this.emitQueueLimitChange();
+        this._toastsLimit = Math.max(0, updatedToastsLimit);
+        this.emitToastsLimitChange();
     }
     show(message, duration = 7000, type = 'success', position = 'top-center') {
-        if (this._queueLimit > 0 && this._toasts.length + 1 >= this._queueLimit) {
+        if (this._toastsLimit > 0 && this._toasts.length + 1 >= this._toastsLimit) {
             const existingWarningToast = this._toasts.find((t) => t.type === 'warning' &&
                 t.message.toLowerCase().includes('too many notifications'));
             if (!existingWarningToast) {
@@ -68,8 +69,9 @@ class ToastEmitter extends EventTarget {
                     duration,
                     type: 'warning',
                     position: 'bottom-center',
+                    state: 'enter',
                 };
-                this._toasts = [...this._toasts, warningToast];
+                this._toasts = [warningToast, ...this._toasts];
                 this.emitToastsChange();
                 setTimeout(() => this.remove(warningToast), duration);
             }
@@ -83,20 +85,28 @@ class ToastEmitter extends EventTarget {
             duration,
             type,
             position,
+            state: 'enter',
         };
-        this._toasts = [...this._toasts, newToast];
+        this._toasts = [newToast, ...this._toasts];
         this.emitToastsChange();
         if (duration > 0) {
             setTimeout(() => this.remove(newToast), duration);
         }
     }
-    remove(t) {
-        this._toasts = this._toasts.filter((item) => item !== t);
+    remove(toast) {
+        const index = this._toasts.indexOf(toast);
+        if (index === -1)
+            return;
+        this._toasts[index].state = 'leave';
         this.emitToastsChange();
-    }
-    emitQueueLimitChange() {
-        this.dispatchEvent(new CustomEvent(ToastEmitterEvent.QUEUE_LIMIT_CHANGE, {
-            detail: this._queueLimit,
+        setTimeout(() => {
+            this._toasts = this._toasts.filter((item) => item !== toast);
+            this.emitToastsChange();
+        }, TOAST_ANIMATION_DURATION);
+    }
+    emitToastsLimitChange() {
+        this.dispatchEvent(new CustomEvent(ToastEmitterEvent.TOASTS_LIMIT_CHANGE, {
+            detail: this._toastsLimit,
         }));
     }
     emitToastsChange() {
@@ -111,10 +121,10 @@ let ToasterElement = class ToasterElement extends LitElement {
     constructor() {
         super(...arguments);
         this._toastsList = [];
-        this.onQueueLimitChange = (event) => {
+        this.onToastsLimitChange = (event) => {
             if (event instanceof CustomEvent) {
-                if (event.detail !== undefined && this._queueLimit !== event.detail) {
-                    this._queueLimit = event.detail;
+                if (event.detail !== undefined && this._toastsLimit !== event.detail) {
+                    this._toastsLimit = event.detail;
                     this.requestUpdate();
                 }
             }
@@ -126,23 +136,23 @@ let ToasterElement = class ToasterElement extends LitElement {
             }
         };
     }
-    set queueLimit(value) {
-        this._queueLimit = value;
+    set toastsLimit(value) {
+        this._toastsLimit = value;
         if (value !== undefined) {
-            toast.queueLimit = value;
+            toast.toastsLimit = value;
         }
     }
-    get queueLimit() {
-        return this._queueLimit;
+    get toastsLimit() {
+        return this._toastsLimit;
     }
     connectedCallback() {
         super.connectedCallback();
-        toast.addEventListener(ToastEmitterEvent.QUEUE_LIMIT_CHANGE, this.onQueueLimitChange);
+        toast.addEventListener(ToastEmitterEvent.TOASTS_LIMIT_CHANGE, this.onToastsLimitChange);
         toast.addEventListener(ToastEmitterEvent.TOASTS_CHANGE, this.onToastsChange);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        toast.removeEventListener(ToastEmitterEvent.QUEUE_LIMIT_CHANGE, this.onQueueLimitChange);
+        toast.removeEventListener(ToastEmitterEvent.TOASTS_LIMIT_CHANGE, this.onToastsLimitChange);
         toast.removeEventListener(ToastEmitterEvent.TOASTS_CHANGE, this.onToastsChange);
     }
     get groupedToasts() {
@@ -167,7 +177,7 @@ let ToasterElement = class ToasterElement extends LitElement {
             ${toasts.map((toast) => html `
                 <div
                   id="toast-${toast.type}-${toast.id}"
-                  class="toast"
+                  class="toast ${toast.state}"
                   role="alert"
                 >
                   <div class="toast-${toast.type} toast-icon">
@@ -232,7 +242,7 @@ ToasterElement.styles = css `
         0 1px 3px #0000001a;
     }
 
-    /** Screen ready only */
+    /** Screen reader only */
     .sr-only {
       position: absolute;
       width: 1px;
@@ -345,6 +355,39 @@ ToasterElement.styles = css `
       flex-direction: column-reverse;
     }
 
+    .toast.enter {
+      animation: onToastEnter 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    .toast.leave {
+      animation: onToastLeave 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    @keyframes onToastEnter {
+      from {
+        opacity: 0;
+        transform: translateY(12px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes onToastLeave {
+      0% {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+      }
+      50% {
+        transform: translateY(4px) scaleY(0.95);
+      }
+      100% {
+        opacity: 0;
+        transform: translateY(24px) scaleY(0.8);
+      }
+    }
+
     /* Apply dark mode styles if user’s system or browser theme is set to 'dark' */
     @media (prefers-color-scheme: dark) {
       .toast {
@@ -355,13 +398,13 @@ ToasterElement.styles = css `
   `;
 __decorate([
     property({ type: Number, attribute: false })
-], ToasterElement.prototype, "queueLimit", null);
+], ToasterElement.prototype, "toastsLimit", null);
 __decorate([
     state()
 ], ToasterElement.prototype, "_toastsList", void 0);
 __decorate([
     state()
-], ToasterElement.prototype, "_queueLimit", void 0);
+], ToasterElement.prototype, "_toastsLimit", void 0);
 ToasterElement = __decorate([
     customElement('app-toaster')
 ], ToasterElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lit-toaster",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "engines": {
     "node": ">=20",
     "npm": ">=9.6.3",
@@ -61,13 +61,13 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@size-limit/file": "^11.2.0",
-    "@testing-library/jest-dom": "^6.7.0",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/eslint-plugin-security": "^3.0.0",
     "@types/jest": "^30.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "auto-changelog": "^2.5.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-prettier": "^5.5.4",
@@ -75,15 +75,15 @@
     "jsdom": "^26.1.0",
     "prettier": "^3.6.2",
     "release-it": "^19.0.4",
-    "rollup": "^4.46.2",
+    "rollup": "^4.50.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-delete": "^3.0.1",
-    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-dts": "^6.2.3",
     "size-limit": "^11.2.0",
-    "typedoc": "^0.28.10",
+    "typedoc": "^0.28.12",
     "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.1",
+    "typescript-eslint": "^8.43.0",
     "vitest": "^3.2.4"
   },
   "release-it": {