@marko/runtime-tags 0.1.18 → 0.1.20

package/dist/debug/dom.js

@@ -42,6 +42,8 @@ __export(dom_exports, {
   controllable_input_value_effect: () => controllable_input_value_effect,
   controllable_select_value: () => controllable_select_value,
   controllable_select_value_effect: () => controllable_select_value_effect,
+  controllable_textarea_value: () => controllable_input_value,
+  controllable_textarea_value_effect: () => controllable_input_value_effect,
   createRenderer: () => createRenderer,
   createRendererWithOwner: () => createRendererWithOwner,
   createScope: () => createScope,
@@ -1117,7 +1119,7 @@ function controllable_input_value_effect(scope, nodeAccessor) {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      inputType = ev.inputType || inputType;
+      if (ev) inputType = ev.inputType;
       runSync(valueChange, el.value);
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setValueAndUpdateSelection(
@@ -1217,7 +1219,7 @@ var inputType = "";
 function setValueAndUpdateSelection(el, value2) {
   const initialValue = el.value;
   if (initialValue !== value2) {
-    if (document.activeElement === el) {
+    if (el.getRootNode().activeElement === el) {
       const initialPosition = el.selectionStart;
       el.value = value2;
       const updatedPosition = resolveCursorPosition(
@@ -1289,12 +1291,7 @@ function hasSelectChanged(el) {
   }
 }
 function hasFormElementChanged(el) {
-  switch (el.tagName) {
-    case "INPUT":
-      return hasValueChanged(el) || hasCheckboxChanged(el);
-    case "SELECT":
-      return hasSelectChanged(el);
-  }
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
 }
 function normalizeStrProp(value2) {
   return normalizeAttrValue(value2) || "";
@@ -1378,14 +1375,14 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
   let skip;
   switch (el.tagName) {
     case "INPUT":
-      if (nextAttrs.checkedChange) {
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
         controllable_input_checked(
           scope,
           nodeAccessor,
           nextAttrs.checked,
           nextAttrs.checkedChange
         );
-      } else if (nextAttrs.checkedValue || nextAttrs.checkedValueChange) {
+      } else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
         controllable_input_checkedValue(
           scope,
           nodeAccessor,
@@ -1393,7 +1390,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
           nextAttrs.checkedValueChange,
           nextAttrs.value
         );
-      } else if (nextAttrs.valueChange) {
+      } else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_input_value(
           scope,
           nodeAccessor,
@@ -1406,7 +1403,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
       break;
     case "SELECT":
-      if (nextAttrs.value || nextAttrs.valueChange) {
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_select_value(
           scope,
           nodeAccessor,
@@ -1416,9 +1413,20 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
         skip = /^value(?:Change)?$/;
       }
       break;
+    case "TEXTAREA":
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+        controllable_input_value(
+          scope,
+          nodeAccessor,
+          nextAttrs.value,
+          nextAttrs.valueChange
+        );
+        skip = /^value(?:Change)?$/;
+      }
+      break;
     case "DETAILS":
     case "DIALOG":
-      if (nextAttrs.openChange) {
+      if ("open" in nextAttrs || "openChange" in nextAttrs) {
         controllable_detailsOrDialog_open(
           scope,
           nodeAccessor,
@@ -1655,6 +1663,11 @@ function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
     const renderBody = getRenderBody?.(scope);
     if (typeof renderer === "string") {
       const nodeAccessor2 = true ? `#${renderer}/0` : 0;
+      if (renderer === "textarea" && renderBody) {
+        throw new Error(
+          "A dynamic tag rendering a `<textarea>` cannot have a `renderBody` and must use the `value` attribute instead."
+        );
+      }
       setConditionalRendererOnlyChild(childScope, nodeAccessor2, renderBody);
       attrs(childScope, nodeAccessor2, attrsOrOp());
     } else if (renderer.___args) {

package/dist/debug/dom.mjs

@@ -1027,7 +1027,7 @@ function controllable_input_value_effect(scope, nodeAccessor) {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      inputType = ev.inputType || inputType;
+      if (ev) inputType = ev.inputType;
       runSync(valueChange, el.value);
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setValueAndUpdateSelection(
@@ -1127,7 +1127,7 @@ var inputType = "";
 function setValueAndUpdateSelection(el, value2) {
   const initialValue = el.value;
   if (initialValue !== value2) {
-    if (document.activeElement === el) {
+    if (el.getRootNode().activeElement === el) {
       const initialPosition = el.selectionStart;
       el.value = value2;
       const updatedPosition = resolveCursorPosition(
@@ -1199,12 +1199,7 @@ function hasSelectChanged(el) {
   }
 }
 function hasFormElementChanged(el) {
-  switch (el.tagName) {
-    case "INPUT":
-      return hasValueChanged(el) || hasCheckboxChanged(el);
-    case "SELECT":
-      return hasSelectChanged(el);
-  }
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
 }
 function normalizeStrProp(value2) {
   return normalizeAttrValue(value2) || "";
@@ -1288,14 +1283,14 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
   let skip;
   switch (el.tagName) {
     case "INPUT":
-      if (nextAttrs.checkedChange) {
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
         controllable_input_checked(
           scope,
           nodeAccessor,
           nextAttrs.checked,
           nextAttrs.checkedChange
         );
-      } else if (nextAttrs.checkedValue || nextAttrs.checkedValueChange) {
+      } else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
         controllable_input_checkedValue(
           scope,
           nodeAccessor,
@@ -1303,7 +1298,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
           nextAttrs.checkedValueChange,
           nextAttrs.value
         );
-      } else if (nextAttrs.valueChange) {
+      } else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_input_value(
           scope,
           nodeAccessor,
@@ -1316,7 +1311,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
       break;
     case "SELECT":
-      if (nextAttrs.value || nextAttrs.valueChange) {
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_select_value(
           scope,
           nodeAccessor,
@@ -1326,9 +1321,20 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
         skip = /^value(?:Change)?$/;
       }
       break;
+    case "TEXTAREA":
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+        controllable_input_value(
+          scope,
+          nodeAccessor,
+          nextAttrs.value,
+          nextAttrs.valueChange
+        );
+        skip = /^value(?:Change)?$/;
+      }
+      break;
     case "DETAILS":
     case "DIALOG":
-      if (nextAttrs.openChange) {
+      if ("open" in nextAttrs || "openChange" in nextAttrs) {
         controllable_detailsOrDialog_open(
           scope,
           nodeAccessor,
@@ -1565,6 +1571,11 @@ function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
     const renderBody = getRenderBody?.(scope);
     if (typeof renderer === "string") {
       const nodeAccessor2 = true ? `#${renderer}/0` : 0;
+      if (renderer === "textarea" && renderBody) {
+        throw new Error(
+          "A dynamic tag rendering a `<textarea>` cannot have a `renderBody` and must use the `value` attribute instead."
+        );
+      }
       setConditionalRendererOnlyChild(childScope, nodeAccessor2, renderBody);
       attrs(childScope, nodeAccessor2, attrsOrOp());
     } else if (renderer.___args) {
@@ -2039,6 +2050,8 @@ export {
   controllable_input_value_effect,
   controllable_select_value,
   controllable_select_value_effect,
+  controllable_input_value as controllable_textarea_value,
+  controllable_input_value_effect as controllable_textarea_value_effect,
   createRenderer,
   createRendererWithOwner,
   createScope,

package/dist/debug/html.js

@@ -31,6 +31,7 @@ __export(html_exports, {
   controllable_input_checkedValue: () => controllable_input_checkedValue,
   controllable_input_value: () => controllable_input_value,
   controllable_select_value: () => controllable_select_value,
+  controllable_textarea_value: () => controllable_textarea_value,
   createRenderer: () => createRenderer,
   createTemplate: () => createTemplate,
   dynamicTagArgs: () => dynamicTagArgs,
@@ -167,6 +168,30 @@ function normalizeDynamicRenderer(value) {
   if (value) return value.renderBody || value.default || value;
 }
 
+// src/html/content.ts
+function toString(val) {
+  return val ? val + "" : val === 0 ? "0" : "";
+}
+var unsafeXMLReg = /[<&]/g;
+var replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
+var escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
+function escapeXML(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
+}
+function escapeTextAreaValue(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeScriptReg = /<\/script/g;
+var escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
+function escapeScript(val) {
+  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeStyleReg = /<\/style/g;
+var escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
+function escapeStyle(val) {
+  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
+}
+
 // src/html/inlined-runtimes.ts
 var WALKER_RUNTIME_CODE = true ? `((runtimeId) =>
 (self[runtimeId] =
@@ -2011,6 +2036,14 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
     withContext(kSelectedValue, value, renderBody);
   }
 }
+function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
+  if (valueChange) {
+    const scope = ensureScopeWithId(scopeId);
+    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
+    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+  }
+  return escapeTextAreaValue(value);
+}
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
     const scope = ensureScopeWithId(scopeId);
@@ -2087,6 +2120,7 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
       break;
     case "select":
+    case "textarea":
       if (data.value || data.valueChange) {
         skip = /^value(?:Change)?$|[\s/>"'=]/;
       }
@@ -2200,7 +2234,21 @@ function dynamicTagInput(scope, tag, input, renderBody, tagVar) {
       `<${tag}${attrs(input, true ? `#${tag}/0` : 0, scopeId, tag)}>`
     );
     if (!voidElementsReg.test(tag)) {
-      if (renderBody) {
+      if (tag === "textarea") {
+        if (renderBody) {
+          throw new Error(
+            "A dynamic tag rendering a `<textarea>` cannot have a `renderBody` and must use the `value` attribute instead."
+          );
+        }
+        write(
+          controllable_textarea_value(
+            scopeId,
+            true ? `#${tag}/0` : 0,
+            input.value,
+            input.valueChange
+          )
+        );
+      } else if (renderBody) {
         if (tag === "select" && ("value" in input || "valueChange" in input)) {
           controllable_select_value(
             scopeId,
@@ -2339,27 +2387,6 @@ var compat = {
   }
 };
 
-// src/html/content.ts
-function toString(val) {
-  return val ? val + "" : val === 0 ? "0" : "";
-}
-var unsafeXMLReg = /[<&]/g;
-var replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
-var escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
-function escapeXML(val) {
-  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
-}
-var unsafeScriptReg = /<\/script/g;
-var escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
-function escapeScript(val) {
-  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
-}
-var unsafeStyleReg = /<\/style/g;
-var escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
-function escapeStyle(val) {
-  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
-}
-
 // src/html/template.ts
 var createTemplate = (renderer, templateId) => {
   renderer.render = render;
@@ -2566,6 +2593,7 @@ var ServerRenderResult = class {
   controllable_input_checkedValue,
   controllable_input_value,
   controllable_select_value,
+  controllable_textarea_value,
   createRenderer,
   createTemplate,
   dynamicTagArgs,

package/dist/debug/html.mjs

@@ -96,6 +96,30 @@ function normalizeDynamicRenderer(value) {
   if (value) return value.renderBody || value.default || value;
 }
 
+// src/html/content.ts
+function toString(val) {
+  return val ? val + "" : val === 0 ? "0" : "";
+}
+var unsafeXMLReg = /[<&]/g;
+var replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
+var escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
+function escapeXML(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
+}
+function escapeTextAreaValue(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeScriptReg = /<\/script/g;
+var escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
+function escapeScript(val) {
+  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeStyleReg = /<\/style/g;
+var escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
+function escapeStyle(val) {
+  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
+}
+
 // src/html/inlined-runtimes.ts
 var WALKER_RUNTIME_CODE = true ? `((runtimeId) =>
 (self[runtimeId] =
@@ -1940,6 +1964,14 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
     withContext(kSelectedValue, value, renderBody);
   }
 }
+function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
+  if (valueChange) {
+    const scope = ensureScopeWithId(scopeId);
+    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
+    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+  }
+  return escapeTextAreaValue(value);
+}
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
     const scope = ensureScopeWithId(scopeId);
@@ -2016,6 +2048,7 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
       break;
     case "select":
+    case "textarea":
       if (data.value || data.valueChange) {
         skip = /^value(?:Change)?$|[\s/>"'=]/;
       }
@@ -2129,7 +2162,21 @@ function dynamicTagInput(scope, tag, input, renderBody, tagVar) {
       `<${tag}${attrs(input, true ? `#${tag}/0` : 0, scopeId, tag)}>`
     );
     if (!voidElementsReg.test(tag)) {
-      if (renderBody) {
+      if (tag === "textarea") {
+        if (renderBody) {
+          throw new Error(
+            "A dynamic tag rendering a `<textarea>` cannot have a `renderBody` and must use the `value` attribute instead."
+          );
+        }
+        write(
+          controllable_textarea_value(
+            scopeId,
+            true ? `#${tag}/0` : 0,
+            input.value,
+            input.valueChange
+          )
+        );
+      } else if (renderBody) {
         if (tag === "select" && ("value" in input || "valueChange" in input)) {
           controllable_select_value(
             scopeId,
@@ -2268,27 +2315,6 @@ var compat = {
   }
 };
 
-// src/html/content.ts
-function toString(val) {
-  return val ? val + "" : val === 0 ? "0" : "";
-}
-var unsafeXMLReg = /[<&]/g;
-var replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
-var escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
-function escapeXML(val) {
-  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
-}
-var unsafeScriptReg = /<\/script/g;
-var escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
-function escapeScript(val) {
-  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
-}
-var unsafeStyleReg = /<\/style/g;
-var escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
-function escapeStyle(val) {
-  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
-}
-
 // src/html/template.ts
 var createTemplate = (renderer, templateId) => {
   renderer.render = render;
@@ -2494,6 +2520,7 @@ export {
   controllable_input_checkedValue,
   controllable_input_value,
   controllable_select_value,
+  controllable_textarea_value,
   createRenderer,
   createTemplate,
   dynamicTagArgs,

package/dist/dom/controllable.d.ts

@@ -5,6 +5,7 @@ export declare function controllable_input_checkedValue(scope: Scope, nodeAccess
 export declare function controllable_input_checkedValue_effect(scope: Scope, nodeAccessor: Accessor): void;
 export declare function controllable_input_value(scope: Scope, nodeAccessor: Accessor, value: unknown, valueChange: unknown): void;
 export declare function controllable_input_value_effect(scope: Scope, nodeAccessor: Accessor): void;
+export { controllable_input_value as controllable_textarea_value, controllable_input_value_effect as controllable_textarea_value_effect, };
 export declare function controllable_select_value(scope: Scope, nodeAccessor: Accessor, value: unknown, valueChange: unknown): void;
 export declare function controllable_select_value_effect(scope: Scope, nodeAccessor: Accessor): void;
 export declare function controllable_detailsOrDialog_open(scope: Scope, nodeAccessor: Accessor, open: unknown, openChange: unknown): void;

package/dist/dom.d.ts

@@ -4,7 +4,7 @@ export type { Scope } from "./common/types";
 export { getAbortSignal, resetAbortSignal } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
 export { conditional, conditionalOnlyChild, inConditionalScope, inLoopScope, loopIn, loopOf, loopTo, } from "./dom/control-flow";
-export { controllable_detailsOrDialog_open, controllable_detailsOrDialog_open_effect, controllable_input_checked, controllable_input_checked_effect, controllable_input_checkedValue, controllable_input_checkedValue_effect, controllable_input_value, controllable_input_value_effect, controllable_select_value, controllable_select_value_effect, } from "./dom/controllable";
+export { controllable_detailsOrDialog_open, controllable_detailsOrDialog_open_effect, controllable_input_checked, controllable_input_checked_effect, controllable_input_checkedValue, controllable_input_checkedValue_effect, controllable_input_value, controllable_input_value_effect, controllable_select_value, controllable_select_value_effect, controllable_textarea_value, controllable_textarea_value_effect, } from "./dom/controllable";
 export { attr, attrs, attrsEvents, classAttr, data, html, lifecycle, partialAttrs, props, styleAttr, } from "./dom/dom";
 export { on } from "./dom/event";
 export { prepare, queueControllableSource, queueEffect, queueSource, run, runEffects, } from "./dom/queue";

package/dist/dom.js

@@ -39,6 +39,8 @@ __export(dom_exports, {
   controllable_input_value_effect: () => controllable_input_value_effect,
   controllable_select_value: () => controllable_select_value,
   controllable_select_value_effect: () => controllable_select_value_effect,
+  controllable_textarea_value: () => controllable_input_value,
+  controllable_textarea_value_effect: () => controllable_input_value_effect,
   createRenderer: () => createRenderer,
   createRendererWithOwner: () => createRendererWithOwner,
   createScope: () => createScope,
@@ -695,7 +697,7 @@ function controllable_input_value_effect(scope, nodeAccessor) {
   let el = scope[nodeAccessor];
   isResuming && (scope[nodeAccessor + ":" /* ControlledValue */] = el.defaultValue), syncControllable(el, "input", hasValueChanged, (ev) => {
     let valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
-    valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, inputType = ev.inputType || inputType, runSync(valueChange, el.value), scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */ && setValueAndUpdateSelection(
+    valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, ev && (inputType = ev.inputType), runSync(valueChange, el.value), scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */ && setValueAndUpdateSelection(
       el,
       scope[nodeAccessor + ":" /* ControlledValue */]
     ), inputType = "");
@@ -756,7 +758,7 @@ var inputType = "";
 function setValueAndUpdateSelection(el, value2) {
   let initialValue = el.value;
   if (initialValue !== value2)
-    if (document.activeElement === el) {
+    if (el.getRootNode().activeElement === el) {
       let initialPosition = el.selectionStart;
       el.value = value2;
       let updatedPosition = resolveCursorPosition(
@@ -803,12 +805,7 @@ function hasSelectChanged(el) {
       return !0;
 }
 function hasFormElementChanged(el) {
-  switch (el.tagName) {
-    case "INPUT":
-      return hasValueChanged(el) || hasCheckboxChanged(el);
-    case "SELECT":
-      return hasSelectChanged(el);
-  }
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
 }
 function normalizeStrProp(value2) {
   return normalizeAttrValue(value2) || "";
@@ -873,14 +870,14 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
   let el = scope[nodeAccessor], events, skip;
   switch (el.tagName) {
     case "INPUT":
-      if (nextAttrs.checkedChange)
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs)
         controllable_input_checked(
           scope,
           nodeAccessor,
           nextAttrs.checked,
           nextAttrs.checkedChange
         );
-      else if (nextAttrs.checkedValue || nextAttrs.checkedValueChange)
+      else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs)
         controllable_input_checkedValue(
           scope,
           nodeAccessor,
@@ -888,7 +885,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
           nextAttrs.checkedValueChange,
           nextAttrs.value
         );
-      else if (nextAttrs.valueChange)
+      else if ("value" in nextAttrs || "valueChange" in nextAttrs)
         controllable_input_value(
           scope,
           nodeAccessor,
@@ -900,7 +897,15 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
       break;
     case "SELECT":
-      (nextAttrs.value || nextAttrs.valueChange) && (controllable_select_value(
+      ("value" in nextAttrs || "valueChange" in nextAttrs) && (controllable_select_value(
+        scope,
+        nodeAccessor,
+        nextAttrs.value,
+        nextAttrs.valueChange
+      ), skip = /^value(?:Change)?$/);
+      break;
+    case "TEXTAREA":
+      ("value" in nextAttrs || "valueChange" in nextAttrs) && (controllable_input_value(
         scope,
         nodeAccessor,
         nextAttrs.value,
@@ -909,7 +914,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       break;
     case "DETAILS":
     case "DIALOG":
-      nextAttrs.openChange && (controllable_detailsOrDialog_open(
+      ("open" in nextAttrs || "openChange" in nextAttrs) && (controllable_detailsOrDialog_open(
         scope,
         nodeAccessor,
         nextAttrs.open,

package/dist/dom.mjs

@@ -608,7 +608,7 @@ function controllable_input_value_effect(scope, nodeAccessor) {
   let el = scope[nodeAccessor];
   isResuming && (scope[nodeAccessor + ":" /* ControlledValue */] = el.defaultValue), syncControllable(el, "input", hasValueChanged, (ev) => {
     let valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
-    valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, inputType = ev.inputType || inputType, runSync(valueChange, el.value), scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */ && setValueAndUpdateSelection(
+    valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, ev && (inputType = ev.inputType), runSync(valueChange, el.value), scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */ && setValueAndUpdateSelection(
       el,
       scope[nodeAccessor + ":" /* ControlledValue */]
     ), inputType = "");
@@ -669,7 +669,7 @@ var inputType = "";
 function setValueAndUpdateSelection(el, value2) {
   let initialValue = el.value;
   if (initialValue !== value2)
-    if (document.activeElement === el) {
+    if (el.getRootNode().activeElement === el) {
       let initialPosition = el.selectionStart;
       el.value = value2;
       let updatedPosition = resolveCursorPosition(
@@ -716,12 +716,7 @@ function hasSelectChanged(el) {
       return !0;
 }
 function hasFormElementChanged(el) {
-  switch (el.tagName) {
-    case "INPUT":
-      return hasValueChanged(el) || hasCheckboxChanged(el);
-    case "SELECT":
-      return hasSelectChanged(el);
-  }
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
 }
 function normalizeStrProp(value2) {
   return normalizeAttrValue(value2) || "";
@@ -786,14 +781,14 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
   let el = scope[nodeAccessor], events, skip;
   switch (el.tagName) {
     case "INPUT":
-      if (nextAttrs.checkedChange)
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs)
         controllable_input_checked(
           scope,
           nodeAccessor,
           nextAttrs.checked,
           nextAttrs.checkedChange
         );
-      else if (nextAttrs.checkedValue || nextAttrs.checkedValueChange)
+      else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs)
         controllable_input_checkedValue(
           scope,
           nodeAccessor,
@@ -801,7 +796,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
           nextAttrs.checkedValueChange,
           nextAttrs.value
         );
-      else if (nextAttrs.valueChange)
+      else if ("value" in nextAttrs || "valueChange" in nextAttrs)
         controllable_input_value(
           scope,
           nodeAccessor,
@@ -813,7 +808,15 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
       break;
     case "SELECT":
-      (nextAttrs.value || nextAttrs.valueChange) && (controllable_select_value(
+      ("value" in nextAttrs || "valueChange" in nextAttrs) && (controllable_select_value(
+        scope,
+        nodeAccessor,
+        nextAttrs.value,
+        nextAttrs.valueChange
+      ), skip = /^value(?:Change)?$/);
+      break;
+    case "TEXTAREA":
+      ("value" in nextAttrs || "valueChange" in nextAttrs) && (controllable_input_value(
         scope,
         nodeAccessor,
         nextAttrs.value,
@@ -822,7 +825,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       break;
     case "DETAILS":
     case "DIALOG":
-      nextAttrs.openChange && (controllable_detailsOrDialog_open(
+      ("open" in nextAttrs || "openChange" in nextAttrs) && (controllable_detailsOrDialog_open(
         scope,
         nodeAccessor,
         nextAttrs.open,
@@ -1312,6 +1315,8 @@ export {
   controllable_input_value_effect,
   controllable_select_value,
   controllable_select_value_effect,
+  controllable_input_value as controllable_textarea_value,
+  controllable_input_value_effect as controllable_textarea_value_effect,
   createRenderer,
   createRendererWithOwner,
   createScope,

package/dist/html/attrs.d.ts

@@ -3,6 +3,7 @@ export declare function classAttr(val: unknown): string;
 export declare function styleAttr(val: unknown): string;
 export declare function optionValueAttr(value: unknown): string;
 export declare function controllable_select_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown, renderBody?: () => void): void;
+export declare function controllable_textarea_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown): string;
 export declare function controllable_input_value(scopeId: number, nodeAccessor: Accessor, value: unknown, valueChange: unknown): string;
 export declare function controllable_input_checked(scopeId: number, nodeAccessor: Accessor, checked: unknown, checkedChange: unknown): string;
 export declare function controllable_input_checkedValue(scopeId: number, nodeAccessor: Accessor, checkedValue: unknown, checkedValueChange: unknown, value: unknown): string;

package/dist/html/content.d.ts

@@ -1,4 +1,5 @@
 export declare function toString(val: unknown): string;
 export declare function escapeXML(val: unknown): string;
+export declare function escapeTextAreaValue(val: unknown): string;
 export declare function escapeScript(val: unknown): string;
 export declare function escapeStyle(val: unknown): string;

package/dist/html.d.ts

@@ -1,7 +1,7 @@
 export { attrTag, attrTags } from "./common/attr-tag";
 export { forIn, forOf, forTo } from "./common/for";
 export { normalizeDynamicRenderer } from "./common/helpers";
-export { attr, attrs, classAttr, controllable_detailsOrDialog_open, controllable_input_checked, controllable_input_checkedValue, controllable_input_value, controllable_select_value, optionValueAttr, partialAttrs, styleAttr, } from "./html/attrs";
+export { attr, attrs, classAttr, controllable_detailsOrDialog_open, controllable_input_checked, controllable_input_checkedValue, controllable_input_value, controllable_select_value, controllable_textarea_value, optionValueAttr, partialAttrs, styleAttr, } from "./html/attrs";
 export { compat } from "./html/compat";
 export { escapeScript, escapeStyle, escapeXML, toString } from "./html/content";
 export { createRenderer, dynamicTagArgs, dynamicTagInput, } from "./html/dynamic-tag";

package/dist/html.js

@@ -28,6 +28,7 @@ __export(html_exports, {
   controllable_input_checkedValue: () => controllable_input_checkedValue,
   controllable_input_value: () => controllable_input_value,
   controllable_select_value: () => controllable_select_value,
+  controllable_textarea_value: () => controllable_textarea_value,
   createRenderer: () => createRenderer,
   createTemplate: () => createTemplate,
   dynamicTagArgs: () => dynamicTagArgs,
@@ -139,6 +140,26 @@ function normalizeDynamicRenderer(value) {
   if (value) return value.renderBody || value.default || value;
 }
 
+// src/html/content.ts
+function toString(val) {
+  return val ? val + "" : val === 0 ? "0" : "";
+}
+var unsafeXMLReg = /[<&]/g, replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;", escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
+function escapeXML(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
+}
+function escapeTextAreaValue(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeScriptReg = /<\/script/g, escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
+function escapeScript(val) {
+  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeStyleReg = /<\/style/g, escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
+function escapeStyle(val) {
+  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
+}
+
 // src/html/inlined-runtimes.ts
 var WALKER_RUNTIME_CODE = '(e=>self[e]=self[e]||(l=>{let t,d={},f=[],s=document,a=s.createTreeWalker(s,129),r=self[e][l]={i:l=e+l,d:s,l:d,v:f,x(){},w(e){for(;e=a.nextNode();)this.x(r=(r=e.data)&&!r.indexOf(l)&&(d[t=r.slice(x+1)]=e,r[x]),t,e),r>"#"&&f.push(e)}},x=l.length}))', REORDER_RUNTIME_CODE = '(e=>{let i,t,r,l,d={},n=(e,i)=>{e.replaceWith(...i.childNodes),i.remove()};e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(o,a,c,p,b)=>{"#"==o?(d[a]=t).i++:c==r&&i(),"T"==c.tagName&&(a=c.getAttribute(e.i))&&((p=e.l["^"+a])?t=d[a]={i:0,c(i=e.l[a]||l||c){for(;i.parentNode!==p.parentNode;)i=i.parentNode;for(;i!=r;(r=p.nextSibling).remove());n(p,c)}}:(i=()=>{l=c.previousSibling,n(e.l[a],c),--p.i||p.c()},p=t=d[a],r=c.nextElementSibling||i()),b=t.c,(o=e.j[a])&&(t.c=()=>b()+o(e)),c.attributes.c&&t.c())}})';
 
@@ -1309,6 +1330,13 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
   }
   renderBody && withContext(kSelectedValue, value, renderBody);
 }
+function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
+  if (valueChange) {
+    let scope = ensureScopeWithId(scopeId);
+    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+  }
+  return escapeTextAreaValue(value);
+}
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
     let scope = ensureScopeWithId(scopeId);
@@ -1372,6 +1400,7 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
       break;
     case "select":
+    case "textarea":
       (data.value || data.valueChange) && (skip = /^value(?:Change)?$|[\s/>"'=]/);
       break;
     case "option":
@@ -1455,7 +1484,14 @@ function dynamicTagInput(scope, tag, input, renderBody, tagVar) {
   let scopeId = getScopeId(scope);
   return write(`${markResumeScopeStart(scopeId)}`), writeScope(scopeId, scope), tag ? typeof tag == "string" ? (nextScopeId(), write(
     `<${tag}${attrs(input, 0, scopeId, tag)}>`
-  ), voidElementsReg.test(tag) || (renderBody && (tag === "select" && ("value" in input || "valueChange" in input) ? controllable_select_value(
+  ), voidElementsReg.test(tag) || (tag === "textarea" ? write(
+    controllable_textarea_value(
+      scopeId,
+      0,
+      input.value,
+      input.valueChange
+    )
+  ) : renderBody && (tag === "select" && ("value" in input || "valueChange" in input) ? controllable_select_value(
     scopeId,
     0,
     input.value,
@@ -1537,23 +1573,6 @@ var K_TAGS_API_STATE = Symbol(), COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap()
   }
 };
 
-// src/html/content.ts
-function toString(val) {
-  return val ? val + "" : val === 0 ? "0" : "";
-}
-var unsafeXMLReg = /[<&]/g, replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;", escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
-function escapeXML(val) {
-  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
-}
-var unsafeScriptReg = /<\/script/g, escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
-function escapeScript(val) {
-  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
-}
-var unsafeStyleReg = /<\/style/g, escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
-function escapeStyle(val) {
-  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
-}
-
 // src/html/template.ts
 var createTemplate = (renderer, templateId) => (renderer.render = render, renderer._ = renderer, register2(renderer, templateId));
 function render(input = {}) {
@@ -1697,6 +1716,7 @@ var ServerRenderResult = class {
   controllable_input_checkedValue,
   controllable_input_value,
   controllable_select_value,
+  controllable_textarea_value,
   createRenderer,
   createTemplate,
   dynamicTagArgs,

package/dist/html.mjs

@@ -71,6 +71,26 @@ function normalizeDynamicRenderer(value) {
   if (value) return value.renderBody || value.default || value;
 }
 
+// src/html/content.ts
+function toString(val) {
+  return val ? val + "" : val === 0 ? "0" : "";
+}
+var unsafeXMLReg = /[<&]/g, replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;", escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
+function escapeXML(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
+}
+function escapeTextAreaValue(val) {
+  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeScriptReg = /<\/script/g, escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
+function escapeScript(val) {
+  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
+}
+var unsafeStyleReg = /<\/style/g, escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
+function escapeStyle(val) {
+  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
+}
+
 // src/html/inlined-runtimes.ts
 var WALKER_RUNTIME_CODE = '(e=>self[e]=self[e]||(l=>{let t,d={},f=[],s=document,a=s.createTreeWalker(s,129),r=self[e][l]={i:l=e+l,d:s,l:d,v:f,x(){},w(e){for(;e=a.nextNode();)this.x(r=(r=e.data)&&!r.indexOf(l)&&(d[t=r.slice(x+1)]=e,r[x]),t,e),r>"#"&&f.push(e)}},x=l.length}))', REORDER_RUNTIME_CODE = '(e=>{let i,t,r,l,d={},n=(e,i)=>{e.replaceWith(...i.childNodes),i.remove()};e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(o,a,c,p,b)=>{"#"==o?(d[a]=t).i++:c==r&&i(),"T"==c.tagName&&(a=c.getAttribute(e.i))&&((p=e.l["^"+a])?t=d[a]={i:0,c(i=e.l[a]||l||c){for(;i.parentNode!==p.parentNode;)i=i.parentNode;for(;i!=r;(r=p.nextSibling).remove());n(p,c)}}:(i=()=>{l=c.previousSibling,n(e.l[a],c),--p.i||p.c()},p=t=d[a],r=c.nextElementSibling||i()),b=t.c,(o=e.j[a])&&(t.c=()=>b()+o(e)),c.attributes.c&&t.c())}})';
 
@@ -1241,6 +1261,13 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
   }
   renderBody && withContext(kSelectedValue, value, renderBody);
 }
+function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
+  if (valueChange) {
+    let scope = ensureScopeWithId(scopeId);
+    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+  }
+  return escapeTextAreaValue(value);
+}
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
     let scope = ensureScopeWithId(scopeId);
@@ -1304,6 +1331,7 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$|[\s/>"'=]/;
       break;
     case "select":
+    case "textarea":
       (data.value || data.valueChange) && (skip = /^value(?:Change)?$|[\s/>"'=]/);
       break;
     case "option":
@@ -1387,7 +1415,14 @@ function dynamicTagInput(scope, tag, input, renderBody, tagVar) {
   let scopeId = getScopeId(scope);
   return write(`${markResumeScopeStart(scopeId)}`), writeScope(scopeId, scope), tag ? typeof tag == "string" ? (nextScopeId(), write(
     `<${tag}${attrs(input, 0, scopeId, tag)}>`
-  ), voidElementsReg.test(tag) || (renderBody && (tag === "select" && ("value" in input || "valueChange" in input) ? controllable_select_value(
+  ), voidElementsReg.test(tag) || (tag === "textarea" ? write(
+    controllable_textarea_value(
+      scopeId,
+      0,
+      input.value,
+      input.valueChange
+    )
+  ) : renderBody && (tag === "select" && ("value" in input || "valueChange" in input) ? controllable_select_value(
     scopeId,
     0,
     input.value,
@@ -1469,23 +1504,6 @@ var K_TAGS_API_STATE = Symbol(), COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap()
   }
 };
 
-// src/html/content.ts
-function toString(val) {
-  return val ? val + "" : val === 0 ? "0" : "";
-}
-var unsafeXMLReg = /[<&]/g, replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;", escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
-function escapeXML(val) {
-  return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "&zwj;";
-}
-var unsafeScriptReg = /<\/script/g, escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
-function escapeScript(val) {
-  return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
-}
-var unsafeStyleReg = /<\/style/g, escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
-function escapeStyle(val) {
-  return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
-}
-
 // src/html/template.ts
 var createTemplate = (renderer, templateId) => (renderer.render = render, renderer._ = renderer, register2(renderer, templateId));
 function render(input = {}) {
@@ -1628,6 +1646,7 @@ export {
   controllable_input_checkedValue,
   controllable_input_value,
   controllable_select_value,
+  controllable_textarea_value,
   createRenderer,
   createTemplate,
   dynamicTagArgs,

package/package.json

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