marko 6.3.34 → 6.3.36

package/dist/debug/html.js

@@ -35,6 +35,7 @@ const LoopKey = "#LoopKey";
 const PlaceholderContent = "#PlaceholderContent";
 const Renderer = "#Renderer";
 const TagVariable = "#TagVariable";
+const Owner = "owner";
 const Embed = "embed";
 //#endregion
 //#region src/common/helpers.ts
@@ -224,10 +225,16 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 			(exclusiveAttrs ||= []).push("checkedValueChange");
 			if ("checked" in attrs) exclusiveAttrs.push("checked");
 		}
-		if (attrs.valueChange) (exclusiveAttrs ||= []).push("valueChange");
+		if (attrs.valueChange) {
+			(exclusiveAttrs ||= []).push("valueChange");
+			if ("checked" in attrs && !exclusiveAttrs.includes("checked")) exclusiveAttrs.push("checked");
+		}
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertNoValueBindingOnCheckable(type, valueChange) {
+	if (valueChange && /^(?:button|checkbox|hidden|image|radio|reset|submit)$/i.test(type)) console.error(`\`valueChange\` cannot be used on a \`type="${type}"\` \`<input>\` — user interaction can never change its \`value\`.` + (/^[cr]/i.test(type) ? " Bind `checked` or `checkedValue` instead." : ""));
+}
 function assertHandlerIsFunction(name, value) {
 	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
 }
