@zeus-js/runtime-dom 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/runtime-dom.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-* runtime-dom v0.1.0-beta.7
+* runtime-dom v0.1.0-beta.9
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -211,8 +211,9 @@ var ReactiveEffect = class {
 		this.depsTail = void 0;
 		this.flags = 5;
 		this.next = void 0;
-		this.cleanup = void 0;
+		this.cleanups = void 0;
 		this.scheduler = void 0;
+		this.scope = activeEffectScope;
 		if (activeEffectScope) if (activeEffectScope.active) activeEffectScope.effects.push(this);
 		else this.flags &= -2;
 	}
@@ -473,13 +474,20 @@ function resetTracking() {
 	shouldTrack = last === void 0 ? true : last;
 }
 function cleanupEffect(e) {
-	const { cleanup } = e;
-	e.cleanup = void 0;
-	if (cleanup) {
+	const cleanups = e.cleanups;
+	e.cleanups = void 0;
+	if (cleanups) {
 		const prevSub = activeSub;
 		activeSub = void 0;
 		try {
-			cleanup();
+			let error;
+			for (const cleanup of cleanups) try {
+				cleanup();
+			} catch (cleanupError) {
+				var _error;
+				(_error = error) !== null && _error !== void 0 || (error = cleanupError);
+			}
+			if (error) throw error;
 		} finally {
 			activeSub = prevSub;
 		}
@@ -1364,6 +1372,58 @@ function isPlainObject(value) {
 	return proto === Object.prototype || proto === null;
 }
 //#endregion
+//#region packages/core/runtime-dom/src/domOwnership.ts
+const activeLightDomHosts = /* @__PURE__ */ new WeakMap();
+const runtimeOwnedNodes = /* @__PURE__ */ new WeakSet();
+function registerLightDomHost(host, lightChildren) {
+	const ownership = { lightChildren };
+	activeLightDomHosts.set(host, ownership);
+	return () => {
+		if (activeLightDomHosts.get(host) === ownership) activeLightDomHosts.delete(host);
+	};
+}
+function trackRuntimeDomInsertion(parent, node) {
+	const ownership = activeLightDomHosts.get(parent);
+	if (!ownership) return;
+	if (node.nodeType === 11) {
+		for (const child of node.childNodes) trackRuntimeNode(ownership, child);
+		return;
+	}
+	trackRuntimeNode(ownership, node);
+}
+function isRuntimeOwnedNode(node) {
+	return runtimeOwnedNodes.has(node);
+}
+function trackRuntimeNode(ownership, node) {
+	if (!ownership.lightChildren.includes(node)) runtimeOwnedNodes.add(node);
+}
+//#endregion
+//#region packages/core/runtime-dom/src/range.ts
+function insertTracked(parent, value, marker = null) {
+	if (value === void 0 || value == null || value === false || value === true) return [];
+	if (Array.isArray(value)) {
+		const nodes = [];
+		for (const item of value) nodes.push(...insertTracked(parent, item, marker));
+		return nodes;
+	}
+	const node = value instanceof Node ? value : document.createTextNode(String(value));
+	trackRuntimeDomInsertion(parent, node);
+	parent.insertBefore(node, marker);
+	return [node];
+}
+function removeNodes$1(nodes) {
+	for (const node of nodes) {
+		var _node$parentNode2;
+		(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
+	}
+}
+function moveRangeBefore(nodes, parent, marker = null) {
+	for (const node of nodes) {
+		trackRuntimeDomInsertion(parent, node);
+		parent.insertBefore(node, marker);
+	}
+}
+//#endregion
 //#region packages/core/runtime-dom/src/hostContext.ts
 let currentHostContext;
 function getCurrentHostContext() {
@@ -1388,48 +1448,50 @@ function withCapturedHostContext(fn) {
 	});
 }
 //#endregion
-//#region packages/core/runtime-dom/src/range.ts
-var DynamicRange = class {
-	constructor(parent, marker) {
+//#region packages/core/runtime-dom/src/scopedSubtree.ts
+function captureScopedSubtreeContext() {
+	return {
+		owner: getCurrentOwner(),
+		host: captureCurrentHostContext()
+	};
+}
+var ScopedSubtree = class {
+	constructor(parent, marker, context) {
 		this.parent = parent;
 		this.marker = marker;
+		this.context = context;
 		this.nodes = [];
 	}
-	replace(value) {
-		this.clear();
-		this.nodes = insertTracked(this.parent, value, this.marker);
-	}
-	clear() {
-		for (const node of this.nodes) {
-			var _node$parentNode;
-			(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
+	replace(render) {
+		this.dispose();
+		const scope = effectScope(true);
+		let nodes = [];
+		try {
+			scope.run(() => {
+				nodes = runWithOwner(this.context.owner, () => withHostContext(this.context.host, () => insertTracked(this.parent, render(), this.marker)));
+			});
+		} catch (error) {
+			scope.stop();
+			removeNodes$1(nodes);
+			throw error;
 		}
+		this.scope = scope;
+		this.nodes = nodes;
+	}
+	dispose() {
+		var _this$scope;
+		(_this$scope = this.scope) === null || _this$scope === void 0 || _this$scope.stop();
+		this.scope = void 0;
+		removeNodes$1(this.nodes);
 		this.nodes = [];
 	}
+	moveBefore(marker) {
+		moveRangeBefore(this.nodes, this.parent, marker);
+	}
 	current() {
 		return this.nodes;
 	}
 };
-function insertTracked(parent, value, marker = null) {
-	if (value === void 0 || value == null || value === false || value === true) return [];
-	if (Array.isArray(value)) {
-		const nodes = [];
-		for (const item of value) nodes.push(...insertTracked(parent, item, marker));
-		return nodes;
-	}
-	const node = value instanceof Node ? value : document.createTextNode(String(value));
-	parent.insertBefore(node, marker);
-	return [node];
-}
-function removeNodes$1(nodes) {
-	for (const node of nodes) {
-		var _node$parentNode2;
-		(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
-	}
-}
-function moveRangeBefore(nodes, parent, marker = null) {
-	for (const node of nodes) parent.insertBefore(node, marker);
-}
 //#endregion
 //#region packages/core/runtime-dom/src/insert.ts
 function insert(parent, value, marker = null) {
@@ -1440,16 +1502,13 @@ function insert(parent, value, marker = null) {
 	insertTracked(parent, value, marker);
 }
 function mountDynamic(parent, marker, value) {
-	const range = new DynamicRange(parent, marker);
-	const hostContext = captureCurrentHostContext();
-	const owner = getCurrentOwner();
+	const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
 	const runner = effect(() => {
-		const next = runWithOwner(owner, () => withHostContext(hostContext, value));
-		range.replace(next);
+		subtree.replace(value);
 	});
 	onScopeDispose(() => {
 		stop(runner);
-		range.clear();
+		subtree.dispose();
 	}, true);
 }
 //#endregion
@@ -1746,11 +1805,11 @@ function bindStyle(el, value) {
 function patchStyle(el, prev, next) {
 	const style = el.style;
 	if (prev) {
-		for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$1(key), "");
+		for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$2(key), "");
 	}
 	for (const key in next) {
 		const value = next[key];
-		const name = toKebabCase$1(key);
+		const name = toKebabCase$2(key);
 		if (value == null) style.setProperty(name, "");
 		else style.setProperty(name, normalizeStyleValue(key, value));
 	}
@@ -1772,7 +1831,7 @@ const unitlessNumbers = /* @__PURE__ */ new Set([
 function isUnitlessNumber(key) {
 	return unitlessNumbers.has(key);
 }
-function toKebabCase$1(value) {
+function toKebabCase$2(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
@@ -1881,6 +1940,9 @@ function createComponent(component, props) {
 }
 //#endregion
 //#region packages/core/runtime-dom/src/list.ts
+function disposeListRecord(record) {
+	record.subtree.dispose();
+}
 function mountFor$1(parent, marker, each, key, render) {
 	if (!key) {
 		mountIndexFor(parent, marker, each, render);
@@ -1889,24 +1951,20 @@ function mountFor$1(parent, marker, each, key, render) {
 	mountKeyedFor(parent, marker, each, key, render);
 }
 function mountIndexFor(parent, marker, each, render) {
-	let current = [];
-	const owner = getCurrentOwner();
+	const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
 	const runner = effect(() => {
 		var _each;
-		removeNodes$1(current);
-		current = [];
 		const list = (_each = each()) !== null && _each !== void 0 ? _each : [];
-		for (let i = 0; i < list.length; i++) current.push(...insertTracked(parent, runWithOwner(owner, () => render(list[i], i)), marker));
+		subtree.replace(() => list.map((item, index) => render(item, index)));
 	});
 	onScopeDispose(() => {
 		stop(runner);
-		removeNodes$1(current);
-		current = [];
+		subtree.dispose();
 	}, true);
 }
 function mountKeyedFor(parent, marker, each, key, render) {
 	let records = [];
-	const owner = getCurrentOwner();
+	const subtreeContext = captureScopedSubtreeContext();
 	const runner = effect(() => {
 		var _each2;
 		const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
@@ -1922,19 +1980,23 @@ function mountKeyedFor(parent, marker, each, key, render) {
 				oldRecord.item = item;
 				oldRecord.index = i;
 				nextRecords.push(oldRecord);
-			} else nextRecords.push({
-				key: itemKey,
-				item,
-				index: i,
-				nodes: insertTracked(parent, runWithOwner(owner, () => render(item, i)), marker)
-			});
+			} else {
+				const subtree = new ScopedSubtree(parent, marker, subtreeContext);
+				subtree.replace(() => render(item, i));
+				nextRecords.push({
+					key: itemKey,
+					item,
+					index: i,
+					subtree
+				});
+			}
 		}
-		for (const record of oldMap.values()) removeNodes$1(record.nodes);
+		for (const record of oldMap.values()) disposeListRecord(record);
 		for (let i = nextRecords.length - 1; i >= 0; i--) {
-			var _nextRecords$nodes$;
+			var _nextRecords$subtree$;
 			const record = nextRecords[i];
-			const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$nodes$ = nextRecords[i + 1].nodes[0]) !== null && _nextRecords$nodes$ !== void 0 ? _nextRecords$nodes$ : marker;
-			moveRangeBefore(record.nodes, parent, anchor);
+			const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$subtree$ = nextRecords[i + 1].subtree.current()[0]) !== null && _nextRecords$subtree$ !== void 0 ? _nextRecords$subtree$ : marker;
+			record.subtree.moveBefore(anchor);
 		}
 		emitDevtoolsEvent({
 			type: "mount-for",
@@ -1944,7 +2006,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 	});
 	onScopeDispose(() => {
 		stop(runner);
-		for (const record of records) removeNodes$1(record.nodes);
+		for (const record of records) disposeListRecord(record);
 		records = [];
 	}, true);
 }
@@ -1968,6 +2030,254 @@ function mountFor(parent, marker, each, key, render) {
 	mountFor$1(parent, marker, each, key, render);
 }
 //#endregion
+//#region packages/core/runtime-dom/src/customElementContract.ts
+function getCustomElementAttributeName(prop) {
+	var _prop$attrName;
+	if (prop.attrName === false) return void 0;
+	if (!isAttributeBackedType(prop.type) && !prop.deserialize) return;
+	return normalizeAttributeName((_prop$attrName = prop.attrName) !== null && _prop$attrName !== void 0 ? _prop$attrName : toKebabCase$1(prop.name));
+}
+function getCustomElementObservedAttributes(props) {
+	const attributes = /* @__PURE__ */ new Set();
+	for (const prop of props) {
+		const attrName = getCustomElementAttributeName(prop);
+		if (attrName) attributes.add(attrName);
+	}
+	return Array.from(attributes);
+}
+function findCustomElementPropByAttribute(props, attrName) {
+	const normalizedName = normalizeAttributeName(attrName);
+	return props.find((prop) => {
+		return getCustomElementAttributeName(prop) === normalizedName;
+	});
+}
+function coerceCustomElementAttribute(prop, value) {
+	if (typeof prop.deserialize === "function") return prop.deserialize(value);
+	if (prop.deserialize === true) return value;
+	switch (prop.type) {
+		case "boolean": return value !== null;
+		case "number": return value === null ? void 0 : Number(value);
+		case "string": return value !== null && value !== void 0 ? value : void 0;
+		case "object":
+		case "array": return coerceStructuredAttribute(prop, value);
+		case "function": return;
+		default: return value;
+	}
+}
+function reflectCustomElementProperty(element, prop, value, reflectingAttrs) {
+	const attrName = getCustomElementAttributeName(prop);
+	if (!attrName || prop.serialize === true) return;
+	reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
+	try {
+		const serialized = serializeCustomElementProperty(prop, value);
+		if (serialized == null) element.removeAttribute(attrName);
+		else element.setAttribute(attrName, serialized);
+	} finally {
+		reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
+	}
+}
+function createCustomElementMountLifecycle(mount) {
+	let mounted;
+	return {
+		connect() {
+			var _mounted;
+			(_mounted = mounted) !== null && _mounted !== void 0 || (mounted = mount());
+			return mounted;
+		},
+		disconnect() {
+			const current = mounted;
+			mounted = void 0;
+			current === null || current === void 0 || current.dispose();
+		},
+		current() {
+			return mounted;
+		}
+	};
+}
+function serializeCustomElementProperty(prop, value) {
+	if (typeof prop.serialize === "function") return prop.serialize(value);
+	if (prop.type === "boolean") return value ? "" : null;
+	if (value == null) return null;
+	if (prop.type === "object" || prop.type === "array") return JSON.stringify(value);
+	if (prop.type === "function") return void 0;
+	return String(value);
+}
+function coerceStructuredAttribute(prop, value) {
+	if (value === null) return void 0;
+	try {
+		return JSON.parse(value);
+	} catch (_unused) {
+		console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${getCustomElementAttributeName(prop)}".`);
+		return prop.type === "array" ? [] : {};
+	}
+}
+function isAttributeBackedType(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
+function normalizeAttributeName(value) {
+	return value.toLowerCase();
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+//#endregion
+//#region packages/core/runtime-dom/src/slot.ts
+function createSlot(name, fallback) {
+	const context = getCurrentHostContext();
+	if (!context) return createNativeSlot(name, fallback);
+	if (context.mode === "shadow") return createNativeSlot(name, fallback);
+	if (context.projection) return context.projection.createSlot(name, fallback);
+	const assigned = findLightSlotNodes(context.lightChildren, name);
+	if (assigned.length > 0) return Array.from(assigned);
+	return fallback ? fallback() : null;
+}
+function createLightDomProjection(host, lightChildren) {
+	const outlets = [];
+	let observer;
+	let unregisterHost;
+	const observe = () => {
+		observer === null || observer === void 0 || observer.observe(host, {
+			attributes: true,
+			attributeFilter: ["slot"],
+			childList: true,
+			subtree: true
+		});
+		for (const node of lightChildren) {
+			if (node.nodeType !== Node.ELEMENT_NODE || host.contains(node)) continue;
+			observer === null || observer === void 0 || observer.observe(node, {
+				attributes: true,
+				attributeFilter: ["slot"]
+			});
+		}
+	};
+	const reconcile = () => {
+		observer === null || observer === void 0 || observer.disconnect();
+		const claimed = /* @__PURE__ */ new Set();
+		for (const outlet of outlets) {
+			const assigned = lightChildren.filter((node) => {
+				if (claimed.has(node) || !matchesLightSlot(node, outlet.name)) return false;
+				claimed.add(node);
+				return true;
+			});
+			replaceOutletNodes(outlet, assigned.length > 0 ? assigned : outlet.fallbackNodes);
+		}
+		for (const node of lightChildren) if (!claimed.has(node) && host.contains(node)) {
+			var _node$parentNode;
+			(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
+		}
+		observer === null || observer === void 0 || observer.takeRecords();
+		observe();
+	};
+	const handleMutations = (records) => {
+		const added = /* @__PURE__ */ new Set();
+		const removed = /* @__PURE__ */ new Set();
+		let changed = false;
+		for (const record of records) {
+			if (record.type === "attributes") {
+				if (lightChildren.includes(record.target)) changed = true;
+				continue;
+			}
+			for (const node of record.removedNodes) if (lightChildren.includes(node)) removed.add(node);
+			if (record.target !== host) continue;
+			const additions = Array.from(record.addedNodes).filter((node) => {
+				return !isRuntimeOwnedNode(node);
+			});
+			if (additions.length === 0) continue;
+			for (const node of additions) added.add(node);
+			insertLightChildren(lightChildren, additions, record);
+			changed = true;
+		}
+		for (const node of removed) {
+			if (added.has(node) || host.contains(node)) continue;
+			const index = lightChildren.indexOf(node);
+			if (index >= 0) {
+				lightChildren.splice(index, 1);
+				changed = true;
+			}
+		}
+		if (changed) reconcile();
+	};
+	return {
+		createSlot(name, fallback) {
+			const fragment = document.createDocumentFragment();
+			const start = document.createComment(name ? `zeus-slot:${name}` : "zeus-slot");
+			const end = document.createComment("/zeus-slot");
+			fragment.append(start, end);
+			const outlet = {
+				name,
+				start,
+				end,
+				fallbackNodes: fallback ? insertTracked(fragment, fallback(), end) : []
+			};
+			outlets.push(outlet);
+			reconcile();
+			return fragment;
+		},
+		connect() {
+			var _host$ownerDocument$d;
+			if (observer) return;
+			const Observer = (_host$ownerDocument$d = host.ownerDocument.defaultView) === null || _host$ownerDocument$d === void 0 ? void 0 : _host$ownerDocument$d.MutationObserver;
+			if (!Observer) return;
+			unregisterHost = registerLightDomHost(host, lightChildren);
+			observer = new Observer(handleMutations);
+			observe();
+		},
+		disconnect() {
+			observer === null || observer === void 0 || observer.disconnect();
+			observer = void 0;
+			unregisterHost === null || unregisterHost === void 0 || unregisterHost();
+			unregisterHost = void 0;
+		}
+	};
+}
+function replaceOutletNodes(outlet, nextNodes) {
+	const parent = outlet.end.parentNode;
+	if (!parent || parent !== outlet.start.parentNode) return;
+	let current = outlet.start.nextSibling;
+	while (current && current !== outlet.end) {
+		const next = current.nextSibling;
+		parent.removeChild(current);
+		current = next;
+	}
+	for (const node of nextNodes) parent.insertBefore(node, outlet.end);
+}
+function insertLightChildren(lightChildren, additions, record) {
+	for (const node of additions) {
+		const currentIndex = lightChildren.indexOf(node);
+		if (currentIndex >= 0) lightChildren.splice(currentIndex, 1);
+	}
+	let insertionIndex = lightChildren.length;
+	const previousIndex = record.previousSibling ? lightChildren.indexOf(record.previousSibling) : -1;
+	const nextIndex = record.nextSibling ? lightChildren.indexOf(record.nextSibling) : -1;
+	if (previousIndex >= 0) insertionIndex = previousIndex + 1;
+	else if (nextIndex >= 0) insertionIndex = nextIndex;
+	else if (record.previousSibling === null) insertionIndex = 0;
+	lightChildren.splice(insertionIndex, 0, ...additions);
+}
+function createNativeSlot(name, fallback) {
+	const slot = document.createElement("slot");
+	if (name) slot.setAttribute("name", name);
+	const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
+	if (fallbackValue != null) insert(slot, fallbackValue);
+	return slot;
+}
+function findLightSlotNodes(nodes, name) {
+	return nodes.filter((node) => matchesLightSlot(node, name));
+}
+function matchesLightSlot(node, name) {
+	if (name) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		return node.getAttribute("slot") === name;
+	}
+	if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
+	return isMeaningfulTextNode(node);
+}
+function isMeaningfulTextNode(node) {
+	var _node$textContent;
+	if (node.nodeType !== Node.TEXT_NODE) return false;
+	return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
+}
+//#endregion
 //#region packages/core/runtime-dom/src/defineElement.ts
 const ZEUS_ELEMENT_DEFINITION = Symbol.for("zeus.element.definition");
 function prop(input, options = {}) {
@@ -2009,8 +2319,8 @@ function createPropStore(defs) {
 	const props = {};
 	for (const def of defs) {
 		const slot = state();
-		slots.set(def.key, slot);
-		Object.defineProperty(props, def.key, {
+		slots.set(def.name, slot);
+		Object.defineProperty(props, def.name, {
 			configurable: false,
 			enumerable: true,
 			get() {
@@ -2049,7 +2359,7 @@ function defineElement(tagName, options, setup) {
 		setup,
 		propDefs
 	};
-	const observedAttributes = propDefs.filter((def) => def.attr !== false).map((def) => def.attr);
+	const observedAttributes = getCustomElementObservedAttributes(propDefs);
 	class ZeusElement extends HTMLElement {
 		static get observedAttributes() {
 			return observedAttributes;
@@ -2058,7 +2368,8 @@ function defineElement(tagName, options, setup) {
 			super();
 			this.lightChildren = [];
 			this.capturedLightChildren = false;
-			this.reflecting = false;
+			this.attributeProps = /* @__PURE__ */ new Set();
+			this.reflectingAttrs = /* @__PURE__ */ new Set();
 			this.propStore = createPropStore(propDefs);
 			this.props = this.propStore.props;
 			applyPropDefaults(this.propStore, propDefs);
@@ -2070,17 +2381,23 @@ function defineElement(tagName, options, setup) {
 				emit: createEmitApi(this, options.emits),
 				expose: createExpose(this)
 			};
+			this.mountLifecycle = createCustomElementMountLifecycle(() => this.mountElement());
 		}
 		connectedCallback() {
+			this.mountLifecycle.connect();
+		}
+		disconnectedCallback() {
+			this.mountLifecycle.disconnect();
+		}
+		mountElement() {
 			var _options$shadow, _options$consumes;
-			if (this.dispose) return;
 			const shadow = (_options$shadow = options.shadow) !== null && _options$shadow !== void 0 ? _options$shadow : false;
 			const mode = shadow ? "shadow" : "light";
 			if (mode === "light" && !this.capturedLightChildren) {
 				this.lightChildren = Array.from(this.childNodes);
 				this.capturedLightChildren = true;
 			}
-			this.syncAttributesToProps(propDefs);
+			const projection = mode === "light" ? createLightDomProjection(this, this.lightChildren) : void 0;
 			const owner = createOwner();
 			for (const context of (_options$consumes = options.consumes) !== null && _options$consumes !== void 0 ? _options$consumes : []) {
 				const resolved = resolveDOMContext(this, context);
@@ -2091,18 +2408,19 @@ function defineElement(tagName, options, setup) {
 			const hostContext = {
 				host: this,
 				mode,
-				lightChildren: this.lightChildren
+				lightChildren: this.lightChildren,
+				projection
 			};
-			this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => {
+			const dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => {
 				syncFormValue(this.props, this.setupContext, options.form);
 				return setup(this.props, this.setupContext);
 			})), target, { owner });
 			mountStyles(target, options.styles);
-		}
-		disconnectedCallback() {
-			var _this$dispose;
-			(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
-			this.dispose = void 0;
+			projection === null || projection === void 0 || projection.connect();
+			return { dispose() {
+				projection === null || projection === void 0 || projection.disconnect();
+				dispose();
+			} };
 		}
 		formAssociatedCallback(form) {
 			var _options$form, _options$form$associa;
@@ -2121,10 +2439,11 @@ function defineElement(tagName, options, setup) {
 			(_options$form4 = options.form) === null || _options$form4 === void 0 || (_options$form4$stateR = _options$form4.stateRestore) === null || _options$form4$stateR === void 0 || _options$form4$stateR.call(_options$form4, state, mode, this.props, this.setupContext);
 		}
 		attributeChangedCallback(name, oldValue, newValue) {
-			if (oldValue === newValue || this.reflecting) return;
-			const def = propDefs.find((item) => item.attr === name);
+			if (oldValue === newValue || this.reflectingAttrs.has(name)) return;
+			const def = propDefs.find((item) => item.attrName === name);
 			if (!def) return;
-			this.propStore.set(def.key, castAttributeValue(newValue, def));
+			this.attributeProps.add(def.name);
+			this.propStore.set(def.name, coerceCustomElementAttribute(def, newValue));
 		}
 		resolveRenderTarget(shadow) {
 			if (this.target) return this.target;
@@ -2135,24 +2454,11 @@ function defineElement(tagName, options, setup) {
 			this.target = this.attachShadow(typeof shadow === "object" ? shadow : { mode: "open" });
 			return this.target;
 		}
-		syncAttributesToProps(defs) {
-			for (const def of defs) {
-				if (def.attr === false) continue;
-				const value = this.getAttribute(def.attr);
-				if (value !== null || def.type === Boolean) this.propStore.set(def.key, castAttributeValue(value, def));
-			}
-		}
 		_writePropFromProperty(key, value) {
-			const def = propDefs.find((item) => item.key === key);
+			const def = propDefs.find((item) => item.name === key);
+			this.attributeProps.delete(key);
 			this.propStore.set(key, value);
-			if ((def === null || def === void 0 ? void 0 : def.reflect) && def.attr !== false) {
-				this.reflecting = true;
-				try {
-					reflectPropToAttribute(this, def, value);
-				} finally {
-					this.reflecting = false;
-				}
-			}
+			if (def === null || def === void 0 ? void 0 : def.reflect) reflectCustomElementProperty(this, def, value, this.reflectingAttrs);
 		}
 	}
 	ZeusElement.formAssociated = Boolean(options.formAssociated);
@@ -2175,13 +2481,13 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 	applyPropDefaults(propStore, propDefs);
 	for (const def of propDefs) {
 		var _mountState$attribute;
-		if (def.attr !== false && ((_mountState$attribute = mountState.attributeProps) === null || _mountState$attribute === void 0 ? void 0 : _mountState$attribute.has(def.key))) {
-			propStore.set(def.key, castAttributeValue(host.getAttribute(def.attr), def));
-			initialValues.set(def.key, propStore.get(def.key));
+		if (def.attrName !== false && ((_mountState$attribute = mountState.attributeProps) === null || _mountState$attribute === void 0 ? void 0 : _mountState$attribute.has(def.name))) {
+			propStore.set(def.name, coerceCustomElementAttribute(def, host.getAttribute(def.attrName)));
+			initialValues.set(def.name, propStore.get(def.name));
 			continue;
 		}
-		if (initialValues.has(def.key)) {
-			propStore.set(def.key, initialValues.get(def.key));
+		if (initialValues.has(def.name)) {
+			propStore.set(def.name, initialValues.get(def.name));
 			continue;
 		}
 		/**
@@ -2189,11 +2495,11 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		* back to the lazy host value map so that `element.propName` returns the
 		* correct default value rather than undefined.
 		*/
-		initialValues.set(def.key, propStore.get(def.key));
+		initialValues.set(def.name, propStore.get(def.name));
 	}
 	for (const def of propDefs) {
 		var _mountState$attribute2;
-		if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.key))) reflectExternalProp(host, def, propStore.get(def.key), mountState.reflectingAttrs);
+		if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.name))) reflectCustomElementProperty(host, def, propStore.get(def.name), mountState.reflectingAttrs);
 	}
 	const shadow = (_options$shadow2 = options.shadow) !== null && _options$shadow2 !== void 0 ? _options$shadow2 : false;
 	const mode = shadow ? "shadow" : "light";
@@ -2202,6 +2508,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		mountState.capturedLightChildren = true;
 	}
 	const lightChildren = (_mountState$lightChil = mountState.lightChildren) !== null && _mountState$lightChil !== void 0 ? _mountState$lightChil : [];
+	const projection = mode === "light" ? createLightDomProjection(host, lightChildren) : void 0;
 	const owner = createOwner();
 	for (const context of (_options$consumes2 = options.consumes) !== null && _options$consumes2 !== void 0 ? _options$consumes2 : []) {
 		const resolved = resolveDOMContext(host, context);
@@ -2212,7 +2519,8 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 	const hostContext = {
 		host,
 		mode,
-		lightChildren
+		lightChildren,
+		projection
 	};
 	const setupContext = {
 		host,
@@ -2226,15 +2534,16 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		return setup(propStore.props, setupContext);
 	})), target, { owner });
 	mountStyles(target, options.styles);
+	projection === null || projection === void 0 || projection.connect();
 	return {
 		propertyChanged(name, _oldValue, newValue) {
 			var _mountState$attribute3;
-			const def = propDefs.find((item) => item.key === name);
-			const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.attr) !== false && ((_mountState$attribute3 = mountState.attributeProps) === null || _mountState$attribute3 === void 0 ? void 0 : _mountState$attribute3.has(name)));
-			const value = fromAttribute && def ? castAttributeValue(typeof newValue === "string" ? newValue : null, def) : newValue;
+			const def = propDefs.find((item) => item.name === name);
+			const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.attrName) !== false && ((_mountState$attribute3 = mountState.attributeProps) === null || _mountState$attribute3 === void 0 ? void 0 : _mountState$attribute3.has(name)));
+			const value = fromAttribute && def ? coerceCustomElementAttribute(def, typeof newValue === "string" ? newValue : null) : newValue;
 			propStore.set(name, value);
 			initialValues.set(name, value);
-			if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute) reflectExternalProp(host, def, value, mountState.reflectingAttrs);
+			if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute) reflectCustomElementProperty(host, def, value, mountState.reflectingAttrs);
 		},
 		formAssociated(form) {
 			var _options$form5, _options$form5$associ;
@@ -2253,6 +2562,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 			(_options$form8 = options.form) === null || _options$form8 === void 0 || (_options$form8$stateR = _options$form8.stateRestore) === null || _options$form8$stateR === void 0 || _options$form8$stateR.call(_options$form8, state, mode, propStore.props, setupContext);
 		},
 		dispose() {
+			projection === null || projection === void 0 || projection.disconnect();
 			dispose();
 		}
 	};
@@ -2264,18 +2574,18 @@ function normalizePropDefinitions(props) {
 		if (typeof input === "function") {
 			const type = input;
 			return {
-				key: propKey,
-				attr: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
-				type,
+				name: propKey,
+				attrName: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
+				type: normalizePropType(type),
 				reflect: false
 			};
 		}
 		const type = input === null || input === void 0 ? void 0 : input.type;
 		const defaultAttr = isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false;
 		return {
-			key: propKey,
-			attr: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? defaultAttr : input.attr,
-			type,
+			name: propKey,
+			attrName: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? defaultAttr : input.attr,
+			type: normalizePropType(type),
 			reflect: Boolean(input === null || input === void 0 ? void 0 : input.reflect),
 			default: input === null || input === void 0 ? void 0 : input.default,
 			serialize: input === null || input === void 0 ? void 0 : input.serialize,
@@ -2287,12 +2597,12 @@ function applyPropDefaults(store, defs) {
 	for (const def of defs) {
 		if (!("default" in def)) continue;
 		const value = typeof def.default === "function" ? def.default() : def.default;
-		store.set(def.key, value);
+		store.set(def.name, value);
 	}
 }
 function definePropAccessors(element, store, defs) {
 	for (const def of defs) {
-		const key = def.key;
+		const key = def.name;
 		const hadOwnValue = Object.prototype.hasOwnProperty.call(element, key);
 		const ownValue = hadOwnValue ? element[key] : void 0;
 		if (hadOwnValue) delete element[key];
@@ -2314,54 +2624,6 @@ function definePropAccessors(element, store, defs) {
 		if (hadOwnValue) element._writePropFromProperty(key, ownValue);
 	}
 }
-function castAttributeValue(value, def) {
-	if (def.deserialize) return def.deserialize(value);
-	if (def.type === Boolean) return value !== null;
-	if (value === null) return;
-	if (def.type === Number) return Number(value);
-	if (def.type === Object || def.type === Array) try {
-		return JSON.parse(value);
-	} catch (_unused) {
-		console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${def.attr}".`);
-		return def.type === Array ? [] : {};
-	}
-	if (def.type === Function) return;
-	return value;
-}
-function reflectPropToAttribute(element, def, value) {
-	if (def.attr === false) return;
-	if (def.serialize) {
-		const serialized = def.serialize(value);
-		if (serialized == null) element.removeAttribute(def.attr);
-		else element.setAttribute(def.attr, serialized);
-		return;
-	}
-	if (def.type === Boolean) {
-		if (value) element.setAttribute(def.attr, "");
-		else element.removeAttribute(def.attr);
-		return;
-	}
-	if (value == null) {
-		element.removeAttribute(def.attr);
-		return;
-	}
-	if (def.type === Object || def.type === Array) {
-		element.setAttribute(def.attr, JSON.stringify(value));
-		return;
-	}
-	if (def.type === Function) return;
-	element.setAttribute(def.attr, String(value));
-}
-function reflectExternalProp(element, def, value, reflectingAttrs) {
-	if (def.attr === false) return;
-	const attrName = def.attr.toLowerCase();
-	reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
-	try {
-		reflectPropToAttribute(element, def, value);
-	} finally {
-		reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
-	}
-}
 function syncFormValue(props, context, form) {
 	const valueResolver = form === null || form === void 0 ? void 0 : form.value;
 	const stateResolver = form === null || form === void 0 ? void 0 : form.state;
@@ -2423,6 +2685,15 @@ function createExpose(host) {
 function isAttributeBackedConstructor(type) {
 	return type === String || type === Number || type === Boolean;
 }
+function normalizePropType(type) {
+	if (type === String) return "string";
+	if (type === Number) return "number";
+	if (type === Boolean) return "boolean";
+	if (type === Object) return "object";
+	if (type === Array) return "array";
+	if (type === Function) return "function";
+	return "unknown";
+}
 function resolveExternalRenderTarget(host, shadow) {
 	var _host$shadowRoot;
 	if (!shadow) return host;
@@ -2441,38 +2712,6 @@ function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
-//#region packages/core/runtime-dom/src/slot.ts
-function createSlot(name, fallback) {
-	const context = getCurrentHostContext();
-	if (!context) return createNativeSlot(name, fallback);
-	if (context.mode === "shadow") return createNativeSlot(name, fallback);
-	const assigned = findLightSlotNodes(context.lightChildren, name);
-	if (assigned.length > 0) return Array.from(assigned);
-	return fallback ? fallback() : null;
-}
-function createNativeSlot(name, fallback) {
-	const slot = document.createElement("slot");
-	if (name) slot.setAttribute("name", name);
-	const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
-	if (fallbackValue != null) insert(slot, fallbackValue);
-	return slot;
-}
-function findLightSlotNodes(nodes, name) {
-	if (name) return nodes.filter((node) => {
-		if (node.nodeType !== Node.ELEMENT_NODE) return false;
-		return node.getAttribute("slot") === name;
-	});
-	return nodes.filter((node) => {
-		if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
-		return isMeaningfulTextNode(node);
-	});
-}
-function isMeaningfulTextNode(node) {
-	var _node$textContent;
-	if (node.nodeType !== Node.TEXT_NODE) return false;
-	return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
-}
-//#endregion
 //#region packages/core/runtime-dom/src/webComponents.ts
 const HOST_RESERVED_KEYS = /* @__PURE__ */ new Set([
 	"children",
@@ -2564,4 +2803,4 @@ function normalizeHostAttrName(name) {
 	}
 }
 //#endregion
-export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, ZEUS_ELEMENT_DEFINITION, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, createComponent, createContext, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, event, getCurrentHostContext, getCurrentOwner, getElementDefinition, inject, insert, insertTracked, marker, mountDynamic, mountElementDefinition, mountFor, mountShow, normalizeClass, prop, provide, provideDOMContext, removeNodes, render, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };
+export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, ZEUS_ELEMENT_DEFINITION, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, coerceCustomElementAttribute, createComponent, createContext, createCustomElementMountLifecycle, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, event, findCustomElementPropByAttribute, getCurrentHostContext, getCurrentOwner, getCustomElementAttributeName, getCustomElementObservedAttributes, getElementDefinition, inject, insert, insertTracked, marker, mountDynamic, mountElementDefinition, mountFor, mountShow, normalizeClass, prop, provide, provideDOMContext, reflectCustomElementProperty, removeNodes, render, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };