marko 6.3.34 → 6.3.36

package/cheatsheet.md

@@ -13,8 +13,8 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
    - remove: `items = items.toSpliced(i, 1)`
    - update: `items = items.toSpliced(i, 1, { ...item, done: true })`
    - object: `user = { ...user, name }`
-6. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handlers receive `(event, element)`; delegation means the element is the second parameter, not `event.currentTarget`: `onSubmit(e) { e.preventDefault(); save() }`, `onClick(e, el) { el.focus() }`. Don't sync input values through `onInput`/`onChange`; that's what the change handlers below are for.
-7. Native inputs are uncontrolled by default: `value=` only sets the initial value. Adding the matching `*Change` handler is what makes them controlled: `valueChange` on `<input>`/`<textarea>`/`<select>`, `checkedChange` on checkboxes/radios, `openChange` on `<details>`/`<dialog>`. `value:=text` is the shorthand for `value=text valueChange(v) { text = v }`. (`<textarea value:=text/>`: value attribute, not body.)
+6. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handlers receive `(event, element)`; delegation means the element is the second parameter, not `event.currentTarget`: `onSubmit(e) { e.preventDefault(); save() }`, `onClick(e, el) { el.focus() }`. Don't sync input values through `onInput`/`onChange`; that's what the change handlers below are for. Prefix with `async` to `await` in the body: `async onClick() { await save() }`.
+7. Native inputs are uncontrolled by default: `value=` sets the default value — later writes update what `form.reset()` restores, never a dirty field's display. Adding the matching `*Change` handler is what makes them controlled: `valueChange` on `<input>`/`<textarea>`/`<select>`, `checkedChange` on checkboxes/radios, `openChange` on `<details>`/`<dialog>`. `value:=text` is the shorthand for `value=text valueChange(v) { text = v }`. (`<textarea value:=text/>`: value attribute, not body.)
 8. Transform in the handler when needed; number inputs give strings: `<input type="number" value=n valueChange(v) { n = +v }>`, or `value:parseFloat:=n`.
 9. Radio/checkbox groups: `checkedValue:=picked` on each input (shared var, distinct `value=`); the match is checked; array var for multi-checkbox. Dropdown: `<select value:=picked>`.
 10. Module-level values and helpers need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`. Without it `function fmt(n) {` parses as a tag: ``Unable to find entry point for custom tag `<function>` ``, an error that never says `static`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` emits a per-instance signal plus a `$setup` call.

package/dist/common/constants/accessor-prefix.d.ts

@@ -8,6 +8,7 @@ export declare const ControlledType = "F";
 export declare const ControlledValue = "G";
 export declare const DynamicHTMLLastChild = "H";
 export declare const EventAttributes = "I";
+export declare const IdFallback = "J";
 export declare const KeyedScopes = "O";
 export declare const Lifecycle = "K";
 export declare const Promise = "L";

package/dist/common/constants/accessor-prefix.debug.d.ts

@@ -8,6 +8,7 @@ export declare const ControlledType = "ControlledType:";
 export declare const ControlledValue = "ControlledValue:";
 export declare const DynamicHTMLLastChild = "DynamicHTMLLastChild:";
 export declare const EventAttributes = "EventAttributes:";
+export declare const IdFallback = "IdFallback:";
 export declare const KeyedScopes = "KeyedScopes:";
 export declare const Lifecycle = "Lifecycle:";
 export declare const Promise = "Promise:";

package/dist/common/errors.d.ts

@@ -9,6 +9,7 @@ export declare function _el_read_error(): void;
 export declare function _hoist_read_error(): void;
 export declare function _assert_hoist(value: unknown): void;
 export declare function assertExclusiveAttrs(attrs: Record<string, unknown> | undefined, onError?: typeof throwErr): void;
+export declare function assertNoValueBindingOnCheckable(type: unknown, valueChange: unknown): void;
 export declare function assertHandlerIsFunction(name: string, value: unknown): void;
 export declare function assertValidTagName(tagName: string): void;
 declare function throwErr(msg: string): void;

package/dist/common/meta.d.ts

@@ -1,3 +1,4 @@
 export declare const DEFAULT_RUNTIME_ID = "M";
 export declare const DEFAULT_RENDER_ID = "_";
 export declare const DYNAMIC_TAG_SCRIPT_REGISTER_ID: string;
+export declare const DYNAMIC_TAG_VAR_REGISTER_ID: string;

package/dist/common/types.d.ts

@@ -73,6 +73,16 @@ export interface MountedTemplate {
 }
 export type RenderedTemplate = PromiseLike<string> & AsyncIterable<string> & {
     toReadable(): ReadableStream<Uint8Array<ArrayBufferLike>>;
+    pipe(stream: {
+        write(chunk: string): unknown;
+        end(): unknown;
+        flush?(): void;
+        destroy?(): void;
+        emit?(name: PropertyKey, ...args: unknown[]): unknown;
+    }): void;
+    toString(): string;
+    catch<T = never>(onrejected?: ((reason: unknown) => T | PromiseLike<T>) | undefined | null): Promise<string | T>;
+    finally(onfinally?: (() => void) | undefined | null): Promise<string>;
 };
 type ControlledType = ControlledType.Value;
 export { ControlledType };

package/dist/debug/dom/catch.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

package/dist/debug/dom/catch.feat.mjs

@@ -1,4 +1,4 @@
-import { Cn as PendingRenders, Jt as caughtError, Sn as PendingEffects, Xt as placeholderShown, Yt as installCatch, gn as ClosestBranch, h as renderCatch, mn as Scope, pn as Pending, xn as ParentBranch } from "../dom-klf8Ec_o.mjs";
+import { Cn as ParentBranch, Qt as placeholderShown, Tn as PendingRenders, Xt as caughtError, Zt as installCatch, g as renderCatch, gn as Scope, hn as Pending, vn as ClosestBranch, wn as PendingEffects } from "../dom-ClMc0GK9.mjs";
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 //#region src/dom/controllable-input.feat.ts
 require_control_flow.controllableScripts[0] = require_control_flow._attr_input_checked_script;
 require_control_flow.controllableScripts[1] = require_control_flow._attr_input_checkedValue_script;

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

@@ -1,4 +1,4 @@
-import { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-klf8Ec_o.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-ClMc0GK9.mjs";
 //#region src/dom/controllable-input.feat.ts
 controllableScripts[0] = _attr_input_checked_script;
 controllableScripts[1] = _attr_input_checkedValue_script;

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 //#region src/dom/controllable-open.feat.ts
 require_control_flow.controllableScripts[4] = require_control_flow._attr_details_or_dialog_open_script;
 //#endregion

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

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

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 //#region src/dom/controllable-select.feat.ts
 require_control_flow.controllableScripts[3] = require_control_flow._attr_select_value_script;
 //#endregion

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

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

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 //#region src/dom/controllable-textarea.feat.ts
 require_control_flow.controllableScripts[2] = require_control_flow._attr_input_value_script;
 //#endregion

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

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

package/dist/debug/dom/controllable.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-BbFAdZEB.js");
 require("./controllable-input.feat.js");
 require("./controllable-open.feat.js");
 require("./controllable-select.feat.js");

package/dist/debug/dom/controllable.feat.mjs

@@ -1,4 +1,4 @@
-import { F as _controllable_select, I as _controllable_textarea, L as controllableRenders, N as _controllable_input, P as _controllable_open } from "../dom-klf8Ec_o.mjs";
+import { F as _controllable_open, I as _controllable_select, L as _controllable_textarea, P as _controllable_input, R as controllableRenders } from "../dom-ClMc0GK9.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

package/dist/debug/dom/dynamic-tag-var.feat.js

@@ -0,0 +1,7 @@
+"use strict";
+const require_control_flow = require("../dom-BbFAdZEB.js");
+//#region src/dom/dynamic-tag-var.feat.ts
+const elementGetter = (branch) => () => require_control_flow._el_read(branch[require_control_flow.StartNode]);
+require_control_flow.installDynamicTagVar((branch) => branch[require_control_flow.TagVariable](elementGetter(branch)));
+require_control_flow._resume(require_control_flow.DYNAMIC_TAG_VAR_REGISTER_ID, elementGetter);
+//#endregion

package/dist/debug/dom/dynamic-tag-var.feat.mjs

@@ -0,0 +1,6 @@
+import { Dn as TagVariable, En as StartNode, Et as _el_read, gt as _resume, m as installDynamicTagVar, qt as DYNAMIC_TAG_VAR_REGISTER_ID } from "../dom-ClMc0GK9.mjs";
+//#region src/dom/dynamic-tag-var.feat.ts
+const elementGetter = (branch) => () => _el_read(branch[StartNode]);
+installDynamicTagVar((branch) => branch[TagVariable](elementGetter(branch)));
+_resume(DYNAMIC_TAG_VAR_REGISTER_ID, elementGetter);
+//#endregion

package/dist/debug/{dom-Bj58jt8y.js → dom-BbFAdZEB.js}

@@ -254,10 +254,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}".`);
 }
