@filip.mazev/blocks 1.4.3 → 1.4.5

package/fesm2022/filip.mazev-blocks-effects-runtime.mjs

@@ -25,12 +25,11 @@ function smoothstep(low, high, value) {
 }
 const configurationEvent = "bx-glass-config-change";
 const attributes = [
-	"data-bx-glass-material",
 	"data-bx-glass-quality",
 	"data-bx-reduced-motion",
 	"data-bx-reduced-transparency"
 ];
-const properties = ["--bx-glass-blur", "--bx-glass-opacity"];
+const properties = ["--bx-glassiness"];
 const configured = /* @__PURE__ */ new WeakSet();
 function configureAppearance(root, initial = {}) {
 	if (configured.has(root)) throw new Error("A glass configuration is already mounted on this root.");
@@ -40,21 +39,19 @@ function configureAppearance(root, initial = {}) {
 	let options = { ...initial };
 	let disposed = false;
 	const notify = () => {
-		const ViewEvent = root.ownerDocument.defaultView?.CustomEvent;
-		if (ViewEvent) root.ownerDocument.dispatchEvent(new ViewEvent(configurationEvent, { detail: root }));
+		const viewEvent = root.ownerDocument.defaultView?.CustomEvent;
+		if (viewEvent) root.ownerDocument.dispatchEvent(new viewEvent(configurationEvent, { detail: root }));
 	};
 	const paint = () => {
 		restoreAttributes();
 		restoreStyles();
 		const values = [
-			["data-bx-glass-material", options.material],
 			["data-bx-glass-quality", options.quality],
 			["data-bx-reduced-motion", options.reducedMotion],
 			["data-bx-reduced-transparency", options.reducedTransparency]
 		];
 		for (const [name, value] of values) if (value !== void 0) root.setAttribute(name, String(value));
-		if (options.blur !== void 0) root.style.setProperty("--bx-glass-blur", `${finiteClamp(options.blur, 0, 40, 10)}px`);
-		if (options.tint !== void 0) root.style.setProperty("--bx-glass-opacity", String(finiteClamp(options.tint, 0, 1, .4)));
+		if (options.glassiness !== void 0) root.style.setProperty("--bx-glassiness", String(finiteClamp(options.glassiness, 0, 1, .5)));
 		notify();
 	};
 	paint();
@@ -125,10 +122,27 @@ function subscribeFrame(callback) {
 		}
 	};
 }
