@marko/runtime-tags 6.1.17 → 6.1.19

package/dist/debug/dom.js

@@ -230,19 +230,12 @@ function push(opt, item) {
 }
 //#endregion
 //#region src/dom/event.ts
-const defaultDelegator = /* @__PURE__ */ createDelegator();
 function _on(element, type, handler) {
 	assertHandlerIsFunction("on" + type[0].toUpperCase() + type.slice(1), handler);
-	if (element["$" + type] === void 0) defaultDelegator(element, type, handleDelegated);
+	if (element["$" + type] === void 0) delegate(type, handleDelegated);
 	element["$" + type] = handler || null;
 }
-/* @__NO_SIDE_EFFECTS__ */
-function createDelegator() {
-	const kEvents = Symbol();
-	return function ensureDelegated(node, type, handler) {
-		((node = node.getRootNode())[kEvents] ||= {})[type] ||= (node.addEventListener(type, handler, true), 1);
-	};
-}
+const delegate = (type, handler) => handler[type] ||= (document.addEventListener(type, handler, true), 1);
 function handleDelegated(ev) {
 	let target = !rendering && ev.target;
 	Object.defineProperty(ev, "currentTarget", {
@@ -867,7 +860,6 @@ function _el(id, accessor) {
 //#endregion
 //#region src/dom/controllable.ts
 let inputType = "";
-const controllableDelegate = /* @__PURE__ */ createDelegator();
 function _attr_input_checked_default(scope, nodeAccessor, checked) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
@@ -927,7 +919,7 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
 			const oldValue = scope["ControlledValue:" + nodeAccessor];
 			const newValue = Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0;
 			if (el.name && el.type[0] === "r") {
-				for (const radio of el.getRootNode().querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) if (radio.form === el.form) radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value;
+				for (const radio of document.querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) if (radio.form === el.form) radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value;
 			} else el.checked = !el.checked;
 			checkedValueChange(newValue);
 			run();
@@ -969,7 +961,7 @@ function _attr_input_value_script(scope, nodeAccessor) {
 }
 function setInputValue(el, value) {
 	if (el.value !== value) {
-		const updatedPosition = resolveCursorPosition(inputType, el.getRootNode().activeElement === el && el.selectionStart, el.value, el.value = value);
+		const updatedPosition = resolveCursorPosition(inputType, document.activeElement === el && el.selectionStart, el.value, el.value = value);
 		if (~updatedPosition) el.setSelectionRange(updatedPosition, updatedPosition);
 	}
 }
@@ -1076,8 +1068,8 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 }
 function syncControllableFormInput(el, hasChanged, onChange) {
 	el._ = onChange;
-	controllableDelegate(el, "input", handleChange);
-	if (el.form) controllableDelegate(el.form, "reset", handleFormReset);
+	delegate("input", handleChange);
+	if (el.form) delegate("reset", handleFormReset);
 	if (isResuming && hasChanged(el)) queueMicrotask(onChange);
 }
 function handleChange(ev) {
@@ -1900,6 +1892,9 @@ const compat = {
 	getStartNode(branch) {
 		return branch["#StartNode"];
 	},
+	getEndNode(branch) {
+		return branch["#EndNode"];
+	},
 	setScopeNodes(branch, startNode, endNode) {
 		branch["#StartNode"] = startNode;
 		branch["#EndNode"] = endNode;

package/dist/debug/dom.mjs

@@ -228,19 +228,12 @@ function push(opt, item) {
 }
 //#endregion
 //#region src/dom/event.ts
-const defaultDelegator = /* @__PURE__ */ createDelegator();
 function _on(element, type, handler) {
 	assertHandlerIsFunction("on" + type[0].toUpperCase() + type.slice(1), handler);
-	if (element["$" + type] === void 0) defaultDelegator(element, type, handleDelegated);
+	if (element["$" + type] === void 0) delegate(type, handleDelegated);
 	element["$" + type] = handler || null;
 }
-/* @__NO_SIDE_EFFECTS__ */
-function createDelegator() {
-	const kEvents = Symbol();
-	return function ensureDelegated(node, type, handler) {
-		((node = node.getRootNode())[kEvents] ||= {})[type] ||= (node.addEventListener(type, handler, true), 1);
-	};
-}
+const delegate = (type, handler) => handler[type] ||= (document.addEventListener(type, handler, true), 1);
 function handleDelegated(ev) {
 	let target = !rendering && ev.target;
 	Object.defineProperty(ev, "currentTarget", {
@@ -865,7 +858,6 @@ function _el(id, accessor) {
 //#endregion
 //#region src/dom/controllable.ts
 let inputType = "";
-const controllableDelegate = /* @__PURE__ */ createDelegator();
 function _attr_input_checked_default(scope, nodeAccessor, checked) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
@@ -925,7 +917,7 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
 			const oldValue = scope["ControlledValue:" + nodeAccessor];
 			const newValue = Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0;
 			if (el.name && el.type[0] === "r") {
-				for (const radio of el.getRootNode().querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) if (radio.form === el.form) radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value;
+				for (const radio of document.querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) if (radio.form === el.form) radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value;
 			} else el.checked = !el.checked;
 			checkedValueChange(newValue);
 			run();
@@ -967,7 +959,7 @@ function _attr_input_value_script(scope, nodeAccessor) {
 }
 function setInputValue(el, value) {
 	if (el.value !== value) {
-		const updatedPosition = resolveCursorPosition(inputType, el.getRootNode().activeElement === el && el.selectionStart, el.value, el.value = value);
+		const updatedPosition = resolveCursorPosition(inputType, document.activeElement === el && el.selectionStart, el.value, el.value = value);
 		if (~updatedPosition) el.setSelectionRange(updatedPosition, updatedPosition);
 	}
 }
@@ -1074,8 +1066,8 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 }
 function syncControllableFormInput(el, hasChanged, onChange) {
 	el._ = onChange;
-	controllableDelegate(el, "input", handleChange);
-	if (el.form) controllableDelegate(el.form, "reset", handleFormReset);
+	delegate("input", handleChange);
+	if (el.form) delegate("reset", handleFormReset);
 	if (isResuming && hasChanged(el)) queueMicrotask(onChange);
 }
 function handleChange(ev) {
@@ -1898,6 +1890,9 @@ const compat = {
 	getStartNode(branch) {
 		return branch["#StartNode"];
 	},
+	getEndNode(branch) {
+		return branch["#EndNode"];
+	},
 	setScopeNodes(branch, startNode, endNode) {
 		branch["#StartNode"] = startNode;
 		branch["#EndNode"] = endNode;

package/dist/debug/html.js

@@ -2475,29 +2475,29 @@ function _attr_option_value(value) {
 }
 const kSelectedValue = Symbol("selectedValue");
 const kSelectedValueMatched = Symbol("selectedValueMatched");
-function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
-	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content, serializeType) {
+	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	if (content) if (valueChange) {
 		const matched = { value: false };
 		withContext(kSelectedValue, value, () => withContext(kSelectedValueMatched, matched, content));
 		if (!matched.value && (Array.isArray(value) ? value.some((v) => normalizeStrAttrValue(v) !== "") : normalizeStrAttrValue(value) !== "")) console.error("A controlled `<select>`'s `value` has no matching `<option>`:", value);
 	} else withContext(kSelectedValue, value, content);
 }
-function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _escape(value);
 }
-function _attr_input_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _attr("value", value);
 }
-function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange);
+function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange, serializeType) {
+	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange, serializeType);
 	return isNotVoid(checked) ? " checked" : "";
 }
-function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value, serializeType) {
 	const valueAttr = _attr("value", value);
-	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange);
+	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange, serializeType);
 	return normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
 }
 const checkedValuesRefs = /* @__PURE__ */ new WeakMap();
@@ -2511,9 +2511,9 @@ function getCheckedValueRef(checkedValue) {
 		return ref;
 	}
 }
-function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange) {
+function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, serializeType) {
 	const normalizedOpen = isNotVoid(open);
-	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange);
+	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange, serializeType);
 	return normalizedOpen ? " open" : "";
 }
 function _attr_nonce() {
@@ -2529,9 +2529,9 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	switch (tagName) {
 		case "input":
 			assertExclusiveAttrs(data);
-			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange);
-			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value);
-			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange);
+			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange, 1);
+			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
+			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 			else break;
 			skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			break;
@@ -2548,7 +2548,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 		case "details":
 		case "dialog":
 			if (data.openChange) {
-				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange);
+				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange, 1);
 				skip = /^open(?:Change)?$|[\s/>"'=]/;
 			}
 			break;
@@ -2594,12 +2594,15 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_html(`${_attrs_partial(data, skip, nodeAccessor, scopeId, tagName)}>`);
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
-function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
 	assertHandlerIsFunction("valueChange", valueChange);
-	writeScope(scopeId, {
+	writeScope(scopeId, serializeType ? {
 		["ControlledType:" + nodeAccessor]: type,
 		["ControlledValue:" + nodeAccessor]: value,
 		["ControlledHandler:" + nodeAccessor]: valueChange
+	} : {
+		["ControlledValue:" + nodeAccessor]: value,
+		["ControlledHandler:" + nodeAccessor]: valueChange
 	});
 }
 function stringAttr(name, value) {
@@ -2665,10 +2668,10 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 			const renderContent = content || normalizeDynamicRenderer(input.content);
 			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}/0`, input.value, input.valueChange));
+				_html(_attr_textarea_value(branchId, `#${renderer}/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}/0`, input.value, input.valueChange, renderContent);
+				if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer}/0`, input.value, input.valueChange, renderContent, 1);
 				else _dynamic_tag(branchId, `#${renderer}/0`, renderContent, void 0, 0, void 0, serializeReason);
 			}
 			_html(`</${renderer}>`);

package/dist/debug/html.mjs

@@ -2473,29 +2473,29 @@ function _attr_option_value(value) {
 }
 const kSelectedValue = Symbol("selectedValue");
 const kSelectedValueMatched = Symbol("selectedValueMatched");
-function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
-	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content, serializeType) {
+	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	if (content) if (valueChange) {
 		const matched = { value: false };
 		withContext(kSelectedValue, value, () => withContext(kSelectedValueMatched, matched, content));
 		if (!matched.value && (Array.isArray(value) ? value.some((v) => normalizeStrAttrValue(v) !== "") : normalizeStrAttrValue(value) !== "")) console.error("A controlled `<select>`'s `value` has no matching `<option>`:", value);
 	} else withContext(kSelectedValue, value, content);
 }
-function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _escape(value);
 }
-function _attr_input_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _attr("value", value);
 }
-function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange);
+function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange, serializeType) {
+	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange, serializeType);
 	return isNotVoid(checked) ? " checked" : "";
 }
-function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value, serializeType) {
 	const valueAttr = _attr("value", value);
-	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange);
+	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange, serializeType);
 	return normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
 }
 const checkedValuesRefs = /* @__PURE__ */ new WeakMap();
@@ -2509,9 +2509,9 @@ function getCheckedValueRef(checkedValue) {
 		return ref;
 	}
 }
-function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange) {
+function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, serializeType) {
 	const normalizedOpen = isNotVoid(open);
-	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange);
+	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange, serializeType);
 	return normalizedOpen ? " open" : "";
 }
 function _attr_nonce() {
@@ -2527,9 +2527,9 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	switch (tagName) {
 		case "input":
 			assertExclusiveAttrs(data);
-			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange);
-			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value);
-			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange);
+			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange, 1);
+			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
+			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 			else break;
 			skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			break;
@@ -2546,7 +2546,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 		case "details":
 		case "dialog":
 			if (data.openChange) {
-				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange);
+				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange, 1);
 				skip = /^open(?:Change)?$|[\s/>"'=]/;
 			}
 			break;
