@dmitryvim/form-builder 0.5.4 → 0.7.0

package/dist/cjs/index.cjs

@@ -4,15 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 // src/utils/translation.ts
 function t(key, state, params) {
+  var _a, _b;
   const locale = state.config.locale || "en";
   const localeTranslations = state.config.translations[locale];
   const fallbackTranslations = state.config.translations.en;
-  let text = (localeTranslations == null ? void 0 : localeTranslations[key]) || (fallbackTranslations == null ? void 0 : fallbackTranslations[key]) || key;
+  let text = (_b = (_a = localeTranslations == null ? void 0 : localeTranslations[key]) != null ? _a : fallbackTranslations == null ? void 0 : fallbackTranslations[key]) != null ? _b : key;
   if (params) {
     for (const [paramKey, paramValue] of Object.entries(params)) {
       text = text.replace(
         new RegExp(`\\{${paramKey}\\}`, "g"),
-        String(paramValue)
+        () => String(paramValue)
       );
     }
   }
@@ -62,7 +63,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) {
@@ -73,6 +74,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";
@@ -82,413 +100,201 @@ 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) {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_a = input.closest) == null ? void 0 : _a.call(input, ".fb-chip")) != null ? _c : (_b = input.closest) == null ? void 0 : _b.call(input, ".slider-container")) != null ? _d : input;
+}
+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 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 isInputErrorNode(node) {
+  return node.classList.contains("error-message") && !node.classList.contains("fb-field-error");
+}
+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 addFileSizeHint(element, parts, state) {
+function joinErrorMessages(messages) {
+  return messages.length > 0 ? messages.join(" \u2022 ") : null;
+}
+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) {
   var _a;
-  const sizeMB = (_a = element.maxSize) != null ? _a : element.maxSizeMB;
-  if (sizeMB && sizeMB !== Infinity) {
-    parts.push(t("hintMaxSize", state, { size: sizeMB }));
-  }
+  return ((_a = target.getAttribute("aria-describedby")) != null ? _a : "").split(/\s+/).filter(Boolean);
 }