@@ -248,6 +255,7 @@ function joinWithAnd(a) {
 //#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
+const DYNAMIC_TAG_VAR_REGISTER_ID = "_dynamicTagVar";
 //#endregion
 //#region src/html/content.ts
 function _to_text(val) {
@@ -258,8 +266,8 @@ function _unescaped(val) {
 	assertValidTextValue(val);
 	return val ? val + "" : val === 0 ? "0" : "";
 }
-const unsafeXMLReg = /[<&]/g;
-const replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
+const unsafeXMLReg = /[<&\r]/g;
+const replaceUnsafeXML = (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&#13;";
 const escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
 function _escape(val) {
 	assertValidTextValue(val);
@@ -572,7 +580,18 @@ function setDebugInfo(obj, file, loc, vars) {
 	DEBUG.set(obj, {
 		file,
 		loc,
-		vars
+		vars,
+		slots: DEBUG.get(obj)?.slots
+	});
+}
+function setDebugSlotName(obj, accessor, name) {
+	const debug = DEBUG.get(obj);
+	if (debug) (debug.slots ??= {})[accessor] = name;
+	else DEBUG.set(obj, {
+		file: "",
+		loc: 0,
+		vars: void 0,
+		slots: { [accessor]: name }
 	});
 }
 var Serializer = class {
@@ -1471,21 +1490,27 @@ function throwUnserializable(state, cause, ref = null, accessor = "") {
 	if (cause !== void 0 && state.boundary?.abort) {
 		let message = "Unable to serialize";
 		let access = "";
-		while (ref?.accessor) {
+		while (ref) {
+			const { accessor } = ref;
 			const debug = ref.parent?.debug;
-			if (debug) {
-				const varLoc = debug.vars?.[ref.accessor];
-				let debugAccess = ref.accessor;
+			if (accessor && debug) {
+				const rawAccessor = fromObjectKey(accessor);
+				const varLoc = debug.vars?.[rawAccessor];
+				const slotName = debug.slots?.[rawAccessor];
+				let debugAccess = varLoc ? rawAccessor : void 0;
 				let debugLoc = debug.loc;
 				if (varLoc) if (Array.isArray(varLoc)) {
 					debugAccess = varLoc[0];
 					if (varLoc[1]) debugLoc = varLoc[1];
 				} else debugLoc = varLoc;
-				message += ` ${JSON.stringify(debugAccess)} in ${debug.file}`;
+				let display;
+				if (debugAccess !== void 0) display = slotName && debugAccess.startsWith("...") ? `\`${slotName}\` from \`${debugAccess}\`` : JSON.stringify(debugAccess);
+				else display = describeAccessor(rawAccessor, slotName) ?? JSON.stringify(rawAccessor);
+				message += ` ${display} in ${debug.file}`;
 				if (debugLoc) message += `:${debugLoc}`;
 				break;
 			}
-			access = toAccess(ref.accessor) + access;
+			if (accessor) access = toAccess(accessor) + access;
 			ref = ref.parent;
 		}
 		if (accessor) access = toAccess(accessor) + access;
@@ -1497,6 +1522,40 @@ function throwUnserializable(state, cause, ref = null, accessor = "") {
 		state.boundary.abort(err);
 	}
 }
+const accessorPrefixDescriptions = {
+	BranchScopes: "the branch scopes",
+	ClosureScopes: "the closure scopes",
+	ClosureSignalIndex: "the closure signal index",
+	ConditionalRenderer: "the conditional renderer",
+	ControlledObserver: "the controlled observer",
+	ControlledHandler: "the change handler",
+	ControlledType: "the controlled type",
+	ControlledValue: "the controlled value",
+	DynamicHTMLLastChild: "the dynamic html",
+	EventAttributes: "the event handlers",
+	IdFallback: "the generated id",
+	KeyedScopes: "the keyed scopes",
+	Lifecycle: "the lifecycle handlers",
+	Promise: "the pending promise",
+	TagVariableChange: "the tag variable change handler"
+};
+function describeAccessor(accessor, slotName) {
+	const sep = accessor.indexOf(":");
+	if (~sep) {
+		const description = slotName === void 0 ? accessorPrefixDescriptions[accessor.slice(0, sep)] : `the \`${slotName}\` handler`;
+		if (description) {
+			const node = /^#([a-z-]+)\//i.exec(accessor.slice(sep + 1));
+			return node ? `${description} of \`<${node[1]}>\`` : description;
+		}
+	}
+}
+function fromObjectKey(key) {
+	try {
+		if (key[0] === "\"") return JSON.parse(key.replace(/\\x/g, "\\u00"));
+		if (key[0] === "[") return JSON.parse(key.slice(1, -1));
+	} catch {}
+	return key;
+}
 function trackChannel(state, ref) {
 	const refReadyId = ref.channel?.readyId;
 	if (!refReadyId || refReadyId === state.channel?.readyId) return true;
@@ -1877,6 +1936,9 @@ function getContext(key) {
 function getState() {
 	return $chunk.boundary.state;
 }
+function rendererKey(renderer) {
+	return renderer?.["owner"] === void 0 ? renderer?.["id"] || renderer : renderer["id"] + " " + renderer[Owner];
+}
 function getScopeId(scope) {
 	return scope[K_SCOPE_ID];
 }
@@ -1972,7 +2034,7 @@ function _attr_content(nodeAccessor, scopeId, content, serializeReason) {
 	if (_peek_scope_id() !== branchId) {
 		if (shouldResume) writeScope(scopeId, {
 			[BranchScopes + nodeAccessor]: writeScope(branchId, {}),
-			[ConditionalRenderer + nodeAccessor]: render?.["id"]
+			[ConditionalRenderer + nodeAccessor]: rendererKey(render)
 		});
 	} else _scope_id();
 }
@@ -2806,7 +2868,7 @@ function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, seriali
 }
 function _textarea_value(value) {
 	const escaped = _escape(normalizeStrAttrValue(value));
-	return escaped[0] === "\n" || escaped[0] === "\r" ? "\n" + escaped : escaped;
+	return escaped[0] === "\n" ? "\n" + escaped : escaped;
 }
 function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
 	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
@@ -2870,6 +2932,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 				result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
 				skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			} else if (data.valueChange) {
+				assertNoValueBindingOnCheckable(data.type, data.valueChange);
 				result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 				skip = /^value(?:Change)?$|[\s/>"'=]/;
 			}
@@ -2936,21 +2999,22 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
 function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
-	assertHandlerIsFunction([
+	var handlerName = [
 		"checkedChange",
 		"checkedValueChange",
 		"valueChange",
 		"valueChange",
 		"openChange"
-	][type], valueChange);
-	writeScope(scopeId, serializeType ? {
+	][type];
+	assertHandlerIsFunction(handlerName, valueChange);
+	setDebugSlotName(writeScope(scopeId, serializeType ? {
 		[ControlledType + nodeAccessor]: type,
 		[ControlledValue + nodeAccessor]: value,
 		[ControlledHandler + nodeAccessor]: valueChange
 	} : {
 		[ControlledValue + nodeAccessor]: value,
 		[ControlledHandler + nodeAccessor]: valueChange
-	});
+	}), ControlledHandler + nodeAccessor, handlerName);
 }
 function stringAttr(name, value) {
 	return value && " " + name + attrAssignment(value);
@@ -3014,10 +3078,10 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 				if (renderer === "textarea") {
 					if (renderContent) throw new Error("A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead.");
 					_html(_attr_textarea_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, 1));
-				} else if (renderContent) {
-					if (typeof renderContent !== "function") throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
-					if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, renderContent, 1);
-					else _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason);
+				} else {
+					if (renderContent && typeof renderContent !== "function") throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
+					if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, renderContent ? () => _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason) : void 0, 1);
+					else if (renderContent) _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason);
 				}
 				_html(`</${renderer}>`);
 			} else if (content) throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
@@ -3030,6 +3094,7 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 			if (shouldResume || needsScript) _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
 		};
 		renderNative();
+		result = _el(branchId, DYNAMIC_TAG_VAR_REGISTER_ID);
 	} else {
 		const chunk = getChunk();
 		const beforeBranch = shouldResume ? deferBranchStart(chunk) : void 0;
@@ -3053,16 +3118,17 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 		}
 	}
 	if (rendered) {
-		if (shouldResume) writeScope(scopeId, { [ConditionalRenderer + accessor]: renderer?.["id"] || renderer });
+		if (shouldResume) writeScope(scopeId, { [ConditionalRenderer + accessor]: rendererKey(renderer) });
 	} else _scope_id();
 	return result;
 };
