lit-toaster 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +9 -1
  2. package/dist/index.d.ts +5 -5
  3. package/dist/lit-toaster.js +49 -6
  4. package/package.json +8 -8
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <div align="center">
2
- <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"/>
2
+ <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"/>
3
3
  </div>
4
4
 
5
5
  <br />
@@ -15,6 +15,14 @@
15
15
  <div align="center">Simple, lightweight, and easy to integrate.</div>
16
16
  <br />
17
17
 
18
+ <div align="center">
19
+ <a href="https://lit-toaster.com/">Website</a>
20
+ <span> · </span>
21
+ <a href="https://github.com/brysonbw/lit-toaster/blob/main/docs/api-reference/README.md">Documentation</a>
22
+ <span> · </span>
23
+ <a href="https://www.npmjs.com/package/lit-toaster">NPM Package</a>
24
+ </div>
25
+
18
26
  ## Installation
19
27
 
20
28
  ```bash
package/dist/index.d.ts CHANGED
@@ -3,12 +3,14 @@ import { LitElement, TemplateResult } from 'lit';
3
3
 
4
4
  type ToastKind = 'success' | 'error' | 'warning' | 'info';
5
5
  type ToastPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
6
+ type ToastState = 'enter' | 'leave';
6
7
  type Toast = {
7
8
  id: string;
8
9
  message: string;
9
10
  duration: number;
10
11
  type: ToastKind;
11
12
  position: ToastPosition;
13
+ state: ToastState;
12
14
  };
13
15
  declare enum ToastEmitterEvent {
14
16
  QUEUE_LIMIT_CHANGE = "queue-limit-change",
@@ -21,7 +23,7 @@ declare class ToastEmitter extends EventTarget {
21
23
  get toasts(): Toast[];
22
24
  set queueLimit(value: string | number);
23
25
  show(message: string, duration?: number, type?: ToastKind, position?: ToastPosition): void;
24
- remove(t: Toast): void;
26
+ remove(toast: Toast): void;
25
27
  private emitQueueLimitChange;
26
28
  private emitToastsChange;
27
29
  }
@@ -48,7 +50,5 @@ declare global {
48
50
  }
49
51
  }
50
52
 
51
- declare const GUID: () => string;
52
-
53
- export { GUID, ToastEmitter, ToastEmitterEvent, ToasterElement, toast };
54
- export type { Toast, ToastKind, ToastPosition };
53
+ export { ToastEmitterEvent, ToasterElement, toast };
54
+ export type { Toast, ToastKind, ToastPosition, ToastState };
package/dist/lit-toaster.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! lit-toaster v0.1.1 Copyright (c) 2025 Bryson Ward and contributors MIT License*/
1
+ /*! lit-toaster v0.2.0 Copyright (c) 2025 Bryson Ward and contributors MIT License*/
2
2
  import { css, LitElement, html } from 'lit';
3
3
  import { property, state, customElement } from 'lit/decorators.js';
4
4
 
@@ -26,6 +26,7 @@ const TOAST_TYPES = [
26
26
  'warning',
27
27
  'info',
28
28
  ];
29
+ const TOAST_ANIMATION_DURATION = 200;
29
30
 
30
31
  const GUID = (() => {
31
32
  let count = 0;
@@ -68,6 +69,7 @@ class ToastEmitter extends EventTarget {
68
69
  duration,
69
70
  type: 'warning',
70
71
  position: 'bottom-center',
72
+ state: 'enter',
71
73
  };
72
74
  this._toasts = [...this._toasts, warningToast];
73
75
  this.emitToastsChange();
@@ -83,16 +85,24 @@ class ToastEmitter extends EventTarget {
83
85
  duration,
84
86
  type,
85
87
  position,
88
+ state: 'enter',
86
89
  };
87
- this._toasts = [...this._toasts, newToast];
90
+ this._toasts = [newToast, ...this._toasts];
88
91
  this.emitToastsChange();
89
92
  if (duration > 0) {
90
93
  setTimeout(() => this.remove(newToast), duration);
91
94
  }
92
95
  }
93
- remove(t) {
94
- this._toasts = this._toasts.filter((item) => item !== t);
96
+ remove(toast) {
97
+ const index = this._toasts.indexOf(toast);
98
+ if (index === -1)
99
+ return;
100
+ this._toasts[index].state = 'leave';
95
101
  this.emitToastsChange();
102
+ setTimeout(() => {
103
+ this._toasts = this._toasts.filter((item) => item !== toast);
104
+ this.emitToastsChange();
105
+ }, TOAST_ANIMATION_DURATION);
96
106
  }
97
107
  emitQueueLimitChange() {
98
108
  this.dispatchEvent(new CustomEvent(ToastEmitterEvent.QUEUE_LIMIT_CHANGE, {
@@ -167,7 +177,7 @@ let ToasterElement = class ToasterElement extends LitElement {
167
177
  ${toasts.map((toast) => html `
