@marko/runtime-tags 6.0.146 → 6.0.147

package/dist/debug/dom.js

@@ -29,22 +29,29 @@ __export(dom_exports, {
   _attr_class_items: () => _attr_class_items,
   _attr_content: () => _attr_content,
   _attr_details_open: () => _attr_details_or_dialog_open,
+  _attr_details_open_default: () => _attr_details_or_dialog_open_default,
   _attr_details_open_script: () => _attr_details_or_dialog_open_script,
   _attr_dialog_open: () => _attr_details_or_dialog_open,
+  _attr_dialog_open_default: () => _attr_details_or_dialog_open_default,
   _attr_dialog_open_script: () => _attr_details_or_dialog_open_script,
   _attr_input_checked: () => _attr_input_checked,
   _attr_input_checkedValue: () => _attr_input_checkedValue,
+  _attr_input_checkedValue_default: () => _attr_input_checkedValue_default,
   _attr_input_checkedValue_script: () => _attr_input_checkedValue_script,
+  _attr_input_checked_default: () => _attr_input_checked_default,
   _attr_input_checked_script: () => _attr_input_checked_script,
   _attr_input_value: () => _attr_input_value,
+  _attr_input_value_default: () => _attr_input_value_default,
   _attr_input_value_script: () => _attr_input_value_script,
   _attr_nonce: () => _attr_nonce,
   _attr_select_value: () => _attr_select_value,
+  _attr_select_value_default: () => _attr_select_value_default,
   _attr_select_value_script: () => _attr_select_value_script,
   _attr_style: () => _attr_style,
   _attr_style_item: () => _attr_style_item,
   _attr_style_items: () => _attr_style_items,
   _attr_textarea_value: () => _attr_input_value,
+  _attr_textarea_value_default: () => _attr_input_value_default,
   _attr_textarea_value_script: () => _attr_input_value_script,
   _attrs: () => _attrs,
   _attrs_content: () => _attrs_content,
@@ -1083,18 +1090,33 @@ function _el(id, accessor) {
 }
 
 // src/dom/controllable.ts
+var inputType = "";
+var controllableDelegate = createDelegator();
+function _attr_input_checked_default(scope, nodeAccessor, checked) {
+  const el = scope[nodeAccessor];
+  const normalizedChecked = normalizeBoolProp(checked);
+  if (el.defaultChecked !== normalizedChecked) {
+    const restoreValue = scope["#Creating" /* Creating */] ? normalizedChecked : el.checked;
+    el.defaultChecked = normalizedChecked;
+    if (restoreValue !== normalizedChecked) {
+      el.checked = restoreValue;
+    }
+  }
+}
 function _attr_input_checked(scope, nodeAccessor, checked, checkedChange) {
-  setCheckboxValue(
-    scope,
-    nodeAccessor,
-    0 /* InputChecked */,
-    normalizeBoolProp(checked),
-    checkedChange
-  );
+  const el = scope[nodeAccessor];
+  const normalizedChecked = normalizeBoolProp(checked);
+  scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = checkedChange;
+  scope["ControlledType:" /* ControlledType */ + nodeAccessor] = checkedChange ? 0 /* InputChecked */ : 5 /* None */;
+  if (checkedChange && !scope["#Creating" /* Creating */]) {
+    el.checked = normalizedChecked;
+  } else {
+    _attr_input_checked_default(scope, nodeAccessor, normalizedChecked);
+  }
 }
 function _attr_input_checked_script(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
-  syncControllable(el, "input", hasCheckboxChanged, () => {
+  syncControllableFormInput(el, hasCheckboxChanged, () => {
     const checkedChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
     if (checkedChange) {
       const newValue = el.checked;
@@ -1104,20 +1126,36 @@ function _attr_input_checked_script(scope, nodeAccessor) {
     }
   });
 }
-function _attr_input_checkedValue(scope, nodeAccessor, checkedValue, checkedValueChange, value) {
+function _attr_input_checkedValue_default(scope, nodeAccessor, checkedValue, value) {
   const multiple = Array.isArray(checkedValue);
   const normalizedValue = normalizeStrProp(value);
   const normalizedCheckedValue = multiple ? checkedValue.map(normalizeStrProp) : normalizeStrProp(checkedValue);
-  scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizedCheckedValue;
   _attr(scope[nodeAccessor], "value", normalizedValue);
-  setCheckboxValue(
+  _attr_input_checked_default(
     scope,
     nodeAccessor,
-    1 /* InputCheckedValue */,
-    multiple ? normalizedCheckedValue.includes(normalizedValue) : normalizedValue === normalizedCheckedValue,
-    checkedValueChange
+    multiple ? normalizedCheckedValue.includes(normalizedValue) : normalizedValue === normalizedCheckedValue
   );
 }
+function _attr_input_checkedValue(scope, nodeAccessor, checkedValue, checkedValueChange, value) {
+  const el = scope[nodeAccessor];
+  const multiple = Array.isArray(checkedValue);
+  const normalizedValue = normalizeStrProp(value);
+  const normalizedCheckedValue = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = multiple ? checkedValue.map(normalizeStrProp) : normalizeStrProp(checkedValue);
+  _attr(el, "value", normalizedValue);
+  scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = checkedValueChange;
+  scope["ControlledType:" /* ControlledType */ + nodeAccessor] = checkedValueChange ? 1 /* InputCheckedValue */ : 5 /* None */;
+  if (checkedValueChange && !scope["#Creating" /* Creating */]) {
+    el.checked = multiple ? normalizedCheckedValue.includes(normalizedValue) : normalizedValue === normalizedCheckedValue;
+  } else {
+    _attr_input_checkedValue_default(
+      scope,
+      nodeAccessor,
+      normalizedCheckedValue,
+      normalizedValue
+    );
+  }
+}
 function _attr_input_checkedValue_script(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
   if (isResuming && el.defaultChecked) {
@@ -1129,7 +1167,7 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
       scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = el.value;
     }
   }
-  syncControllable(el, "input", hasCheckboxChanged, () => {
+  syncControllableFormInput(el, hasCheckboxChanged, () => {
     const checkedValueChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
     if (checkedValueChange) {
       const oldValue = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor];
@@ -1150,21 +1188,25 @@ function _attr_input_checkedValue_script(scope, nodeAccessor) {
     }
   });
 }
+function _attr_input_value_default(scope, nodeAccessor, value) {
+  const el = scope[nodeAccessor];
+  const normalizedValue = normalizeStrProp(value);
+  if (el.defaultValue !== normalizedValue) {
+    const restoreValue = scope["#Creating" /* Creating */] ? normalizedValue : el.value;
+    el.defaultValue = normalizedValue;
+    setInputValue(el, restoreValue);
+  }
+}
 function _attr_input_value(scope, nodeAccessor, value, valueChange) {
   const el = scope[nodeAccessor];
   const normalizedValue = normalizeStrProp(value);
   scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = valueChange;
-  if (valueChange) {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = 2 /* InputValue */;
-    scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizedValue;
-    if (el.isConnected) {
-      setValueAndUpdateSelection(el, normalizedValue);
-    } else {
-      el.defaultValue = normalizedValue;
-    }
+  scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizedValue;
+  scope["ControlledType:" /* ControlledType */ + nodeAccessor] = valueChange ? 2 /* InputValue */ : 5 /* None */;
+  if (valueChange && !scope["#Creating" /* Creating */]) {
+    setInputValue(el, normalizedValue);
   } else {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = 5 /* None */;
-    el.defaultValue = normalizedValue;
+    _attr_input_value_default(scope, nodeAccessor, normalizedValue);
   }
 }
 function _attr_input_value_script(scope, nodeAccessor) {
@@ -1172,37 +1214,66 @@ function _attr_input_value_script(scope, nodeAccessor) {
   if (isResuming) {
     scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = el.defaultValue;
   }
-  syncControllable(el, "input", hasValueChanged, (ev) => {
+  syncControllableFormInput(el, hasValueChanged, (ev) => {
     const valueChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
     if (valueChange) {
       inputType = ev?.inputType;
       valueChange(el.value);
       run();
-      setValueAndUpdateSelection(
-        el,
-        scope["ControlledValue:" /* ControlledValue */ + nodeAccessor]
-      );
+      setInputValue(el, scope["ControlledValue:" /* ControlledValue */ + nodeAccessor]);
       inputType = "";
     }
   });
 }
+function setInputValue(el, value) {
+  if (el.value !== value) {
+    const updatedPosition = resolveCursorPosition(
+      inputType,
+      el.getRootNode().activeElement === el && el.selectionStart,
+      el.value,
+      el.value = value
+    );
+    if (~updatedPosition) {
+      el.setSelectionRange(updatedPosition, updatedPosition);
+    }
+  }
+}
+function _attr_select_value_default(scope, nodeAccessor, value) {
+  let restoreValue;
+  const el = scope[nodeAccessor];
+  const existing = !scope["#Creating" /* Creating */];
+  const multiple = Array.isArray(value);
+  const normalizedValue = multiple ? value.map(normalizeStrProp) : normalizeStrProp(value);
+  pendingEffects.unshift(() => {
+    for (const opt of el.options) {
+      const selected = multiple ? normalizedValue.includes(opt.value) : opt.value === normalizedValue;
+      if (opt.defaultSelected !== selected) {
+        if (existing) {
+          restoreValue ??= getSelectValue(el, multiple);
+        }
+        opt.defaultSelected = selected;
+      }
+    }
+    if (restoreValue !== void 0) {
+      setSelectValue(el, restoreValue, multiple);
+    }
+  }, scope);
+}
 function _attr_select_value(scope, nodeAccessor, value, valueChange) {
-  const normalizedValue = Array.isArray(value) ? value.map(normalizeStrProp) : normalizeStrProp(value);
+  const el = scope[nodeAccessor];
+  const existing = !scope["#Creating" /* Creating */];
+  const multiple = Array.isArray(value);
+  const normalizedValue = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = multiple ? value.map(normalizeStrProp) : normalizeStrProp(value);
   scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = valueChange;
-  if (valueChange) {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = 3 /* SelectValue */;
-    scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizedValue;
+  scope["ControlledType:" /* ControlledType */ + nodeAccessor] = valueChange ? 3 /* SelectValue */ : 5 /* None */;
+  if (valueChange && existing) {
+    pendingEffects.unshift(
+      () => setSelectValue(el, normalizedValue, multiple),
+      scope
+    );
   } else {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = 5 /* None */;
-  }
-  pendingEffects.unshift(
-    () => setSelectOptions(
-      scope[nodeAccessor],
-      normalizedValue,
-      valueChange
-    ),
-    scope
-  );
+    _attr_select_value_default(scope, nodeAccessor, normalizedValue);
+  }
 }
 function _attr_select_value_script(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
@@ -1210,8 +1281,9 @@ function _attr_select_value_script(scope, nodeAccessor) {
     const valueChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
     if (valueChange) {
       const oldValue = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor];
-      const newValue = Array.isArray(oldValue) ? Array.from(el.selectedOptions, toValueProp) : el.value;
-      setSelectOptions(el, oldValue, valueChange);
+      const multiple = Array.isArray(oldValue);
+      const newValue = getSelectValue(el, multiple);
+      setSelectValue(el, oldValue, multiple);
       valueChange(newValue);
       run();
     }
@@ -1234,98 +1306,62 @@ function _attr_select_value_script(scope, nodeAccessor) {
       }
     }
   }
-  if (!el._) {
-    new MutationObserver(() => {
-      const value = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor];
-      if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((value2, i) => value2 != el.selectedOptions[i].value) : el.value !== value) {
-        onChange();
-      }
-    }).observe(el, {
-      childList: true,
-      subtree: true
-    });
-  }
-  syncControllable(el, "input", hasSelectChanged, onChange);
+  syncControllableFormInput(el, hasSelectChanged, onChange);
+  new MutationObserver(() => {
+    const value = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor];
+    if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((value2, i) => value2 != el.selectedOptions[i].value) : el.value !== value) {
+      onChange();
+    }
+  }).observe(el, { childList: true, subtree: true });
 }
-function setSelectOptions(el, value, valueChange) {
-  if (Array.isArray(value)) {
+function setSelectValue(el, value, multiple) {
+  if (multiple) {
     for (const opt of el.options) {
-      const selected = value.includes(opt.value);
-      if (valueChange) {
-        opt.selected = selected;
-      } else {
-        opt.defaultSelected = selected;
-      }
+      opt.selected = value.includes(opt.value);
     }
   } else {
-    if (valueChange) {
-      el.value = value;
-    } else {
-      for (const opt of el.options) {
-        opt.defaultSelected = opt.value === value;
-      }
-    }
+    el.value = value;
+  }
+}
+function getSelectValue(el, multiple) {
+  return multiple ? Array.from(el.selectedOptions, (opt) => opt.value) : el.value;
+}
+function _attr_details_or_dialog_open_default(scope, nodeAccessor, open) {
+  if (scope["#Creating" /* Creating */]) {
+    scope[nodeAccessor].open = normalizeBoolProp(open);
   }
 }
 function _attr_details_or_dialog_open(scope, nodeAccessor, open, openChange) {
+  const normalizedOpen = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizeBoolProp(open);
   scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = openChange;
   scope["ControlledType:" /* ControlledType */ + nodeAccessor] = openChange ? 4 /* DetailsOrDialogOpen */ : 5 /* None */;
-  scope[nodeAccessor].open = scope["ControlledValue:" /* ControlledValue */ + nodeAccessor] = normalizeBoolProp(open);
+  if (openChange && !scope["#Creating" /* Creating */]) {
+    scope[nodeAccessor].open = normalizedOpen;
+  } else {
+    _attr_details_or_dialog_open_default(scope, nodeAccessor, normalizedOpen);
+  }
 }
 function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
-  const hasChanged = () => el.open === !scope["ControlledValue:" /* ControlledValue */ + nodeAccessor];
-  syncControllable(
-    el,
-    el.tagName === "DIALOG" ? "close" : "toggle",
-    hasChanged,
-    () => {
-      const openChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
-      if (openChange && hasChanged()) {
-        const newValue = el.open;
-        el.open = !newValue;
-        openChange(newValue);
-        run();
-      }
-    }
-  );
-}
-var inputType = "";
-function setValueAndUpdateSelection(el, value) {
-  if (el.value !== value) {
-    const updatedPosition = resolveCursorPosition(
-      inputType,
-      el.getRootNode().activeElement === el && el.selectionStart,
-      el.value,
-      el.value = value
-    );
-    if (~updatedPosition) {
-      el.setSelectionRange(updatedPosition, updatedPosition);
+  new MutationObserver(() => {
+    const openChange = scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor];
+    if (openChange && el.open === !scope["ControlledValue:" /* ControlledValue */ + nodeAccessor]) {
+      const newValue = el.open;
+      el.open = !newValue;
+      openChange(newValue);
+      run();
     }
-  }
+  }).observe(el, { attributes: true, attributeFilter: ["open"] });
 }
-function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
-  scope["ControlledHandler:" /* ControlledHandler */ + nodeAccessor] = checkedChange;
-  if (checkedChange) {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = type;
-    scope[nodeAccessor].checked = checked;
-  } else {
-    scope["ControlledType:" /* ControlledType */ + nodeAccessor] = 5 /* None */;
-    scope[nodeAccessor].defaultChecked = checked;
+function syncControllableFormInput(el, hasChanged, onChange) {
+  el._ = onChange;
+  controllableDelegate(el, "input", handleChange);
+  if (el.form) {
+    controllableDelegate(el.form, "reset", handleFormReset);
   }
-}
-var controllableDelegate = createDelegator();
-function syncControllable(el, event, hasChanged, onChange) {
-  if (!el._) {
-    controllableDelegate(el, event, handleChange);
-    if (el.form) {
-      controllableDelegate(el.form, "reset", handleFormReset);
-    }
-    if (isResuming && hasChanged(el)) {
-      queueMicrotask(onChange);
-    }
+  if (isResuming && hasChanged(el)) {
+    queueMicrotask(onChange);
   }
-  el._ = onChange;
 }
 function handleChange(ev) {
   ev.target._?.(ev);
@@ -1371,9 +1407,6 @@ function updateList(arr, val, push2) {
   const index = arr.indexOf(val);
   return (push2 ? !~index && [...arr, val] : ~index && arr.slice(0, index).concat(arr.slice(index + 1))) || arr;
 }
-function toValueProp(it) {
-  return it.value;
-}
 
 // src/dom/dom.ts
 function _to_text(value) {
@@ -1411,7 +1444,7 @@ function _attr_style_items(element, items) {
   }
 }
 function _attr_style_item(element, name, value) {
-  element.style.setProperty(name, value || value === 0 ? value + "" : "");
+  element.style.setProperty(name, _to_text(value));
 }
 function _attr_nonce(scope, nodeAccessor) {
   _attr(scope[nodeAccessor], "nonce", scope["$global" /* Global */].cspNonce);
@@ -1601,7 +1634,7 @@ function _html(scope, value, accessor) {
   const parentNode = firstChild.parentNode;
   const lastChild = scope["DynamicHTMLLastChild:" /* DynamicHTMLLastChild */ + accessor] || firstChild;
   const newContent = parseHTML(
-    value || value === 0 ? value + "" : "",
+    _to_text(value),
     parentNode.namespaceURI
   );
   insertChildNodes(