@@ -2592,12 +2592,15 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_html(`${_attrs_partial(data, skip, nodeAccessor, scopeId, tagName)}>`);
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
-function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
 	assertHandlerIsFunction("valueChange", valueChange);
-	writeScope(scopeId, {
+	writeScope(scopeId, serializeType ? {
 		["ControlledType:" + nodeAccessor]: type,
 		["ControlledValue:" + nodeAccessor]: value,
 		["ControlledHandler:" + nodeAccessor]: valueChange
+	} : {
+		["ControlledValue:" + nodeAccessor]: value,
+		["ControlledHandler:" + nodeAccessor]: valueChange
 	});
 }
 function stringAttr(name, value) {
@@ -2663,10 +2666,10 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 			const renderContent = content || normalizeDynamicRenderer(input.content);
 			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}/0`, input.value, input.valueChange));
+				_html(_attr_textarea_value(branchId, `#${renderer}/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}/0`, input.value, input.valueChange, renderContent);
+				if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, `#${renderer}/0`, input.value, input.valueChange, renderContent, 1);
 				else _dynamic_tag(branchId, `#${renderer}/0`, renderContent, void 0, 0, void 0, serializeReason);
 			}
 			_html(`</${renderer}>`);

package/dist/dom/compat.d.ts

@@ -10,6 +10,7 @@ export declare const compat: {
     setRendererId(renderer: any, id: unknown): void;
     isRenderer(renderer: any): any;
     getStartNode(branch: any): any;
+    getEndNode(branch: any): any;
     setScopeNodes(branch: any, startNode: Node, endNode: Node): void;
     runComponentEffects(this: any): void;
     runComponentDestroy(this: any): void;

package/dist/dom/event.d.ts

@@ -1,4 +1,4 @@
 type EventNames = keyof GlobalEventHandlersEventMap;
 export declare function _on<T extends EventNames, H extends false | null | undefined | ((ev: GlobalEventHandlersEventMap[T], target: Element) => void)>(element: Element, type: T, handler: H): void;
-export declare function createDelegator(): (node: Node, type: string, handler: EventListener) => void;
+export declare const delegate: (type: string, handler: EventListener) => any;
 export {};

package/dist/dom.js

@@ -4,7 +4,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	else if (Array.isArray(val)) for (let v of val) part = toDelimitedString(v, delimiter, stringify), part && (str += sep + part, sep = delimiter);
 	else for (let name in val) part = stringify(name, val[name]), part && (str += sep + part, sep = delimiter);
 	return str;
-}, decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36), defaultDelegator = /* @__PURE__ */ createDelegator(), R = /[^\p{L}\p{N}]/gu, parsers = {}, nextScopeId = 1e6, collectingScopes, destroyNestedScopes = function destroyNestedScopes(scope) {
+}, decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36), delegate = (type, handler) => handler[type] ||= (document.addEventListener(type, handler, !0), 1), R = /[^\p{L}\p{N}]/gu, parsers = {}, nextScopeId = 1e6, collectingScopes, destroyNestedScopes = function destroyNestedScopes(scope) {
 	scope.H = 0, scope.D?.forEach(destroyNestedScopes), scope.B?.forEach(resetControllers);
 }, isScheduled, channel, _return = (scope, value) => scope.T?.(value), _var_change = (scope, value) => scope.U?.(value), tagIdsByGlobal = /* @__PURE__ */ new WeakMap(), walker = /* @__PURE__ */ document.createTreeWalker(document), walkInternal = function walkInternal(currentWalkIndex, walkCodes, scope) {
 	let value, currentMultiplier, storedMultiplier = 0, currentScopeIndex = 0;
@@ -20,7 +20,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 		for (value = 10 * currentMultiplier + value - 107; value--;) walker.parentNode();
 		walker.nextSibling();
 	} else storedMultiplier = currentMultiplier * 10 + value - 117;
