@mhmo91/schmancy 0.10.26 → 0.10.28

package/dist/{overlay-D1hFkcFA.js → overlay-D3c_NY18.js}

@@ -1,175 +1,55 @@
-import { c as e } from "./mixins-CKbQ6BJo.js";
+import { c as e } from "./mixins-8dT5j6CS.js";
 import { a as t } from "./active-host-BP0zy_Y9.js";
 import { _ as n, d as r, f as i, u as a } from "./animation-DCznELuT.js";
 import { t as o } from "./reduced-motion-D-L12p7G.js";
 import { t as s } from "./layout-DSAjo92m.js";
-import "./overlay.service-02ZLZ8Ib.js";
-import "./overlay.confirm-body-B4eCDLmU.js";
-import { Observable as c, Subject as l, debounceTime as u, distinctUntilChanged as d, filter as f, fromEvent as p, map as m, merge as h, take as g, takeUntil as _, tap as v } from "rxjs";
-import { customElement as y, property as b, query as x, state as S } from "lit/decorators.js";
-import { css as C, html as w, render as T } from "lit";
-import { when as E } from "lit/directives/when.js";
-import { autoUpdate as D, computePosition as O, flip as k, offset as A, shift as j, size as M } from "@floating-ui/dom";
-var N = o.value;
+import "./overlay.service-B3FjXCqc.js";
+import "./overlay.confirm-body-B_v0ivkn.js";
+import { EMPTY as c, Observable as l, Subject as u, debounceTime as d, distinctUntilChanged as f, filter as p, fromEvent as m, map as h, merge as g, take as _, takeUntil as v, tap as y } from "rxjs";
+import { customElement as b, property as x, query as S, state as C } from "lit/decorators.js";
+import { css as w, html as T, render as E } from "lit";
+import { when as D } from "lit/directives/when.js";
+import { autoUpdate as O, computePosition as k, flip as A, offset as j, shift as M, size as N } from "@floating-ui/dom";
+var P = o.value;
 o.subscribe((e) => {
-	N = e;
+	P = e;
 });
