@mhmo91/schmancy 0.10.18 → 0.10.20

package/dist/overlay-C0YSnxoV.js

@@ -0,0 +1,743 @@
+import { c as e } from "./mixins-B9kY_60p.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-D7LqTUMn.js";
+import { t as s } from "./layout-Dq2oeOTS.js";
+import "./overlay.service-CRoq9Gu-.js";
+import "./overlay.confirm-body-BmOnrKbF.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;
+o.subscribe((e) => {
+	N = e;
+});
+var P = "--schmancy-overlay-origin-x", F = "--schmancy-overlay-origin-y", I = `var(${P}, 50%) var(${F}, 50%)`;
+function L(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) => {
+			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";
+			try {
+				i.setPointerCapture?.(e.pointerId);
+			} catch {}
+		})), p(i, "pointermove").pipe(f(() => o), f((e) => e.pointerId === s), v((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(() => {
+			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;
+			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(), () => {
+			a.next(), a.complete(), t.style.transition = "", t.style.transform = "", t.style.willChange = "";
+		};
+	}).pipe(g(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;
+	return i || a || o || s ? "sheet" : t === void 0 ? "centered" : "anchored";
+}
+function V() {
+	return {
+		width: window.innerWidth,
+		height: window.innerHeight,
+		isCoarsePointer: window.matchMedia("(pointer: coarse)").matches
+	};
+}
+function H(e, t) {
+	return {
+		x: e,
+		y: t,
+		width: 0,
+		height: 0,
+		left: e,
+		right: e,
+		top: t,
+		bottom: t,
+		toJSON: () => ({
+			x: e,
+			y: t,
+			width: 0,
+			height: 0,
+			left: e,
+			right: e,
+			top: t,
+			bottom: t
+		})
+	};
+}
+var U = Object.freeze({
+	popover: typeof HTMLElement < "u" && "popover" in HTMLElement.prototype && typeof HTMLElement.prototype.showPopover == "function",
+	cssAnchor: typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --x")
+});
+function W(e) {
+	if (!U.popover) throw Error("positionPopoverAPI requires Popover API support");
+	e.setAttribute("popover", "manual");
+	try {
+		e.showPopover();
+	} catch {}
+	return () => {
+		try {
+			e.hidePopover?.();
+		} catch {}
+		e.removeAttribute("popover");
+	};
+}
+function G(e, t, n = {}) {
+	return new c((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 () => {
+			try {
+				let { x: t, y: n } = await O(i, e, {
+					strategy: "fixed",
+					placement: a,
+					middleware: [
+						A(s),
+						k({
+							padding: o,
+							fallbackPlacements: K(a)
+						}),
+						j({ padding: o }),
+						M({
+							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`;
+							}
+						})
+					]
+				});
+				Object.assign(e.style, {
+					position: "fixed",
+					left: `${Math.round(t)}px`,
+					top: `${Math.round(n)}px`,
+					transform: "none"
+				}), r.next();
+			} catch (e) {
+				r.error(e);
+			}
+		}, {
+			ancestorScroll: !0,
+			ancestorResize: !0,
+			elementResize: !1 !== n.track
+		});
+		return () => {
+			c();
+		};
+	});
+}
+function K(e) {
+	switch (e) {
+		case "bottom-start": return [
+			"top-start",
+			"bottom-end",
+			"top-end"
+		];
+		case "bottom-end": return [
+			"top-end",
+			"bottom-start",
+			"top-start"
+		];
+		case "top-start": return [
+			"bottom-start",
+			"top-end",
+			"bottom-end"
+		];
+		case "top-end": return [
+			"bottom-end",
+			"top-start",
+			"bottom-start"
+		];
+		case "left-start": return [
+			"right-start",
+			"left-end",
+			"right-end"
+		];
+		case "left-end": return [
+			"right-end",
+			"left-start",
+			"right-start"
+		];
+		case "right-start": return [
+			"left-start",
+			"right-end",
+			"left-end"
+		];
+		case "right-end": return [
+			"left-end",
+			"right-start",
+			"left-start"
+		];
+		case "top": return [
+			"bottom",
+			"left",
+			"right"
+		];
+		case "bottom": return [
+			"top",
+			"left",
+			"right"
+		];
+		case "left": return [
+			"right",
+			"top",
+			"bottom"
+		];
+		case "right": return [
+			"left",
+			"top",
+			"bottom"
+		];
+		default: return ["top-start", "bottom-end"];
+	}
+}
+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 = () => {
+			this.dismissable && this.close("backdrop");
+		};
+	}
+	static {
+		this.styles = [C`
+	:host {
+		position: fixed;
+		inset: 0;
+		z-index: var(--schmancy-overlay-z, 10000);
+		display: none;
+		pointer-events: none;
+	}
+	:host([active]) {
+		display: block;
+	}
+	.shell {
+		position: fixed;
+		inset: 0;
+		pointer-events: none;
+	}
+	.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);
+	}
+	.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. */
+	.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$() {
+		return this._closed$.asObservable();
+	}
+	async open(e, t) {
+		if (this._mounted) throw Error("schmancy-overlay: open() called twice on the same element");
+		this._mounted = !0, this.dismissable = !1 !== t.dismissable, this._rawAnchor = t.anchor, this._anchorOriginAnchor = t.anchor, this._resolvedAnchor = function(e) {
+			if (!e) return;
+			if (typeof HTMLElement < "u" && e instanceof HTMLElement) return { el: e };
+			if (typeof e.getBoundingClientRect == "function") return { virtual: { getBoundingClientRect: () => e.getBoundingClientRect() } };
+			if (typeof e.width == "number" && typeof e.height == "number" && typeof e.left == "number" && typeof e.top == "number") {
+				let t = e;
+				return { virtual: { getBoundingClientRect: () => t } };
+			}
+			if (typeof e.clientX == "number" && typeof e.clientY == "number") {
+				let t = e, n = H(t.clientX, t.clientY);
+				return { virtual: { getBoundingClientRect: () => n } };
+			}
+			if (e.touches !== void 0 && e.touches.length > 0) {
+				let t = e.touches[0], n = H(t.clientX, t.clientY);
+				return { virtual: { getBoundingClientRect: () => n } };
+			}
+			let t = e, n = H(t.x, t.y);
+			return { virtual: { getBoundingClientRect: () => n } };
+		}(t.anchor), this._active = !0, this.setAttribute("active", ""), await this.updateComplete;
+		let n = this.renderRoot.querySelector(`#${q}`);
+		if (!n) throw Error("schmancy-overlay: mount point missing");
+		await Y(e, n, t.props);
+		let r = V(), i = {
+			width: n.scrollWidth,
+			height: n.scrollHeight
+		};
+		var a;
+		if (this.layout = B({
+			anchor: t.anchor,
+			content: i,
+			viewport: r
+		}), this.modal = t.modal ?? (this.layout === "centered" || this.layout === "sheet"), this.tier = this.modal ? "modal" : this._resolvedAnchor ? (a = this._resolvedAnchor, U.popover && U.cssAnchor && a.el ? "css-anchor" : U.popover ? "popover-fui" : "fui-only") : "modal", await this.updateComplete, this.tier === "css-anchor" && this._resolvedAnchor?.el && this.shadowRoot) {
+			this._positionerTeardown = function(e, t, n, r = { id: "" }) {
+				if (!t.el) throw Error("positionCSSAnchor requires an element anchor");
+				let i = t.el, a = `--ov-${r.id || Math.random().toString(36).slice(2, 10)}`, o = r.placement ?? "bottom-start", s = i.style.getPropertyValue("anchor-name");
+				i.style.setProperty("anchor-name", a);
+				let c = new CSSStyleSheet();
+				return c.replaceSync(`\n\t\t${e.localName}[data-overlay-ref="${r.id}"] {\n\t\t\tposition-anchor: ${a};\n\t\t\t${function(e) {
+					switch (e) {
+						case "top":
+						case "top-start": return "bottom: anchor(top); left: anchor(start);";
+						case "top-end": return "bottom: anchor(top); right: anchor(end);";
+						case "bottom":
+						case "bottom-start": return "top: anchor(bottom); left: anchor(start);";
+						case "bottom-end": return "top: anchor(bottom); right: anchor(end);";
+						case "left":
+						case "left-start": return "right: anchor(left); top: anchor(start);";
+						case "left-end": return "right: anchor(left); bottom: anchor(end);";
+						case "right":
+						case "right-start": return "left: anchor(right); top: anchor(start);";
+						case "right-end": return "left: anchor(right); bottom: anchor(end);";
+					}
+				}(o)}\n\t\t\tmargin: 8px;\n\t\t\tposition-try-fallbacks:\n\t\t\t\tflip-block,\n\t\t\t\tflip-inline,\n\t\t\t\tflip-block flip-inline;\n\t\t}\n\t`), e.dataset.overlayRef = r.id, n.adoptedStyleSheets = [...n.adoptedStyleSheets, c], () => {
+					s ? i.style.setProperty("anchor-name", s) : i.style.removeProperty("anchor-name"), n.adoptedStyleSheets = n.adoptedStyleSheets.filter((e) => e !== c), delete e.dataset.overlayRef;
+				};
+			}(this._surface, this._resolvedAnchor, this.shadowRoot, {
+				id: `ov-${Math.random().toString(36).slice(2, 10)}`,
+				placement: t.preferredPlacement ?? "bottom-start"
+			});
+			let e = W(this._surface), n = this._positionerTeardown;
+			this._positionerTeardown = () => {
+				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();
+			this._positionerTeardown = () => {
+				e(), n.unsubscribe();
+			};
+		} else if (this.tier === "fui-only" && this._resolvedAnchor) {
+			let e = G(this._surface, this._resolvedAnchor, {
+				placement: t.preferredPlacement ?? "bottom-start",
+				offsetPx: 8,
+				track: !1 !== t.track
+			}).pipe(_(this.disconnecting)).subscribe();
+			this._positionerTeardown = () => e.unsubscribe();
+		}
+		this.setAnchorOriginVars(), this.wireFocusTrap(), this.wireCloseTriggers(t.signal), this.wireResizeObserver(n), await this.playEnterAnimations();
+	}
+	async close(e, t) {
+		if (!this._closing && this._mounted) {
+			this._closing = !0;
+			try {
+				await this.playExitAnimations();
+			} catch {}
+			if (this.releaseFocusTrap(), this._positionerTeardown) {
+				try {
+					this._positionerTeardown();
+				} catch {}
+				this._positionerTeardown = void 0;
+			}
+			this._active = !1, this.removeAttribute("active"), this._closed$.next({
+				reason: e,
+				result: t
+			}), this._closed$.complete();
+		}
+	}
+	render() {
+		return this._active ? w`
+			<div class="shell" part="shell">
+				${E(this.modal, () => w`<div class="backdrop" part="backdrop" @click=${this.onBackdropClick}></div>`)}
+				<section
+					class="surface"
+					part="surface"
+					data-layout=${this.layout}
+					data-tier=${this.tier}
+					role=${this.modal ? "dialog" : "region"}
+					aria-modal=${this.modal ? "true" : "false"}
+					tabindex="-1"
+				>
+					<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%"
+			};
+			let { x: n, y: r } = function(e) {
+				if (typeof e.getBoundingClientRect == "function") {
+					let t = e.getBoundingClientRect();
+					return {
+						x: t.left + t.width / 2,
+						y: t.top + t.height / 2
+					};
+				}
+				if (typeof e.width == "number" && typeof e.height == "number" && typeof e.left == "number" && typeof e.top == "number") {
+					let t = e;
+					return {
+						x: t.left + t.width / 2,
+						y: t.top + t.height / 2
+					};
+				}
+				if (typeof e.clientX == "number" && typeof e.clientY == "number") {
+					let t = e;
+					return {
+						x: t.clientX,
+						y: t.clientY
+					};
+				}
+				if (e.touches !== void 0 && e.touches.length > 0) {
+					let t = e.touches[0];
+					return {
+						x: t.clientX,
+						y: t.clientY
+					};
+				}
+				let t = e;
+				return {
+					x: t.x,
+					y: t.y
+				};
+			}(e);
+			if (!t.width || !t.height) return {
+				[P]: "50%",
+				[F]: "50%"
+			};
+			let i = L((n - t.left) / t.width * 100), a = L((r - t.top) / t.height * 100);
+			return {
+				[P]: `${i}%`,
+				[F]: `${a}%`
+			};
+		}(this._anchorOriginAnchor, t) : {
+			"--schmancy-overlay-origin-x": "50%",
+			"--schmancy-overlay-origin-y": "100%"
+		} : {
+			"--schmancy-overlay-origin-x": "50%",
+			"--schmancy-overlay-origin-y": "50%"
+		};
+		for (let [t, r] of Object.entries(n)) e.style.setProperty(t, r);
+	}
+	wireFocusTrap() {
+		if (!this.modal) return;
+		this._lastFocusedElement = document.activeElement ?? null;
+		let e = this.parentElement;
+		if (e) {
+			this._inertedSiblings = [];
+			for (let t of Array.from(e.children)) t !== this && t instanceof HTMLElement && !t.inert && (t.inert = !0, this._inertedSiblings.push(t));
+		}
+		queueMicrotask(() => {
+			(this._surface?.querySelector("[autofocus]") ?? this._surface)?.focus();
+		});
+	}
+	releaseFocusTrap() {
+		for (let e of this._inertedSiblings) e.inert = !1;
+		this._inertedSiblings = [];
+		try {
+			this._lastFocusedElement?.focus?.();
+		} catch {}
+		this._lastFocusedElement = null;
+	}
+	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) => {
+			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) => {
+			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({
+			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());
+	}
+	wireResizeObserver(e) {
+		s(e).pipe(m((e) => {
+			let t = e[0];
+			if (!t) return null;
+			let n = t.contentRect;
+			return {
+				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));
+	}
+	async maybeReResolve(e) {
+		if (this._closing) return;
+		let t = V(), i = B({
+			anchor: this._rawAnchor,
+			content: {
+				width: e.w,
+				height: e.h
+			},
+			viewport: t
+		});
+		if (i === this.layout || performance.now() - this._lastReResolveAt < 600 || (a = this.layout, o = i, !(a === "centered" && o === "sheet" || a === "anchored" && o === "sheet"))) return;
+		var a, o;
+		let s = this._surface, c = s.getBoundingClientRect();
+		this.layout = i, await this.updateComplete;
+		let l = function(e, t) {
+			return N ? {
+				keyframes: [{ transform: "none" }, { transform: "none" }],
+				options: {
+					duration: 1,
+					easing: "linear",
+					fill: "forwards"
+				}
+			} : {
+				keyframes: [{
+					transform: `translate(${e.left - t.left}px, ${e.top - t.top}px) scale(${t.width > 0 ? e.width / t.width : 1}, ${t.height > 0 ? e.height / t.height : 1})`,
+					transformOrigin: "top left"
+				}, {
+					transform: "none",
+					transformOrigin: "top left"
+				}],
+				options: {
+					duration: r.duration,
+					easing: n(r),
+					fill: "forwards"
+				}
+			};
+		}(c, s.getBoundingClientRect());
+		try {
+			await s.animate(l.keyframes, l.options).finished;
+		} 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",
+			fill: "forwards"
+		}).finished.catch(() => {})), await Promise.all(n);
+	}
+};
+async function Y(e, t, n) {
+	if (typeof (r = e) == "object" && r !== null && "_$litType$" in r) return T(e, t), t;
+	var r;
+	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);
+	}(e)) return Y((await e()).default, t, n);
+	if (typeof e == "function") {
+		let r = new e();
+		return n && Object.assign(r, n), t.appendChild(r), r;
+	}
+	if (typeof e == "string") {
+		let r = document.createElement(e);
+		return n && Object.assign(r, n), t.appendChild(r), r;
+	}
+	throw Error("schmancy-overlay: unsupported content type");
+}
+t([b({
+	type: String,
+	reflect: !0
+})], J.prototype, "layout", void 0), t([b({
+	type: Boolean,
+	reflect: !0
+})], J.prototype, "dismissable", void 0), t([b({
+	type: Boolean,
+	reflect: !0
+})], J.prototype, "modal", void 0), t([b({
+	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);
+export { J as t };