-}, cloneCache = {}, registeredValues = {}, curRenders, branchesEnabled, embedRenders, readyIds, isResuming, inputType = "", controllableDelegate = /* @__PURE__ */ createDelegator(), _dynamic_tag = function(nodeAccessor, getContent, getTagVar, inputIsArgs) {
+}, cloneCache = {}, registeredValues = {}, curRenders, branchesEnabled, embedRenders, readyIds, isResuming, inputType = "", _dynamic_tag = function(nodeAccessor, getContent, getTagVar, inputIsArgs) {
 	nodeAccessor = decodeAccessor(nodeAccessor);
 	let childScopeAccessor = "A" + nodeAccessor, rendererAccessor = "D" + nodeAccessor;
 	return enableBranches(), (scope, newRenderer, getInput) => {
@@ -74,6 +74,9 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	getStartNode(branch) {
 		return branch.S;
 	},
+	getEndNode(branch) {
+		return branch.K;
+	},
 	setScopeNodes(branch, startNode, endNode) {
 		branch.S = startNode, branch.K = endNode;
 	},
@@ -179,14 +182,7 @@ function push(opt, item) {
 //#endregion
 //#region src/dom/event.ts
 function _on(element, type, handler) {
-	element["$" + type] === void 0 && defaultDelegator(element, type, handleDelegated), element["$" + type] = handler || null;
-}
-/* @__NO_SIDE_EFFECTS__ */
-function createDelegator() {
-	let kEvents = Symbol();
-	return function(node, type, handler) {
-		((node = node.getRootNode())[kEvents] ||= {})[type] ||= (node.addEventListener(type, handler, !0), 1);
-	};
+	element["$" + type] === void 0 && delegate(type, handleDelegated), element["$" + type] = handler || null;
 }
 function handleDelegated(ev) {
 	let target = !rendering && ev.target;
@@ -574,7 +570,7 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
 		let checkedValueChange = scope["E" + nodeAccessor];
 		if (checkedValueChange) {
 			let oldValue = scope["G" + nodeAccessor], newValue = Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0;
-			if (el.name && el.type[0] === "r") for (let radio of el.getRootNode().querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) radio.form === el.form && (radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value);
+			if (el.name && el.type[0] === "r") for (let radio of document.querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) radio.form === el.form && (radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value);
 			else el.checked = !el.checked;
 			checkedValueChange(newValue), run();
 		}
@@ -600,7 +596,7 @@ function _attr_input_value_script(scope, nodeAccessor) {
 }
 function setInputValue(el, value) {
 	if (el.value !== value) {
-		let updatedPosition = resolveCursorPosition(inputType, el.getRootNode().activeElement === el && el.selectionStart, el.value, el.value = value);
+		let updatedPosition = resolveCursorPosition(inputType, document.activeElement === el && el.selectionStart, el.value, el.value = value);
 		~updatedPosition && el.setSelectionRange(updatedPosition, updatedPosition);
 	}
 }
@@ -672,7 +668,7 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 	});
 }
 function syncControllableFormInput(el, hasChanged, onChange) {
-	el._ = onChange, controllableDelegate(el, "input", handleChange), el.form && controllableDelegate(el.form, "reset", handleFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
+	el._ = onChange, delegate("input", handleChange), el.form && delegate("reset", handleFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
 }
 function handleChange(ev) {
 	ev.target._?.(ev);

package/dist/dom.mjs

@@ -4,7 +4,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	else if (Array.isArray(val)) for (let v of val) part = toDelimitedString(v, delimiter, stringify), part && (str += sep + part, sep = delimiter);
 	else for (let name in val) part = stringify(name, val[name]), part && (str += sep + part, sep = delimiter);
 	return str;
-}, decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36), defaultDelegator = /* @__PURE__ */ createDelegator(), R = /[^\p{L}\p{N}]/gu, parsers = {}, nextScopeId = 1e6, collectingScopes, destroyNestedScopes = function destroyNestedScopes(scope) {
+}, decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36), delegate = (type, handler) => handler[type] ||= (document.addEventListener(type, handler, !0), 1), R = /[^\p{L}\p{N}]/gu, parsers = {}, nextScopeId = 1e6, collectingScopes, destroyNestedScopes = function destroyNestedScopes(scope) {
 	scope.H = 0, scope.D?.forEach(destroyNestedScopes), scope.B?.forEach(resetControllers);
 }, isScheduled, channel, _return = (scope, value) => scope.T?.(value), _var_change = (scope, value) => scope.U?.(value), tagIdsByGlobal = /* @__PURE__ */ new WeakMap(), walker = /* @__PURE__ */ document.createTreeWalker(document), walkInternal = function walkInternal(currentWalkIndex, walkCodes, scope) {
 	let value, currentMultiplier, storedMultiplier = 0, currentScopeIndex = 0;
@@ -20,7 +20,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 		for (value = 10 * currentMultiplier + value - 107; value--;) walker.parentNode();
 		walker.nextSibling();
 	} else storedMultiplier = currentMultiplier * 10 + value - 117;
-}, cloneCache = {}, registeredValues = {}, curRenders, branchesEnabled, embedRenders, readyIds, isResuming, inputType = "", controllableDelegate = /* @__PURE__ */ createDelegator(), _dynamic_tag = function(nodeAccessor, getContent, getTagVar, inputIsArgs) {
+}, cloneCache = {}, registeredValues = {}, curRenders, branchesEnabled, embedRenders, readyIds, isResuming, inputType = "", _dynamic_tag = function(nodeAccessor, getContent, getTagVar, inputIsArgs) {
 	nodeAccessor = decodeAccessor(nodeAccessor);
 	let childScopeAccessor = "A" + nodeAccessor, rendererAccessor = "D" + nodeAccessor;
 	return enableBranches(), (scope, newRenderer, getInput) => {
@@ -74,6 +74,9 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	getStartNode(branch) {
 		return branch.S;
 	},
+	getEndNode(branch) {
+		return branch.K;
+	},
 	setScopeNodes(branch, startNode, endNode) {
 		branch.S = startNode, branch.K = endNode;
 	},
@@ -178,14 +181,7 @@ function push(opt, item) {
 //#endregion
 //#region src/dom/event.ts
 function _on(element, type, handler) {
-	element["$" + type] === void 0 && defaultDelegator(element, type, handleDelegated), element["$" + type] = handler || null;
-}
-/* @__NO_SIDE_EFFECTS__ */
-function createDelegator() {
-	let kEvents = Symbol();
-	return function(node, type, handler) {
-		((node = node.getRootNode())[kEvents] ||= {})[type] ||= (node.addEventListener(type, handler, !0), 1);
-	};
+	element["$" + type] === void 0 && delegate(type, handleDelegated), element["$" + type] = handler || null;
 }
 function handleDelegated(ev) {
 	let target = !rendering && ev.target;
@@ -573,7 +569,7 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
 		let checkedValueChange = scope["E" + nodeAccessor];
 		if (checkedValueChange) {
 			let oldValue = scope["G" + nodeAccessor], newValue = Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0;
-			if (el.name && el.type[0] === "r") for (let radio of el.getRootNode().querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) radio.form === el.form && (radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value);
+			if (el.name && el.type[0] === "r") for (let radio of document.querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`)) radio.form === el.form && (radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value);
 			else el.checked = !el.checked;
 			checkedValueChange(newValue), run();
 		}
@@ -599,7 +595,7 @@ function _attr_input_value_script(scope, nodeAccessor) {
 }
 function setInputValue(el, value) {
 	if (el.value !== value) {
-		let updatedPosition = resolveCursorPosition(inputType, el.getRootNode().activeElement === el && el.selectionStart, el.value, el.value = value);
+		let updatedPosition = resolveCursorPosition(inputType, document.activeElement === el && el.selectionStart, el.value, el.value = value);
 		~updatedPosition && el.setSelectionRange(updatedPosition, updatedPosition);
 	}
 }
@@ -671,7 +667,7 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 	});
 }
 function syncControllableFormInput(el, hasChanged, onChange) {
-	el._ = onChange, controllableDelegate(el, "input", handleChange), el.form && controllableDelegate(el.form, "reset", handleFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
+	el._ = onChange, delegate("input", handleChange), el.form && delegate("reset", handleFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
 }
 function handleChange(ev) {
 	ev.target._?.(ev);

package/dist/html/attrs.d.ts

@@ -2,12 +2,12 @@ import { type Accessor } from "../common/types";
 export declare function _attr_class(value: unknown): string;
 export declare function _attr_style(value: unknown): string;
 export declare function _attr_option_value(value: unknown): string;
-export declare function _attr_select_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown, content?: () => void): void;
-export declare function _attr_textarea_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown): string;
-export declare function _attr_input_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown): string;
-export declare function _attr_input_checked(scopeId: number, nodeAccessor: Accessor, checked: unknown, checkedChange: unknown): "" | " checked";
-export declare function _attr_input_checkedValue(scopeId: number, nodeAccessor: Accessor, checkedValue: unknown, checkedValueChange: unknown, value: unknown): string;
-export declare function _attr_details_or_dialog_open(scopeId: number, nodeAccessor: Accessor, open: unknown, openChange: unknown): "" | " open";
+export declare function _attr_select_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown, content?: () => void, serializeType?: 1): void;
+export declare function _attr_textarea_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown, serializeType?: 1): string;
+export declare function _attr_input_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown, serializeType?: 1): string;
+export declare function _attr_input_checked(scopeId: number, nodeAccessor: Accessor, checked: unknown, checkedChange: unknown, serializeType?: 1): "" | " checked";
+export declare function _attr_input_checkedValue(scopeId: number, nodeAccessor: Accessor, checkedValue: unknown, checkedValueChange: unknown, value: unknown, serializeType?: 1): string;
+export declare function _attr_details_or_dialog_open(scopeId: number, nodeAccessor: Accessor, open: unknown, openChange: unknown, serializeType?: 1): "" | " open";
 export declare function _attr_nonce(): string;
 export declare function _attr(name: string, value: unknown): string;
 export declare function _attrs(data: Record<string, unknown>, nodeAccessor: Accessor, scopeId: number, tagName: string): string;

package/dist/html.js

@@ -247,10 +247,10 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 		let input = (inputIsArgs ? inputOrArgs[0] : inputOrArgs) || {};
 		if (rendered = !0, _scope_id(), _html(`<${renderer}${_attrs(input, "a", branchId, renderer)}>`), !voidElementsReg.test(renderer)) {
 			let renderContent = content || normalizeDynamicRenderer(input.content);
-			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", input.value, input.valueChange));
+			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", input.value, input.valueChange, 1));
 			else if (renderContent) {
 				if (typeof renderContent != "function") throw Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
-				renderer === "select" && ("value" in input || "valueChange" in input) ? _attr_select_value(branchId, "a", input.value, input.valueChange, renderContent) : _dynamic_tag(branchId, "a", renderContent, void 0, 0, void 0, serializeReason);
+				renderer === "select" && ("value" in input || "valueChange" in input) ? _attr_select_value(branchId, "a", input.value, input.valueChange, renderContent, 1) : _dynamic_tag(branchId, "a", renderContent, void 0, 0, void 0, serializeReason);
 			}
 			_html(`</${renderer}>`);
 		}
@@ -1614,21 +1614,21 @@ function _attr_option_value(value) {
 	let valueAttr = _attr("value", value);
 	return normalizedValueMatches(getContext(kSelectedValue), value) ? valueAttr + " selected" : valueAttr;
 }
-function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
-	valueChange && writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange), content && withContext(kSelectedValue, value, content);
+function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content, serializeType) {
+	valueChange && writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange, serializeType), content && withContext(kSelectedValue, value, content);
 }
-function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange), _escape(value);
+function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType), _escape(value);
 }
-function _attr_input_value(scopeId, nodeAccessor, value, valueChange) {
-	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange), _attr("value", value);
+function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType), _attr("value", value);
 }
-function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-	return checkedChange && writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange), isNotVoid(checked) ? " checked" : "";
+function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange, serializeType) {
+	return checkedChange && writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange, serializeType), isNotVoid(checked) ? " checked" : "";
 }
-function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value, serializeType) {
 	let valueAttr = _attr("value", value);
-	return checkedValueChange && writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange), normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
+	return checkedValueChange && writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange, serializeType), normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
 }
 function getCheckedValueRef(checkedValue) {
 	if (Array.isArray(checkedValue)) {
@@ -1636,9 +1636,9 @@ function getCheckedValueRef(checkedValue) {
 		return ref || (ref = [], checkedValuesRefs.set(checkedValue, ref)), ref;
 	}
 }
-function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange) {
+function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, serializeType) {
 	let normalizedOpen = isNotVoid(open);
-	return openChange && writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange), normalizedOpen ? " open" : "";
+	return openChange && writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange, serializeType), normalizedOpen ? " open" : "";
 }
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
@@ -1650,9 +1650,9 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	let result = "", skip = /[\s/>"'=]/, events;
 	switch (tagName) {
 		case "input":
-			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange);
-			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value);
-			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange);
+			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange, 1);
+			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
+			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 			else break;
 			skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			break;
@@ -1665,7 +1665,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 			break;
 		case "details":
 		case "dialog":
-			data.openChange && (result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange), skip = /^open(?:Change)?$|[\s/>"'=]/);
+			data.openChange && (result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange, 1), skip = /^open(?:Change)?$|[\s/>"'=]/);
 			break;
 	}
 	for (let name in data) {
@@ -1698,11 +1698,14 @@ function _attrs_partial(data, skip, nodeAccessor, scopeId, tagName) {
 function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, serializeReason) {
 	_html(`${_attrs_partial(data, skip, nodeAccessor, scopeId, tagName)}>`), _attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
-function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
-	writeScope(scopeId, {
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
+	writeScope(scopeId, serializeType ? {
 		["F" + nodeAccessor]: type,
 		["G" + nodeAccessor]: value,
 		["E" + nodeAccessor]: valueChange
+	} : {
+		["G" + nodeAccessor]: value,
+		["E" + nodeAccessor]: valueChange
 	});
 }
 function stringAttr(name, value) {

package/dist/html.mjs

@@ -247,10 +247,10 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 		let input = (inputIsArgs ? inputOrArgs[0] : inputOrArgs) || {};
 		if (rendered = !0, _scope_id(), _html(`<${renderer}${_attrs(input, "a", branchId, renderer)}>`), !voidElementsReg.test(renderer)) {
 			let renderContent = content || normalizeDynamicRenderer(input.content);
-			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", input.value, input.valueChange));
+			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", input.value, input.valueChange, 1));
 			else if (renderContent) {
 				if (typeof renderContent != "function") throw Error(`Body content is not supported for the \`<${renderer}>\` tag.`);
-				renderer === "select" && ("value" in input || "valueChange" in input) ? _attr_select_value(branchId, "a", input.value, input.valueChange, renderContent) : _dynamic_tag(branchId, "a", renderContent, void 0, 0, void 0, serializeReason);
+				renderer === "select" && ("value" in input || "valueChange" in input) ? _attr_select_value(branchId, "a", input.value, input.valueChange, renderContent, 1) : _dynamic_tag(branchId, "a", renderContent, void 0, 0, void 0, serializeReason);
 			}
 			_html(`</${renderer}>`);
 		}
@@ -1613,21 +1613,21 @@ function _attr_option_value(value) {
 	let valueAttr = _attr("value", value);
 	return normalizedValueMatches(getContext(kSelectedValue), value) ? valueAttr + " selected" : valueAttr;
 }
-function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
-	valueChange && writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange), content && withContext(kSelectedValue, value, content);
+function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content, serializeType) {
+	valueChange && writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange, serializeType), content && withContext(kSelectedValue, value, content);
 }
