@mhmo91/schmancy 0.4.53 → 0.4.54

package/dist/{notification-service-L_h9_d4v.js → notification-service-Rkjxrnsh.js}

@@ -1,20 +1,21 @@
-import { fromEvent as C, takeUntil as V } from "rxjs";
-import { classMap as A } from "lit/directives/class-map.js";
-import { styleMap as w } from "lit/directives/style-map.js";
-import { $ as _ } from "./litElement.mixin-BH9PTyUD.js";
-import "./tailwind.mixin-CaIkmP6j.js";
-import { property as h, state as g, customElement as S } from "lit/decorators.js";
-import { c as T } from "./ripple-BumgqsDT.js";
+import { fromEvent as x, takeUntil as T } from "rxjs";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { styleMap as A } from "lit/directives/style-map.js";
+import { $ as S } from "./litElement.mixin-sRUdAQbg.js";
+import "./tailwind.mixin-tQQ1rtff.js";
+import { property as h, state as g, customElement as C } from "lit/decorators.js";
+import { c as V } from "./ripple-BumgqsDT.js";
 import { S as l } from "./theme.interface-C5Kj6WjD.js";
 import { html as p } from "lit";
+import "./progress-jqQTk6Au.js";
 import { repeat as k } from "lit/directives/repeat.js";