@@ -440,6 +446,7 @@ function abort(ctrl) {
 //#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
+const DYNAMIC_TAG_VAR_REGISTER_ID = "_dynamicTagVar";
 //#endregion
 //#region src/common/opt.ts
 function toArray(opt) {
@@ -742,10 +749,16 @@ const _var_change = (scope, value, name = "This") => {
 	scope[TagVariableChange](value);
 };
 const tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
-function _id({ [Global]: $global }) {
-	const id = tagIdsByGlobal.get($global) || 0;
-	tagIdsByGlobal.set($global, id + 1);
-	return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+function _id(scope, accessor) {
+	let id = accessor !== void 0 && scope[accessor];
+	if (!id) {
+		const $global = scope[Global];
+		const n = tagIdsByGlobal.get($global) || 0;
+		tagIdsByGlobal.set($global, n + 1);
+		id = "c" + $global.runtimeId + $global.renderId + n.toString(36);
+		if (accessor !== void 0) scope[accessor] = id;
+	}
+	return id;
 }
 function _script(id, fn) {
 	_resume(id, fn);
@@ -757,19 +770,19 @@ function _el_read(value) {
 	if (rendering) _el_read_error();
 	return value;
 }
-function* traverse(scope, path, i = path.length - 1) {
+function* traverse(scope, path, args, i = path.length - 1) {
 	if (rendering) _hoist_read_error();
-	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, i);
+	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, args, i);
 	else {
 		const item = scope[path[i]];
-		if (i) yield* traverse(item, path, i - 1);
-		else yield typeof item === "function" ? item() : item;
+		if (i) yield* traverse(item, path, args, i - 1);
+		else yield typeof item === "function" ? item(...args) : item;
 	}
 }
 function _hoist(...path) {
 	return (scope) => {
-		const fn = () => traverse(scope, path).next().value;
-		fn[Symbol.iterator] = () => traverse(scope, path);
+		const fn = (...args) => traverse(scope, path, args).next().value;
+		fn[Symbol.iterator] = () => traverse(scope, path, []);
 		return fn;
 	};
 }
@@ -1149,7 +1162,7 @@ function _style_shell(scope, nodeAccessor) {
 	const element = scope[nodeAccessor];
 	const id = _id(scope);
 	_attr_nonce(scope, nodeAccessor);
-	element.className = id;
+	_attr(element, "class", id);
 	_text_content(element, "." + id + "~*{}");
 }
 function _style_rule_item(element, name, value) {
@@ -1236,7 +1249,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
 }
 function _attr_content(scope, nodeAccessor, value) {
 	const content = normalizeClientRender(value);
-	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
+	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = rendererKey(content))) {
 		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
 		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
 	}
@@ -1416,17 +1429,19 @@ function _attr_input_value(scope, nodeAccessor, value, valueChange, setDefault =
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
 	assertHandlerIsFunction("valueChange", valueChange);
+	assertNoValueBindingOnCheckable(el.type, valueChange);
 	scope[ControlledHandler + nodeAccessor] = valueChange;
 	scope[ControlledValue + nodeAccessor] = normalizedValue;
 	scope[ControlledType + nodeAccessor] = valueChange ? 2 : 5;
 	if (valueChange && scope["#Gen"] < runId) setInputValue(el, normalizedValue);
-	else setDefault(scope, nodeAccessor, normalizedValue);
+	else setDefault(scope, nodeAccessor, value);
 }
 function _attr_input_value_attribute_default(scope, nodeAccessor, value) {
 	_attr(scope[nodeAccessor], "value", value);
 }
 function _attr_input_value_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
+	assertNoValueBindingOnCheckable(el.type, scope[ControlledHandler + nodeAccessor]);
 	if (isResuming) scope[ControlledValue + nodeAccessor] = el.defaultValue;
 	syncControllableFormInput(el, hasValueChanged, (ev) => {
 		const valueChange = scope[ControlledHandler + nodeAccessor];
@@ -1834,6 +1849,9 @@ const _show = /*@__PURE__*/ withBranches((nodeAccessor, startNodeAccessor, endNo
 		}
 	};
 });
+function rendererKey(renderer) {
+	return renderer?.["owner"] ? renderer["id"] + " " + renderer[Owner]["#Id"] : renderer?.["id"] || renderer;
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1842,9 +1860,12 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, newRenderer, getInput) => {
 		const normalizedRenderer = normalizeDynamicRenderer(newRenderer);
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = normalizedRenderer?.["id"] || normalizedRenderer) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(normalizedRenderer)) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
 			setConditionalRenderer(scope, nodeAccessor, normalizedRenderer || (getContent ? getContent(scope) : void 0), createBranchWithTagNameOrRenderer);
-			if (getTagVar) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			if (getTagVar) if (scope[childScopeAccessor]) {
+				scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+				if (typeof normalizedRenderer === "string") bindNativeTagVar?.(scope[childScopeAccessor]);
+			} else getTagVar()(scope, void 0);
 			if (typeof normalizedRenderer === "string") {
 				if (getContent) {
 					const content = getContent(scope);
@@ -1878,13 +1899,17 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 	const childScopeAccessor = BranchScopes$1 + nodeAccessor;
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, renderer) => {
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = renderer?.["id"] || renderer)) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer))) {
 			setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch);
 			if (renderer?.["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
 		}
 		if (renderer) for (const accessor in renderer[LocalClosures]) renderer[LocalClosures][accessor](scope[childScopeAccessor], renderer[LocalClosureValues][accessor]);
 	};
 });