-function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange), _escape(value);
+function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType), _escape(value);
 }
-function _attr_input_value(scopeId, nodeAccessor, value, valueChange) {
-	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange), _attr("value", value);
+function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	return valueChange && writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType), _attr("value", value);
 }
-function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-	return checkedChange && writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange), isNotVoid(checked) ? " checked" : "";
+function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange, serializeType) {
+	return checkedChange && writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange, serializeType), isNotVoid(checked) ? " checked" : "";
 }
-function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value, serializeType) {
 	let valueAttr = _attr("value", value);
-	return checkedValueChange && writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange), normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
+	return checkedValueChange && writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange, serializeType), normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
 }
 function getCheckedValueRef(checkedValue) {
 	if (Array.isArray(checkedValue)) {
@@ -1635,9 +1635,9 @@ function getCheckedValueRef(checkedValue) {
 		return ref || (ref = [], checkedValuesRefs.set(checkedValue, ref)), ref;
 	}
 }
-function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange) {
+function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, serializeType) {
 	let normalizedOpen = isNotVoid(open);
-	return openChange && writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange), normalizedOpen ? " open" : "";
+	return openChange && writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange, serializeType), normalizedOpen ? " open" : "";
 }
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
@@ -1649,9 +1649,9 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	let result = "", skip = /[\s/>"'=]/, events;
 	switch (tagName) {
 		case "input":
-			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange);
-			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value);
-			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange);
+			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange, 1);
+			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
+			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 			else break;
 			skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			break;