-var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, d = (s, t, e, i) => {
-  for (var o, n = i > 1 ? void 0 : i ? R(t, e) : t, r = s.length - 1; r >= 0; r--) (o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
+var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, d = (o, t, e, i) => {
+  for (var s, n = i > 1 ? void 0 : i ? R(t, e) : t, r = o.length - 1; r >= 0; r--) (s = o[r]) && (n = (i ? s(t, e, n) : s(n)) || n);
   return i && n && $(t, e, n), n;
 };
-let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child{margin-bottom:0}.notification{width:100%;max-width:400px;box-shadow:var(--schmancy-sys-elevation-2);overflow:hidden;transform:translate(0);opacity:1;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);background-color:var(--schmancy-sys-color-surface-container);color:var(--schmancy-sys-color-surface-on);border-radius:16px;position:relative}.notification:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff14,#fff0);z-index:1}.notification.info{border-left:4px solid var(--schmancy-sys-color-primary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-primary-container) 10%)}.notification.success{border-left:4px solid var(--schmancy-sys-color-success-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-success-container) 10%)}.notification.warning{border-left:4px solid var(--schmancy-sys-color-tertiary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-tertiary-container) 10%)}.notification.error{border-left:4px solid var(--schmancy-sys-color-error-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-error-container) 10%)}.notification.closing{transform:translate(120%);opacity:0}.notification .notification-content{display:flex;padding:18px 20px;align-items:flex-start;position:relative;z-index:2}.notification .icon-container{flex-shrink:0;margin-right:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;width:28px;height:28px;position:relative}.notification .content{flex:1;min-width:0;display:flex;flex-direction:column}.notification .title{font-weight:500;font-size:16px;line-height:1.5;margin-bottom:2px;word-break:break-word;letter-spacing:.15px}.notification .message{font-size:14px;line-height:1.5;word-break:break-word;letter-spacing:.25px;opacity:.92}.notification .close-button{background:transparent;border:none;cursor:pointer;color:var(--schmancy-sys-color-surface-onVariant);padding:8px;margin-left:8px;margin-right:-4px;margin-top:-4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.notification .close-button:hover{background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-onVariant) 8%,transparent);transform:scale(1.05)}.notification .close-button:active{transform:scale(.95)}.notification .close-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--schmancy-sys-color-primary-default)}.notification .progress-bar-container{height:4px;width:100%;background-color:color-mix(in srgb,currentColor 8%,transparent);overflow:hidden;position:relative;z-index:2}.notification .progress-bar{height:100%;width:100%;transition:width .1s linear;border-radius:0 0 0 4px;background-image:linear-gradient(to right,currentColor 70%,color-mix(in srgb,currentColor 80%,white) 100%);opacity:.9}') {
+let u = class extends S(':host{display:block;margin-bottom:10px}:host:last-child{margin-bottom:0}.notification{width:100%;max-width:400px;box-shadow:var(--schmancy-sys-elevation-2);overflow:hidden;transform:translate(0);opacity:1;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);background-color:var(--schmancy-sys-color-surface-container);color:var(--schmancy-sys-color-surface-on);border-radius:16px;position:relative}.notification:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff14,#fff0);z-index:1}.notification.info{border-left:4px solid var(--schmancy-sys-color-primary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-primary-container) 10%)}.notification.success{border-left:4px solid var(--schmancy-sys-color-success-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-success-container) 10%)}.notification.warning{border-left:4px solid var(--schmancy-sys-color-tertiary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-tertiary-container) 10%)}.notification.error{border-left:4px solid var(--schmancy-sys-color-error-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-error-container) 10%)}.notification.closing{transform:translate(120%);opacity:0}.notification .notification-content{display:flex;padding:18px 20px;align-items:flex-start;position:relative;z-index:2}.notification .icon-container{flex-shrink:0;margin-right:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;width:28px;height:28px;position:relative}.notification .content{flex:1;min-width:0;display:flex;flex-direction:column}.notification .title{font-weight:500;font-size:16px;line-height:1.5;margin-bottom:2px;word-break:break-word;letter-spacing:.15px}.notification .message{font-size:14px;line-height:1.5;word-break:break-word;letter-spacing:.25px;opacity:.92}.notification .close-button{background:transparent;border:none;cursor:pointer;color:var(--schmancy-sys-color-surface-onVariant);padding:8px;margin-left:8px;margin-right:-4px;margin-top:-4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.notification .close-button:hover{background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-onVariant) 8%,transparent);transform:scale(1.05)}.notification .close-button:active{transform:scale(.95)}.notification .close-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--schmancy-sys-color-primary-default)}') {
   constructor() {
-    super(...arguments), this.title = "", this.message = "", this.type = "info", this.closable = !0, this.duration = 5e3, this.id = `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, this.playSound = !0, this._visible = !0, this._progress = 100, this._hovered = !1, this._closing = !1;
+    super(...arguments), this.title = "", this.message = "", this.type = "info", this.closable = !0, this.duration = 5e3, this.id = `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, this.playSound = !0, this.showProgress = !1, this._visible = !0, this._progress = 100, this._hovered = !1, this._closing = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.duration > 0 && this._startAutoCloseTimer(), this.playSound && this._playSound();
@@ -22,17 +23,17 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
   disconnectedCallback() {
     this._clearTimers(), super.disconnectedCallback();
   }
-  updated(s) {
-    super.updated(s), s.has("duration") && this.duration > 0 && (this._clearTimers(), this._startAutoCloseTimer());
+  updated(o) {
+    super.updated(o), o.has("duration") && this.duration > 0 && (this._clearTimers(), this._startAutoCloseTimer());
   }
   _startAutoCloseTimer() {
     if (this.duration <= 0) return;
-    const s = Date.now() + this.duration;
+    const o = Date.now() + this.duration;
     this._autoCloseTimer = window.setTimeout(() => {
       this.close();
     }, this.duration), this._progressTimer = window.setInterval(() => {
       if (this._hovered) return;
-      const t = Date.now(), e = Math.max(0, s - t);
+      const t = Date.now(), e = Math.max(0, o - t);
       this._progress = e / this.duration * 100, e <= 0 && this._clearTimers();
     }, 16);
   }
@@ -44,16 +45,16 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
   }
   _resumeTimers() {
     if (this.duration > 0) {
-      const s = this._progress / 100 * this.duration;
-      if (s > 0) {
+      const o = this._progress / 100 * this.duration;
+      if (o > 0) {
         this._autoCloseTimer = window.setTimeout(() => {
           this.close();
-        }, s);
-        const t = Date.now() + s;
+        }, o);
+        const t = Date.now() + o;
         this._progressTimer = window.setInterval(() => {
           if (this._hovered) return;
           const e = Date.now(), i = Math.max(0, t - e);
-          this._progress = i / s * 100, i <= 0 && this._clearTimers();
+          this._progress = i / o * 100, i <= 0 && this._clearTimers();
         }, 16);
       }
     }
@@ -74,28 +75,28 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
   }
   render() {
     if (!this._visible && this._closing) return p``;
-    const s = this._getTypeStyles(), t = this._hovered ? "3" : "2";
+    const o = this._getTypeStyles(), t = this._hovered ? "3" : "2";
     return p`
 			<div
-				class=${A({ notification: !0, closing: this._closing, [this.type]: !0 })}
+				class=${_({ notification: !0, closing: this._closing, [this.type]: !0 })}
 				role="alert"
-				style=${w({ transform: this._closing ? "translateX(120%)" : "translateX(0)", opacity: this._closing ? "0" : "1", boxShadow: `var(--schmancy-sys-elevation-${t})`, transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease" })}
+				style=${A({ transform: this._closing ? "translateX(120%)" : "translateX(0)", opacity: this._closing ? "0" : "1", boxShadow: `var(--schmancy-sys-elevation-${t})`, transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease" })}
 				@mouseenter=${this._handleMouseEnter}
 				@mouseleave=${this._handleMouseLeave}
 			>
 				<div class="notification-content">
 					<div
 						class="icon-container"
-						${T({ color: s.iconColor, bgColor: `color-mix(in srgb, ${s.iconColor} 10%, transparent)` })}
+						${V({ color: o.iconColor, bgColor: `color-mix(in srgb, ${o.iconColor} 10%, transparent)` })}
 					>
-						${s.icon}
+						${o.icon}
 					</div>
 
 					<div class="content">
 						${this.title ? p`
 									<div
 										class="title"
-										style=${w({ color: this.type === "info" ? `color-mix(in srgb, ${l.sys.color.primary.default} 90%, ${l.sys.color.surface.on} 10%)` : this.type === "success" ? `color-mix(in srgb, ${l.sys.color.success.default} 90%, ${l.sys.color.surface.on} 10%)` : this.type === "warning" ? `color-mix(in srgb, ${l.sys.color.tertiary.default} 90%, ${l.sys.color.surface.on} 10%)` : `color-mix(in srgb, ${l.sys.color.error.default} 90%, ${l.sys.color.surface.on} 10%)` })}
+										style=${A({ color: this.type === "info" ? `color-mix(in srgb, ${l.sys.color.primary.default} 90%, ${l.sys.color.surface.on} 10%)` : this.type === "success" ? `color-mix(in srgb, ${l.sys.color.success.default} 90%, ${l.sys.color.surface.on} 10%)` : this.type === "warning" ? `color-mix(in srgb, ${l.sys.color.tertiary.default} 90%, ${l.sys.color.surface.on} 10%)` : `color-mix(in srgb, ${l.sys.color.error.default} 90%, ${l.sys.color.surface.on} 10%)` })}
 									>
 										${this.title}
 									</div>
@@ -109,7 +110,7 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
 									class="close-button"
 									aria-label="Close notification"
 									@click=${this.close}
-									style=${w({ color: this.type === "info" ? l.sys.color.surface.onVariant : `color-mix(in srgb, ${s.iconColor} 80%, ${l.sys.color.surface.onVariant} 20%)` })}
+									style=${A({ color: this.type === "info" ? l.sys.color.surface.onVariant : `color-mix(in srgb, ${o.iconColor} 80%, ${l.sys.color.surface.onVariant} 20%)` })}
 								>
 									<svg
 										width="18"
@@ -128,14 +129,15 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
 							` : ""}
 				</div>
 
-				${this.duration > 0 ? p`
-							<div class="progress-bar-container">
-								<div
-									class="progress-bar"
-									style="width: ${this._progress}%"
-									${T({ color: s.progressColor })}
-								></div>
-							</div>
+				${this.showProgress || this.duration > 0 ? p`
+							<schmancy-progress
+								style="position: absolute; bottom: 0; left: 0; right: 0; width: 100%;"
+								size="sm"
+								.color=${this.type === "error" ? "error" : this.type === "success" ? "success" : "primary"}
+								?indeterminate=${this.showProgress}
+								.value=${this.showProgress ? 0 : this._progress}
+								.max=${100}
+							></schmancy-progress>
 						` : ""}
 			</div>
 		`;
@@ -212,7 +214,7 @@ let u = class extends _(':host{display:block;margin-bottom:10px}:host:last-child
     }
   }
 };
-d([h({ type: String })], u.prototype, "title", 2), d([h({ type: String })], u.prototype, "message", 2), d([h({ type: String })], u.prototype, "type", 2), d([h({ type: Boolean })], u.prototype, "closable", 2), d([h({ type: Number })], u.prototype, "duration", 2), d([h({ type: String })], u.prototype, "id", 2), d([h({ type: Boolean })], u.prototype, "playSound", 2), d([g()], u.prototype, "_visible", 2), d([g()], u.prototype, "_progress", 2), d([g()], u.prototype, "_hovered", 2), d([g()], u.prototype, "_closing", 2), d([g()], u.prototype, "_autoCloseTimer", 2), d([g()], u.prototype, "_progressTimer", 2), u = d([S("sch-notification")], u);
+d([h({ type: String })], u.prototype, "title", 2), d([h({ type: String })], u.prototype, "message", 2), d([h({ type: String })], u.prototype, "type", 2), d([h({ type: Boolean })], u.prototype, "closable", 2), d([h({ type: Number })], u.prototype, "duration", 2), d([h({ type: String })], u.prototype, "id", 2), d([h({ type: Boolean })], u.prototype, "playSound", 2), d([h({ type: Boolean })], u.prototype, "showProgress", 2), d([g()], u.prototype, "_visible", 2), d([g()], u.prototype, "_progress", 2), d([g()], u.prototype, "_hovered", 2), d([g()], u.prototype, "_closing", 2), d([g()], u.prototype, "_autoCloseTimer", 2), d([g()], u.prototype, "_progressTimer", 2), u = d([C("sch-notification")], u);
 class O {
   constructor() {
     this.audioContext = null;
@@ -225,79 +227,79 @@ class O {
     return this.audioContext;
   }
   playInfoSound(t = 0.2) {
-    const e = this.getAudioContext(), i = e.currentTime, o = e.createOscillator(), n = e.createGain(), r = e.createBiquadFilter();
-    o.type = "sine", o.frequency.setValueAtTime(392, i), o.frequency.exponentialRampToValueAtTime(523.25, i + 0.25), r.type = "lowpass", r.frequency.value = 1500, n.gain.setValueAtTime(1e-4, i), n.gain.exponentialRampToValueAtTime(t, i + 0.15), n.gain.exponentialRampToValueAtTime(1e-4, i + 0.4), o.connect(r).connect(n).connect(e.destination), o.start(i), o.stop(i + 0.45);
+    const e = this.getAudioContext(), i = e.currentTime, s = e.createOscillator(), n = e.createGain(), r = e.createBiquadFilter();
+    s.type = "sine", s.frequency.setValueAtTime(392, i), s.frequency.exponentialRampToValueAtTime(523.25, i + 0.25), r.type = "lowpass", r.frequency.value = 1500, n.gain.setValueAtTime(1e-4, i), n.gain.exponentialRampToValueAtTime(t, i + 0.15), n.gain.exponentialRampToValueAtTime(1e-4, i + 0.4), s.connect(r).connect(n).connect(e.destination), s.start(i), s.stop(i + 0.45);
   }
   playSuccessSound(t = 0.2) {
-    const e = this.getAudioContext(), i = e.currentTime, o = (n, r, a) => {
-      const c = e.createOscillator(), x = e.createGain(), v = e.createBiquadFilter();
-      c.type = "sine", c.frequency.setValueAtTime(n, i), v.type = "lowpass", v.frequency.value = 4 * n, x.gain.setValueAtTime(1e-4, i), x.gain.exponentialRampToValueAtTime(t, i + 0.1), x.gain.exponentialRampToValueAtTime(1e-4, i + a), c.connect(v).connect(x).connect(e.destination), c.start(i + r), c.stop(i + a);
+    const e = this.getAudioContext(), i = e.currentTime, s = (n, r, a) => {
+      const c = e.createOscillator(), w = e.createGain(), v = e.createBiquadFilter();
+      c.type = "sine", c.frequency.setValueAtTime(n, i), v.type = "lowpass", v.frequency.value = 4 * n, w.gain.setValueAtTime(1e-4, i), w.gain.exponentialRampToValueAtTime(t, i + 0.1), w.gain.exponentialRampToValueAtTime(1e-4, i + a), c.connect(v).connect(w).connect(e.destination), c.start(i + r), c.stop(i + a);
     };
-    o(659.25, 0, 0.6), o(523.25, 0.05, 0.55);
+    s(659.25, 0, 0.6), s(523.25, 0.05, 0.55);
   }
   playWarningSound(t = 0.25) {
-    const e = this.getAudioContext(), i = e.currentTime, o = e.createOscillator(), n = e.createOscillator(), r = e.createGain(), a = e.createBiquadFilter();
-    o.type = "sine", n.type = "sine", o.frequency.setValueAtTime(349.23, i), n.frequency.setValueAtTime(440, i), a.type = "lowpass", a.frequency.value = 1e3, r.gain.setValueAtTime(1e-4, i), r.gain.exponentialRampToValueAtTime(t, i + 0.08), r.gain.exponentialRampToValueAtTime(1e-4, i + 0.5), o.connect(a), n.connect(a), a.connect(r).connect(e.destination), o.start(i), n.start(i), o.stop(i + 0.55), n.stop(i + 0.55);
+    const e = this.getAudioContext(), i = e.currentTime, s = e.createOscillator(), n = e.createOscillator(), r = e.createGain(), a = e.createBiquadFilter();
+    s.type = "sine", n.type = "sine", s.frequency.setValueAtTime(349.23, i), n.frequency.setValueAtTime(440, i), a.type = "lowpass", a.frequency.value = 1e3, r.gain.setValueAtTime(1e-4, i), r.gain.exponentialRampToValueAtTime(t, i + 0.08), r.gain.exponentialRampToValueAtTime(1e-4, i + 0.5), s.connect(a), n.connect(a), a.connect(r).connect(e.destination), s.start(i), n.start(i), s.stop(i + 0.55), n.stop(i + 0.55);
   }
   playErrorSound(t = 0.25) {
-    const e = this.getAudioContext(), i = e.currentTime, o = e.createOscillator(), n = e.createGain(), r = e.createBiquadFilter();
-    o.type = "triangle", o.frequency.setValueAtTime(220, i), o.frequency.exponentialRampToValueAtTime(1760, i + 0.3), r.type = "lowpass", r.frequency.value = 800, r.Q.value = 0.5, n.gain.setValueAtTime(1e-4, i), n.gain.exponentialRampToValueAtTime(0.8 * t, i + 0.1), n.gain.exponentialRampToValueAtTime(1e-4, i + 0.7), o.connect(r).connect(n).connect(e.destination), o.start(i), o.stop(i + 0.75);
+    const e = this.getAudioContext(), i = e.currentTime, s = e.createOscillator(), n = e.createGain(), r = e.createBiquadFilter();
+    s.type = "triangle", s.frequency.setValueAtTime(220, i), s.frequency.exponentialRampToValueAtTime(1760, i + 0.3), r.type = "lowpass", r.frequency.value = 800, r.Q.value = 0.5, n.gain.setValueAtTime(1e-4, i), n.gain.exponentialRampToValueAtTime(0.8 * t, i + 0.1), n.gain.exponentialRampToValueAtTime(1e-4, i + 0.7), s.connect(r).connect(n).connect(e.destination), s.start(i), s.stop(i + 0.75);
   }
   async generateAudioFiles(t = 0.25) {
     const i = {};
-    return i.info = await this.generateAudioFile(async (o) => {
-      const n = o.createOscillator();
+    return i.info = await this.generateAudioFile(async (s) => {
+      const n = s.createOscillator();
       n.type = "sine", n.frequency.setValueAtTime(320, 0), n.frequency.exponentialRampToValueAtTime(520, 0.3);
-      const r = o.createGain();
-      r.gain.setValueAtTime(0, 0), r.gain.linearRampToValueAtTime(t, 0.1), r.gain.linearRampToValueAtTime(0, 0.5), n.connect(r), r.connect(o.destination), n.start(), n.stop(0.5);
-    }, 44100, 1), i.success = await this.generateAudioFile(async (o) => {
-      const n = o.createOscillator();
+      const r = s.createGain();
+      r.gain.setValueAtTime(0, 0), r.gain.linearRampToValueAtTime(t, 0.1), r.gain.linearRampToValueAtTime(0, 0.5), n.connect(r), r.connect(s.destination), n.start(), n.stop(0.5);
+    }, 44100, 1), i.success = await this.generateAudioFile(async (s) => {
+      const n = s.createOscillator();
       n.type = "sine", n.frequency.setValueAtTime(660, 0);
-      const r = o.createOscillator();
+      const r = s.createOscillator();
       r.type = "sine", r.frequency.setValueAtTime(440, 0);
-      const a = o.createGain();
+      const a = s.createGain();
       a.gain.setValueAtTime(0, 0), a.gain.linearRampToValueAtTime(t, 0.1), a.gain.linearRampToValueAtTime(0, 0.5);
-      const c = o.createGain();
-      c.gain.setValueAtTime(0, 0), c.gain.linearRampToValueAtTime(0.6 * t, 0.15), c.gain.linearRampToValueAtTime(0, 0.7), n.connect(a), a.connect(o.destination), r.connect(c), c.connect(o.destination), n.start(), r.start(0.15), n.stop(0.5), r.stop(0.7);
-    }, 44100, 1), i.warning = await this.generateAudioFile(async (o) => {
-      const n = o.createOscillator();
+      const c = s.createGain();
+      c.gain.setValueAtTime(0, 0), c.gain.linearRampToValueAtTime(0.6 * t, 0.15), c.gain.linearRampToValueAtTime(0, 0.7), n.connect(a), a.connect(s.destination), r.connect(c), c.connect(s.destination), n.start(), r.start(0.15), n.stop(0.5), r.stop(0.7);
+    }, 44100, 1), i.warning = await this.generateAudioFile(async (s) => {
+      const n = s.createOscillator();
       n.type = "sine", n.frequency.setValueAtTime(293.66, 0);
-      const r = o.createOscillator();
+      const r = s.createOscillator();
       r.type = "sine", r.frequency.setValueAtTime(349.23, 0);
-      const a = o.createGain();
-      a.gain.setValueAtTime(0, 0), a.gain.linearRampToValueAtTime(t, 0.1), a.gain.linearRampToValueAtTime(0.6 * t, 0.2), a.gain.linearRampToValueAtTime(0.8 * t, 0.3), a.gain.linearRampToValueAtTime(0, 0.6), n.connect(a), r.connect(a), a.connect(o.destination), n.start(), r.start(), n.stop(0.6), r.stop(0.6);
-    }, 44100, 1), i.error = await this.generateAudioFile(async (o) => {
-      const n = o.createOscillator();
+      const a = s.createGain();
+      a.gain.setValueAtTime(0, 0), a.gain.linearRampToValueAtTime(t, 0.1), a.gain.linearRampToValueAtTime(0.6 * t, 0.2), a.gain.linearRampToValueAtTime(0.8 * t, 0.3), a.gain.linearRampToValueAtTime(0, 0.6), n.connect(a), r.connect(a), a.connect(s.destination), n.start(), r.start(), n.stop(0.6), r.stop(0.6);
+    }, 44100, 1), i.error = await this.generateAudioFile(async (s) => {
+      const n = s.createOscillator();
       n.type = "sine", n.frequency.setValueAtTime(196, 0);
-      const r = o.createGain();
+      const r = s.createGain();
       r.gain.setValueAtTime(0, 0), r.gain.linearRampToValueAtTime(t, 0.1), r.gain.linearRampToValueAtTime(0.4 * t, 0.2), r.gain.linearRampToValueAtTime(0.6 * t, 0.3), r.gain.linearRampToValueAtTime(0, 0.7);
-      const a = o.createBiquadFilter();
-      a.type = "lowpass", a.frequency.value = 600, a.Q.value = 0.7, n.connect(a), a.connect(r), r.connect(o.destination), n.start(), n.stop(0.7);
+      const a = s.createBiquadFilter();
+      a.type = "lowpass", a.frequency.value = 600, a.Q.value = 0.7, n.connect(a), a.connect(r), r.connect(s.destination), n.start(), n.stop(0.7);
     }, 44100, 1), i;
   }
   async generateAudioFile(t, e = 44100, i = 1) {
-    const o = new OfflineAudioContext(2, e * i, e);
-    await t(o);
-    const n = await o.startRendering(), r = this.audioBufferToWav(n);
+    const s = new OfflineAudioContext(2, e * i, e);
+    await t(s);
+    const n = await s.startRendering(), r = this.audioBufferToWav(n);
     return URL.createObjectURL(r);
   }
   audioBufferToWav(t) {
-    const e = t.numberOfChannels, i = t.sampleRate, o = 2 * e, n = this.getAudioSamples(t, 16), r = 2 * n.length, a = new ArrayBuffer(44 + r), c = new DataView(a);
-    return this.writeString(c, 0, "RIFF"), c.setUint32(4, 36 + r, !0), this.writeString(c, 8, "WAVE"), this.writeString(c, 12, "fmt "), c.setUint32(16, 16, !0), c.setUint16(20, 1, !0), c.setUint16(22, e, !0), c.setUint32(24, i, !0), c.setUint32(28, i * o, !0), c.setUint16(32, o, !0), c.setUint16(34, 16, !0), this.writeString(c, 36, "data"), c.setUint32(40, r, !0), this.writeInt16Samples(c, 44, n), new Blob([a], { type: "audio/wav" });
+    const e = t.numberOfChannels, i = t.sampleRate, s = 2 * e, n = this.getAudioSamples(t, 16), r = 2 * n.length, a = new ArrayBuffer(44 + r), c = new DataView(a);
+    return this.writeString(c, 0, "RIFF"), c.setUint32(4, 36 + r, !0), this.writeString(c, 8, "WAVE"), this.writeString(c, 12, "fmt "), c.setUint32(16, 16, !0), c.setUint16(20, 1, !0), c.setUint16(22, e, !0), c.setUint32(24, i, !0), c.setUint32(28, i * s, !0), c.setUint16(32, s, !0), c.setUint16(34, 16, !0), this.writeString(c, 36, "data"), c.setUint32(40, r, !0), this.writeInt16Samples(c, 44, n), new Blob([a], { type: "audio/wav" });
   }
   getAudioSamples(t, e) {
-    const i = t.numberOfChannels, o = t.length, n = [], r = e === 16 ? 32768 : 128;
-    for (let a = 0; a < o; a++) for (let c = 0; c < i; c++) {
-      const x = t.getChannelData(c)[a], v = Math.max(-1, Math.min(1, x));
+    const i = t.numberOfChannels, s = t.length, n = [], r = e === 16 ? 32768 : 128;
+    for (let a = 0; a < s; a++) for (let c = 0; c < i; c++) {
+      const w = t.getChannelData(c)[a], v = Math.max(-1, Math.min(1, w));
       n.push(v * r);
     }
     return n;
   }
   writeInt16Samples(t, e, i) {
-    for (let o = 0; o < i.length; o++) t.setInt16(e + 2 * o, i[o], !0);
+    for (let s = 0; s < i.length; s++) t.setInt16(e + 2 * s, i[s], !0);
   }
   writeString(t, e, i) {
-    for (let o = 0; o < i.length; o++) t.setUint8(e + o, i.charCodeAt(o));
+    for (let s = 0; s < i.length; s++) t.setUint8(e + s, i.charCodeAt(s));
   }
 }
 class B {
@@ -333,8 +335,8 @@ class B {
   async loadSound(t) {
     const e = this.soundUrls[t], i = await fetch(e);
     if (!i.ok) throw new Error(`Failed to load sound from ${e}: ${i.statusText}`);
-    const o = await i.arrayBuffer();
-    return await this.getAudioContext().decodeAudioData(o);
+    const s = await i.arrayBuffer();
+    return await this.getAudioContext().decodeAudioData(s);
   }
   async playSound(t) {
     if (!this.muted) try {
@@ -348,10 +350,10 @@ class B {
       }
       const i = this.soundBuffers.get(t);
       if (!i) throw new Error(`Sound buffer for ${t} not available`);
-      const o = e.createBufferSource();
-      o.buffer = i;
+      const s = e.createBufferSource();
+      s.buffer = i;
       const n = e.createGain();
-      n.gain.value = this.volume, o.connect(n), n.connect(e.destination), o.start(0);
+      n.gain.value = this.volume, s.connect(n), n.connect(e.destination), s.start(0);
     } catch {
       this.playDirectGeneratedSound(t);
     }
@@ -408,46 +410,55 @@ class B {
     return this.soundUrls[t];
   }
 }
-var U = Object.defineProperty, q = Object.getOwnPropertyDescriptor, b = (s, t, e, i) => {
-  for (var o, n = i > 1 ? void 0 : i ? q(t, e) : t, r = s.length - 1; r >= 0; r--) (o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
+var U = Object.defineProperty, q = Object.getOwnPropertyDescriptor, b = (o, t, e, i) => {
+  for (var s, n = i > 1 ? void 0 : i ? q(t, e) : t, r = o.length - 1; r >= 0; r--) (s = o[r]) && (n = (i ? s(t, e, n) : s(n)) || n);
   return i && n && U(t, e, n), n;
 };
-let f = class extends _(":host{display:block}.notification-container{position:fixed;z-index:9999;padding:12px;pointer-events:none;width:100%;max-width:424px}.notification-container sch-notification{pointer-events:auto}.notification-container.top-right{top:0;right:0;display:flex;flex-direction:column-reverse}.notification-container.top-left{top:0;left:0;display:flex;flex-direction:column-reverse}.notification-container.bottom-right{bottom:0;right:0;display:flex;flex-direction:column}.notification-container.bottom-left{bottom:0;left:0;display:flex;flex-direction:column}.notification-container.top-center{top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column-reverse}.notification-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column}") {
+let y = class extends S(":host{display:block}.notification-container{position:fixed;z-index:9999;padding:12px;pointer-events:none;width:100%;max-width:424px}.notification-container sch-notification{pointer-events:auto}.notification-container.top-right{top:0;right:0;display:flex;flex-direction:column-reverse}.notification-container.top-left{top:0;left:0;display:flex;flex-direction:column-reverse}.notification-container.bottom-right{bottom:0;right:0;display:flex;flex-direction:column}.notification-container.bottom-left{bottom:0;left:0;display:flex;flex-direction:column}.notification-container.top-center{top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column-reverse}.notification-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column}") {
   constructor() {
     super(...arguments), this.position = "top-right", this.maxVisibleNotifications = 2, this.playSound = !1, this.audioVolume = 0.1, this._notifications = [], this._audioService = new B();
   }
   connectedCallback() {
-    super.connectedCallback(), this._audioService.setVolume(this.audioVolume), C(window, "schmancy-notification").pipe(V(this.disconnecting)).subscribe((s) => {
-      this.addNotification(s.detail);
-    }), this.addEventListener("playsound", (s) => {
-      this.playSound && this._audioService.playSound(s.detail.type);
+    super.connectedCallback(), this._audioService.setVolume(this.audioVolume), x(window, "schmancy-notification").pipe(T(this.disconnecting)).subscribe((o) => {
+      this.addNotification(o.detail);
+    }), x(window, "schmancy-notification-dismiss").pipe(T(this.disconnecting)).subscribe((o) => {
+      this.removeNotification(o.detail.id);
+    }), x(window, "schmancy-notification-update").pipe(T(this.disconnecting)).subscribe((o) => {
+      this.updateNotification(o.detail.id, o.detail);
+    }), this.addEventListener("playsound", (o) => {
+      this.playSound && this._audioService.playSound(o.detail.type);
     });
   }
-  addNotification(s) {
-    const t = s.id || `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, e = { id: t, title: s.title || "", message: s.message, type: s.type || "info", duration: s.duration !== void 0 ? s.duration : 750, closable: s.closable === void 0 || s.closable, playSound: s.playSound !== void 0 ? s.playSound : this.playSound };
+  addNotification(o) {
+    const t = o.id || `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, e = { id: t, title: o.title || "", message: o.message, type: o.type || "info", duration: o.duration !== void 0 ? o.duration : 750, closable: o.closable === void 0 || o.closable, playSound: o.playSound !== void 0 ? o.playSound : this.playSound, showProgress: o.showProgress !== void 0 && o.showProgress };
     return this.position.startsWith("top") ? this._notifications = [...this._notifications, e] : this._notifications = [e, ...this._notifications], this._notifications.length > this.maxVisibleNotifications && (this._notifications = this._notifications.slice(-this.maxVisibleNotifications)), e.playSound && this._audioService.playSound(e.type), t;
   }
-  removeNotification(s) {
-    this._notifications = this._notifications.filter((t) => t.id !== s);
+  removeNotification(o) {
+    this._notifications = this._notifications.filter((t) => t.id !== o);
   }
-  _handleClose(s) {
-    const t = s.detail.id;
+  updateNotification(o, t) {
+    const e = this._notifications.findIndex((i) => i.id === o);
+    e !== -1 && (this._notifications[e] = { ...this._notifications[e], ...t }, this.requestUpdate());
+  }
+  _handleClose(o) {
+    const t = o.detail.id;
     this.removeNotification(t);
   }
   render() {
     return p`
 			<div
-				class=${A({ "notification-container": !0, [this.position]: !0 })}
+				class=${_({ "notification-container": !0, [this.position]: !0 })}
 			>
-				${k(this._notifications, (s) => s.id, (s) => p`
+				${k(this._notifications, (o) => o.id, (o) => p`
             <sch-notification
-              .id=${s.id}
-              .title=${s.title}
-              .message=${s.message}
-              .type=${s.type}
-              .duration=${s.duration}
-              ?closable=${s.closable}
-              ?playSound=${!1} /* We already played the sound on add */
+              .id=${o.id}
+              .title=${o.title}
+              .message=${o.message}
+              .type=${o.type}
+              .duration=${o.duration}
+              ?closable=${o.closable}
+              ?playSound=${!1}
+              ?showProgress=${o.showProgress}
               @close=${this._handleClose}
             ></sch-notification>
           `)}
@@ -455,16 +466,34 @@ let f = class extends _(":host{display:block}.notification-container{position:fi
 		`;
   }
 };
-b([h({ type: String })], f.prototype, "position", 2), b([h({ type: Number })], f.prototype, "maxVisibleNotifications", 2), b([h({ type: Boolean })], f.prototype, "playSound", 2), b([h({ type: Number })], f.prototype, "audioVolume", 2), b([g()], f.prototype, "_notifications", 2), f = b([S("sch-notification-container")], f);
-const y = class y {
+b([h({ type: String })], y.prototype, "position", 2), b([h({ type: Number })], y.prototype, "maxVisibleNotifications", 2), b([h({ type: Boolean })], y.prototype, "playSound", 2), b([h({ type: Number })], y.prototype, "audioVolume", 2), b([g()], y.prototype, "_notifications", 2), y = b([C("sch-notification-container")], y);
+const f = class f {
   constructor() {
+    this.notificationStack = [];
   }
   static getInstance() {
-    return y.instance || (y.instance = new y()), y.instance;
+    return f.instance || (f.instance = new f()), f.instance;
   }
   notify(t) {
-    const e = { ...y.DEFAULT_OPTIONS, ...t, duration: t.duration ?? y.DEFAULT_OPTIONS.duration }, i = e.id || `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, o = new CustomEvent("schmancy-notification", { bubbles: !0, composed: !0, detail: { ...e, id: i } });
-    return window.dispatchEvent(o), i;
+    const e = { ...f.DEFAULT_OPTIONS, ...t, duration: t.duration ?? f.DEFAULT_OPTIONS.duration }, i = e.id || `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`;
+    this.notificationStack.push(i);
+    const s = new CustomEvent("schmancy-notification", { bubbles: !0, composed: !0, detail: { ...e, id: i } });
+    return window.dispatchEvent(s), i;
+  }
+  dismiss(t) {
+    let e;
+    if (t) {
+      const i = this.notificationStack.indexOf(t);
+      i > -1 && (this.notificationStack.splice(i, 1), e = t);
+    } else e = this.notificationStack.pop();
+    if (e) {
+      const i = new CustomEvent("schmancy-notification-dismiss", { bubbles: !0, composed: !0, detail: { id: e } });
+      window.dispatchEvent(i);
+    }
+  }
+  update(t, e) {
+    const i = new CustomEvent("schmancy-notification-update", { bubbles: !0, composed: !0, detail: { id: t, ...e } });
+    window.dispatchEvent(i);
   }
   info(t, e = {}) {
     return this.notify({ message: t ?? "", type: "info", duration: t ? e.duration : 1, ...e });
@@ -485,13 +514,13 @@ const y = class y {
     return this.notify({ message: t, duration: 0, ...e });
   }
 };
-y.DEFAULT_OPTIONS = { duration: 1e3, closable: !0, playSound: !0 };
-let m = y;
-const W = { show: (s) => m.getInstance().notify(s), info: (s, t = {}) => m.getInstance().info(s, t), success: (s, t = {}) => m.getInstance().success(s, t), warning: (s, t = {}) => m.getInstance().warning(s, t), error: (s, t = {}) => m.getInstance().error(s, t), customDuration: (s, t, e = {}) => m.getInstance().customDuration(s, t, e), persistent: (s, t = {}) => m.getInstance().persistent(s, t) };
+f.DEFAULT_OPTIONS = { duration: 1e3, closable: !0, playSound: !0 };
+let m = f;
+const W = { show: (o) => m.getInstance().notify(o), info: (o, t = {}) => m.getInstance().info(o, t), success: (o, t = {}) => m.getInstance().success(o, t), warning: (o, t = {}) => m.getInstance().warning(o, t), error: (o, t = {}) => m.getInstance().error(o, t), customDuration: (o, t, e = {}) => m.getInstance().customDuration(o, t, e), persistent: (o, t = {}) => m.getInstance().persistent(o, t), dismiss: (o) => m.getInstance().dismiss(o), update: (o, t) => m.getInstance().update(o, t) };
 export {
   W as $,
   B as N,
   u as S,
-  f as a
+  y as a
 };
-//# sourceMappingURL=notification-service-L_h9_d4v.js.map
+//# sourceMappingURL=notification-service-Rkjxrnsh.js.map