marko 6.1.23 → 6.2.0

package/dist/dom.d.ts

@@ -4,14 +4,14 @@ export { forIn, forOf, forTo, forUntil } from "./common/for";
 export { _call } from "./common/helpers";
 export { $signal, $signalReset } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
-export { _await_content, _await_promise, _dynamic_tag, _dynamic_tag_content, _for_in, _for_of, _for_to, _for_until, _if, _resume_dynamic_tag, _try, } from "./dom/control-flow";
+export { _await_content, _await_promise, _dynamic_tag, _dynamic_tag_content, _for_in, _for_of, _for_to, _for_until, _if, _resume_dynamic_tag, _show, _try, } from "./dom/control-flow";
 export { _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checked_default, _attr_input_checked_script, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_value, _attr_input_value_default, _attr_input_value_script, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_input_value as _attr_textarea_value, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script as _attr_textarea_value_script, } from "./dom/controllable";
-export { _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_nonce, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _html, _lifecycle, _text, _text_content, _to_text, } from "./dom/dom";
+export { _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_nonce, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _html, _lifecycle, _style_rule_item, _style_shell, _text, _text_content, _to_text, } from "./dom/dom";
 export { _on } from "./dom/event";
 export { _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, } from "./dom/load";
 export { _enable_catch, run } from "./dom/queue";
 export { _content, _content_closures, _content_resume } from "./dom/renderer";
 export { _el, _resume, _var_resume, init, initEmbedded, ready, } from "./dom/resume";
 export { _assert_init } from "./dom/scope";
-export { _child_setup, _closure, _closure_get, _const, _el_read, _for_closure, _hoist, _hoist_resume, _id, _if_closure, _let, _let_change, _or, _return, _return_change, _script, _var, _var_change, } from "./dom/signals";
+export { _child_setup, _closure, _closure_get, _const, _el_read, _for_closure, _for_selector, _hoist, _hoist_resume, _id, _if_closure, _let, _let_change, _or, _return, _return_change, _script, _var, _var_change, } from "./dom/signals";
 export { _template } from "./dom/template";

package/dist/dom.js

@@ -132,6 +132,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};>]|\/(?=\*)/g, "\\$&").replace(/</g, "\\3C ");
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -303,6 +308,36 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	};
 	return ownerSignal._ = fn, ownerSignal;
 }