-function addFormatHint(element, parts, state) {
+var FORM_CONTROL = "input, select, textarea, button";
+var ADDED_ATTRS = "data-fb-mark-added";
+function fieldLabelOf(target) {
   var _a;
-  if ((_a = element.accept) == null ? void 0 : _a.extensions) {
-    parts.push(
-      t("hintFormats", state, {
-        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
-      })
+  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 (_a = labelRow == null ? void 0 : labelRow.querySelector("label")) != null ? _a : 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(" ")
     );
   }
 }
-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 setInvalidMark(target, node, state) {
+  setAttr(target, "aria-invalid", "true");
+  exposeAsGroup(target, state);
+  if (node) linkDescription(target, node);
 }
-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 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) {
-    var _a, _b;
-    const allOutputKeys = /* @__PURE__ */ new Set();
-    for (const el of elements) {
-      if (el.type === "richinput" && el.flatOutput) {
-        const richEl = el;
-        const textKey = (_a = richEl.textKey) != null ? _a : "text";
-        const filesKey = (_b = richEl.filesKey) != null ? _b : "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 != null ? existing : createNode();
+  if (node.textContent !== message) node.textContent = message;
+  setInvalidMark(target, node, state);
+}
+function markFieldValidity(input, errorMessage, scope) {
+  var _a;
+  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) {
-    var _a, _b;
-    const el = element;
-    if (el.type === "group") {
-      if (!isPlainObject(el.repeat)) return;
-      checkBounds(
-        elementPath,
-        (_a = el.repeat) == null ? void 0 : _a.min,
-        (_b = el.repeat) == null ? void 0 : _b.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 = (_a = input.getAttribute("name")) != null ? _a : "";
+  const existing = findErrorNode(input);
+  if (existing) setAttr(existing, "data-error-for", errorFor);
+  drawMark(
+    input,
+    mark,
+    existing,
+    () => {
+      var _a2;
+      const node = createErrorNode(scope.state, "error-message");
+      node.setAttribute("data-error-for", errorFor);
+      const anchor = findErrorAnchor(input);
+      (_a2 = anchor.parentNode) == null ? void 0 : _a2.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) {
+  var _a;
+  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 != null ? 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 = (_a = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("fb-field-error")
+  )) != null ? _a : 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) {
-  var _a;
-  if (!condition || !condition.key) {
-    throw new Error("Invalid enableIf condition: must have a 'key' property");
-  }
-  const scope = (_a = condition.scope) != null ? _a : "relative";
-  let dataSource;
-  if (scope === "relative") {
-    dataSource = containerData != null ? 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;
@@ -606,11 +412,18 @@ 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 = {}) {
-  var _a;
+function applyAutoExpand(textarea, options) {
+  var _a, _b;
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const minRows = Math.max(1, (_a = options.minRows) != null ? _a : 1);
@@ -638,18 +451,20 @@ function applyAutoExpand(textarea, options = {}) {
   if (typeof ResizeObserver === "undefined") return;
   let lastWidth = -1;
   const ro = new ResizeObserver((entries) => {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b2, _c, _d, _e, _f;
     if (!textarea.isConnected) {
       ro.disconnect();
+      (_a2 = options.observers) == null ? void 0 : _a2.delete(ro);
       return;
     }
     const entry = entries[0];
-    const w = (_e = (_d = (_b = (_a2 = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b.inlineSize) != null ? _d : (_c = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _c.width) != null ? _e : 0;
+    const w = (_f = (_e = (_c = (_b2 = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _b2[0]) == null ? void 0 : _c.inlineSize) != null ? _e : (_d = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _d.width) != null ? _f : 0;
     if (w === lastWidth) return;
     lastWidth = w;
     resize();
   });
   ro.observe(textarea);
+  (_b = options.observers) == null ? void 0 : _b.add(ro);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -813,26 +628,453 @@ function createSlideAddTile(onClick, options = {}) {
   };
   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)";
-  });
+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" }) {
+  var _a, _b;
+  const minCount = "minCount" in element ? (_a = element.minCount) != null ? _a : 0 : 0;
+  const maxCount = "maxCount" in element ? (_b = element.maxCount) != null ? _b : 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) {
+  var _a;
+  const sizeMB = (_a = element.maxSize) != null ? _a : element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
+  }
+}
+function addFormatHint(element, parts, state) {
+  var _a;
+  if ((_a = element.accept) == null ? void 0 : _a.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) {
+    var _a, _b;
+    const allOutputKeys = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = (_a = richEl.textKey) != null ? _a : "text";
+        const filesKey = (_b = richEl.filesKey) != null ? _b : "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) {
+    var _a, _b;
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        (_a = el.repeat) == null ? void 0 : _a.min,
+        (_b = el.repeat) == null ? void 0 : _b.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 != null ? 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;
+}
+
+// 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) {
+  var _a;
+  if (!condition || !condition.key) {
+    throw new Error("Invalid enableIf condition: must have a 'key' property");
+  }
+  const scope = (_a = condition.scope) != null ? _a : "relative";
+  let dataSource;
+  if (scope === "relative") {
+    dataSource = containerData != null ? 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
@@ -937,7 +1179,7 @@ function createCharCounter(element, input) {
   return counter;
 }
 function renderTextElement(element, ctx, wrapper, pathKey) {
-  var _a;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
@@ -965,10 +1207,10 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   `;
   textInput.name = pathKey;
   textInput.placeholder = (_a = element.placeholder) != null ? _a : t("placeholderText", state);
-  textInput.value = ctx.prefill[element.key] || element.default || "";
+  textInput.value = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   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)";
@@ -1027,11 +1269,12 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       const chip = input.closest(".fb-chip");
       const sib = chip == null ? void 0 : chip.nextElementSibling;
       if (sib && sib.classList.contains("error-message")) {
-        sib.id = `error-${input.name}`;
+        sib.setAttribute("data-error-for", input.name);
       }
     });
   }
   function addChip(value = "") {
+    var _a2;
     const chip = document.createElement("div");
     chip.className = "fb-chip";
     const dot = document.createElement("span");
@@ -1042,7 +1285,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 = (_a2 = element.placeholder) != null ? _a2 : t("placeholderText", state);
     input.readOnly = readonly;
     chip.appendChild(input);
     if (!readonly && ctx.instance) {
@@ -1056,7 +1299,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";
@@ -1064,7 +1307,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       rem.setAttribute("aria-label", t("removeElement", state));
       rem.innerHTML = BIN_ICON_SVG;
       rem.onclick = () => {
-        var _a2;
+        var _a3;
         const chips = list.querySelectorAll(".fb-chip");
         const idx = Array.prototype.indexOf.call(chips, chip);
         if (idx < 0) return;
@@ -1078,7 +1321,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         updateIndices();
         updateAddButton();
         updateRemoveButtons();
-        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
+        (_a3 = ctx.instance) == null ? void 0 : _a3.triggerOnChange(pathKey);
       };
       chip.appendChild(rem);
     }
@@ -1120,113 +1363,53 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateTextElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2, _c2;
-    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 = (_a2 = input.closest) == null ? void 0 : _a2.call(input, ".fb-chip");
-        const anchor = chipAncestor || input;
-        if (anchor.nextSibling) {
-          (_b2 = anchor.parentNode) == null ? void 0 : _b2.insertBefore(errorElement, anchor.nextSibling);
-        } else {
-          (_c2 = anchor.parentNode) == null ? void 0 : _c2.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) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      rawValues.push(val);
       values.push(val === "" ? null : val);
+      if (val.trim() !== "") filledCount++;
       validateTextInput(input, val, `${key}[${index}]`);
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : 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 = (_c = input == null ? void 0 : input.value) != null ? _c : "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
+    const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
+    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) {
@@ -1248,8 +1431,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 }));
       }
@@ -1263,8 +1444,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 }));
@@ -1275,7 +1454,7 @@ function updateTextField(element, fieldPath, value, context) {
 
 // src/components/textarea.ts
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const textareaWrapper = document.createElement("div");
@@ -1289,8 +1468,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     line-height: var(--fb-line-height, 1.5);
   `;
   textareaInput.name = pathKey;
-  textareaInput.placeholder = (_a = element.placeholder) != null ? _a : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.placeholder = (_a = element.placeholder) != null ? _a : t("placeholderText", state);
+  textareaInput.value = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   textareaInput.readOnly = readonly;
   if (!readonly && ctx.instance) {
     const handleChange = () => {
@@ -1300,7 +1479,10 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  applyAutoExpand(textareaInput, { minRows: (_b = element.rows) != null ? _b : 1 });
+  applyAutoExpand(textareaInput, {
+    minRows: (_d = element.rows) != null ? _d : 1,
+    observers: state.autoExpandObservers
+  });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1332,7 +1514,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     });
   }
   function addTextareaItem(value = "", index = -1) {
-    var _a2;
+    var _a2, _b2;
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-textarea-item";
     const textareaContainer = document.createElement("div");
@@ -1345,7 +1527,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 = (_a2 = element.placeholder) != null ? _a2 : t("placeholderText", state);
     textareaInput.value = value;
     textareaInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1356,7 +1538,10 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    applyAutoExpand(textareaInput, { minRows: (_a2 = element.rows) != null ? _a2 : 1 });
+    applyAutoExpand(textareaInput, {
+      minRows: (_b2 = element.rows) != null ? _b2 : 1,
+      observers: state.autoExpandObservers
+    });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1579,7 +1764,19 @@ 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) {
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
@@ -1587,11 +1784,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 = (_a = element.placeholder) != null ? _a : "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 = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   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";
@@ -1623,7 +1821,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(inputWrapper);
 }
 function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -1631,7 +1829,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1646,6 +1844,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     });
   }
   function addNumberItem(value = "", index = -1) {
+    var _a2;
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-number-item flex items-center gap-2";
     const inputContainer = document.createElement("div");
@@ -1660,10 +1859,11 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       width: 100%;
       box-sizing: border-box;
     `;
-    numberInput.placeholder = element.placeholder || "0";
+    numberInput.placeholder = (_a2 = element.placeholder) != null ? _a2 : "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) {
@@ -1728,12 +1928,12 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "number",
       () => {
-        var _a2;
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
+        var _a2, _b2, _c2;
+        values.push((_a2 = element.default) != null ? _a2 : "");
+        addNumberItem((_b2 = element.default) != null ? _b2 : "");
         updateAddButton();
         updateRemoveButtons();
-        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
+        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1749,59 +1949,29 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateNumberElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    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) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b2 = input.parentNode) == null ? void 0 : _b2.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(
@@ -1809,63 +1979,21 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      var _a2;
-      const raw = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      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 = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : 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 = (_c = input == null ? void 0 : input.value) != null ? _c : "";
-    const { state } = context;
-    if (!skipValidation && element.required && raw === "") {
+    if (element.required && ((_a = input == null ? void 0 : input.value) != null ? _a : "") === "") {
       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) {
@@ -1887,8 +2015,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);
       }
     });
@@ -1903,15 +2029,47 @@ 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) {
+  var _a;
+  const options = element.options || [];
+  if (!options.some((option) => option.value === "")) {
+    const emptyOption = document.createElement("option");
+    emptyOption.value = "";
+    emptyOption.textContent = (_a = element.placeholder) != null ? _a : 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) {
+  var _a;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const selectInput = document.createElement("select");
@@ -1923,18 +2081,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,
+    (_a = ctx.prefill[element.key]) != null ? _a : 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);
   }
@@ -1947,7 +2105,7 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -1955,7 +2113,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1980,15 +2138,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);
@@ -2042,13 +2192,13 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "select",
       () => {
-        var _a2, _b2, _c2;
-        const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
+        var _a2, _b2;
+        const defaultValue = (_a2 = element.default) != null ? _a2 : "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
-        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2072,57 +2222,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 function validateSelectElement(element, key, context) {
   var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b;
-    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) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b = input.parentNode) == null ? void 0 : _b.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) => {
-    var _a2, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? (_a2 = element2.minCount) != null ? _a2 : 0 : 0;
-    const maxCount = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : 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}\\["]`
@@ -2131,27 +2231,36 @@ function validateSelectElement(element, key, context) {
     inputs.forEach((input) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      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 = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-    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) {
@@ -2166,13 +2275,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);
       }
     });
@@ -2186,13 +2300,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);
     }
   }
@@ -2387,14 +2501,14 @@ function renderSwitcherElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const state = ctx.state;
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
@@ -2489,13 +2603,13 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "switcher",
       () => {
-        var _a2, _b2, _c2;
-        const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
+        var _a2, _b2;
+        const defaultValue = (_a2 = element.default) != null ? _a2 : "";
         values.push(defaultValue);
         addSwitcherItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
-        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2519,60 +2633,11 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
 function validateSwitcherElement(element, key, context) {
   var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b;
-    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) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b = input.parentNode) == null ? void 0 : _b.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) => {
-    var _a2, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? (_a2 = el.minCount) != null ? _a2 : 0 : 0;
-    const maxCount = "maxCount" in el ? (_b = el.maxCount) != null ? _b : 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 })}`);
-    }
-  };
+  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}\\["]`
@@ -2581,38 +2646,38 @@ function validateSwitcherElement(element, key, context) {
     inputs.forEach((input) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      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 = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-    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) {
+  var _a;
+  const group = (_a = input.parentElement) == null ? void 0 : _a.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) {
   var _a;
   const { scopeRoot } = context;
@@ -2642,9 +2707,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
             }
           });
         }
