@rozie-ui/toast-lit 0.1.0

package/dist/index.mjs

@@ -0,0 +1,593 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { SignalWatcher, signal } from "@lit-labs/preact-signals";
+import { rozieAttr, rozieClass, rozieDisplay, rozieListeners, rozieSpread, rozieStyle } from "@rozie/runtime-lit";
+import { repeat } from "lit/directives/repeat.js";
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/Toaster.ts
+let Toaster = class Toaster extends SignalWatcher(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.position = "bottom-right";
+		this.duration = 4e3;
+		this.max = 0;
+		this.disablePauseOnHover = false;
+		this.ariaLabel = null;
+		this.disableSwipe = false;
+		this.stacked = false;
+		this._toasts = signal([]);
+		this._seq = signal(0);
+		this._swipe = signal(null);
+		this._swipeGesture = signal(null);
+		this._hasSlotToast = false;
+		this._disconnectCleanups = [];
+		this._rozieTornDown = false;
+		this.timers = {};
+		this.exitFailsafes = {};
+		this.unmounted = false;
+		this.seqLocal = 0;
+		this.paused = false;
+		this.startTimer = (toast) => {
+			if (!toast || !toast.duration || toast.duration <= 0) return;
+			if (typeof window === "undefined") return;
+			const existing = this.timers[toast.id];
+			if (existing && existing.handle != null) window.clearTimeout(existing.handle);
+			const remaining = toast.duration;
+			const handle = window.setTimeout(() => this.dismissBegin(toast.id, "timeout"), remaining);
+			this.timers[toast.id] = {
+				handle,
+				startedAt: Date.now(),
+				remaining
+			};
+		};
+		this.clearTimer = (id) => {
+			const entry = this.timers[id];
+			if (entry && entry.handle != null && typeof window !== "undefined") window.clearTimeout(entry.handle);
+			delete this.timers[id];
+		};
+		this.pauseTimers = () => {
+			this.paused = true;
+			if (typeof window === "undefined") return;
+			for (const id in this.timers) {
+				const entry = this.timers[id];
+				if (entry.handle == null) continue;
+				window.clearTimeout(entry.handle);
+				const elapsed = Date.now() - entry.startedAt;
+				const remaining = Math.max(0, entry.remaining - elapsed);
+				this.timers[id] = {
+					handle: null,
+					startedAt: entry.startedAt,
+					remaining
+				};
+			}
+		};
+		this.resumeTimers = () => {
+			this.paused = false;
+			if (typeof window === "undefined") return;
+			for (const id in this.timers) {
+				const entry = this.timers[id];
+				if (entry.handle != null) continue;
+				if (entry.remaining == null || entry.remaining <= 0) {
+					this.dismissBegin(id, "timeout");
+					continue;
+				}
+				const remaining = entry.remaining;
+				const handle = window.setTimeout(() => this.dismissBegin(id, "timeout"), remaining);
+				this.timers[id] = {
+					handle,
+					startedAt: Date.now(),
+					remaining
+				};
+			}
+		};
+		this.teardownTimers = () => {
+			if (typeof window !== "undefined") {
+				for (const id in this.timers) {
+					const entry = this.timers[id];
+					if (entry.handle != null) window.clearTimeout(entry.handle);
+				}
+				for (const id in this.exitFailsafes) if (this.exitFailsafes[id] != null) window.clearTimeout(this.exitFailsafes[id]);
+			}
+			this.timers = {};
+			this.exitFailsafes = {};
+		};
+		this.show = (input) => {
+			const t = input || {};
+			let id;
+			if (t.id != null) id = String(t.id);
+			else {
+				const s = Math.max(this._seq.value, this.seqLocal);
+				id = "t" + s;
+				this.seqLocal = s + 1;
+				this._seq.value = s + 1;
+			}
+			const toast = {
+				id,
+				message: t.message != null ? t.message : "",
+				type: t.type || "info",
+				duration: t.duration != null ? t.duration : this.duration
+			};
+			this._toasts.value = this._toasts.value.concat([toast]).slice(this.max > 0 ? Math.max(0, this._toasts.value.length + 1 - this.max) : 0);
+			this.startTimer(toast);
+			return id;
+		};
+		this.EXIT_FAILSAFE_MS = 350;
+		this.removeToast = (id) => {
+			if (typeof window !== "undefined" && this.exitFailsafes[id] != null) window.clearTimeout(this.exitFailsafes[id]);
+			delete this.exitFailsafes[id];
+			this._toasts.value = this._toasts.value.filter((t) => t.id !== id);
+		};
+		this.dismissBegin = (id, reason, extra) => {
+			const entry = this._toasts.value.find((t) => t.id === id);
+			if (!entry || entry.exiting) return;
+			this.clearTimer(id);
+			this.dispatchEvent(new CustomEvent("dismissed", {
+				detail: {
+					toast: entry,
+					reason
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this._toasts.value = this._toasts.value.map((t) => t.id === id ? {
+				...t,
+				exiting: true,
+				...extra || {}
+			} : t);
+			if (typeof window === "undefined") this.removeToast(id);
+			else this.exitFailsafes[id] = window.setTimeout(() => this.removeToast(id), this.EXIT_FAILSAFE_MS);
+		};
+		this.dismiss = (id) => {
+			this.dismissBegin(id, "api");
+		};
+		this.clear = () => {
+			this.teardownTimers();
+			this._toasts.value = [];
+		};
+		this.patch = (id, changes) => {
+			const c = changes || {};
+			let existed = false;
+			const next = this._toasts.value.map((t) => {
+				if (t.id !== id) return t;
+				if (t.exiting) return t;
+				existed = true;
+				const merged = { ...t };
+				if (c.message !== void 0) merged.message = c.message;
+				if (c.type !== void 0) merged.type = c.type;
+				if (c.duration !== void 0) merged.duration = c.duration;
+				return merged;
+			});
+			if (!existed) return false;
+			this._toasts.value = next;
+			if (c.duration !== void 0) {
+				this.clearTimer(id);
+				const patched = next.find((t) => t.id === id);
+				if (this.paused) {
+					if (patched && patched.duration > 0 && typeof window !== "undefined") this.timers[id] = {
+						handle: null,
+						startedAt: Date.now(),
+						remaining: patched.duration
+					};
+				} else this.startTimer(patched);
+			}
+			return true;
+		};
+		this.settlePromise = (id, type, messageOrFn, value) => {
+			if (this.unmounted) return;
+			const entry = this._toasts.value.find((t) => t.id === id);
+			if (!entry || entry.exiting) return;
+			const message = typeof messageOrFn === "function" ? messageOrFn(value) : messageOrFn;
+			this.patch(id, {
+				type,
+				message,
+				duration: this.duration
+			});
+		};
+		this.promise = (p, opts) => {
+			const o = opts || {};
+			const id = this.show({
+				type: "loading",
+				duration: 0,
+				message: o.loading
+			});
+			if (p && typeof p.then === "function") p.then((value) => this.settlePromise(id, "success", o.success, value)).catch((err) => this.settlePromise(id, "error", o.error, err));
+			return id;
+		};
+		this.swipeAxisFor = (position) => position === "top-center" || position === "bottom-center" ? "y" : "x";
+		this.swipeSignFor = (position) => {
+			if (position === "top-right" || position === "bottom-right") return 1;
+			if (position === "top-left" || position === "bottom-left") return -1;
+			if (position === "bottom-center") return 1;
+			return -1;
+		};
+		this.onToastPointerDown = (t, event) => {
+			if (this.disableSwipe) return;
+			if (event.button != null && event.button !== 0) return;
+			if (event.target && event.target.closest ? event.target.closest("button, a") : null) return;
+			const axis = this.swipeAxisFor(this.position);
+			const sign = this.swipeSignFor(this.position);
+			const el = event.currentTarget;
+			const size = axis === "x" ? el.offsetWidth : el.offsetHeight;
+			this._swipeGesture.value = {
+				id: t.id,
+				axis,
+				sign,
+				size,
+				startX: event.clientX,
+				startY: event.clientY,
+				startTime: Date.now()
+			};
+			if (el && el.setPointerCapture) try {
+				el.setPointerCapture(event.pointerId);
+			} catch (e) {}
+		};
+		this.onToastPointerMove = (t, event) => {
+			if (this.disableSwipe) return;
+			const gesture = this._swipeGesture.value;
+			if (!gesture || gesture.id !== t.id) return;
+			const raw = gesture.axis === "x" ? event.clientX - gesture.startX : event.clientY - gesture.startY;
+			const d = raw * gesture.sign > 0 ? raw : raw * .15;
+			this._swipe.value = {
+				id: t.id,
+				d,
+				axis: gesture.axis,
+				sign: gesture.sign,
+				size: gesture.size
+			};
+		};
+		this.onToastPointerUp = (t, event) => {
+			if (this.disableSwipe) return;
+			const gesture = this._swipeGesture.value;
+			this._swipeGesture.value = null;
+			const dragState = this._swipe.value;
+			this._swipe.value = null;
+			if (!gesture || gesture.id !== t.id || !dragState) return;
+			const elapsed = Math.max(1, Date.now() - gesture.startTime);
+			const magnitude = dragState.d * gesture.sign;
+			const velocity = magnitude / elapsed;
+			if (magnitude > 0 && (magnitude > gesture.size * .45 || velocity > .11)) this.dismissBegin(t.id, "swipe", { swipeExitSign: gesture.sign });
+		};
+		this.onToastPointerCancel = (t) => {
+			if (this.disableSwipe) return;
+			if (this._swipeGesture.value && this._swipeGesture.value.id === t.id) this._swipeGesture.value = null;
+			if (this._swipe.value && this._swipe.value.id === t.id) this._swipe.value = null;
+		};
+		this.depth = (t) => {
+			const idx = this._toasts.value.findIndex((x) => x.id === t.id);
+			return idx === -1 ? 0 : this._toasts.value.length - 1 - idx;
+		};
+		this.toastStyle = (t) => {
+			const depthDecl = "--rozie-toast-depth: " + this.depth(t) + ";";
+			if (t.exiting) return t.swipeExitSign != null ? depthDecl + " --rozie-toast-swipe-exit: " + t.swipeExitSign + ";" : depthDecl;
+			const dragState = this._swipe.value;
+			if (!dragState || dragState.id !== t.id) return depthDecl;
+			const translate = dragState.axis === "x" ? "translateX(" + dragState.d + "px)" : "translateY(" + dragState.d + "px)";
+			const magnitude = dragState.d * dragState.sign;
+			const opacity = magnitude > 0 && dragState.size > 0 ? Math.max(.3, 1 - magnitude / dragState.size) : 1;
+			return depthDecl + " transform: " + translate + "; opacity: " + opacity + "; transition: none;";
+		};
+		this.onMouseEnter = () => {
+			if (this.disablePauseOnHover) return;
+			this.pauseTimers();
+		};
+		this.onMouseLeave = () => {
+			if (this.disablePauseOnHover) return;
+			this.resumeTimers();
+		};
+		this.regionLabel = () => this.ariaLabel != null ? this.ariaLabel : "Notifications";
+		this.liveFor = (type) => type === "error" || type === "warning" ? "assertive" : "polite";
+	}
+	static {
+		this.styles = css`
+:host{display:contents}
+@media (prefers-reduced-motion: reduce) {
+  .rozie-toast[data-rozie-s-12d4265c] {
+    animation-name: rozie-toast-fade-in;
+    animation-duration: 1ms;
+  }
+  .rozie-toast--exiting[data-rozie-s-12d4265c] {
+    animation-name: rozie-toast-fade-out;
+    animation-duration: 1ms;
+  }
+}
+.rozie-toaster[data-rozie-s-12d4265c] {
+  position: fixed;
+  z-index: var(--rozie-toast-z, 9999);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rozie-toast-gap, 0.5rem);
+  padding: var(--rozie-toast-region-padding, 1rem);
+  max-width: var(--rozie-toast-max-width, calc(100vw - 2rem));
+  pointer-events: none;
+  font: var(--rozie-toast-font, inherit);
+}
+.rozie-toaster[data-rozie-s-12d4265c] > *[data-rozie-s-12d4265c] {
+  pointer-events: auto;
+}
+.rozie-toaster--top-left[data-rozie-s-12d4265c] { top: 0; left: 0; align-items: flex-start; }
+.rozie-toaster--top-right[data-rozie-s-12d4265c] { top: 0; right: 0; align-items: flex-end; }
+.rozie-toaster--top-center[data-rozie-s-12d4265c] { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] { bottom: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+.rozie-toaster--stacked[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  grid-area: 1 / 1;
+  z-index: calc(100 - var(--rozie-toast-depth, 0));
+}
+.rozie-toaster--stacked[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) {
+  display: grid;
+}
+.rozie-toaster--stacked[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c] {
+  transform:
+    translateY(calc(var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-offset, 8px)))
+    scale(calc(1 - var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-scale-step, 0.05)));
+  opacity: calc(1 - min(1, max(0, var(--rozie-toast-depth, 0) - 2)));
+}
+.rozie-toaster--stacked.rozie-toaster--bottom-left[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--stacked.rozie-toaster--bottom-right[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--stacked.rozie-toaster--bottom-center[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c] {
+  transform:
+    translateY(calc(var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-offset, 8px) * -1))
+    scale(calc(1 - var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-scale-step, 0.05)));
+}
+.rozie-toast[data-rozie-s-12d4265c] {
+  display: flex;
+  align-items: center;
+  gap: var(--rozie-toast-content-gap, 0.75rem);
+  min-width: var(--rozie-toast-min-width, 16rem);
+  max-width: var(--rozie-toast-toast-max-width, 24rem);
+  padding: var(--rozie-toast-padding, 0.75rem 1rem);
+  color: var(--rozie-toast-color, #fff);
+  background: var(--rozie-toast-bg, #333);
+  border-radius: var(--rozie-toast-radius, 0.5rem);
+  box-shadow: var(--rozie-toast-shadow, 0 6px 20px rgba(0, 0, 0, 0.25));
+  /* Swipe: page scroll stays alive on touch along the axis the toast does
+     NOT move on. The transition here drives the spring-back (the active-drag
+     :style sets an inline \`transition: none\` to track the finger 1:1;
+     releasing it without a further gesture falls back to this transition). */
+  touch-action: pan-y;
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+.rozie-toaster--top-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  touch-action: pan-x;
+}
+.rozie-toast--success[data-rozie-s-12d4265c] { background: var(--rozie-toast-success-bg, #16a34a); }
+.rozie-toast--error[data-rozie-s-12d4265c] { background: var(--rozie-toast-error-bg, #dc2626); }
+.rozie-toast--warning[data-rozie-s-12d4265c] { background: var(--rozie-toast-warning-bg, #ca8a04); }
+.rozie-toast--info[data-rozie-s-12d4265c] { background: var(--rozie-toast-info-bg, var(--rozie-toast-bg, #333)); }
+from[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(-0.5rem); }
+to[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+from[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(0.5rem); }
+to[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(-0.5rem); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(0.5rem); }
+.rozie-toast[data-rozie-s-12d4265c] {
+  animation: rozie-toast-enter var(--rozie-toast-enter-duration, 200ms) ease-out;
+}
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-enter-from-bottom;
+}
+.rozie-toast--exiting[data-rozie-s-12d4265c] {
+  animation: rozie-toast-exit var(--rozie-toast-exit-duration, 200ms) ease-in forwards;
+}
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-exit-to-bottom;
+}
+from[data-rozie-s-12d4265c] { opacity: 0; }
+to[data-rozie-s-12d4265c] { opacity: 1; }
+from[data-rozie-s-12d4265c] { opacity: 1; }
+to[data-rozie-s-12d4265c] { opacity: 0; }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateX(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateX(calc(var(--rozie-toast-swipe-exit, 1) * 100%)); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(calc(var(--rozie-toast-swipe-exit, 1) * 100%)); }
+.rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-swipe-exit-x;
+}
+.rozie-toaster--top-center[data-rozie-s-12d4265c] .rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-swipe-exit-y;
+}
+.rozie-toast-spinner[data-rozie-s-12d4265c] {
+  flex: 0 0 auto;
+  width: var(--rozie-toast-spinner-size, 1em);
+  height: var(--rozie-toast-spinner-size, 1em);
+  border: 2px solid color-mix(in srgb, var(--rozie-toast-spinner-color, currentColor) 25%, transparent);
+  border-top-color: var(--rozie-toast-spinner-color, currentColor);
+  border-radius: 50%;
+  animation: rozie-toast-spin 0.75s linear infinite;
+}
+to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
+.rozie-toast-message[data-rozie-s-12d4265c] {
+  flex: 1 1 auto;
+  font-size: var(--rozie-toast-font-size, 0.9rem);
+}
+.rozie-toast-close[data-rozie-s-12d4265c] {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rozie-toast-close-size, 1.25rem);
+  height: var(--rozie-toast-close-size, 1.25rem);
+  padding: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: inherit;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  opacity: var(--rozie-toast-close-opacity, 0.75);
+  cursor: pointer;
+}
+.rozie-toast-close[data-rozie-s-12d4265c]:hover {
+  opacity: 1;
+}
+`;
+	}
+	_armListeners() {
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"toast\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotToast = this._slotToastElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+	}
+	connectedCallback() {
+		this._hasSlotToast = Array.from(this.children).some((el) => el.getAttribute("slot") === "toast");
+		super.connectedCallback();
+		if (this.hasUpdated && this._rozieTornDown) {
+			this._rozieTornDown = false;
+			this._armListeners();
+		}
+	}
+	firstUpdated() {
+		this._armListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		queueMicrotask(() => {
+			if (this.isConnected || this._rozieTornDown) return;
+			this._rozieTornDown = true;
+			for (const fn of this._disconnectCleanups) fn();
+			this._disconnectCleanups = [];
+		});
+	}
+	render() {
+		return html`
+<div class="rozie-toaster ${rozieClass("rozie-toaster--" + this.position + (this.stacked ? " rozie-toaster--stacked" : ""))}" role="region" aria-label=${rozieAttr(this.regionLabel())} ${rozieSpread(this.$attrs)} @mouseenter=${($event) => {
+			this.onMouseEnter();
+		}} @mouseleave=${($event) => {
+			this.onMouseLeave();
+		}} ${rozieListeners(this.$listeners)} data-rozie-s-12d4265c>
+  
+  ${repeat(this._toasts.value, (t, _idx) => t.id, (t, _idx) => html`<div class="rozie-toast ${rozieClass("rozie-toast--" + t.type + (t.exiting ? " rozie-toast--exiting" : "") + (t.swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))}" key=${rozieAttr(t.id)} style=${rozieStyle(this.toastStyle(t))} role="status" aria-live=${rozieAttr(this.liveFor(t.type))} @animationend=${($event) => {
+			t.exiting && this.removeToast(t.id);
+		}} @pointerdown=${($event) => {
+			this.onToastPointerDown(t, $event);
+		}} @pointermove=${($event) => {
+			this.onToastPointerMove(t, $event);
+		}} @pointerup=${($event) => {
+			this.onToastPointerUp(t, $event);
+		}} @pointercancel=${($event) => {
+			this.onToastPointerCancel(t);
+		}} data-rozie-s-12d4265c>
+    ${this.toast !== void 0 ? this.toast({
+			toast: t,
+			dismiss: this.dismiss
+		}) : html`<slot name="toast" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({ toast: t });
+			} catch {
+				return "{}";
+			}
+		})()} @rozie-toast-dismiss=${($event) => this.dismiss($event.detail)}>
+      ${t.type === "loading" ? html`<span class="rozie-toast-spinner" aria-hidden="true" data-rozie-s-12d4265c></span>` : nothing}<span class="rozie-toast-message" data-rozie-s-12d4265c>${rozieDisplay(t.message)}</span>
+      <button class="rozie-toast-close" type="button" aria-label="Dismiss" @click=${($event) => {
+			this.dismissBegin(t.id, "close");
+		}} data-rozie-s-12d4265c>×</button>
+    </slot>`}
+  </div>`)}
+</div>
+`;
+	}
+	/**
+	* Plan 14-05 — cross-framework attribute fallthrough source. Reads the
+	* host custom element's attributes on each call so a consumer-side bound
+	* attribute flows through on every render. The `rozieSpread` directive
+	* (D-02) does the cross-render diff downstream.
+	*
+	* Phase 15 follow-up Bug A — declared-prop attribute names are filtered
+	* out so `$attrs` returns "rest after declared props" (semantic parity
+	* with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
+	* forms are folded into the skip set: kebab-case for model props
+	* (explicit `attribute:`) AND lowercased property name (Lit's default).
+	*/
+	get $attrs() {
+		const __skip = new Set([
+			"position",
+			"duration",
+			"max",
+			"disable-pause-on-hover",
+			"disablepauseonhover",
+			"aria-label",
+			"arialabel",
+			"disable-swipe",
+			"disableswipe",
+			"stacked"
+		]);
+		const out = {};
+		for (const a of Array.from(this.attributes)) {
+			if (__skip.has(a.name)) continue;
+			out[a.name] = a.value;
+		}
+		return out;
+	}
+	/**
+	* Phase 15 D-19 — consumer-passed listener cluster placeholder.
+	* Lit attaches event listeners directly on the host element via
+	* `addEventListener` (no per-instance prop rest binding), so the
+	* runtime value is undefined; the `rozieListeners` directive's
+	* nullish coercion (`obj ?? {}`) handles the no-op cleanly.
+	* The declaration exists to satisfy `tsc --noEmit` on consumer
+	* projects with strict mode — bare `$listeners` in `render()`
+	* would otherwise raise TS2304 (Cannot find name).
+	*/
+	get $listeners() {}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], Toaster.prototype, "position", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Toaster.prototype, "duration", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Toaster.prototype, "max", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Toaster.prototype, "disablePauseOnHover", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], Toaster.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Toaster.prototype, "disableSwipe", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Toaster.prototype, "stacked", void 0);
+__decorate([state()], Toaster.prototype, "_hasSlotToast", void 0);
+__decorate([queryAssignedElements({
+	slot: "toast",
+	flatten: true
+})], Toaster.prototype, "_slotToastElements", void 0);
+__decorate([property({ attribute: false })], Toaster.prototype, "toast", void 0);
+Toaster = __decorate([customElement("rozie-toaster")], Toaster);
+var Toaster_default = Toaster;
+//#endregion
+export { Toaster_default as Toaster, Toaster_default as default };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@rozie-ui/toast-lit",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "description": "Idiomatic Lit headless, accessible toast / notification host (queue, auto-dismiss, hover-pause, positioning, imperative show/dismiss/clear handle) — one accessible Rozie source compiled to a Lit custom element.",
+  "keywords": [
+    "rozie",
+    "rozie-ui",
+    "toast",
+    "toaster",
+    "notification",
+    "snackbar",
+    "headless",
+    "accessibility",
+    "aria",
+    "component",
+    "lit"
+  ],
+  "author": "One Learning Community (https://github.com/One-Learning-Community)",
+  "homepage": "https://github.com/One-Learning-Community/rozie.js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/One-Learning-Community/rozie.js.git",
+    "directory": "packages/ui/toast/packages/lit"
+  },
+  "bugs": {
+    "url": "https://github.com/One-Learning-Community/rozie.js/issues"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./source": "./src/Toaster.ts",
+    "./themes/*": "./src/themes/*"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@rozie/runtime-lit": "0.2.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.2",
+    "@lit-labs/preact-signals": "^1.0.0",
+    "@preact/signals-core": "^1.3.0"
+  },
+  "peerDependenciesMeta": {
+    "lit": {
+      "optional": false
+    },
+    "@lit-labs/preact-signals": {
+      "optional": false
+    },
+    "@preact/signals-core": {
+      "optional": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}