+function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccessor, fn) {
+	ownerLoopNodeAccessor = decodeAccessor(ownerLoopNodeAccessor), ownerValueAccessor = decodeAccessor(ownerValueAccessor), keyValueAccessor !== "M" && (keyValueAccessor = decodeAccessor(keyValueAccessor));
+	let scopeAccessor = "A" + ownerLoopNodeAccessor, mapAccessor = "O" + ownerLoopNodeAccessor, prevKeyProp = `_${ownerValueAccessor}`, ownerSignal = (ownerScope) => {
+		let scopes = toArray(ownerScope[scopeAccessor]);
+		if (ownerScope.H < runId && scopes.length) {
+			let nextKey = ownerScope[ownerValueAccessor];
+			queueRender(ownerScope, () => {
+				let map = keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor);
+				if (map && prevKeyProp in map) {
+					let prevScope = map.get(map[prevKeyProp]), nextScope = map.get(nextKey);
+					prevScope !== nextScope && (runLiveBranch(prevScope, fn), runLiveBranch(nextScope, fn));
+				} else for (let scope of toArray(ownerScope[scopeAccessor])) runLiveBranch(scope, fn);
+				map && (map[prevKeyProp] = nextKey);
+			}, -1, 0, scopes[0].L);
+		}
+	};
+	return ownerSignal._ = fn, ownerSignal;
+}
+function keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor) {
+	let map = ownerScope[mapAccessor] ||= /* @__PURE__ */ new Map();
+	if (!map.size) for (let scope of toArray(ownerScope[scopeAccessor])) {
+		let key = scope.M ?? scope[keyValueAccessor];
+		if (key === void 0) return ownerScope[mapAccessor] = null;
+		scope.M = key, map.set(key, scope);
+	}
+	return map;
+}
+function runLiveBranch(scope, fn) {
+	scope && scope.H > 0 && scope.H < runId && fn(scope);
+}
 function _if_closure(ownerConditionalNodeAccessor, branch, fn) {
 	ownerConditionalNodeAccessor = decodeAccessor(ownerConditionalNodeAccessor);
 	let scopeAccessor = "A" + ownerConditionalNodeAccessor, branchAccessor = "D" + ownerConditionalNodeAccessor, ownerSignal = (scope) => {
@@ -732,6 +767,19 @@ function _attr_style_items(element, items) {
 function _attr_style_item(element, name, value) {
 	element.style.setProperty(name, _to_text(value));
 }
+function _style_shell(scope, nodeAccessor) {
+	let element = scope[nodeAccessor], id = _id(scope);
+	element.className = id, _text_content(element, "." + id + " ~ *{}");
+}
+function _style_rule_item(element, name, value) {
+	let text = element.textContent, decl = name + ":" + escapeStyleValue(_to_text(value)) + ";", start = text.indexOf("{" + name + ":");
+	if (start === -1 && (start = text.indexOf(";" + name + ":")), start === -1) element.textContent = text.slice(0, -1) + decl + "}";
+	else {
+		let end = ++start;
+		for (let c; (c = text[end]) && c !== ";"; end++) c === "\\" && end++;
+		element.textContent = text.slice(0, start) + decl + text.slice(end + 1);
+	}
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope.$.cspNonce);
 }
@@ -982,6 +1030,21 @@ function _if(nodeAccessor, ...branchesArgs) {
 		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	nodeAccessor = decodeAccessor(nodeAccessor), startNodeAccessor !== void 0 && (startNodeAccessor = decodeAccessor(startNodeAccessor));
+	let rangeAccessor = "A" + nodeAccessor;
+	return enableBranches(), (scope, display) => {
+		let referenceNode = scope[nodeAccessor], onlyChild = referenceNode.nodeType === 1, parentNode = onlyChild ? referenceNode : referenceNode.parentNode, range = scope[rangeAccessor];
+		range || (range = scope[rangeAccessor] = {}, range.S = onlyChild ? parentNode.firstChild : scope[startNodeAccessor], range.K = onlyChild ? parentNode.lastChild : referenceNode.previousSibling);
+		let startNode = range.S;
+		if (range.L && startNode === range.K && startNode.tagName === "T") {
+			let wrapper = startNode;
+			wrapper.firstChild || wrapper.appendChild(new Text()), range = scope[rangeAccessor] = {}, range.S = startNode = wrapper.firstChild, range.K = wrapper.lastChild, wrapper.replaceWith(...wrapper.childNodes);
+		}
+		let inDom = startNode.parentNode === parentNode;
+		display ? inDom || insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode) : inDom && tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1006,9 +1069,11 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch)
 function loop(forEach) {
 	return (nodeAccessor, template, walks, setup, params) => {
 		nodeAccessor = decodeAccessor(nodeAccessor);
-		let scopesAccessor = "A" + nodeAccessor, renderer = _content("", template, walks, setup)();
+		let scopesAccessor = "A" + nodeAccessor, keyedScopesAccessor = "O" + nodeAccessor, renderer = _content("", template, walks, setup)();
 		return enableBranches(), (scope, value) => {
-			let referenceNode = scope[nodeAccessor], oldScopes = toArray(scope[scopesAccessor]), newScopes = scope[scopesAccessor] = [], oldLen = oldScopes.length, parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.S.parentNode : referenceNode, oldScopesByKey, hasPotentialMoves;
+			let referenceNode = scope[nodeAccessor], oldScopes = toArray(scope[scopesAccessor]), newScopes = scope[scopesAccessor] = [];
+			scope[keyedScopesAccessor] = null;
+			let oldLen = oldScopes.length, parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.S.parentNode : referenceNode, oldScopesByKey, hasPotentialMoves;
 			forEach(value, (key, args) => {
 				let branch = oldLen && (oldScopesByKey ||= oldScopes.reduce((map, scope, i) => map.set(scope.M ?? i, scope), /* @__PURE__ */ new Map())).get(key);
 				branch ? hasPotentialMoves = oldScopesByKey.delete(key) : branch = createAndSetupBranch(scope.$, renderer, scope, parentNode), branch.M = key, newScopes.push(branch), params?.(branch, args);
@@ -1283,4 +1348,4 @@ exports.$signal = $signal, exports.$signalReset = $signalReset, exports._assert_
 	get: function() {
 		return _dynamic_tag;
 	}
-}), exports._dynamic_tag_content = _dynamic_tag_content, exports._el = _el, exports._el_read = _el_read, exports._enable_catch = _enable_catch, exports._for_closure = _for_closure, exports._for_in = _for_in, exports._for_of = _for_of, exports._for_to = _for_to, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_resume = _hoist_resume, exports._html = _html, exports._id = _id, exports._if = _if, exports._if_closure = _if_closure, exports._let = _let, exports._let_change = _let_change, exports._lifecycle = _lifecycle, exports._load_event_trigger = _load_event_trigger, exports._load_idle_trigger = _load_idle_trigger, exports._load_media_trigger = _load_media_trigger, exports._load_race_trigger = _load_race_trigger, exports._load_setup = _load_setup, exports._load_signal = _load_signal, exports._load_template = _load_template, exports._load_visible_trigger = _load_visible_trigger, exports._on = _on, exports._or = _or, exports._resume = _resume, exports._resume_dynamic_tag = _resume_dynamic_tag, exports._return = _return, exports._return_change = _return_change, exports._script = _script, exports._template = _template, exports._text = _text, exports._text_content = _text_content, exports._to_text = _to_text, exports._try = _try, exports._var = _var, exports._var_change = _var_change, exports._var_resume = _var_resume, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forOf = forOf, exports.forTo = forTo, exports.forUntil = forUntil, exports.init = init, exports.initEmbedded = initEmbedded, exports.ready = ready, exports.run = run;
+}), exports._dynamic_tag_content = _dynamic_tag_content, exports._el = _el, exports._el_read = _el_read, exports._enable_catch = _enable_catch, exports._for_closure = _for_closure, exports._for_in = _for_in, exports._for_of = _for_of, exports._for_selector = _for_selector, exports._for_to = _for_to, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_resume = _hoist_resume, exports._html = _html, exports._id = _id, exports._if = _if, exports._if_closure = _if_closure, exports._let = _let, exports._let_change = _let_change, exports._lifecycle = _lifecycle, exports._load_event_trigger = _load_event_trigger, exports._load_idle_trigger = _load_idle_trigger, exports._load_media_trigger = _load_media_trigger, exports._load_race_trigger = _load_race_trigger, exports._load_setup = _load_setup, exports._load_signal = _load_signal, exports._load_template = _load_template, exports._load_visible_trigger = _load_visible_trigger, exports._on = _on, exports._or = _or, exports._resume = _resume, exports._resume_dynamic_tag = _resume_dynamic_tag, exports._return = _return, exports._return_change = _return_change, exports._script = _script, exports._show = _show, exports._style_rule_item = _style_rule_item, exports._style_shell = _style_shell, exports._template = _template, exports._text = _text, exports._text_content = _text_content, exports._to_text = _to_text, exports._try = _try, exports._var = _var, exports._var_change = _var_change, exports._var_resume = _var_resume, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forOf = forOf, exports.forTo = forTo, exports.forUntil = forUntil, exports.init = init, exports.initEmbedded = initEmbedded, exports.ready = ready, exports.run = run;

package/dist/dom.mjs

@@ -131,6 +131,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};>]|\/(?=\*)/g, "\\$&").replace(/</g, "\\3C ");
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -302,6 +307,36 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	};
 	return ownerSignal._ = fn, ownerSignal;
 }