-        input.classList.remove("invalid");
-        input.title = "";
-        clearFieldError(input);
+        clearFieldError(switcherGroupOf(input));
       }
     });
     if (value.length !== inputs.length) {
@@ -2670,9 +2733,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
           }
         });
       }
-      input.classList.remove("invalid");
-      input.title = "";
-      clearFieldError(input);
+      clearFieldError(switcherGroupOf(input));
     }
   }
 }
@@ -2784,6 +2845,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";
@@ -3199,14 +3261,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;
@@ -3456,24 +3524,55 @@ function createFileTile() {
   tile.className = "fb-tile";
   return tile;
 }
-function showFileError(container, message) {
-  var _a, _b;
-  const existing = (_a = container.closest("[data-files-wrapper]")) == null ? void 0 : _a.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;
-  (_b = container.closest("[data-files-wrapper]")) == null ? void 0 : _b.appendChild(errorEl);
+function fileErrorSlot(container) {
+  var _a;
+  const wrapper = container.closest("[data-files-wrapper]");
+  const node = wrapper ? (_a = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("file-error-message")
+  )) != null ? _a : 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) {
-  var _a;
-  const existing = (_a = container.closest("[data-files-wrapper]")) == null ? void 0 : _a.querySelector(".file-error-message");
-  if (existing) existing.remove();
+function clearFileError(container, kind = "action") {
+  const { wrapper, node } = fileErrorSlot(container);
+  if (wrapper && (node == null ? void 0 : node.dataset.errorKind) === kind) {
+    clearInvalidMark(wrapper, node);
+  }
+}
+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");
@@ -4343,7 +4442,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;
   }
