@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/theme/index.js

@@ -1,289 +1,396 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import { normalizeLiteral as t } from "../../shared/normalize/index.js";
-import { parseDuration as n } from "../../shared/theme/duration.js";
-import { applyOverlayRootStyles as r } from "../../shared/overlay/overlay-root.js";
-import { registerThemeRootSync as i, subscribeThemeSystemAppearanceChange as a, unregisterThemeRootSync as o } from "../../shared/theme/root-sync.js";
-import s from "./style.js";
-import { LitElement as c, html as l, nothing as u, unsafeCSS as d } from "lit";
-import { customElement as f, property as p } from "lit/decorators.js";
-//#region src/components/theme/index.ts
-var m, h = [
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
+import { parseDuration } from "../../shared/theme/duration.js";
+import { applyOverlayRootStyles } from "../../shared/overlay/overlay-root.js";
+import { registerThemeRootSync, subscribeThemeSystemAppearanceChange, unregisterThemeRootSync } from "../../shared/theme/root-sync.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// src/components/theme/index.ts
+var _WebUiTheme;
+const APPEARANCES = [
 	"light",
 	"dark",
 	"system"
-], g = [
+];
+const MOTIONS = [
 	"full",
 	"reduced",
 	"system"
-], _ = {
+];
+const transitionOrigin = {
 	x: NaN,
 	y: NaN
-}, v = 0, y = 0, b = null, x = (e) => {
-	let t = e;
-	_.x = t.clientX, _.y = t.clientY;
-}, S = () => {
-	_.x = NaN, _.y = NaN;
 };
-function C() {
-	y++ > 0 || (window.addEventListener("pointerdown", x, !0), window.addEventListener("keydown", S, !0));
+let transitionSequence = 0;
+let transitionOriginCount = 0;
+let themeTransitionFlightToken = null;
+const recordTransitionOrigin = (event) => {
+	const pointer = event;
+	transitionOrigin.x = pointer.clientX;
+	transitionOrigin.y = pointer.clientY;
+};
+const forgetTransitionOrigin = () => {
+	transitionOrigin.x = NaN;
+	transitionOrigin.y = NaN;
+};
+function addTransitionOriginListeners() {
+	if (transitionOriginCount++ > 0) return;
+	window.addEventListener("pointerdown", recordTransitionOrigin, true);
+	window.addEventListener("keydown", forgetTransitionOrigin, true);
 }
-function w() {
-	--y > 0 || (window.removeEventListener("pointerdown", x, !0), window.removeEventListener("keydown", S, !0));
+function removeTransitionOriginListeners() {
+	if (--transitionOriginCount > 0) return;
+	window.removeEventListener("pointerdown", recordTransitionOrigin, true);
+	window.removeEventListener("keydown", forgetTransitionOrigin, true);
 }
-var T = ["pointerdown", "wheel"];
-function E(e) {
-	let t = !0, n = () => {
-		if (t) {
-			t = !1;
-			for (let e of T) window.removeEventListener(e, r, !0);
-		}
-	}, r = () => {
-		t && (n(), e.skipTransition?.());
+const TRANSITION_SKIP_INPUT_EVENTS = ["pointerdown", "wheel"];
+function addTransitionInputSkipListeners(transition) {
+	let listening = true;
+	const remove = () => {
+		if (!listening) return;
+		listening = false;
+		for (const event of TRANSITION_SKIP_INPUT_EVENTS) window.removeEventListener(event, skip, true);
 	};
-	for (let e of T) window.addEventListener(e, r, {
-		capture: !0,
-		passive: !0
+	const skip = () => {
+		if (!listening) return;
+		remove();
+		transition.skipTransition?.();
+	};
+	for (const event of TRANSITION_SKIP_INPUT_EVENTS) window.addEventListener(event, skip, {
+		capture: true,
+		passive: true
 	});
-	return n;
+	return remove;
 }
-function D(e) {
-	if (e === "dark") return "dark";
-	if (e !== "system") return "light";
+function resolveAppearance(appearance) {
+	if (appearance === "dark") return "dark";
+	if (appearance !== "system") return "light";
 	try {
 		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 	} catch {
 		return "light";
 	}
 }
-function O(e, t) {
-	return Number.isFinite(e) && Number.isFinite(t) ? {
-		x: e,
-		y: t
-	} : {
+function transitionPoint(x, y) {
+	if (Number.isFinite(x) && Number.isFinite(y)) return {
+		x,
+		y
+	};
+	return {
 		x: (window.innerWidth || 0) / 2,
 		y: (window.innerHeight || 0) / 2
 	};
 }
-var k = class extends c {
+let WebUiTheme = class WebUiTheme extends LitElement {
 	static {
-		m = this;
+		_WebUiTheme = this;
 	}
-	constructor(...e) {
-		super(...e), this._appearanceRequest = 0, this._resolvedAppearance = "light", this._motion = "system", this._transitionOriginListening = !1, this._transitionRequested = !1, this._warned = !1;
+	constructor(..._args) {
+		super(..._args);
+		this._appearanceRequest = 0;
+		this._resolvedAppearance = "light";
+		this._motion = "system";
+		this._transitionOriginListening = false;
+		this._transitionRequested = false;
+		this._warned = false;
 	}
 	static {
-		this.styles = d(s);
+		this.styles = unsafeCSS(style_default);
 	}
 	get appearance() {
 		return this._appearance;
 	}
-	set appearance(e) {
-		let n = this._appearance, r = e === void 0 ? void 0 : t(e, h, "light"), i = D(r), a = ++this._appearanceRequest;
-		if (r !== void 0 && !this._transitionRequested && b === null && this._shouldAnimateAppearance(r, i)) {
-			this._transitionRequested = !0;
-			let e = { requestId: a };
-			b = e, this._startThemeTransition(r, i, n, a, e).catch(() => {
-				this._cleanupThemeTransition(), this._transitionRequested = !1, b === e && (b = null), this._appearanceRequest === a && (this._appearance = r, this._syncResolvedAppearance(), this.requestUpdate("appearance", n));
+	set appearance(v) {
+		const old = this._appearance;
+		const next = v !== void 0 ? normalizeLiteral(v, APPEARANCES, "light") : void 0;
+		const resolvedNext = resolveAppearance(next);
+		const request = ++this._appearanceRequest;
+		if (next !== void 0 && !this._transitionRequested && themeTransitionFlightToken === null && this._shouldAnimateAppearance(next, resolvedNext)) {
+			this._transitionRequested = true;
+			const flightToken = { requestId: request };
+			themeTransitionFlightToken = flightToken;
+			this._startThemeTransition(next, resolvedNext, old, request, flightToken).catch(() => {
+				this._cleanupThemeTransition();
+				this._transitionRequested = false;
+				if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null;
+				if (this._appearanceRequest === request) {
+					this._appearance = next;
+					this._syncResolvedAppearance();
+					this.requestUpdate("appearance", old);
+				}
 			});
 			return;
 		}
-		this._appearance = r, this._syncResolvedAppearance(), this.requestUpdate("appearance", n);
+		this._appearance = next;
+		this._syncResolvedAppearance();
+		this.requestUpdate("appearance", old);
 	}
 	get resolvedAppearance() {
 		return this._resolvedAppearance;
 	}
-	_setResolvedAppearance(e) {
-		(this._resolvedAppearance !== e || this.getAttribute("resolved-appearance") !== e) && (this._resolvedAppearance = e, this.setAttribute("resolved-appearance", e));
+	_setResolvedAppearance(value) {
+		if (this._resolvedAppearance === value && this.getAttribute("resolved-appearance") === value) return;
+		this._resolvedAppearance = value;
+		this.setAttribute("resolved-appearance", value);
 	}
 	_syncResolvedAppearance() {
-		this._setResolvedAppearance(D(this._appearance)), this._syncSystemAppearanceSubscription();
+		this._setResolvedAppearance(resolveAppearance(this._appearance));
+		this._syncSystemAppearanceSubscription();
 	}
 	_syncSystemAppearanceSubscription() {
 		if (this.isConnected && this._hasAppearance() && this._appearance === "system") {
 			if (this._unsubscribeSystemAppearance) return;
-			this._unsubscribeSystemAppearance = a(() => {
-				this._setResolvedAppearance(D(this._appearance));
+			this._unsubscribeSystemAppearance = subscribeThemeSystemAppearanceChange(() => {
+				this._setResolvedAppearance(resolveAppearance(this._appearance));
 			});
 			return;
 		}
-		this._unsubscribeSystemAppearance?.(), this._unsubscribeSystemAppearance = void 0;
+		this._unsubscribeSystemAppearance?.();
+		this._unsubscribeSystemAppearance = void 0;
 	}
 	get motion() {
 		return this._motion;
 	}
-	set motion(e) {
-		let n = this._motion;
-		this._motion = t(e, g, "system"), this.requestUpdate("motion", n);
+	set motion(v) {
+		const old = this._motion;
+		this._motion = normalizeLiteral(v, MOTIONS, "system");
+		this.requestUpdate("motion", old);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._syncResolvedAppearance(), this._syncTransitionOriginListeners(!0), this._syncRootPageColorSync(), this._warnWhenAppearanceIsMissing();
+		super.connectedCallback();
+		this._syncResolvedAppearance();
+		this._syncTransitionOriginListeners(true);
+		this._syncRootTokens();
+		this._warnWhenAppearanceIsMissing();
 	}
 	disconnectedCallback() {
-		this._syncTransitionOriginListeners(!1), this._unsubscribeSystemAppearance?.(), this._unsubscribeSystemAppearance = void 0, o(this), this._activeTransition?.skipTransition?.(), this._cleanupThemeTransition(), super.disconnectedCallback();
+		this._syncTransitionOriginListeners(false);
+		this._unsubscribeSystemAppearance?.();
+		this._unsubscribeSystemAppearance = void 0;
+		unregisterThemeRootSync(this);
+		this._activeTransition?.skipTransition?.();
+		this._cleanupThemeTransition();
+		super.disconnectedCallback();
 	}
 	updated() {
-		this._warnWhenAppearanceIsMissing(), this._syncRootPageColorSync();
+		this._warnWhenAppearanceIsMissing();
+		this._syncRootTokens();
 	}
-	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), e === "resolved-appearance" && this._setResolvedAppearance(D(this._appearance));
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		if (name === "resolved-appearance") this._setResolvedAppearance(resolveAppearance(this._appearance));
 	}
-	_syncRootPageColorSync() {
-		this._hasAppearance() ? i(this) : o(this);
+	_syncRootTokens() {
+		if (this._hasAppearance()) registerThemeRootSync(this);
+		else unregisterThemeRootSync(this);
 	}
 	getOverlayRoot() {
-		if (this._hasAppearance()) return this.renderRoot.querySelector("[data-wui-overlay-container]") ?? void 0;
+		if (!this._hasAppearance()) return void 0;
+		return this.renderRoot.querySelector("[data-wui-overlay-container]") ?? void 0;
 	}
 	isReducedMotion() {
-		if (this.motion === "reduced") return !0;
-		if (this.motion === "full") return !1;
+		if (this.motion === "reduced") return true;
+		if (this.motion === "full") return false;
 		try {
 			return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		} catch {
-			return !1;
+			return false;
 		}
 	}
 	_findThemeAncestor() {
-		let e = this.parentNode;
-		for (; e;) {
-			if (e instanceof m && e !== this && e._hasAppearance()) return e;
-			e = e instanceof ShadowRoot ? e.host : e.parentElement;
+		let node = this.parentNode;
+		while (node) {
+			if (node instanceof _WebUiTheme && node !== this && node._hasAppearance()) return node;
+			if (node instanceof ShadowRoot) node = node.host;
+			else node = node.parentElement;
 		}
 		return null;
 	}
 	_contentWidth() {
 		try {
-			let e = document.createRange();
-			return e.selectNodeContents(this), e.getBoundingClientRect().width;
+			const range = document.createRange();
+			range.selectNodeContents(this);
+			return range.getBoundingClientRect().width;
 		} catch {
 			return 0;
 		}
 	}
 	_transitionOrigin() {
-		if (Number.isFinite(_.x) && Number.isFinite(_.y)) return _;
-		let e = this.getBoundingClientRect();
-		return e.width > 0 && e.height > 0 ? {
-			x: e.left + e.width / 2,
-			y: e.top + e.height / 2
-		} : O(NaN, NaN);
+		if (Number.isFinite(transitionOrigin.x) && Number.isFinite(transitionOrigin.y)) return transitionOrigin;
+		const box = this.getBoundingClientRect();
+		if (box.width > 0 && box.height > 0) return {
+			x: box.left + box.width / 2,
+			y: box.top + box.height / 2
+		};
+		return transitionPoint(NaN, NaN);
 	}
-	_syncTransitionOriginListeners(e) {
-		e !== this._transitionOriginListening && (this._transitionOriginListening = e, e ? C() : w());
+	_syncTransitionOriginListeners(listening) {
+		if (listening === this._transitionOriginListening) return;
+		this._transitionOriginListening = listening;
+		if (listening) addTransitionOriginListeners();
+		else removeTransitionOriginListeners();
 	}
 	_transitionMotion() {
-		let e = getComputedStyle(this), t = n(e.getPropertyValue("--wui-theme-transition-duration")) ?? 500, r = e.getPropertyValue("--wui-theme-transition-easing").trim() || "ease-in", i = globalThis.CSS?.supports("animation-timing-function", r) ? r : "ease-in";
+		const style = getComputedStyle(this);
+		const duration = parseDuration(style.getPropertyValue("--wui-theme-transition-duration")) ?? 500;
+		const easing = style.getPropertyValue("--wui-theme-transition-easing").trim() || "ease-in";
+		const safeEasing = globalThis.CSS?.supports("animation-timing-function", easing) ? easing : "ease-in";
 		return {
-			duration: Math.max(0, t),
-			easing: i
+			duration: Math.max(0, duration),
+			easing: safeEasing
 		};
 	}
-	_shouldAnimateAppearance(e, t) {
-		let n = this._appearance;
-		return !n || n === e || D(n) === t ? !1 : typeof document.startViewTransition == "function" && Array.isArray(document.adoptedStyleSheets) && !this.isReducedMotion() && this._transitionMotion().duration > 0;
-	}
-	async _startThemeTransition(e, t, n, r, i) {
-		let a = this._findThemeAncestor() === null, o = a ? void 0 : `wui-theme-transition-${++v}`, s = new CSSStyleSheet();
-		o ? s.replaceSync(`
+	_shouldAnimateAppearance(next, resolvedNext) {
+		const previous = this._appearance;
+		if (!previous || previous === next) return false;
+		if (resolveAppearance(previous) === resolvedNext) return false;
+		return typeof document.startViewTransition === "function" && Array.isArray(document.adoptedStyleSheets) && !this.isReducedMotion() && this._transitionMotion().duration > 0;
+	}
+	async _startThemeTransition(next, resolvedNext, previous, request, flightToken) {
+		const root = this._findThemeAncestor() === null;
+		const transitionName = root ? void 0 : `wui-theme-transition-${++transitionSequence}`;
+		const styleSheet = new CSSStyleSheet();
+		if (transitionName) styleSheet.replaceSync(`
         ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
         ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
-        ::view-transition-image-pair(root), ::view-transition-image-pair(${o}) { mix-blend-mode: normal; }
-        ::view-transition-group(${o}) { animation: none; }
-        ::view-transition-old(${o}), ::view-transition-new(${o}) {
+        ::view-transition-image-pair(root), ::view-transition-image-pair(${transitionName}) { mix-blend-mode: normal; }
+        ::view-transition-group(${transitionName}) { animation: none; }
+        ::view-transition-old(${transitionName}), ::view-transition-new(${transitionName}) {
           animation: none;
           mix-blend-mode: normal;
         }
-        ::view-transition-old(${o}) { z-index: ${t === "dark" ? 1 : 2}; }
-        ::view-transition-new(${o}) { z-index: ${t === "dark" ? 2 : 1}; }
-      `) : s.replaceSync(`
+        ::view-transition-old(${transitionName}) { z-index: ${resolvedNext === "dark" ? 1 : 2}; }
+        ::view-transition-new(${transitionName}) { z-index: ${resolvedNext === "dark" ? 2 : 1}; }
+      `);
+		else styleSheet.replaceSync(`
         ::view-transition-old(root), ::view-transition-new(root) {
           animation: none;
           mix-blend-mode: normal;
         }
         ::view-transition-image-pair(root) { mix-blend-mode: normal; }
-        ::view-transition-old(root) { z-index: ${t === "dark" ? 1 : 2}; }
-        ::view-transition-new(root) { z-index: ${t === "dark" ? 2 : 1}; }
+        ::view-transition-old(root) { z-index: ${resolvedNext === "dark" ? 1 : 2}; }
+        ::view-transition-new(root) { z-index: ${resolvedNext === "dark" ? 2 : 1}; }
       `);
-		let c = this.style.getPropertyValue("display"), l = this.style.getPropertyValue("width"), u = o ? this.style.getPropertyValue("view-transition-name") : void 0;
-		if (o) {
-			let e = this._contentWidth();
-			this.style.setProperty("display", "block"), e > 0 && this.style.setProperty("width", `${e}px`), this.style.setProperty("view-transition-name", o);
+		const hadDisplay = this.style.getPropertyValue("display");
+		const hadWidth = this.style.getPropertyValue("width");
+		const hadTransitionName = transitionName ? this.style.getPropertyValue("view-transition-name") : void 0;
+		if (transitionName) {
+			const contentWidth = this._contentWidth();
+			this.style.setProperty("display", "block");
+			if (contentWidth > 0) this.style.setProperty("width", `${contentWidth}px`);
+			this.style.setProperty("view-transition-name", transitionName);
 		}
-		let d = () => {
+		const restoreCapture = () => {
 			try {
-				document.adoptedStyleSheets = document.adoptedStyleSheets.filter((e) => e !== s);
+				document.adoptedStyleSheets = document.adoptedStyleSheets.filter((sheet) => sheet !== styleSheet);
 			} catch {}
-			o && (u ? this.style.setProperty("view-transition-name", u) : this.style.removeProperty("view-transition-name"), l ? this.style.setProperty("width", l) : this.style.removeProperty("width"), c ? this.style.setProperty("display", c) : this.style.removeProperty("display"));
-		}, f = () => this._appearanceRequest === r ? (this._appearance = e, this._syncResolvedAppearance(), this.requestUpdate("appearance", n), this.updateComplete) : this.updateComplete;
-		this._transitionCleanup = d, document.adoptedStyleSheets = [...document.adoptedStyleSheets, s];
-		let p = document.startViewTransition(f);
-		this._activeTransition = p, this._transitionInputSkipCleanup = E(p);
-		let m = [];
-		p.ready.then(() => {
-			let { duration: e, easing: n } = this._transitionMotion();
-			if (e <= 0) return;
-			let { x: r, y: i } = this._transitionOrigin(), s = t === "dark" ? "::view-transition-new(root)" : "::view-transition-old(root)";
-			if (!a) {
-				let a = this.getBoundingClientRect(), s = {
-					x: r - a.left,
-					y: i - a.top
-				}, c = Math.ceil(Math.hypot(Math.max(s.x, a.width - s.x), Math.max(s.y, a.height - s.y))), l = this._transitionKeyframes(s.x, s.y, c, t), u = t === "dark" ? `::view-transition-new(${o})` : `::view-transition-old(${o})`;
-				m.push(document.documentElement.animate(l, {
-					duration: e,
-					easing: n,
+			if (!transitionName) return;
+			if (hadTransitionName) this.style.setProperty("view-transition-name", hadTransitionName);
+			else this.style.removeProperty("view-transition-name");
+			if (hadWidth) this.style.setProperty("width", hadWidth);
+			else this.style.removeProperty("width");
+			if (hadDisplay) this.style.setProperty("display", hadDisplay);
+			else this.style.removeProperty("display");
+		};
+		const commit = () => {
+			if (this._appearanceRequest !== request) return this.updateComplete;
+			this._appearance = next;
+			this._syncResolvedAppearance();
+			this.requestUpdate("appearance", previous);
+			return this.updateComplete;
+		};
+		this._transitionCleanup = restoreCapture;
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
+		const transition = document.startViewTransition(commit);
+		this._activeTransition = transition;
+		this._transitionInputSkipCleanup = addTransitionInputSkipListeners(transition);
+		const animations = [];
+		transition.ready.then(() => {
+			const { duration, easing } = this._transitionMotion();
+			if (duration <= 0) return;
+			const { x, y } = this._transitionOrigin();
+			const target = resolvedNext === "dark" ? "::view-transition-new(root)" : "::view-transition-old(root)";
+			if (!root) {
+				const box = this.getBoundingClientRect();
+				const relative = {
+					x: x - box.left,
+					y: y - box.top
+				};
+				const radius = Math.ceil(Math.hypot(Math.max(relative.x, box.width - relative.x), Math.max(relative.y, box.height - relative.y)));
+				const frames = this._transitionKeyframes(relative.x, relative.y, radius, resolvedNext);
+				const target = resolvedNext === "dark" ? `::view-transition-new(${transitionName})` : `::view-transition-old(${transitionName})`;
+				animations.push(document.documentElement.animate(frames, {
+					duration,
+					easing,
 					fill: "both",
-					pseudoElement: u
+					pseudoElement: target
 				}));
 				return;
 			}
-			let c = Math.ceil(Math.hypot(Math.max(r, window.innerWidth - r), Math.max(i, window.innerHeight - i)));
-			m.push(document.documentElement.animate(this._transitionKeyframes(r, i, c, t), {
-				duration: e,
-				easing: n,
+			const radius = Math.ceil(Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)));
+			animations.push(document.documentElement.animate(this._transitionKeyframes(x, y, radius, resolvedNext), {
+				duration,
+				easing,
 				fill: "both",
-				pseudoElement: s
+				pseudoElement: target
 			}));
 		}).catch(() => void 0);
 		try {
-			await p.finished;
+			await transition.finished;
 		} catch {} finally {
-			this._transitionInputSkipCleanup?.(), this._transitionInputSkipCleanup = void 0, this._activeTransition = void 0, this._transitionCleanup = void 0;
-			for (let e of m) e.cancel();
-			d(), this._transitionRequested = !1, b === i && (b = null);
+			this._transitionInputSkipCleanup?.();
+			this._transitionInputSkipCleanup = void 0;
+			this._activeTransition = void 0;
+			this._transitionCleanup = void 0;
+			for (const animation of animations) animation.cancel();
+			restoreCapture();
+			this._transitionRequested = false;
+			if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null;
 		}
 	}
-	_transitionKeyframes(e, t, n, r) {
-		let i = `circle(0px at ${e}px ${t}px)`, a = `circle(${n}px at ${e}px ${t}px)`;
-		return r === "dark" ? [{ clipPath: i }, { clipPath: a }] : [{ clipPath: a }, { clipPath: i }];
+	_transitionKeyframes(x, y, radius, resolvedNext) {
+		const from = `circle(0px at ${x}px ${y}px)`;
+		const to = `circle(${radius}px at ${x}px ${y}px)`;
+		return resolvedNext === "dark" ? [{ clipPath: from }, { clipPath: to }] : [{ clipPath: to }, { clipPath: from }];
 	}
-	_cleanupThemeTransition(e = !0) {
-		this._transitionInputSkipCleanup?.(), this._transitionInputSkipCleanup = void 0, this._activeTransition = void 0;
-		let t = this._transitionCleanup;
-		this._transitionCleanup = void 0, e && t?.();
+	_cleanupThemeTransition(restoreCapture = true) {
+		this._transitionInputSkipCleanup?.();
+		this._transitionInputSkipCleanup = void 0;
+		this._activeTransition = void 0;
+		const cleanup = this._transitionCleanup;
+		this._transitionCleanup = void 0;
+		if (restoreCapture) cleanup?.();
 	}
 	render() {
-		return l`<slot></slot>${this._hasAppearance() ? l`<div data-wui-overlay-container></div>` : u}`;
+		return html`<slot></slot>${this._hasAppearance() ? html`<div data-wui-overlay-container></div>` : nothing}`;
 	}
 	firstUpdated() {
-		this.renderRoot instanceof ShadowRoot && r(this.renderRoot);
+		if (this.renderRoot instanceof ShadowRoot) applyOverlayRootStyles(this.renderRoot);
 	}
 	_hasAppearance() {
-		return this.appearance !== void 0 && h.includes(this.appearance);
+		return this.appearance !== void 0 && APPEARANCES.includes(this.appearance);
 	}
 	_warnWhenAppearanceIsMissing() {
-		this._hasAppearance() || this._warned;
+		if (this._hasAppearance() || this._warned || !import.meta.env.DEV) return;
+		this._warned = true;
+		console.warn("[web-ui-theme] appearance is required; this theme scope is inactive until it is set.");
 	}
 };
-e([p({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], k.prototype, "appearance", null), e([p({
+	reflect: true
+})], WebUiTheme.prototype, "appearance", null);
+__decorate([property({
 	type: String,
-	reflect: !0,
+	reflect: true,
 	attribute: "resolved-appearance"
-})], k.prototype, "_resolvedAppearance", void 0), e([p({
+})], WebUiTheme.prototype, "_resolvedAppearance", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], k.prototype, "motion", null), k = m = e([f("web-ui-theme")], k);
-//#endregion
-export { k as WebUiTheme };
+	reflect: true
+})], WebUiTheme.prototype, "motion", null);
+WebUiTheme = _WebUiTheme = __decorate([customElement("web-ui-theme")], WebUiTheme);
+export { WebUiTheme };
 
 //# sourceMappingURL=index.js.map