+function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccessor, fn) {
+	ownerLoopNodeAccessor = decodeAccessor(ownerLoopNodeAccessor), ownerValueAccessor = decodeAccessor(ownerValueAccessor), keyValueAccessor !== "M" && (keyValueAccessor = decodeAccessor(keyValueAccessor));
+	let scopeAccessor = "A" + ownerLoopNodeAccessor, mapAccessor = "O" + ownerLoopNodeAccessor, prevKeyProp = `_${ownerValueAccessor}`, ownerSignal = (ownerScope) => {
+		let scopes = toArray(ownerScope[scopeAccessor]);
+		if (ownerScope.H < runId && scopes.length) {
+			let nextKey = ownerScope[ownerValueAccessor];
+			queueRender(ownerScope, () => {
+				let map = keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor);
+				if (map && prevKeyProp in map) {
+					let prevScope = map.get(map[prevKeyProp]), nextScope = map.get(nextKey);
+					prevScope !== nextScope && (runLiveBranch(prevScope, fn), runLiveBranch(nextScope, fn));
+				} else for (let scope of toArray(ownerScope[scopeAccessor])) runLiveBranch(scope, fn);
+				map && (map[prevKeyProp] = nextKey);
+			}, -1, 0, scopes[0].L);
+		}
+	};
+	return ownerSignal._ = fn, ownerSignal;
+}
+function keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor) {
+	let map = ownerScope[mapAccessor] ||= /* @__PURE__ */ new Map();
+	if (!map.size) for (let scope of toArray(ownerScope[scopeAccessor])) {
+		let key = scope.M ?? scope[keyValueAccessor];
+		if (key === void 0) return ownerScope[mapAccessor] = null;
+		scope.M = key, map.set(key, scope);
+	}
+	return map;
+}
+function runLiveBranch(scope, fn) {
+	scope && scope.H > 0 && scope.H < runId && fn(scope);
+}
 function _if_closure(ownerConditionalNodeAccessor, branch, fn) {
 	ownerConditionalNodeAccessor = decodeAccessor(ownerConditionalNodeAccessor);
 	let scopeAccessor = "A" + ownerConditionalNodeAccessor, branchAccessor = "D" + ownerConditionalNodeAccessor, ownerSignal = (scope) => {
@@ -731,6 +766,19 @@ function _attr_style_items(element, items) {
 function _attr_style_item(element, name, value) {
 	element.style.setProperty(name, _to_text(value));
 }
+function _style_shell(scope, nodeAccessor) {
+	let element = scope[nodeAccessor], id = _id(scope);
+	element.className = id, _text_content(element, "." + id + " ~ *{}");
+}
+function _style_rule_item(element, name, value) {
+	let text = element.textContent, decl = name + ":" + escapeStyleValue(_to_text(value)) + ";", start = text.indexOf("{" + name + ":");
+	if (start === -1 && (start = text.indexOf(";" + name + ":")), start === -1) element.textContent = text.slice(0, -1) + decl + "}";
+	else {
+		let end = ++start;
+		for (let c; (c = text[end]) && c !== ";"; end++) c === "\\" && end++;
+		element.textContent = text.slice(0, start) + decl + text.slice(end + 1);
+	}
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope.$.cspNonce);
 }
@@ -981,6 +1029,21 @@ function _if(nodeAccessor, ...branchesArgs) {
 		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	nodeAccessor = decodeAccessor(nodeAccessor), startNodeAccessor !== void 0 && (startNodeAccessor = decodeAccessor(startNodeAccessor));
+	let rangeAccessor = "A" + nodeAccessor;
+	return enableBranches(), (scope, display) => {
+		let referenceNode = scope[nodeAccessor], onlyChild = referenceNode.nodeType === 1, parentNode = onlyChild ? referenceNode : referenceNode.parentNode, range = scope[rangeAccessor];
+		range || (range = scope[rangeAccessor] = {}, range.S = onlyChild ? parentNode.firstChild : scope[startNodeAccessor], range.K = onlyChild ? parentNode.lastChild : referenceNode.previousSibling);
+		let startNode = range.S;
+		if (range.L && startNode === range.K && startNode.tagName === "T") {
+			let wrapper = startNode;
+			wrapper.firstChild || wrapper.appendChild(new Text()), range = scope[rangeAccessor] = {}, range.S = startNode = wrapper.firstChild, range.K = wrapper.lastChild, wrapper.replaceWith(...wrapper.childNodes);
+		}
+		let inDom = startNode.parentNode === parentNode;
+		display ? inDom || insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode) : inDom && tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1005,9 +1068,11 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch)
 function loop(forEach) {
 	return (nodeAccessor, template, walks, setup, params) => {
 		nodeAccessor = decodeAccessor(nodeAccessor);
-		let scopesAccessor = "A" + nodeAccessor, renderer = _content("", template, walks, setup)();
+		let scopesAccessor = "A" + nodeAccessor, keyedScopesAccessor = "O" + nodeAccessor, renderer = _content("", template, walks, setup)();
 		return enableBranches(), (scope, value) => {
-			let referenceNode = scope[nodeAccessor], oldScopes = toArray(scope[scopesAccessor]), newScopes = scope[scopesAccessor] = [], oldLen = oldScopes.length, parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.S.parentNode : referenceNode, oldScopesByKey, hasPotentialMoves;
+			let referenceNode = scope[nodeAccessor], oldScopes = toArray(scope[scopesAccessor]), newScopes = scope[scopesAccessor] = [];
+			scope[keyedScopesAccessor] = null;
+			let oldLen = oldScopes.length, parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.S.parentNode : referenceNode, oldScopesByKey, hasPotentialMoves;
 			forEach(value, (key, args) => {
 				let branch = oldLen && (oldScopesByKey ||= oldScopes.reduce((map, scope, i) => map.set(scope.M ?? i, scope), /* @__PURE__ */ new Map())).get(key);
 				branch ? hasPotentialMoves = oldScopesByKey.delete(key) : branch = createAndSetupBranch(scope.$, renderer, scope, parentNode), branch.M = key, newScopes.push(branch), params?.(branch, args);
@@ -1278,4 +1343,4 @@ function getSelectorOrResolve(selector, resolve) {
 	return document.querySelector(selector) || resolve();
 }
 //#endregion
-export { $signal, $signalReset, _assert_hoist, _assert_init, _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_checked_default, _attr_input_checked_script, _attr_input_value, _attr_input_value as _attr_textarea_value, _attr_input_value_default, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script, _attr_input_value_script as _attr_textarea_value_script, _attr_nonce, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _await_content, _await_promise, _call, _child_setup, _closure, _closure_get, _const, _content, _content_closures, _content_resume, _dynamic_tag, _dynamic_tag_content, _el, _el_read, _enable_catch, _for_closure, _for_in, _for_of, _for_to, _for_until, _hoist, _hoist_resume, _html, _id, _if, _if_closure, _let, _let_change, _lifecycle, _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, _on, _or, _resume, _resume_dynamic_tag, _return, _return_change, _script, _template, _text, _text_content, _to_text, _try, _var, _var_change, _var_resume, attrTag, attrTags, compat, forIn, forOf, forTo, forUntil, init, initEmbedded, ready, run };
+export { $signal, $signalReset, _assert_hoist, _assert_init, _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_checked_default, _attr_input_checked_script, _attr_input_value, _attr_input_value as _attr_textarea_value, _attr_input_value_default, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script, _attr_input_value_script as _attr_textarea_value_script, _attr_nonce, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _await_content, _await_promise, _call, _child_setup, _closure, _closure_get, _const, _content, _content_closures, _content_resume, _dynamic_tag, _dynamic_tag_content, _el, _el_read, _enable_catch, _for_closure, _for_in, _for_of, _for_selector, _for_to, _for_until, _hoist, _hoist_resume, _html, _id, _if, _if_closure, _let, _let_change, _lifecycle, _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, _on, _or, _resume, _resume_dynamic_tag, _return, _return_change, _script, _show, _style_rule_item, _style_shell, _template, _text, _text_content, _to_text, _try, _var, _var_change, _var_resume, attrTag, attrTags, compat, forIn, forOf, forTo, forUntil, init, initEmbedded, ready, run };

package/dist/html/attrs.d.ts

@@ -9,6 +9,7 @@ export declare function _attr_input_checked(scopeId: number, nodeAccessor: Acces
 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 _style_html(decls: string): string;
 export declare function _attr(name: string, value: unknown): string;
 export declare function _attr_and(name: string, value: unknown, attr: string): string;
 export declare function _attr_or(name: string, value: unknown, attr: string): string;

package/dist/html/content.d.ts

@@ -3,4 +3,5 @@ export declare function _unescaped(val: unknown): string;
 export declare function _escape(val: unknown): string;
 export declare function _escape_script(val: unknown): string;
 export declare function _escape_style(val: unknown): string;
+export declare function _escape_style_value(val: unknown): string;
 export declare function _escape_comment(val: unknown): string;

package/dist/html/inlined-runtimes.d.ts

@@ -1,2 +1,2 @@
 export declare const WALKER_RUNTIME_CODE = "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))";
-export declare const REORDER_RUNTIME_CODE = "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})";
+export declare const REORDER_RUNTIME_CODE = "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})";

package/dist/html/inlined-runtimes.debug.d.ts

@@ -1,2 +1,2 @@
 export declare const WALKER_RUNTIME_CODE = "((runtimeId) => (self[runtimeId] ||= (\n  renderId,\n  prefix = runtimeId + renderId,\n  prefixLen = prefix.length,\n  lookup = {},\n  visits = [],\n  doc = document,\n  walker = doc.createTreeWalker(\n    doc,\n    129 /* NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT */,\n  ),\n) =>\n  doc = (self[runtimeId][renderId] = {\n    i: prefix,\n    d: doc,\n    l: lookup,\n    v: visits,\n    x() {},\n    w(node, op, id) {\n      while ((node = walker.nextNode())) {\n        doc.x(\n          (op =\n            (op = node.data) &&\n            !op.indexOf(prefix) &&\n            ((lookup[(id = op.slice(prefixLen + 1))] = node), op[prefixLen])),\n          id,\n          node,\n        );\n\n        if (op > \"#\") {\n          visits.push(node);\n        }\n      }\n    },\n  })\n, self[runtimeId]))";
-export declare const REORDER_RUNTIME_CODE = "((runtime) => {\n  if (runtime.j) return;\n  let onNextSibling,\n    placeholder,\n    nextSibling,\n    placeholders = runtime.p = {},\n    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);\n  runtime.d.head.append(\n    runtime.d.querySelector(\"style[\" + runtime.i + \"]\") || \"\"\n  );\n  runtime.j = {};\n  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {\n    if (node == nextSibling) {\n      onNextSibling();\n    }\n\n    if (op == \"#\") {\n      (placeholders[id] = placeholder).i++;\n    } else if (op == \"!\") {\n      if (runtime.l[id] && placeholders[id]) {\n        nextSibling = node.nextSibling;\n        onNextSibling = () => placeholders[id].c();\n      }\n    } else if (node.tagName == \"T\" && (id = node.getAttribute(runtime.i))) {\n      nextSibling = node.nextSibling;\n      onNextSibling = () => {\n        node.remove();\n        placeholderRoot || replace(id, node);\n        placeholder.c();\n      };\n      placeholder =\n        placeholders[id] ||\n        (placeholderRoot = placeholders[id] =\n          {\n            i: runtime.l[id] ? 1 : 2,\n            c(start = runtime.l[\"^\" + id]) {\n              if (--placeholderRoot.i) return 1;\n              for (\n                ;\n                (nextSibling =\n                  runtime.l[id].previousSibling || start).remove(),\n                  start != nextSibling;\n\n              );\n              replace(id, node);\n            },\n          });\n      // repurpose \"op\" for callbacks ...carefully\n      if ((op = runtime.j[id])) {\n        placeholderCb = placeholder.c;\n        placeholder.c = () => placeholderCb() || op(runtime.r);\n      }\n    }\n  };\n})";
+export declare const REORDER_RUNTIME_CODE = "((runtime) => {\n  if (runtime.j) return;\n  let onNextSibling,\n    placeholder,\n    nextSibling,\n    placeholders = runtime.p = {},\n    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);\n  runtime.j = {};\n  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {\n    if (node == nextSibling) {\n      onNextSibling();\n    }\n\n    if (op == \"#\") {\n      (placeholders[id] = placeholder).i++;\n    } else if (op == \"!\") {\n      if (runtime.l[id] && placeholders[id]) {\n        nextSibling = node.nextSibling;\n        onNextSibling = () => placeholders[id].c();\n      }\n    } else if (node.tagName == \"T\" && (id = node.getAttribute(runtime.i))) {\n      nextSibling = node.nextSibling;\n      onNextSibling = () => {\n        node.remove();\n        placeholderRoot || replace(id, node);\n        placeholder.c();\n      };\n      placeholder =\n        placeholders[id] ||\n        (placeholderRoot = placeholders[id] =\n          {\n            i: runtime.l[id] ? 1 : 2,\n            c(start = runtime.l[\"^\" + id]) {\n              if (--placeholderRoot.i) return 1;\n              for (\n                ;\n                (nextSibling =\n                  runtime.l[id].previousSibling || start).remove(),\n                  start != nextSibling;\n\n              );\n              replace(id, node);\n            },\n          });\n      // repurpose \"op\" for callbacks ...carefully\n      if ((op = runtime.j[id])) {\n        placeholderCb = placeholder.c;\n        placeholder.c = () => placeholderCb() || op(runtime.r);\n      }\n    }\n  };\n})";

package/dist/html/writer.d.ts

@@ -56,6 +56,8 @@ export declare function _for_in(obj: Falsy | {}, cb: (key: string, value: unknow
 export declare function _for_to(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, by: Falsy | ((v: number) => unknown), scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
 export declare function _for_until(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, by: Falsy | ((v: number) => unknown), scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
 export declare function _if(cb: () => void | number, scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
+export declare function _show_start(display: unknown, mark?: unknown): void;
+export declare function _show_end(scopeId: number, accessor: Accessor, display: unknown, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1 | 0): void;
 declare let writeScope: (scopeId: number, partialScope: PartialScope) => ScopeInternals;
 export { writeScope as _scope };
 export declare function _existing_scope(scopeId: number): ScopeInternals;

package/dist/html.d.ts

@@ -1,10 +1,10 @@
 export { attrTag, attrTags } from "./common/attr-tag";
 export { _assert_hoist, _el_read_error, _hoist_read_error, } from "./common/errors";
 export { _flush_head, withLoadAssets, withPageAssets } from "./html/assets";
-export { _attr, _attr_and, _attr_class, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, } from "./html/attrs";
+export { _attr, _attr_and, _attr_class, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _style_html, } from "./html/attrs";
 export { compat } from "./html/compat";
-export { _escape, _escape_comment, _escape_script, _escape_style, _to_text, _unescaped, } from "./html/content";
+export { _escape, _escape_comment, _escape_script, _escape_style, _escape_style_value, _to_text, _unescaped, } from "./html/content";
 export { _content, _content_resume, _dynamic_tag } from "./html/dynamic-tag";
 export { forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, } from "./html/for";
 export { _template } from "./html/template";
-export { _attr_content, _await, _el, _el_resume, _existing_scope, _for_in, _for_of, _for_to, _for_until, _hoist, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _subscribe, _trailers, _try, _var, $global, } from "./html/writer";
+export { _attr_content, _await, _el, _el_resume, _existing_scope, _for_in, _for_of, _for_to, _for_until, _hoist, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _show_end, _show_start, _subscribe, _trailers, _try, _var, $global, } from "./html/writer";

package/dist/html.js

@@ -375,6 +375,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};>]|\/(?=\*)/g, "\\$&").replace(/</g, "\\3C ");
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -419,6 +424,9 @@ function _escape_script(val) {
 function _escape_style(val) {
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 function _escape_comment(val) {
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
@@ -1231,6 +1239,13 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	display ? mark && $chunk.writeHTML($chunk.boundary.state.mark("[", "")) : $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	let branchId = _scope_id(), wrap = !display;
+	wrap && $chunk.writeHTML("</t>"), writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 function _existing_scope(scopeId) {
 	return writeScope(scopeId, {});
 }
@@ -1480,7 +1495,7 @@ var State = class {
 		return scripts;
 	}
 	flushScript() {
-		let { boundary } = this, { state } = boundary, { $global, runtimePrefix, nonceAttr } = state, needsWalk = state.walkOnNextFlush;
+		let { boundary } = this, { state } = boundary, { $global, runtimePrefix } = state, needsWalk = state.walkOnNextFlush;
 		needsWalk && (state.walkOnNextFlush = !1);
 		let readyResumeScripts = this.flushReadyScripts();
 		for (let channel; channel = state.serializer.pendingReadyChannel();) {
@@ -1490,7 +1505,7 @@ var State = class {
 		readyResumeScripts && (needsWalk = !0);
 		let { effects } = this, { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
-			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>", scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
+			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
 			for (let reorderedChunk of state.writeReorders) {
 				let { reorderId } = reorderedChunk, readyReservations = [], reorderHTML = "", reorderEffects = "", reorderScripts = "", cur = reorderedChunk;
 				for (reorderedChunk.reorderId = null;;) {
@@ -1501,7 +1516,7 @@ var State = class {
 				}
 				reorderEffects && (state.hasWrittenResume || (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[]")), reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")"));
 				for (let reservation of readyReservations) scripts = concatScripts(scripts, reservation);
-				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
+				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
@@ -1644,6 +1659,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	let id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id} ~ *{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -1781,8 +1800,8 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template.i) {
-		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -1984,4 +2003,4 @@ exports.$global = $global, exports._assert_hoist = _assert_hoist, exports._attr
 	get: function() {
 		return _dynamic_tag;
 	}
-}), exports._el = _el, exports._el_read_error = _el_read_error, exports._el_resume = _el_resume, exports._escape = _escape, exports._escape_comment = _escape_comment, exports._escape_script = _escape_script, exports._escape_style = _escape_style, exports._existing_scope = _existing_scope, exports._flush_head = _flush_head, exports._for_in = _for_in, exports._for_of = _for_of, exports._for_to = _for_to, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_read_error = _hoist_read_error, exports._html = _html, exports._id = _id, exports._if = _if, exports._peek_scope_id = _peek_scope_id, exports._resume = _resume, exports._resume_branch = _resume_branch, exports._scope = writeScope, exports._scope_id = _scope_id, exports._scope_reason = _scope_reason, exports._scope_with_id = _scope_with_id, exports._script = _script, exports._sep = _sep, exports._serialize_guard = _serialize_guard, exports._serialize_if = _serialize_if, exports._set_serialize_reason = _set_serialize_reason, exports._subscribe = _subscribe, exports._template = _template, exports._to_text = _to_text, exports._trailers = _trailers, exports._try = _try, exports._unescaped = _unescaped, exports._var = _var, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forInBy = forInBy, exports.forOf = forOf, exports.forOfBy = forOfBy, exports.forStepBy = forStepBy, exports.forTo = forTo, exports.forUntil = forUntil, exports.withLoadAssets = withLoadAssets, exports.withPageAssets = withPageAssets;
+}), exports._el = _el, exports._el_read_error = _el_read_error, exports._el_resume = _el_resume, exports._escape = _escape, exports._escape_comment = _escape_comment, exports._escape_script = _escape_script, exports._escape_style = _escape_style, exports._escape_style_value = _escape_style_value, exports._existing_scope = _existing_scope, exports._flush_head = _flush_head, exports._for_in = _for_in, exports._for_of = _for_of, exports._for_to = _for_to, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_read_error = _hoist_read_error, exports._html = _html, exports._id = _id, exports._if = _if, exports._peek_scope_id = _peek_scope_id, exports._resume = _resume, exports._resume_branch = _resume_branch, exports._scope = writeScope, exports._scope_id = _scope_id, exports._scope_reason = _scope_reason, exports._scope_with_id = _scope_with_id, exports._script = _script, exports._sep = _sep, exports._serialize_guard = _serialize_guard, exports._serialize_if = _serialize_if, exports._set_serialize_reason = _set_serialize_reason, exports._show_end = _show_end, exports._show_start = _show_start, exports._style_html = _style_html, exports._subscribe = _subscribe, exports._template = _template, exports._to_text = _to_text, exports._trailers = _trailers, exports._try = _try, exports._unescaped = _unescaped, exports._var = _var, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forInBy = forInBy, exports.forOf = forOf, exports.forOfBy = forOfBy, exports.forStepBy = forStepBy, exports.forTo = forTo, exports.forUntil = forUntil, exports.withLoadAssets = withLoadAssets, exports.withPageAssets = withPageAssets;

package/dist/html.mjs

@@ -374,6 +374,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};>]|\/(?=\*)/g, "\\$&").replace(/</g, "\\3C ");
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -418,6 +423,9 @@ function _escape_script(val) {
 function _escape_style(val) {
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 function _escape_comment(val) {
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
@@ -1230,6 +1238,13 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	display ? mark && $chunk.writeHTML($chunk.boundary.state.mark("[", "")) : $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	let branchId = _scope_id(), wrap = !display;
+	wrap && $chunk.writeHTML("</t>"), writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 function _existing_scope(scopeId) {
 	return writeScope(scopeId, {});
 }
@@ -1479,7 +1494,7 @@ var State = class {
 		return scripts;
 	}
 	flushScript() {
-		let { boundary } = this, { state } = boundary, { $global, runtimePrefix, nonceAttr } = state, needsWalk = state.walkOnNextFlush;
+		let { boundary } = this, { state } = boundary, { $global, runtimePrefix } = state, needsWalk = state.walkOnNextFlush;
 		needsWalk && (state.walkOnNextFlush = !1);
 		let readyResumeScripts = this.flushReadyScripts();
 		for (let channel; channel = state.serializer.pendingReadyChannel();) {
@@ -1489,7 +1504,7 @@ var State = class {
 		readyResumeScripts && (needsWalk = !0);
 		let { effects } = this, { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
-			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>", scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
+			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
 			for (let reorderedChunk of state.writeReorders) {
 				let { reorderId } = reorderedChunk, readyReservations = [], reorderHTML = "", reorderEffects = "", reorderScripts = "", cur = reorderedChunk;
 				for (reorderedChunk.reorderId = null;;) {
@@ -1500,7 +1515,7 @@ var State = class {
 				}
 				reorderEffects && (state.hasWrittenResume || (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[]")), reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")"));
 				for (let reservation of readyReservations) scripts = concatScripts(scripts, reservation);
-				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
+				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
@@ -1643,6 +1658,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	let id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id} ~ *{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -1780,8 +1799,8 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template.i) {
-		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -1979,4 +1998,4 @@ function toObjectExpression(options) {
 //#region src/html/compat.ts
 function NOOP() {}
 //#endregion
-export { $global, _assert_hoist, _attr, _attr_and, _attr_class, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _await, _content, _content_resume, _dynamic_tag, _el, _el_read_error, _el_resume, _escape, _escape_comment, _escape_script, _escape_style, _existing_scope, _flush_head, _for_in, _for_of, _for_to, _for_until, _hoist, _hoist_read_error, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, writeScope as _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _subscribe, _template, _to_text, _trailers, _try, _unescaped, _var, attrTag, attrTags, compat, forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, withLoadAssets, withPageAssets };
+export { $global, _assert_hoist, _attr, _attr_and, _attr_class, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _await, _content, _content_resume, _dynamic_tag, _el, _el_read_error, _el_resume, _escape, _escape_comment, _escape_script, _escape_style, _escape_style_value, _existing_scope, _flush_head, _for_in, _for_of, _for_to, _for_until, _hoist, _hoist_read_error, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, writeScope as _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _show_end, _show_start, _style_html, _subscribe, _template, _to_text, _trailers, _try, _unescaped, _var, attrTag, attrTags, compat, forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, withLoadAssets, withPageAssets };

package/dist/translator/core/index.d.ts

@@ -106,6 +106,7 @@ declare const _default: {
     "<return>": import("@marko/compiler/babel-utils").Tag;
     "<script>": import("@marko/compiler/babel-utils").Tag;
     "<server>": import("@marko/compiler/babel-utils").Tag;
+    "<show>": import("@marko/compiler/babel-utils").Tag;
     "<static>": import("@marko/compiler/babel-utils").Tag;
     "<style>": import("@marko/compiler/babel-utils").Tag;
     "<try>": import("@marko/compiler/babel-utils").Tag;

package/dist/translator/core/show.d.ts

@@ -0,0 +1,17 @@
+import { types as t } from "@marko/compiler";
+import { type Tag } from "@marko/compiler/babel-utils";
+import { type Binding } from "../util/references";
+declare const kStartBinding: unique symbol;
+declare const kStaticDisplay: unique symbol;
+declare const kSingleNodeBody: unique symbol;
+declare const kDisplayRef: unique symbol;
+declare module "@marko/compiler/dist/types" {
+    interface NodeExtra {
+        [kStartBinding]?: Binding;
+        [kStaticDisplay]?: boolean;
+        [kSingleNodeBody]?: boolean;
+        [kDisplayRef]?: t.Expression;
+    }
+}
+declare const _default: Tag;
+export default _default;

package/dist/translator/core/style.d.ts

@@ -1,7 +1,13 @@
 import { type Tag } from "@marko/compiler/babel-utils";
+import { type Binding } from "../util/references";
+interface DynamicStyle {
+    names: string[];
+    binding: Binding;
+}
 declare module "@marko/compiler/dist/types" {
     interface NodeExtra {
         styleImportPath?: string | null;
+        dynamicStyle?: DynamicStyle;
     }
 }
 declare const _default: Tag;

package/dist/translator/index.d.ts

@@ -113,6 +113,7 @@ export declare const taglibs: (string | {
     "<return>": import("@marko/compiler/babel-utils").Tag;
     "<script>": import("@marko/compiler/babel-utils").Tag;
     "<server>": import("@marko/compiler/babel-utils").Tag;
+    "<show>": import("@marko/compiler/babel-utils").Tag;
     "<static>": import("@marko/compiler/babel-utils").Tag;
     "<style>": import("@marko/compiler/babel-utils").Tag;
     "<try>": import("@marko/compiler/babel-utils").Tag;