168
178
  <div
169
179
  id="toast-${toast.type}-${toast.id}"
170
- class="toast"
180
+ class="toast ${toast.state}"
171
181
  role="alert"
172
182
  >
173
183
  <div class="toast-${toast.type} toast-icon">
@@ -232,7 +242,7 @@ ToasterElement.styles = css `
232
242
  0 1px 3px #0000001a;
233
243
  }
234
244
 
235
- /** Screen ready only */
245
+ /** Screen reader only */
236
246
  .sr-only {
237
247
  position: absolute;
238
248
  width: 1px;
@@ -345,6 +355,39 @@ ToasterElement.styles = css `
345
355
  flex-direction: column-reverse;
346
356
  }
347
357
 
358
+ .toast.enter {
359
+ animation: onToastEnter 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
360
+ }
361
+
362
+ .toast.leave {
363
+ animation: onToastLeave 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
364
+ }
365
+
366
+ @keyframes onToastEnter {
367
+ from {
368
+ opacity: 0;
369
+ transform: translateY(12px);
370
+ }
371
+ to {
372
+ opacity: 1;
373
+ transform: translateY(0);
374
+ }
375
+ }
376
+
377
+ @keyframes onToastLeave {
378
+ 0% {
379
+ opacity: 1;
380
+ transform: translateY(0) scaleY(1);
381
+ }
382
+ 50% {
383
+ transform: translateY(4px) scaleY(0.95);
384
+ }
385
+ 100% {
386
+ opacity: 0;
387
+ transform: translateY(24px) scaleY(0.8);
388
+ }
389
+ }
390
+
348
391
  /* Apply dark mode styles if user’s system or browser theme is set to 'dark' */
349
392
  @media (prefers-color-scheme: dark) {
350
393
  .toast {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lit-toaster",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "engines": {
5
5
  "node": ">=20",
6
6
  "npm": ">=9.6.3",
@@ -47,7 +47,7 @@
47
47
  "bugs": {
48
48
  "url": "https://github.com/brysonbw/lit-toaster/issues"
49
49
  },
50
- "homepage": "https://github.com/brysonbw/lit-toaster",
50
+ "homepage": "https://lit-toaster.com/",
51
51
  "contributors": [
52
52
  "Bryson Ward (https://github.com/brysonbw)"
53
53
  ],
@@ -61,13 +61,13 @@
61
61
  "@rollup/plugin-node-resolve": "^16.0.1",
62
62
  "@rollup/plugin-typescript": "^12.1.4",
63
63
  "@size-limit/file": "^11.2.0",
64
- "@testing-library/jest-dom": "^6.7.0",
64
+ "@testing-library/jest-dom": "^6.8.0",
65
65
  "@testing-library/user-event": "^14.6.1",
66
66
  "@types/eslint-plugin-security": "^3.0.0",
67
67
  "@types/jest": "^30.0.0",
68
68
  "@vitest/coverage-v8": "^3.2.4",
69
69
  "auto-changelog": "^2.5.0",
70
- "eslint": "^9.33.0",
70
+ "eslint": "^9.35.0",
71
71
  "eslint-config-prettier": "^10.1.8",
72
72
  "eslint-plugin-lit": "^2.1.1",
73
73
  "eslint-plugin-prettier": "^5.5.4",
@@ -75,15 +75,15 @@
75
75
  "jsdom": "^26.1.0",
76
76
  "prettier": "^3.6.2",
77
77
  "release-it": "^19.0.4",
78
- "rollup": "^4.46.2",
78
+ "rollup": "^4.50.1",
79
79
  "rollup-plugin-cleanup": "^3.2.1",
80
80
  "rollup-plugin-delete": "^3.0.1",
81
- "rollup-plugin-dts": "^6.2.1",
81
+ "rollup-plugin-dts": "^6.2.3",
82
82
  "size-limit": "^11.2.0",
83
- "typedoc": "^0.28.10",
83
+ "typedoc": "^0.28.12",
84
84
  "typedoc-plugin-markdown": "^4.8.1",
85
85
  "typescript": "^5.9.2",
86
- "typescript-eslint": "^8.39.1",
86
+ "typescript-eslint": "^8.43.0",
87
87
  "vitest": "^3.2.4"
88
88
  },
89
89
  "release-it": {