+let bindNativeTagVar;
+function installDynamicTagVar(bind) {
+	bindNativeTagVar = bind;
+}
 const _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume(DYNAMIC_TAG_SCRIPT_REGISTER_ID, dynamicTagScript));
 function dynamicTagScript(branch) {
 	_attrs_script(branch, `#${branch[Renderer].toLowerCase()}/0`);
@@ -2069,6 +2094,12 @@ Object.defineProperty(exports, "ClosestBranch", {
 		return ClosestBranch;
 	}
 });
+Object.defineProperty(exports, "DYNAMIC_TAG_VAR_REGISTER_ID", {
+	enumerable: true,
+	get: function() {
+		return DYNAMIC_TAG_VAR_REGISTER_ID;
+	}
+});
 Object.defineProperty(exports, "EndNode", {
 	enumerable: true,
 	get: function() {
@@ -2753,6 +2784,12 @@ Object.defineProperty(exports, "installCatch", {
 		return installCatch;
 	}
 });
+Object.defineProperty(exports, "installDynamicTagVar", {
+	enumerable: true,
+	get: function() {
+		return installDynamicTagVar;
+	}
+});
 Object.defineProperty(exports, "patchDynamicTag", {
 	enumerable: true,
 	get: function() {

package/dist/debug/{dom-klf8Ec_o.mjs → dom-ClMc0GK9.mjs}

@@ -253,10 +253,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}".`);
 }
@@ -439,6 +445,7 @@ function abort(ctrl) {
 //#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
+const DYNAMIC_TAG_VAR_REGISTER_ID = "_dynamicTagVar";
 //#endregion
 //#region src/common/opt.ts
 function toArray(opt) {
@@ -741,10 +748,16 @@ const _var_change = (scope, value, name = "This") => {
 	scope[TagVariableChange](value);
 };
 const tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
-function _id({ [Global]: $global }) {
-	const id = tagIdsByGlobal.get($global) || 0;
-	tagIdsByGlobal.set($global, id + 1);
-	return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+function _id(scope, accessor) {
+	let id = accessor !== void 0 && scope[accessor];
+	if (!id) {
+		const $global = scope[Global];
+		const n = tagIdsByGlobal.get($global) || 0;
+		tagIdsByGlobal.set($global, n + 1);
+		id = "c" + $global.runtimeId + $global.renderId + n.toString(36);
+		if (accessor !== void 0) scope[accessor] = id;
+	}
+	return id;
 }
 function _script(id, fn) {
 	_resume(id, fn);
@@ -756,19 +769,19 @@ function _el_read(value) {
 	if (rendering) _el_read_error();
 	return value;
 }
-function* traverse(scope, path, i = path.length - 1) {
+function* traverse(scope, path, args, i = path.length - 1) {
 	if (rendering) _hoist_read_error();
-	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, i);
+	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, args, i);
 	else {
 		const item = scope[path[i]];
-		if (i) yield* traverse(item, path, i - 1);
-		else yield typeof item === "function" ? item() : item;
+		if (i) yield* traverse(item, path, args, i - 1);
+		else yield typeof item === "function" ? item(...args) : item;
 	}
 }
 function _hoist(...path) {
 	return (scope) => {
-		const fn = () => traverse(scope, path).next().value;
-		fn[Symbol.iterator] = () => traverse(scope, path);
+		const fn = (...args) => traverse(scope, path, args).next().value;
+		fn[Symbol.iterator] = () => traverse(scope, path, []);
 		return fn;
 	};
 }
@@ -1148,7 +1161,7 @@ function _style_shell(scope, nodeAccessor) {
 	const element = scope[nodeAccessor];
 	const id = _id(scope);
 	_attr_nonce(scope, nodeAccessor);
-	element.className = id;
+	_attr(element, "class", id);
 	_text_content(element, "." + id + "~*{}");
 }
 function _style_rule_item(element, name, value) {
@@ -1235,7 +1248,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
 }
 function _attr_content(scope, nodeAccessor, value) {
 	const content = normalizeClientRender(value);
-	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
+	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = rendererKey(content))) {
 		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
 		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
 	}
@@ -1415,17 +1428,19 @@ function _attr_input_value(scope, nodeAccessor, value, valueChange, setDefault =
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
 	assertHandlerIsFunction("valueChange", valueChange);
+	assertNoValueBindingOnCheckable(el.type, valueChange);
 	scope[ControlledHandler + nodeAccessor] = valueChange;
 	scope[ControlledValue + nodeAccessor] = normalizedValue;
 	scope[ControlledType + nodeAccessor] = valueChange ? 2 : 5;
 	if (valueChange && scope["#Gen"] < runId) setInputValue(el, normalizedValue);
-	else setDefault(scope, nodeAccessor, normalizedValue);
+	else setDefault(scope, nodeAccessor, value);
 }
 function _attr_input_value_attribute_default(scope, nodeAccessor, value) {
 	_attr(scope[nodeAccessor], "value", value);
 }
 function _attr_input_value_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
+	assertNoValueBindingOnCheckable(el.type, scope[ControlledHandler + nodeAccessor]);
 	if (isResuming) scope[ControlledValue + nodeAccessor] = el.defaultValue;
 	syncControllableFormInput(el, hasValueChanged, (ev) => {
 		const valueChange = scope[ControlledHandler + nodeAccessor];
@@ -1833,6 +1848,9 @@ const _show = /*@__PURE__*/ withBranches((nodeAccessor, startNodeAccessor, endNo
 		}
 	};
 });
+function rendererKey(renderer) {
+	return renderer?.["owner"] ? renderer["id"] + " " + renderer[Owner]["#Id"] : renderer?.["id"] || renderer;
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1841,9 +1859,12 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, newRenderer, getInput) => {
 		const normalizedRenderer = normalizeDynamicRenderer(newRenderer);
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = normalizedRenderer?.["id"] || normalizedRenderer) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(normalizedRenderer)) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
 			setConditionalRenderer(scope, nodeAccessor, normalizedRenderer || (getContent ? getContent(scope) : void 0), createBranchWithTagNameOrRenderer);
-			if (getTagVar) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			if (getTagVar) if (scope[childScopeAccessor]) {
+				scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+				if (typeof normalizedRenderer === "string") bindNativeTagVar?.(scope[childScopeAccessor]);
+			} else getTagVar()(scope, void 0);
 			if (typeof normalizedRenderer === "string") {
 				if (getContent) {
 					const content = getContent(scope);
@@ -1877,13 +1898,17 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 	const childScopeAccessor = BranchScopes$1 + nodeAccessor;
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, renderer) => {
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = renderer?.["id"] || renderer)) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer))) {
 			setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch);
 			if (renderer?.["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
 		}
 		if (renderer) for (const accessor in renderer[LocalClosures]) renderer[LocalClosures][accessor](scope[childScopeAccessor], renderer[LocalClosureValues][accessor]);
 	};
 });