@@ -4351,14 +4451,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;
   }
@@ -4555,7 +4657,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);
@@ -4574,11 +4676,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;
@@ -4693,7 +4792,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;
@@ -4721,7 +4820,8 @@ async function handleLibraryPickMulti(opts) {
     if (skipped > 0) {
       showFileError(
         wrapper,
-        t("filesLimitExceeded", state, { skipped, max: maxCount })
+        t("filesLimitExceeded", state, { skipped, max: maxCount }),
+        state
       );
     }
     return;
@@ -4730,7 +4830,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) {
@@ -4768,7 +4869,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;
@@ -4781,7 +4882,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
     state
   );
   if (validationError !== null) {
-    showFileError(container, validationError);
+    showFileError(container, validationError, state);
     return;
   }
   clearFileError(container);
@@ -5024,10 +5125,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";
@@ -5038,9 +5136,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) {
@@ -5136,6 +5263,7 @@ function renderResourcePills(opts) {
         grid2.appendChild(tile);
       }
     }
+    clearFileError(container, "limit");
     return;
   }
   const outerDiv = document.createElement("div");
@@ -5215,10 +5343,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) {
   var _a, _b;
@@ -5371,9 +5503,10 @@ function buildAcceptAttribute(accept) {
     ...(_c = accept.mime) != null ? _c : []
   ].join(",");
 }