-var P = "--schmancy-overlay-origin-x", F = "--schmancy-overlay-origin-y", I = `var(${P}, 50%) var(${F}, 50%)`;
-function L(e) {
+var F = "--schmancy-overlay-origin-x", I = "--schmancy-overlay-origin-y", L = `var(${F}, 50%) var(${I}, 50%)`;
+function R(e) {
 	return Number.isNaN(e) || !Number.isFinite(e) ? 50 : Math.max(0, Math.min(100, e));
 }
-function R(e, t) {
-	if (N) return t === "in" ? {
-		keyframes: [{
-			opacity: 0,
-			transform: "none"
-		}, {
-			opacity: 1,
-			transform: "none"
-		}],
-		options: {
-			duration: 1,
-			easing: "linear",
-			fill: "forwards"
-		}
-	} : {
-		keyframes: [{
-			opacity: 1,
-			transform: "none"
-		}, {
-			opacity: 0,
-			transform: "none"
-		}],
-		options: {
-			duration: 1,
-			easing: "linear",
-			fill: "forwards"
-		}
-	};
-	switch (e) {
-		case "centered": return t === "in" ? {
-			keyframes: [{
-				opacity: 0,
-				transform: "scale(0.6)",
-				transformOrigin: I
-			}, {
-				opacity: 1,
-				transform: "scale(1)",
-				transformOrigin: I
-			}],
-			options: {
-				duration: i.duration,
-				easing: n(i),
-				fill: "forwards"
-			}
-		} : {
-			keyframes: [{
-				opacity: 1,
-				transform: "scale(1)",
-				transformOrigin: I
-			}, {
-				opacity: 0,
-				transform: "scale(0.95)",
-				transformOrigin: I
-			}],
-			options: {
-				duration: 150,
-				easing: n(r),
-				fill: "forwards"
-			}
-		};
-		case "sheet": return t === "in" ? {
-			keyframes: [{
-				opacity: 0,
-				transform: "translateY(100%)"
-			}, {
-				opacity: 1,
-				transform: "translateY(0)"
-			}],
-			options: {
-				duration: a.duration,
-				easing: n(a),
-				fill: "forwards"
-			}
-		} : {
-			keyframes: [{
-				opacity: 1,
-				transform: "translateY(0)"
-			}, {
-				opacity: 0,
-				transform: "translateY(100%)"
-			}],
-			options: {
-				duration: 150,
-				easing: n(r),
-				fill: "forwards"
-			}
-		};
-		case "anchored": return t === "in" ? {
-			keyframes: [{
-				opacity: 0,
-				transform: "scale(0.85)",
-				transformOrigin: I
-			}, {
-				opacity: 1,
-				transform: "scale(1)",
-				transformOrigin: I
-			}],
-			options: {
-				duration: i.duration,
-				easing: n(i),
-				fill: "forwards"
-			}
-		} : {
-			keyframes: [{
-				opacity: 1,
-				transform: "scale(1)",
-				transformOrigin: I
-			}, {
-				opacity: 0,
-				transform: "scale(0.92)",
-				transformOrigin: I
-			}],
-			options: {
-				duration: 150,
-				easing: n(r),
-				fill: "forwards"
-			}
-		};
-	}
-}
 function z(e) {
 	let { surface: t, dragHandle: n, until$: r } = e;
-	return new c((e) => {
-		let i = n ?? t, a = new l(), o = !1, s = null, c = 0, u = 0, d = 0;
-		return h(p(i, "pointerdown").pipe(f((e) => e.isPrimary && (e.pointerType !== "mouse" || e.button === 0)), f((e) => {
+	return new l((e) => {
+		let i = n ?? t, a = new u(), o = !1, s = null, c = 0, l = 0, d = 0;
+		return g(m(i, "pointerdown").pipe(p((e) => e.isPrimary && (e.pointerType !== "mouse" || e.button === 0)), p((e) => {
 			if (n) return !0;
 			let r = t.getBoundingClientRect();
 			return e.clientY - r.top <= 40;
-		}), v((e) => {
-			o = !0, s = e.pointerId, c = e.clientY, u = performance.now(), d = 0, t.style.transition = "none", t.style.willChange = "transform";
+		}), y((e) => {
+			o = !0, s = e.pointerId, c = e.clientY, l = performance.now(), d = 0, t.style.transition = "none", t.style.willChange = "transform";
 			try {
 				i.setPointerCapture?.(e.pointerId);
 			} catch {}
-		})), p(i, "pointermove").pipe(f(() => o), f((e) => e.pointerId === s), v((e) => {
+		})), m(i, "pointermove").pipe(p(() => o), p((e) => e.pointerId === s), y((e) => {
 			d = function(e) {
 				if (e >= 0) return e;
 				let t = -e;
 				return -Math.max(0, 8 * (Math.log(t + 1) - 2));
 			}(e.clientY - c), t.style.transform = `translateY(${d}px)`, e.cancelable && e.preventDefault();
-		})), h(p(i, "pointerup"), p(i, "pointercancel"), p(i, "lostpointercapture")).pipe(f(() => o), f((e) => e.pointerId === s), v(() => {
+		})), g(m(i, "pointerup"), m(i, "pointercancel"), m(i, "lostpointercapture")).pipe(p(() => o), p((e) => e.pointerId === s), y(() => {
 			o = !1;
 			let n = s;
 			s = null;
 			try {
 				n !== null && i.releasePointerCapture?.(n);
 			} catch {}
-			let r = Math.max(1, performance.now() - u), a = d / r, c = t.getBoundingClientRect().height, l = Math.min(80, .25 * c), f = d > l || d > 20 && a > .4;
+			let r = Math.max(1, performance.now() - l), a = d / r, c = t.getBoundingClientRect().height, u = Math.min(80, .25 * c), f = d > u || d > 20 && a > .4;
 			t.style.willChange = "", f ? (t.style.transition = "transform 300ms cubic-bezier(0.16, 1, 0.3, 1)", t.style.transform = "translateY(100%)", e.next("dismiss"), e.complete()) : (t.style.transition = "transform 300ms cubic-bezier(0.16, 1, 0.3, 1)", t.style.transform = "translateY(0)");
-		}))).pipe(_(h(a, r))).subscribe(), () => {
+		}))).pipe(v(g(a, r))).subscribe(), () => {
 			a.next(), a.complete(), t.style.transition = "", t.style.transform = "", t.style.willChange = "";
 		};
-	}).pipe(g(1));
+	}).pipe(_(1));
 }
 function B(e) {
 	let { anchor: t, content: n, viewport: r } = e, i = r.width < 640, a = r.isCoarsePointer, o = n.height > .8 * r.height, s = n.width > .9 * r.width;
@@ -222,22 +102,22 @@ function W(e) {
 	};
 }
 function G(e, t, n = {}) {
-	return new c((r) => {
+	return new l((r) => {
 		let i = t.el ?? t.virtual;
 		if (!i) return void r.error(/* @__PURE__ */ Error("positionFloatingUI requires an element or virtual anchor"));
-		let a = n.placement ?? "bottom-start", o = n.padding ?? 16, s = n.offsetPx ?? 8, c = D(i, e, async () => {
+		let a = n.placement ?? "bottom-start", o = n.padding ?? 16, s = n.offsetPx ?? 8, c = O(i, e, async () => {
 			try {
-				let { x: t, y: n } = await O(i, e, {
+				let { x: t, y: n } = await k(i, e, {
 					strategy: "fixed",
 					placement: a,
 					middleware: [
-						A(s),
-						k({
+						j(s),
+						A({
 							padding: o,
 							fallbackPlacements: K(a)
 						}),
-						j({ padding: o }),
-						M({
+						M({ padding: o }),
+						N({
 							padding: o,
 							apply({ availableWidth: e, availableHeight: t, elements: n }) {
 								n.floating.style.maxWidth = `${Math.max(0, e)}px`, n.floating.style.maxHeight = `${Math.max(0, t)}px`;
@@ -331,76 +211,38 @@ function K(e) {
 }
 var q = "overlay-mount", J = class extends e {
 	constructor(...e) {
-		super(...e), this.layout = "centered", this.dismissable = !0, this.modal = !0, this.tier = "modal", this._active = !1, this._closed$ = new l(), this._mounted = !1, this._closing = !1, this._lastFocusedElement = null, this._inertedSiblings = [], this._lastReResolveAt = 0, this.onBackdropClick = () => {
+		super(...e), this.layout = "centered", this.dismissable = !0, this.modal = !0, this.tier = "modal", this._active = !1, this._closed$ = new u(), this._mounted = !1, this._closing = !1, this._lastFocusedElement = null, this._inertedSiblings = [], this._lastReResolveAt = 0, this.onBackdropClick = () => {
 			this.dismissable && this.close("backdrop");
 		};
 	}
 	static {
-		this.styles = [C`
+		this.styles = [w`
 	:host {
 		position: fixed;
 		inset: 0;
-		z-index: var(--schmancy-overlay-z, 10000);
+		z-index: 10000;
 		display: none;
 		pointer-events: none;
 	}
 	:host([active]) {
 		display: block;
 	}
-	.shell {
-		position: fixed;
-		inset: 0;
-		pointer-events: none;
-	}
+	/* Vertical-gradient scrim — Tailwind's bg-gradient utilities cannot reach
+	 * these color-mix percentages with sufficient control. */
 	.backdrop {
-		position: fixed;
-		inset: 0;
-		background: color-mix(in srgb, var(--schmancy-sys-color-surface-container, rgba(12, 12, 16, 0.28)) 60%, transparent);
-		backdrop-filter: blur(18px) saturate(150%);
-		-webkit-backdrop-filter: blur(18px) saturate(150%);
-		pointer-events: auto;
-	}
-	.surface {
-		position: fixed;
-		pointer-events: auto;
-		max-width: calc(100vw - 2rem);
-		max-height: 90dvh;
-		overflow: auto;
-		border-radius: var(--schmancy-sys-shape-corner-large, 16px);
-		background: var(--schmancy-sys-color-surface, #ffffff);
-		color: var(--schmancy-sys-color-on-surface, #1a1a1a);
-		box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35);
-		padding: var(--schmancy-overlay-padding, 1.5rem);
+		background: linear-gradient(
+			to bottom,
+			color-mix(in srgb, var(--schmancy-sys-color-scrim) 18%, transparent) 0%,
+			color-mix(in srgb, var(--schmancy-sys-color-scrim) 56%, transparent) 100%
+		);
+		-webkit-backdrop-filter: blur(16px) saturate(160%);
+		backdrop-filter: blur(16px) saturate(160%);
 	}
-	.surface[data-layout='centered'] {
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-	.surface[data-layout='sheet'] {
-		left: 0;
-		right: 0;
-		bottom: 0;
-		max-width: none;
-		width: 100%;
-		border-radius: var(--schmancy-sys-shape-corner-large, 16px) var(--schmancy-sys-shape-corner-large, 16px) 0 0;
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-	.surface[data-layout='anchored'] {
-		max-width: min(480px, calc(100vw - 2rem));
-		box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
-	}
-	/* Popover top-layer surfaces escape normal z-index — zero out host
-	 * display to avoid two surfaces rendering during transitions. */
+	/* Popover top-layer surfaces — UA defaults push surface off-screen. */
 	.surface:popover-open {
 		margin: 0;
 		border: 0;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.surface {
-			box-shadow: var(--schmancy-sys-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.2));
-		}
-	}
 `];
 	}
 	get closed$() {
@@ -469,14 +311,14 @@ var q = "overlay-mount", J = class extends e {
 			});
 			let e = W(this._surface), n = this._positionerTeardown;
 			this._positionerTeardown = () => {
-				e(), n();
+				e(), n?.();
 			};
 		} else if (this.tier === "popover-fui" && this._resolvedAnchor) {
 			let e = W(this._surface), n = G(this._surface, this._resolvedAnchor, {
 				placement: t.preferredPlacement ?? "bottom-start",
 				offsetPx: 8,
 				track: !1 !== t.track
-			}).pipe(_(this.disconnecting)).subscribe();
+			}).pipe(v(this.disconnecting)).subscribe();
 			this._positionerTeardown = () => {
 				e(), n.unsubscribe();
 			};
@@ -485,16 +327,16 @@ var q = "overlay-mount", J = class extends e {
 				placement: t.preferredPlacement ?? "bottom-start",
 				offsetPx: 8,
 				track: !1 !== t.track
-			}).pipe(_(this.disconnecting)).subscribe();
+			}).pipe(v(this.disconnecting)).subscribe();
 			this._positionerTeardown = () => e.unsubscribe();
 		}
-		this.setAnchorOriginVars(), this.wireFocusTrap(), this.wireCloseTriggers(t.signal), this.wireResizeObserver(n), await this.playEnterAnimations();
+		this.setAnchorOriginVars(), this.wireFocusTrap(), this.wireCloseTriggers(t.signal), this.wireResizeObserver(n), await this.playAnimations("in");
 	}
 	async close(e, t) {
 		if (!this._closing && this._mounted) {
 			this._closing = !0;
 			try {
-				await this.playExitAnimations();
+				await this.playAnimations("out");
 			} catch {}
 			if (this.releaseFocusTrap(), this._positionerTeardown) {
 				try {
@@ -509,11 +351,13 @@ var q = "overlay-mount", J = class extends e {
 		}
 	}
 	render() {
-		return this._active ? w`
-			<div class="shell" part="shell">
-				${E(this.modal, () => w`<div class="backdrop" part="backdrop" @click=${this.onBackdropClick}></div>`)}
+		if (!this._active) return T``;
+		let e = this.layout === "centered" ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[min(calc(100vw-2rem),560px)] max-h-[90dvh] rounded-3xl shadow-overlay" : this.layout === "sheet" ? "left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay" : "max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored";
+		return T`
+			<div class="shell fixed inset-0 pointer-events-none" part="shell">
+				${D(this.modal, () => T`<div class="backdrop fixed inset-0 pointer-events-auto" part="backdrop" @click=${this.onBackdropClick}></div>`)}
 				<section
-					class="surface"
+					class="${"surface fixed pointer-events-auto overflow-auto bg-surface-container/85 text-surface-on backdrop-blur-md border border-surface-on/8"} ${e}"
 					part="surface"
 					data-layout=${this.layout}
 					data-tier=${this.tier}
@@ -524,15 +368,15 @@ var q = "overlay-mount", J = class extends e {
 					<div id=${q}></div>
 				</section>
 			</div>
-		` : w``;
+		`;
 	}
 	setAnchorOriginVars() {
 		let e = this._surface;
 		if (!e) return;
 		let t = e.getBoundingClientRect(), n = this.layout !== "centered" || this._anchorOriginAnchor ? this.layout !== "sheet" || this._anchorOriginAnchor ? function(e, t) {
 			if (!e) return {
-				[P]: "50%",
-				[F]: "50%"
+				[F]: "50%",
+				[I]: "50%"
 			};
 			let { x: n, y: r } = function(e) {
 				if (typeof e.getBoundingClientRect == "function") {
@@ -570,13 +414,13 @@ var q = "overlay-mount", J = class extends e {
 				};
 			}(e);
 			if (!t.width || !t.height) return {
-				[P]: "50%",
-				[F]: "50%"
+				[F]: "50%",
+				[I]: "50%"
 			};
-			let i = L((n - t.left) / t.width * 100), a = L((r - t.top) / t.height * 100);
+			let i = R((n - t.left) / t.width * 100), a = R((r - t.top) / t.height * 100);
 			return {
-				[P]: `${i}%`,
-				[F]: `${a}%`
+				[F]: `${i}%`,
+				[I]: `${a}%`
 			};
 		}(this._anchorOriginAnchor, t) : {
 			"--schmancy-overlay-origin-x": "50%",
@@ -609,36 +453,32 @@ var q = "overlay-mount", J = class extends e {
 	}
 	wireCloseTriggers(e) {
 		let t = this.disconnecting;
-		p(this, "close").pipe(f((e) => e instanceof CustomEvent), v((e) => {
-			e.stopPropagation(), this.close("structured", e.detail);
-		}), _(t)).subscribe(), p(this, "submit").pipe(f((e) => {
+		if (e?.aborted) return void queueMicrotask(() => {
+			this.close("abort");
+		});
+		let n = m(this, "close").pipe(p((e) => e instanceof CustomEvent), y((e) => e.stopPropagation()), h((e) => ({
+			reason: "structured",
+			result: e.detail
+		}))), r = m(this, "submit").pipe(p((e) => {
 			let t = e.target;
 			return !!t && t.method === "dialog";
-		}), v((e) => {
-			e.preventDefault();
-			let t = e.submitter?.value ?? "";
-			this.close("native-submit", t);
-		}), _(t)).subscribe(), p(document, "keydown").pipe(f((e) => e.key === "Escape"), v((e) => {
-			this.dismissable ? (e.preventDefault(), this.close("escape")) : e.preventDefault();
-		}), _(t)).subscribe(), this.tier !== "modal" && p(document, "pointerdown", { capture: !0 }).pipe(f((e) => {
+		}), y((e) => e.preventDefault()), h((e) => ({
+			reason: "native-submit",
+			result: e.submitter?.value ?? ""
+		}))), i = m(document, "keydown").pipe(p((e) => e.key === "Escape"), y((e) => e.preventDefault()), p(() => this.dismissable), h(() => ({ reason: "escape" })), _(1)), a = this.tier === "modal" ? null : m(document, "pointerdown", { capture: !0 }).pipe(p((e) => {
 			if (!this.dismissable) return !1;
 			let t = e.composedPath();
 			return (!this._surface || !t.includes(this._surface)) && (!this._resolvedAnchor?.el || !t.includes(this._resolvedAnchor.el));
-		}), g(1), v(() => {
-			this.close("backdrop");
-		}), _(t)).subscribe(), this.layout === "sheet" && this.dismissable && z({
+		}), h(() => ({ reason: "backdrop" })), _(1)), o = this.layout === "sheet" && this.dismissable ? z({
 			surface: this._surface,
-			until$: h(t, this._closed$)
-		}).pipe(g(1)).subscribe(() => {
-			this.close("swipe");
-		}), e && (e.aborted ? queueMicrotask(() => {
-			this.close("abort");
-		}) : p(e, "abort").pipe(g(1), v(() => {
-			this.close("abort");
-		}), _(t)).subscribe());
+			until$: g(t, this._closed$)
+		}).pipe(_(1), h(() => ({ reason: "swipe" }))) : null, s = e ? m(e, "abort").pipe(_(1), h(() => ({ reason: "abort" }))) : null;
+		g(n, r, i, a ?? c, o ?? c, s ?? c).pipe(v(t)).subscribe(({ reason: e, result: t }) => {
+			this.close(e, t);
+		});
 	}
 	wireResizeObserver(e) {
-		s(e).pipe(m((e) => {
+		s(e).pipe(h((e) => {
 			let t = e[0];
 			if (!t) return null;
 			let n = t.contentRect;
@@ -646,7 +486,7 @@ var q = "overlay-mount", J = class extends e {
 				w: n.width,
 				h: n.height
 			};
-		}), f((e) => e !== null), d((e, t) => e.w === t.w && e.h === t.h), u(80), _(h(this.disconnecting, this._closed$))).subscribe((e) => this.maybeReResolve(e));
+		}), p((e) => e !== null), f((e, t) => e.w === t.w && e.h === t.h), d(80), v(g(this.disconnecting, this._closed$))).subscribe((e) => this.maybeReResolve(e));
 	}
 	async maybeReResolve(e) {
 		if (this._closing) return;
@@ -663,7 +503,7 @@ var q = "overlay-mount", J = class extends e {
 		let s = this._surface, c = s.getBoundingClientRect();
 		this.layout = i, await this.updateComplete;
 		let l = function(e, t) {
-			return N ? {
+			return P ? {
 				keyframes: [{ transform: "none" }, { transform: "none" }],
 				options: {
 					duration: 1,
@@ -690,25 +530,134 @@ var q = "overlay-mount", J = class extends e {
 		} catch {}
 		this._lastReResolveAt = performance.now();
 	}
-	async playEnterAnimations() {
-		let e = this._surface;
-		if (!e) return;
-		let t = R(this.layout, "in"), n = [e.animate(t.keyframes, t.options).finished.catch(() => {})], r = this._backdrop;
-		this.modal && r && n.push(r.animate([{ opacity: 0 }, { opacity: 1 }], {
-			duration: t.options.duration,
-			easing: "ease-out",
-			fill: "forwards"
-		}).finished.catch(() => {})), await Promise.all(n);
-	}
-	async playExitAnimations() {
-		let e = this._surface;
-		if (!e) return;
-		let t = R(this.layout, "out"), n = [e.animate(t.keyframes, t.options).finished.catch(() => {})], r = this._backdrop;
-		this.modal && r && n.push(r.animate([{ opacity: 1 }, { opacity: 0 }], {
-			duration: t.options.duration,
-			easing: "ease-in",
+	async playAnimations(e) {
+		let t = this._surface;
+		if (!t) return;
+		let o = function(e, t) {
+			if (P) return t === "in" ? {
+				keyframes: [{
+					opacity: 0,
+					transform: "none"
+				}, {
+					opacity: 1,
+					transform: "none"
+				}],
+				options: {
+					duration: 1,
+					easing: "linear",
+					fill: "forwards"
+				}
+			} : {
+				keyframes: [{
+					opacity: 1,
+					transform: "none"
+				}, {
+					opacity: 0,
+					transform: "none"
+				}],
+				options: {
+					duration: 1,
+					easing: "linear",
+					fill: "forwards"
+				}
+			};
+			switch (e) {
+				case "centered": return t === "in" ? {
+					keyframes: [{
+						opacity: 0,
+						transform: "scale(0.6)",
+						transformOrigin: L
+					}, {
+						opacity: 1,
+						transform: "scale(1)",
+						transformOrigin: L
+					}],
+					options: {
+						duration: i.duration,
+						easing: n(i),
+						fill: "forwards"
+					}
+				} : {
+					keyframes: [{
+						opacity: 1,
+						transform: "scale(1)",
+						transformOrigin: L
+					}, {
+						opacity: 0,
+						transform: "scale(0.95)",
+						transformOrigin: L
+					}],
+					options: {
+						duration: 150,
+						easing: n(r),
+						fill: "forwards"
+					}
+				};
+				case "sheet": return t === "in" ? {
+					keyframes: [{
+						opacity: 0,
+						transform: "translateY(100%)"
+					}, {
+						opacity: 1,
+						transform: "translateY(0)"
+					}],
+					options: {
+						duration: a.duration,
+						easing: n(a),
+						fill: "forwards"
+					}
+				} : {
+					keyframes: [{
+						opacity: 1,
+						transform: "translateY(0)"
+					}, {
+						opacity: 0,
+						transform: "translateY(100%)"
+					}],
+					options: {
+						duration: 150,
+						easing: n(r),
+						fill: "forwards"
+					}
+				};
+				case "anchored": return t === "in" ? {
+					keyframes: [{
+						opacity: 0,
+						transform: "scale(0.85)",
+						transformOrigin: L
+					}, {
+						opacity: 1,
+						transform: "scale(1)",
+						transformOrigin: L
+					}],
+					options: {
+						duration: i.duration,
+						easing: n(i),
+						fill: "forwards"
+					}
+				} : {
+					keyframes: [{
+						opacity: 1,
+						transform: "scale(1)",
+						transformOrigin: L
+					}, {
+						opacity: 0,
+						transform: "scale(0.92)",
+						transformOrigin: L
+					}],
+					options: {
+						duration: 150,
+						easing: n(r),
+						fill: "forwards"
+					}
+				};
+			}
+		}(this.layout, e), s = [t.animate(o.keyframes, o.options).finished.catch(() => {})], c = this._backdrop;
+		this.modal && c && s.push(c.animate(e === "in" ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+			duration: o.options.duration,
+			easing: e === "in" ? "ease-out" : "ease-in",
 			fill: "forwards"
-		}).finished.catch(() => {})), await Promise.all(n);
+		}).finished.catch(() => {})), await Promise.all(s);
 	}
 };
 async function Y(e, t, n) {
@@ -716,7 +665,7 @@ async function Y(e, t, n) {
 	var r;
 	if (function(e) {
 		return typeof e == "object" && !!e && "_$litType$" in e;
-	}(e)) return T(e, t), t;
+	}(e)) return E(e, t), t;
 	if (e instanceof HTMLElement) return n && Object.assign(e, n), t.appendChild(e), e;
 	if (function(e) {
 		return typeof e == "function" && ("preload" in e || "_promise" in e);
@@ -731,17 +680,17 @@ async function Y(e, t, n) {
 	}
 	throw Error("schmancy-overlay: unsupported content type");
 }
-t([b({
+t([x({
 	type: String,
 	reflect: !0
-})], J.prototype, "layout", void 0), t([b({
+})], J.prototype, "layout", void 0), t([x({
 	type: Boolean,
 	reflect: !0
-})], J.prototype, "dismissable", void 0), t([b({
+})], J.prototype, "dismissable", void 0), t([x({
 	type: Boolean,
 	reflect: !0
-})], J.prototype, "modal", void 0), t([b({
+})], J.prototype, "modal", void 0), t([x({
 	type: String,
 	reflect: !0
-})], J.prototype, "tier", void 0), t([S()], J.prototype, "_active", void 0), t([x(".backdrop")], J.prototype, "_backdrop", void 0), t([x(".surface")], J.prototype, "_surface", void 0), J = t([y("schmancy-overlay")], J);
+})], J.prototype, "tier", void 0), t([C()], J.prototype, "_active", void 0), t([S(".backdrop")], J.prototype, "_backdrop", void 0), t([S(".surface")], J.prototype, "_surface", void 0), J = t([b("schmancy-overlay")], J);
 export { J as t };