+let bindNativeTagVar;
+function installDynamicTagVar(bind) {
+	bindNativeTagVar = bind;
+}
 const _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume(DYNAMIC_TAG_SCRIPT_REGISTER_ID, dynamicTagScript));
 function dynamicTagScript(branch) {
 	_attrs_script(branch, `#${branch[Renderer].toLowerCase()}/0`);
@@ -2038,4 +2063,4 @@ function byFirstArg(name) {
 	return name;
 }
 //#endregion
-export { _html as $, queueEffect as $t, _attr_select_value as A, _id as At, _attr_class as B, _assert_init as Bt, _attr_input_checked_default as C, PendingRenders as Cn, _closure_get as Ct, _attr_input_value_default as D, _for_selector as Dt, _attr_input_value_attribute_default as E, _for_closure as Et, _controllable_select as F, _return as Ft, _attr_style as G, _on as Gt, _attr_class_items as H, insertBranchBefore as Ht, _controllable_textarea as I, _return_change as It, _attrs as J, caughtError as Jt, _attr_style_item as K, $signal as Kt, controllableRenders as L, _script as Lt, _attr_select_value_script as M, _let as Mt, _controllable_input as N, _let_change as Nt, _attr_input_value_dynamic_default as O, _hoist as Ot, _controllable_open as P, _or as Pt, _attrs_script as Q, queueAsyncRender as Qt, controllableScripts as R, _var as Rt, _attr_input_checkedValue_script as S, PendingEffects as Sn, _closure as St, _attr_input_value as T, TagVariable as Tn, _el_read as Tt, _attr_content as U, removeAndDestroyBranch as Ut, _attr_class_item as V, destroyBranch as Vt, _attr_nonce as W, syncGen as Wt, _attrs_partial as X, placeholderShown as Xt, _attrs_content as Y, installCatch as Yt, _attrs_partial_content as Z, prepareEffects as Zt, _attr_details_or_dialog_open_default as _, EndNode as _n, getRegisteredWithScope as _t, _for_in as a, forTo as an, _to_text as at, _attr_input_checkedValue as b, Load as bn, ready as bt, _for_until as c, _call as cn, _content as ct, _show as d, Params as dn, createAndSetupBranch as dt, run as en, _lifecycle as et, _try as f, Setup as fn, createBranch as ft, _attr_details_or_dialog_open as g, ClosestBranch as gn, _var_resume as gt, renderCatch as h, AwaitCounter as hn, _resume as ht, _dynamic_tag_content as i, forOf as in, _text_content as it, _attr_select_value_default as j, _if_closure as jt, _attr_input_value_script as k, _hoist_resume as kt, _if as l, Clone as ln, _content_closures as lt, patchDynamicTag as m, Scope as mn, _el as mt, _await_promise as n, runId as nn, _style_shell as nt, _for_of as o, forUntil as on, insertChildNodes as ot, addAwaitCounter as p, Pending as pn, setupBranch as pt, _attr_style_items as q, $signalReset as qt, _dynamic_tag as r, forIn as rn, _text as rt, _for_to as s, _assert_hoist as sn, toInsertNode as st, _await_content as t, runEffects as tn, _style_rule_item as tt, _resume_dynamic_tag as u, Owner as un, _content_resume as ut, _attr_details_or_dialog_open_script as v, Gen$1 as vn, init as vt, _attr_input_checked_script as w, StartNode as wn, _const as wt, _attr_input_checkedValue_default as x, ParentBranch as xn, _child_setup as xt, _attr_input_checked as y, Global as yn, initEmbedded as yt, _attr as z, _var_change as zt };
+export { _attrs_script as $, prepareEffects as $t, _attr_input_value_script as A, _hoist_resume as At, _attr as B, _var_change as Bt, _attr_input_checkedValue_script as C, ParentBranch as Cn, _closure as Ct, _attr_input_value_attribute_default as D, TagVariable as Dn, _for_closure as Dt, _attr_input_value as E, StartNode as En, _el_read as Et, _controllable_open as F, _or as Ft, _attr_nonce as G, syncGen as Gt, _attr_class_item as H, destroyBranch as Ht, _controllable_select as I, _return as It, _attr_style_items as J, $signal as Jt, _attr_style as K, _on as Kt, _controllable_textarea as L, _return_change as Lt, _attr_select_value_default as M, _if_closure as Mt, _attr_select_value_script as N, _let as Nt, _attr_input_value_default as O, _for_selector as Ot, _controllable_input as P, _let_change as Pt, _attrs_partial_content as Q, placeholderShown as Qt, controllableRenders as R, _script as Rt, _attr_input_checkedValue_default as S, Load as Sn, _child_setup as St, _attr_input_checked_script as T, PendingRenders as Tn, _const as Tt, _attr_class_items as U, insertBranchBefore as Ut, _attr_class as V, _assert_init as Vt, _attr_content as W, removeAndDestroyBranch as Wt, _attrs_content as X, caughtError as Xt, _attrs as Y, $signalReset as Yt, _attrs_partial as Z, installCatch as Zt, _attr_details_or_dialog_open as _, AwaitCounter as _n, _var_resume as _t, _for_in as a, forIn as an, _text_content as at, _attr_input_checked as b, Gen$1 as bn, initEmbedded as bt, _for_until as c, forUntil as cn, toInsertNode as ct, _show as d, Clone as dn, _content_resume as dt, queueAsyncRender as en, _html as et, _try as f, Owner as fn, createAndSetupBranch as ft, renderCatch as g, Scope as gn, _resume as gt, patchDynamicTag as h, Pending as hn, _el as ht, _dynamic_tag_content as i, runId as in, _text as it, _attr_select_value as j, _id as jt, _attr_input_value_dynamic_default as k, _hoist as kt, _if as l, _assert_hoist as ln, _content as lt, installDynamicTagVar as m, Setup as mn, setupBranch as mt, _await_promise as n, run as nn, _style_rule_item as nt, _for_of as o, forOf as on, _to_text as ot, addAwaitCounter as p, Params as pn, createBranch as pt, _attr_style_item as q, DYNAMIC_TAG_VAR_REGISTER_ID as qt, _dynamic_tag as r, runEffects as rn, _style_shell as rt, _for_to as s, forTo as sn, insertChildNodes as st, _await_content as t, queueEffect as tn, _lifecycle as tt, _resume_dynamic_tag as u, _call as un, _content_closures as ut, _attr_details_or_dialog_open_default as v, ClosestBranch as vn, getRegisteredWithScope as vt, _attr_input_checked_default as w, PendingEffects as wn, _closure_get as wt, _attr_input_checkedValue as x, Global as xn, ready as xt, _attr_details_or_dialog_open_script as y, EndNode as yn, init as yt, controllableScripts as z, _var as zt };

package/dist/debug/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_control_flow = require("./dom-Bj58jt8y.js");
+const require_control_flow = require("./dom-BbFAdZEB.js");
 //#region src/common/attr-tag.ts
 const empty = [];
 const rest = Symbol("Attribute Tag");

package/dist/debug/dom.mjs

@@ -1,4 +1,4 @@
-import { $ as _html, $t as queueEffect, A as _attr_select_value, At as _id, B as _attr_class, Bt as _assert_init, C as _attr_input_checked_default, Ct as _closure_get, D as _attr_input_value_default, Dt as _for_selector, E as _attr_input_value_attribute_default, Et as _for_closure, F as _controllable_select, Ft as _return, G as _attr_style, Gt as _on, H as _attr_class_items, Ht as insertBranchBefore, I as _controllable_textarea, It as _return_change, J as _attrs, K as _attr_style_item, Kt as $signal, Lt as _script, M as _attr_select_value_script, Mt as _let, N as _controllable_input, Nt as _let_change, O as _attr_input_value_dynamic_default, Ot as _hoist, P as _controllable_open, Pt as _or, Q as _attrs_script, Qt as queueAsyncRender, Rt as _var, S as _attr_input_checkedValue_script, St as _closure, T as _attr_input_value, Tn as TagVariable, Tt as _el_read, U as _attr_content, Ut as removeAndDestroyBranch, V as _attr_class_item, Vt as destroyBranch, W as _attr_nonce, Wt as syncGen, X as _attrs_partial, Y as _attrs_content, Z as _attrs_partial_content, Zt as prepareEffects, _ as _attr_details_or_dialog_open_default, _n as EndNode, _t as getRegisteredWithScope, a as _for_in, an as forTo, at as _to_text, b as _attr_input_checkedValue, bn as Load, bt as ready, c as _for_until, cn as _call, ct as _content, d as _show, dn as Params, dt as createAndSetupBranch, en as run, et as _lifecycle, f as _try, fn as Setup, ft as createBranch, g as _attr_details_or_dialog_open, gt as _var_resume, h as renderCatch, ht as _resume, i as _dynamic_tag_content, in as forOf, it as _text_content, j as _attr_select_value_default, jt as _if_closure, k as _attr_input_value_script, kt as _hoist_resume, l as _if, ln as Clone, lt as _content_closures, m as patchDynamicTag, mt as _el, n as _await_promise, nn as runId, nt as _style_shell, o as _for_of, on as forUntil, ot as insertChildNodes, p as addAwaitCounter, pt as setupBranch, q as _attr_style_items, qt as $signalReset, r as _dynamic_tag, rn as forIn, rt as _text, s as _for_to, sn as _assert_hoist, st as toInsertNode, t as _await_content, tn as runEffects, tt as _style_rule_item, u as _resume_dynamic_tag, un as Owner, ut as _content_resume, v as _attr_details_or_dialog_open_script, vt as init, w as _attr_input_checked_script, wn as StartNode, wt as _const, x as _attr_input_checkedValue_default, xt as _child_setup, y as _attr_input_checked, yn as Global, yt as initEmbedded, z as _attr, zt as _var_change } from "./dom-klf8Ec_o.mjs";
+import { $ as _attrs_script, $t as prepareEffects, A as _attr_input_value_script, At as _hoist_resume, B as _attr, Bt as _var_change, C as _attr_input_checkedValue_script, Ct as _closure, D as _attr_input_value_attribute_default, Dn as TagVariable, Dt as _for_closure, E as _attr_input_value, En as StartNode, Et as _el_read, F as _controllable_open, Ft as _or, G as _attr_nonce, Gt as syncGen, H as _attr_class_item, Ht as destroyBranch, I as _controllable_select, It as _return, J as _attr_style_items, Jt as $signal, K as _attr_style, Kt as _on, L as _controllable_textarea, Lt as _return_change, M as _attr_select_value_default, Mt as _if_closure, N as _attr_select_value_script, Nt as _let, O as _attr_input_value_default, Ot as _for_selector, P as _controllable_input, Pt as _let_change, Q as _attrs_partial_content, Rt as _script, S as _attr_input_checkedValue_default, Sn as Load, St as _child_setup, T as _attr_input_checked_script, Tt as _const, U as _attr_class_items, Ut as insertBranchBefore, V as _attr_class, Vt as _assert_init, W as _attr_content, Wt as removeAndDestroyBranch, X as _attrs_content, Y as _attrs, Yt as $signalReset, Z as _attrs_partial, _ as _attr_details_or_dialog_open, _t as _var_resume, a as _for_in, an as forIn, at as _text_content, b as _attr_input_checked, bt as initEmbedded, c as _for_until, cn as forUntil, ct as toInsertNode, d as _show, dn as Clone, dt as _content_resume, en as queueAsyncRender, et as _html, f as _try, fn as Owner, ft as createAndSetupBranch, g as renderCatch, gt as _resume, h as patchDynamicTag, ht as _el, i as _dynamic_tag_content, in as runId, it as _text, j as _attr_select_value, jt as _id, k as _attr_input_value_dynamic_default, kt as _hoist, l as _if, ln as _assert_hoist, lt as _content, mn as Setup, mt as setupBranch, n as _await_promise, nn as run, nt as _style_rule_item, o as _for_of, on as forOf, ot as _to_text, p as addAwaitCounter, pn as Params, pt as createBranch, q as _attr_style_item, r as _dynamic_tag, rn as runEffects, rt as _style_shell, s as _for_to, sn as forTo, st as insertChildNodes, t as _await_content, tn as queueEffect, tt as _lifecycle, u as _resume_dynamic_tag, un as _call, ut as _content_closures, v as _attr_details_or_dialog_open_default, vt as getRegisteredWithScope, w as _attr_input_checked_default, wt as _closure_get, x as _attr_input_checkedValue, xn as Global, xt as ready, y as _attr_details_or_dialog_open_script, yn as EndNode, yt as init, zt as _var } from "./dom-ClMc0GK9.mjs";
 //#region src/common/attr-tag.ts
 const empty = [];
 const rest = Symbol("Attribute Tag");