-function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
-  var _a, _b;
+function renderMultiFileElementEdit(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c;
   const state = ctx.state;
+  const maxFiles = (_a = element.maxCount) != null ? _a : Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "fb-row";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -5399,7 +5532,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
     allowedMimes: getAllowedMimes(element.accept),
     // Prefer schema's `maxSize`; fall back to legacy `maxSizeMB` for
     // backward compatibility (matches addFileSizeHint in validation.ts).
-    maxSize: (_b = (_a = element.maxSize) != null ? _a : element.maxSizeMB) != null ? _b : Infinity
+    maxSize: (_c = (_b = element.maxSize) != null ? _b : element.maxSizeMB) != null ? _c : Infinity
   };
   const openPicker = () => {
     filesPicker.click();
@@ -5542,7 +5675,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
       state,
       !currentlyReadonly,
       currentlyReadonly ? null : () => {
-        var _a2, _b2, _c;
+        var _a2, _b2, _c2;
         releaseLocalFileUrl((_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.file);
         const idx = initialFiles.indexOf(rid);
         if (idx > -1) {
@@ -5560,7 +5693,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
           return;
         }
         pendingRemovals.add(rid);
-        (_c = list.querySelector(`[data-resource-id="${rid}"]`)) == null ? void 0 : _c.remove();
+        (_c2 = list.querySelector(`[data-resource-id="${rid}"]`)) == null ? void 0 : _c2.remove();
         if (ctx.instance && pathKey && !state.config.readonly) {
           ctx.instance.triggerOnChange(pathKey, initialFiles);
         }
@@ -5581,22 +5714,24 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   };
   setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
   setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
+  state.multiFileSetters.set(filesWrapper, (resourceIds) => {
+    var _a2;
+    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((_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.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) {
-  var _a;
-  setupMultiFileEditMode(
-    element,
-    ctx,
-    wrapper,
-    pathKey,
-    (_a = element.maxCount) != null ? _a : Infinity
-  );
-}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -5618,90 +5753,103 @@ function readMultiFileResourceIds(scopeRoot, fullKey) {
   }
   return parsed;
 }
-function validateFileCount(key, resourceIds, element, state, errors) {
-  var _a, _b;
-  const minFiles = "minCount" in element ? (_a = element.minCount) != null ? _a : 0 : 0;
-  const maxFiles = "maxCount" in element ? (_b = element.maxCount) != null ? _b : 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) {
   var _a, _b;
+  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 = (_a = meta == null ? void 0 : meta.name) != null ? _a : 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 == null ? void 0 : meta.inferredFromExtension)) {
       const mimeType = (_b = meta == null ? void 0 : meta.type) != null ? _b : "";
       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) {
   var _a;
+  const messages = [];
   const maxSizeMB = "maxSize" in element ? (_a = element.maxSize) != null ? _a : 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) {
   var _a;
-  const { scopeRoot, skipValidation, state } = context;
-  const errors = [];
+  const { scopeRoot, state } = context;
   const input = scopeRoot.querySelector(
     `input[name="${key}"][type="hidden"]`
   );
   const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-  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);
@@ -5751,12 +5899,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";
@@ -5816,14 +5972,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) {
@@ -5843,13 +5999,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"]`
@@ -5910,7 +6072,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";
@@ -5934,9 +6096,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 != null ? placeholder : "#000000";
   hexInput.style.cssText = `
     width: 100px;
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
@@ -6023,14 +6186,20 @@ function createEditColourUI(value, pathKey, ctx) {
   return pickerWrapper;
 }
 function renderColourElement(element, ctx, wrapper, pathKey) {
+  var _a, _b;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
-  const initialValue = ctx.prefill[element.key] || element.default || "#000000";
+  const initialValue = (_b = (_a = ctx.prefill[element.key]) != null ? _a : element.default) != null ? _b : "#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) {
@@ -6045,7 +6214,7 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -6053,7 +6222,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "#000000");
+    values.push((_c = element.default) != null ? _c : "#000000");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -6077,7 +6246,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);
     }
@@ -6140,13 +6314,13 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "colour",
       () => {
-        var _a2;
-        const defaultColour = element.default || "#000000";
+        var _a2, _b2;
+        const defaultColour = (_a2 = element.default) != null ? _a2 : "#000000";
         values.push(defaultColour);
         addColourItem(defaultColour);
         updateAddButton();
         updateRemoveButtons();
-        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6172,63 +6346,20 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   }
 }
 function validateColourElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    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) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b2 = input.parentNode) == null ? void 0 : _b2.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(
@@ -6238,38 +6369,17 @@ function validateColourElement(element, key, context) {
     hexInputs.forEach((input, index) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      const validated = validateColourValue(input, val, `${key}[${index}]`);
-      values.push(validated);
+      values.push(validateColourValue(input, val, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : 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 = (_c = hexInput == null ? void 0 : hexInput.value) != null ? _c : "";
-    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 };
+    const val = (_a = hexInput == null ? void 0 : hexInput.value) != null ? _a : "";
+    return { value: validateColourValue(hexInput, val, key), errors };
   }
 }
 function updateColourField(element, fieldPath, value, context) {
@@ -6288,8 +6398,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) {
@@ -6318,8 +6426,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) {
@@ -6637,9 +6743,9 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   }
 }
 function validateSliderElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   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`
@@ -6654,80 +6760,24 @@ function validateSliderElement(element, key, context) {
   const max = element.max;
   const step = (_a = element.step) != null ? _a : 1;
   const scale = element.scale || "linear";
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    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) {
-          (_a2 = sliderContainer.parentNode) == null ? void 0 : _a2.insertBefore(
-            errorElement,
-            sliderContainer.nextSibling
-          );
-        } else if (sliderContainer) {
-          (_b2 = sliderContainer.parentNode) == null ? void 0 : _b2.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) {
@@ -6736,31 +6786,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 = (_b = element.minCount) != null ? _b : 0;
-      const maxCount = (_c = element.maxCount) != null ? _c : 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 };
@@ -6810,8 +6846,6 @@ function updateSliderField(element, fieldPath, value, context) {
             var(--fb-border-color) 100%
           )`;
         }
-        slider.classList.remove("invalid");
-        slider.title = "";
         clearFieldError(slider);
       }
     });
@@ -6847,8 +6881,6 @@ function updateSliderField(element, fieldPath, value, context) {
           var(--fb-border-color) 100%
         )`;
       }
-      slider.classList.remove("invalid");
-      slider.title = "";
       clearFieldError(slider);
     }
   }
