@mhmo91/schmancy 0.10.20 → 0.10.21

package/dist/directives.js

@@ -1,27 +1,28 @@
 import { _ as e, d as t, f as n, l as r, u as i } from "./animation-DCznELuT.js";
 import { t as a } from "./reduced-motion-D7LqTUMn.js";
 import { t as o } from "./cursor-glow-Cs2XLDB9.js";
-import { n as s, r as c, t as l } from "./layout-Dq2oeOTS.js";
-import { t as u } from "./magnetic-DxvoEz8_.js";
-import { BehaviorSubject as d, EMPTY as f, Observable as p, Subject as m, animationFrameScheduler as h, combineLatest as g, concat as _, defer as v, from as y, fromEvent as b, interval as x, merge as S, of as C, timer as w } from "rxjs";
-import { catchError as T, delay as E, distinctUntilChanged as D, filter as O, finalize as ee, first as te, map as k, observeOn as ne, repeat as re, skip as ie, startWith as A, switchMap as j, take as M, takeUntil as N, takeWhile as P, tap as F } from "rxjs/operators";
-import { noChange as I, nothing as L } from "lit";
-import { AsyncDirective as R, directive as z } from "lit/async-directive.js";
-import { Directive as B, PartType as V, directive as H } from "lit/directive.js";
-var ae = {
+import { n as s } from "./theme.service-CSzNkqBB.js";
+import { n as c, r as l, t as u } from "./layout-Dq2oeOTS.js";
+import { t as d } from "./magnetic-DxvoEz8_.js";
+import { BehaviorSubject as f, EMPTY as p, Observable as m, Subject as h, animationFrameScheduler as g, combineLatest as _, concat as v, debounceTime as y, defer as b, filter as x, from as S, fromEvent as C, interval as w, merge as T, of as E, takeUntil as D, timer as O } from "rxjs";
+import { catchError as k, debounceTime as ee, delay as te, distinctUntilChanged as A, filter as j, finalize as ne, first as re, map as M, observeOn as ie, repeat as ae, skip as oe, startWith as se, switchMap as N, take as P, takeUntil as F, takeWhile as I, tap as L } from "rxjs/operators";
+import { noChange as R, nothing as z } from "lit";
+import { AsyncDirective as B, directive as V } from "lit/async-directive.js";
+import { Directive as H, PartType as U, directive as W } from "lit/directive.js";
+var ce = {
 	smooth: t,
 	snappy: n,
 	bouncy: r,
 	gentle: i
-}, oe = z(class extends R {
+}, le = V(class extends B {
 	constructor(...e) {
-		super(...e), this.element = null, this.originalContent = "", this.animations = [], this.disconnecting$ = new m(), this.initialized = !1;
+		super(...e), this.element = null, this.originalContent = "", this.animations = [], this.disconnecting$ = new h(), this.initialized = !1;
 	}
 	render(e) {
-		return I;
+		return R;
 	}
 	update(e, [t]) {
-		return this.element = e.element, this.initialized || (this.initialized = !0, this.disconnecting$.closed && (this.disconnecting$ = new m()), t.text === void 0 ? this.originalContent = this.element.textContent || "" : (this.originalContent = t.text, this.element.textContent = t.text), this.element.style.willChange = "transform, opacity", t.animation === "typewriter" ? this.element.textContent = "" : this.element.style.opacity = "0", this.initialize(t)), I;
+		return this.element = e.element, this.initialized || (this.initialized = !0, this.disconnecting$.closed && (this.disconnecting$ = new h()), t.text === void 0 ? this.originalContent = this.element.textContent || "" : (this.originalContent = t.text, this.element.textContent = t.text), this.element.style.willChange = "transform, opacity", t.animation === "typewriter" ? this.element.textContent = "" : this.element.style.opacity = "0", this.initialize(t)), R;
 	}
 	disconnected() {
 		this.cleanup();
@@ -30,8 +31,8 @@ var ae = {
 		this.element && (this.element.style.willChange = "transform, opacity");
 	}
 	initialize(e) {
-		let { animation: t, delay: n = 0, duration: r, stagger: i, preset: a = "snappy", restart: o = !1 } = e, s = ae[a], c = r ?? s.duration, l = i ?? (t === "cyber-glitch" ? 30 : 50), u = this.createVisibilityObservable$();
-		(o ? u.pipe(j((e) => e ? w(n).pipe(j(() => this.runAnimation$(t, c, l, s))) : v(() => (this.resetToInitial(t), f)))) : u.pipe(O((e) => e), M(1), E(n), j(() => this.runAnimation$(t, c, l, s)))).pipe(N(this.disconnecting$)).subscribe();
+		let { animation: t, delay: n = 0, duration: r, stagger: i, preset: a = "snappy", restart: o = !1 } = e, s = ce[a], c = r ?? s.duration, l = i ?? (t === "cyber-glitch" ? 30 : 50), u = this.createVisibilityObservable$();
+		(o ? u.pipe(N((e) => e ? O(n).pipe(N(() => this.runAnimation$(t, c, l, s))) : b(() => (this.resetToInitial(t), p)))) : u.pipe(j((e) => e), P(1), te(n), N(() => this.runAnimation$(t, c, l, s)))).pipe(F(this.disconnecting$)).subscribe();
 	}
 	cleanup() {
 		this.disconnecting$.next(), this.disconnecting$.complete(), this.cancelAnimations(), this.element && (this.element.textContent = this.originalContent, this.element.style.opacity = "", this.element.style.willChange = "auto", this.element.style.transform = "", this.element.style.filter = ""), this.element = null, this.initialized = !1;
@@ -69,26 +70,26 @@ var ae = {
 		return t;
 	}
 	createVisibilityObservable$() {
-		let e = b(document, "visibilitychange").pipe(A(null), k(() => document.visibilityState === "visible"), D());
-		return g([x(200).pipe(A(0), k(() => {
+		let e = C(document, "visibilitychange").pipe(se(null), M(() => document.visibilityState === "visible"), A());
+		return _([w(200).pipe(se(0), M(() => {
 			if (!this.element) return !1;
 			let e = this.element.getBoundingClientRect();
 			return e.width > 0 && e.height > 0 && e.top < window.innerHeight && e.bottom > 0 && this.getAccumulatedOpacity() > .5;
-		}), D()), e]).pipe(k(([e, t]) => e && t), D());
+		}), A()), e]).pipe(M(([e, t]) => e && t), A());
 	}
 	runAnimation$(e, t, n, r) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		switch (e) {
 			case "fade-up": return this.animateFadeUp$(t, r);
 			case "blur-reveal": return this.animateBlurReveal$(t, n, r);
 			case "word-reveal": return this.animateWordReveal$(t, n, r);
 			case "cyber-glitch": return this.animateCyberGlitch$(t, n, r);
 			case "typewriter": return this.animateTypewriter$(t);
-			default: return f;
+			default: return p;
 		}
 	}
 	animateFadeUp$(e, t) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		let n = this.element.animate([{
 			opacity: 0,
 			transform: "translateY(30px)"
@@ -100,9 +101,9 @@ var ae = {
 			easing: t.easingFallback,
 			fill: "forwards"
 		});
-		return this.animations.push(n), y(n.finished).pipe(F(() => {
+		return this.animations.push(n), S(n.finished).pipe(L(() => {
 			this.element && (this.element.style.opacity = "", this.element.style.transform = "", this.element.style.willChange = "auto");
-		}), T(() => f));
+		}), k(() => p));
 	}
 	wrapTextNodes(e) {
 		let t = [], n = document.createDocumentFragment(), r = Array.from(e.childNodes);
@@ -117,7 +118,7 @@ var ae = {
 		return e.textContent = "", e.appendChild(n), t;
 	}
 	animateBlurReveal$(e, t, n) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		let r = this.wrapTextNodes(this.element);
 		this.element.style.opacity = "1", r.forEach((r, i) => {
 			r.style.opacity = "0", r.style.display = "inline-block";
@@ -138,14 +139,14 @@ var ae = {
 			this.animations.push(a);
 		});
 		let i = this.animations[this.animations.length - 1];
-		return i ? y(i.finished).pipe(F(() => {
+		return i ? S(i.finished).pipe(L(() => {
 			this.element && (this.element.style.willChange = "auto", r.forEach((e) => {
 				e.style.willChange = "auto";
 			}));
-		}), T(() => f)) : f;
+		}), k(() => p)) : p;
 	}
 	animateWordReveal$(e, t, n) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		let r = this.wrapTextNodes(this.element);
 		this.element.style.opacity = "1", r.forEach((r, i) => {
 			r.style.opacity = "0", r.style.display = "inline-block";
@@ -164,14 +165,14 @@ var ae = {
 			this.animations.push(a);
 		});
 		let i = this.animations[this.animations.length - 1];
-		return i ? y(i.finished).pipe(F(() => {
+		return i ? S(i.finished).pipe(L(() => {
 			this.element && (this.element.style.willChange = "auto", r.forEach((e) => {
 				e.style.willChange = "auto";
 			}));
-		}), T(() => f)) : f;
+		}), k(() => p)) : p;
 	}
 	animateCyberGlitch$(e, t, n) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		let r = this.originalContent.split(""), i = document.createDocumentFragment(), a = [];
 		for (let e of r) {
 			let t = document.createElement("span");
@@ -196,53 +197,53 @@ var ae = {
 			this.animations.push(o);
 		});
 		let o = this.animations[this.animations.length - 1];
-		return o ? y(o.finished).pipe(F(() => {
+		return o ? S(o.finished).pipe(L(() => {
 			this.element && (this.element.style.willChange = "auto", a.forEach((e) => {
 				e.style.willChange = "auto";
 			}));
-		}), T(() => f)) : f;
+		}), k(() => p)) : p;
 	}
 	animateTypewriter$(e) {
-		if (!this.element) return f;
+		if (!this.element) return p;
 		let t = this.originalContent, n = t.length;
-		if (n === 0) return f;
+		if (n === 0) return p;
 		let r = 0;
-		return x(e / n).pipe(F(() => {
+		return w(e / n).pipe(L(() => {
 			r++, this.element && (this.element.textContent = t.slice(0, r));
-		}), P(() => r < n), ee(() => {
+		}), I(() => r < n), ne(() => {
 			this.element && (this.element.textContent = this.originalContent, this.element.style.willChange = "auto");
 		}));
 	}
-}), se = H(class extends B {
+}), ue = W(class extends H {
 	constructor(e) {
 		super(e), this.config = {};
 	}
 	update(e, [t]) {
-		if (e.type !== V.ELEMENT) throw Error("The `classMap` directive must be used in the `class` attribute");
+		if (e.type !== U.ELEMENT) throw Error("The `classMap` directive must be used in the `class` attribute");
 		let n = e.element;
 		this.config = t, this.config.bgColor && (n.style.backgroundColor = this.config.bgColor), this.config.color && (n.style.color = this.config.color);
 	}
 	render(e) {
-		return this.config = e, L;
+		return this.config = e, z;
 	}
-}), U = /* @__PURE__ */ new WeakMap();
-function W(e, t) {
+}), G = /* @__PURE__ */ new WeakMap();
+function de(e, t) {
 	let n = e.match(/var\(([^,)]+)/);
 	return n && getComputedStyle(document.documentElement).getPropertyValue(n[1]).trim() || t;
 }
-var ce = H(class extends B {
+var fe = W(class extends H {
 	constructor(e) {
-		if (super(e), e.type !== V.ELEMENT) throw Error("confirmClick directive can only be used on elements");
+		if (super(e), e.type !== U.ELEMENT) throw Error("confirmClick directive can only be used on elements");
 	}
 	render(e, t) {}
 	update(e, [t, n = {}]) {
-		let r = e.element, i = U.get(r);
+		let r = e.element, i = G.get(r);
 		if (i) {
 			if (i.callback = t, this.optionsEqual(i.options, n)) return;
 			this.cleanup(r);
 		}
-		let a = new m(), o = this.setupClickListener(r, n ?? {}, a);
-		U.set(r, {
+		let a = new h(), o = this.setupClickListener(r, n ?? {}, a);
+		G.set(r, {
 			subscription: o,
 			callback: t,
 			options: n ?? {},
@@ -255,15 +256,15 @@ var ce = H(class extends B {
 		return t ? e.timeout === t.timeout && e.icon === t.icon : Object.keys(e).length === 0;
 	}
 	setupClickListener(e, t, n) {
-		return b(e, "click").pipe(F((r) => {
-			let i = U.get(e);
+		return C(e, "click").pipe(L((r) => {
+			let i = G.get(e);
 			i && !i.isConfirming && (r.stopPropagation(), r.preventDefault(), i.isConfirming = !0, this.showOverlay(e, i, t, n));
 		})).subscribe();
 	}
 	showOverlay(e, t, n, r) {
-		let i = n.timeout ?? 3e3, a = e, o = n.icon ?? a.icon ?? a._capturedIcon ?? e.textContent?.trim() ?? "warning", s = W("var(--schmancy-sys-color-error-default)", "#dc2626"), c = W("var(--schmancy-sys-color-error-on)", "#ffffff"), l = W("var(--schmancy-sys-color-error-container)", "#fecaca"), u = document.createElement("div");
+		let i = n.timeout ?? 3e3, a = e, o = n.icon ?? a.icon ?? a._capturedIcon ?? e.textContent?.trim() ?? "warning", s = de("var(--schmancy-sys-color-error-default)", "#dc2626"), c = de("var(--schmancy-sys-color-error-on)", "#ffffff"), l = de("var(--schmancy-sys-color-error-container)", "#fecaca"), u = document.createElement("div");
 		u.setAttribute("role", "status"), u.setAttribute("aria-label", "Click again to confirm");
-		let d = e.getBoundingClientRect(), f = d.width, p = d.height, m = window.devicePixelRatio || 1, g = getComputedStyle(e);
+		let d = e.getBoundingClientRect(), f = d.width, p = d.height, m = window.devicePixelRatio || 1, h = getComputedStyle(e);
 		Object.assign(u.style, {
 			position: "fixed",
 			top: `${d.top}px`,
@@ -271,7 +272,7 @@ var ce = H(class extends B {
 			width: `${f}px`,
 			height: `${p}px`,
 			zIndex: "10000",
-			borderRadius: g.borderRadius || "50%",
+			borderRadius: h.borderRadius || "50%",
 			overflow: "hidden",
 			cursor: "pointer",
 			opacity: "0",
@@ -288,51 +289,51 @@ var ce = H(class extends B {
 			transform: "translate(-50%, -50%)",
 			color: c,
 			pointerEvents: "none"
-		}), u.appendChild(y), document.body.appendChild(u), t.overlayElement = u, C(null).pipe(ne(h)).subscribe(() => {
+		}), u.appendChild(y), document.body.appendChild(u), t.overlayElement = u, E(null).pipe(ie(g)).subscribe(() => {
 			u.style.opacity = "1", u.style.transform = "scale(1)";
 		});
-		let w = _.getContext("2d");
-		if (!w) return;
-		w.scale(m, m);
-		let T = f / 2, E = p / 2, D = Math.min(f, p) / 2 - 1, ee = D - 3, te = (e) => {
-			w.clearRect(0, 0, f, p), w.beginPath(), w.arc(T, E, ee, 0, 2 * Math.PI), w.fillStyle = s, w.fill();
+		let b = _.getContext("2d");
+		if (!b) return;
+		b.scale(m, m);
+		let x = f / 2, S = p / 2, D = Math.min(f, p) / 2 - 1, O = D - 3, k = (e) => {
+			b.clearRect(0, 0, f, p), b.beginPath(), b.arc(x, S, O, 0, 2 * Math.PI), b.fillStyle = s, b.fill();
 			let t = 1 - e;
 			if (t > 0) {
 				let e = -Math.PI / 2, n = e + 2 * Math.PI * t;
-				w.beginPath(), w.arc(T, E, D, e, n), w.arc(T, E, ee, n, e, !0), w.closePath(), w.fillStyle = l, w.fill();
+				b.beginPath(), b.arc(x, S, D, e, n), b.arc(x, S, O, n, e, !0), b.closePath(), b.fillStyle = l, b.fill();
 			}
 		};
-		te(0);
-		let re = performance.now(), ie = x(0, h).pipe(k(() => (performance.now() - re) / i), P((e) => e <= 1), N(r), F((e) => te(e))).subscribe({ complete: () => {
-			U.get(e)?.isConfirming && this.hideOverlay(e);
+		k(0);
+		let ee = performance.now(), te = w(0, g).pipe(M(() => (performance.now() - ee) / i), I((e) => e <= 1), F(r), L((e) => k(e))).subscribe({ complete: () => {
+			G.get(e)?.isConfirming && this.hideOverlay(e);
 		} });
-		t.subscription.add(ie);
-		let A = S(b(u, "click").pipe(M(1), F(() => {
+		t.subscription.add(te);
+		let A = T(C(u, "click").pipe(P(1), L(() => {
 			t.callback(), this.hideOverlay(e);
-		})), b(document, "click", { capture: !0 }).pipe(O((t) => !u.contains(t.target) && !e.contains(t.target)), M(1), F(() => this.hideOverlay(e))), b(document, "keydown").pipe(O((e) => e.key === "Escape"), M(1), F(() => this.hideOverlay(e)))).pipe(M(1), N(r)).subscribe();
+		})), C(document, "click", { capture: !0 }).pipe(j((t) => !u.contains(t.target) && !e.contains(t.target)), P(1), L(() => this.hideOverlay(e))), C(document, "keydown").pipe(j((e) => e.key === "Escape"), P(1), L(() => this.hideOverlay(e)))).pipe(P(1), F(r)).subscribe();
 		t.subscription.add(A);
 	}
 	hideOverlay(e) {
-		let t = U.get(e);
+		let t = G.get(e);
 		if (t && (t.cancel$.next(), t.isConfirming = !1, t.overlayElement)) {
 			let e = t.overlayElement;
-			e.style.opacity = "0", e.style.transform = "scale(0.6)", w(250).pipe(F(() => {
+			e.style.opacity = "0", e.style.transform = "scale(0.6)", O(250).pipe(L(() => {
 				document.body.contains(e) && document.body.removeChild(e);
 			})).subscribe(), t.overlayElement = null;
 		}
 	}
 	cleanup(e) {
-		let t = U.get(e);
-		t && (t.cancel$.next(), t.cancel$.complete(), t.subscription.unsubscribe(), t.overlayElement && document.body.contains(t.overlayElement) && document.body.removeChild(t.overlayElement), U.delete(e));
+		let t = G.get(e);
+		t && (t.cancel$.next(), t.cancel$.complete(), t.subscription.unsubscribe(), t.overlayElement && document.body.contains(t.overlayElement) && document.body.removeChild(t.overlayElement), G.delete(e));
 	}
 	disconnected(e) {
 		this.cleanup(e.element);
 	}
 	reconnected(e) {
-		let t = e.element, n = U.get(t);
+		let t = e.element, n = G.get(t);
 		if (n) {
-			let e = new m(), r = this.setupClickListener(t, n.options, e);
-			U.set(t, {
+			let e = new h(), r = this.setupClickListener(t, n.options, e);
+			G.set(t, {
 				subscription: r,
 				callback: n.callback,
 				options: n.options,
@@ -342,21 +343,21 @@ var ce = H(class extends B {
 			});
 		}
 	}
-}), le = z(class extends R {
+}), pe = V(class extends B {
 	constructor(...e) {
-		super(...e), this.element = null, this.items = [], this.subscription = null, this.typewriterSub = null, this.currentAnimation = null, this.addDisplayEl = null, this.disconnecting$ = new m(), this.initialized = !1;
+		super(...e), this.element = null, this.items = [], this.subscription = null, this.typewriterSub = null, this.currentAnimation = null, this.addDisplayEl = null, this.disconnecting$ = new h(), this.initialized = !1;
 	}
 	render(e) {
-		return I;
+		return R;
 	}
 	update(e, [t = {}]) {
 		if (this.element = e.element, !this.initialized && this.isConnected) {
-			if (this.initialized = !0, this.disconnecting$.closed && (this.disconnecting$ = new m()), this.items = Array.from(this.element.children).filter((e) => e instanceof HTMLElement), this.items.length === 0) return I;
+			if (this.initialized = !0, this.disconnecting$.closed && (this.disconnecting$ = new h()), this.items = Array.from(this.element.children).filter((e) => e instanceof HTMLElement), this.items.length === 0) return R;
 			this.element.style.display = "inline-grid", this.element.style.verticalAlign = "bottom", this.items.forEach((e, t) => {
 				e.style.gridColumn = "1", e.style.gridRow = "1", e.style.visibility = t === 0 ? "" : "hidden";
 			}), this.startCycling(t);
 		}
-		return I;
+		return R;
 	}
 	disconnected() {
 		this.cleanup();
@@ -367,21 +368,21 @@ var ce = H(class extends B {
 		this.items.length < 2 || (t === "add" ? this.startAddCycling(e) : this.startReplaceCycling(e));
 	}
 	startReplaceCycling(e) {
-		let { transition: t = "fade", hold: n = 2e3, duration: r = 300, delay: i = 0 } = e, a = (e) => v(() => new p((i) => {
-			let a = this.items[e], o = (e - 1 + this.items.length) % this.items.length, s = this.items[o], c = parseInt(a.dataset.hold || "", 10) || n, l = this.transitionItems(s, a, t, r).pipe(j(() => w(c)), M(1), N(this.disconnecting$)).subscribe({
+		let { transition: t = "fade", hold: n = 2e3, duration: r = 300, delay: i = 0 } = e, a = (e) => b(() => new m((i) => {
+			let a = this.items[e], o = (e - 1 + this.items.length) % this.items.length, s = this.items[o], c = parseInt(a.dataset.hold || "", 10) || n, l = this.transitionItems(s, a, t, r).pipe(N(() => O(c)), P(1), F(this.disconnecting$)).subscribe({
 				next: () => {
 					i.next(), i.complete();
 				},
 				error: (e) => i.error(e)
 			});
 			return () => l.unsubscribe();
-		})), o = parseInt(this.items[0].dataset.hold || "", 10) || n, s = _(v(() => new p((e) => {
-			let t = w(o).pipe(N(this.disconnecting$)).subscribe({ next: () => {
+		})), o = parseInt(this.items[0].dataset.hold || "", 10) || n, s = v(b(() => new m((e) => {
+			let t = O(o).pipe(F(this.disconnecting$)).subscribe({ next: () => {
 				e.next(), e.complete();
 			} });
 			return () => t.unsubscribe();
-		})), _(...[...Array.from({ length: this.items.length }, (e, t) => t).slice(1), 0].map((e) => a(e))).pipe(re()));
-		this.subscription = w(i).pipe(j(() => s), N(this.disconnecting$)).subscribe();
+		})), v(...[...Array.from({ length: this.items.length }, (e, t) => t).slice(1), 0].map((e) => a(e))).pipe(ae()));
+		this.subscription = O(i).pipe(N(() => s), F(this.disconnecting$)).subscribe();
 	}
 	startAddCycling(e) {
 		let { transition: t = "fade", hold: n = 2e3, duration: r = 300, delay: i = 0, separator: a = ", " } = e, o = this.items.map((e) => e.textContent || "");
@@ -390,33 +391,33 @@ var ce = H(class extends B {
 		});
 		let s = document.createElement("span");
 		this.element.appendChild(s), this.addDisplayEl = s;
-		let c = v(() => {
+		let c = b(() => {
 			s.textContent = "";
 			let e = "", i = o.map((i, o) => {
 				let c = parseInt(this.items[o].dataset.hold || "", 10) || n, l = (o > 0 ? a : "") + i;
-				return v(() => t === "typewriter" ? this.typewriterAdd(s, e, l, r).pipe(F(() => {
+				return b(() => t === "typewriter" ? this.typewriterAdd(s, e, l, r).pipe(L(() => {
 					e += l;
-				}), j(() => w(c))) : v(() => (e += l, s.textContent = e, w(c))));
-			}), c = v(() => {
+				}), N(() => O(c))) : b(() => (e += l, s.textContent = e, O(c))));
+			}), c = b(() => {
 				let t = s.animate([{ opacity: 1 }, { opacity: 0 }], {
 					duration: r,
 					fill: "forwards"
 				});
-				return this.currentAnimation = t, y(t.finished).pipe(F(() => {
+				return this.currentAnimation = t, S(t.finished).pipe(L(() => {
 					t.cancel(), s.textContent = "", s.style.opacity = "", e = "";
-				}), j(() => w(300)));
+				}), N(() => O(300)));
 			});
-			return _(...i, c);
+			return v(...i, c);
 		});
-		this.subscription = w(i).pipe(j(() => c.pipe(re())), N(this.disconnecting$)).subscribe();
+		this.subscription = O(i).pipe(N(() => c.pipe(ae())), F(this.disconnecting$)).subscribe();
 	}
 	typewriterAdd(e, t, n, r) {
-		if (n.length === 0) return C(void 0);
+		if (n.length === 0) return E(void 0);
 		let i = r / n.length;
-		return new p((r) => {
-			let a = 0, o = x(i).pipe(F(() => {
+		return new m((r) => {
+			let a = 0, o = w(i).pipe(L(() => {
 				a++, e.textContent = t + n.slice(0, a);
-			}), P(() => a < n.length), N(this.disconnecting$)).subscribe({ complete: () => {
+			}), I(() => a < n.length), F(this.disconnecting$)).subscribe({ complete: () => {
 				e.textContent = t + n, r.next(), r.complete();
 			} });
 			return () => o.unsubscribe();
@@ -434,16 +435,16 @@ var ce = H(class extends B {
 			duration: n / 2,
 			fill: "forwards"
 		});
-		return this.currentAnimation = r, y(r.finished).pipe(j(() => {
+		return this.currentAnimation = r, S(r.finished).pipe(N(() => {
 			r.cancel(), e.style.visibility = "hidden", t.style.visibility = "";
 			let i = t.animate([{ opacity: 0 }, { opacity: 1 }], {
 				duration: n / 2,
 				fill: "forwards"
 			});
-			return this.currentAnimation = i, y(i.finished).pipe(F(() => {
+			return this.currentAnimation = i, S(i.finished).pipe(L(() => {
 				i.cancel();
-			}), k(() => {}), T(() => f));
-		}), T(() => f));
+			}), M(() => {}), k(() => p));
+		}), k(() => p));
 	}
 	slideTransition(e, t, n) {
 		let r = "cubic-bezier(0.4, 0, 0.2, 1)";
@@ -469,24 +470,24 @@ var ce = H(class extends B {
 			fill: "forwards",
 			easing: r
 		});
-		return this.currentAnimation = a, y(a.finished).pipe(F(() => {
+		return this.currentAnimation = a, S(a.finished).pipe(L(() => {
 			i.cancel(), a.cancel(), e.style.visibility = "hidden";
-		}), k(() => {}), T(() => f));
+		}), M(() => {}), k(() => p));
 	}
 	typewriterTransition(e, t, n) {
 		let r = e.textContent || "", i = t.textContent || "", a = r.length + i.length;
-		if (a === 0) return e.style.visibility = "hidden", t.style.visibility = "", C(void 0);
+		if (a === 0) return e.style.visibility = "hidden", t.style.visibility = "", E(void 0);
 		let o = n / a;
-		return new p((n) => {
+		return new m((n) => {
 			let a = r.length;
-			return this.typewriterSub = _(x(o).pipe(F(() => {
+			return this.typewriterSub = v(w(o).pipe(L(() => {
 				a--, e.textContent = r.slice(0, a);
-			}), P(() => a > 0)), v(() => (e.style.visibility = "hidden", e.textContent = r, t.style.visibility = "", t.textContent = "", C(null))), v(() => {
+			}), I(() => a > 0)), b(() => (e.style.visibility = "hidden", e.textContent = r, t.style.visibility = "", t.textContent = "", E(null))), b(() => {
 				let e = 0;
-				return x(o).pipe(F(() => {
+				return w(o).pipe(L(() => {
 					e++, t.textContent = i.slice(0, e);
-				}), P(() => e < i.length));
-			})).pipe(N(this.disconnecting$)).subscribe({ complete: () => {
+				}), I(() => e < i.length));
+			})).pipe(F(this.disconnecting$)).subscribe({ complete: () => {
 				t.textContent = i, n.next(), n.complete();
 			} }), () => {
 				this.typewriterSub?.unsubscribe(), this.typewriterSub = null;
@@ -498,13 +499,13 @@ var ce = H(class extends B {
 			e.style.gridColumn = "", e.style.gridRow = "", e.style.visibility = t === 0 ? "" : "hidden", e.style.opacity = "", e.style.transform = "";
 		}), this.element = null, this.items = [], this.initialized = !1;
 	}
-}), ue = H(class extends R {
+}), me = W(class extends B {
 	constructor(...e) {
 		super(...e), this.maxBlur = 8, this.duration = 400, this.isBlurred = !1, this.transitionSet = !1;
 	}
 	render(e) {}
 	update(e, [t]) {
-		if (e.type !== V.ELEMENT) throw Error("depthOfField directive must be used on an element");
+		if (e.type !== U.ELEMENT) throw Error("depthOfField directive must be used on an element");
 		this.element = e.element, this.maxBlur = t.maxBlur ?? 8, this.duration = t.duration ?? 400, this.transitionSet || a.value || (this.element.style.transition = `filter ${this.duration}ms cubic-bezier(0.34, 1.2, 0.64, 1), scale ${this.duration}ms cubic-bezier(0.34, 1.2, 0.64, 1)`, this.transitionSet = !0), t.active && !this.isBlurred ? this.applyBlur() : !t.active && this.isBlurred && this.clearBlur();
 	}
 	applyBlur() {
@@ -517,12 +518,12 @@ var ce = H(class extends B {
 		this.isBlurred && this.clearBlur();
 	}
 	reconnected() {}
-}), G = new d(null), K = new d(null), q = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map(), Y = [];
+}), he = new f(null), K = new f(null), q = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map(), Y = [];
 function X(e) {
 	Y.push(`[${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)}] ${e}`);
 }
 var Z = null;
-K.pipe(D((e, t) => e?.target === t?.target && e?.position === t?.position)).subscribe((e) => {
+K.pipe(A((e, t) => e?.target === t?.target && e?.position === t?.position)).subscribe((e) => {
 	if (!e) return void (Z && (Z.style.display = "none"));
 	if (a.value) return;
 	let t = function() {
@@ -560,20 +561,20 @@ K.pipe(D((e, t) => e?.target === t?.target && e?.position === t?.position)).subs
 		display: "block"
 	});
 });
-var de = class extends B {
+var ge = class extends H {
 	constructor(...e) {
-		super(...e), this.destroy$ = new m();
+		super(...e), this.destroy$ = new h();
 	}
 	update(e, [t]) {
 		if (this.id = t, !this.element) {
 			let t = e.element;
-			this.element = t, t.draggable = !0, t.style.cursor = "grab", b(t, "dragstart").pipe(F((e) => {
-				e.stopPropagation(), e.dataTransfer?.setData("application/json", JSON.stringify({ id: this.id })), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), t.style.cursor = "grabbing", Y.length = 0, X(`DRAGSTART id=${this.id} tag=${t.tagName}`), G.next(this.id), J.clear();
+			this.element = t, t.draggable = !0, t.style.cursor = "grab", C(t, "dragstart").pipe(L((e) => {
+				e.stopPropagation(), e.dataTransfer?.setData("application/json", JSON.stringify({ id: this.id })), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), t.style.cursor = "grabbing", Y.length = 0, X(`DRAGSTART id=${this.id} tag=${t.tagName}`), he.next(this.id), J.clear();
 				let n = t.parentElement;
 				if (n) for (let [e, t] of q) t.parentElement === n && J.set(e, t.getBoundingClientRect());
-			}), ne(h), F(() => {
+			}), ie(g), L(() => {
 				a.value || (t.style.transition = "transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease", t.style.transform = "scale(1.03)", t.style.boxShadow = "0 8px 25px rgba(0,0,0,0.15)", t.style.opacity = "0.6", t.style.zIndex = "1000", t.style.pointerEvents = "none");
-			}), j(() => b(t, "dragend").pipe(M(1), F(() => {
+			}), N(() => C(t, "dragend").pipe(P(1), L(() => {
 				let e = K.value;
 				if (t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("box-shadow"), t.style.removeProperty("opacity"), t.style.removeProperty("z-index"), t.style.removeProperty("pointer-events"), t.style.cursor = "grab", e) {
 					let { target: t, destinationId: r, position: i } = e;
@@ -585,7 +586,7 @@ var de = class extends B {
 						},
 						bubbles: !0,
 						composed: !0
-					})), w(0, h).pipe(ie(1), M(1)).subscribe(() => {
+					})), O(0, g).pipe(oe(1), P(1)).subscribe(() => {
 						if (!a.value && J.size !== 0) {
 							for (let [e, t] of J) {
 								let r = q.get(e);
@@ -601,36 +602,36 @@ var de = class extends B {
 						}
 					});
 				}
-				G.next(null), K.next(null), X(`DRAGEND id=${this.id}`), Y.length !== 0 && (Y.length = 0);
-			}))), N(this.destroy$)).subscribe();
+				he.next(null), K.next(null), X(`DRAGEND id=${this.id}`), Y.length !== 0 && (Y.length = 0);
+			}))), F(this.destroy$)).subscribe();
 		}
-		return this.registeredId && this.registeredId !== t && q.delete(this.registeredId), q.set(t, this.element), this.registeredId = t, L;
+		return this.registeredId && this.registeredId !== t && q.delete(this.registeredId), q.set(t, this.element), this.registeredId = t, z;
 	}
 	disconnected() {
 		this.destroy$.next(), this.destroy$.complete(), this.registeredId && q.delete(this.registeredId), this.element = void 0;
 	}
 	reconnected() {
-		this.destroy$ = new m(), this.element = void 0;
+		this.destroy$ = new h(), this.element = void 0;
 	}
 	render(e) {
-		return L;
+		return z;
 	}
-}, fe = H(de), pe = class extends B {
+}, _e = W(ge), ve = class extends H {
 	constructor(...e) {
-		super(...e), this.destroy$ = new m();
+		super(...e), this.destroy$ = new h();
 	}
 	update(e, [t]) {
 		if (this.destinationId = t, !this.element) {
 			let t = e.element;
-			this.element = t, b(t, "dragenter").pipe(F((e) => {
+			this.element = t, C(t, "dragenter").pipe(L((e) => {
 				X(`NATIVE-DRAGENTER dest=${this.destinationId}`), e.preventDefault();
-			}), N(this.destroy$)).subscribe(), b(t, "dragover").pipe(F((e) => {
+			}), F(this.destroy$)).subscribe(), C(t, "dragover").pipe(L((e) => {
 				X(`NATIVE-DRAGOVER dest=${this.destinationId}`), e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
-			}), N(this.destroy$)).subscribe(), b(t, "drop").pipe(F((e) => {
+			}), F(this.destroy$)).subscribe(), C(t, "drop").pipe(L((e) => {
 				e.preventDefault(), X(`NATIVE-DROP dest=${this.destinationId}`);
-			}), N(this.destroy$)).subscribe(), G.pipe(j((e) => e && e !== this.destinationId ? (X(`DROP-ACTIVE dest=${this.destinationId} src=${e}`), b(t, "dragover").pipe(F((e) => {
+			}), F(this.destroy$)).subscribe(), he.pipe(N((e) => e && e !== this.destinationId ? (X(`DROP-ACTIVE dest=${this.destinationId} src=${e}`), C(t, "dragover").pipe(L((e) => {
 				e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
-			}), F((n) => {
+			}), L((n) => {
 				let r = function(e, t, n) {
 					let r = t.getBoundingClientRect(), i = n ? q.get(n) : null;
 					if (!i) return e.clientY < r.top + r.height / 2 ? "before" : "after";
@@ -647,26 +648,62 @@ var de = class extends B {
 					destinationId: this.destinationId,
 					position: r
 				} : null);
-			}))) : (K.next(null), f)), N(this.destroy$)).subscribe();
+			}))) : (K.next(null), p)), F(this.destroy$)).subscribe();
 		}
-		return L;
+		return z;
 	}
 	disconnected() {
 		this.destroy$.next(), this.destroy$.complete(), this.element = void 0;
 	}
 	reconnected() {
-		this.destroy$ = new m(), this.element = void 0;
+		this.destroy$ = new h(), this.element = void 0;
 	}
 	render(e) {
-		return L;
+		return z;
 	}
-}, me = H(pe), he = H(class extends R {
+}, ye = W(ve), be = V(class extends B {
+	constructor(...e) {
+		super(...e), this.element = null, this.disconnecting$ = new h();
+	}
+	apply(e, t) {
+		if (!this.element) return;
+		let n = window.visualViewport, r = n?.height ?? window.innerHeight, i = n?.width ?? window.innerWidth, a = this.element.getBoundingClientRect(), o = Math.max(0, r - a.top), s = Math.max(0, i - a.left), c = t ? 0 : e, l = this.element.style;
+		l.boxSizing = "border-box", l.height = `${o}px`, l.width = `${s}px`, l.paddingBottom = `${c}px`, l.minHeight = "0", l.minWidth = "0", l.overflow = "hidden";
+	}
+	subscribe() {
+		if (!this.element) return;
+		let e = C(window, "resize", { passive: !0 });
+		_([
+			T(e, window.visualViewport ? T(C(window.visualViewport, "resize", { passive: !0 }), C(window.visualViewport, "scroll", { passive: !0 })) : e, C(window, "orientationchange"), C(document, "focusout", { passive: !0 }).pipe(N(() => O(100))), u(this.element), this.element.parentElement ? u(this.element.parentElement) : p).pipe(ee(16), se(null)),
+			s.bottomOffset$,
+			s.fullscreen$
+		]).pipe(j(() => {
+			let e = window.visualViewport;
+			return !e || Math.abs(e.scale - 1) <= .01;
+		}), M(([, e, t]) => ({
+			bottomOffset: e,
+			isFullscreen: t
+		})), A((e, t) => e.bottomOffset === t.bottomOffset && e.isFullscreen === t.isFullscreen), L(({ bottomOffset: e, isFullscreen: t }) => this.apply(e, t)), F(this.disconnecting$)).subscribe();
+	}
+	render() {}
+	update(e) {
+		if (e.type !== U.ELEMENT) throw Error("fill directive can only be used on elements");
+		let t = e.element;
+		this.element !== t && (this.element = t, this.subscribe());
+	}
+	disconnected() {
+		this.disconnecting$.next(), this.element = null;
+	}
+	reconnected() {
+		this.element && (this.disconnecting$ = new h(), this.subscribe());
+	}
+}), xe = W(class extends B {
 	constructor(...e) {
 		super(...e), this.hasAnimated = !1;
 	}
 	render(e) {}
 	update(e, [t]) {
-		if (e.type !== V.ELEMENT) throw Error("gravity directive must be used on an element");
+		if (e.type !== U.ELEMENT) throw Error("gravity directive must be used on an element");
 		if (this.element = e.element, this.options = t, this.hasAnimated) return;
 		if (a.value) return void (this.hasAnimated = !0);
 		let n = Math.max(.3, Math.min(3, t?.mass ?? 1)), r = t?.distance ?? 30, i = (t?.delay ?? 0) + (t?.stagger ?? 0);
@@ -691,30 +728,30 @@ var de = class extends B {
 			delay: i,
 			easing: a.easingFallback,
 			fill: "backwards"
-		}), y(this.animation.finished).pipe(M(1), F(() => {
+		}), S(this.animation.finished).pipe(P(1), L(() => {
 			this.element.style.willChange = "", this.animation = void 0;
-		}), T(() => f)).subscribe();
+		}), k(() => p)).subscribe();
 	}
 	disconnected() {
 		this.animation?.cancel(), this.animation = void 0;
 	}
-}), ge = z(class extends R {
+}), Se = V(class extends B {
 	constructor(...e) {
 		super(...e), this.state = null;
 	}
 	render(e, t) {
-		return I;
+		return R;
 	}
 	update(e, [t, n]) {
 		let r = e.element, i, a, o, s = {};
 		if (typeof t == "function" ? (i = t, s = n || {}) : (a = t.onEnter, o = t.onExit, s = t.options || {}, i = (e) => {
 			e && a && a(), !e && o && o();
-		}), this.state?.element === r) return I;
+		}), this.state?.element === r) return R;
 		this.cleanup();
 		let { once: c = !1, threshold: l = 0, rootMargin: u = "0px", delay: d = 0 } = s, f = new IntersectionObserver((e) => {
 			if (!this.state) return;
 			let t = e[0], n = t.isIntersecting;
-			d > 0 && n ? (this.state.delayTimerSub && this.state.delayTimerSub.unsubscribe(), this.state.delayTimerSub = w(d).pipe(M(1), F(() => this.triggerCallback(n, t))).subscribe()) : (!n && this.state.delayTimerSub && (this.state.delayTimerSub.unsubscribe(), this.state.delayTimerSub = void 0), this.triggerCallback(n, t));
+			d > 0 && n ? (this.state.delayTimerSub && this.state.delayTimerSub.unsubscribe(), this.state.delayTimerSub = O(d).pipe(P(1), L(() => this.triggerCallback(n, t))).subscribe()) : (!n && this.state.delayTimerSub && (this.state.delayTimerSub.unsubscribe(), this.state.delayTimerSub = void 0), this.triggerCallback(n, t));
 		}, {
 			threshold: l,
 			rootMargin: u
@@ -728,7 +765,7 @@ var de = class extends B {
 			once: c,
 			delay: d,
 			hasFired: !1
-		}, f.observe(r), I;
+		}, f.observe(r), R;
 	}
 	triggerCallback(e, t) {
 		this.state && (this.state.once ? e && !this.state.hasFired && (this.state.hasFired = !0, this.state.callback(e, t), this.cleanup()) : this.state.callback(e, t));
@@ -745,10 +782,10 @@ var de = class extends B {
 	reconnected() {
 		this.state && this.state.observer.observe(this.state.element);
 	}
-}), _e = {
+}), Ce = {
 	active: !0,
 	intensity: "medium"
-}, ve = {
+}, we = {
 	light: {
 		blur: 12,
 		sat: 1.3,
@@ -773,32 +810,32 @@ var de = class extends B {
 		border: .35,
 		shadow: .1
 	}
-}, ye = [
+}, Te = [
 	"backdropFilter",
 	"background",
 	"boxShadow",
 	"borderTop",
 	"borderBottom"
-], be = z(class extends R {
+], Ee = V(class extends B {
 	constructor(...e) {
 		super(...e), this.state = null;
 	}
 	render(e) {
-		return I;
+		return R;
 	}
 	update(e, [t = {}]) {
 		let n = e.element, r = {
-			..._e,
+			...Ce,
 			...t
 		};
-		return r.active ? this.activate(n, r) : this.cleanup(), I;
+		return r.active ? this.activate(n, r) : this.cleanup(), R;
 	}
 	activate(e, t) {
 		if (!this.isConnected) return;
-		let n = ve[t.intensity];
+		let n = we[t.intensity];
 		if (!this.state) {
 			let t = {};
-			for (let n of ye) t[n] = e.style[n];
+			for (let n of Te) t[n] = e.style[n];
 			this.state = {
 				element: e,
 				origStyles: t
@@ -821,31 +858,31 @@ var de = class extends B {
 	cleanup() {
 		if (!this.state) return;
 		let { element: e, origStyles: t } = this.state;
-		for (let n of ye) e.style[n] = t[n];
+		for (let n of Te) e.style[n] = t[n];
 		e.style.removeProperty("-webkit-backdrop-filter"), this.state = null;
 	}
 	disconnected() {
 		this.cleanup();
 	}
 	reconnected() {}
-}), Q = "schmancy-lb-rotate", xe = !1;
-function Se() {
-	if (xe) return;
+}), Q = "schmancy-lb-rotate", De = !1;
+function Oe() {
+	if (De) return;
 	let e = document.createElement("style");
-	e.id = "schmancy-living-border-shared", e.textContent = `\n\t\t@property --${Q}-angle {\n\t\t\tsyntax: '<angle>';\n\t\t\tinitial-value: 0deg;\n\t\t\tinherits: false;\n\t\t}\n\t\t@keyframes ${Q} {\n\t\t\tto { --${Q}-angle: 360deg; }\n\t\t}\n\t`, document.head.appendChild(e), xe = !0;
+	e.id = "schmancy-living-border-shared", e.textContent = `\n\t\t@property --${Q}-angle {\n\t\t\tsyntax: '<angle>';\n\t\t\tinitial-value: 0deg;\n\t\t\tinherits: false;\n\t\t}\n\t\t@keyframes ${Q} {\n\t\t\tto { --${Q}-angle: 360deg; }\n\t\t}\n\t`, document.head.appendChild(e), De = !0;
 }
-var Ce = H(class extends R {
+var ke = W(class extends B {
 	constructor(...e) {
-		super(...e), this.teardown$ = new m(), this.didSetPosition = !1;
+		super(...e), this.teardown$ = new h(), this.didSetPosition = !1;
 	}
 	render(e) {}
 	update(e, [t]) {
-		if (e.type !== V.ELEMENT) throw Error("livingBorder directive must be used on an element");
+		if (e.type !== U.ELEMENT) throw Error("livingBorder directive must be used on an element");
 		let n = JSON.stringify(t ?? {});
-		this.element && n === this.prevKey || (this.prevKey = n, this.element = e.element, this.lastOptions = t, a.value || (this.teardown$.next(), this.cleanup(), Se(), this.createBorderOverlay(t)));
+		this.element && n === this.prevKey || (this.prevKey = n, this.element = e.element, this.lastOptions = t, a.value || (this.teardown$.next(), this.cleanup(), Oe(), this.createBorderOverlay(t)));
 	}
 	reconnected() {
-		this.lastOptions && !a.value && (Se(), this.createBorderOverlay(this.lastOptions));
+		this.lastOptions && !a.value && (Oe(), this.createBorderOverlay(this.lastOptions));
 	}
 	createBorderOverlay(e) {
 		let t = e?.width ?? 1, n = e?.color ?? "var(--schmancy-sys-color-primary-default)", r = e?.spread ?? 6, i = e?.duration ?? 3e3, a = e?.onHover ?? !1;
@@ -869,11 +906,11 @@ var Ce = H(class extends R {
 			filter: `blur(${.3 * r}px) drop-shadow(0 0 ${r}px color-mix(in srgb, ${n} 40%, transparent))`,
 			opacity: a ? "0" : "0.5",
 			transition: "opacity 300ms ease"
-		}), this.element.prepend(this.borderEl), S(b(this.element, "mouseenter").pipe(k(() => {
+		}), this.element.prepend(this.borderEl), T(C(this.element, "mouseenter").pipe(M(() => {
 			this.borderEl && (this.borderEl.style.opacity = a ? "0.7" : "0.8");
-		})), b(this.element, "mouseleave").pipe(k(() => {
+		})), C(this.element, "mouseleave").pipe(M(() => {
 			this.borderEl && (this.borderEl.style.opacity = a ? "0" : "0.5");
-		}))).pipe(N(this.teardown$)).subscribe();
+		}))).pipe(F(this.teardown$)).subscribe();
 	}
 	cleanup() {
 		this.borderEl?.remove(), this.borderEl = void 0;
@@ -881,9 +918,9 @@ var Ce = H(class extends R {
 	disconnected() {
 		this.teardown$.next(), this.cleanup(), this.didSetPosition && this.element && (this.element.style.position = "", this.didSetPosition = !1);
 	}
-}), $ = /* @__PURE__ */ new WeakMap(), we = H(class extends B {
+}), $ = /* @__PURE__ */ new WeakMap(), Ae = W(class extends H {
 	constructor(e) {
-		if (super(e), e.type !== V.ELEMENT) throw Error("longPress directive can only be used on elements");
+		if (super(e), e.type !== U.ELEMENT) throw Error("longPress directive can only be used on elements");
 	}
 	render(e, t) {}
 	update(e, [t, n = {}]) {
@@ -903,13 +940,13 @@ var Ce = H(class extends R {
 		return t ? e.duration === t.duration && e.movementThreshold === t.movementThreshold : Object.keys(e).length === 0;
 	}
 	setupLongPress(e, t, n = {}) {
-		let r = n.duration ?? 500, i = n.movementThreshold ?? 10, a = b(e, "pointerdown"), o = b(window, "pointerup"), s = b(window, "pointermove"), c = b(window, "pointercancel");
-		return a.pipe(j((e) => {
-			let n = e.clientX, a = e.clientY, l = S(o, c, s.pipe(O((e) => {
+		let r = n.duration ?? 500, i = n.movementThreshold ?? 10, a = C(e, "pointerdown"), o = C(window, "pointerup"), s = C(window, "pointermove"), c = C(window, "pointercancel");
+		return a.pipe(N((e) => {
+			let n = e.clientX, a = e.clientY, l = T(o, c, s.pipe(j((e) => {
 				let t = e.clientX - n, r = e.clientY - a;
 				return Math.sqrt(t * t + r * r) > i;
-			}))).pipe(te());
-			return w(r).pipe(N(l), F(() => t()));
+			}))).pipe(re());
+			return O(r).pipe(F(l), L(() => t()));
 		})).subscribe();
 	}
 	disconnected(e) {
@@ -920,7 +957,7 @@ var Ce = H(class extends R {
 		let t = e.element, n = $.get(t);
 		n && (n.subscription = this.setupLongPress(t, n.callback, n.options));
 	}
-}), Te = {
+}), je = {
 	active: !0,
 	autoHideDuration: 3e3,
 	background: !0,
@@ -934,7 +971,7 @@ var Ce = H(class extends R {
 	temperature: 0,
 	chromaticAberration: 1,
 	particleCount: 30
-}, Ee = "cubic-bezier(0.37, 0, 0.63, 1)", De = "cubic-bezier(0.25, 0.1, 0.25, 1)", Oe = !1, ke = class e {
+}, Me = "cubic-bezier(0.37, 0, 0.63, 1)", Ne = "cubic-bezier(0.25, 0.1, 0.25, 1)", Pe = !1, Fe = class e {
 	constructor() {
 		this.elementToDirective = /* @__PURE__ */ new WeakMap(), this.instances = /* @__PURE__ */ new Set(), this.observer = null, this.visibilitySub = null, this.tabVisible = !0;
 	}
@@ -957,7 +994,7 @@ var Ce = H(class extends R {
 				let e = this.elementToDirective.get(t.target);
 				e && e.onVisibilityChange(t.isIntersecting && this.tabVisible);
 			}
-		}, { threshold: 0 }), this.visibilitySub = b(document, "visibilitychange").pipe(F(() => {
+		}, { threshold: 0 }), this.visibilitySub = C(document, "visibilitychange").pipe(L(() => {
 			this.tabVisible = document.visibilityState === "visible";
 			for (let e of this.instances) e.onVisibilityChange(this.tabVisible);
 		})).subscribe();
@@ -965,19 +1002,19 @@ var Ce = H(class extends R {
 	teardown() {
 		this.observer &&= (this.observer.disconnect(), null), this.visibilitySub &&= (this.visibilitySub.unsubscribe(), null);
 	}
-}, Ae = z(class extends R {
+}, Ie = V(class extends B {
 	constructor(...e) {
-		super(...e), this.state = null, this.coordinator = ke.instance;
+		super(...e), this.state = null, this.coordinator = Fe.instance;
 	}
 	render(e) {
-		return I;
+		return R;
 	}
 	update(e, [t = {}]) {
 		let n = e.element, r = {
-			...Te,
+			...je,
 			...t
 		};
-		return r.active ? this.show(n, r) : this.hide(r), I;
+		return r.active ? this.show(n, r) : this.hide(r), R;
 	}
 	onVisibilityChange(e) {
 		if (!this.state?.overlay) return;
@@ -986,8 +1023,8 @@ var Ce = H(class extends R {
 	}
 	show(e, t) {
 		(function() {
-			if (Oe || typeof document > "u") return;
-			Oe = !0;
+			if (Pe || typeof document > "u") return;
+			Pe = !0;
 			let e = document.createElement("style");
 			e.id = "nebula-directive-styles", e.textContent = "\n/* =============================================================================\n   NEBULA v3 - SURREAL DIMENSIONAL RIFT - GPU-COMPOSITED CSS ANIMATIONS\n   Chromatic aberration, iridescent hue-cycling, event horizon, tendrils.\n   Performance: translate3d + opacity for most layers, hue-rotate for core only.\n   ============================================================================= */\n\n/* Chromatic red channel - rightward aberration drift */\n@keyframes nebula-chromatic-red {\n	0%, 100% { transform: translate3d(var(--nebula-aberration, 3px), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 1.8), -1%, 0); }\n	50% { transform: translate3d(var(--nebula-aberration, 3px), 1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 0.5), 0, 0); }\n}\n\n/* Chromatic blue channel - leftward counter-drift */\n@keyframes nebula-chromatic-blue {\n	0%, 100% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -0.5), 1%, 0); }\n	50% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), -1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1.8), 0, 0); }\n}\n\n/* Iridescent core - continuous 360-degree hue rotation (the ONE filter animation) */\n@keyframes nebula-iridescent {\n	0% { filter: hue-rotate(0deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }\n	100% { filter: hue-rotate(360deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }\n}\n\n/* Bioluminescent tendrils - organic breathing */\n@keyframes nebula-tendrils-breathe {\n	0%, 100% { opacity: 0.6; transform: translate3d(0, 0, 0); }\n	30% { opacity: 0.9; transform: translate3d(1%, -1.5%, 0); }\n	60% { opacity: 0.5; transform: translate3d(-1%, 1.5%, 0); }\n}\n\n/* Quantum particle twinkle - opacity only (cheapest) */\n@keyframes nebula-particle-twinkle {\n	0%, 100% { opacity: 0.7; }\n	15% { opacity: 1; }\n	40% { opacity: 0.5; }\n	65% { opacity: 0.85; }\n	85% { opacity: 0.6; }\n}\n\n/* Idle breathing - gentle pulse when dimmed */\n@keyframes nebula-idle-breathe {\n	0%, 100% {\n		opacity: var(--nebula-idle-opacity, 0.08);\n		filter: blur(calc(var(--nebula-blur-base, 10px) * 8));\n		transform: scale(1);\n	}\n	50% {\n		opacity: calc(var(--nebula-idle-opacity, 0.08) * 1.4);\n		filter: blur(calc(var(--nebula-blur-base, 10px) * 10));\n		transform: scale(1.005);\n	}\n}\n\n/* =============================================================================\n   STATE CLASSES - Control via CSS class toggle (no JS animation calls)\n   ============================================================================= */\n\n.nebula-overlay {\n	contain: strict;\n	pointer-events: none;\n	isolation: isolate;\n}\n\n.nebula-overlay.paused .nebula-layer {\n	animation-play-state: paused !important;\n}\n\n.nebula-overlay.running .nebula-layer {\n	animation-play-state: running !important;\n}\n\n/* Reduced motion - respect user preferences */\n@media (prefers-reduced-motion: reduce) {\n	.nebula-layer {\n		animation: none !important;\n		transition: opacity 0s !important;\n	}\n}\n", document.head.appendChild(e);
 		})(), this.state?.autoHideSub && (this.state.autoHideSub.unsubscribe(), this.state.autoHideSub = null);
@@ -1061,7 +1098,7 @@ var Ce = H(class extends R {
 				filter: `blur(${18 * r.blur}px) saturate(1.4)`,
 				mixBlendMode: "screen",
 				transform: "translateZ(0)",
-				animation: `nebula-chromatic-red ${35e3 / r.speed}ms ${De} infinite`
+				animation: `nebula-chromatic-red ${35e3 / r.speed}ms ${Ne} infinite`
 			}), C.appendChild(t);
 			let n = document.createElement("div");
 			n.className = "nebula-layer", Object.assign(n.style, {
@@ -1071,7 +1108,7 @@ var Ce = H(class extends R {
 				filter: `blur(${18 * r.blur}px) saturate(1.4)`,
 				mixBlendMode: "screen",
 				transform: "translateZ(0)",
-				animation: `nebula-chromatic-blue ${35e3 / r.speed}ms ${De} infinite`
+				animation: `nebula-chromatic-blue ${35e3 / r.speed}ms ${Ne} infinite`
 			}), C.appendChild(n);
 			let i = document.createElement("div");
 			i.className = "nebula-layer", Object.assign(i.style, {
@@ -1090,7 +1127,7 @@ var Ce = H(class extends R {
 				filter: `blur(${14 * r.blur}px)`,
 				mixBlendMode: "screen",
 				transform: "translateZ(0)",
-				animation: `nebula-tendrils-breathe ${22e3 / r.speed}ms ${Ee} infinite`
+				animation: `nebula-tendrils-breathe ${22e3 / r.speed}ms ${Me} infinite`
 			}), C.appendChild(a), r.particleCount > 0) {
 				let e = document.createElement("div");
 				e.className = "nebula-layer";
@@ -1105,7 +1142,7 @@ var Ce = H(class extends R {
 					background: t.join(","),
 					mixBlendMode: "screen",
 					transform: "translateZ(0)",
-					animation: `nebula-particle-twinkle ${5e3 / r.speed}ms ${Ee} infinite`
+					animation: `nebula-particle-twinkle ${5e3 / r.speed}ms ${Me} infinite`
 				}), C.appendChild(e);
 			}
 		}
@@ -1155,7 +1192,7 @@ var Ce = H(class extends R {
 		}, this.coordinator.register(this, n);
 	}
 	scheduleAutoHide(e) {
-		!this.state || e.autoHideDuration <= 0 || (this.state.autoHideSub = w(e.autoHideDuration).pipe(M(1), F(() => {
+		!this.state || e.autoHideDuration <= 0 || (this.state.autoHideSub = O(e.autoHideDuration).pipe(P(1), L(() => {
 			this.state && (this.state.autoHideSub = null, this.hide(this.state.options));
 		})).subscribe());
 	}
@@ -1205,8 +1242,8 @@ var Ce = H(class extends R {
 			easing: s,
 			fill: "forwards"
 		});
-		t.idleBreathe && !a && y(c.finished).pipe(M(1), T(() => f)).subscribe(() => {
-			this.state?.overlay && (this.state.overlay.style.animation = `nebula-idle-breathe ${12e3 / r.speed}ms ${Ee} infinite`);
+		t.idleBreathe && !a && S(c.finished).pipe(P(1), k(() => p)).subscribe(() => {
+			this.state?.overlay && (this.state.overlay.style.animation = `nebula-idle-breathe ${12e3 / r.speed}ms ${Me} infinite`);
 		});
 	}
 	cleanup() {
@@ -1218,23 +1255,23 @@ var Ce = H(class extends R {
 	reconnected() {
 		this.state && this.coordinator.register(this, this.state.element);
 	}
-}), je = {
+}), Le = {
 	smooth: t,
 	snappy: n,
 	bouncy: r,
 	gentle: i
-}, Me = z(class extends R {
+}, Re = V(class extends B {
 	constructor(e) {
-		if (super(e), this.initialized = !1, this.element = null, e.type !== V.ELEMENT) throw Error("reveal() can only be used on elements");
+		if (super(e), this.initialized = !1, this.element = null, e.type !== U.ELEMENT) throw Error("reveal() can only be used on elements");
 	}
 	render(e, t) {
-		return I;
+		return R;
 	}
 	update(t, [n = !1, r = {}]) {
 		let i = t.element;
 		this.element = i;
-		let { preset: o = "smooth", maxHeight: s = "10rem", duration: c, easing: l } = r, u = je[o], d = c ?? u.duration, f = l ?? e(u), p = a.value;
-		return this.initialized ||= (this.setupElement(i, d, f, p), !0), n ? (i.style.maxHeight = s, i.style.opacity = "1", i.style.transform = "translateY(0) scale(1)", i.style.pointerEvents = "", i.style.paddingTop = "", i.style.paddingBottom = "", i.style.marginTop = "", i.style.marginBottom = "", i.removeAttribute("aria-hidden"), i.removeAttribute("inert")) : (i.style.maxHeight = "0", i.style.opacity = "0", i.style.transform = "translateY(-8px) scale(0.98)", i.style.pointerEvents = "none", i.style.paddingTop = "0", i.style.paddingBottom = "0", i.style.marginTop = "0", i.style.marginBottom = "0", i.setAttribute("aria-hidden", "true"), i.setAttribute("inert", "")), I;
+		let { preset: o = "smooth", maxHeight: s = "10rem", duration: c, easing: l } = r, u = Le[o], d = c ?? u.duration, f = l ?? e(u), p = a.value;
+		return this.initialized ||= (this.setupElement(i, d, f, p), !0), n ? (i.style.maxHeight = s, i.style.opacity = "1", i.style.transform = "translateY(0) scale(1)", i.style.pointerEvents = "", i.style.paddingTop = "", i.style.paddingBottom = "", i.style.marginTop = "", i.style.marginBottom = "", i.removeAttribute("aria-hidden"), i.removeAttribute("inert")) : (i.style.maxHeight = "0", i.style.opacity = "0", i.style.transform = "translateY(-8px) scale(0.98)", i.style.pointerEvents = "none", i.style.paddingTop = "0", i.style.paddingBottom = "0", i.style.marginTop = "0", i.style.marginBottom = "0", i.setAttribute("aria-hidden", "true"), i.setAttribute("inert", "")), R;
 	}
 	setupElement(e, t, n, r) {
 		e.style.overflow = "hidden", e.style.transition = r ? "none" : [
@@ -1249,28 +1286,78 @@ var Ce = H(class extends R {
 		this.element && (this.element.style.willChange = "");
 	}
 	reconnected() {}
-}), Ne = !1, Pe = H(class extends R {
+}), ze = !1, Be = W(class extends B {
 	constructor(...e) {
-		super(...e), this.teardown$ = new m();
+		super(...e), this.teardown$ = new h();
 	}
 	render() {}
 	update(e) {
-		if (e.type !== V.ELEMENT) throw Error("ripple directive must be used on an element");
+		if (e.type !== U.ELEMENT) throw Error("ripple directive must be used on an element");
 		this.element = e.element, function() {
-			if (Ne) return;
+			if (ze) return;
 			let e = document.createElement("style");
-			e.id = "schmancy-ripple-shared", e.textContent = "\n		.schmancy-ripple-effect {\n			position: absolute;\n			border-radius: 50%;\n			background: var(--schmancy-sys-color-surface-on);\n			opacity: 0.12;\n			transform: scale(0);\n			animation: schmancy-ripple-expand 600ms linear forwards;\n			pointer-events: none;\n			aria-hidden: true;\n		}\n		@keyframes schmancy-ripple-expand {\n			to { transform: scale(4); opacity: 0; }\n		}\n	", document.head.appendChild(e), Ne = !0;
-		}(), getComputedStyle(this.element).position === "static" && (this.element.style.position = "relative"), this.element.style.overflow = "hidden", this.teardown$.next(), b(this.element, "click").pipe(N(this.teardown$)).subscribe((e) => this.addRipple(e));
+			e.id = "schmancy-ripple-shared", e.textContent = "\n		.schmancy-ripple-effect {\n			position: absolute;\n			border-radius: 50%;\n			background: var(--schmancy-sys-color-surface-on);\n			opacity: 0.12;\n			transform: scale(0);\n			animation: schmancy-ripple-expand 600ms linear forwards;\n			pointer-events: none;\n			aria-hidden: true;\n		}\n		@keyframes schmancy-ripple-expand {\n			to { transform: scale(4); opacity: 0; }\n		}\n	", document.head.appendChild(e), ze = !0;
+		}(), getComputedStyle(this.element).position === "static" && (this.element.style.position = "relative"), this.element.style.overflow = "hidden", this.teardown$.next(), C(this.element, "click").pipe(F(this.teardown$)).subscribe((e) => this.addRipple(e));
 	}
 	reconnected() {
-		this.teardown$.next(), b(this.element, "click").pipe(N(this.teardown$)).subscribe((e) => this.addRipple(e));
+		this.teardown$.next(), C(this.element, "click").pipe(F(this.teardown$)).subscribe((e) => this.addRipple(e));
 	}
 	addRipple(e) {
 		let t = this.element.getBoundingClientRect(), n = Math.max(t.width, t.height), r = n / 2, i = document.createElement("span");
-		i.className = "schmancy-ripple-effect", i.setAttribute("aria-hidden", "true"), i.style.width = `${n}px`, i.style.height = `${n}px`, i.style.left = e.clientX - t.left - r + "px", i.style.top = e.clientY - t.top - r + "px", this.element.appendChild(i), b(i, "animationend").pipe(M(1)).subscribe(() => i.remove());
+		i.className = "schmancy-ripple-effect", i.setAttribute("aria-hidden", "true"), i.style.width = `${n}px`, i.style.height = `${n}px`, i.style.left = e.clientX - t.left - r + "px", i.style.top = e.clientY - t.top - r + "px", this.element.appendChild(i), C(i, "animationend").pipe(P(1)).subscribe(() => i.remove());
 	}
 	disconnected() {
 		this.teardown$.next();
 	}
+}), Ve = "schmancy-overflow-within-hidden", He = !1, Ue = V(class extends B {
+	constructor(...e) {
+		super(...e), this.element = null, this.disconnecting$ = new h();
+	}
+	render(e) {
+		return R;
+	}
+	update(e, [t = {}]) {
+		if (e.type !== U.ELEMENT) throw Error("overflowWithin directive can only be used on elements");
+		let n = e.element, { hide: r = !1, direction: i = "both", name: a, debounce: o = 10 } = t, s = n.style;
+		s.minHeight = "0", s.minWidth = "0", s.boxSizing = "border-box", s.overflowY = i === "horizontal" ? "hidden" : "auto", s.overflowX = i === "vertical" ? "hidden" : "auto", s.scrollBehavior = "smooth", s.overscrollBehavior = "contain", r ? (function() {
+			if (He) return;
+			He = !0;
+			let e = new CSSStyleSheet();
+			e.replaceSync(`.${Ve} { scrollbar-width: none; -ms-overflow-style: none; }\n\t\t .${Ve}::-webkit-scrollbar { display: none; }`), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e];
+		}(), n.classList.add(Ve)) : n.classList.remove(Ve);
+		let c = this.element !== n, l = this.currentName !== a;
+		return c ? (this.element = n, this.subscribe(o, a)) : l && (this.disconnecting$.next(), this.disconnecting$ = new h(), this.subscribe(o, a)), this.currentName = a, R;
+	}
+	subscribe(e, t) {
+		if (!this.element) return;
+		let n = this.element;
+		C(n, "scroll", { passive: !0 }).pipe(y(e), D(this.disconnecting$)).subscribe((e) => {
+			n.dispatchEvent(new CustomEvent("scroll", {
+				detail: {
+					scrollTop: n.scrollTop,
+					scrollHeight: n.scrollHeight,
+					clientHeight: n.clientHeight,
+					scrollLeft: n.scrollLeft,
+					scrollWidth: n.scrollWidth,
+					clientWidth: n.clientWidth,
+					e
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}), t !== void 0 && C(window, "@schmancy:scrollTo").pipe(x((e) => e.detail.name === t && e.detail.action === "scrollTo"), D(this.disconnecting$)).subscribe((e) => {
+			let t = {
+				behavior: "smooth",
+				top: e.detail.top
+			};
+			typeof e.detail.left == "number" && (t.left = e.detail.left), n.scrollTo(t);
+		});
+	}
+	disconnected() {
+		this.disconnecting$.next(), this.element = null;
+	}
+	reconnected() {
+		this.element && (this.disconnecting$ = new h(), this.subscribe(10, this.currentName));
+	}
 });
-export { de as DragDirective, pe as DropDirective, oe as animateText, se as color, ce as confirmClick, o as cursorGlow, le as cycleText, ue as depthOfField, fe as drag, me as drop, l as fromResizeObserver, s as fullHeight, c as fullWidth, he as gravity, ge as intersect, be as liquid, Ce as livingBorder, we as longPress, u as magnetic, Ae as nebula, a as reducedMotion$, Me as reveal, Pe as ripple };
+export { ge as DragDirective, ve as DropDirective, le as animateText, ue as color, fe as confirmClick, o as cursorGlow, pe as cycleText, me as depthOfField, _e as drag, ye as drop, be as fill, u as fromResizeObserver, c as fullHeight, l as fullWidth, xe as gravity, Se as intersect, Ee as liquid, ke as livingBorder, Ae as longPress, d as magnetic, Ie as nebula, Ue as overflowWithin, a as reducedMotion$, Re as reveal, Be as ripple };