+const lightingOrigins = /* @__PURE__ */ new WeakMap();
+function inheritGlassLighting(overlay, origin) {
+	if (overlay.contains(origin)) throw new Error("A lighting origin must be outside its overlay.");
+	lightingOrigins.set(overlay, origin);
+	return () => lightingOrigins.delete(overlay);
+}
+function lightingOrigin(element) {
+	let current = element;
+	while (current) {
+		const origin = lightingOrigins.get(current);
+		if (origin) return origin;
+		current = current.parentElement;
+	}
+	return element;
+}
 function lightingVisibility(doc, view) {
 	const styles = /* @__PURE__ */ new Map();
 	const boundaries = /* @__PURE__ */ new Map();
 	const layers = /* @__PURE__ */ new Map();
+	const ambientBoundaries = /* @__PURE__ */ new Map();
+	const hitStacks = /* @__PURE__ */ new Map();
 	const style = (element) => {
 		let value = styles.get(element);
 		if (!value) {
@@ -137,9 +151,55 @@ function lightingVisibility(doc, view) {
 		}
 		return value;
 	};
+	const elementsAt = (x, y) => {
+		const key = `${Math.round(x)},${Math.round(y)}`;
+		const cached = hitStacks.get(key);
+		if (cached) return cached;
+		const elements = [...doc.elementsFromPoint(x, y)];
+		for (let index = 0; index < elements.length; index++) {
+			const root = elements[index].shadowRoot;
+			if (!root) continue;
+			const shadowElements = root.elementsFromPoint(x, y);
+			if (!shadowElements.length) continue;
+			elements.splice(index, 0, ...shadowElements);
+			index += shadowElements.length;
+		}
+		hitStacks.set(key, elements);
+		return elements;
+	};
+	const ambientBoundary = (element) => {
+		const cached = ambientBoundaries.get(element);
+		if (cached) return cached;
+		const origin = lightingOrigin(element);
+		if (origin !== element) {
+			const result = ambientBoundary(origin);
+			ambientBoundaries.set(element, result);
+			return result;
+		}
+		let current = element;
+		const visited = [];
+		while (current) {
+			visited.push(current);
+			const boundary = ambientBoundaries.get(current) ?? current.closest("[data-bx-light-scope], dialog, [role=\"dialog\"], [role=\"alertdialog\"], [popover], .cdk-overlay-pane, .toast-container, bx-modal");
+			if (boundary) {
+				for (const ancestor of visited) ambientBoundaries.set(ancestor, boundary);
+				return boundary;
+			}
+			const root = current.getRootNode();
+			current = current.parentElement ?? root.host ?? null;
+		}
+		for (const ancestor of visited) ambientBoundaries.set(ancestor, doc.documentElement);
+		return doc.documentElement;
+	};
 	const boundary = (element) => {
 		const cached = boundaries.get(element);
 		if (cached) return cached;
+		const origin = lightingOrigin(element);
+		if (origin !== element) {
+			const result = boundary(origin);
+			boundaries.set(element, result);
+			return result;
+		}
 		const css = style(element);
 		const result = element.matches("[data-bx-light-scope], dialog, [role=\"dialog\"], [role=\"alertdialog\"], [popover], .cdk-overlay-pane, .toast-container, bx-modal") || css.position === "fixed" || css.position === "sticky" ? element : element.parentElement ? boundary(element.parentElement) : element;
 		boundaries.set(element, result);
@@ -167,17 +227,605 @@ function lightingVisibility(doc, view) {
 		const px = Math.max(bounds.left + inset, Math.min(x, bounds.right - inset));
 		const py = Math.max(bounds.top + inset, Math.min(y, bounds.bottom - inset));
 		if (px < 0 || py < 0 || px >= view.innerWidth || py >= view.innerHeight) return false;
+		if (css.pointerEvents === "none" && element.closest("bx-tooltip, [role=\"tooltip\"]")) {
+			if (css.visibility !== "visible" || css.display === "none" || Number(css.opacity) === 0) return false;
+			const origin = lightingOrigin(element);
+			if (origin !== element) {
+				const rect = origin.getBoundingClientRect();
+				return exposed(origin, rect.left + rect.width / 2, rect.top + rect.height / 2, rect);
+			}
+			const behind = doc.elementFromPoint(px, py);
+			return !!behind && ambientBoundary(behind) === ambientBoundary(element);
+		}
 		const hit = doc.elementFromPoint(px, py);
 		return !!hit && (hit === element || element.contains(hit));
 	};
 	return {
 		boundary,
 		layer,
-		exposed
+		exposed,
+		style,
+		elementsAt,
+		ambientBoundary
 	};
 }
+const sampleInterval = 180;
+const liveInterval = 500;
+const rasterSize = 32;
+var AmbientSampler = class {
+	doc;
+	view;
+	changed;
+	observeRoot;
+	samples = /* @__PURE__ */ new Map();
+	dirty = /* @__PURE__ */ new Set();
+	pending = /* @__PURE__ */ new Set();
+	sources = /* @__PURE__ */ new Set();
+	initialized = false;
+	media = /* @__PURE__ */ new WeakMap();
+	dependencies;
+	sampleCanvas;
+	sampleContext;
+	timer;
+	liveTimer;
+	stopFrame;
+	nextSample = 0;
+	liveDelay = liveInterval;
+	motion;
+	constructor(doc, view, changed, observeRoot) {
+		this.doc = doc;
+		this.view = view;
+		this.changed = changed;
+		this.observeRoot = observeRoot;
+		this.sampleCanvas = doc.createElement("canvas");
+		this.sampleCanvas.width = this.sampleCanvas.height = rasterSize;
+		this.sampleContext = this.sampleCanvas.getContext("2d", { willReadFrequently: true });
+		this.motion = view.matchMedia("(prefers-reduced-motion: reduce)");
+	}
+	add(entry) {
+		if (!this.initialized) {
+			this.scan(this.doc);
+			this.initialized = true;
+		}
+		const root = entry.element.getRootNode();
+		if ("host" in root) this.scan(root);
+		this.samples.set(entry, {
+			lights: [],
+			media: /* @__PURE__ */ new Set(),
+			rects: /* @__PURE__ */ new Map()
+		});
+		this.invalidate(entry);
+	}
+	remove(entry) {
+		this.samples.delete(entry);
+		this.dirty.delete(entry);
+		this.pending.delete(entry);
+		this.syncLive();
+	}
+	lights(entry) {
+		return this.samples.get(entry)?.lights ?? [];
+	}
+	invalidate(entry) {
+		for (const receiver of entry ? [entry] : this.samples.keys()) if (receiver.visible && receiver.element.isConnected) this.dirty.add(receiver);
+		this.resume();
+	}
+	assetChanged(element) {
+		this.media.delete(element);
+		this.invalidate();
+	}
+	sourcesChanged(record) {
+		for (const node of record.addedNodes) if (node.nodeType === 1) this.scan(node);
+		for (const source of this.sources) if (!source.isConnected) this.sources.delete(source);
+	}
+	resume() {
+		if (this.doc.hidden) {
+			if (this.timer !== void 0) this.view.clearTimeout(this.timer);
+			if (this.liveTimer !== void 0) this.view.clearTimeout(this.liveTimer);
+			this.timer = this.liveTimer = void 0;
+			this.stopFrame?.();
+			this.stopFrame = void 0;
+			for (const entry of this.pending) this.dirty.add(entry);
+			this.pending.clear();
+			return;
+		}
+		if (this.dirty.size && this.timer === void 0 && !this.stopFrame) this.timer = this.view.setTimeout(() => {
+			this.timer = void 0;
+			this.nextSample = this.view.performance.now() + sampleInterval;
+			this.pending = this.dirty;
+			this.dirty = /* @__PURE__ */ new Set();
+			this.stopFrame = subscribeFrame(() => this.sampleBatch());
+		}, Math.max(0, this.nextSample - this.view.performance.now()));
+		this.syncLive();
+	}
+	destroy() {
+		if (this.timer !== void 0) this.view.clearTimeout(this.timer);
+		if (this.liveTimer !== void 0) this.view.clearTimeout(this.liveTimer);
+		this.stopFrame?.();
+		this.stopFrame = void 0;
+		this.timer = this.liveTimer = void 0;
+		this.samples.clear();
+		this.dirty.clear();
+		this.pending.clear();
+		this.sources.clear();
+		this.media = /* @__PURE__ */ new WeakMap();
+		this.initialized = false;
+		this.nextSample = 0;
+		this.liveDelay = liveInterval;
+	}
+	scan(root) {
+		if ("host" in root) this.observeRoot(root);
+		if ("tagName" in root && /^(IMG|VIDEO|CANVAS)$/.test(String(root.tagName))) this.sources.add(root);
+		const shadow = "shadowRoot" in root ? root.shadowRoot : null;
+		if (shadow) this.scan(shadow);
+		for (const element of root.querySelectorAll("*")) {
+			if (/^(IMG|VIDEO|CANVAS)$/.test(element.tagName)) this.sources.add(element);
+			if (element.shadowRoot) this.scan(element.shadowRoot);
+		}
+	}
+	sampleBatch() {
+		const start = this.view.performance.now();
+		const visibility = lightingVisibility(this.doc, this.view);
+		const rects = /* @__PURE__ */ new Map();
+		const rasterSamples = /* @__PURE__ */ new Map();
+		const sources = [...this.sources];
+		const completed = [];
+		for (const entry of this.pending) {
+			this.pending.delete(entry);
+			if (!entry.visible || !entry.element.isConnected || !this.samples.has(entry)) continue;
+			entry.bounds = entry.element.getBoundingClientRect();
+			this.dependencies = /* @__PURE__ */ new Set();
+			const lights = this.environmentLights(entry, sources, rasterSamples, rects, visibility);
+			const mediaRects = /* @__PURE__ */ new Map();
+			for (const source of this.dependencies) mediaRects.set(source, this.rectFor(source, rects));
+			this.samples.set(entry, {
+				lights,
+				media: this.dependencies,
+				rects: mediaRects
+			});
+			completed.push(entry);
+			if (completed.length >= 4 || this.view.performance.now() - start >= 4) break;
+		}
+		this.dependencies = void 0;
+		for (const entry of completed) this.changed(entry);
+		if (this.pending.size) return true;
+		this.stopFrame = void 0;
+		this.resume();
+		return false;
+	}
+	liveSources() {
+		const sources = /* @__PURE__ */ new Map();
+		for (const [entry, sample] of this.samples) {
+			const motion = inheritedAttribute(entry.element, "data-bx-reduced-motion");
+			if (!entry.visible || !entry.element.isConnected || (motion === null ? this.motion.matches : motion === "true")) continue;
+			for (const source of sample.media) {
+				if (!source.isConnected || !/^(CANVAS|VIDEO)$/.test(source.tagName) || this.media.get(source)?.data === null) continue;
+				if (source.tagName === "VIDEO" && source.paused) continue;
+				const entries = sources.get(source) ?? [];
+				entries.push(entry);
+				sources.set(source, entries);
+			}
+		}
+		return sources;
+	}
+	syncLive() {
+		const active = !this.doc.hidden && this.liveSources().size > 0;
+		if (!active && this.liveTimer !== void 0) {
+			this.view.clearTimeout(this.liveTimer);
+			this.liveTimer = void 0;
+		}
+		if (!active || this.liveTimer !== void 0) return;
+		this.liveTimer = this.view.setTimeout(() => {
+			this.liveTimer = void 0;
+			let changed = false;
+			const recolored = /* @__PURE__ */ new Set();
+			const visibility = lightingVisibility(this.doc, this.view);
+			for (const [source, entries] of this.liveSources()) {
+				const previous = this.media.get(source);
+				const next = this.readRaster(source, true);
+				if (previous?.data && next?.data && this.samePixels(previous.data, next.data)) continue;
+				if (previous?.data === next?.data) continue;
+				changed = true;
+				const coverageChanged = !previous?.data || !next?.data || !this.samePixels(previous.data, next.data, true);
+				for (const entry of entries) {
+					const sample = this.samples.get(entry);
+					if (!sample || coverageChanged || this.dirty.has(entry) || this.pending.has(entry)) {
+						this.dirty.add(entry);
+						continue;
+					}
+					const pixels = /* @__PURE__ */ new Map([[source, next?.data ?? null]]);
+					sample.lights = sample.lights.map((light) => {
+						if (light.source !== source) return light;
+						const color = this.rasterColorAt(source, light.x, light.y, pixels, sample.rects, visibility);
+						if (!color || color === light.color) return light;
+						recolored.add(entry);
+						return {
+							...light,
+							color
+						};
+					});
+				}
+			}
+			for (const entry of recolored) this.changed(entry);
+			this.liveDelay = changed ? liveInterval : Math.min(2e3, this.liveDelay * 2);
+			this.resume();
+		}, this.liveDelay);
+	}
+	samePixels(first, second, alphaOnly = false) {
+		for (let index = alphaOnly ? 3 : 0; index < first.data.length; index += alphaOnly ? 4 : 1) if (first.data[index] >> 3 !== second.data[index] >> 3) return false;
+		return true;
+	}
+	readRaster(element, refresh = false) {
+		const cached = this.media.get(element);
+		if (cached && !refresh) return cached;
+		const tag = element.tagName;
+		let source;
+		let stamp;
+		if (tag === "IMG") {
+			const image = element;
+			if (!image.complete || !image.naturalWidth) return void 0;
+			source = image;
+		} else if (tag === "VIDEO") {
+			const video = element;
+			if (video.readyState < 2 || !video.videoWidth) return void 0;
+			stamp = video.currentTime;
+			if (cached?.stamp === stamp) return cached;
+			source = video;
+		} else {
+			const canvas = element;
+			if (!canvas.width || !canvas.height) return void 0;
+			source = canvas;
+		}
+		if (!this.sampleContext) return void 0;
+		let data = null;
+		try {
+			this.sampleContext.clearRect(0, 0, rasterSize, rasterSize);
+			this.sampleContext.drawImage(source, 0, 0, rasterSize, rasterSize);
+			data = this.sampleContext.getImageData(0, 0, rasterSize, rasterSize);
+		} catch {
+			this.sampleCanvas.width = rasterSize;
+			this.sampleContext = this.sampleCanvas.getContext("2d", { willReadFrequently: true });
+		}
+		const result = {
+			data,
+			stamp
+		};
+		this.media.set(element, result);
+		return result;
+	}
+	environmentLights(entry, rasterSources, rasterSamples, rects, visibility) {
+		const bounds = entry.bounds;
+		if (!bounds || bounds.width <= 0 || bounds.height <= 0 || entry.element.getAttribute("data-bx-surface") === "solid" || entry.element.getAttribute("data-bx-reduced-transparency") === "true") return [];
+		const insetX = Math.min(3, bounds.width * .1);
+		const insetY = Math.min(3, bounds.height * .1);
+		const points = [
+			{
+				x: bounds.left + bounds.width * .24,
+				y: bounds.top + insetY,
+				side: "inside",
+				edge: 0
+			},
+			{
+				x: bounds.left + bounds.width * .76,
+				y: bounds.top + insetY,
+				side: "inside",
+				edge: 0
+			},
+			{
+				x: bounds.right - insetX,
+				y: bounds.top + bounds.height * .24,
+				side: "inside",
+				edge: 1
+			},
+			{
+				x: bounds.right - insetX,
+				y: bounds.top + bounds.height * .76,
+				side: "inside",
+				edge: 1
+			},
+			{
+				x: bounds.left + bounds.width * .76,
+				y: bounds.bottom - insetY,
+				side: "inside",
+				edge: 2
+			},
+			{
+				x: bounds.left + bounds.width * .24,
+				y: bounds.bottom - insetY,
+				side: "inside",
+				edge: 2
+			},
+			{
+				x: bounds.left + insetX,
+				y: bounds.top + bounds.height * .76,
+				side: "inside",
+				edge: 3
+			},
+			{
+				x: bounds.left + insetX,
+				y: bounds.top + bounds.height * .24,
+				side: "inside",
+				edge: 3
+			},
+			...[24, 96].flatMap((gap) => [
+				{
+					x: bounds.left + bounds.width / 2,
+					y: bounds.top - gap,
+					side: "outside",
+					edge: 0
+				},
+				{
+					x: bounds.right + gap,
+					y: bounds.top + bounds.height / 2,
+					side: "outside",
+					edge: 1
+				},
+				{
+					x: bounds.left + bounds.width / 2,
+					y: bounds.bottom + gap,
+					side: "outside",
+					edge: 2
+				},
+				{
+					x: bounds.left - gap,
+					y: bounds.top + bounds.height / 2,
+					side: "outside",
+					edge: 3
+				}
+			])
+		];
+		const visibleX = Math.max(1, Math.min(this.view.innerWidth - 1, bounds.left + bounds.width / 2));
+		const visibleY = Math.max(1, Math.min(this.view.innerHeight - 1, bounds.top + bounds.height / 2));
+		if (!visibility.exposed(entry.element, visibleX, visibleY, bounds)) return [];
+		const targetBoundary = visibility.ambientBoundary(entry.element);
+		const passiveTooltip = visibility.style(entry.element).pointerEvents === "none" && !!entry.element.closest("bx-tooltip, [role=\"tooltip\"]");
+		rasterSources = rasterSources.filter((source) => {
+			const rect = this.rectFor(source, rects);
+			return rect.width > 0 && rect.height > 0 && rect.right >= bounds.left - 96 && rect.left <= bounds.right + 96 && rect.bottom >= bounds.top - 96 && rect.top <= bounds.bottom + 96 && visibility.ambientBoundary(source) === targetBoundary;
+		});
+		const lights = [];
+		const sourcesByEdge = /* @__PURE__ */ new Map();
+		const colorsByEdge = /* @__PURE__ */ new Map();
+		points.forEach((point, index) => {
+			if (point.x < 0 || point.y < 0 || point.x >= this.view.innerWidth || point.y >= this.view.innerHeight) return;
+			const stack = visibility.elementsAt(point.x, point.y);
+			const receiverIndex = stack.findIndex((element) => this.isInside(element, entry.element));
+			let source;
+			let foreground = false;
+			if (point.side === "inside" && receiverIndex >= 0) {
+				source = this.findVisualSource(stack.slice(0, receiverIndex), entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: true,
+					skipRoot: true
+				});
+				if (source) foreground = true;
+				source ??= this.findRasterSource(rasterSources, entry, point.x, point.y, visibility, rasterSamples, rects, stack, receiverIndex, true, targetBoundary);
+				source ??= this.findVisualSource(stack.slice(receiverIndex + 1), entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: true,
+					skipRoot: true
+				});
+				source ??= this.findRasterSource(rasterSources, entry, point.x, point.y, visibility, rasterSamples, rects, stack, receiverIndex, false, targetBoundary);
+				source ??= this.findVisualSource(stack.slice(receiverIndex + 1), entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: false,
+					skipRoot: true
+				});
+				source ??= this.findVisualSource(stack.slice(receiverIndex + 1), entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: false,
+					skipRoot: false
+				});
+			} else if (point.side === "outside" || receiverIndex < 0 && passiveTooltip) {
+				source = this.findVisualSource(stack, entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: true,
+					skipRoot: true
+				});
+				source ??= this.findRasterSource(rasterSources, entry, point.x, point.y, visibility, rasterSamples, rects, stack, -1, void 0, targetBoundary);
+				source ??= this.findVisualSource(stack, entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: false,
+					skipRoot: true
+				});
+				source ??= this.findVisualSource(stack, entry, point.x, point.y, visibility, rasterSamples, rects, {
+					skipAncestors: false,
+					skipRoot: false
+				});
+			}
+			if (!source || visibility.ambientBoundary(source.element) !== targetBoundary) return;
+			const sourceRect = this.rectFor(source.element, rects);
+			const gapX = Math.max(bounds.left - sourceRect.right, sourceRect.left - bounds.right, 0);
+			const gapY = Math.max(bounds.top - sourceRect.bottom, sourceRect.top - bounds.bottom, 0);
+			if (point.side === "outside" && Math.hypot(gapX, gapY) > 160) return;
+			if (source.element === entry.element || this.isInside(source.element, entry.element)) return;
+			const edgeSources = sourcesByEdge.get(point.edge) ?? /* @__PURE__ */ new Set();
+			if (point.side === "outside" && edgeSources.has(source.element)) return;
+			const edgeColors = colorsByEdge.get(point.edge) ?? /* @__PURE__ */ new Map();
+			const sourceColors = edgeColors.get(source.element) ?? /* @__PURE__ */ new Set();
+			if (point.side === "outside" && sourceColors.has(source.color)) return;
+			sourceColors.add(source.color);
+			edgeColors.set(source.element, sourceColors);
+			colorsByEdge.set(point.edge, edgeColors);
+			if (point.side === "inside") {
+				edgeSources.add(source.element);
+				sourcesByEdge.set(point.edge, edgeSources);
+			}
+			if (point.side === "outside") foreground = this.isAmbientForeground(source.element, entry.element, stack, -1, visibility);
+			const depth = foreground ? 24 : 52;
+			const gap = Math.hypot(gapX, gapY);
+			const edgeLength = point.edge % 2 === 0 ? bounds.width : bounds.height;
+			lights.push({
+				key: `environment:${entry.id}:${index}`,
+				source: source.element.namespaceURI === "http://www.w3.org/1999/xhtml" ? source.element : void 0,
+				ambient: true,
+				x: point.x,
+				y: point.y,
+				z: depth,
+				color: source.color,
+				intensity: (point.side === "inside" ? .38 : .48) * Math.pow(Math.max(0, 1 - gap / 160), 2),
+				radius: 240,
+				spread: Math.max(48, Math.min(240, edgeLength * .65))
+			});
+		});
+		return lights;
+	}
+	findVisualSource(elements, entry, x, y, visibility, rasterSamples, rects, options) {
+		for (const element of elements) {
+			if (element === entry.element || this.isInside(element, entry.element)) continue;
+			if (options.skipAncestors && this.isInside(entry.element, element)) continue;
+			if (options.skipRoot && (element === this.doc.documentElement || element === this.doc.body)) continue;
+			if (visibility.ambientBoundary(element) !== visibility.ambientBoundary(entry.element)) continue;
+			const color = this.visualColorAt(element, x, y, visibility, rasterSamples, rects);
+			if (color) return {
+				element,
+				color
+			};
+		}
+	}
+	findRasterSource(sources, entry, x, y, visibility, rasterSamples, rects, stack, receiverIndex, foreground, targetBoundary) {
+		const matches = sources.filter((element) => {
+			if (this.isInside(element, entry.element) || visibility.ambientBoundary(element) !== targetBoundary) return false;
+			const bounds = this.rectFor(element, rects);
+			if (x < bounds.left || x >= bounds.right || y < bounds.top || y >= bounds.bottom) return false;
+			return foreground === void 0 || this.isAmbientForeground(element, entry.element, stack, receiverIndex, visibility) === foreground;
+		}).sort((first, second) => this.rasterOrder(second, stack, entry.element, visibility) - this.rasterOrder(first, stack, entry.element, visibility));
+		for (const element of matches) {
+			const color = this.rasterColorAt(element, x, y, rasterSamples, rects, visibility);
+			if (color) return {
+				element,
+				color
+			};
+		}
+	}
+	visualColorAt(element, x, y, visibility, rasterSamples, rects) {
+		const raster = this.rasterColorAt(element, x, y, rasterSamples, rects, visibility);
+		if (raster) return raster;
+		const style = visibility.style(element);
+		const gradient = this.gradientColorAt(style.backgroundImage, this.rectFor(element, rects), x, y);
+		if (gradient) return gradient;
+		if (!this.isTransparent(style.backgroundColor)) return style.backgroundColor;
+		for (const side of [
+			"top",
+			"right",
+			"bottom",
+			"left"
+		]) {
+			const color = style.getPropertyValue(`border-${side}-color`);
+			if (parseFloat(style.getPropertyValue(`border-${side}-width`)) > 0 && !this.isTransparent(color)) return color;
+		}
+	}
+	rasterColorAt(element, x, y, cache, rects, visibility) {
+		const tag = element.tagName;
+		if (!/^(IMG|CANVAS|VIDEO)$/.test(tag)) return void 0;
+		const bounds = this.rectFor(element, rects);
+		if (bounds.width <= 0 || bounds.height <= 0) return void 0;
+		const css = visibility.style(element);
+		if (css.visibility !== "visible" || Number(css.opacity) === 0) return void 0;
+		this.dependencies?.add(element);
+		let data = cache.get(element);
+		if (data === void 0) {
+			data = this.readRaster(element)?.data ?? null;
+			cache.set(element, data);
+		}
+		if (!data) return void 0;
+		let u = Math.max(0, Math.min(1, (x - bounds.left) / bounds.width));
+		let v = Math.max(0, Math.min(1, (y - bounds.top) / bounds.height));
+		if ((tag === "IMG" || tag === "VIDEO") && css.objectFit !== "fill") {
+			const width = tag === "IMG" ? element.naturalWidth : element.videoWidth;
+			const height = tag === "IMG" ? element.naturalHeight : element.videoHeight;
+			if (!width || !height) return void 0;
+			const contain = Math.min(bounds.width / width, bounds.height / height);
+			const scale = css.objectFit === "cover" ? Math.max(bounds.width / width, bounds.height / height) : css.objectFit === "none" ? 1 : css.objectFit === "scale-down" ? Math.min(1, contain) : contain;
+			const [positionX = "50%", positionY = "50%"] = css.objectPosition.split(" ");
+			const offset = (position, space) => {
+				if (position.endsWith("%")) return parseFloat(position) / 100 * space;
+				if (position.endsWith("px")) return parseFloat(position);
+				return position === "left" || position === "top" ? 0 : position === "right" || position === "bottom" ? space : space / 2;
+			};
+			u = (x - bounds.left - offset(positionX, bounds.width - width * scale)) / (width * scale);
+			v = (y - bounds.top - offset(positionY, bounds.height - height * scale)) / (height * scale);
+			if (u < 0 || u > 1 || v < 0 || v > 1) return void 0;
+		}
+		const px = Math.max(0, Math.min(data.width - 1, Math.floor(u * data.width)));
+		const offset = (Math.max(0, Math.min(data.height - 1, Math.floor(v * data.height))) * data.width + px) * 4;
+		const alpha = data.data[offset + 3] / 255;
+		if (alpha < .08) return void 0;
+		return `rgb(${data.data[offset]} ${data.data[offset + 1]} ${data.data[offset + 2]} / ${alpha.toFixed(2)})`;
+	}
+	gradientColorAt(image, bounds, x, y) {
+		if (!image.includes("gradient(")) return void 0;
+		const colors = (image.match(/#[\da-f]{3,8}\b|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^)]*\)|\b(?:transparent|black|white|red|green|blue|orange|yellow|purple|gray|grey|teal|cyan|magenta)\b/gi) ?? []).filter((color) => !this.isTransparent(color));
+		if (!colors.length) return void 0;
+		let amount = .5;
+		if (image.includes("linear-gradient(")) {
+			const prelude = image.match(/linear-gradient\(\s*([^,]+)/i)?.[1]?.trim().toLowerCase() ?? "";
+			let dx = 0, dy = 1;
+			const angle = prelude.match(/^(-?[\d.]+)deg$/);
+			if (angle) {
+				const radians = Number(angle[1]) * Math.PI / 180;
+				dx = Math.sin(radians);
+				dy = -Math.cos(radians);
+			} else if (prelude.startsWith("to ")) {
+				dx = prelude.includes("right") ? 1 : prelude.includes("left") ? -1 : 0;
+				dy = prelude.includes("bottom") ? 1 : prelude.includes("top") ? -1 : 0;
+			}
+			const range = Math.max(.01, Math.abs(dx) + Math.abs(dy));
+			const u = (x - bounds.left) / Math.max(1, bounds.width) - .5;
+			const v = (y - bounds.top) / Math.max(1, bounds.height) - .5;
+			amount = Math.max(0, Math.min(1, .5 + (u * dx + v * dy) / range));
+		} else {
+			const u = (x - (bounds.left + bounds.width / 2)) / Math.max(1, bounds.width / 2);
+			const v = (y - (bounds.top + bounds.height / 2)) / Math.max(1, bounds.height / 2);
+			amount = Math.max(0, Math.min(1, Math.hypot(u, v) / Math.SQRT2));
+		}
+		return colors[Math.min(colors.length - 1, Math.round(amount * (colors.length - 1)))];
+	}
+	isTransparent(color) {
+		const value = color.trim().toLowerCase();
+		if (!value || value === "transparent") return true;
+		const alpha = value.match(/\/\s*([\d.]+)%?\s*\)$/) ?? (/^rgba\(|^hsla\(/.test(value) ? value.match(/,\s*([\d.]+)\s*\)$/) : null);
+		return !!alpha && Number(alpha[1]) <= .02;
+	}
+	isInside(element, ancestor) {
+		let current = element;
+		while (current) {
+			if (current === ancestor) return true;
+			const root = current.getRootNode();
+			current = current.parentElement ?? root.host ?? null;
+		}
+		return false;
+	}
+	layerElement(element, visibility) {
+		let current = element;
+		while (current && current.namespaceURI !== "http://www.w3.org/1999/xhtml") {
+			const root = current.getRootNode();
+			current = current.parentElement ?? root.host ?? null;
+		}
+		return current ? visibility.layer(current) : this.doc.documentElement;
+	}
+	zIndex(element, visibility) {
+		const value = Number.parseFloat(visibility.style(element).zIndex);
+		return Number.isFinite(value) ? value : 0;
+	}
+	isAmbientForeground(source, receiver, stack, receiverIndex, visibility) {
+		const sourceIndex = stack.indexOf(source);
+		if (sourceIndex >= 0 && receiverIndex >= 0) return sourceIndex < receiverIndex;
+		const sourceLayer = this.layerElement(source, visibility);
+		const receiverLayer = visibility.layer(receiver);
+		const depth = this.zIndex(sourceLayer, visibility) - this.zIndex(receiverLayer, visibility);
+		if (depth !== 0) return depth > 0;
+		return !!(source.compareDocumentPosition(receiver) & 2);
+	}
+	rasterOrder(element, stack, receiver, visibility) {
+		const index = stack.indexOf(element);
+		if (index >= 0) return 1e4 - index;
+		return this.zIndex(this.layerElement(element, visibility), visibility) - this.zIndex(visibility.layer(receiver), visibility);
+	}
+	rectFor(element, rects) {
+		let rect = rects.get(element);
+		if (!rect) {
+			rect = element.getBoundingClientRect();
+			rects.set(element, rect);
+		}
+		return rect;
+	}
+};
 const runtimes = /* @__PURE__ */ new WeakMap();
-const activeStateSelector = "[aria-pressed=\"true\"], [aria-selected=\"true\"], [aria-expanded=\"true\"], [aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"])";
+const activeStateSelector = ":checked, [aria-checked=\"true\"], [aria-pressed=\"true\"], [aria-selected=\"true\"], [aria-expanded=\"true\"], [aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"])";
 const disabledSelector = ":disabled, [aria-disabled=\"true\"], .is-disabled, [inert]";
 function runtimeFor(doc) {
 	let runtime = runtimes.get(doc);
@@ -226,6 +874,16 @@ var SceneRuntime = class {
 	motion;
 	transparency;
 	view;
+	ambient;
+	renderedStyles = /* @__PURE__ */ new WeakMap();
+	assetLoad = (event) => {
+		const target = event.target;
+		if (target && /^(IMG|VIDEO)$/.test(target.tagName)) this.ambient.assetChanged(target);
+	};
+	visibilityChange = () => {
+		if (!this.doc.hidden) this.refresh();
+		this.ambient.resume();
+	};
 	down = (event) => {
 		this.pressed = this.find(event);
 		this.pressed?.hooks.press();
@@ -256,7 +914,8 @@ var SceneRuntime = class {
 		}
 	};
 	out = (event) => {
-		if (this.hovered && !this.hovered.element.contains(event.relatedTarget)) {
+		const target = this.hovered?.element.closest("label") ?? this.hovered?.element;
+		if (target && !target.contains(event.relatedTarget)) {
 			this.hovered = void 0;
 			this.updateEmitter();
 		}
@@ -273,6 +932,10 @@ var SceneRuntime = class {
 		this.focusedTarget = void 0;
 		this.updateEmitter();
 	};
+	change = () => {
+		for (const entry of this.entries.values()) this.updateSelected(entry);
+		this.updateEmitter();
+	};
 	sync = () => {
 		for (const entry of this.entries.values()) {
 			entry.hooks.sync();
@@ -282,8 +945,10 @@ var SceneRuntime = class {
 		this.refresh();
 	};
 	refresh = () => {
+		this.ambient.invalidate();
 		for (const entry of this.entries.values()) {
 			entry.bounds = void 0;
+			entry.lastLighting = void 0;
 			if (entry.visible) this.queue.add(entry);
 		}
 		this.schedule();
@@ -293,6 +958,11 @@ var SceneRuntime = class {
 		const view = doc.defaultView;
 		if (!view) throw new Error("Glass scenes require a browser document.");
 		this.view = view;
+		this.ambient = new AmbientSampler(doc, view, (entry) => {
+			if (this.entries.get(entry.element) !== entry) return;
+			this.queue.add(entry);
+			this.schedule();
+		}, (root) => this.observeState(root));
 		this.motion = view.matchMedia("(prefers-reduced-motion: reduce)");
 		this.transparency = view.matchMedia("(prefers-reduced-transparency: reduce)");
 		if (typeof view.IntersectionObserver === "function") this.observer = new view.IntersectionObserver((records) => {
@@ -300,8 +970,10 @@ var SceneRuntime = class {
 				const entry = this.entries.get(record.target);
 				if (!entry) continue;
 				entry.visible = record.isIntersecting;
+				this.ambient.invalidate(entry);
 				if (entry.visible) {
 					entry.bounds = void 0;
+					entry.lastLighting = void 0;
 					this.queue.add(entry);
 				}
 			}
@@ -309,15 +981,45 @@ var SceneRuntime = class {
 		}, { rootMargin: "64px" });
 		if (typeof view.MutationObserver === "function") this.stateObserver = new view.MutationObserver((records) => {
 			const changed = /* @__PURE__ */ new Set();
+			let visualChanged = false;
 			for (const record of records) {
-				const entry = this.entries.get(record.target);
+				if (record.type === "childList") {
+					if (record.target.nodeType === 1 && this.isLightingDecoration(record.target)) continue;
+					if ([...record.addedNodes, ...record.removedNodes].some((node) => !this.isLightingDecoration(node))) {
+						visualChanged = true;
+						this.ambient.sourcesChanged(record);
+					}
+					continue;
+				}
+				const target = record.target;
+				if (record.attributeName === "style" && this.renderedStyles.get(target) === target.getAttribute("style")) continue;
+				if (record.attributeName === "class") {
+					const entry = this.entries.get(target);
+					if (entry) changed.add(entry);
+				}
+				if (record.attributeName === "class" || record.attributeName === "style" || record.attributeName === "hidden" || /^(role|data-bx-light-scope|data-bx-surface|data-bx-reduced-transparency|data-bx-reduced-motion|src|srcset|width|height)$/.test(record.attributeName ?? "")) {
+					if (!this.isLightingDecoration(target)) {
+						visualChanged = true;
+						if (/^(src|srcset|width|height)$/.test(record.attributeName ?? "")) this.ambient.assetChanged(target);
+					}
+					continue;
+				}
+				const visual = target.matches("input[type=\"checkbox\"], input[type=\"radio\"]") ? target.closest("label")?.querySelector("[data-bx-surface]") : void 0;
+				const entry = this.entries.get(target) ?? (visual ? this.entries.get(visual) : void 0);
 				if (entry) changed.add(entry);
-				if (record.attributeName === "data-bx-field-invalid") for (const surface of record.target.querySelectorAll("[data-bx-surface]")) {
+				if (record.attributeName === "data-bx-field-invalid") for (const surface of target.querySelectorAll("[data-bx-surface]")) {
 					const child = this.entries.get(surface);
 					if (child) changed.add(child);
 				}
 			}
-			if (!changed.size) return;
+			if (visualChanged) {
+				for (const entry of this.entries.values()) {
+					entry.bounds = void 0;
+					entry.lastLighting = void 0;
+				}
+				this.ambient.invalidate();
+			}
+			if (!changed.size && !visualChanged) return;
 			for (const entry of changed) this.updateSelected(entry);
 			this.updateEmitter();
 		});
@@ -332,6 +1034,7 @@ var SceneRuntime = class {
 		};
 		const overlay = lightingVisibility(this.doc, this.view).boundary(element) !== this.doc.documentElement;
 		this.entries.set(element, entry);
+		this.ambient.add(entry);
 		this.observer?.observe(element);
 		this.updateSelected(entry);
 		this.updateEmitter();
@@ -341,6 +1044,7 @@ var SceneRuntime = class {
 		return () => {
 			this.observer?.unobserve(element);
 			this.entries.delete(element);
+			this.ambient.remove(entry);
 			this.queue.delete(entry);
 			this.selected.delete(entry);
 			if (this.pressed === entry) this.pressed = void 0;
@@ -358,7 +1062,9 @@ var SceneRuntime = class {
 		if (entry) this.updateSelected(entry);
 		this.updateEmitter();
 		if (entry) {
+			this.ambient.invalidate(entry);
 			entry.bounds = void 0;
+			entry.lastLighting = void 0;
 			this.queue.add(entry);
 			this.schedule();
 		}
@@ -377,11 +1083,14 @@ var SceneRuntime = class {
 			update: (next) => {
 				if (!disposed) {
 					entry.options = next;
-					this.refreshRoot(root);
+					this.refreshRoot(root, next.reuseGeometry !== true);
 				}
 			},
 			refresh: () => {
-				if (!disposed) this.refreshRoot(root);
+				if (!disposed) {
+					this.ambient.invalidate();
+					this.refreshRoot(root);
+				}
 			},
 			destroy: () => {
 				if (disposed) return;
@@ -392,6 +1101,11 @@ var SceneRuntime = class {
 			}
 		};
 	}
+	isLightingDecoration(node) {
+		if (node.nodeType !== node.ELEMENT_NODE) return true;
+		const element = node;
+		return element.matches(".bx-glass-decoration, .bx-glass-rim") || !!element.closest(".bx-glass-decoration, .bx-glass-rim");
+	}
 	find(event) {
 		for (const node of event.composedPath()) {
 			const found = this.entries.get(node);
@@ -399,13 +1113,17 @@ var SceneRuntime = class {
 			if (found.element.closest(disabledSelector)) return void 0;
 			if (found.hooks.interactive()) return found;
 		}
+		const label = event.target.closest("label");
+		const visual = label?.control?.matches("input[type=\"checkbox\"], input[type=\"radio\"]") ? label.querySelector("[data-bx-surface]") : void 0;
+		const found = visual ? this.entries.get(visual) : void 0;
+		if (found && !found.element.closest(disabledSelector) && !label?.control?.matches(disabledSelector) && found.hooks.interactive()) return found;
 	}
 	scope(element) {
-		return element.closest(`[data-bx-light-scope], dialog, [role="dialog"], [role="alertdialog"], [popover], .cdk-overlay-pane, .toast-container, bx-modal, main, aside, nav`) ?? this.doc.body;
+		return lightingOrigin(element).closest(`[data-bx-light-scope], dialog, [role="dialog"], [role="alertdialog"], [popover], .cdk-overlay-pane, .toast-container, bx-modal, main, aside, nav`) ?? this.doc.body;
 	}
 	updateEmitter() {
 		const next = /* @__PURE__ */ new Map();
-		const enabled = (entry) => entry.hooks.interactive() && !entry.element.closest(disabledSelector);
+		const enabled = (entry) => entry.hooks.interactive() && !entry.element.closest(disabledSelector) && !entry.element.closest("label")?.control?.matches(disabledSelector);
 		for (const entry of [
 			...this.selected,
 			this.hovered,
@@ -426,45 +1144,69 @@ var SceneRuntime = class {
 			if (!entry.visible) continue;
 			if (sources.some((source) => this.scope(source.element) === this.scope(entry.element))) {
 				entry.bounds = void 0;
+				entry.lastLighting = void 0;
 				this.queue.add(entry);
 			}
 		}
 		this.schedule();
 	}
 	updateSelected(entry) {
-		if (entry.hooks.emission?.() && entry.element.matches(activeStateSelector)) this.selected.add(entry);
+		const checked = (entry.element.closest("label")?.control)?.matches("input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked");
+		if (entry.hooks.emission?.() && (entry.element.matches(activeStateSelector) || checked)) this.selected.add(entry);
 		else this.selected.delete(entry);
 	}
-	refreshRoot(root) {
+	refreshRoot(root, measure = true) {
 		for (const entry of this.entries.values()) {
-			if (!root.contains(entry.element)) continue;
-			entry.bounds = void 0;
+			if (!root.contains(lightingOrigin(entry.element))) continue;
+			if (measure) {
+				entry.bounds = void 0;
+				entry.lastLighting = void 0;
+			}
 			if (entry.visible) this.queue.add(entry);
 		}
 		this.schedule();
 	}
-	connect() {
-		if (this.connected) return;
-		this.connected = true;
-		this.stateObserver?.observe(this.doc.documentElement, {
+	observeState(root) {
+		this.stateObserver?.observe(root, {
 			subtree: true,
 			attributes: true,
+			childList: true,
 			attributeFilter: [
 				"aria-pressed",
+				"aria-checked",
+				"checked",
 				"aria-selected",
 				"aria-expanded",
 				"aria-current",
 				"disabled",
 				"aria-disabled",
 				"aria-invalid",
-				"data-bx-field-invalid"
+				"data-bx-field-invalid",
+				"class",
+				"style",
+				"hidden",
+				"role",
+				"data-bx-light-scope",
+				"data-bx-surface",
+				"data-bx-reduced-transparency",
+				"data-bx-reduced-motion",
+				"src",
+				"srcset",
+				"width",
+				"height"
 			]
 		});
+	}
+	connect() {
+		if (this.connected) return;
+		this.connected = true;
+		this.observeState(this.doc.documentElement);
 		this.doc.addEventListener("pointerdown", this.down, { passive: true });
 		this.doc.addEventListener("pointerover", this.over, { passive: true });
 		this.doc.addEventListener("pointerout", this.out, { passive: true });
 		this.doc.addEventListener("focusin", this.focus);
 		this.doc.addEventListener("focusout", this.unfocus);
+		this.doc.addEventListener("change", this.change);
 		this.view.addEventListener("pointerup", this.up, { passive: true });
 		this.view.addEventListener("pointercancel", this.up, { passive: true });
 		this.doc.addEventListener("pointerleave", this.leave, { passive: true });
@@ -474,12 +1216,19 @@ var SceneRuntime = class {
 			passive: true,
 			capture: true
 		});
+		this.doc.addEventListener("load", this.assetLoad, true);
+		this.doc.addEventListener("loadeddata", this.assetLoad, true);
+		this.doc.addEventListener("play", this.assetLoad, true);
+		this.doc.addEventListener("pause", this.assetLoad, true);
+		this.doc.addEventListener("seeked", this.assetLoad, true);
+		this.doc.addEventListener("visibilitychange", this.visibilityChange);
 		this.doc.addEventListener(configurationEvent, this.sync);
 		this.motion.addEventListener("change", this.sync);
 		this.transparency.addEventListener("change", this.sync);
 	}
 	disconnectIfEmpty() {
 		if (this.entries.size || this.scenes.size) return;
+		this.ambient.destroy();
 		this.stopFrame?.();
 		this.stopFrame = void 0;
 		this.queue.clear();
@@ -492,12 +1241,19 @@ var SceneRuntime = class {
 		this.doc.removeEventListener("pointerout", this.out);
 		this.doc.removeEventListener("focusin", this.focus);
 		this.doc.removeEventListener("focusout", this.unfocus);
+		this.doc.removeEventListener("change", this.change);
 		this.view.removeEventListener("pointerup", this.up);
 		this.view.removeEventListener("pointercancel", this.up);
 		this.doc.removeEventListener("pointerleave", this.leave);
 		this.view.removeEventListener("blur", this.blur);
 		this.view.removeEventListener("resize", this.refresh);
 		this.doc.removeEventListener("scroll", this.refresh, true);
+		this.doc.removeEventListener("load", this.assetLoad, true);
+		this.doc.removeEventListener("loadeddata", this.assetLoad, true);
+		this.doc.removeEventListener("play", this.assetLoad, true);
+		this.doc.removeEventListener("pause", this.assetLoad, true);
+		this.doc.removeEventListener("seeked", this.assetLoad, true);
+		this.doc.removeEventListener("visibilitychange", this.visibilityChange);
 		this.doc.removeEventListener(configurationEvent, this.sync);
 		this.motion.removeEventListener("change", this.sync);
 		this.transparency.removeEventListener("change", this.sync);
@@ -529,26 +1285,46 @@ var SceneRuntime = class {
 			const sceneData = /* @__PURE__ */ new Map();
 			const projections = batch.filter((entry) => entry.visible && entry.element.isConnected).map((entry) => {
 				entry.bounds ??= entry.element.getBoundingClientRect();
+				const origin = lightingOrigin(entry.element);
 				let nearest;
-				for (const candidate of this.scenes) if (candidate.root.contains(entry.element) && (!nearest || nearest.root.contains(candidate.root))) nearest = candidate;
-				if (nearest && !sceneData.has(nearest)) sceneData.set(nearest, {
-					lights: (nearest.options.lights ?? []).slice(0, 4).map((light, index) => this.lightPoint(light, `${nearest.id}:${index}`)),
-					reflections: (nearest.options.reflectors ?? []).slice(0, 4).map((reflection) => this.reflectionPoint(reflection))
-				});
+				for (const candidate of this.scenes) if (candidate.root.contains(origin) && (!nearest || nearest.root.contains(candidate.root))) nearest = candidate;
+				if (nearest && !sceneData.has(nearest)) {
+					const scene = nearest;
+					sceneData.set(scene, {
+						lights: (scene.options.lights ?? []).slice(0, 4).map((light, index) => this.lightPoint(light, `${scene.id}:${index}`)),
+						reflections: (scene.options.reflectors ?? []).slice(0, 4).map((reflection) => this.reflectionPoint(reflection))
+					});
+				}
 				const data = nearest ? sceneData.get(nearest) : void 0;
+				const sceneRoot = nearest?.root ?? entry.element;
 				const boundary = visibility.boundary(entry.element);
-				const lights = (data?.lights ?? []).filter((light) => visibility.boundary(light.source ?? nearest.root) === boundary);
-				for (const { emitter, light } of activeLights) if (this.scope(emitter.element) === this.scope(entry.element) && visibility.layer(emitter.element) === visibility.layer(entry.element) && !emitter.element.contains(entry.element) && !entry.element.contains(emitter.element)) lights.push(light);
+				const lights = (data?.lights ?? []).filter((light) => visibility.boundary(light.source ?? sceneRoot) === boundary);
+				for (const { emitter, light } of activeLights) if (this.scope(emitter.element) === this.scope(entry.element) && visibility.layer(lightingOrigin(emitter.element)) === visibility.layer(origin) && !emitter.element.contains(entry.element) && (!entry.element.contains(emitter.element) || entry.element.matches("[role=\"menu\"]"))) lights.push(light);
+				lights.push(...this.ambient.lights(entry));
 				const reflections = (data?.reflections ?? []).filter((reflection) => visibility.boundary(reflection.source) === boundary);
 				return [entry, this.project(entry, lights, reflections, visibility)];
 			});
 			for (const entry of batch) this.queue.delete(entry);
 			for (const { emitter, color, exposed } of emissions) emitter.hooks.emit?.(exposed, color);
-			for (const [entry, lighting] of projections) entry.hooks.light(lighting);
+			for (const [entry, lighting] of projections) {
+				if (this.sameLighting(entry.lastLighting, lighting)) continue;
+				entry.lastLighting = lighting;
+				const before = entry.element.getAttribute("style");
+				entry.hooks.light(lighting);
+				const after = entry.element.getAttribute("style");
+				if (before !== after) this.renderedStyles.set(entry.element, after);
+			}
 			if (!this.queue.size) this.stopFrame = void 0;
 			return this.queue.size > 0;
 		});
 	}
+	sameLighting(previous, next) {
+		if (!previous || previous.x !== next.x || previous.y !== next.y || previous.color !== next.color || previous.strength !== next.strength || previous.rim !== next.rim || previous.reflection !== next.reflection || previous.reflectionStrength !== next.reflectionStrength || previous.reflectionX !== next.reflectionX || previous.reflectionY !== next.reflectionY || previous.contributions.length !== next.contributions.length) return false;
+		return previous.contributions.every((light, index) => {
+			const other = next.contributions[index];
+			return light.key === other.key && light.x === other.x && light.y === other.y && light.color === other.color && light.strength === other.strength && light.edgeStrength === other.edgeStrength && light.ambient === other.ambient && light.spread === other.spread;
+		});
+	}
 	lightPoint(light, key, border = false) {
 		const rect = light.element?.getBoundingClientRect();
 		if (light.element && !border) {
@@ -582,7 +1358,7 @@ var SceneRuntime = class {
 		};
 	}
 	project(entry, lights, reflectors, visibility) {
-		const b = entry.bounds;
+		const b = entry.bounds ??= entry.element.getBoundingClientRect();
 		const cx = b.left + b.width / 2, cy = b.top + b.height / 2;
 		let x = 25, y = 0, strength = .04, color = "white";
 		let strongest = 0, weightedX = 0, weightedY = 0, totalWeight = 0;
@@ -600,26 +1376,30 @@ var SceneRuntime = class {
 			const edgeDistance = Math.hypot(Math.max(b.left - lx, 0, lx - b.right), Math.max(b.top - ly, 0, ly - b.bottom), light.z);
 			const edgeWeight = Math.min(.85, light.intensity * Math.pow(Math.max(0, 1 - edgeDistance / light.radius), 2));
 			if (edgeWeight <= .01 && weight <= .001) continue;
-			if (!visibility.exposed(entry.hooks.hitTarget ?? entry.element, lx, ly, b)) continue;
-			if (light.source) {
+			if (!light.ambient && !visibility.exposed(entry.hooks.hitTarget ?? entry.element, lx, ly, b)) continue;
+			if (!light.ambient && light.source) {
 				const source = light.source.closest("[data-bx-surface]") ?? light.source;
 				if (!visibility.exposed(source, lx, ly, source.getBoundingClientRect())) continue;
 			}
-			weightedX += localX * weight;
-			weightedY += localY * weight;
-			if (edgeWeight > .01) rims.push(`radial-gradient(ellipse farthest-side at ${localX.toFixed(2)}% ${localY.toFixed(2)}%, color-mix(in srgb, ${light.color} ${(edgeWeight * 100).toFixed(2)}%, transparent), transparent 75%)`);
+			if (edgeWeight > .01) rims.push(`radial-gradient(${light.spread ? `circle ${light.spread}px` : "ellipse farthest-side"} at ${localX.toFixed(2)}% ${localY.toFixed(2)}%, color-mix(in srgb, ${light.color} ${(edgeWeight * 100).toFixed(2)}%, transparent), transparent 75%)`);
 			if (edgeWeight > .01 || weight > .001) contributions.push({
 				key: light.key,
 				x: localX,
 				y: localY,
 				color: light.color,
-				strength: Math.min(.25, weight * .4),
-				edgeStrength: edgeWeight
+				strength: light.ambient ? 0 : Math.min(.25, weight * .4),
+				edgeStrength: edgeWeight,
+				ambient: light.ambient,
+				spread: light.spread
 			});
-			totalWeight += weight;
-			if (weight > strongest) {
-				strongest = weight;
-				color = light.color;
+			if (!light.ambient) {
+				weightedX += localX * weight;
+				weightedY += localY * weight;
+				totalWeight += weight;
+				if (weight > strongest) {
+					strongest = weight;
+					color = light.color;
+				}
 			}
 		}
 		if (totalWeight > .001) {
@@ -726,8 +1506,9 @@ var Spring = class {
 };
 const mounted = /* @__PURE__ */ new WeakMap();
 function isActionSurface(element) {
-	if (element.matches("button, bx-button, [bx-button], a[href], summary, input:not([type=\"hidden\"]), select, textarea, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"tab\"], [role=\"menuitem\"], [role=\"combobox\"], [onclick]") || typeof element.onclick === "function") return true;
+	if (element.matches("button, bx-button, [bx-button], a[href], summary, input:not([type=\"hidden\"]), select, textarea, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"tab\"], [role=\"menuitem\"], [role=\"combobox\"], [role=\"textbox\"], [role=\"searchbox\"], [role=\"slider\"], [role=\"spinbutton\"], [onclick]") || typeof element.onclick === "function") return true;
 	if (element.closest("label")?.control) return true;
+	if (!element.closest("bx-form-field")) return false;
 	const controls = element.querySelectorAll("input:not([type=\"hidden\"]), select, textarea");
 	return controls.length === 1 && controls[0].closest("[data-bx-surface]") === element;
 }
@@ -738,8 +1519,12 @@ function mountSurface(element, initial = {}) {
 	if (!view) throw new Error("Glass surfaces must be mounted in a browser document.");
 	const ownProperties = [
 		"position",
-		"--bx-glass-blur",
-		"--bx-glass-opacity"
+		"--bx-glassiness",
+		"--bx-glass-lit-edge",
+		"--bx-glass-lit-edge-top",
+		"--bx-glass-lit-edge-right",
+		"--bx-glass-lit-edge-bottom",
+		"--bx-glass-lit-edge-left"
 	];
 	const restoreStyles = rememberStyles(element, ownProperties);
 	const attributes = [
@@ -763,6 +1548,14 @@ function mountSurface(element, initial = {}) {
 	rim.className = "bx-glass-rim";
 	rim.setAttribute("aria-hidden", "true");
 	element.append(rim);
+	const environment = [doc.createElement("span"), doc.createElement("span")];
+	for (const node of environment) {
+		node.className = "bx-glass-contribution bx-glass-environment";
+		node.style.opacity = "0";
+		rim.append(node);
+	}
+	let environmentImage = "none";
+	let environmentIndex = 0;
 	const ambient = doc.createElement("span");
 	ambient.className = "bx-glass-ambient";
 	decoration.append(light);
@@ -774,6 +1567,7 @@ function mountSurface(element, initial = {}) {
 	let disposed = false;
 	let unsubscribe;
 	let reducedMotion = false;
+	let unifiedLighting = false;
 	const interactive = () => options.interactive ?? isActionSurface(element);
 	let emitting = false;
 	let emittingColor;
@@ -896,8 +1690,36 @@ function mountSurface(element, initial = {}) {
 		x.snap(value.x);
 		y.snap(value.y);
 		strength.target = value.strength;
-		const active = new Set(value.contributions.map((contribution) => contribution.key));
-		for (const contribution of value.contributions) setLayer(contribution);
+		if (unifiedLighting) {
+			const sources = [...value.contributions].sort((a, b) => a.edgeStrength - b.edgeStrength).slice(-4);
+			const edgeAt = (x, y) => {
+				let edge = "var(--bx-border-default, GrayText)";
+				for (const source of sources) {
+					const distance = Math.hypot((x - source.x) / Math.max(1, source.x, 100 - source.x), (y - source.y) / Math.max(1, source.y, 100 - source.y));
+					const strength = finiteClamp(source.edgeStrength, 0, .85, 0) * .35 * Math.max(0, 1 - distance / .75);
+					if (strength > .001) edge = `color-mix(in srgb, ${source.color} ${(strength * 100).toFixed(2)}%, ${edge})`;
+				}
+				return edge;
+			};
+			element.style.setProperty("--bx-glass-lit-edge", edgeAt(50, 50));
+			element.style.setProperty("--bx-glass-lit-edge-top", edgeAt(50, 0));
+			element.style.setProperty("--bx-glass-lit-edge-right", edgeAt(100, 50));
+			element.style.setProperty("--bx-glass-lit-edge-bottom", edgeAt(50, 100));
+			element.style.setProperty("--bx-glass-lit-edge-left", edgeAt(0, 50));
+		}
+		const ambientImage = value.contributions.filter((contribution) => contribution.ambient).map((contribution) => `radial-gradient(circle ${contribution.spread}px at ${contribution.x.toFixed(2)}% ${contribution.y.toFixed(2)}%, color-mix(in srgb, ${contribution.color} ${(contribution.edgeStrength * 100).toFixed(2)}%, transparent), transparent 75%)`).join(", ") || "none";
+		if (ambientImage !== environmentImage) {
+			environmentImage = ambientImage;
+			const previous = environment[environmentIndex];
+			environmentIndex = 1 - environmentIndex;
+			const next = environment[environmentIndex];
+			next.style.backgroundImage = ambientImage;
+			next.style.opacity = "1";
+			previous.style.opacity = "0";
+		}
+		const contributions = value.contributions.filter((contribution) => !contribution.ambient);
+		const active = new Set(contributions.map((contribution) => contribution.key));
+		for (const contribution of contributions) setLayer(contribution);
 		for (const [key, layer] of layers) if (key !== "emitter" && !active.has(key) && !layer.leaving) fadeLayer(key, layer, false);
 		decoration.style.setProperty("--bx-glass-light-color", value.color);
 		decoration.style.setProperty("--bx-glass-reflection-color", value.reflection);
@@ -907,9 +1729,7 @@ function mountSurface(element, initial = {}) {
 		animate();
 	};
 	const sync = () => {
-		const inheritedMaterial = inheritedAttribute(element, "data-bx-glass-material");
-		const material = options.material ?? (inheritedMaterial === "frosted" || inheritedMaterial === "solid" ? inheritedMaterial : "glass");
-		element.setAttribute("data-bx-surface", material);
+		element.setAttribute("data-bx-surface", "glass");
 		const inheritedMotion = globalValue("data-bx-reduced-motion") ?? originalAttributes.get("data-bx-reduced-motion");
 		const inheritedTransparency = globalValue("data-bx-reduced-transparency") ?? originalAttributes.get("data-bx-reduced-transparency");
 		reducedMotion = options.reducedMotion ?? (inheritedMotion === null || inheritedMotion === void 0 ? motion.matches : inheritedMotion === "true");
@@ -921,11 +1741,10 @@ function mountSurface(element, initial = {}) {
 		const economical = view.navigator.connection?.saveData || view.navigator.hardwareConcurrency > 0 && view.navigator.hardwareConcurrency <= 4 || view.matchMedia("(pointer: coarse)").matches;
 		const enhanced = quality !== "baseline" && supported && (quality === "enhanced" || !economical);
 		element.setAttribute("data-bx-glass-renderer", enhanced ? "enhanced" : "baseline");
-		if (options.blur !== void 0) element.style.setProperty("--bx-glass-blur", `${finiteClamp(options.blur, 0, 40, 10)}px`);
-		else restoreProperty("--bx-glass-blur");
-		if (options.tint !== void 0) element.style.setProperty("--bx-glass-opacity", String(finiteClamp(options.tint, 0, 1, .4)));
-		else restoreProperty("--bx-glass-opacity");
+		if (options.glassiness !== void 0) element.style.setProperty("--bx-glassiness", String(finiteClamp(options.glassiness, 0, 1, .5)));
+		else restoreProperty("--bx-glassiness");
 		const style = view.getComputedStyle(element);
+		unifiedLighting = style.getPropertyValue("--bx-glass-unified-lighting").trim() === "1";
 		for (const side of [
 			"top",
 			"right",
@@ -1003,10 +1822,10 @@ function createGlassTransition(origin, target, options = {}) {
 	const view = doc.defaultView;
 	if (!view) throw new Error("Glass transitions must be mounted in a browser document.");
 	if (origin.ownerDocument !== doc) throw new Error("Glass transition endpoints must share a document.");
-	const restoreStyles = rememberStyles(target, ["opacity", "visibility"]);
 	const skin = target.matches("[data-bx-surface]") ? target : target.querySelector("[data-bx-surface]") ?? target;
-	const restoreMaterial = rememberAttributes(skin, ["data-bx-motion-material"]);
-	skin.setAttribute("data-bx-motion-material", "solid");
+	const restoreOpacity = rememberStyles(skin, ["opacity"]);
+	const restoreVisibility = rememberStyles(target, ["visibility"]);
+	const opacity = Number(view.getComputedStyle(skin).opacity);
 	const preference = view.matchMedia("(prefers-reduced-motion: reduce)");
 	let disposed = false;
 	let active = false;
@@ -1018,7 +1837,7 @@ function createGlassTransition(origin, target, options = {}) {
 		return options.reducedMotion ?? (inherited === null ? preference.matches : inherited === "true");
 	};
 	const paint = () => {
-		target.style.opacity = String(value);
+		skin.style.opacity = String(value * opacity);
 		options.onUpdate?.();
 	};
 	function settle() {
@@ -1026,7 +1845,8 @@ function createGlassTransition(origin, target, options = {}) {
 		value = destination;
 		unsubscribe?.();
 		unsubscribe = void 0;
-		restoreStyles();
+		restoreOpacity();
+		restoreVisibility();
 		if (destination === 0) target.style.visibility = "hidden";
 		const resolve = resolvePending;
 		resolvePending = void 0;
@@ -1041,7 +1861,7 @@ function createGlassTransition(origin, target, options = {}) {
 		destination = open ? 1 : 0;
 		elapsed = 0;
 		active = true;
-		restoreStyles();
+		restoreVisibility();
 		const finished = new Promise((resolve) => {
 			resolvePending = resolve;
 		});
@@ -1082,12 +1902,12 @@ function createGlassTransition(origin, target, options = {}) {
 			resolvePending = void 0;
 			preference.removeEventListener("change", onPreference);
 			doc.removeEventListener(configurationEvent, onPreference);
-			restoreStyles();
-			restoreMaterial();
+			restoreOpacity();
+			restoreVisibility();
 		}
 	};
 }
 const createLiquidTransition = createGlassTransition;
-export { Spring, configureAppearance, createGlassTransition, createLiquidTransition, mountGlassScene, mountSurface, observeGlassLighting, refreshGlassLighting };
+export { Spring, configureAppearance, createGlassTransition, createLiquidTransition, inheritGlassLighting, mountGlassScene, mountSurface, observeGlassLighting, refreshGlassLighting };
 
 //# sourceMappingURL=filip.mazev-blocks-effects-runtime.mjs.map