@@ -1664,7 +1664,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 			break;
 		case "details":
 		case "dialog":
-			data.openChange && (result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange), skip = /^open(?:Change)?$|[\s/>"'=]/);
+			data.openChange && (result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange, 1), skip = /^open(?:Change)?$|[\s/>"'=]/);
 			break;
 	}
 	for (let name in data) {
@@ -1697,11 +1697,14 @@ function _attrs_partial(data, skip, nodeAccessor, scopeId, tagName) {
 function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, serializeReason) {
 	_html(`${_attrs_partial(data, skip, nodeAccessor, scopeId, tagName)}>`), _attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
-function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
-	writeScope(scopeId, {
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
+	writeScope(scopeId, serializeType ? {
 		["F" + nodeAccessor]: type,
 		["G" + nodeAccessor]: value,
 		["E" + nodeAccessor]: valueChange
+	} : {
+		["G" + nodeAccessor]: value,
+		["E" + nodeAccessor]: valueChange
 	});
 }
 function stringAttr(name, value) {

package/dist/translator/index.js

@@ -1348,7 +1348,6 @@ function analyzeTagNameType(tag, allowDynamic) {
 				extra.tagNameType = 2;
 				extra.tagNameDynamic = true;
 				extra.featureType = "class";
-				((0, _marko_compiler_babel_utils.getProgram)().node.extra ??= {}).needsCompat = true;
 			} else if (!childFile) {
 				extra.tagNameType = 2;
 				extra.tagNameDynamic = true;
@@ -2018,25 +2017,25 @@ function _attr_option_value(value) {
 	return valueAttr;
 }
 const kSelectedValue = Symbol("selectedValue");
-function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
-	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content, serializeType) {
+	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	if (content) withContext(kSelectedValue, value, content);
 }
-function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _escape(value);
 }
-function _attr_input_value(scopeId, nodeAccessor, value, valueChange) {
-	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
+function _attr_input_value(scopeId, nodeAccessor, value, valueChange, serializeType) {
+	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange, serializeType);
 	return _attr("value", value);
 }
-function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange);
+function _attr_input_checked(scopeId, nodeAccessor, checked, checkedChange, serializeType) {
+	if (checkedChange) writeControlledScope(0, scopeId, nodeAccessor, void 0, checkedChange, serializeType);
 	return isNotVoid(checked) ? " checked" : "";
 }
-function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value, serializeType) {
 	const valueAttr = _attr("value", value);
-	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange);
+	if (checkedValueChange) writeControlledScope(1, scopeId, nodeAccessor, getCheckedValueRef(checkedValue), checkedValueChange, serializeType);
 	return normalizedValueMatches(checkedValue, value) ? valueAttr + " checked" : valueAttr;
 }
 const checkedValuesRefs = /* @__PURE__ */ new WeakMap();
@@ -2050,9 +2049,9 @@ function getCheckedValueRef(checkedValue) {
 		return ref;
 	}
 }