@@ -6873,22 +6905,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);
       }
     }
   });
@@ -6957,9 +6979,9 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
-    var _a2, _b2;
+    var _a2;
     if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-      const prefillVal = (_b2 = (_a2 = containerPrefill[child.key]) != null ? _a2 : "default" in child ? child.default : null) != null ? _b2 : null;
+      const prefillVal = child.key in containerPrefill ? containerPrefill[child.key] : (_a2 = "default" in child ? child.default : null) != null ? _a2 : null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -7061,9 +7083,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
       isSlides ? void 0 : element.columns
     );
     element.elements.forEach((child) => {
-      var _a2, _b2;
+      var _a2;
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-        const hiddenValue = (_b2 = (_a2 = rowPrefill == null ? void 0 : rowPrefill[child.key]) != null ? _a2 : "default" in child ? child.default : null) != null ? _b2 : null;
+        const hiddenValue = rowPrefill && child.key in rowPrefill ? rowPrefill[child.key] : (_a2 = "default" in child ? child.default : null) != null ? _a2 : null;
         childWrapper.appendChild(
           createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
@@ -7174,40 +7196,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) => {
-    var _a, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const minItems = "minCount" in element2 ? (_a = element2.minCount) != null ? _a : 0 : 0;
-    const maxItems = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : 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);
@@ -7239,9 +7242,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") {
@@ -7252,7 +7255,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 = {};
@@ -7281,9 +7284,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") {
@@ -7784,7 +7787,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();
     }
@@ -8680,9 +8683,25 @@ 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) {
   var _a, _b;
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   const errors = [];
   const cellsKey = (_b = (_a = element.fieldNames) == null ? void 0 : _a.cells) != null ? _b : "cells";
   const hiddenInput = scopeRoot.querySelector(
@@ -8691,22 +8710,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 == null ? void 0 : 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) {
@@ -8744,7 +8761,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;
@@ -8767,6 +8784,7 @@ function applyAutoExpand2(textarea, backdrop) {
     var _a, _b, _c, _d, _e;
     if (!textarea.isConnected) {
       ro.disconnect();
+      observers.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -8776,6 +8794,7 @@ function applyAutoExpand2(textarea, backdrop) {
     resize();
   });
   ro.observe(textarea);
+  observers.add(ro);
 }
 function buildFileLabels(files, state) {
   var _a, _b, _c, _d;
@@ -9204,7 +9223,7 @@ function filterFilesForDropdown(query, files, labels) {
 var TEXTAREA_FONT = "font-size: var(--fb-font-size, 14px); font-family: var(--fb-font-family, inherit); line-height: 1.6;";
 var TEXTAREA_PADDING = "padding: 8px 40px 8px 10px;";
 function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
-  var _a;
+  var _a, _b;
   const state = ctx.state;
   const files = [...initialValue.files];
   const dropdownState = {
@@ -9218,12 +9237,12 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
   function getCurrentValue() {
-    var _a2, _b;
+    var _a2, _b2;
     const rawText = textarea.value;
     const nameToRid = buildNameToRid(files, state);
     const submissionText = rawText ? replaceFilenamesWithRids(rawText, nameToRid) : null;
     const textKey = (_a2 = element.textKey) != null ? _a2 : "text";
-    const filesKey = (_b = element.filesKey) != null ? _b : "files";
+    const filesKey = (_b2 = element.filesKey) != null ? _b2 : "files";
     return {
       [textKey]: rawText === "" ? null : submissionText,
       [filesKey]: [...files]
@@ -9305,14 +9324,14 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     }
   });
   outerDiv.addEventListener("drop", (e) => {
-    var _a2, _b;
+    var _a2, _b2;
     e.preventDefault();
     dragCounter = 0;
     outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
     outerDiv.style.boxShadow = "none";
     const droppedFiles = (_a2 = e.dataTransfer) == null ? void 0 : _a2.files;
     if (!droppedFiles || !state.config.uploadFile) return;
-    const maxFiles = (_b = element.maxFiles) != null ? _b : Infinity;
+    const maxFiles = (_b2 = element.maxFiles) != null ? _b2 : Infinity;
     for (let i = 0; i < droppedFiles.length; i++) {
       if (files.length >= maxFiles) {
         showUploadError(
@@ -9361,8 +9380,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   `;
   const textarea = document.createElement("textarea");
   textarea.name = `${pathKey}__text`;
-  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
-  const rawInitialText = (_a = initialValue.text) != null ? _a : "";
+  textarea.placeholder = (_a = element.placeholder) != null ? _a : t("richinputPlaceholder", state);
+  const rawInitialText = (_b = initialValue.text) != null ? _b : "";
   textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
   textarea.style.cssText = `
     width: 100%;
@@ -9378,14 +9397,14 @@ 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;
   });
   let mentionTooltip = null;
   backdrop.addEventListener("mouseover", (e) => {
-    var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9394,8 +9413,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
   });
   backdrop.addEventListener("mouseout", (e) => {
-    var _a2, _b, _c;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2, _c;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9405,8 +9424,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     mentionTooltip = removePortalTooltip(mentionTooltip);
   });
   backdrop.addEventListener("mousedown", (e) => {
-    var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9579,8 +9598,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       dropdown.appendChild(item);
     });
     dropdown.onmousemove = (e) => {
-      var _a2, _b, _c;
-      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      var _a2, _b2, _c;
+      const target = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
         _a2,
         ".fb-richinput-dropdown-item"
       );
@@ -9596,10 +9615,10 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       dropdownState.selectedIndex = newIdx;
     };
     dropdown.onmousedown = (e) => {
-      var _a2, _b;
+      var _a2, _b2;
       e.preventDefault();
       e.stopPropagation();
-      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      const target = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
         _a2,
         ".fb-richinput-dropdown-item"
       );
@@ -9627,9 +9646,9 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     dropdownState.open = false;
   }
   function insertMention(rid) {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     const labels = buildFileLabelsFromClosure();
-    const label = (_c = (_b = labels.get(rid)) != null ? _b : (_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.name) != null ? _c : rid;
+    const label = (_c = (_b2 = labels.get(rid)) != null ? _b2 : (_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.name) != null ? _c : rid;
     const cursorPos = (_d = textarea.selectionStart) != null ? _d : 0;
     const before = textarea.value.slice(0, dropdownState.triggerPos);
     const after = textarea.value.slice(cursorPos);
@@ -9721,10 +9740,10 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       thumbWrapper.appendChild(thumbInner);
       const tooltipHandle = createTooltipHandle();
       const doMention = () => {
-        var _a2, _b, _c;
+        var _a2, _b2, _c;
         const cursorPos = (_a2 = textarea.selectionStart) != null ? _a2 : textarea.value.length;
         const labels = buildFileLabelsFromClosure();
-        const label = (_c = (_b = labels.get(rid)) != null ? _b : meta == null ? void 0 : meta.name) != null ? _c : rid;
+        const label = (_c = (_b2 = labels.get(rid)) != null ? _b2 : meta == null ? void 0 : meta.name) != null ? _c : rid;
         const before = textarea.value.slice(0, cursorPos);
         const after = textarea.value.slice(cursorPos);
         const prefix = before.length > 0 && !/[\s\n]$/.test(before) ? "\n" : "";
@@ -9802,12 +9821,12 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       writeHidden();
       (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey, getCurrentValue());
     }).catch((err) => {
-      var _a2, _b;
+      var _a2, _b2;
       const idx = files.indexOf(tempId);
       if (idx !== -1) files.splice(idx, 1);
       state.resourceIndex.delete(tempId);
       renderFilesRow();
-      (_b = (_a2 = state.config).onUploadError) == null ? void 0 : _b.call(_a2, err, file);
+      (_b2 = (_a2 = state.config).onUploadError) == null ? void 0 : _b2.call(_a2, err, file);
     });
   }
   fileInput.addEventListener("change", () => {
@@ -10046,9 +10065,17 @@ 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) {
   var _a, _b;
-  const { scopeRoot, state, skipValidation } = context;
+  const { scopeRoot, state } = context;
   const errors = [];
   const textKey = (_a = element.textKey) != null ? _a : "text";
   const filesKey = (_b = element.filesKey) != null ? _b : "files";
@@ -10058,17 +10085,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];
@@ -10079,28 +10100,24 @@ function validateRichInputElement(element, key, context) {
     [textKey]: text != null ? 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) {
@@ -10379,12 +10396,7 @@ function validateHiddenElement(element, key, context) {
   const input = scopeRoot.querySelector(
     `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
   );
-  const raw = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-  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((_a = input == null ? void 0 : input.value) != null ? _a : ""), errors: [] };
 }
 function updateHiddenField(_element, fieldPath, value, context) {
   const { scopeRoot } = context;
@@ -10576,25 +10588,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);
@@ -10726,11 +10726,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;
@@ -10880,12 +10888,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 == null ? void 0 : 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";
@@ -10911,6 +10920,7 @@ var defaultConfig = {
   onDownloadError: null,
   debounceMs: 300,
   verboseErrors: false,
+  postMessageTarget: null,
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
@@ -10932,6 +10942,7 @@ var defaultConfig = {
       openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
+      selectPlaceholder: "Select\u2026",
       previewAlt: "Preview",
       previewUnavailable: "Preview unavailable",
       previewError: "Preview error",
@@ -11007,6 +11018,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",
@@ -11071,21 +11083,27 @@ var defaultConfig = {
   },
   theme: {}
 };
-function createInstanceState(config) {
-  const mergedTranslations = {
-    ...defaultConfig.translations
-  };
-  if (config == null ? void 0 : 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 == null ? void 0 : config.translations
+  );
   return {
+    instanceId: generateInstanceId(),
+    domIdCounter: 0,
+    reportedInvalid: /* @__PURE__ */ new WeakSet(),
     schema: null,
     formRoot: null,
     resourceIndex: /* @__PURE__ */ new Map(),
@@ -11100,7 +11118,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()
   };
 }
@@ -11402,8 +11422,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();
@@ -11435,10 +11460,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
@@ -11471,12 +11507,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
@@ -11829,11 +11869,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;
@@ -11855,9 +11897,9 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-2`;
     }
     schema.elements.forEach((element) => {
-      var _a, _b;
+      var _a;
       if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
-        const val = (_b = (_a = prefill == null ? void 0 : prefill[element.key]) != null ? _a : element.default) != null ? _b : null;
+        const val = prefill && element.key in prefill ? prefill[element.key] : (_a = element.default) != null ? _a : null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
@@ -11874,23 +11916,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) => {
       var _a;
       const key = (_a = element.key) != null ? _a : "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
@@ -11899,7 +11954,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,
@@ -11917,7 +11976,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 {
@@ -11935,7 +11993,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);
@@ -11950,10 +12008,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
@@ -11961,16 +12065,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;
   }
@@ -11979,17 +12074,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
@@ -12195,6 +12300,7 @@ var FormBuilderInstance = class {
           getElementLookupKey(element, this.state)
         );
         disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        disabledWrapper.setAttribute("data-field-path", fullDomPath);
         (_c = wrapper.parentNode) == null ? void 0 : _c.replaceChild(disabledWrapper, wrapper);
       }
     } catch (error) {
@@ -12263,7 +12369,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);
@@ -12281,6 +12389,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();