@dmitryvim/form-builder 0.5.4 → 0.7.0

package/dist/esm/index.js

@@ -3,12 +3,12 @@ function t(key, state, params) {
   const locale = state.config.locale || "en";
   const localeTranslations = state.config.translations[locale];
   const fallbackTranslations = state.config.translations.en;
-  let text = localeTranslations?.[key] || fallbackTranslations?.[key] || key;
+  let text = localeTranslations?.[key] ?? fallbackTranslations?.[key] ?? key;
   if (params) {
     for (const [paramKey, paramValue] of Object.entries(params)) {
       text = text.replace(
         new RegExp(`\\{${paramKey}\\}`, "g"),
-        String(paramValue)
+        () => String(paramValue)
       );
     }
   }
@@ -58,7 +58,7 @@ function formatFileSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function serializeHiddenValue(value) {
-  if (value === null || value === void 0) return "";
+  if (value === void 0) return "";
   return JSON.stringify(value);
 }
 function deserializeHiddenValue(raw) {
@@ -69,6 +69,23 @@ function deserializeHiddenValue(raw) {
     return raw;
   }
 }
+function readTypedInputValue(input) {
+  if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") return input.checked;
+    if (input.dataset.hiddenField) return deserializeHiddenValue(input.value);
+    if (input.dataset.booleanField) return input.value === "true";
+    if (input.type === "number" || input.type === "range") {
+      if (input.value === "") return null;
+      const parsed = parseFloat(input.value);
+      const decimals = input.dataset.decimals;
+      return decimals !== void 0 ? Number(parsed.toFixed(parseInt(decimals, 10))) : parsed;
+    }
+    if (input.dataset.colourField) {
+      return input.value.toUpperCase();
+    }
+  }
+  return input.value === "" ? null : input.value;
+}
 function createHiddenInput(name, value) {
   const input = document.createElement("input");
   input.type = "hidden";
@@ -78,408 +95,195 @@ function createHiddenInput(name, value) {
   return input;
 }
 
-// src/utils/validation.ts
-function addLengthHint(element, parts, state) {
-  if (element.minLength != null || element.maxLength != null) {
-    if (element.minLength != null && element.maxLength != null) {
-      parts.push(
-        t("hintLengthRange", state, {
-          min: element.minLength,
-          max: element.maxLength
-        })
-      );
-    } else if (element.maxLength != null) {
-      parts.push(t("hintMaxLength", state, { max: element.maxLength }));
-    } else if (element.minLength != null) {
-      parts.push(t("hintMinLength", state, { min: element.minLength }));
-    }
-  }
+// src/utils/styles.ts
+function findErrorAnchor(input) {
+  return input.closest?.(".fb-chip") ?? input.closest?.(".slider-container") ?? input;
 }
-function addRangeHint(element, parts, state) {
-  if (element.min != null || element.max != null) {
-    if (element.min != null && element.max != null) {
-      parts.push(
-        t("hintValueRange", state, { min: element.min, max: element.max })
-      );
-    } else if (element.max != null) {
-      parts.push(t("hintMaxValue", state, { max: element.max }));
-    } else if (element.min != null) {
-      parts.push(t("hintMinValue", state, { min: element.min }));
+function findErrorNode(input) {
+  const anchor = findErrorAnchor(input);
+  const name = input.getAttribute("name");
+  const parent = anchor.parentElement;
+  if (name && parent) {
+    for (const child of Array.from(parent.children)) {
+      if (isInputErrorNode(child) && child.getAttribute("data-error-for") === name) {
+        return child;
+      }
     }
   }
+  const sibling = anchor.nextElementSibling;
+  return sibling && isInputErrorNode(sibling) ? sibling : null;
 }
-function addFileSizeHint(element, parts, state) {
-  const sizeMB = element.maxSize ?? element.maxSizeMB;
-  if (sizeMB && sizeMB !== Infinity) {
-    parts.push(t("hintMaxSize", state, { size: sizeMB }));
-  }
+function isInputErrorNode(node) {
+  return node.classList.contains("error-message") && !node.classList.contains("fb-field-error");
 }
-function addFormatHint(element, parts, state) {
-  if (element.accept?.extensions) {
-    parts.push(
-      t("hintFormats", state, {
-        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
-      })
-    );
+function resolveMark(target, message, scope) {
+  const reported = scope.state.reportedInvalid;
+  if (message === null || scope.readonly) {
+    reported.delete(target);
+    return null;
   }
+  if (scope.draftMarks && !reported.has(target)) return void 0;
+  reported.add(target);
+  return message;
 }
-function addPatternHint(element, parts, state) {
-  if (element.pattern) {
-    parts.push(t("hintPattern", state, { pattern: element.pattern }));
-  }
+function joinErrorMessages(messages) {
+  return messages.length > 0 ? messages.join(" \u2022 ") : null;
 }
-function makeFieldHint(element, state) {
-  const parts = [];
-  addLengthHint(element, parts, state);
-  if (element.type !== "slider") {
-    addRangeHint(element, parts, state);
+function createErrorNode(state, className) {
+  const node = document.createElement("div");
+  node.className = className;
+  node.id = nextDomId(state, "error");
+  node.style.cssText = `
+    display: block;
+    color: var(--fb-error-color);
+    font-size: var(--fb-font-size-small);
+    margin-top: 0.25rem;
+  `;
+  return node;
+}
+function setAttr(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+function nextDomId(state, kind) {
+  return `${state.instanceId}-${kind}-${++state.domIdCounter}`;
+}
+function describedByTokens(target) {
+  return (target.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+}
+var FORM_CONTROL = "input, select, textarea, button";
+var ADDED_ATTRS = "data-fb-mark-added";
+function fieldLabelOf(target) {
+  const field = target.closest(".fb-field-wrapper");
+  const labelRow = field ? Array.from(field.children).find(
+    (child) => child.hasAttribute("data-fb-label-row")
+  ) : void 0;
+  return labelRow?.querySelector("label") ?? null;
+}
+function exposeAsGroup(target, state) {
+  if (target.matches(FORM_CONTROL) || target.hasAttribute(ADDED_ATTRS)) return;
+  const added = [];
+  if (!target.hasAttribute("tabindex")) {
+    target.tabIndex = -1;
+    added.push("tabindex");
+  }
+  if (!target.hasAttribute("role")) {
+    target.setAttribute("role", "group");
+    added.push("role");
+  }
+  const label = fieldLabelOf(target);
+  if (label && !target.hasAttribute("aria-labelledby")) {
+    if (!label.id) label.id = nextDomId(state, "label");
+    target.setAttribute("aria-labelledby", label.id);
+    added.push("aria-labelledby");
+  }
+  target.setAttribute(ADDED_ATTRS, added.join(" "));
+}
+function linkDescription(target, node) {
+  if (!describedByTokens(target).includes(node.id)) {
+    target.setAttribute(
+      "aria-describedby",
+      [...describedByTokens(target), node.id].join(" ")
+    );
   }
-  addFileSizeHint(element, parts, state);
-  addFormatHint(element, parts, state);
-  addPatternHint(element, parts, state);
-  return parts.join(" \u2022 ");
 }
-function validateSchema(schema) {
-  const errors = [];
-  if (!schema || typeof schema !== "object") {
-    errors.push("Schema must be an object");
-    return errors;
-  }
-  if (!Array.isArray(schema.elements)) {
-    errors.push("Schema missing elements array");
-    return errors;
-  }
-  if ("columns" in schema && schema.columns !== void 0) {
-    const columns = schema.columns;
-    const validColumns = [1, 2, 3, 4];
-    if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-      errors.push(`schema.columns must be 1, 2, 3, or 4 (got ${columns})`);
+function setInvalidMark(target, node, state) {
+  setAttr(target, "aria-invalid", "true");
+  exposeAsGroup(target, state);
+  if (node) linkDescription(target, node);
+}
+function unsetInvalidState(target) {
+  target.removeAttribute("aria-invalid");
+  const added = target.getAttribute(ADDED_ATTRS);
+  if (added !== null) {
+    for (const attr of added.split(" ").filter(Boolean)) {
+      target.removeAttribute(attr);
     }
+    target.removeAttribute(ADDED_ATTRS);
   }
-  if ("prefillHints" in schema && schema.prefillHints) {
-    const prefillHints = schema.prefillHints;
-    if (Array.isArray(prefillHints)) {
-      prefillHints.forEach((hint, hintIndex) => {
-        if (!hint.label || typeof hint.label !== "string") {
-          errors.push(
-            `schema.prefillHints[${hintIndex}] must have a 'label' property of type string`
-          );
-        }
-        if (!hint.values || typeof hint.values !== "object") {
-          errors.push(
-            `schema.prefillHints[${hintIndex}] must have a 'values' property of type object`
-          );
-        } else {
-          for (const fieldKey in hint.values) {
-            const fieldExists = schema.elements.some(
-              (element) => element.key === fieldKey
-            );
-            if (!fieldExists) {
-              errors.push(
-                `schema.prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
-              );
-            }
-          }
-        }
-      });
-    }
+}
+function clearInvalidMark(target, node) {
+  unsetInvalidState(target);
+  if (node) {
+    const rest = describedByTokens(target).filter((id) => id !== node.id);
+    if (rest.length > 0) setAttr(target, "aria-describedby", rest.join(" "));
+    else target.removeAttribute("aria-describedby");
+    node.remove();
   }
-  function validateContainerProps(element, elementPath, errors2) {
-    if ("columns" in element && element.columns !== void 0) {
-      const columns = element.columns;
-      const validColumns = [1, 2, 3, 4];
-      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-        errors2.push(
-          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
-        );
-      }
-    }
-    if ("displayMode" in element && element.displayMode !== void 0) {
-      const displayMode = element.displayMode;
-      if (displayMode !== "stack" && displayMode !== "slides") {
-        errors2.push(
-          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
-        );
-      }
-    }
+}
+function drawMark(target, message, existing, createNode, state) {
+  if (message === "") {
+    if (existing) clearInvalidMark(target, existing);
+    setInvalidMark(target, null, state);
+    return;
   }
-  function checkFlatOutputCollisions(elements, scopePath) {
-    const allOutputKeys = /* @__PURE__ */ new Set();
-    for (const el of elements) {
-      if (el.type === "richinput" && el.flatOutput) {
-        const richEl = el;
-        const textKey = richEl.textKey ?? "text";
-        const filesKey = richEl.filesKey ?? "files";
-        for (const otherEl of elements) {
-          if (otherEl === el) continue;
-          if (otherEl.key === textKey) {
-            errors.push(
-              `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with element key "${otherEl.key}"`
-            );
-          }
-          if (otherEl.key === filesKey) {
-            errors.push(
-              `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with element key "${otherEl.key}"`
-            );
-          }
-        }
-        if (allOutputKeys.has(textKey)) {
-          errors.push(
-            `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with another flatOutput key`
-          );
-        }
-        if (allOutputKeys.has(filesKey)) {
-          errors.push(
-            `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with another flatOutput key`
-          );
-        }
-        allOutputKeys.add(textKey);
-        allOutputKeys.add(filesKey);
-      } else {
-        if (el.key) {
-          if (allOutputKeys.has(el.key)) {
-            errors.push(
-              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
-            );
-          }
-          allOutputKeys.add(el.key);
-        }
-      }
-    }
+  const node = existing ?? createNode();
+  if (node.textContent !== message) node.textContent = message;
+  setInvalidMark(target, node, state);
+}
+function markFieldValidity(input, errorMessage, scope) {
+  if (!input) return;
+  const mark = resolveMark(input, errorMessage, scope);
+  if (mark === void 0) return;
+  if (mark === null) {
+    clearFieldError(input);
+    return;
   }
-  function validateCountBounds(element, elementPath, errors2) {
-    const el = element;
-    if (el.type === "group") {
-      if (!isPlainObject(el.repeat)) return;
-      checkBounds(
-        elementPath,
-        el.repeat?.min,
-        el.repeat?.max,
-        "repeat.min",
-        "repeat.max",
-        el.required === true,
-        errors2
-      );
-      return;
-    }
-    const isMultiple = el.multiple === true || el.type === "files";
-    if (!isMultiple) return;
-    checkBounds(
-      elementPath,
-      el.minCount,
-      el.maxCount,
-      "minCount",
-      "maxCount",
-      el.required === true,
-      errors2
+  if (!input.classList.contains("invalid")) input.classList.add("invalid");
+  if (input.title !== mark) input.title = mark;
+  const errorFor = input.getAttribute("name") ?? "";
+  const existing = findErrorNode(input);
+  if (existing) setAttr(existing, "data-error-for", errorFor);
+  drawMark(
+    input,
+    mark,
+    existing,
+    () => {
+      const node = createErrorNode(scope.state, "error-message");
+      node.setAttribute("data-error-for", errorFor);
+      const anchor = findErrorAnchor(input);
+      anchor.parentNode?.insertBefore(node, anchor.nextSibling);
+      return node;
+    },
+    scope.state
+  );
+}
+function clearFieldError(input) {
+  if (input.classList.contains("invalid")) input.classList.remove("invalid");
+  if (input.title !== "") input.title = "";
+  clearInvalidMark(input, findErrorNode(input));
+}
+function markFieldGroupValidity(scopeRoot, fieldPath, errorMessage, scope) {
+  const wrapper = scopeRoot.querySelector(
+    `[data-field-path="${fieldPath}"]`
+  );
+  if (!wrapper) {
+    throw new Error(
+      `markFieldGroupValidity: no [data-field-path="${fieldPath}"] in scope`
     );
   }
-  function checkBounds(elementPath, minCount, maxCount, minName, maxName, requiredImpliesFloor, errors2) {
-    for (const [name, bound] of [
-      [minName, minCount],
-      [maxName, maxCount]
-    ]) {
-      if (bound !== void 0 && typeof bound !== "number") {
-        errors2.push(
-          `${elementPath}: ${name} must be a number (got ${typeof bound})`
-        );
-      }
-    }
-    const min = typeof minCount === "number" ? minCount : void 0;
-    const max = typeof maxCount === "number" ? maxCount : void 0;
-    if (max !== void 0 && (max < 0 || Number.isNaN(max))) {
-      errors2.push(
-        `${elementPath}: ${maxName} must be a non-negative number or Infinity (got ${max})`
-      );
-    }
-    if (min !== void 0 && (min < 0 || !Number.isFinite(min))) {
-      errors2.push(
-        `${elementPath}: ${minName} must be a finite non-negative number (got ${min})`
-      );
-    }
-    const effectiveMin = min ?? (requiredImpliesFloor ? 1 : void 0);
-    if (effectiveMin !== void 0 && max !== void 0 && effectiveMin > max) {
-      const shown = min !== void 0 ? `${minName} (${min})` : `required: true (implies ${minName} 1)`;
-      errors2.push(
-        `${elementPath}: ${shown} cannot be greater than ${maxName} (${max})`
-      );
-    }
+  if (wrapper.getAttribute("data-conditionally-disabled") === "true") return;
+  const mark = resolveMark(wrapper, errorMessage, scope);
+  if (mark === void 0) return;
+  const existing = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("fb-field-error")
+  ) ?? null;
+  if (mark === null) {
+    clearInvalidMark(wrapper, existing);
+    return;
   }
-  function validateElements(elements, path) {
-    elements.forEach((element, index) => {
-      const elementPath = `${path}[${index}]`;
-      if (!element.type) {
-        errors.push(`${elementPath}: missing type`);
-      }
-      if (!element.key && element.type !== "markdown") {
-        errors.push(`${elementPath}: missing key`);
-      }
-      validateCountBounds(element, elementPath, errors);
-      if (element.type === "number" && "decimals" in element) {
-        const decimals = element.decimals;
-        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
-          errors.push(
-            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
-          );
-        }
-      }
-      if (element.type === "markdown") {
-        const content = element.content;
-        if (typeof content !== "string") {
-          errors.push(
-            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
-          );
-        }
-      }
-      if (element.enableIf) {
-        const enableIf = element.enableIf;
-        if (!enableIf.key || typeof enableIf.key !== "string") {
-          errors.push(
-            `${elementPath}: enableIf must have a 'key' property of type string`
-          );
-        }
-        const hasOperator = "equals" in enableIf;
-        if (!hasOperator) {
-          errors.push(
-            `${elementPath}: enableIf must have at least one operator (equals, etc.)`
-          );
-        }
-      }
-      if (element.type === "group" && "elements" in element && element.elements) {
-        validateElements(element.elements, `${elementPath}.elements`);
-      }
-      if (element.type === "container" && element.elements) {
-        validateContainerProps(element, elementPath, errors);
-        if ("prefillHints" in element && element.prefillHints) {
-          const prefillHints = element.prefillHints;
-          if (Array.isArray(prefillHints)) {
-            prefillHints.forEach((hint, hintIndex) => {
-              if (!hint.label || typeof hint.label !== "string") {
-                errors.push(
-                  `${elementPath}: prefillHints[${hintIndex}] must have a 'label' property of type string`
-                );
-              }
-              if (!hint.values || typeof hint.values !== "object") {
-                errors.push(
-                  `${elementPath}: prefillHints[${hintIndex}] must have a 'values' property of type object`
-                );
-              } else {
-                for (const fieldKey in hint.values) {
-                  const fieldExists = element.elements.some(
-                    (childElement) => childElement.key === fieldKey
-                  );
-                  if (!fieldExists) {
-                    errors.push(
-                      `container "${element.key}": prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
-                    );
-                  }
-                }
-              }
-            });
-          }
-        }
-        validateElements(element.elements, `${elementPath}.elements`);
-        checkFlatOutputCollisions(element.elements, `${elementPath}.elements`);
-      }
-      if (element.type === "select" && element.options) {
-        const defaultValue = element.default;
-        if (defaultValue !== void 0 && defaultValue !== null && defaultValue !== "") {
-          const hasMatchingOption = element.options.some(
-            (opt) => opt.value === defaultValue
-          );
-          if (!hasMatchingOption) {
-            errors.push(
-              `${elementPath}: default "${defaultValue}" not in options`
-            );
-          }
-        }
-      }
-    });
-  }
-  if (Array.isArray(schema.elements)) {
-    validateElements(schema.elements, "elements");
-    checkFlatOutputCollisions(schema.elements, "elements");
-  }
-  return errors;
-}
-
-// src/utils/enable-conditions.ts
-function getValueByPath(data, path) {
-  if (!data || typeof data !== "object") {
-    return void 0;
-  }
-  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
-  if (!segments || segments.length === 0) {
-    return void 0;
-  }
-  let current = data;
-  for (const segment of segments) {
-    if (current === void 0 || current === null) {
-      return void 0;
-    }
-    if (segment.startsWith("[") && segment.endsWith("]")) {
-      const index = parseInt(segment.slice(1, -1), 10);
-      if (!Array.isArray(current) || isNaN(index)) {
-        return void 0;
-      }
-      current = current[index];
-    } else {
-      current = current[segment];
-    }
-  }
-  return current;
-}
-function evaluateEnableCondition(condition, formData, containerData) {
-  if (!condition || !condition.key) {
-    throw new Error("Invalid enableIf condition: must have a 'key' property");
-  }
-  const scope = condition.scope ?? "relative";
-  let dataSource;
-  if (scope === "relative") {
-    dataSource = containerData ?? formData;
-  } else if (scope === "absolute") {
-    dataSource = formData;
-  } else {
-    throw new Error(
-      `Invalid enableIf scope: must be "relative" or "absolute" (got "${scope}")`
-    );
-  }
-  const actualValue = getValueByPath(dataSource, condition.key);
-  if ("equals" in condition) {
-    return deepEqual(actualValue, condition.equals);
-  }
-  throw new Error(
-    `Invalid enableIf condition: no recognized operator (equals, etc.)`
+  drawMark(
+    wrapper,
+    mark,
+    existing,
+    () => {
+      const node = createErrorNode(scope.state, "error-message fb-field-error");
+      node.setAttribute("data-error-for", fieldPath);
+      wrapper.appendChild(node);
+      return node;
+    },
+    scope.state
   );
 }
-function deepEqual(a, b) {
-  if (a === b) return true;
-  if (a == null || b == null) return a === b;
-  if (typeof a !== typeof b) return false;
-  if (typeof a === "object" && typeof b === "object") {
-    try {
-      return JSON.stringify(a) === JSON.stringify(b);
-    } catch (e) {
-      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
-        console.warn(
-          "deepEqual: Circular reference detected in enableIf comparison, using reference equality"
-        );
-        return a === b;
-      }
-      throw e;
-    }
-  }
-  return a === b;
-}
-
-// src/utils/styles.ts
-function clearFieldError(input) {
-  const name = input.getAttribute("name");
-  if (!name) return;
-  const doc = input.ownerDocument || document;
-  const errorNode = doc.getElementById(`error-${name}`);
-  if (errorNode) errorNode.remove();
-}
 var BIN_ICON_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
 function ensureThemingHooks(doc) {
   if (doc.head.querySelector("[data-fb-theming-hooks]")) return;
@@ -597,10 +401,17 @@ function ensureThemingHooks(doc) {
 /* .fb-size-md uses defaults \u2014 no override needed */
 .fb-size-lg { --fb-input-padding-y: 2px;  --fb-input-padding-x: 8px;  --fb-font-size: 16px; --fb-font-size-small: 13px; --fb-file-wide-min: 128px; --fb-file-zone-min: 96px; --fb-file-zone-padding: 12px; }
 .fb-size-xl { --fb-input-padding-y: 3px;  --fb-input-padding-x: 8px;  --fb-font-size: 18px; --fb-font-size-small: 14px; --fb-file-wide-min: 160px; --fb-file-zone-min: 120px; --fb-file-zone-padding: 14px; }
+/* !important: controls carry their border inline and JS focus/hover
+   handlers rewrite it, so no weaker rule would ever show the mark. */
+[data-fb-root] input[aria-invalid="true"],
+[data-fb-root] select[aria-invalid="true"],
+[data-fb-root] textarea[aria-invalid="true"] {
+  border-color: var(--fb-error-color) !important;
+}
 `;
   doc.head.appendChild(style);
 }
-function applyAutoExpand(textarea, options = {}) {
+function applyAutoExpand(textarea, options) {
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const minRows = Math.max(1, options.minRows ?? 1);
@@ -630,6 +441,7 @@ function applyAutoExpand(textarea, options = {}) {
   const ro = new ResizeObserver((entries) => {
     if (!textarea.isConnected) {
       ro.disconnect();
+      options.observers?.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -639,6 +451,7 @@ function applyAutoExpand(textarea, options = {}) {
     resize();
   });
   ro.observe(textarea);
+  options.observers?.add(ro);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -773,52 +586,473 @@ function createSlideAddTile(onClick, options = {}) {
     text.textContent = label;
     tile.appendChild(text);
   }
-  tile.addEventListener("mouseenter", () => {
-    if (tile.disabled) return;
-    tile.style.borderStyle = "solid";
-    tile.style.backgroundColor = "var(--fb-background-hover-color)";
-  });
-  tile.addEventListener("mouseleave", () => {
-    tile.style.borderStyle = "dashed";
-    tile.style.backgroundColor = "transparent";
-  });
-  tile.onclick = onClick;
-  const counter = document.createElement("span");
-  counter.className = "fb-add-counter";
-  counter.style.cssText = `
-    margin-left: auto;
-    font-size: var(--fb-font-size-small, 0.875rem);
-    color: var(--fb-text-secondary-color);
-    font-weight: 400;
-  `;
-  const update = (current, max) => {
-    const reached = current >= max;
-    tile.style.display = reached ? "none" : "flex";
-    tile.disabled = reached;
-    counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
-  };
-  return { tile, counter, update };
+  tile.addEventListener("mouseenter", () => {
+    if (tile.disabled) return;
+    tile.style.borderStyle = "solid";
+    tile.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  tile.addEventListener("mouseleave", () => {
+    tile.style.borderStyle = "dashed";
+    tile.style.backgroundColor = "transparent";
+  });
+  tile.onclick = onClick;
+  const counter = document.createElement("span");
+  counter.className = "fb-add-counter";
+  counter.style.cssText = `
+    margin-left: auto;
+    font-size: var(--fb-font-size-small, 0.875rem);
+    color: var(--fb-text-secondary-color);
+    font-weight: 400;
+  `;
+  const update = (current, max) => {
+    const reached = current >= max;
+    tile.style.display = reached ? "none" : "flex";
+    tile.disabled = reached;
+    counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+  };
+  return { tile, counter, update };
+}
+function applyActionButtonStyles(button, isFormLevel = false) {
+  button.style.cssText = `
+    background-color: var(--fb-action-bg-color);
+    color: var(--fb-action-text-color);
+    border: var(--fb-border-width) solid var(--fb-action-border-color);
+    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
+    font-size: var(--fb-font-size);
+    font-weight: var(--fb-font-weight-medium);
+    border-radius: var(--fb-border-radius);
+    transition: all var(--fb-transition-duration);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  `;
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
+    button.style.borderColor = "var(--fb-action-hover-border-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "var(--fb-action-bg-color)";
+    button.style.borderColor = "var(--fb-action-border-color)";
+  });
+}
+
+// src/utils/validation.ts
+function countRuleMessages(element, count, state, keys = { min: "minItems", max: "maxItems" }) {
+  const minCount = "minCount" in element ? element.minCount ?? 0 : 0;
+  const maxCount = "maxCount" in element ? element.maxCount ?? Infinity : Infinity;
+  const messages = [];
+  if (element.required && count === 0) messages.push(t("required", state));
+  if (count < minCount) messages.push(t(keys.min, state, { min: minCount }));
+  if (count > maxCount) messages.push(t(keys.max, state, { max: maxCount }));
+  return messages;
+}
+function validateItemCount(element, key, filledCount, context, errors) {
+  const messages = countRuleMessages(element, filledCount, context.state);
+  errors.push(...messages.map((message) => `${key}: ${message}`));
+  markFieldGroupValidity(
+    context.scopeRoot,
+    key,
+    joinErrorMessages(messages),
+    context
+  );
+}
+function addLengthHint(element, parts, state) {
+  if (element.minLength != null || element.maxLength != null) {
+    if (element.minLength != null && element.maxLength != null) {
+      parts.push(
+        t("hintLengthRange", state, {
+          min: element.minLength,
+          max: element.maxLength
+        })
+      );
+    } else if (element.maxLength != null) {
+      parts.push(t("hintMaxLength", state, { max: element.maxLength }));
+    } else if (element.minLength != null) {
+      parts.push(t("hintMinLength", state, { min: element.minLength }));
+    }
+  }
+}
+function addRangeHint(element, parts, state) {
+  if (element.min != null || element.max != null) {
+    if (element.min != null && element.max != null) {
+      parts.push(
+        t("hintValueRange", state, { min: element.min, max: element.max })
+      );
+    } else if (element.max != null) {
+      parts.push(t("hintMaxValue", state, { max: element.max }));
+    } else if (element.min != null) {
+      parts.push(t("hintMinValue", state, { min: element.min }));
+    }
+  }
+}
+function addFileSizeHint(element, parts, state) {
+  const sizeMB = element.maxSize ?? element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
+  }
+}
+function addFormatHint(element, parts, state) {
+  if (element.accept?.extensions) {
+    parts.push(
+      t("hintFormats", state, {
+        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
+      })
+    );
+  }
+}
+function addPatternHint(element, parts, state) {
+  if (element.pattern) {
+    parts.push(t("hintPattern", state, { pattern: element.pattern }));
+  }
+}
+function makeFieldHint(element, state) {
+  const parts = [];
+  addLengthHint(element, parts, state);
+  if (element.type !== "slider") {
+    addRangeHint(element, parts, state);
+  }
+  addFileSizeHint(element, parts, state);
+  addFormatHint(element, parts, state);
+  addPatternHint(element, parts, state);
+  return parts.join(" \u2022 ");
+}
+function validateSchema(schema) {
+  const errors = [];
+  if (!schema || typeof schema !== "object") {
+    errors.push("Schema must be an object");
+    return errors;
+  }
+  if (!Array.isArray(schema.elements)) {
+    errors.push("Schema missing elements array");
+    return errors;
+  }
+  if ("columns" in schema && schema.columns !== void 0) {
+    const columns = schema.columns;
+    const validColumns = [1, 2, 3, 4];
+    if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+      errors.push(`schema.columns must be 1, 2, 3, or 4 (got ${columns})`);
+    }
+  }
+  if ("prefillHints" in schema && schema.prefillHints) {
+    const prefillHints = schema.prefillHints;
+    if (Array.isArray(prefillHints)) {
+      prefillHints.forEach((hint, hintIndex) => {
+        if (!hint.label || typeof hint.label !== "string") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'label' property of type string`
+          );
+        }
+        if (!hint.values || typeof hint.values !== "object") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'values' property of type object`
+          );
+        } else {
+          for (const fieldKey in hint.values) {
+            const fieldExists = schema.elements.some(
+              (element) => element.key === fieldKey
+            );
+            if (!fieldExists) {
+              errors.push(
+                `schema.prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+  function validateContainerProps(element, elementPath, errors2) {
+    if ("columns" in element && element.columns !== void 0) {
+      const columns = element.columns;
+      const validColumns = [1, 2, 3, 4];
+      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+        errors2.push(
+          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
+        );
+      }
+    }
+    if ("displayMode" in element && element.displayMode !== void 0) {
+      const displayMode = element.displayMode;
+      if (displayMode !== "stack" && displayMode !== "slides") {
+        errors2.push(
+          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
+        );
+      }
+    }
+  }
+  function checkFlatOutputCollisions(elements, scopePath) {
+    const allOutputKeys = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = richEl.textKey ?? "text";
+        const filesKey = richEl.filesKey ?? "files";
+        for (const otherEl of elements) {
+          if (otherEl === el) continue;
+          if (otherEl.key === textKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+          if (otherEl.key === filesKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+        }
+        if (allOutputKeys.has(textKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with another flatOutput key`
+          );
+        }
+        if (allOutputKeys.has(filesKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with another flatOutput key`
+          );
+        }
+        allOutputKeys.add(textKey);
+        allOutputKeys.add(filesKey);
+      } else {
+        if (el.key) {
+          if (allOutputKeys.has(el.key)) {
+            errors.push(
+              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
+            );
+          }
+          allOutputKeys.add(el.key);
+        }
+      }
+    }
+  }
+  function validateCountBounds(element, elementPath, errors2) {
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        el.repeat?.min,
+        el.repeat?.max,
+        "repeat.min",
+        "repeat.max",
+        el.required === true,
+        errors2
+      );
+      return;
+    }
+    const isMultiple = el.multiple === true || el.type === "files";
+    if (!isMultiple) return;
+    checkBounds(
+      elementPath,
+      el.minCount,
+      el.maxCount,
+      "minCount",
+      "maxCount",
+      el.required === true,
+      errors2
+    );
+  }
+  function checkBounds(elementPath, minCount, maxCount, minName, maxName, requiredImpliesFloor, errors2) {
+    for (const [name, bound] of [
+      [minName, minCount],
+      [maxName, maxCount]
+    ]) {
+      if (bound !== void 0 && typeof bound !== "number") {
+        errors2.push(
+          `${elementPath}: ${name} must be a number (got ${typeof bound})`
+        );
+      }
+    }
+    const min = typeof minCount === "number" ? minCount : void 0;
+    const max = typeof maxCount === "number" ? maxCount : void 0;
+    if (max !== void 0 && (max < 0 || Number.isNaN(max))) {
+      errors2.push(
+        `${elementPath}: ${maxName} must be a non-negative number or Infinity (got ${max})`
+      );
+    }
+    if (min !== void 0 && (min < 0 || !Number.isFinite(min))) {
+      errors2.push(
+        `${elementPath}: ${minName} must be a finite non-negative number (got ${min})`
+      );
+    }
+    const effectiveMin = min ?? (requiredImpliesFloor ? 1 : void 0);
+    if (effectiveMin !== void 0 && max !== void 0 && effectiveMin > max) {
+      const shown = min !== void 0 ? `${minName} (${min})` : `required: true (implies ${minName} 1)`;
+      errors2.push(
+        `${elementPath}: ${shown} cannot be greater than ${maxName} (${max})`
+      );
+    }
+  }
+  function validateElements(elements, path) {
+    const seenKeys = /* @__PURE__ */ new Set();
+    elements.forEach((element, index) => {
+      if (!element.key) return;
+      if (seenKeys.has(element.key)) {
+        errors.push(`${path}[${index}]: duplicate key "${element.key}"`);
+      }
+      seenKeys.add(element.key);
+    });
+    elements.forEach((element, index) => {
+      const elementPath = `${path}[${index}]`;
+      if (!element.type) {
+        errors.push(`${elementPath}: missing type`);
+      }
+      if (!element.key && element.type !== "markdown") {
+        errors.push(`${elementPath}: missing key`);
+      }
+      validateCountBounds(element, elementPath, errors);
+      if (element.type === "number" && "decimals" in element) {
+        const decimals = element.decimals;
+        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
+          errors.push(
+            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
+          );
+        }
+      }
+      if (element.type === "markdown") {
+        const content = element.content;
+        if (typeof content !== "string") {
+          errors.push(
+            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
+          );
+        }
+      }
+      if (element.enableIf) {
+        const enableIf = element.enableIf;
+        if (!enableIf.key || typeof enableIf.key !== "string") {
+          errors.push(
+            `${elementPath}: enableIf must have a 'key' property of type string`
+          );
+        }
+        const hasOperator = "equals" in enableIf;
+        if (!hasOperator) {
+          errors.push(
+            `${elementPath}: enableIf must have at least one operator (equals, etc.)`
+          );
+        }
+      }
+      if (element.type === "group" && "elements" in element && element.elements) {
+        validateElements(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "container" && element.elements) {
+        validateContainerProps(element, elementPath, errors);
+        if ("prefillHints" in element && element.prefillHints) {
+          const prefillHints = element.prefillHints;
+          if (Array.isArray(prefillHints)) {
+            prefillHints.forEach((hint, hintIndex) => {
+              if (!hint.label || typeof hint.label !== "string") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'label' property of type string`
+                );
+              }
+              if (!hint.values || typeof hint.values !== "object") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'values' property of type object`
+                );
+              } else {
+                for (const fieldKey in hint.values) {
+                  const fieldExists = element.elements.some(
+                    (childElement) => childElement.key === fieldKey
+                  );
+                  if (!fieldExists) {
+                    errors.push(
+                      `container "${element.key}": prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+                    );
+                  }
+                }
+              }
+            });
+          }
+        }
+        validateElements(element.elements, `${elementPath}.elements`);
+        checkFlatOutputCollisions(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "select" && element.options) {
+        const defaultValue = element.default;
+        if (defaultValue !== void 0 && defaultValue !== null && defaultValue !== "") {
+          const hasMatchingOption = element.options.some(
+            (opt) => opt.value === defaultValue
+          );
+          if (!hasMatchingOption) {
+            errors.push(
+              `${elementPath}: default "${defaultValue}" not in options`
+            );
+          }
+        }
+      }
+    });
+  }
+  if (Array.isArray(schema.elements)) {
+    validateElements(schema.elements, "elements");
+    checkFlatOutputCollisions(schema.elements, "elements");
+  }
+  return errors;
 }
-function applyActionButtonStyles(button, isFormLevel = false) {
-  button.style.cssText = `
-    background-color: var(--fb-action-bg-color);
-    color: var(--fb-action-text-color);
-    border: var(--fb-border-width) solid var(--fb-action-border-color);
-    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
-    font-size: var(--fb-font-size);
-    font-weight: var(--fb-font-weight-medium);
-    border-radius: var(--fb-border-radius);
-    transition: all var(--fb-transition-duration);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  `;
-  button.addEventListener("mouseenter", () => {
-    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
-    button.style.borderColor = "var(--fb-action-hover-border-color)";
-  });
-  button.addEventListener("mouseleave", () => {
-    button.style.backgroundColor = "var(--fb-action-bg-color)";
-    button.style.borderColor = "var(--fb-action-border-color)";
-  });
+
+// src/utils/enable-conditions.ts
+function getValueByPath(data, path) {
+  if (!data || typeof data !== "object") {
+    return void 0;
+  }
+  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
+  if (!segments || segments.length === 0) {
+    return void 0;
+  }
+  let current = data;
+  for (const segment of segments) {
+    if (current === void 0 || current === null) {
+      return void 0;
+    }
+    if (segment.startsWith("[") && segment.endsWith("]")) {
+      const index = parseInt(segment.slice(1, -1), 10);
+      if (!Array.isArray(current) || isNaN(index)) {
+        return void 0;
+      }
+      current = current[index];
+    } else {
+      current = current[segment];
+    }
+  }
+  return current;
+}
+function evaluateEnableCondition(condition, formData, containerData) {
+  if (!condition || !condition.key) {
+    throw new Error("Invalid enableIf condition: must have a 'key' property");
+  }
+  const scope = condition.scope ?? "relative";
+  let dataSource;
+  if (scope === "relative") {
+    dataSource = containerData ?? formData;
+  } else if (scope === "absolute") {
+    dataSource = formData;
+  } else {
+    throw new Error(
+      `Invalid enableIf scope: must be "relative" or "absolute" (got "${scope}")`
+    );
+  }
+  const actualValue = getValueByPath(dataSource, condition.key);
+  if ("equals" in condition) {
+    return deepEqual(actualValue, condition.equals);
+  }
+  throw new Error(
+    `Invalid enableIf condition: no recognized operator (equals, etc.)`
+  );
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a === "object" && typeof b === "object") {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch (e) {
+      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
+        console.warn(
+          "deepEqual: Circular reference detected in enableIf comparison, using reference equality"
+        );
+        return a === b;
+      }
+      throw e;
+    }
+  }
+  return a === b;
 }
 
 // src/components/text.ts
@@ -950,10 +1184,10 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   `;
   textInput.name = pathKey;
   textInput.placeholder = element.placeholder ?? t("placeholderText", state);
-  textInput.value = ctx.prefill[element.key] || element.default || "";
+  textInput.value = ctx.prefill[element.key] ?? element.default ?? "";
   textInput.readOnly = readonly;
   applySingleLineMode(textInput);
-  applyAutoExpand(textInput);
+  applyAutoExpand(textInput, { observers: state.autoExpandObservers });
   if (!readonly) {
     textInput.addEventListener("focus", () => {
       textInput.style.borderColor = "var(--fb-border-focus-color)";
@@ -1011,7 +1245,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       const chip = input.closest(".fb-chip");
       const sib = chip?.nextElementSibling;
       if (sib && sib.classList.contains("error-message")) {
-        sib.id = `error-${input.name}`;
+        sib.setAttribute("data-error-for", input.name);
       }
     });
   }
@@ -1026,7 +1260,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     input.rows = 1;
     input.className = "fb-chip-input";
     input.value = value;
-    input.placeholder = element.placeholder || t("placeholderText", state);
+    input.placeholder = element.placeholder ?? t("placeholderText", state);
     input.readOnly = readonly;
     chip.appendChild(input);
     if (!readonly && ctx.instance) {
@@ -1040,7 +1274,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       input.addEventListener("input", handleChange);
     }
     applySingleLineMode(input);
-    applyAutoExpand(input);
+    applyAutoExpand(input, { observers: state.autoExpandObservers });
     if (!readonly) {
       const rem = document.createElement("button");
       rem.type = "button";
@@ -1103,109 +1337,50 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 }
 function validateTextElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        const chipAncestor = input.closest?.(".fb-chip");
-        const anchor = chipAncestor || input;
-        if (anchor.nextSibling) {
-          anchor.parentNode?.insertBefore(errorElement, anchor.nextSibling);
-        } else {
-          anchor.parentNode?.appendChild(errorElement);
+  const { scopeRoot, state } = context;
+  const lengthOrPatternError = (val) => {
+    if (!val) return null;
+    if (element.minLength != null && val.length < element.minLength) {
+      return t("minLength", state, { min: element.minLength });
+    }
+    if (element.maxLength != null && val.length > element.maxLength) {
+      return t("maxLength", state, { max: element.maxLength });
+    }
+    if (element.pattern) {
+      try {
+        if (!new RegExp(element.pattern).test(val)) {
+          return t("patternMismatch", state);
         }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
+      } catch {
+        return t("invalidPattern", state);
       }
     }
+    return null;
   };
   const validateTextInput = (input, val, fieldKey) => {
-    let hasError = false;
-    const { state } = context;
-    if (!skipValidation && val) {
-      if (element.minLength !== void 0 && element.minLength !== null && val.length < element.minLength) {
-        const msg = t("minLength", state, { min: element.minLength });
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
-        hasError = true;
-      } else if (element.maxLength !== void 0 && element.maxLength !== null && val.length > element.maxLength) {
-        const msg = t("maxLength", state, { max: element.maxLength });
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
-        hasError = true;
-      } else if (element.pattern) {
-        try {
-          const re = new RegExp(element.pattern);
-          if (!re.test(val)) {
-            const msg = t("patternMismatch", state);
-            errors.push(`${fieldKey}: ${msg}`);
-            markValidity(input, msg);
-            hasError = true;
-          }
-        } catch {
-          const msg = t("invalidPattern", state);
-          errors.push(`${fieldKey}: ${msg}`);
-          markValidity(input, msg);
-          hasError = true;
-        }
-      }
-    }
-    if (!hasError) {
-      markValidity(input, null);
-    }
+    const msg = lengthOrPatternError(val);
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(`[name^="${key}\\["]`);
     const values = [];
-    const rawValues = [];
+    let filledCount = 0;
     inputs.forEach((input, index) => {
       const val = input?.value ?? "";
-      rawValues.push(val);
       values.push(val === "" ? null : val);
+      if (val.trim() !== "") filledCount++;
       validateTextInput(input, val, `${key}[${index}]`);
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? Infinity;
-      const filteredValues = rawValues.filter((v) => v.trim() !== "");
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = input?.value ?? "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
+    if (element.required && val === "") {
+      const msg = t("required", state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
     }
     if (input) {
@@ -1227,8 +1402,6 @@ function updateTextField(element, fieldPath, value, context) {
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
-        input.classList.remove("invalid");
-        input.title = "";
         clearFieldError(input);
         input.dispatchEvent(new Event("input", { bubbles: true }));
       }
@@ -1242,8 +1415,6 @@ function updateTextField(element, fieldPath, value, context) {
     const input = scopeRoot.querySelector(`[name="${fieldPath}"]`);
     if (input) {
       input.value = value != null ? String(value) : "";
-      input.classList.remove("invalid");
-      input.title = "";
       clearFieldError(input);
       if (input instanceof HTMLTextAreaElement) {
         input.dispatchEvent(new Event("input", { bubbles: true }));
@@ -1267,8 +1438,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     line-height: var(--fb-line-height, 1.5);
   `;
   textareaInput.name = pathKey;
-  textareaInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.placeholder = element.placeholder ?? t("placeholderText", state);
+  textareaInput.value = ctx.prefill[element.key] ?? element.default ?? "";
   textareaInput.readOnly = readonly;
   if (!readonly && ctx.instance) {
     const handleChange = () => {
@@ -1278,7 +1449,10 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
+  applyAutoExpand(textareaInput, {
+    minRows: element.rows ?? 1,
+    observers: state.autoExpandObservers
+  });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1321,7 +1495,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       font-family: var(--fb-font-family);
       line-height: var(--fb-line-height, 1.5);
     `;
-    textareaInput.placeholder = element.placeholder || t("placeholderText", state);
+    textareaInput.placeholder = element.placeholder ?? t("placeholderText", state);
     textareaInput.value = value;
     textareaInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1332,7 +1506,10 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
+    applyAutoExpand(textareaInput, {
+      minRows: element.rows ?? 1,
+      observers: state.autoExpandObservers
+    });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1551,6 +1728,17 @@ function createNumberRangeHint(element, input) {
   updateColor();
   return hint;
 }
+function numberStepAttr(element) {
+  if (element.step !== void 0) return element.step.toString();
+  if (element.decimals !== void 0)
+    return (10 ** -element.decimals).toString();
+  return "any";
+}
+function applyDecimalsMarker(input, element) {
+  if (element.decimals !== void 0) {
+    input.setAttribute("data-decimals", String(element.decimals));
+  }
+}
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
@@ -1559,11 +1747,12 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   const numberInput = document.createElement("input");
   numberInput.type = "number";
   numberInput.name = pathKey;
-  numberInput.placeholder = element.placeholder || "0";
+  numberInput.placeholder = element.placeholder ?? "0";
   if (element.min !== void 0) numberInput.min = element.min.toString();
   if (element.max !== void 0) numberInput.max = element.max.toString();
-  if (element.step !== void 0) numberInput.step = element.step.toString();
-  numberInput.value = ctx.prefill[element.key] || element.default || "";
+  numberInput.step = numberStepAttr(element);
+  applyDecimalsMarker(numberInput, element);
+  numberInput.value = ctx.prefill[element.key] ?? element.default ?? "";
   numberInput.readOnly = readonly;
   if (!element.stepper) {
     numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
@@ -1602,7 +1791,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "");
+    values.push(element.default ?? "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1631,10 +1820,11 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       width: 100%;
       box-sizing: border-box;
     `;
-    numberInput.placeholder = element.placeholder || "0";
+    numberInput.placeholder = element.placeholder ?? "0";
     if (element.min !== void 0) numberInput.min = element.min.toString();
     if (element.max !== void 0) numberInput.max = element.max.toString();
-    if (element.step !== void 0) numberInput.step = element.step.toString();
+    numberInput.step = numberStepAttr(element);
+    applyDecimalsMarker(numberInput, element);
     numberInput.value = value.toString();
     numberInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1698,8 +1888,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "number",
       () => {
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
+        values.push(element.default ?? "");
+        addNumberItem(element.default ?? "");
         updateAddButton();
         updateRemoveButtons();
         ctx.instance?.triggerOnChange(pathKey);
@@ -1719,56 +1909,27 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 }
 function validateNumberElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
+  const { scopeRoot, state } = context;
+  const rangeError = (v) => {
+    if (element.min != null && v < element.min) {
+      return t("minValue", state, { min: element.min });
     }
+    if (element.max != null && v > element.max) {
+      return t("maxValue", state, { max: element.max });
+    }
+    return null;
   };
-  const validateNumberInput = (input, v, fieldKey) => {
-    let hasError = false;
-    const { state } = context;
-    if (!skipValidation && element.min !== void 0 && element.min !== null && v < element.min) {
-      const msg = t("minValue", state, { min: element.min });
-      errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
-      hasError = true;
-    } else if (!skipValidation && element.max !== void 0 && element.max !== null && v > element.max) {
-      const msg = t("maxValue", state, { max: element.max });
-      errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
-      hasError = true;
-    }
-    if (!hasError) {
-      markValidity(input, null);
+  const validateNumberInput = (input, fieldKey) => {
+    const raw = input.value;
+    if (raw === "") {
+      markFieldValidity(input, null, context);
+      return null;
     }
+    const v = parseFloat(raw);
+    const msg = Number.isFinite(v) ? rangeError(v) : t("notANumber", state);
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
+    return Number.isFinite(v) ? applyDecimals(v, element.decimals) : null;
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
@@ -1776,62 +1937,21 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      const raw = input?.value ?? "";
-      if (raw === "") {
-        values.push(null);
-        markValidity(input, null);
-        return;
-      }
-      const v = parseFloat(raw);
-      if (!skipValidation && !Number.isFinite(v)) {
-        const msg = t("notANumber", context.state);
-        errors.push(`${key}[${index}]: ${msg}`);
-        markValidity(input, msg);
-        values.push(null);
-        return;
-      }
-      validateNumberInput(input, v, `${key}[${index}]`);
-      values.push(applyDecimals(v, element.decimals));
+      values.push(validateNumberInput(input, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? Infinity;
-      const filteredValues = values.filter((v) => v !== null);
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name="${key}"]`);
-    const raw = input?.value ?? "";
-    const { state } = context;
-    if (!skipValidation && element.required && raw === "") {
+    if (element.required && (input?.value ?? "") === "") {
       const msg = t("required", state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
-      return { value: null, errors };
-    }
-    if (raw === "") {
-      markValidity(input, null);
-      return { value: null, errors };
-    }
-    const v = parseFloat(raw);
-    if (!skipValidation && !Number.isFinite(v)) {
-      const msg = t("notANumber", state);
-      errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
     }
-    validateNumberInput(input, v, key);
-    return { value: applyDecimals(v, element.decimals), errors };
+    if (!input) return { value: null, errors };
+    return { value: validateNumberInput(input, key), errors };
   }
 }
 function applyDecimals(v, decimals) {
@@ -1853,8 +1973,6 @@ function updateNumberField(element, fieldPath, value, context) {
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
-        input.classList.remove("invalid");
-        input.title = "";
         clearFieldError(input);
       }
     });
@@ -1869,14 +1987,44 @@ function updateNumberField(element, fieldPath, value, context) {
     );
     if (input) {
       input.value = value != null ? String(value) : "";
-      input.classList.remove("invalid");
-      input.title = "";
       clearFieldError(input);
     }
   }
 }
 
 // src/components/select.ts
+function appendSelectOptions(select, element, selectedValue, state) {
+  const options = element.options || [];
+  if (!options.some((option) => option.value === "")) {
+    const emptyOption = document.createElement("option");
+    emptyOption.value = "";
+    emptyOption.textContent = element.placeholder ?? t("selectPlaceholder", state);
+    select.appendChild(emptyOption);
+  }
+  const strSelected = selectedValue == null ? null : String(selectedValue);
+  let anySelected = false;
+  options.forEach((option) => {
+    const optionEl = document.createElement("option");
+    optionEl.value = option.value;
+    optionEl.textContent = option.label;
+    if (strSelected === option.value) {
+      optionEl.selected = true;
+      anySelected = true;
+    }
+    select.appendChild(optionEl);
+  });
+  if (!anySelected && strSelected !== null && strSelected !== "") {
+    console.warn(
+      `select "${element.key}": prefill value "${strSelected}" is not among the options; leaving the field unselected`
+    );
+  }
+  if (!anySelected) {
+    const empty = Array.from(select.options).find(
+      (option) => option.value === ""
+    );
+    if (empty) empty.selected = true;
+  }
+}
 function renderSelectElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
@@ -1889,18 +2037,18 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   `;
   selectInput.name = pathKey;
   selectInput.disabled = readonly;
-  (element.options || []).forEach((option) => {
-    const optionEl = document.createElement("option");
-    optionEl.value = option.value;
-    optionEl.textContent = option.label;
-    if ((ctx.prefill[element.key] || element.default) === option.value) {
-      optionEl.selected = true;
-    }
-    selectInput.appendChild(optionEl);
-  });
+  appendSelectOptions(
+    selectInput,
+    element,
+    ctx.prefill[element.key] ?? element.default,
+    state
+  );
   if (!readonly && ctx.instance) {
     const handleChange = () => {
-      ctx.instance.triggerOnChange(pathKey, selectInput.value);
+      ctx.instance.triggerOnChange(
+        pathKey,
+        selectInput.value === "" ? null : selectInput.value
+      );
     };
     selectInput.addEventListener("change", handleChange);
   }
@@ -1920,7 +2068,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
+    values.push(element.default ?? "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1945,15 +2093,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       font-family: var(--fb-font-family);
     `;
     selectInput.disabled = readonly;
-    (element.options || []).forEach((option) => {
-      const optionElement = document.createElement("option");
-      optionElement.value = option.value;
-      optionElement.textContent = option.label;
-      if (value === option.value) {
-        optionElement.selected = true;
-      }
-      selectInput.appendChild(optionElement);
-    });
+    appendSelectOptions(selectInput, element, value, state);
     if (!readonly && ctx.instance) {
       const handleChange = () => {
         ctx.instance.triggerOnChange(selectInput.name, selectInput.value);
@@ -2006,7 +2146,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "select",
       () => {
-        const defaultValue = element.default || element.options?.[0]?.value || "";
+        const defaultValue = element.default ?? "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
@@ -2034,55 +2174,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 }
 function validateSelectElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
-  const validateMultipleCount = (key2, values, element2, filterFn) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxCount = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
-    if (element2.required && filteredValues.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (filteredValues.length < minCount) {
-      errors.push(`${key2}: ${t("minItems", state, { min: minCount })}`);
-    }
-    if (filteredValues.length > maxCount) {
-      errors.push(`${key2}: ${t("maxItems", state, { max: maxCount })}`);
-    }
-  };
+  const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
       `[name^="${key}\\["]`
@@ -2090,27 +2182,36 @@ function validateSelectElement(element, key, context) {
     const values = [];
     inputs.forEach((input) => {
       const val = input?.value ?? "";
-      values.push(val);
-      markValidity(input, null);
+      values.push(val === "" ? null : val);
+      markFieldValidity(input, null, context);
     });
-    validateMultipleCount(key, values, element, (v) => v !== "");
+    const filledCount = values.filter((v) => v != null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(
-      `[name="${key}"]`
-    );
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = input?.value ?? "";
-    if (!skipValidation && element.required && val === "") {
+    if (element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
-    } else {
-      markValidity(input, null);
     }
+    markFieldValidity(input, null, context);
     return { value: val === "" ? null : val, errors };
   }
 }
+function assertValueInOptions(select, strValue, fieldPath) {
+  if (strValue === "") return;
+  const match = Array.from(select.options).some(
+    (option) => option.value === strValue
+  );
+  if (!match) {
+    throw new Error(
+      `updateSelectField: value "${strValue}" is not among the options of "${fieldPath}"`
+    );
+  }
+}
 function updateSelectField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
@@ -2125,13 +2226,18 @@ function updateSelectField(element, fieldPath, value, context) {
     );
     selects.forEach((select, index) => {
       if (index < value.length) {
-        select.value = value[index] != null ? String(value[index]) : "";
+        const strValue = value[index] != null ? String(value[index]) : "";
+        assertValueInOptions(select, strValue, `${fieldPath}[${index}]`);
+      }
+    });
+    selects.forEach((select, index) => {
+      if (index < value.length) {
+        const strValue = value[index] != null ? String(value[index]) : "";
+        select.value = strValue;
         const options = select.querySelectorAll("option");
         options.forEach((option) => {
-          option.selected = option.value === String(value[index]);
+          option.selected = option.value === strValue;
         });
-        select.classList.remove("invalid");
-        select.title = "";
         clearFieldError(select);
       }
     });
@@ -2145,13 +2251,13 @@ function updateSelectField(element, fieldPath, value, context) {
       `[name="${fieldPath}"]`
     );
     if (select) {
-      select.value = value != null ? String(value) : "";
+      const strValue = value != null ? String(value) : "";
+      assertValueInOptions(select, strValue, fieldPath);
+      select.value = strValue;
       const options = select.querySelectorAll("option");
       options.forEach((option) => {
-        option.selected = option.value === String(value);
+        option.selected = option.value === strValue;
       });
-      select.classList.remove("invalid");
-      select.title = "";
       clearFieldError(select);
     }
   }
@@ -2351,7 +2457,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
+    values.push(element.default ?? "");
   }
   const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
@@ -2445,7 +2551,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "switcher",
       () => {
-        const defaultValue = element.default || element.options?.[0]?.value || "";
+        const defaultValue = element.default ?? "";
         values.push(defaultValue);
         addSwitcherItem(defaultValue);
         updateAddButton();
@@ -2462,69 +2568,22 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
     if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addSwitcherItem(value));
-  updateAddButton();
-  updateRemoveButtons();
-  if (!readonly) {
-    const hint = document.createElement("p");
-    hint.className = "text-xs text-gray-500 mt-1";
-    hint.textContent = makeFieldHint(element, state);
-    wrapper.appendChild(hint);
-  }
-}
-function validateSwitcherElement(element, key, context) {
-  const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
-  const validateMultipleCount = (fieldKey, values, el, filterFn) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? el.minCount ?? 0 : 0;
-    const maxCount = "maxCount" in el ? el.maxCount ?? Infinity : Infinity;
-    if (el.required && filteredValues.length === 0) {
-      errors.push(`${fieldKey}: ${t("required", state)}`);
-    }
-    if (filteredValues.length < minCount) {
-      errors.push(`${fieldKey}: ${t("minItems", state, { min: minCount })}`);
-    }
-    if (filteredValues.length > maxCount) {
-      errors.push(`${fieldKey}: ${t("maxItems", state, { max: maxCount })}`);
-    }
-  };
+  updateAddButton();
+  updateRemoveButtons();
+  if (!readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
+}
+function validateSwitcherElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, state } = context;
   const validOptionValues = new Set(
     "options" in element ? element.options.map((o) => o.value) : []
   );
+  const optionError = (val) => val !== "" && !validOptionValues.has(val) ? t("invalidOption", state) : null;
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
       `input[type="hidden"][name^="${key}\\["]`
@@ -2532,38 +2591,37 @@ function validateSwitcherElement(element, key, context) {
     const values = [];
     inputs.forEach((input) => {
       const val = input?.value ?? "";
-      values.push(val);
-      if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
-        const msg = t("invalidOption", context.state);
-        markValidity(input, msg);
-        errors.push(`${key}: ${msg}`);
-      } else {
-        markValidity(input, null);
-      }
+      values.push(val === "" ? null : val);
+      const msg = optionError(val);
+      if (msg !== null) errors.push(`${key}: ${msg}`);
+      markFieldValidity(switcherGroupOf(input), msg, context);
     });
-    validateMultipleCount(key, values, element, (v) => v !== "");
+    const filledCount = values.filter((v) => v != null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
       `input[type="hidden"][name="${key}"]`
     );
     const val = input?.value ?? "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
+    const msg = element.required && val === "" ? t("required", state) : optionError(val);
+    if (input) markFieldValidity(switcherGroupOf(input), msg, context);
+    if (msg !== null) {
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
       return { value: null, errors };
     }
-    if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
-      const msg = t("invalidOption", context.state);
-      errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
-      return { value: null, errors };
-    }
-    markValidity(input, null);
     return { value: val === "" ? null : val, errors };
   }
 }
+function switcherGroupOf(input) {
+  const group = input.parentElement?.querySelector(".fb-switcher-group");
+  if (!group) {
+    throw new Error(
+      `switcher "${input.name}": no .fb-switcher-group next to its hidden input`
+    );
+  }
+  return group;
+}
 function updateSwitcherField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
@@ -2591,9 +2649,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
             }
           });
         }
-        input.classList.remove("invalid");
-        input.title = "";
-        clearFieldError(input);
+        clearFieldError(switcherGroupOf(input));
       }
     });
     if (value.length !== inputs.length) {
@@ -2619,9 +2675,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
           }
         });
       }
-      input.classList.remove("invalid");
-      input.title = "";
-      clearFieldError(input);
+      clearFieldError(switcherGroupOf(input));
     }
   }
 }
@@ -2732,6 +2786,7 @@ function renderBooleanElement(element, ctx, wrapper, pathKey) {
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
+  hiddenInput.setAttribute("data-boolean-field", "true");
   hiddenInput.value = initial ? "true" : "false";
   const row = document.createElement("div");
   row.className = "fb-toggle-row";
@@ -3142,14 +3197,20 @@ function ensureFileStyles() {
   padding: 6px;
 }
 
-/* \u2500\u2500\u2500 Clear-all row below multi grid \u2500\u2500\u2500 */
-.fb-clear-all-row {
+/* \u2500\u2500\u2500 Footer row below multi grid: N/max counter + clear-all \u2500\u2500\u2500 */
+.fb-multi-footer {
   margin-top: 10px;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  gap: 8px;
+}
+.fb-files-counter {
+  font-size: var(--fb-font-size-small, 12px);
+  color: var(--fb-text-secondary-color, #6b7280);
+  font-variant-numeric: tabular-nums;
 }
 .fb-clear-all-btn {
+  margin-left: auto;
   font-size: 12px;
   color: #94a3b8;
   background: none;
@@ -3399,22 +3460,54 @@ function createFileTile() {
   tile.className = "fb-tile";
   return tile;
 }
-function showFileError(container, message) {
-  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
-  const errorEl = document.createElement("div");
-  errorEl.className = "file-error-message error-message";
-  errorEl.style.cssText = `
-    color: var(--fb-error-color);
-    font-size: var(--fb-font-size-small);
-    margin-top: 0.25rem;
-  `;
-  errorEl.textContent = message;
-  container.closest("[data-files-wrapper]")?.appendChild(errorEl);
+function fileErrorSlot(container) {
+  const wrapper = container.closest("[data-files-wrapper]");
+  const node = wrapper ? Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("file-error-message")
+  ) ?? null : null;
+  return { wrapper, node };
+}
+function showFileError(container, message, state, kind = "action") {
+  const { wrapper, node: existing } = fileErrorSlot(container);
+  if (!wrapper) return;
+  let node = existing;
+  if (!node) {
+    node = createErrorNode(state, "file-error-message error-message");
+    wrapper.appendChild(node);
+  }
+  setAttr(node, "data-error-kind", kind);
+  if (node.textContent !== message) node.textContent = message;
+  if (kind === "action") {
+    setAttr(node, "role", "alert");
+    unsetInvalidState(wrapper);
+    linkDescription(wrapper, node);
+  } else {
+    node.removeAttribute("role");
+    setInvalidMark(wrapper, node, state);
+  }
+}
+function clearFileError(container, kind = "action") {
+  const { wrapper, node } = fileErrorSlot(container);
+  if (wrapper && node?.dataset.errorKind === kind) {
+    clearInvalidMark(wrapper, node);
+  }
 }
-function clearFileError(container) {
-  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
+function markFileValidity(wrapper, message, scope) {
+  const mark = resolveMark(wrapper, message, scope);
+  if (mark === void 0) return;
+  const { node } = fileErrorSlot(wrapper);
+  if (scope.readonly) {
+    clearInvalidMark(wrapper, node);
+    return;
+  }
+  if (mark === null) {
+    clearFileError(wrapper, "validation");
+    return;
+  }
+  if (scope.draftMarks && node && node.dataset.errorKind !== "validation") {
+    return;
+  }
+  showFileError(wrapper, mark, scope.state, "validation");
 }
 function addDeleteButton(container, state, onDelete) {
   const existingOverlay = container.querySelector(".delete-overlay");
@@ -4269,7 +4362,8 @@ async function handleFileSelect(opts) {
     const formats = allowedExtensions.join(", ");
     showFileError(
       container,
-      t("invalidFileExtension", state, { name: file.name, formats })
+      t("invalidFileExtension", state, { name: file.name, formats }),
+      state
     );
     return;
   }
@@ -4277,14 +4371,16 @@ async function handleFileSelect(opts) {
     const mimes = allowedMimes.join(", ");
     showFileError(
       container,
-      t("invalidFileMime", state, { name: file.name, type: file.type, mimes })
+      t("invalidFileMime", state, { name: file.name, type: file.type, mimes }),
+      state
     );
     return;
   }
   if (!isFileSizeAllowed(file, maxSizeMB)) {
     showFileError(
       container,
-      t("fileTooLarge", state, { name: file.name, maxSize: maxSizeMB })
+      t("fileTooLarge", state, { name: file.name, maxSize: maxSizeMB }),
+      state
     );
     return;
   }
@@ -4480,7 +4576,7 @@ async function runMultiFileBatch(opts, files, listEl, errorTarget) {
     state
   );
   if (errorTarget) {
-    if (errorMessage) showFileError(errorTarget, errorMessage);
+    if (errorMessage) showFileError(errorTarget, errorMessage, state);
     else clearFileError(errorTarget);
   }
   const handle = coordinator.beginBatch(accepted.length);
@@ -4499,11 +4595,8 @@ async function runMultiFileBatch(opts, files, listEl, errorTarget) {
   }
   const { wasLast } = handle.end();
   if (wasLast) updateCallback();
-  if (errorTarget) {
-    const combined = buildBatchErrorMessage(errorMessage, failures, state);
-    if (combined) showFileError(errorTarget, combined);
-    else clearFileError(errorTarget);
-  }
+  const combined = buildBatchErrorMessage(errorMessage, failures, state);
+  if (errorTarget && combined) showFileError(errorTarget, combined, state);
 }
 function setupFilesDropHandler(opts) {
   const { filesContainer } = opts;
@@ -4613,7 +4706,7 @@ async function handleLibraryPickMulti(opts) {
       selectedResourceIds: knownRids
     });
   } catch (error) {
-    showFileError(wrapper, extractPickerError(error, state));
+    showFileError(wrapper, extractPickerError(error, state), state);
     return;
   }
   if (picked.length === 0) return;
@@ -4641,7 +4734,8 @@ async function handleLibraryPickMulti(opts) {
     if (skipped > 0) {
       showFileError(
         wrapper,
-        t("filesLimitExceeded", state, { skipped, max: maxCount })
+        t("filesLimitExceeded", state, { skipped, max: maxCount }),
+        state
       );
     }
     return;
@@ -4650,7 +4744,8 @@ async function handleLibraryPickMulti(opts) {
   if (skipped > 0) {
     showFileError(
       wrapper,
-      t("filesLimitExceeded", state, { skipped, max: maxCount })
+      t("filesLimitExceeded", state, { skipped, max: maxCount }),
+      state
     );
   }
   for (const resource of accepted) {
@@ -4687,7 +4782,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
       selectedResourceIds: []
     });
   } catch (error) {
-    showFileError(container, extractPickerError(error, state));
+    showFileError(container, extractPickerError(error, state), state);
     return;
   }
   if (picked.length === 0) return;
@@ -4700,7 +4795,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
     state
   );
   if (validationError !== null) {
-    showFileError(container, validationError);
+    showFileError(container, validationError, state);
     return;
   }
   clearFileError(container);
@@ -4937,10 +5032,7 @@ function buildPlaceholderTile(isDragOver = false) {
   div.className = `fb-multi-placeholder fb-checker${isDragOver ? " fb-drag-over" : ""}`;
   return div;
 }
-function buildClearAllRow(state, ridCount, onClearAll) {
-  if (ridCount <= 1) return null;
-  const row = document.createElement("div");
-  row.className = "fb-clear-all-row";
+function buildClearAllButton(state, onClearAll) {
   const clearBtn = document.createElement("button");
   clearBtn.type = "button";
   clearBtn.className = "fb-clear-all-btn";
@@ -4951,9 +5043,38 @@ function buildClearAllRow(state, ridCount, onClearAll) {
       onClearAll();
     }
   };
-  row.appendChild(clearBtn);
+  return clearBtn;
+}
+function buildFooterRow(state, ridCount, maxCount, onClearAll) {
+  const showCounter = maxCount !== Infinity;
+  const showClearAll = onClearAll !== void 0 && ridCount > 1;
+  if (!showCounter && !showClearAll) return null;
+  const row = document.createElement("div");
+  row.className = "fb-multi-footer";
+  if (showCounter) {
+    const counter = document.createElement("span");
+    counter.className = "fb-files-counter";
+    counter.textContent = t("filesCounter", state, {
+      count: ridCount,
+      max: maxCount
+    });
+    row.appendChild(counter);
+  }
+  if (showClearAll) row.appendChild(buildClearAllButton(state, onClearAll));
   return row;
 }
+function syncOverLimitError(container, ridCount, maxCount, state) {
+  if (ridCount > maxCount) {
+    showFileError(
+      container,
+      t("maxFiles", state, { max: maxCount }),
+      state,
+      "limit"
+    );
+  } else {
+    clearFileError(container, "limit");
+  }
+}
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
 var gridMeasureFrames = /* @__PURE__ */ new WeakMap();
 function cancelPendingMeasure(container) {
@@ -5046,6 +5167,7 @@ function renderResourcePills(opts) {
         grid2.appendChild(tile);
       }
     }
+    clearFileError(container, "limit");
     return;
   }
   const outerDiv = document.createElement("div");
@@ -5125,10 +5247,14 @@ function renderResourcePills(opts) {
       }
     }
   });
-  if (onClearAll) {
-    const row = buildClearAllRow(state, ridList.length, onClearAll);
-    if (row) container.appendChild(row);
-  }
+  const footer = buildFooterRow(
+    state,
+    ridList.length,
+    effectiveMax,
+    onClearAll
+  );
+  if (footer) container.appendChild(footer);
+  syncOverLimitError(container, ridList.length, effectiveMax, state);
 }
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -5278,8 +5404,9 @@ function buildAcceptAttribute(accept) {
     ...accept.mime ?? []
   ].join(",");
 }
-function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
+function renderMultiFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const maxFiles = element.maxCount ?? Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "fb-row";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -5483,21 +5610,23 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   };
   setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
   setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
+  state.multiFileSetters.set(filesWrapper, (resourceIds) => {
+    if (coordinator.hasInFlightBatches()) {
+      throw new Error(
+        `setFormData/updateField: file field "${pathKey}" has uploads in flight; set its value after they settle`
+      );
+    }
+    for (const rid of initialFiles) {
+      if (!resourceIds.includes(rid)) {
+        releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+      }
+    }
+    initialFiles.splice(0, initialFiles.length, ...resourceIds);
+    updateFilesDisplay();
+  });
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
-function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
-  setupMultiFileEditMode(element, ctx, wrapper, pathKey, Infinity);
-}
-function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
-  setupMultiFileEditMode(
-    element,
-    ctx,
-    wrapper,
-    pathKey,
-    element.maxCount ?? Infinity
-  );
-}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -5519,86 +5648,100 @@ function readMultiFileResourceIds(scopeRoot, fullKey) {
   }
   return parsed;
 }
-function validateFileCount(key, resourceIds, element, state, errors) {
-  const minFiles = "minCount" in element ? element.minCount ?? 0 : 0;
-  const maxFiles = "maxCount" in element ? element.maxCount ?? Infinity : Infinity;
-  if (element.required && resourceIds.length === 0) {
-    errors.push(`${key}: ${t("required", state)}`);
-  }
-  if (resourceIds.length < minFiles) {
-    errors.push(`${key}: ${t("minFiles", state, { min: minFiles })}`);
-  }
-  if (resourceIds.length > maxFiles) {
-    errors.push(`${key}: ${t("maxFiles", state, { max: maxFiles })}`);
-  }
-}
-function validateFileTypes(key, resourceIds, element, state, errors) {
+function validateFileTypes(resourceIds, element, state) {
+  const messages = [];
   const acceptField = "accept" in element ? element.accept : void 0;
   const allowedExtensions = getAllowedExtensions(acceptField);
   const allowedMimes = getAllowedMimes(acceptField);
-  if (allowedExtensions.length === 0 && allowedMimes.length === 0) return;
+  if (allowedExtensions.length === 0 && allowedMimes.length === 0) {
+    return messages;
+  }
   const formats = allowedExtensions.join(", ");
   const mimes = allowedMimes.join(", ");
   for (const rid of resourceIds) {
     const meta = state.resourceIndex.get(rid);
     const fileName = meta?.name ?? rid;
     if (allowedExtensions.length > 0 && !isFileExtensionAllowed(fileName, allowedExtensions)) {
-      errors.push(
-        `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+      messages.push(
+        t("invalidFileExtension", state, { name: fileName, formats })
       );
       continue;
     }
     if (allowedMimes.length > 0 && !meta?.inferredFromExtension) {
       const mimeType = meta?.type ?? "";
       if (!isMimeAllowed(mimeType, allowedMimes)) {
-        errors.push(
-          `${key}: ${t("invalidFileMime", state, { name: fileName, type: mimeType, mimes })}`
+        messages.push(
+          t("invalidFileMime", state, {
+            name: fileName,
+            type: mimeType,
+            mimes
+          })
         );
       }
     }
   }
+  return messages;
 }
-function validateFileSizes(key, resourceIds, element, state, errors) {
+function validateFileSizes(resourceIds, element, state) {
+  const messages = [];
   const maxSizeMB = "maxSize" in element ? element.maxSize ?? Infinity : Infinity;
-  if (maxSizeMB === Infinity) return;
+  if (maxSizeMB === Infinity) return messages;
   for (const rid of resourceIds) {
     const meta = state.resourceIndex.get(rid);
     if (!meta) continue;
     if (meta.size > maxSizeMB * 1024 * 1024) {
-      errors.push(
-        `${key}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
+      messages.push(
+        t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })
       );
     }
   }
+  return messages;
+}
+function reportFileMessages(scopeRoot, wrapperKey, key, messages, context) {
+  const wrapper = scopeRoot.querySelector(
+    `[data-files-wrapper="${wrapperKey}"]`
+  );
+  if (wrapper) {
+    markFileValidity(wrapper, joinErrorMessages(messages), context);
+  }
+  return messages.map((message) => `${key}: ${message}`);
 }
 function validateMultiFile(element, key, context) {
-  const { scopeRoot, skipValidation, path, state } = context;
-  const errors = [];
+  const { scopeRoot, path, state } = context;
   const fullKey = pathJoin(path, key);
   const resourceIds = readMultiFileResourceIds(scopeRoot, fullKey);
-  if (!skipValidation) {
-    validateFileCount(key, resourceIds, element, state, errors);
-    validateFileTypes(key, resourceIds, element, state, errors);
-    validateFileSizes(key, resourceIds, element, state, errors);
-  }
-  return { value: resourceIds, errors };
+  const messages = [
+    ...countRuleMessages(element, resourceIds.length, state, {
+      min: "minFiles",
+      max: "maxFiles"
+    }),
+    ...validateFileTypes(resourceIds, element, state),
+    ...validateFileSizes(resourceIds, element, state)
+  ];
+  return {
+    value: resourceIds,
+    errors: reportFileMessages(scopeRoot, fullKey, key, messages, context)
+  };
 }
 function validateSingleFile(element, key, context) {
-  const { scopeRoot, skipValidation, state } = context;
-  const errors = [];
+  const { scopeRoot, state } = context;
   const input = scopeRoot.querySelector(
     `input[name="${key}"][type="hidden"]`
   );
   const rid = input?.value ?? "";
-  if (!skipValidation && element.required && rid === "") {
-    errors.push(`${key}: ${t("required", state)}`);
-    return { value: null, errors };
-  }
-  if (!skipValidation && rid !== "") {
-    validateFileTypes(key, [rid], element, state, errors);
-    validateFileSizes(key, [rid], element, state, errors);
+  let messages = [];
+  if (element.required && rid === "") {
+    messages = [t("required", state)];
+  } else if (rid !== "") {
+    messages = [
+      ...validateFileTypes([rid], element, state),
+      ...validateFileSizes([rid], element, state)
+    ];
   }
-  return { value: rid || null, errors };
+  return {
+    value: rid || null,
+    errors: reportFileMessages(scopeRoot, key, key, messages, context)
+  };
 }
 function validateFileElement(element, key, context) {
   const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
@@ -5648,12 +5791,20 @@ function buildEmptyReadonlyTile(state) {
   return emptyState;
 }
 function renderMultiFileReadonly(rids, state, wrapper, pathKey, _marginTop) {
-  addPrefillFilesToIndex(rids, state.resourceIndex);
-  ensureFileStyles();
   const filesWrapper = document.createElement("div");
   filesWrapper.dataset.filesWrapper = pathKey;
-  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
   wrapper.appendChild(filesWrapper);
+  state.multiFileSetters.set(
+    filesWrapper,
+    (resourceIds) => fillReadonlyGrid(resourceIds, state, filesWrapper)
+  );
+  fillReadonlyGrid(rids, state, filesWrapper);
+}
+function fillReadonlyGrid(rids, state, filesWrapper) {
+  addPrefillFilesToIndex(rids, state.resourceIndex);
+  ensureFileStyles();
+  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
+  filesWrapper.replaceChildren();
   if (rids.length === 0) {
     const emptyEl = document.createElement("div");
     emptyEl.className = "fb-tile-empty-text";
@@ -5713,14 +5864,14 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
   if (isElementReadonly(element, ctx.state, ctx)) {
     renderFilesElementReadonly(element, ctx, wrapper, pathKey);
   } else {
-    renderFilesElementEdit(element, ctx, wrapper, pathKey);
+    renderMultiFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
   if (isElementReadonly(element, ctx.state, ctx)) {
     renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey);
   } else {
-    renderMultipleFileElementEdit(element, ctx, wrapper, pathKey);
+    renderMultiFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function updateFileField(element, fieldPath, value, context) {
@@ -5740,13 +5891,19 @@ function updateFileField(element, fieldPath, value, context) {
     const filesWrapper = scopeRoot.querySelector(
       `[data-files-wrapper="${fieldPath}"]`
     );
-    if (filesWrapper) {
-      filesWrapper.dataset.resourceIds = JSON.stringify(value);
-    } else {
+    if (!filesWrapper) {
       console.warn(
         `updateFileField: [data-files-wrapper="${fieldPath}"] not found in DOM; data-resource-ids not updated`
       );
+      return;
+    }
+    const setFiles = state.multiFileSetters.get(filesWrapper);
+    if (!setFiles) {
+      throw new Error(
+        `updateFileField: [data-files-wrapper="${fieldPath}"] has no registered setter; this is a render bug`
+      );
     }
+    setFiles(value);
   } else {
     const hiddenInput = scopeRoot.querySelector(
       `input[name="${fieldPath}"][type="hidden"]`
@@ -5807,7 +5964,7 @@ function createReadonlyColourUI(value) {
   container.appendChild(hexText);
   return container;
 }
-function createEditColourUI(value, pathKey, ctx) {
+function createEditColourUI(value, pathKey, ctx, placeholder) {
   const normalizedValue = normalizeColourValue(value);
   const pickerWrapper = document.createElement("div");
   pickerWrapper.className = "colour-picker-wrapper";
@@ -5831,9 +5988,10 @@ function createEditColourUI(value, pathKey, ctx) {
   const hexInput = document.createElement("input");
   hexInput.type = "text";
   hexInput.className = "colour-hex-input";
+  hexInput.setAttribute("data-colour-field", "true");
   hexInput.name = pathKey;
   hexInput.value = normalizedValue;
-  hexInput.placeholder = "#000000";
+  hexInput.placeholder = placeholder ?? "#000000";
   hexInput.style.cssText = `
     width: 100px;
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
@@ -5922,12 +6080,17 @@ function createEditColourUI(value, pathKey, ctx) {
 function renderColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
-  const initialValue = ctx.prefill[element.key] || element.default || "#000000";
+  const initialValue = ctx.prefill[element.key] ?? element.default ?? "#000000";
   if (readonly) {
     const readonlyUI = createReadonlyColourUI(initialValue);
     wrapper.appendChild(readonlyUI);
   } else {
-    const editUI = createEditColourUI(initialValue, pathKey, ctx);
+    const editUI = createEditColourUI(
+      initialValue,
+      pathKey,
+      ctx,
+      element.placeholder
+    );
     wrapper.appendChild(editUI);
   }
   if (!readonly) {
@@ -5949,7 +6112,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "#000000");
+    values.push(element.default ?? "#000000");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -5973,7 +6136,12 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
       }
     } else {
       const tempPathKey = `${pathKey}[${container.children.length}]`;
-      const editUI = createEditColourUI(value, tempPathKey, ctx);
+      const editUI = createEditColourUI(
+        value,
+        tempPathKey,
+        ctx,
+        element.placeholder
+      );
       editUI.style.flex = "1";
       itemWrapper.appendChild(editUI);
     }
@@ -6035,7 +6203,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "colour",
       () => {
-        const defaultColour = element.default || "#000000";
+        const defaultColour = element.default ?? "#000000";
         values.push(defaultColour);
         addColourItem(defaultColour);
         updateAddButton();
@@ -6067,60 +6235,18 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
 }
 function validateColourElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
+  const { scopeRoot, state } = context;
   const validateColourValue = (input, val, fieldKey) => {
-    const { state } = context;
+    const normalized = val ? normalizeColourValue(val) : "";
+    let msg = null;
     if (!val) {
-      if (!skipValidation && element.required) {
-        const msg = t("required", state);
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
-        return "";
-      }
-      markValidity(input, null);
-      return "";
-    }
-    const normalized = normalizeColourValue(val);
-    if (!skipValidation && !isValidHexColour(normalized)) {
-      const msg = t("invalidHexColour", state);
-      errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
-      return val;
-    }
-    markValidity(input, null);
-    return normalized;
+      if (element.required) msg = t("required", state);
+    } else if (!isValidHexColour(normalized)) {
+      msg = t("invalidHexColour", state);
+    }
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
+    return val && msg !== null ? val : normalized;
   };
   if (element.multiple) {
     const hexInputs = scopeRoot.querySelectorAll(
@@ -6129,38 +6255,17 @@ function validateColourElement(element, key, context) {
     const values = [];
     hexInputs.forEach((input, index) => {
       const val = input?.value ?? "";
-      const validated = validateColourValue(input, val, `${key}[${index}]`);
-      values.push(validated);
+      values.push(validateColourValue(input, val, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? Infinity;
-      const filteredValues = values.filter((v) => v !== "");
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== "").length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const hexInput = scopeRoot.querySelector(
       `[name="${key}"].colour-hex-input`
     );
     const val = hexInput?.value ?? "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
-      errors.push(`${key}: ${msg}`);
-      markValidity(hexInput, msg);
-      return { value: "", errors };
-    }
-    const validated = validateColourValue(hexInput, val, key);
-    return { value: validated, errors };
+    return { value: validateColourValue(hexInput, val, key), errors };
   }
 }
 function updateColourField(element, fieldPath, value, context) {
@@ -6179,8 +6284,6 @@ function updateColourField(element, fieldPath, value, context) {
       if (index < value.length) {
         const normalized = normalizeColourValue(value[index]);
         hexInput.value = normalized;
-        hexInput.classList.remove("invalid");
-        hexInput.title = "";
         clearFieldError(hexInput);
         const wrapper = hexInput.closest(".colour-picker-wrapper");
         if (wrapper) {
@@ -6209,8 +6312,6 @@ function updateColourField(element, fieldPath, value, context) {
     if (hexInput) {
       const normalized = normalizeColourValue(value);
       hexInput.value = normalized;
-      hexInput.classList.remove("invalid");
-      hexInput.title = "";
       clearFieldError(hexInput);
       const wrapper = hexInput.closest(".colour-picker-wrapper");
       if (wrapper) {
@@ -6524,7 +6625,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
 }
 function validateSliderElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   if (element.min === void 0 || element.min === null) {
     throw new Error(
       `Slider validation: field "${key}" requires "min" property`
@@ -6539,79 +6640,24 @@ function validateSliderElement(element, key, context) {
   const max = element.max;
   const step = element.step ?? 1;
   const scale = element.scale || "linear";
-  const markValidity = (input, errorMessage) => {
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        const sliderContainer = input.closest(".slider-container");
-        if (sliderContainer && sliderContainer.nextSibling) {
-          sliderContainer.parentNode?.insertBefore(
-            errorElement,
-            sliderContainer.nextSibling
-          );
-        } else if (sliderContainer) {
-          sliderContainer.parentNode?.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateSliderValue = (slider, fieldKey) => {
     const { state } = context;
     const rawValue = slider.value;
     if (!rawValue) {
-      if (!skipValidation && element.required) {
-        const msg = t("required", state);
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
-        return null;
-      }
-      markValidity(slider, null);
+      const msg2 = element.required ? t("required", state) : null;
+      if (msg2 !== null) errors.push(`${fieldKey}: ${msg2}`);
+      markFieldValidity(slider, msg2, context);
       return null;
     }
-    let value;
-    if (scale === "exponential") {
-      const position = parseFloat(rawValue) / 1e3;
-      value = positionToExponential(position, min, max);
-      value = alignToStep(value, step);
-    } else {
-      value = parseFloat(rawValue);
-      value = alignToStep(value, step);
-    }
-    if (!skipValidation) {
-      if (value < min) {
-        const msg = t("minValue", state, { min });
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
-        return value;
-      }
-      if (value > max) {
-        const msg = t("maxValue", state, { max });
-        errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
-        return value;
-      }
-    }
-    markValidity(slider, null);
+    const value = scale === "exponential" ? alignToStep(
+      positionToExponential(parseFloat(rawValue) / 1e3, min, max),
+      step
+    ) : alignToStep(parseFloat(rawValue), step);
+    let msg = null;
+    if (value < min) msg = t("minValue", state, { min });
+    else if (value > max) msg = t("maxValue", state, { max });
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(slider, msg, context);
     return value;
   };
   if (element.multiple) {
@@ -6620,31 +6666,17 @@ function validateSliderElement(element, key, context) {
     );
     const values = [];
     sliders.forEach((slider, index) => {
-      const value = validateSliderValue(slider, `${key}[${index}]`);
-      values.push(value);
+      values.push(validateSliderValue(slider, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? Infinity;
-      const filteredValues = values.filter((v) => v !== null);
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const slider = scopeRoot.querySelector(
       `input[type="range"][name="${key}"]`
     );
     if (!slider) {
-      if (!skipValidation && element.required) {
+      if (element.required) {
         errors.push(`${key}: ${t("required", context.state)}`);
       }
       return { value: null, errors };
@@ -6693,8 +6725,6 @@ function updateSliderField(element, fieldPath, value, context) {
             var(--fb-border-color) 100%
           )`;
         }
-        slider.classList.remove("invalid");
-        slider.title = "";
         clearFieldError(slider);
       }
     });
@@ -6730,8 +6760,6 @@ function updateSliderField(element, fieldPath, value, context) {
           var(--fb-border-color) 100%
         )`;
       }
-      slider.classList.remove("invalid");
-      slider.title = "";
       clearFieldError(slider);
     }
   }
@@ -6756,22 +6784,12 @@ function extractRootFormData(formRoot) {
   inputs.forEach((input) => {
     const fieldName = input.getAttribute("name");
     if (fieldName && !fieldName.includes("[") && !fieldName.includes(".")) {
-      if (input instanceof HTMLSelectElement) {
-        data[fieldName] = input.value;
-      } else if (input instanceof HTMLInputElement) {
-        if (input.type === "checkbox") {
-          data[fieldName] = input.checked;
-        } else if (input.type === "radio") {
-          if (input.checked) {
-            data[fieldName] = input.value;
-          }
-        } else if (input.dataset.hiddenField) {
-          data[fieldName] = deserializeHiddenValue(input.value);
-        } else {
+      if (input instanceof HTMLInputElement && input.type === "radio") {
+        if (input.checked) {
           data[fieldName] = input.value;
         }
-      } else if (input instanceof HTMLTextAreaElement) {
-        data[fieldName] = input.value;
+      } else {
+        data[fieldName] = readTypedInputValue(input);
       }
     }
   });
@@ -6840,7 +6858,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   };
   element.elements.forEach((child) => {
     if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-      const prefillVal = containerPrefill[child.key] ?? ("default" in child ? child.default : null) ?? null;
+      const prefillVal = child.key in containerPrefill ? containerPrefill[child.key] : ("default" in child ? child.default : null) ?? null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -6941,7 +6959,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
     );
     element.elements.forEach((child) => {
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-        const hiddenValue = rowPrefill?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
+        const hiddenValue = rowPrefill && child.key in rowPrefill ? rowPrefill[child.key] : ("default" in child ? child.default : null) ?? null;
         childWrapper.appendChild(
           createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
@@ -7050,39 +7068,21 @@ function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
     }
   }
 }
-var validateElementFunc = null;
-function setValidateElement(fn) {
-  validateElementFunc = fn;
-}
-function validateElement(element, ctx, customScopeRoot) {
-  if (!validateElementFunc) {
+function requireValidateElement(context) {
+  if (!context.validateElement) {
     throw new Error(
-      "validateElement not initialized. Should be set from FormBuilderInstance"
+      "validateContainerElement: context.validateElement missing \u2014 container validation requires the instance validator"
     );
   }
-  return validateElementFunc(element, ctx, customScopeRoot);
+  return context.validateElement;
 }
 function validateContainerElement(element, key, context) {
+  const validateChild = requireValidateElement(context);
   const errors = [];
-  const { scopeRoot, skipValidation, path } = context;
+  const { scopeRoot, path } = context;
   if (!("elements" in element)) {
     return { value: null, errors };
   }
-  const validateContainerCount = (key2, items, element2) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const minItems = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxItems = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
-    if (element2.required && items.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (items.length < minItems) {
-      errors.push(`${key2}: ${t("minItems", state, { min: minItems })}`);
-    }
-    if (items.length > maxItems) {
-      errors.push(`${key2}: ${t("maxItems", state, { max: maxItems })}`);
-    }
-  };
   if ("multiple" in element && element.multiple) {
     const items = [];
     const containerWrappers = findDirectContainerRows(scopeRoot, key);
@@ -7113,9 +7113,9 @@ function validateContainerElement(element, key, context) {
           }
         }
         const childKey = `${key}[${domIndex}].${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
-          { path },
+          { path, inheritedReadonly: context.readonly },
           itemContainer
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
@@ -7126,7 +7126,7 @@ function validateContainerElement(element, key, context) {
       });
       items.push(itemData);
     });
-    validateContainerCount(key, items, element);
+    validateItemCount(element, key, items.length, context, errors);
     return { value: items, errors };
   } else {
     const containerData = {};
@@ -7154,9 +7154,9 @@ function validateContainerElement(element, key, context) {
       }
       {
         const childKey = `${key}.${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
-          { path },
+          { path, inheritedReadonly: context.readonly },
           containerContainer
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
@@ -7645,7 +7645,7 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       rebuild();
     } catch (e) {
       const errMsg = e instanceof Error ? e.message : String(e);
-      console.error(t("tableImportError", state).replace("{error}", errMsg));
+      console.error(t("tableImportError", state, { error: errMsg }));
     } finally {
       overlay.remove();
     }
@@ -8525,8 +8525,24 @@ function renderTableElement(element, ctx, wrapper, pathKey) {
     renderEditTable(element, initialData, pathKey, ctx, wrapper);
   }
 }
+function parseTableValue(raw, cellsKey) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return null;
+  }
+  const cells = parsed[cellsKey];
+  const isGrid = Array.isArray(cells) && cells.every(
+    (row) => Array.isArray(row) && row.every((cell) => typeof cell === "string")
+  );
+  return isGrid ? parsed : null;
+}
 function validateTableElement(element, key, context) {
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   const errors = [];
   const cellsKey = element.fieldNames?.cells ?? "cells";
   const hiddenInput = scopeRoot.querySelector(
@@ -8535,22 +8551,20 @@ function validateTableElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let value;
-  try {
-    value = JSON.parse(hiddenInput.value);
-  } catch {
-    errors.push(`${key}: invalid table data`);
+  const value = parseTableValue(hiddenInput.value, cellsKey);
+  if (value === null) {
+    const msg2 = "invalid table data";
+    errors.push(`${key}: ${msg2}`);
+    markFieldGroupValidity(scopeRoot, key, msg2, context);
     return { value: null, errors };
   }
-  if (!skipValidation && element.required) {
-    const cells = value[cellsKey];
-    const hasContent = cells?.some(
-      (row) => row.some((cell) => cell.trim() !== "")
-    );
-    if (!hasContent) {
-      errors.push(`${key}: ${t("required", context.state)}`);
-    }
-  }
+  const cells = value[cellsKey];
+  const hasContent = cells.some(
+    (row) => row.some((cell) => cell.trim() !== "")
+  );
+  const msg = element.required && !hasContent ? t("required", context.state) : null;
+  if (msg !== null) errors.push(`${key}: ${msg}`);
+  markFieldGroupValidity(scopeRoot, key, msg, context);
   return { value, errors };
 }
 function updateTableField(element, fieldPath, value, context) {
@@ -8587,7 +8601,7 @@ function updateTableField(element, fieldPath, value, context) {
 }
 
 // src/components/richinput.ts
-function applyAutoExpand2(textarea, backdrop) {
+function applyAutoExpand2(textarea, backdrop, observers) {
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
@@ -8609,6 +8623,7 @@ function applyAutoExpand2(textarea, backdrop) {
   const ro = new ResizeObserver((entries) => {
     if (!textarea.isConnected) {
       ro.disconnect();
+      observers.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -8618,6 +8633,7 @@ function applyAutoExpand2(textarea, backdrop) {
     resize();
   });
   ro.observe(textarea);
+  observers.add(ro);
 }
 function buildFileLabels(files, state) {
   const labels = /* @__PURE__ */ new Map();
@@ -9187,7 +9203,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   `;
   const textarea = document.createElement("textarea");
   textarea.name = `${pathKey}__text`;
-  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
+  textarea.placeholder = element.placeholder ?? t("richinputPlaceholder", state);
   const rawInitialText = initialValue.text ?? "";
   textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
   textarea.style.cssText = `
@@ -9204,7 +9220,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     z-index: 1;
     caret-color: var(--fb-text-color, #111827);
   `;
-  applyAutoExpand2(textarea, backdrop);
+  applyAutoExpand2(textarea, backdrop, ctx.state.autoExpandObservers);
   textarea.addEventListener("scroll", () => {
     backdrop.scrollTop = textarea.scrollTop;
   });
@@ -9849,8 +9865,16 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
     renderEditMode(element, ctx, wrapper, pathKey, initialValue);
   }
 }
+function parseRichInputValue(raw) {
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
 function validateRichInputElement(element, key, context) {
-  const { scopeRoot, state, skipValidation } = context;
+  const { scopeRoot, state } = context;
   const errors = [];
   const textKey = element.textKey ?? "text";
   const filesKey = element.filesKey ?? "files";
@@ -9860,17 +9884,11 @@ function validateRichInputElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let rawValue;
-  try {
-    const parsed = JSON.parse(hiddenInput.value);
-    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-      rawValue = parsed;
-    } else {
-      errors.push(`${key}: invalid richinput data`);
-      return { value: null, errors };
-    }
-  } catch {
-    errors.push(`${key}: invalid richinput data`);
+  const rawValue = parseRichInputValue(hiddenInput.value);
+  if (rawValue === null) {
+    const msg = "invalid richinput data";
+    errors.push(`${key}: ${msg}`);
+    markFieldGroupValidity(scopeRoot, key, msg, context);
     return { value: null, errors };
   }
   const textVal = rawValue[textKey];
@@ -9881,28 +9899,24 @@ function validateRichInputElement(element, key, context) {
     [textKey]: text ?? null,
     [filesKey]: files
   };
-  if (!skipValidation) {
-    const textEmpty = !text || text.trim() === "";
-    const filesEmpty = files.length === 0;
-    if (element.required && textEmpty && filesEmpty) {
-      errors.push(`${key}: ${t("required", state)}`);
-    }
-    if (!textEmpty && text) {
-      if (element.minLength != null && text.length < element.minLength) {
-        errors.push(
-          `${key}: ${t("minLength", state, { min: element.minLength })}`
-        );
-      }
-      if (element.maxLength != null && text.length > element.maxLength) {
-        errors.push(
-          `${key}: ${t("maxLength", state, { max: element.maxLength })}`
-        );
-      }
+  const textEmpty = !text || text.trim() === "";
+  const messages = [];
+  if (element.required && textEmpty && files.length === 0) {
+    messages.push(t("required", state));
+  }
+  if (!textEmpty && text) {
+    if (element.minLength != null && text.length < element.minLength) {
+      messages.push(t("minLength", state, { min: element.minLength }));
     }
-    if (element.maxFiles != null && files.length > element.maxFiles) {
-      errors.push(`${key}: ${t("maxFiles", state, { max: element.maxFiles })}`);
+    if (element.maxLength != null && text.length > element.maxLength) {
+      messages.push(t("maxLength", state, { max: element.maxLength }));
     }
   }
+  if (element.maxFiles != null && files.length > element.maxFiles) {
+    messages.push(t("maxFiles", state, { max: element.maxFiles }));
+  }
+  errors.push(...messages.map((message) => `${key}: ${message}`));
+  markFieldGroupValidity(scopeRoot, key, joinErrorMessages(messages), context);
   return { value, errors, spread: !!element.flatOutput };
 }
 function updateRichInputField(element, fieldPath, value, context) {
@@ -10177,12 +10191,7 @@ function validateHiddenElement(element, key, context) {
   const input = scopeRoot.querySelector(
     `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
   );
-  const raw = input?.value ?? "";
-  if (raw === "") {
-    const defaultVal = "default" in element ? element.default : null;
-    return { value: defaultVal !== void 0 ? defaultVal : null, errors: [] };
-  }
-  return { value: deserializeHiddenValue(raw), errors: [] };
+  return { value: deserializeHiddenValue(input?.value ?? ""), errors: [] };
 }
 function updateHiddenField(_element, fieldPath, value, context) {
   const { scopeRoot } = context;
@@ -10373,25 +10382,13 @@ function extractDOMValue(fieldPath, formRoot) {
   if (!input) {
     return void 0;
   }
-  if (input instanceof HTMLSelectElement) {
-    return input.value;
-  } else if (input instanceof HTMLInputElement) {
-    if (input.type === "checkbox") {
-      return input.checked;
-    } else if (input.type === "radio") {
-      const checked = formRoot.querySelector(
-        `[name="${fieldPath}"]:checked`
-      );
-      return checked ? checked.value : void 0;
-    } else if (input.dataset.hiddenField) {
-      return deserializeHiddenValue(input.value);
-    } else {
-      return input.value;
-    }
-  } else if (input instanceof HTMLTextAreaElement) {
-    return input.value;
+  if (input instanceof HTMLInputElement && input.type === "radio") {
+    const checked = formRoot.querySelector(
+      `[name="${fieldPath}"]:checked`
+    );
+    return checked ? checked.value : void 0;
   }
-  return void 0;
+  return readTypedInputValue(input);
 }
 function buildScopedDataAtPath(path, value) {
   const segments = path.match(/[^.[\]]+|\[\d+\]/g);
@@ -10520,11 +10517,19 @@ function createFieldLabel(element) {
   }
   return title;
 }
+function ensureTooltipStyles(doc) {
+  if (doc.head.querySelector("[data-fb-tooltip-styles]")) return;
+  const style = doc.createElement("style");
+  style.setAttribute("data-fb-tooltip-styles", "");
+  style.textContent = `[id^="tooltip-"].hidden { display: none; }`;
+  doc.head.appendChild(style);
+}
 function createInfoButton(element, state) {
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
   infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
   infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
+  ensureTooltipStyles(document);
   const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
   const tooltip = document.createElement("div");
   tooltip.id = tooltipId;
@@ -10674,12 +10679,13 @@ function renderElement2(element, ctx) {
   wrapper.className = `fb-field-wrapper fb-size-${element.size || "md"}`;
   wrapper.setAttribute("data-field-key", element.key);
   wrapper.setAttribute("data-fb-width", element.width || "full");
+  const pathKey = pathJoin(ctx.path, element.key);
+  wrapper.setAttribute("data-field-path", pathKey);
   const ops = getComponentOperations(element.type);
   if (!ops?.ownsLabel) {
     const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
-  const pathKey = pathJoin(ctx.path, element.key);
   dispatchToRenderer(element, ctx, wrapper, pathKey);
   if (initiallyDisabled) {
     wrapper.style.display = "none";
@@ -10705,6 +10711,7 @@ var defaultConfig = {
   onDownloadError: null,
   debounceMs: 300,
   verboseErrors: false,
+  postMessageTarget: null,
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
@@ -10726,6 +10733,7 @@ var defaultConfig = {
       openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
+      selectPlaceholder: "Select\u2026",
       previewAlt: "Preview",
       previewUnavailable: "Preview unavailable",
       previewError: "Preview error",
@@ -10801,6 +10809,7 @@ var defaultConfig = {
       openInNewTab: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
       changeButton: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
       placeholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",
+      selectPlaceholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435\u2026",
       previewAlt: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440",
       previewUnavailable: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
       previewError: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0430",
@@ -10865,21 +10874,27 @@ var defaultConfig = {
   },
   theme: {}
 };
-function createInstanceState(config) {
-  const mergedTranslations = {
-    ...defaultConfig.translations
-  };
-  if (config?.translations) {
-    for (const [locale, userTranslations] of Object.entries(
-      config.translations
-    )) {
-      mergedTranslations[locale] = {
-        ...defaultConfig.translations[locale] || {},
+function mergeTranslations(base, overrides) {
+  const merged = { ...base };
+  if (overrides) {
+    for (const [locale, userTranslations] of Object.entries(overrides)) {
+      merged[locale] = {
+        ...base[locale] || {},
         ...userTranslations
       };
     }
   }
+  return merged;
+}
+function createInstanceState(config) {
+  const mergedTranslations = mergeTranslations(
+    defaultConfig.translations,
+    config?.translations
+  );
   return {
+    instanceId: generateInstanceId(),
+    domIdCounter: 0,
+    reportedInvalid: /* @__PURE__ */ new WeakSet(),
     schema: null,
     formRoot: null,
     resourceIndex: /* @__PURE__ */ new Map(),
@@ -10894,7 +10909,9 @@ function createInstanceState(config) {
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
+    multiFileSetters: /* @__PURE__ */ new WeakMap(),
     enableIfObservers: /* @__PURE__ */ new Set(),
+    autoExpandObservers: /* @__PURE__ */ new Set(),
     tooltipElements: /* @__PURE__ */ new Set()
   };
 }
@@ -11196,8 +11213,13 @@ function findOwnField(scope, lookupKey, ownBoundary) {
 }
 var FormBuilderInstance = class {
   constructor(config) {
-    this.instanceId = generateInstanceId();
+    // The bound prefill-hint click handler currently attached to the form root.
+    // Kept so renderForm()/destroy() can remove it — re-binding on every render
+    // stacked listeners (hint clicks applied values N times) and destroy()
+    // left the last one on the host-owned root, retaining the instance.
+    this.prefillHintHandler = null;
     this.state = createInstanceState(config);
+    this.instanceId = this.state.instanceId;
     if (this.state.config.verboseErrors) {
       if (!globalThis.__formBuilderInstances) {
         globalThis.__formBuilderInstances = /* @__PURE__ */ new Set();
@@ -11229,10 +11251,21 @@ var FormBuilderInstance = class {
     this.state.formRoot = element;
   }
   /**
-   * Configure the form builder
+   * Configure the form builder. Translations deep-merge per locale (same as
+   * the constructor); a locale without translations — configured or default —
+   * is rejected, matching setLocale.
    */
   configure(config) {
-    Object.assign(this.state.config, config);
+    const translations = mergeTranslations(
+      this.state.config.translations,
+      config.translations
+    );
+    if (config.locale !== void 0 && !translations[config.locale]) {
+      throw new Error(
+        `configure: no translations configured for locale "${config.locale}"`
+      );
+    }
+    Object.assign(this.state.config, config, { translations });
   }
   /**
    * Set file upload handler
@@ -11265,12 +11298,16 @@ var FormBuilderInstance = class {
     this.state.config.readonly = mode === "readonly";
   }
   /**
-   * Set locale
+   * Set locale. Custom locales are allowed — their translations must have
+   * been provided via the constructor or configure() first.
    */
   setLocale(locale) {
-    if (this.state.config.translations[locale]) {
-      this.state.config.locale = locale;
+    if (!this.state.config.translations[locale]) {
+      throw new Error(
+        `setLocale: no translations configured for locale "${locale}"`
+      );
     }
+    this.state.config.locale = locale;
   }
   /**
    * Trigger onChange callbacks with debouncing
@@ -11623,11 +11660,13 @@ var FormBuilderInstance = class {
   renderForm(root, schema, prefill, actions) {
     const errors = validateSchema(schema);
     if (errors.length > 0) {
-      console.error("Schema validation errors:", errors);
-      return;
+      throw new Error(`renderForm: invalid schema:
+- ${errors.join("\n- ")}`);
     }
     this.disconnectEnableIfObservers();
+    this.disconnectAutoExpandObservers();
     this.removeTooltipElements();
+    this.removePrefillHintListener();
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
@@ -11650,7 +11689,7 @@ var FormBuilderInstance = class {
     }
     schema.elements.forEach((element) => {
       if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
-        const val = prefill?.[element.key] ?? element.default ?? null;
+        const val = prefill && element.key in prefill ? prefill[element.key] : element.default ?? null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
@@ -11667,23 +11706,36 @@ var FormBuilderInstance = class {
     rootContainer.appendChild(fieldsWrapper);
     root.appendChild(rootContainer);
     if (!this.state.config.readonly) {
-      root.addEventListener("click", this.handlePrefillHintClick.bind(this));
+      this.prefillHintHandler = this.handlePrefillHintClick.bind(
+        this
+      );
+      root.addEventListener("click", this.prefillHintHandler);
     }
     if (this.state.config.readonly && this.state.externalActions && Array.isArray(this.state.externalActions)) {
       this.renderExternalActions();
     }
   }
   /**
-   * Validate form and extract data
-   * This is a complete copy of the validateForm logic from form-builder.ts
-   * but uses instance state instead of global state
+   * Validate the form and extract its data. `skipValidation` is the draft
+   * contract of saveDraft() and the onChange payload: marks are only
+   * refreshed or cleared, and the result reports `valid: true, errors: []`.
    */
   validateForm(skipValidation = false) {
+    if (!skipValidation) return this.runValidation("full");
+    return { ...this.runValidation("draft"), valid: true, errors: [] };
+  }
+  /**
+   * Run every rule and return the real result. `marks` decides only what is
+   * painted: "full" raises and clears marks and records reported fields;
+   * "draft" refreshes or clears marks of reported fields and raises none
+   * (see ValidityScope in utils/styles.ts).
+   */
+  runValidation(marks) {
     if (!this.state.schema || !this.state.formRoot)
       return { valid: true, errors: [], data: {} };
     const errors = [];
     const data = {};
-    const validateElement2 = (element, ctx, customScopeRoot = null) => {
+    const validateElement = (element, ctx, customScopeRoot = null) => {
       const key = element.key ?? "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
       const componentContext = {
@@ -11691,7 +11743,11 @@ var FormBuilderInstance = class {
         state: this.state,
         instance: this,
         path: ctx.path,
-        skipValidation
+        draftMarks: marks === "draft",
+        readonly: isElementReadonly(element, this.state, ctx),
+        // Containers recurse into their children through this — threaded per
+        // pass, never module state (see ComponentContext.validateElement).
+        validateElement
       };
       const componentResult = validateElementWithComponent(
         element,
@@ -11709,7 +11765,6 @@ var FormBuilderInstance = class {
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
       return { value: null, spread: false };
     };
-    setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
       if (element.enableIf) {
         try {
@@ -11727,7 +11782,7 @@ var FormBuilderInstance = class {
       if (element.type === "markdown") {
         return;
       }
-      const result = validateElement2(element, { path: "" });
+      const result = validateElement(element, { path: "" });
       if (result.skip) return;
       if (result.spread && result.value !== null && typeof result.value === "object") {
         Object.assign(data, result.value);
@@ -11742,10 +11797,56 @@ var FormBuilderInstance = class {
     };
   }
   /**
-   * Get form data
+   * Read the form: every rule runs and the result is the real
+   * `{valid, errors, data}`. Safe to poll — it never paints a new error
+   * mark (so a pristine form never turns red), it only refreshes or clears
+   * marks that showErrors()/submitForm() drew, and a repeated call on
+   * unchanged state touches no DOM at all.
    */
   getFormData() {
-    return this.validateForm(false);
+    return this.runValidation("draft");
+  }
+  /**
+   * Paint every validation error next to its field (and clear marks of
+   * fields that are now valid), then return the same result as
+   * getFormData(). Call it when the user asks to submit, followed by
+   * focusFirstError() to take them to the first problem.
+   */
+  showErrors() {
+    return this.runValidation("full");
+  }
+  /**
+   * Focus the first field marked invalid, in DOM order, and scroll it into
+   * view. A marked group (container, multi-value field, file field) gets
+   * focus on its first focusable control, else on the group itself.
+   * Does not validate: marks are drawn by showErrors() (or submitForm()),
+   * so call showErrors() first. Fields hidden by enableIf are skipped, as is
+   * any field that cannot take focus (e.g. inside a hidden slide).
+   * @returns true only when focus actually landed on an invalid field
+   */
+  focusFirstError() {
+    const root = this.state.formRoot;
+    if (!root) return false;
+    const marked = root.querySelectorAll('[aria-invalid="true"]');
+    for (const target of Array.from(marked)) {
+      if (target.closest('[data-conditionally-disabled="true"]')) continue;
+      const candidates = target.matches("input, select, textarea, button") ? [target] : [
+        ...Array.from(
+          target.querySelectorAll(
+            "input, select, textarea, button, [tabindex]"
+          )
+        ),
+        target
+      ];
+      for (const candidate of candidates) {
+        candidate.focus({ preventScroll: true });
+        if (document.activeElement === candidate) {
+          candidate.scrollIntoView({ block: "center" });
+          return true;
+        }
+      }
+    }
+    return false;
   }
   /**
    * Submit form with validation
@@ -11753,16 +11854,7 @@ var FormBuilderInstance = class {
   submitForm() {
     const result = this.validateForm(false);
     if (result.valid) {
-      if (typeof window !== "undefined" && window.parent) {
-        window.parent.postMessage(
-          {
-            type: "formSubmit",
-            data: result.data,
-            schema: this.state.schema
-          },
-          "*"
-        );
-      }
+      this.postToParent("formSubmit", result.data);
     }
     return result;
   }
@@ -11771,17 +11863,27 @@ var FormBuilderInstance = class {
    */
   saveDraft() {
     const result = this.validateForm(true);
-    if (typeof window !== "undefined" && window.parent) {
-      window.parent.postMessage(
-        {
-          type: "formDraft",
-          data: result.data,
-          schema: this.state.schema
-        },
-        "*"
+    this.postToParent("formDraft", result.data);
+    return result;
+  }
+  /**
+   * Post form data to the parent frame — only when the host opted in via
+   * `postMessageTarget`. Outside an iframe `window.parent === window`, so an
+   * unconditional post broadcast form data and the full schema to any
+   * embedding page (targetOrigin "*") on every submit. See CHANGELOG 0.6.0.
+   */
+  postToParent(type, data) {
+    const target = this.state.config.postMessageTarget;
+    if (target === "") {
+      throw new Error(
+        'postMessageTarget: "" is not a valid target origin \u2014 use null to disable posting or "*" to knowingly broadcast'
       );
     }
-    return result;
+    if (!target || typeof window === "undefined" || !window.parent) return;
+    window.parent.postMessage(
+      { type, data, schema: this.state.schema },
+      target
+    );
   }
   /**
    * Clear the form - reset all field values to empty while preserving form structure
@@ -11985,6 +12087,7 @@ var FormBuilderInstance = class {
           getElementLookupKey(element, this.state)
         );
         disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        disabledWrapper.setAttribute("data-field-path", fullDomPath);
         wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
       }
     } catch (error) {
@@ -12051,7 +12154,9 @@ var FormBuilderInstance = class {
       this.state.debounceTimer = null;
     }
     this.disconnectEnableIfObservers();
+    this.disconnectAutoExpandObservers();
     this.removeTooltipElements();
+    this.removePrefillHintListener();
     this.state.resourceIndex.clear();
     if (this.state.formRoot) {
       clear(this.state.formRoot);
@@ -12069,6 +12174,18 @@ var FormBuilderInstance = class {
     }
     this.state.enableIfObservers.clear();
   }
+  disconnectAutoExpandObservers() {
+    for (const observer of this.state.autoExpandObservers) {
+      observer.disconnect();
+    }
+    this.state.autoExpandObservers.clear();
+  }
+  removePrefillHintListener() {
+    if (this.prefillHintHandler && this.state.formRoot) {
+      this.state.formRoot.removeEventListener("click", this.prefillHintHandler);
+    }
+    this.prefillHintHandler = null;
+  }
   removeTooltipElements() {
     for (const tooltip of this.state.tooltipElements) {
       tooltip.remove();