-function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange) {
+function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, serializeType) {
 	const normalizedOpen = isNotVoid(open);
-	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange);
+	if (openChange) writeControlledScope(4, scopeId, nodeAccessor, normalizedOpen || void 0, openChange, serializeType);
 	return normalizedOpen ? " open" : "";
 }
 function _attr(name, value) {
@@ -2064,9 +2063,9 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	let events;
 	switch (tagName) {
 		case "input":
-			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange);
-			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value);
-			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange);
+			if (data.checkedChange) result += _attr_input_checked(scopeId, nodeAccessor, data.checked, data.checkedChange, 1);
+			else if ("checkedValue" in data || data.checkedValueChange) result += _attr_input_checkedValue(scopeId, nodeAccessor, data.checkedValue, data.checkedValueChange, data.value, 1);
+			else if (data.valueChange) result += _attr_input_value(scopeId, nodeAccessor, data.value, data.valueChange, 1);
 			else break;
 			skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
 			break;
@@ -2083,7 +2082,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 		case "details":
 		case "dialog":
 			if (data.openChange) {
-				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange);
+				result += _attr_details_or_dialog_open(scopeId, nodeAccessor, data.open, data.openChange, 1);
 				skip = /^open(?:Change)?$|[\s/>"'=]/;
 			}
 			break;
@@ -2110,11 +2109,14 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 	}
 	return result;
 }
-function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
-	writeScope(scopeId, {
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange, serializeType) {
+	writeScope(scopeId, serializeType ? {
 		["ControlledType:" + nodeAccessor]: type,
 		["ControlledValue:" + nodeAccessor]: value,
 		["ControlledHandler:" + nodeAccessor]: valueChange
+	} : {
+		["ControlledValue:" + nodeAccessor]: value,
+		["ControlledHandler:" + nodeAccessor]: valueChange
 	});
 }
 function stringAttr(name, value) {
@@ -2176,10 +2178,10 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 		_html(`<${renderer}${_attrs(input, "a", branchId, renderer)}>`);
 		if (!voidElementsReg.test(renderer)) {
 			const renderContent = content || normalizeDynamicRenderer(input.content);
-			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", input.value, input.valueChange));
+			if (renderer === "textarea") _html(_attr_textarea_value(branchId, "a", 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, "a", input.value, input.valueChange, renderContent);
+				if (renderer === "select" && ("value" in input || "valueChange" in input)) _attr_select_value(branchId, "a", input.value, input.valueChange, renderContent, 1);
 				else _dynamic_tag(branchId, "a", renderContent, void 0, 0, void 0, serializeReason);
 			}
 			_html(`</${renderer}>`);
@@ -4419,7 +4421,8 @@ var native_tag_default = {
 						tag.insertBefore(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(spreadIdentifier, spreadExpression)]));
 						htmlSelectArgs.set(tag.node, {
 							value: _marko_compiler.types.memberExpression(spreadIdentifier, _marko_compiler.types.identifier("value")),
-							valueChange: _marko_compiler.types.memberExpression(spreadIdentifier, _marko_compiler.types.identifier("valueChange"))
+							valueChange: _marko_compiler.types.memberExpression(spreadIdentifier, _marko_compiler.types.identifier("valueChange")),
+							serializeType: _marko_compiler.types.numericLiteral(1)
 						});
 						spreadExpression = spreadIdentifier;
 					}
@@ -4436,7 +4439,7 @@ var native_tag_default = {
 						valueChange = _marko_compiler.types.memberExpression(spreadIdentifier, _marko_compiler.types.identifier("valueChange"));
 						spreadExpression = spreadIdentifier;
 					}
-					if (valueChange) writeAtStartOfBody = callRuntime("_attr_textarea_value", getScopeIdIdentifier(tagSection), visitAccessor, value, valueChange);
+					if (valueChange) writeAtStartOfBody = callRuntime("_attr_textarea_value", getScopeIdIdentifier(tagSection), visitAccessor, value, valueChange, staticControllable ? void 0 : _marko_compiler.types.numericLiteral(1));
 					else if (value) writeAtStartOfBody = callRuntime("_escape", value);
 				}
 				for (const attr of staticAttrs) {
@@ -4496,7 +4499,7 @@ var native_tag_default = {
 				if (selectArgs) {
 					if (!tagExtra[kSkipEndTag]) write`</${tagName}>`;
 					flushInto(tag);
-					tag.insertBefore(_marko_compiler.types.expressionStatement(callRuntime("_attr_select_value", getScopeIdIdentifier(tagSection), nodeBinding && getScopeAccessorLiteral(nodeBinding), selectArgs.value, selectArgs.valueChange, _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement(tag.node.body.body)))));
+					tag.insertBefore(_marko_compiler.types.expressionStatement(callRuntime("_attr_select_value", getScopeIdIdentifier(tagSection), nodeBinding && getScopeAccessorLiteral(nodeBinding), selectArgs.value, selectArgs.valueChange, _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement(tag.node.body.body)), selectArgs.serializeType)));
 				} else if (isTextOnly) {
 					for (const child of tag.node.body.body) if (_marko_compiler.types.isMarkoText(child)) write`${child.value}`;
 					else if (_marko_compiler.types.isMarkoPlaceholder(child)) write`${callRuntime(getTextOnlyEscapeHelper(tagName), child.value)}`;
@@ -8770,12 +8773,28 @@ var dynamic_tag_default = {
 			const tagExtra = node.extra;
 			const nodeBinding = tagExtra[kDOMBinding];
 			const isClassAPI = tagExtra.featureType === "class";
+			const tagsSerializeReason = getSerializeReason(tagSection, nodeBinding);
+			const serializeReason = tagsSerializeReason;
 			let tagExpression = node.name;
-			if (_marko_compiler.types.isStringLiteral(tagExpression)) tagExpression = (0, _marko_compiler_babel_utils.importDefault)(tag.hub.file, getTagRelativePath(tag), tagExpression.value);
-			if (isClassAPI) if ((0, _marko_compiler_babel_utils.getTagTemplate)(tag)) {
-				if (getSerializeReason(tagSection, nodeBinding)) if (isOutputHTML()) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.markoScriptlet([_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression((0, _marko_compiler_babel_utils.importNamed)(tag.hub.file, getCompatRuntimeFile(), "s"), [_marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.loadFileForTag)(tag).metadata.marko.id), _marko_compiler.types.identifier(tagExpression.name)]))], true));
-				else (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.expressionStatement(callRuntime("_resume", _marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.loadFileForTag)(tag).metadata.marko.id), _marko_compiler.types.identifier(tagExpression.name))));
-			} else (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.markoScriptlet([_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("??=", _marko_compiler.types.memberExpression(_marko_compiler.types.identifier(tagExpression.name), _marko_compiler.types.identifier("_")), _marko_compiler.types.identifier(tagExpression.name)))], true));
+			if (isClassAPI) {
+				const classTagTemplate = (0, _marko_compiler_babel_utils.getTagTemplate)(tag);
+				const classFile = classTagTemplate ? (0, _marko_compiler_babel_utils.loadFileForTag)(tag) : void 0;
+				const classHydration = classFile?.metadata.marko.classHydration;
+				if (!isOutputHTML() && isOptimize() && classTagTemplate && !tagsSerializeReason && !classHydration) {
+					tag.remove();
+					return;
+				}
+				((0, _marko_compiler_babel_utils.getProgram)().node.extra ??= {}).needsCompat = true;
+				if (_marko_compiler.types.isStringLiteral(tagExpression)) tagExpression = (0, _marko_compiler_babel_utils.importDefault)(tag.hub.file, getTagRelativePath(tag), tagExpression.value);
+				if (classTagTemplate) {
+					const preserveBoundary = !tagsSerializeReason && (classHydration === "descendant" || classHydration === "self" && !!classFile?.metadata.marko.hasComponentBrowser);
+					if (isOutputHTML() ? serializeReason || classHydration : serializeReason) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(isOutputHTML() ? _marko_compiler.types.markoScriptlet([_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression((0, _marko_compiler_babel_utils.importNamed)(tag.hub.file, getCompatRuntimeFile(), "s"), [
+						_marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.loadFileForTag)(tag).metadata.marko.id),
+						_marko_compiler.types.identifier(tagExpression.name),
+						...preserveBoundary ? [_marko_compiler.types.stringLiteral("preserve")] : []
+					]))], true) : _marko_compiler.types.expressionStatement(callRuntime("_resume", _marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.loadFileForTag)(tag).metadata.marko.id), _marko_compiler.types.identifier(tagExpression.name))));
+				} else (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.markoScriptlet([_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("??=", _marko_compiler.types.memberExpression(_marko_compiler.types.identifier(tagExpression.name), _marko_compiler.types.identifier("_")), _marko_compiler.types.identifier(tagExpression.name)))], true));
+			} else if (_marko_compiler.types.isStringLiteral(tagExpression)) tagExpression = (0, _marko_compiler_babel_utils.importDefault)(tag.hub.file, getTagRelativePath(tag), tagExpression.value);
 			const { properties, statements } = translateAttrs(tag, void 0, void 0, void 0, isClassAPI ? "renderBody" : "content");
 			const args = [];
 			let hasTagArgs = false;