-function _content(id, fn) {
+function _content(id, fn, scopeId) {
 	fn["id"] = id;
+	fn[Owner] = scopeId;
 	return fn;
 }
 function _content_resume(id, fn, scopeId) {
-	return _resume(_content(id, fn), id, scopeId);
+	return _resume(_content(id, fn, scopeId), id, scopeId);
 }
 const patchDynamicTag = ((originalDynamicTag) => (patch) => {
 	_dynamic_tag = (scopeId, accessor, tag, input, content, inputIsArgs, resume) => {
@@ -3383,14 +3449,17 @@ function writeTriggerScript(html, triggers) {
 	const exprs = triggers.map((trigger) => {
 		const options = trigger.options && toObjectExpression(trigger.options);
 		switch (trigger.type) {
-			case "visible": return `(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()${options ? `,${options}` : ""}).observe(e))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+			case "visible": return `(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()${options ? `,${options}` : ""}).observe(e))(${querySelectorOrLoad(trigger.selector)})`;
 			case "idle": return `(self.requestIdleCallback||l)(l${options ? `,${options}` : ""})`;
 			case "media": return `(m=>m.matches?l():m.addEventListener("change",l,{once:1}))(matchMedia(${JSON.stringify(trigger.selector)}))`;
-			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(${querySelectorOrLoad(trigger.selector)})`;
 		}
 	});
 	writeScript(`((p,h,d,l=$=>{d||p.after(new Range().createContextualFragment(d=h))})=>${exprs.length > 1 ? `{${exprs.join(";")}}` : exprs[0]})(document.currentScript,${htmlStr})`);
 }
+function querySelectorOrLoad(selector) {
+	return `document.querySelector(${JSON.stringify(selector)})||${`(console.warn(${JSON.stringify(`A lazy load trigger could not find an element matching "${selector}". The module was loaded immediately.`)}),l())`}`;
+}
 function toObjectExpression(options) {
 	let result = "{";
 	let sep = "";

package/dist/debug/html.mjs

@@ -33,6 +33,7 @@ const LoopKey = "#LoopKey";
 const PlaceholderContent = "#PlaceholderContent";
 const Renderer = "#Renderer";
 const TagVariable = "#TagVariable";
+const Owner = "owner";
 const Embed = "embed";
 //#endregion
 //#region src/common/helpers.ts
@@ -222,10 +223,16 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 			(exclusiveAttrs ||= []).push("checkedValueChange");
 			if ("checked" in attrs) exclusiveAttrs.push("checked");
 		}
-		if (attrs.valueChange) (exclusiveAttrs ||= []).push("valueChange");
+		if (attrs.valueChange) {
+			(exclusiveAttrs ||= []).push("valueChange");
+			if ("checked" in attrs && !exclusiveAttrs.includes("checked")) exclusiveAttrs.push("checked");
+		}
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertNoValueBindingOnCheckable(type, valueChange) {
+	if (valueChange && /^(?:button|checkbox|hidden|image|radio|reset|submit)$/i.test(type)) console.error(`\`valueChange\` cannot be used on a \`type="${type}"\` \`<input>\` — user interaction can never change its \`value\`.` + (/^[cr]/i.test(type) ? " Bind `checked` or `checkedValue` instead." : ""));
+}
 function assertHandlerIsFunction(name, value) {
 	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
 }
@@ -246,6 +253,7 @@ function joinWithAnd(a) {
 //#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
+const DYNAMIC_TAG_VAR_REGISTER_ID = "_dynamicTagVar";
 //#endregion
 //#region src/html/content.ts
 function _to_text(val) {
@@ -256,8 +264,8 @@ function _unescaped(val) {
 	assertValidTextValue(val);
 	return val ? val + "" : val === 0 ? "0" : "";
 }
-const unsafeXMLReg = /[<&]/g;
-const replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
+const unsafeXMLReg = /[<&\r]/g;
+const replaceUnsafeXML = (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&#13;";
 const escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
 function _escape(val) {
 	assertValidTextValue(val);
@@ -570,7 +578,18 @@ function setDebugInfo(obj, file, loc, vars) {
 	DEBUG.set(obj, {
 		file,
 		loc,
-		vars
+		vars,
+		slots: DEBUG.get(obj)?.slots
+	});
+}
+function setDebugSlotName(obj, accessor, name) {
+	const debug = DEBUG.get(obj);
+	if (debug) (debug.slots ??= {})[accessor] = name;
+	else DEBUG.set(obj, {
+		file: "",
+		loc: 0,
+		vars: void 0,
+		slots: { [accessor]: name }
 	});
 }
 var Serializer = class {
@@ -1469,21 +1488,27 @@ function throwUnserializable(state, cause, ref = null, accessor = "") {
 	if (cause !== void 0 && state.boundary?.abort) {
 		let message = "Unable to serialize";
 		let access = "";
-		while (ref?.accessor) {
+		while (ref) {
+			const { accessor } = ref;
 			const debug = ref.parent?.debug;
-			if (debug) {
-				const varLoc = debug.vars?.[ref.accessor];
-				let debugAccess = ref.accessor;
+			if (accessor && debug) {
+				const rawAccessor = fromObjectKey(accessor);
+				const varLoc = debug.vars?.[rawAccessor];
+				const slotName = debug.slots?.[rawAccessor];
+				let debugAccess = varLoc ? rawAccessor : void 0;
 				let debugLoc = debug.loc;
 				if (varLoc) if (Array.isArray(varLoc)) {
 					debugAccess = varLoc[0];
 					if (varLoc[1]) debugLoc = varLoc[1];
 				} else debugLoc = varLoc;
-				message += ` ${JSON.stringify(debugAccess)} in ${debug.file}`;
+				let display;
+				if (debugAccess !== void 0) display = slotName && debugAccess.startsWith("...") ? `\`${slotName}\` from \`${debugAccess}\`` : JSON.stringify(debugAccess);
+				else display = describeAccessor(rawAccessor, slotName) ?? JSON.stringify(rawAccessor);
+				message += ` ${display} in ${debug.file}`;
 				if (debugLoc) message += `:${debugLoc}`;
 				break;
 			}
-			access = toAccess(ref.accessor) + access;
+			if (accessor) access = toAccess(accessor) + access;
 			ref = ref.parent;
 		}
 		if (accessor) access = toAccess(accessor) + access;
@@ -1495,6 +1520,40 @@ function throwUnserializable(state, cause, ref = null, accessor = "") {
 		state.boundary.abort(err);
 	}
 }
+const accessorPrefixDescriptions = {
+	BranchScopes: "the branch scopes",
+	ClosureScopes: "the closure scopes",
+	ClosureSignalIndex: "the closure signal index",
+	ConditionalRenderer: "the conditional renderer",
+	ControlledObserver: "the controlled observer",
+	ControlledHandler: "the change handler",
+	ControlledType: "the controlled type",
+	ControlledValue: "the controlled value",
+	DynamicHTMLLastChild: "the dynamic html",
+	EventAttributes: "the event handlers",
+	IdFallback: "the generated id",
+	KeyedScopes: "the keyed scopes",
+	Lifecycle: "the lifecycle handlers",
+	Promise: "the pending promise",
+	TagVariableChange: "the tag variable change handler"
+};
+function describeAccessor(accessor, slotName) {
+	const sep = accessor.indexOf(":");
+	if (~sep) {
+		const description = slotName === void 0 ? accessorPrefixDescriptions[accessor.slice(0, sep)] : `the \`${slotName}\` handler`;
+		if (description) {
+			const node = /^#([a-z-]+)\//i.exec(accessor.slice(sep + 1));
+			return node ? `${description} of \`<${node[1]}>\`` : description;
+		}
+	}
+}
+function fromObjectKey(key) {
+	try {
+		if (key[0] === "\"") return JSON.parse(key.replace(/\\x/g, "\\u00"));
+		if (key[0] === "[") return JSON.parse(key.slice(1, -1));
+	} catch {}
+	return key;
+}
 function trackChannel(state, ref) {
 	const refReadyId = ref.channel?.readyId;
 	if (!refReadyId || refReadyId === state.channel?.readyId) return true;
@@ -1875,6 +1934,9 @@ function getContext(key) {
 function getState() {
 	return $chunk.boundary.state;
 }
+function rendererKey(renderer) {
+	return renderer?.["owner"] === void 0 ? renderer?.["id"] || renderer : renderer["id"] + " " + renderer[Owner];
+}
 function getScopeId(scope) {
 	return scope[K_SCOPE_ID];
 }
@@ -1970,7 +2032,7 @@ function _attr_content(nodeAccessor, scopeId, content, serializeReason) {
 	if (_peek_scope_id() !== branchId) {
 		if (shouldResume) writeScope(scopeId, {
 			[BranchScopes + nodeAccessor]: writeScope(branchId, {}),
-			[ConditionalRenderer + nodeAccessor]: render?.["id"]
+			[ConditionalRenderer + nodeAccessor]: rendererKey(render)
 		});
 	} else _scope_id();
 }
@@ -2804,7 +2866,7 @@ function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, seriali
 }
 function _textarea_value(value) {
 	const escaped = _escape(normalizeStrAttrValue(value));
-	return escaped[0] === "\n" || escaped[0] === "\r" ? "\n" + escaped : escaped;
+	return escaped[0] === "\n" ? "\n" + escaped : escaped;
 }
 function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
 	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
@@ -2868,6 +2930,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 				result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
 				skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			} else if (data.valueChange) {
+				assertNoValueBindingOnCheckable(data.type, data.valueChange);
 				result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 				skip = /^value(?:Change)?$|[\s/>"'=]/;
 			}
@@ -2934,21 +2997,22 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
 function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
-	assertHandlerIsFunction([
+	var handlerName = [
 		"checkedChange",
 		"checkedValueChange",
 		"valueChange",
 		"valueChange",
 		"openChange"
-	][type], valueChange);
-	writeScope(scopeId, serializeType ? {
+	][type];
+	assertHandlerIsFunction(handlerName, valueChange);
+	setDebugSlotName(writeScope(scopeId, serializeType ? {
 		[ControlledType + nodeAccessor]: type,
 		[ControlledValue + nodeAccessor]: value,
 		[ControlledHandler + nodeAccessor]: valueChange
 	} : {
 		[ControlledValue + nodeAccessor]: value,
 		[ControlledHandler + nodeAccessor]: valueChange
-	});
+	}), ControlledHandler + nodeAccessor, handlerName);
 }
 function stringAttr(name, value) {
 	return value && " " + name + attrAssignment(value);
@@ -3012,10 +3076,10 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 				if (renderer === "textarea") {
 					if (renderContent) throw new Error("A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead.");
 					_html(_attr_textarea_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, 1));
-				} else if (renderContent) {
-					if (typeof renderContent !== "function") throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
-					if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, renderContent, 1);
-					else _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason);
+				} else {
+					if (renderContent && typeof renderContent !== "function") throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
+					if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer.toLowerCase()}/0`, input.value, input.valueChange, renderContent ? () => _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason) : void 0, 1);
+					else if (renderContent) _dynamic_tag(branchId, `#${renderer.toLowerCase()}/0`, renderContent, void 0, 0, void 0, serializeReason);
 				}
 				_html(`</${renderer}>`);
 			} else if (content) throw new Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
@@ -3028,6 +3092,7 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 			if (shouldResume || needsScript) _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
 		};
 		renderNative();
+		result = _el(branchId, DYNAMIC_TAG_VAR_REGISTER_ID);
 	} else {
 		const chunk = getChunk();
 		const beforeBranch = shouldResume ? deferBranchStart(chunk) : void 0;
@@ -3051,16 +3116,17 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 		}
 	}
 	if (rendered) {
-		if (shouldResume) writeScope(scopeId, { [ConditionalRenderer + accessor]: renderer?.["id"] || renderer });
+		if (shouldResume) writeScope(scopeId, { [ConditionalRenderer + accessor]: rendererKey(renderer) });
 	} else _scope_id();
 	return result;
 };
-function _content(id, fn) {
+function _content(id, fn, scopeId) {
 	fn["id"] = id;
+	fn[Owner] = scopeId;
 	return fn;
 }
 function _content_resume(id, fn, scopeId) {
-	return _resume(_content(id, fn), id, scopeId);
+	return _resume(_content(id, fn, scopeId), id, scopeId);
 }
 const patchDynamicTag = ((originalDynamicTag) => (patch) => {
 	_dynamic_tag = (scopeId, accessor, tag, input, content, inputIsArgs, resume) => {
@@ -3381,14 +3447,17 @@ function writeTriggerScript(html, triggers) {
 	const exprs = triggers.map((trigger) => {
 		const options = trigger.options && toObjectExpression(trigger.options);
 		switch (trigger.type) {
-			case "visible": return `(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()${options ? `,${options}` : ""}).observe(e))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+			case "visible": return `(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()${options ? `,${options}` : ""}).observe(e))(${querySelectorOrLoad(trigger.selector)})`;
 			case "idle": return `(self.requestIdleCallback||l)(l${options ? `,${options}` : ""})`;
 			case "media": return `(m=>m.matches?l():m.addEventListener("change",l,{once:1}))(matchMedia(${JSON.stringify(trigger.selector)}))`;
-			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(${querySelectorOrLoad(trigger.selector)})`;
 		}
 	});
 	writeScript(`((p,h,d,l=$=>{d||p.after(new Range().createContextualFragment(d=h))})=>${exprs.length > 1 ? `{${exprs.join(";")}}` : exprs[0]})(document.currentScript,${htmlStr})`);
 }
+function querySelectorOrLoad(selector) {
+	return `document.querySelector(${JSON.stringify(selector)})||${`(console.warn(${JSON.stringify(`A lazy load trigger could not find an element matching "${selector}". The module was loaded immediately.`)}),l())`}`;
+}
 function toObjectExpression(options) {
 	let result = "{";
 	let sep = "";

package/dist/dom/catch.feat.js

@@ -1,12 +1,12 @@
-let require_control_flow = require("../dom-B-XpL2_H.js"), handlePendingTry = (fn, scope, branch) => {
+let require_control_flow = require("../dom-59H9kVUF.js"), handlePendingTry = (fn, scope, branch) => {
 	for (; branch;) {
 		if (branch.O?.i) return (branch.J ||= []).push(fn, scope);
 		branch = branch.N;
 	}
 };
 //#region src/dom/catch.feat.ts
-require_control_flow.Yt((runEffects) => (effects, checkPending = require_control_flow.Xt.has(effects)) => {
-	if (checkPending || require_control_flow.Jt.has(effects)) {
+require_control_flow.Xt((runEffects) => (effects, checkPending = require_control_flow.Zt.has(effects)) => {
+	if (checkPending || require_control_flow.Yt.has(effects)) {
 		let i = 0, fn, scope, branch;
 		for (; i < effects.length;) fn = effects[i++], scope = effects[i++], (branch = scope.F)?.H !== 0 && !(checkPending && handlePendingTry(fn, scope, branch)) && fn(scope);
 	} else runEffects(effects);
@@ -19,7 +19,7 @@ require_control_flow.Yt((runEffects) => (effects, checkPending = require_control
 		}
 		render.f = 0, runRender(render);
 	} catch (error) {
-		require_control_flow.h(render.b, error);
+		require_control_flow.g(render.b, error);
 	}
 });
 //#endregion

package/dist/dom/catch.feat.mjs

@@ -4,7 +4,7 @@ let handlePendingTry = (fn, scope, branch) => {
 		branch = branch.N;
 	}
 };
-import { Jt as caughtError, Xt as placeholderShown, Yt as installCatch, h as renderCatch } from "../dom-6hBvZW7X.mjs";
+import { Xt as installCatch, Yt as caughtError, Zt as placeholderShown, g as renderCatch } from "../dom-BKDjlXIl.mjs";
 //#region src/dom/catch.feat.ts
 installCatch((runEffects) => (effects, checkPending = placeholderShown.has(effects)) => {
 	if (checkPending || caughtError.has(effects)) {

package/dist/dom/control-flow.d.ts

@@ -11,9 +11,12 @@ export declare function _try(nodeAccessor: EncodedAccessor, template?: string |
 export declare function renderCatch(scope: Scope, error: unknown): void;
 export declare const _if: (nodeAccessor: EncodedAccessor, ...branchesArgs: (string | SetupFn | 0)[]) => (scope: Scope, newBranch: number) => void;
 export declare const _show: (nodeAccessor: EncodedAccessor, startNodeAccessor?: EncodedAccessor, endNodeAccessor?: EncodedAccessor) => (scope: Scope, display: unknown) => void;
+export declare function rendererKey(renderer: Renderer | string | undefined): string | Renderer | undefined;
 export declare function patchDynamicTag(fn: <T extends typeof _dynamic_tag>(cond: T) => T): void;
 export declare let _dynamic_tag: (nodeAccessor: EncodedAccessor, getContent?: ((scope: Scope) => Renderer) | 0, getTagVar?: (() => Signal<unknown>) | 0, inputIsArgs?: 1) => Signal<Renderer | string | undefined>;
 export declare const _dynamic_tag_content: (nodeAccessor: EncodedAccessor) => Signal<Renderer | undefined>;
+export declare let bindNativeTagVar: undefined | ((branch: Scope) => void);
+export declare function installDynamicTagVar(bind: typeof bindNativeTagVar): void;
 export declare const _resume_dynamic_tag: () => typeof dynamicTagScript;
 declare function dynamicTagScript(branch: Scope): void;
 export declare function setConditionalRenderer<T>(scope: Scope, nodeAccessor: Accessor, newRenderer: T, createBranch: ($global: Scope[typeof AccessorProp.Global], renderer: NonNullable<T>, parentScope: Scope, parentNode: ParentNode) => BranchScope): void;

package/dist/dom/controllable-input.feat.js

@@ -1,3 +1,3 @@
-let require_control_flow = require("../dom-B-XpL2_H.js");
-require_control_flow.R[0] = require_control_flow.w, require_control_flow.R[1] = require_control_flow.S, require_control_flow.R[2] = require_control_flow.k;
+let require_control_flow = require("../dom-59H9kVUF.js");
+require_control_flow.z[0] = require_control_flow.T, require_control_flow.z[1] = require_control_flow.C, require_control_flow.z[2] = require_control_flow.A;
 //#endregion

package/dist/dom/controllable-input.feat.mjs

@@ -1,3 +1,3 @@
-import { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-6hBvZW7X.mjs";
+import { A as _attr_input_value_script, C as _attr_input_checkedValue_script, T as _attr_input_checked_script, z as controllableScripts } from "../dom-BKDjlXIl.mjs";
 controllableScripts[0] = _attr_input_checked_script, controllableScripts[1] = _attr_input_checkedValue_script, controllableScripts[2] = _attr_input_value_script;
 //#endregion

package/dist/dom/controllable-open.feat.js

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-B-XpL2_H.js");
+let require_control_flow = require("../dom-59H9kVUF.js");
 //#region src/dom/controllable-open.feat.ts
-require_control_flow.R[4] = require_control_flow.v;
+require_control_flow.z[4] = require_control_flow.y;
 //#endregion

package/dist/dom/controllable-open.feat.mjs

@@ -1,4 +1,4 @@
-import { R as controllableScripts, v as _attr_details_or_dialog_open_script } from "../dom-6hBvZW7X.mjs";
+import { y as _attr_details_or_dialog_open_script, z as controllableScripts } from "../dom-BKDjlXIl.mjs";
 //#region src/dom/controllable-open.feat.ts
 controllableScripts[4] = _attr_details_or_dialog_open_script;
 //#endregion

package/dist/dom/controllable-select.feat.js

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-B-XpL2_H.js");
+let require_control_flow = require("../dom-59H9kVUF.js");
 //#region src/dom/controllable-select.feat.ts
-require_control_flow.R[3] = require_control_flow.M;
+require_control_flow.z[3] = require_control_flow.N;
 //#endregion

package/dist/dom/controllable-select.feat.mjs

@@ -1,4 +1,4 @@
-import { M as _attr_select_value_script, R as controllableScripts } from "../dom-6hBvZW7X.mjs";
+import { N as _attr_select_value_script, z as controllableScripts } from "../dom-BKDjlXIl.mjs";
 //#region src/dom/controllable-select.feat.ts
 controllableScripts[3] = _attr_select_value_script;
 //#endregion

package/dist/dom/controllable-textarea.feat.js

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-B-XpL2_H.js");
+let require_control_flow = require("../dom-59H9kVUF.js");
 //#region src/dom/controllable-textarea.feat.ts
-require_control_flow.R[2] = require_control_flow.k;
+require_control_flow.z[2] = require_control_flow.A;
 //#endregion

package/dist/dom/controllable-textarea.feat.mjs

@@ -1,4 +1,4 @@
-import { R as controllableScripts, k as _attr_input_value_script } from "../dom-6hBvZW7X.mjs";
+import { A as _attr_input_value_script, z as controllableScripts } from "../dom-BKDjlXIl.mjs";
 //#region src/dom/controllable-textarea.feat.ts
 controllableScripts[2] = _attr_input_value_script;
 //#endregion

package/dist/dom/controllable.feat.js

@@ -1,3 +1,3 @@
-let require_control_flow = require("../dom-B-XpL2_H.js");
-require("./controllable-input.feat.js"), require("./controllable-open.feat.js"), require("./controllable-select.feat.js"), require_control_flow.L.INPUT = require_control_flow.N, require_control_flow.L.TEXTAREA = require_control_flow.I, require_control_flow.L.SELECT = require_control_flow.F, require_control_flow.L.DETAILS = require_control_flow.L.DIALOG = require_control_flow.P;
+let require_control_flow = require("../dom-59H9kVUF.js");
+require("./controllable-input.feat.js"), require("./controllable-open.feat.js"), require("./controllable-select.feat.js"), require_control_flow.R.INPUT = require_control_flow.P, require_control_flow.R.TEXTAREA = require_control_flow.L, require_control_flow.R.SELECT = require_control_flow.I, require_control_flow.R.DETAILS = require_control_flow.R.DIALOG = require_control_flow.F;
 //#endregion