@@ -8793,7 +8812,7 @@ var dynamic_tag_default = {
 			if (isOutputHTML()) {
 				flushInto(tag);
 				writeHTMLResumeStatements(tag.get("body"));
-				const serializeArg = getSerializeGuard(tagSection, getSerializeReason(tagSection, nodeBinding), true);
+				const serializeArg = getSerializeGuard(tagSection, serializeReason, true);
 				const dynamicTagExpr = hasTagArgs ? callRuntime("_dynamic_tag", getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), tagExpression, _marko_compiler.types.arrayExpression(args), _marko_compiler.types.numericLiteral(0), _marko_compiler.types.numericLiteral(1), serializeArg) : callRuntime("_dynamic_tag", getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), tagExpression, args[0], args[1] || (serializeArg ? _marko_compiler.types.numericLiteral(0) : void 0), serializeArg ? _marko_compiler.types.numericLiteral(0) : void 0, serializeArg);
 				if (node.var) {
 					const dynamicScopeIdentifier = generateUidIdentifier(tag.get("name").toString() + "_scope");
@@ -8826,7 +8845,7 @@ var dynamic_tag_default = {
 					const argsOrInput = hasTagArgs ? _marko_compiler.types.arrayExpression(args) : args[0];
 					if (!_marko_compiler.types.isObjectExpression(argsOrInput) || argsOrInput.properties.length) signal.extraArgs = [_marko_compiler.types.arrowFunctionExpression([], statements.length ? _marko_compiler.types.blockStatement(statements.concat(_marko_compiler.types.returnStatement(argsOrInput))) : argsOrInput)];
 				}
-				enableDynamicTagResume(tag);
+				if (!isClassAPI) enableDynamicTagResume(tag);
 				addValue(section, tagExtra.referencedBindings, signal, tagExpression);
 				tag.remove();
 			}

package/dist/translator/visitors/tag/dynamic-tag.d.ts

@@ -3,6 +3,16 @@ import { type Binding } from "../../util/references";
 import { type Section } from "../../util/sections";
 declare const kDOMBinding: unique symbol;
 declare const kChildOffsetScopeBinding: unique symbol;
+declare enum ClassHydration {
+    Self = "self",
+    Descendant = "descendant"
+}
+declare module "@marko/compiler" {
+    interface MarkoMeta {
+        classHydration?: ClassHydration;
+        hasComponentBrowser?: boolean;
+    }
+}
 declare module "@marko/compiler/dist/types" {
     interface MarkoTagExtra {
         [kDOMBinding]?: Binding;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marko/runtime-tags",
-  "version": "6.1.17",
+  "version": "6.1.19",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",