@usefillo/dom 0.10.0 → 0.12.0

package/dist/index.js

@@ -5,6 +5,7 @@ import {
   FilloClient,
   FilloError,
   PHONE_COUNTRIES,
+  PHONE_PICKER_COUNTRIES,
   countryByIso,
   countryByTimeZone,
   createClient,
@@ -13,19 +14,27 @@ import {
   digitsOnly,
   flagEmoji,
   formSchemasEqual,
+  formatAnswer,
+  formatGroupedNumber,
   formatNational,
   isBuildTimeDevEnv,
   isCodeForm,
   isField,
   isFilloError,
   isLikelyDevEnv,
+  isValidPartialNumberText,
+  localeForNotation,
   normalizeFormSchema,
   normalizeFormTheme,
+  parseGroupedNumber,
   parsePhone,
   pipeBlock,
   positionPhonePopover,
   provisionWorkspace,
   needsExplicitSubmit,
+  radioGroupStep,
+  reachablePageSequence,
+  resolveThemeAppearance,
   shouldAutoSubmit,
   syncCodeForm,
   toE164,
@@ -34,6 +43,9 @@ import {
 var FIELD_INPUT_PREFIX = "fillo-";
 var domInstanceCounter = 0;
 var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusableWithin(node) {
+  return node.matches(FOCUSABLE_SELECTOR) ? node : node.querySelector(FOCUSABLE_SELECTOR);
+}
 function fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -52,7 +64,7 @@ function el(tag, options = {}) {
   return node;
 }
 function themeStyle(node, theme) {
-  const safeTheme = normalizeFormTheme(theme);
+  const safeTheme = resolveThemeAppearance(normalizeFormTheme(theme));
   if (!safeTheme) return;
   if (safeTheme.colorScheme) node.setAttribute("data-fillo-color-scheme", safeTheme.colorScheme);
   if (safeTheme.primary) node.style.setProperty("--fillo-primary", safeTheme.primary);
@@ -82,6 +94,12 @@ function badgeUrl(href) {
 function inputValue(value) {
   return typeof value === "string" || typeof value === "number" ? String(value) : "";
 }
+function groupedInputValue(value, decimals, locale) {
+  const raw = inputValue(value);
+  if (raw === "") return raw;
+  const n = Number(raw);
+  return Number.isFinite(n) ? formatGroupedNumber(n, { locale, decimals }) : raw;
+}
 function appendChildren(parent, children) {
   for (const child of children) {
     if (child) parent.appendChild(child);
@@ -109,23 +127,20 @@ function optionIcon(icon) {
   svg.appendChild(path);
   return svg;
 }
-function applyFieldAria(node, field, error, ids) {
+function applyFieldAria(node, field, error, ids, opts = {}) {
   if (error) node.setAttribute("aria-invalid", "true");
-  if (field.required) node.setAttribute("aria-required", "true");
-  const describedBy = [
-    field.description ? ids.descriptionId : null,
-    error ? ids.errorId : null
-  ].filter(Boolean).join(" ");
+  if ((opts.requiredSupported ?? true) && field.required)
+    node.setAttribute("aria-required", "true");
+  const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ");
   if (describedBy) node.setAttribute("aria-describedby", describedBy);
 }
 function bindRadioKeys(group, values, current, select) {
   group.addEventListener("keydown", (event) => {
-    const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
-    const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
-    if (!forward && !backward) return;
-    event.preventDefault();
+    const rtl = getComputedStyle(group).direction === "rtl";
     const index = current === null ? -1 : values.indexOf(current);
-    const next = index === -1 ? forward ? 0 : values.length - 1 : (index + (forward ? 1 : -1) + values.length) % values.length;
+    const next = radioGroupStep(event.key, index, values.length, { rtl });
+    if (next === null) return;
+    event.preventDefault();
     const value = values[next];
     if (value === void 0) return;
     select(value);
@@ -161,29 +176,85 @@ function shell(field, error, child, ids) {
       el("p", {
         className: "fillo-error",
         text: error,
-        attrs: { role: "alert", id: ids.errorId, "data-fillo": "error" }
+        attrs: { id: ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
 }
 function textInput(type, context) {
+  const field = context.field;
+  const numberField = field.kind === "number" ? field : void 0;
+  const grouped = numberField?.notation !== void 0;
+  const locale = localeForNotation(numberField?.notation);
+  const formatted = grouped || Boolean(numberField?.prefix) || Boolean(numberField?.suffix);
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: context.ids.inputId, type, "data-fillo": "control" }
+    attrs: { id: context.ids.inputId, type: formatted ? "text" : type, "data-fillo": "control" }
   });
-  input.value = inputValue(context.value);
-  if (context.field.placeholder) input.placeholder = context.field.placeholder;
-  if ("maxLength" in context.field && context.field.maxLength !== void 0) {
-    input.maxLength = context.field.maxLength;
+  if (formatted) input.setAttribute("inputmode", "decimal");
+  if (type === "email") input.setAttribute("autocomplete", "email");
+  else if (type === "url") input.setAttribute("autocomplete", "url");
+  input.value = grouped ? groupedInputValue(context.value, numberField?.decimals, locale) : inputValue(context.value);
+  if (field.placeholder) input.placeholder = field.placeholder;
+  if ("maxLength" in field && field.maxLength !== void 0) {
+    input.maxLength = field.maxLength;
+  }
+  if (numberField && !formatted) {
+    if (numberField.min !== void 0) input.min = String(numberField.min);
+    if (numberField.max !== void 0) input.max = String(numberField.max);
+  }
+  if (formatted) {
+    let lastValid = input.value;
+    let lastCaret = input.value.length;
+    const rejectEdit = () => {
+      input.value = lastValid;
+      input.setSelectionRange(lastCaret, lastCaret);
+    };
+    if (grouped) {
+      input.addEventListener("input", () => {
+        if (!isValidPartialNumberText(input.value, locale)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(parseGroupedNumber(input.value, locale), { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value, locale)) return rejectEdit();
+        lastValid = input.value;
+        context.setValue(parseGroupedNumber(input.value, locale));
+      });
+      input.addEventListener("blur", () => {
+        const live = context.getValue?.() ?? context.value;
+        input.value = groupedInputValue(live, numberField?.decimals, locale);
+        lastValid = input.value;
+        lastCaret = input.value.length;
+      });
+    } else {
+      input.addEventListener("input", () => {
+        if (!isValidPartialNumberText(input.value, locale)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(input.value, { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value, locale)) return rejectEdit();
+        lastValid = input.value;
+        context.setValue(input.value);
+      });
+    }
+  } else {
+    input.addEventListener("input", () => context.setValue(input.value, { render: false }));
+    input.addEventListener("change", () => context.setValue(input.value));
   }
-  if (context.field.kind === "number") {
-    if (context.field.min !== void 0) input.min = String(context.field.min);
-    if (context.field.max !== void 0) input.max = String(context.field.max);
+  applyFieldAria(input, field, context.error, context.ids);
+  let control = input;
+  if (numberField && (numberField.prefix || numberField.suffix)) {
+    control = appendChildren(el("div", { className: "fillo-number" }), [
+      numberField.prefix ? el("span", { className: "fillo-number-prefix", text: numberField.prefix }) : null,
+      input,
+      numberField.suffix ? el("span", { className: "fillo-number-suffix", text: numberField.suffix }) : null
+    ]);
   }
-  input.addEventListener("input", () => context.setValue(input.value, { render: false }));
-  input.addEventListener("change", () => context.setValue(input.value));
-  applyFieldAria(input, context.field, context.error, context.ids);
-  return shell(context.field, context.error, input, context.ids);
+  return shell(field, context.error, control, context.ids);
 }
 function domLocaleCountry() {
   if (typeof navigator === "undefined") return void 0;
@@ -222,7 +293,10 @@ function phoneInput(context) {
     className: "fillo-phone-flag",
     attrs: { type: "button", "aria-haspopup": "listbox", "aria-expanded": "false" }
   });
-  const flagSpan = el("span", { className: "fillo-phone-flag-emoji", attrs: { "aria-hidden": "true" } });
+  const flagSpan = el("span", {
+    className: "fillo-phone-flag-emoji",
+    attrs: { "aria-hidden": "true" }
+  });
   const dialSpan = el("span", { className: "fillo-phone-dial" });
   appendChildren(flagBtn, [
     flagSpan,
@@ -241,8 +315,9 @@ function phoneInput(context) {
     }
   });
   applyFieldAria(input, context.field, context.error, context.ids);
+  const liveValue = () => context.getValue?.() ?? context.value;
   const nationalFromValue = () => {
-    const digits = digitsOnly(inputValue(context.value));
+    const digits = digitsOnly(inputValue(liveValue()));
     return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
   };
   const syncFlag = () => {
@@ -255,6 +330,7 @@ function phoneInput(context) {
     input.placeholder = formatNational(country, country.example);
   };
   const commit = (nat) => context.setValue(nat ? toE164(country, nat) : "", { render: false });
+  const commitRaw = (raw) => context.setValue(raw, { render: false });
   syncFlag();
   syncInput();
   input.addEventListener("input", () => {
@@ -262,7 +338,11 @@ function phoneInput(context) {
     const caret = input.selectionStart ?? raw.length;
     const before = digitsOnly(raw.slice(0, caret)).length;
     if (raw.trimStart().startsWith("+")) {
-      const p = parsePhone(raw);
+      const p = parsePhone(raw, country, { previousDigits: nationalFromValue() });
+      if (p.pending) {
+        commitRaw(p.raw ?? raw);
+        return;
+      }
       if (p.country) {
         country = p.country;
         syncFlag();
@@ -275,11 +355,13 @@ function phoneInput(context) {
     setCaretAfterDigits(input, before);
   });
   const registerOverlay = context.registerOverlay;
+  const announce = context.announce;
   let popover = null;
   let active = 0;
-  let matches = PHONE_COUNTRIES;
+  let matches = PHONE_PICKER_COUNTRIES;
   let stopPopoverLayout = null;
   let unregisterOverlay = null;
+  let resultsTimer;
   const listId = `${context.ids.inputId}-countries`;
   const syncPopoverLayout = () => {
     if (!popover) return;
@@ -298,13 +380,26 @@ function phoneInput(context) {
       window.removeEventListener("scroll", update, true);
     };
   };
+  const onFocusOut = (event) => {
+    const related = event.relatedTarget;
+    if (related) {
+      if (!countryWrap.contains(related)) closePopover();
+      return;
+    }
+    queueMicrotask(() => {
+      if (popover && !countryWrap.contains(document.activeElement)) closePopover();
+    });
+  };
   const closePopover = () => {
+    clearTimeout(resultsTimer);
     stopPopoverLayout?.();
     stopPopoverLayout = null;
     popover?.remove();
     popover = null;
     flagBtn.setAttribute("aria-expanded", "false");
+    flagBtn.removeAttribute("aria-controls");
     document.removeEventListener("mousedown", onOutside);
+    countryWrap.removeEventListener("focusout", onFocusOut);
     unregisterOverlay?.();
     unregisterOverlay = null;
   };
@@ -318,9 +413,10 @@ function phoneInput(context) {
     commit(nationalFromValue());
     syncInput();
     closePopover();
+    announce?.(DEFAULT_FIELD_STRINGS.phoneCountrySelected(c.name));
     input.focus();
   };
-  const openPopover = () => {
+  const openPopover = (seed) => {
     const pop = el("div", { className: "fillo-phone-popover fillo-phone-popover--below" });
     const search = el("input", {
       className: "fillo-phone-search",
@@ -330,9 +426,11 @@ function phoneInput(context) {
         "aria-expanded": "true",
         "aria-controls": listId,
         "aria-autocomplete": "list",
+        "aria-label": "Search country or code",
         placeholder: "Search country or code"
       }
     });
+    if (seed) search.value = seed;
     const list = el("ul", {
       className: "fillo-phone-list",
       attrs: { role: "listbox", id: listId, "aria-label": "Country" }
@@ -340,17 +438,32 @@ function phoneInput(context) {
     const renderList = () => {
       list.replaceChildren();
       if (matches.length === 0) {
-        list.appendChild(el("li", { className: "fillo-phone-empty", text: "No matches" }));
+        list.appendChild(
+          el("li", {
+            className: "fillo-phone-empty",
+            text: "No matches",
+            attrs: { role: "option", "aria-disabled": "true" }
+          })
+        );
+        search.removeAttribute("aria-activedescendant");
         syncPopoverLayout();
         return;
       }
       matches.forEach((c, i) => {
         const li = el("li", {
           className: `fillo-phone-option${i === active ? " fillo-phone-option--active" : ""}`,
-          attrs: { id: `${listId}-opt-${i}`, role: "option", "aria-selected": String(c.iso2 === country.iso2) }
+          attrs: {
+            id: `${listId}-opt-${i}`,
+            role: "option",
+            "aria-selected": String(c.iso2 === country.iso2)
+          }
         });
         appendChildren(li, [
-          el("span", { className: "fillo-phone-flag-emoji", text: flagEmoji(c.iso2), attrs: { "aria-hidden": "true" } }),
+          el("span", {
+            className: "fillo-phone-flag-emoji",
+            text: flagEmoji(c.iso2),
+            attrs: { "aria-hidden": "true" }
+          }),
           el("span", { className: "fillo-phone-option-name", text: c.name }),
           el("span", { className: "fillo-phone-option-dial", text: `+${c.dialCode}` })
         ]);
@@ -377,21 +490,28 @@ function phoneInput(context) {
     const filter = (q) => {
       const query = q.trim().toLowerCase();
       const qDigits = query.replace(/[^\d]/g, "");
-      matches = !query ? PHONE_COUNTRIES : PHONE_COUNTRIES.filter(
+      matches = !query ? PHONE_PICKER_COUNTRIES : PHONE_PICKER_COUNTRIES.filter(
         (c) => c.name.toLowerCase().includes(query) || c.iso2.toLowerCase() === query || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
       );
       active = 0;
       renderList();
+      clearTimeout(resultsTimer);
+      resultsTimer = setTimeout(
+        () => announce?.(DEFAULT_FIELD_STRINGS.phoneResultsCount(matches.length)),
+        300
+      );
     };
     search.addEventListener("input", () => filter(search.value));
     search.addEventListener("keydown", (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
+        if (matches.length === 0) return;
         active = Math.min(active + 1, matches.length - 1);
         syncActive();
         search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
+        if (matches.length === 0) return;
         active = Math.max(active - 1, 0);
         syncActive();
         search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
@@ -408,16 +528,40 @@ function phoneInput(context) {
     popover = pop;
     countryWrap.appendChild(pop);
     flagBtn.setAttribute("aria-expanded", "true");
-    matches = PHONE_COUNTRIES;
-    active = Math.max(0, PHONE_COUNTRIES.indexOf(country));
-    renderList();
+    flagBtn.setAttribute("aria-controls", listId);
+    if (seed) {
+      filter(seed);
+    } else {
+      matches = PHONE_PICKER_COUNTRIES;
+      active = Math.max(0, PHONE_PICKER_COUNTRIES.indexOf(country));
+      renderList();
+    }
     bindPopoverLayout();
     syncActive();
     document.addEventListener("mousedown", onOutside);
+    countryWrap.addEventListener("focusout", onFocusOut);
     unregisterOverlay = registerOverlay?.(closePopover) ?? null;
-    requestAnimationFrame(() => search.focus());
+    requestAnimationFrame(() => {
+      search.focus();
+      if (seed) {
+        const end = search.value.length;
+        search.setSelectionRange(end, end);
+      }
+    });
   };
   flagBtn.addEventListener("click", () => popover ? closePopover() : openPopover());
+  flagBtn.addEventListener("keydown", (event) => {
+    if (popover) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      openPopover();
+      return;
+    }
+    if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      openPopover(event.key);
+    }
+  });
   appendChildren(wrap, [countryWrap, input]);
   return shell(context.field, context.error, wrap, context.ids);
 }
@@ -454,7 +598,10 @@ function singleChoice(context) {
       attrs: { "data-option": option.id, "data-fillo": "option" }
     });
     label.toggleAttribute("data-selected", value === option.id);
-    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
+    const input = el("input", {
+      className: "fillo-option-input",
+      attrs: { type: "radio", name: context.ids.name }
+    });
     input.checked = value === option.id;
     input.addEventListener("change", () => {
       activeOtherFields?.delete(field.id);
@@ -463,7 +610,20 @@ function singleChoice(context) {
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
+      el("span", {
+        className: "fillo-option-label",
+        text: option.label,
+        attrs: { "data-fillo": "optionLabel" }
+      }),
+      // Icon-mode hides the native input visually (CSS), so an SVG recolor
+      // was the only selected-state signal — add a decorative shape signal
+      // that survives forced-colors (audit P1.2; state still lives on the
+      // input, this marker is non-authoritative).
+      option.icon && value === option.id ? el("span", {
+        className: "fillo-option-check",
+        text: "\u2713",
+        attrs: { "aria-hidden": "true" }
+      }) : null
     ]);
     wrap.appendChild(label);
   }
@@ -473,7 +633,10 @@ function singleChoice(context) {
       attrs: { "data-fillo": "option" }
     });
     label.toggleAttribute("data-selected", otherActive);
-    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
+    const input = el("input", {
+      className: "fillo-option-input",
+      attrs: { type: "radio", name: context.ids.name }
+    });
     input.checked = otherActive;
     input.addEventListener("change", () => {
       activeOtherFields?.add(field.id);
@@ -482,13 +645,20 @@ function singleChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
+        el("span", {
+          className: "fillo-option-label",
+          text: DEFAULT_STRINGS.other,
+          attrs: { "data-fillo": "optionLabel" }
+        })
       ])
     ]);
     if (otherActive) {
-      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      const other = el("input", {
+        className: "fillo-input fillo-other-input",
+        attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
+      });
       other.value = isOther ? value : "";
-      other.placeholder = "Your answer";
+      other.placeholder = DEFAULT_STRINGS.otherPlaceholder;
       other.addEventListener("input", () => {
         activeOtherFields?.add(field.id);
         context.setValue(other.value, { render: false });
@@ -519,7 +689,7 @@ function multiChoice(context) {
     className: "fillo-options",
     attrs: { role: "group", "aria-labelledby": context.ids.labelId, "data-fillo": "options" }
   });
-  applyFieldAria(wrap, field, context.error, context.ids);
+  applyFieldAria(wrap, field, context.error, context.ids, { requiredSupported: false });
   const setSelected = (next) => context.setValue(next);
   for (const option of options) {
     const label = el("label", {
@@ -531,12 +701,23 @@ function multiChoice(context) {
     input.checked = selected.includes(option.id);
     input.addEventListener("change", () => {
       const current = getSelected();
-      setSelected(input.checked ? [...current, option.id] : current.filter((id) => id !== option.id));
+      setSelected(
+        input.checked ? [...current, option.id] : current.filter((id) => id !== option.id)
+      );
     });
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
+      el("span", {
+        className: "fillo-option-label",
+        text: option.label,
+        attrs: { "data-fillo": "optionLabel" }
+      }),
+      option.icon && selected.includes(option.id) ? el("span", {
+        className: "fillo-option-check",
+        text: "\u2713",
+        attrs: { "aria-hidden": "true" }
+      }) : null
     ]);
     wrap.appendChild(label);
   }
@@ -562,13 +743,20 @@ function multiChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
+        el("span", {
+          className: "fillo-option-label",
+          text: DEFAULT_STRINGS.other,
+          attrs: { "data-fillo": "optionLabel" }
+        })
       ])
     ]);
     if (active) {
-      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      const other = el("input", {
+        className: "fillo-input fillo-other-input",
+        attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
+      });
       other.value = otherText ?? "";
-      other.placeholder = "Your answer";
+      other.placeholder = DEFAULT_STRINGS.otherPlaceholder;
       other.addEventListener("input", () => {
         activeOtherFields?.add(field.id);
         const rest = getSelected().filter((value) => knownIds.has(value));
@@ -605,11 +793,16 @@ function dropdown(context) {
     className: "fillo-input fillo-select",
     attrs: { id: context.ids.inputId, "data-fillo": "control" }
   });
-  select.appendChild(el("option", { text: field.placeholder ?? "Choose...", attrs: { value: "" } }));
+  select.appendChild(
+    el("option", { text: field.placeholder ?? "Choose...", attrs: { value: "" } })
+  );
   for (const option of displayOptions(field)) {
     select.appendChild(el("option", { text: option.label, attrs: { value: option.id } }));
   }
-  if (field.allowOther) select.appendChild(el("option", { text: "Other...", attrs: { value: other } }));
+  if (field.allowOther)
+    select.appendChild(
+      el("option", { text: `${DEFAULT_STRINGS.other}\u2026`, attrs: { value: other } })
+    );
   select.value = otherActive ? other : value;
   select.addEventListener("change", () => {
     if (select.value === other) {
@@ -621,15 +814,18 @@ function dropdown(context) {
     }
   });
   applyFieldAria(select, field, context.error, context.ids);
-  appendChildren(selectWrap, [select, el("span", { className: "fillo-select-icon", attrs: { "aria-hidden": "true" } })]);
+  appendChildren(selectWrap, [
+    select,
+    el("span", { className: "fillo-select-icon", attrs: { "aria-hidden": "true" } })
+  ]);
   wrap.appendChild(selectWrap);
   if (otherActive) {
     const other2 = el("input", {
       className: "fillo-input fillo-other-input fillo-other-input--block",
-      attrs: { type: "text" }
+      attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
     });
     other2.value = isOther ? value : "";
-    other2.placeholder = "Your answer";
+    other2.placeholder = DEFAULT_STRINGS.otherPlaceholder;
     other2.addEventListener("input", () => {
       activeOtherFields?.add(field.id);
       context.setValue(other2.value, { render: false });
@@ -670,23 +866,21 @@ function checkbox(context) {
       className: "fillo-toggle-input",
       attrs: {
         id: context.ids.inputId,
-        type: "checkbox",
-        role: "switch",
-        "aria-checked": String(context.value === true)
+        type: "checkbox"
       }
     });
     input2.checked = context.value === true;
     input2.addEventListener("change", () => {
-      input2.setAttribute("aria-checked", String(input2.checked));
       context.setValue(input2.checked);
     });
     applyFieldAria(input2, context.field, context.error, context.ids);
     appendChildren(label2, [
       copy,
       input2,
-      appendChildren(el("span", { className: "fillo-toggle-track", attrs: { "aria-hidden": "true" } }), [
-        el("span", { className: "fillo-toggle-thumb" })
-      ])
+      appendChildren(
+        el("span", { className: "fillo-toggle-track", attrs: { "aria-hidden": "true" } }),
+        [el("span", { className: "fillo-toggle-thumb" })]
+      )
     ]);
     wrap2.appendChild(label2);
     if (context.field.description)
@@ -702,7 +896,7 @@ function checkbox(context) {
         el("p", {
           className: "fillo-error",
           text: context.error,
-          attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
+          attrs: { id: context.ids.errorId, "data-fillo": "error" }
         })
       );
     return wrap2;
@@ -773,7 +967,10 @@ function rating(context) {
   for (const [index, n] of values.entries()) {
     const button = el("button", {
       className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
-      text: "\u2605",
+      // Shape signal, not just color, so the selected state survives
+      // forced-colors (audit P1.2): filled "★" once selected, hollow "☆"
+      // otherwise.
+      text: n <= current ? "\u2605" : "\u2606",
       attrs: {
         type: "button",
         role: "radio",
@@ -784,7 +981,10 @@ function rating(context) {
       }
     });
     button.toggleAttribute("data-selected", n <= current);
-    button.addEventListener("click", () => context.setValue(n === current ? null : n));
+    button.addEventListener("click", (event) => {
+      if (event.detail === 0 && n === current) return;
+      context.setValue(n === current ? null : n);
+    });
     wrap.appendChild(button);
   }
   bindRadioKeys(wrap, values, selected, (value) => context.setValue(value));
@@ -830,7 +1030,10 @@ function linearScale(context) {
       }
     });
     button.toggleAttribute("data-selected", context.value === n);
-    button.addEventListener("click", () => context.setValue(context.value === n ? null : n));
+    button.addEventListener("click", (event) => {
+      if (event.detail === 0 && context.value === n) return;
+      context.setValue(context.value === n ? null : n);
+    });
     steps.appendChild(button);
   }
   bindRadioKeys(steps, values, current, (value) => context.setValue(value));
@@ -848,6 +1051,7 @@ function linearScale(context) {
 function ranking(context) {
   const field = context.field;
   if (field.kind !== "ranking") return null;
+  const announce = context.announce;
   const answered = Array.isArray(context.value) ? context.value : [];
   const order = [
     ...answered.filter((id) => field.options.some((option) => option.id === id)),
@@ -861,7 +1065,7 @@ function ranking(context) {
       "data-fillo": "control"
     }
   });
-  applyFieldAria(group, context.field, context.error, context.ids);
+  applyFieldAria(group, context.field, context.error, context.ids, { requiredSupported: false });
   const list = el("ol", { className: "fillo-ranking" });
   for (const [index, id] of order.entries()) {
     const option = field.options.find((item2) => item2.id === id);
@@ -874,18 +1078,31 @@ function ranking(context) {
       const next = [...order];
       [next[index], next[target]] = [next[target], next[index]];
       context.setValue(next);
+      announce?.(DEFAULT_FIELD_STRINGS.rankingPosition(option.label, target + 1, order.length));
     };
     const up = el("button", {
       className: "fillo-ranking-move",
-      text: "Up",
-      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "up" }
+      text: "\u2191",
+      attrs: {
+        type: "button",
+        "data-fillo-rank-opt": id,
+        "data-fillo-rank-dir": "up",
+        // Per-row label (audit P1.5 [D]: every row read "Up"/"Down" alike);
+        // wording matches @usefillo/react's.
+        "aria-label": `Move ${option.label} up`
+      }
     });
     up.toggleAttribute("disabled", index === 0);
     up.addEventListener("click", () => move(-1));
     const down = el("button", {
       className: "fillo-ranking-move",
-      text: "Down",
-      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "down" }
+      text: "\u2193",
+      attrs: {
+        type: "button",
+        "data-fillo-rank-opt": id,
+        "data-fillo-rank-dir": "down",
+        "aria-label": `Move ${option.label} down`
+      }
     });
     down.toggleAttribute("disabled", index === order.length - 1);
     down.addEventListener("click", () => move(1));
@@ -907,23 +1124,47 @@ function matrix(context) {
   const table = el("table", { className: "fillo-matrix" });
   const thead = document.createElement("thead");
   const headRow = document.createElement("tr");
-  headRow.appendChild(document.createElement("th"));
-  for (const col of field.columns) headRow.appendChild(el("th", { text: col.label, attrs: { scope: "col" } }));
+  headRow.appendChild(document.createElement("td"));
+  for (const col of field.columns)
+    headRow.appendChild(el("th", { text: col.label, attrs: { scope: "col" } }));
   thead.appendChild(headRow);
   table.appendChild(thead);
   const tbody = document.createElement("tbody");
   for (const row of field.rows) {
+    const rowLabelId = `${context.ids.inputId}-${row.id}`;
+    const answered = answers[row.id] !== void 0;
+    const rowInvalid = Boolean(context.error) && Boolean(field.required) && !answered;
+    const radioId = (col) => `${context.ids.inputId}-${row.id}-${col.id}`;
     const tr = document.createElement("tr");
-    tr.appendChild(el("th", { text: row.label, attrs: { scope: "row" } }));
+    const th = el("th", { attrs: { scope: "row" } });
+    const rowGroup = el("div", {
+      attrs: {
+        role: "radiogroup",
+        "aria-labelledby": `${context.ids.labelId} ${rowLabelId}`,
+        "aria-owns": field.columns.map(radioId).join(" ")
+      }
+    });
+    rowGroup.appendChild(el("span", { text: row.label, attrs: { id: rowLabelId } }));
+    th.appendChild(rowGroup);
+    tr.appendChild(th);
     for (const col of field.columns) {
-      const td = document.createElement("td");
+      const td = el("td", { attrs: { "data-label": col.label } });
+      const cellLabel = el("label", { className: "fillo-matrix-cell" });
       const input = el("input", {
         className: "fillo-option-input",
-        attrs: { type: "radio", name: `${context.ids.name}-${row.id}`, "aria-label": `${row.label}: ${col.label}` }
+        attrs: {
+          id: radioId(col),
+          type: "radio",
+          name: `${context.ids.name}-${row.id}`,
+          "aria-label": `${row.label}: ${col.label}`
+        }
       });
+      if (field.required) input.setAttribute("aria-required", "true");
+      if (rowInvalid) input.setAttribute("aria-invalid", "true");
       input.checked = answers[row.id] === col.id;
       input.addEventListener("change", () => context.setValue({ ...answers, [row.id]: col.id }));
-      td.appendChild(input);
+      cellLabel.appendChild(input);
+      td.appendChild(cellLabel);
       tr.appendChild(td);
     }
     tbody.appendChild(tr);
@@ -938,7 +1179,7 @@ function matrix(context) {
       "data-fillo": "control"
     }
   });
-  applyFieldAria(group, context.field, context.error, context.ids);
+  applyFieldAria(group, context.field, context.error, context.ids, { requiredSupported: false });
   group.appendChild(table);
   return shell(context.field, context.error, group, context.ids);
 }
@@ -947,19 +1188,30 @@ function signature(context) {
   const pad = el("div", { className: "fillo-signature", attrs: { "data-fillo": "control" } });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
-    attrs: { "aria-hidden": "true" }
+    attrs: { role: "img" }
   });
   const clear = el("button", {
     className: "fillo-signature-clear",
     text: "Clear",
     attrs: { type: "button" }
   });
-  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here", attrs: { "aria-hidden": "true" } });
+  const hint = el("div", {
+    className: "fillo-signature-hint",
+    text: "Sign here",
+    attrs: { "aria-hidden": "true" }
+  });
   canvas.width = 720;
   canvas.height = 220;
   const ctx = canvas.getContext("2d");
   let drawing = false;
   let hasInk = typeof context.value === "string" && context.value.startsWith("data:image/");
+  const syncSignatureLabel = () => {
+    canvas.setAttribute(
+      "aria-label",
+      hasInk ? DEFAULT_FIELD_STRINGS.signatureSigned : DEFAULT_FIELD_STRINGS.signatureEmpty
+    );
+  };
+  syncSignatureLabel();
   if (hasInk && ctx) {
     const image = new Image();
     image.onload = () => ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
@@ -971,8 +1223,7 @@ function signature(context) {
     attrs: {
       id: context.ids.inputId,
       type: "text",
-      autocomplete: "name",
-      placeholder: "Type your full name to sign"
+      autocomplete: "name"
     }
   });
   applyFieldAria(typed, context.field, context.error, context.ids);
@@ -992,6 +1243,7 @@ function signature(context) {
       hint.style.display = "";
       context.setValue(null, { render: false });
     }
+    syncSignatureLabel();
   };
   typed.addEventListener("input", () => drawTyped(typed.value));
   const point = (event) => {
@@ -1006,6 +1258,7 @@ function signature(context) {
     drawing = true;
     hasInk = true;
     hint.style.display = "none";
+    syncSignatureLabel();
     if (typed.value) typed.value = "";
     canvas.setPointerCapture(event.pointerId);
     const p = point(event);
@@ -1033,42 +1286,116 @@ function signature(context) {
     hasInk = false;
     hint.style.display = "";
     typed.value = "";
+    syncSignatureLabel();
     context.setValue(null, { render: false });
   });
   appendChildren(pad, [canvas, hint, clear]);
   const typeWrap = el("div", { className: "fillo-signature-type" });
-  typeWrap.appendChild(typed);
+  const typeLabel = el("label", {
+    className: "fillo-signature-type-label",
+    text: "Or type your full name to sign",
+    attrs: { for: context.ids.inputId }
+  });
+  appendChildren(typeWrap, [typeLabel, typed]);
   appendChildren(wrap, [pad, typeWrap]);
   return shell(context.field, context.error, wrap, context.ids);
 }
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function fileActionBtn(className, label, text, onClick) {
+  const btn = el("button", { className, text, attrs: { type: "button", "aria-label": label } });
+  btn.addEventListener("click", onClick);
+  return btn;
+}
 function fileUpload(context) {
   const field = context.field;
   if (field.kind !== "file_upload") return null;
   const internal = context;
-  const storageBlocked = internal.storageBlocked === true;
-  const input = el("input", {
-    className: "fillo-input",
-    attrs: { id: context.ids.inputId, type: "file", "data-fillo": "control" }
-  });
-  if ((field.maxFiles ?? 1) > 1) input.multiple = true;
-  if (field.accept?.length) input.accept = field.accept.join(",");
-  const progress = context.uploadProgress?.get(field.id);
-  input.disabled = progress !== void 0 || storageBlocked;
-  applyFieldAria(input, field, context.error, context.ids);
-  input.addEventListener("change", () => {
-    if (storageBlocked) return;
-    const files = Array.from(input.files ?? []);
-    void context.uploadFiles?.(field, files);
-  });
+  const uploadDisabledReason = internal.uploadDisabledReason;
+  const canUpload = uploadDisabledReason === void 0;
+  const maxFiles = field.maxFiles ?? 1;
+  const maxMb = field.maxFileSizeMb ?? 500;
+  const done = Array.isArray(context.value) ? context.value : [];
+  const rows = internal.uploadRows ?? [];
+  const remaining = maxFiles - done.length - rows.filter((row) => row.error === void 0).length;
   const wrap = el("div");
-  wrap.appendChild(input);
-  if (storageBlocked) {
-    const hint = el("p", {
-      className: "fillo-upload-notice",
-      text: internal.storageFixUrl ? "Connect file storage to enable uploads" : DEFAULT_FIELD_STRINGS.uploadsUnavailable,
-      attrs: { role: "status" }
+  if (remaining > 0) {
+    const input = el("input", {
+      className: "fillo-input",
+      attrs: { id: context.ids.inputId, type: "file", hidden: "" }
     });
-    if (internal.storageFixUrl) {
+    if (maxFiles > 1) input.multiple = true;
+    if (field.accept?.length) input.accept = field.accept.join(",");
+    input.disabled = !canUpload;
+    input.addEventListener("change", () => {
+      if (!canUpload) return;
+      const files = Array.from(input.files ?? []);
+      input.value = "";
+      void context.uploadFiles?.(field, files);
+    });
+    const dropzone = el("div", {
+      className: `fillo-dropzone${canUpload ? "" : " fillo-dropzone--disabled"}`,
+      attrs: {
+        role: "button",
+        tabindex: "0",
+        "aria-labelledby": context.ids.labelId,
+        "data-fillo": "control"
+      }
+    });
+    applyFieldAria(dropzone, field, context.error, context.ids, { requiredSupported: false });
+    if (!canUpload) dropzone.setAttribute("aria-disabled", "true");
+    dropzone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      dropzone.classList.add("fillo-dropzone--over");
+      dropzone.setAttribute("data-drag-over", "");
+    });
+    dropzone.addEventListener("dragleave", () => {
+      dropzone.classList.remove("fillo-dropzone--over");
+      dropzone.removeAttribute("data-drag-over");
+    });
+    dropzone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      dropzone.classList.remove("fillo-dropzone--over");
+      dropzone.removeAttribute("data-drag-over");
+      if (canUpload) void context.uploadFiles?.(field, Array.from(e.dataTransfer?.files ?? []));
+    });
+    dropzone.addEventListener("click", () => {
+      if (canUpload) input.click();
+    });
+    dropzone.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (canUpload) input.click();
+      }
+    });
+    dropzone.appendChild(input);
+    if (canUpload) {
+      appendChildren(dropzone, [
+        el("span", {
+          className: "fillo-dropzone-title",
+          text: DEFAULT_FIELD_STRINGS.dropzoneTitle(maxFiles > 1)
+        }),
+        el("span", {
+          className: "fillo-dropzone-hint",
+          text: DEFAULT_FIELD_STRINGS.dropzoneHint(maxMb)
+        })
+      ]);
+    } else if (uploadDisabledReason === "render_only") {
+      dropzone.appendChild(
+        el("span", {
+          className: "fillo-dropzone-hint",
+          text: DEFAULT_FIELD_STRINGS.uploadsRenderOnly
+        })
+      );
+    } else if (internal.storageFixUrl) {
+      const hint = el("span", {
+        className: "fillo-dropzone-hint",
+        text: "Connect file storage to enable uploads"
+      });
       hint.append(" \u2014 ");
       hint.appendChild(
         el("a", {
@@ -1076,34 +1403,129 @@ function fileUpload(context) {
           attrs: { href: internal.storageFixUrl, target: "_blank", rel: "noopener noreferrer" }
         })
       );
+      dropzone.appendChild(hint);
+    } else {
+      dropzone.appendChild(
+        el("span", {
+          className: "fillo-dropzone-hint",
+          text: DEFAULT_FIELD_STRINGS.uploadsUnavailable
+        })
+      );
     }
-    wrap.appendChild(hint);
-  }
-  if (progress !== void 0) {
-    const meter = el("div", {
-      className: "fillo-upload-progress",
-      attrs: {
-        role: "progressbar",
-        "aria-label": `Uploading ${field.label}`,
-        "aria-valuemin": "0",
-        "aria-valuemax": "100",
-        "aria-valuenow": String(Math.round(progress * 100))
+    wrap.appendChild(dropzone);
+  }
+  if (done.length > 0 || rows.length > 0) {
+    const list = el("ul", { className: "fillo-files" });
+    for (const file of done) {
+      const li = el("li", { className: "fillo-file fillo-file--done" });
+      appendChildren(li, [
+        el("span", { className: "fillo-file-name", text: file.name }),
+        el("span", { className: "fillo-file-meta", text: formatBytes(file.size) }),
+        el("span", { className: "fillo-sr-only", text: "Uploaded" }),
+        fileActionBtn(
+          "fillo-file-remove",
+          `Remove ${file.name}`,
+          "\xD7",
+          () => context.setValue(done.filter((f) => f.fileId !== file.fileId))
+        )
+      ]);
+      list.appendChild(li);
+    }
+    for (const row of rows) {
+      const failed = row.error !== void 0;
+      const li = el("li", {
+        className: `fillo-file${failed ? " fillo-file--failed" : ""}`,
+        attrs: failed ? {} : {
+          role: "progressbar",
+          "aria-label": `Uploading ${row.name}`,
+          "aria-valuemin": "0",
+          "aria-valuemax": "100",
+          "aria-valuenow": String(Math.round(row.fraction * 100))
+        }
+      });
+      li.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
+      if (failed) {
+        const actions = el("span", { className: "fillo-file-actions" });
+        if (remaining > 0) {
+          actions.appendChild(
+            fileActionBtn(
+              "fillo-file-retry",
+              `${DEFAULT_FIELD_STRINGS.uploadRetry} ${row.name}`,
+              DEFAULT_FIELD_STRINGS.uploadRetry,
+              () => internal.uploadAction?.(row.key, "retry")
+            )
+          );
+        }
+        actions.appendChild(
+          fileActionBtn(
+            "fillo-file-remove",
+            "Dismiss",
+            "\xD7",
+            () => internal.uploadAction?.(row.key, "dismiss")
+          )
+        );
+        li.appendChild(actions);
+        li.appendChild(el("span", { className: "fillo-file-error", text: row.error ?? "" }));
+      } else {
+        const bar = el("span", { className: "fillo-progress-bar" });
+        bar.style.width = `${row.fraction * 100}%`;
+        appendChildren(li, [
+          el("span", {
+            className: "fillo-file-meta",
+            text: `${Math.round(row.fraction * 100)}% of ${formatBytes(row.size)}`
+          }),
+          fileActionBtn(
+            "fillo-file-remove",
+            `Cancel ${row.name}`,
+            "\xD7",
+            () => internal.uploadAction?.(row.key, "cancel")
+          ),
+          appendChildren(
+            el("span", { className: "fillo-progress", attrs: { "aria-hidden": "true" } }),
+            [bar]
+          )
+        ]);
       }
-    });
-    meter.appendChild(el("div", { className: "fillo-upload-progress-fill" }));
-    meter.firstElementChild?.style.setProperty("width", `${Math.round(progress * 100)}%`);
-    wrap.appendChild(meter);
-  }
-  const value = Array.isArray(context.value) ? context.value : [];
-  for (const file of value) {
-    wrap.appendChild(el("p", { className: "fillo-description", text: `${file.name} (${Math.round(file.size / 1024)} KB)` }));
-  }
-  const notice = context.uploadNotice;
-  if (notice) {
-    wrap.appendChild(el("p", { className: "fillo-upload-notice", text: notice, attrs: { role: "status" } }));
+      list.appendChild(li);
+    }
+    wrap.appendChild(list);
   }
+  const notice = internal.uploadNotice;
+  if (notice) wrap.appendChild(el("p", { className: "fillo-upload-notice", text: notice }));
   return shell(field, context.error, wrap, context.ids);
 }
+function calculated(context) {
+  const field = context.field;
+  const wrap = el("div", {
+    className: "fillo-field fillo-field--calculated fillo-calculated",
+    attrs: { "data-fillo": "calculated", "data-field": field.id, "data-kind": field.kind }
+  });
+  wrap.appendChild(
+    el("label", {
+      className: "fillo-label",
+      text: field.label,
+      attrs: { id: context.ids.labelId, for: context.ids.inputId, "data-fillo": "label" }
+    })
+  );
+  if (field.description)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-description",
+        text: field.description,
+        attrs: { id: context.ids.descriptionId, "data-fillo": "fieldDescription" }
+      })
+    );
+  const value = context.value;
+  const answered = value !== void 0 && value !== null && value !== "";
+  const output = el("output", {
+    className: `fillo-calculated-value${answered ? "" : " fillo-calculated-value--empty"}`,
+    text: answered ? formatAnswer(field, value) : "\u2014",
+    attrs: { id: context.ids.inputId }
+  });
+  if (field.description) output.setAttribute("aria-describedby", context.ids.descriptionId);
+  wrap.appendChild(output);
+  return wrap;
+}
 var shuffleCache = /* @__PURE__ */ new Map();
 function displayOptions(field) {
   if (!field.shuffleOptions) return field.options;
@@ -1138,7 +1560,8 @@ var DEFAULT_COMPONENTS = {
   ranking,
   matrix,
   signature,
-  file_upload: fileUpload
+  file_upload: fileUpload,
+  calculated
 };
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
@@ -1146,18 +1569,82 @@ function defaultFieldRenderer(context) {
   const renderer = DEFAULT_COMPONENTS[context.field.kind];
   return renderer ? renderer(context) : null;
 }
+var TURNSTILE_SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var TURNSTILE_SCRIPT_ID = "fillo-turnstile-script";
+var turnstileScriptPromise = null;
+function turnstileGlobal() {
+  return globalThis.turnstile;
+}
+function loadTurnstileScript() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("Turnstile needs a browser"));
+  }
+  if (turnstileGlobal()) return Promise.resolve();
+  if (turnstileScriptPromise) return turnstileScriptPromise;
+  turnstileScriptPromise = new Promise((resolve, reject) => {
+    const onReady = () => {
+      if (turnstileGlobal()) resolve();
+      else reject(new Error("Turnstile loaded without its global"));
+    };
+    const existing = document.getElementById(TURNSTILE_SCRIPT_ID);
+    if (existing) {
+      if (turnstileGlobal()) {
+        resolve();
+        return;
+      }
+      existing.addEventListener("load", onReady, { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Turnstile script failed to load")),
+        { once: true }
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = TURNSTILE_SCRIPT_ID;
+    script.src = TURNSTILE_SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.addEventListener("load", onReady, { once: true });
+    script.addEventListener(
+      "error",
+      () => {
+        script.remove();
+        turnstileScriptPromise = null;
+        reject(new Error("Turnstile script failed to load"));
+      },
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+  return turnstileScriptPromise;
+}
+function newTurnstileContainer() {
+  return el("div", { className: "fillo-turnstile", attrs: { "data-fillo": "turnstile" } });
+}
 var DomFormController = class {
   constructor(target, options) {
     this.target = target;
     this.options = options;
     this.element.className = "fillo-dom-root";
     if (options.preview === true) warnPreviewInProduction();
-    target.replaceChildren(this.element);
+    target.replaceChildren(this.element, this.statusEl, this.alertEl);
     void this.resolve();
   }
   target;
   options;
   element = el("div");
+  // Persistent live-region channels (audit P2.1): siblings of `element`
+  // (never inside it), so the full-tree `element.replaceChildren()` every
+  // render() does can never tear them down or recreate them.
+  statusEl = el("span", {
+    className: "fillo-sr-only",
+    attrs: { role: "status", "aria-live": "polite", "data-fillo": "announce" }
+  });
+  alertEl = el("span", {
+    className: "fillo-sr-only",
+    attrs: { role: "alert", "data-fillo": "announce-alert" }
+  });
   instanceId = `d${++domInstanceCounter}`;
   schema = null;
   theme;
@@ -1177,9 +1664,12 @@ var DomFormController = class {
   hpValue = "";
   liveSubmissionHandled = false;
   activeOtherFields = /* @__PURE__ */ new Set();
-  uploadProgress = /* @__PURE__ */ new Map();
-  uploadControllers = /* @__PURE__ */ new Map();
-  // Per-field "some files weren't added" notices (over-limit selections).
+  // Per-file upload tracking (audit P0.3), keyed by a synthetic per-file key —
+  // replaces the old per-field aggregate progress number. Concurrent uploads
+  // within one field are independent rows, each cancellable/retryable alone.
+  inFlight = /* @__PURE__ */ new Map();
+  // Per-field soft capacity/busy notices ("N files weren't added", "N files
+  // exceed the limit") — plain text; announce() carries the live semantics.
   uploadNotices = /* @__PURE__ */ new Map();
   // Where to move focus on the next render: "error" after a failed submit/next,
   // "page" after navigating, null → restore the pre-render active control.
@@ -1187,6 +1677,37 @@ var DomFormController = class {
   // Teardown callbacks for open overlays (phone country popover) whose listeners
   // live on window/document and would otherwise leak past a re-render/unmount.
   overlays = /* @__PURE__ */ new Set();
+  // Human-verification challenge (Turnstile). Token read lazily by the
+  // engine's getChallengeToken at submit time (react's ref, equivalent
+  // freshest-solve contract). `turnstileContainer` is the node Cloudflare
+  // renders its iframe into — created once and RE-ATTACHED (moved, never
+  // recreated) into the tree every render, same hoist precedent as
+  // statusEl/alertEl above, so the iframe survives replaceChildren() instead
+  // of reloading on every keystroke.
+  challenge;
+  challengeToken;
+  challengeError = false;
+  turnstileContainer = newTurnstileContainer();
+  turnstileWidgetId = null;
+  turnstileSiteKey;
+  turnstileLoadInFlight = false;
+  // Invalidated on teardown so a stale load/render callback can't land after
+  // a later attempt replaced the container (or double-render into it).
+  turnstileAttempt = 0;
+  // Clear-then-set (one frame apart) so an identical repeat still re-fires —
+  // a same-tick ""→text write can collapse into a no-op net change for AT.
+  announce = (text) => {
+    this.statusEl.textContent = "";
+    requestAnimationFrame(() => {
+      this.statusEl.textContent = text;
+    });
+  };
+  announceAlert = (text) => {
+    this.alertEl.textContent = "";
+    requestAnimationFrame(() => {
+      this.alertEl.textContent = text;
+    });
+  };
   /** Dev chrome = every developer-facing surface below (inline schema render,
    * notices, verbose submit errors, upload pre-emption). `preview` forces it
    * on off-localhost surfaces — cosmetic only, so correctness (where
@@ -1214,7 +1735,7 @@ var DomFormController = class {
     return {
       form,
       formId: this.formId,
-      client: this.options.client,
+      client: this.options.renderOnly ? void 0 : this.options.client,
       data: state?.data ?? this.mutableData,
       errors: state?.errors ?? {},
       status: this.status,
@@ -1231,8 +1752,8 @@ var DomFormController = class {
     };
   }
   resolveFormIdFn;
-  /** The server refuses submissions right now — render the real form blurred
-   *  and display-only beneath the not-open card ("notOpen" for a draft /
+  /** The server refuses submissions right now — render a not-open state backed
+   *  by the real form in display-only mode ("notOpen" for a draft /
    *  storage-blocked form, "closed" for an expired/capped workspace). Doubles
    *  as the display-only gate: while set, the engine is created without a
    *  client/formId/resolver and every interactive entry point no-ops. */
@@ -1250,14 +1771,22 @@ var DomFormController = class {
   syncWarningUrl;
   /** Server-authoritative ability to start a new file upload. */
   uploadsAvailable;
+  /** Server-authoritative per-file ceiling for the active storage lane. */
+  uploadFileSizeLimitMb;
   /** Code of the last submit-time resolution failure (form_not_published,
    *  form_schema_changed, …) — the connect-storage deep-link renders only with
    *  the failure it explains, never glued onto transport/challenge errors. */
   resolutionFailureCode = null;
   async resolve() {
     try {
+      this.challenge = this.options.renderOnly ? void 0 : this.options.challenge;
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
       if (codeForm) {
+        if (this.options.renderOnly) {
+          this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, void 0);
+          return;
+        }
+        if (!this.options.client && this.options.formId) this.options.client = createClient();
         const client = this.options.client;
         if (client?.key) {
           this.resolveFormIdFn = async () => {
@@ -1266,6 +1795,7 @@ var DomFormController = class {
               this.syncWarningCode = result.warningCode;
               this.syncWarningUrl = result.warningUrl;
               this.uploadsAvailable = result.uploadsAvailable;
+              this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
               if (result.status === "draft") {
                 throw new FilloError(
                   "This form is no longer published. Submission was stopped before sending answers.",
@@ -1301,12 +1831,7 @@ var DomFormController = class {
               }
               if (result.syncError) {
                 this.reportSyncNotice(
-                  new FilloError(
-                    result.syncError.message,
-                    403,
-                    void 0,
-                    result.syncError.code
-                  )
+                  new FilloError(result.syncError.message, 403, void 0, result.syncError.code)
                 );
               }
               this.resolutionFailureCode = null;
@@ -1319,8 +1844,16 @@ var DomFormController = class {
             }
           };
         }
-        if (!client?.key) {
-          this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
+        if (!client?.key && this.options.formId) {
+          this.setSchema(
+            codeForm.schema,
+            this.options.theme ?? codeForm.theme,
+            this.options.formId
+          );
+        }
+        if (!client && !this.options.formId) {
+          this.genericUnavailable = !this.devChrome();
+          throw formTargetRequiredError();
         }
         if (client && !client.key && !this.options.formId) {
           this.reportSyncFailure(
@@ -1335,7 +1868,11 @@ var DomFormController = class {
         }
         if (!client?.key) return;
         if (this.devChrome()) {
-          this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
+          this.setSchema(
+            codeForm.schema,
+            this.options.theme ?? codeForm.theme,
+            this.options.formId
+          );
         } else {
           this.theme = this.options.theme ?? codeForm.theme;
           this.render();
@@ -1358,6 +1895,8 @@ var DomFormController = class {
           this.syncWarningCode = result.warningCode;
           this.syncWarningUrl = result.warningUrl;
           this.uploadsAvailable = result.uploadsAvailable;
+          this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
+          this.challenge = this.options.challenge ?? result.challenge;
           if (result.branding) {
             this.fetchedPoweredBy = result.branding.poweredBy;
             this.fetchedBrandLabel = result.branding.label;
@@ -1375,19 +1914,18 @@ var DomFormController = class {
           if (result.warning) console.warn(`[fillo] ${result.warning}`);
           if (result.syncError) {
             this.reportSyncNotice(
-              new FilloError(
-                result.syncError.message,
-                403,
-                void 0,
-                result.syncError.code
-              )
+              new FilloError(result.syncError.message, 403, void 0, result.syncError.code)
             );
           }
           const connectStorage = result.warningUrl ? ` \u2014 connect storage to publish: ${result.warningUrl}` : "";
           if (result.staged) {
-            console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard${connectStorage}`);
+            console.info(
+              `[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard${connectStorage}`
+            );
           } else if (result.status === "draft") {
-            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published${connectStorage}`);
+            console.info(
+              `[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published${connectStorage}`
+            );
           }
         } catch (error) {
           if (this.destroyed) return;
@@ -1397,6 +1935,15 @@ var DomFormController = class {
       }
       const schema = this.options.form && !isCodeForm(this.options.form) ? this.options.form : null;
       if (schema) {
+        if (this.options.renderOnly) {
+          this.setSchema(schema, this.options.theme, void 0);
+          return;
+        }
+        if (!this.options.formId) {
+          this.genericUnavailable = !this.devChrome();
+          throw formTargetRequiredError();
+        }
+        this.options.client ??= createClient();
         this.setSchema(schema, this.options.theme, this.options.formId);
         return;
       }
@@ -1413,9 +1960,11 @@ var DomFormController = class {
         this.closed = Boolean(published.closed);
       }
       this.uploadsAvailable = published.uploadsAvailable;
+      this.uploadFileSizeLimitMb = published.uploadFileSizeLimitMb;
       this.fetchedPoweredBy = published.branding?.poweredBy ?? null;
       this.fetchedBrandLabel = published.branding?.label;
       this.fetchedBrandHref = published.branding?.href;
+      this.challenge = this.options.challenge ?? published.challenge;
       if (published.accepting === false && this.options.renderError) {
         const message = this.notOpenVariant === "closed" ? "This form is no longer accepting responses." : "This form isn't accepting responses yet.";
         this.fatalError = new FilloError(message, 403, void 0, published.acceptingReason);
@@ -1423,7 +1972,11 @@ var DomFormController = class {
         this.render(this.fatalError);
         return;
       }
-      this.setSchema(published.schema, this.options.theme ?? published.theme ?? void 0, published.id);
+      this.setSchema(
+        published.schema,
+        this.options.theme ?? published.theme ?? void 0,
+        published.id
+      );
     } catch (error) {
       if (this.destroyed) return;
       this.handleError(toFilloError(error));
@@ -1433,26 +1986,37 @@ var DomFormController = class {
   setSchema(schema, theme, formId) {
     if (this.destroyed) return;
     const normalized = normalizeFormSchema(schema);
-    if (!normalized.ok) throw new FilloError(`This form could not be rendered: ${normalized.error}`, 422);
+    if (!normalized.ok)
+      throw new FilloError(`This form could not be rendered: ${normalized.error}`, 422);
     const normalizedSchema = normalized.schema;
     this.schema = normalizedSchema;
     this.theme = theme;
-    this.formId = formId;
+    const renderOnly = this.options.renderOnly === true;
+    this.formId = renderOnly ? void 0 : formId;
     const displayOnly = this.notOpenVariant !== null;
+    const transportDisabled = displayOnly || renderOnly;
     this.engine = coreCreateFormController({
       form: normalizedSchema,
-      formId: displayOnly ? void 0 : formId,
-      client: displayOnly ? void 0 : this.options.client,
+      formId: transportDisabled ? void 0 : formId,
+      client: transportDisabled ? void 0 : this.options.client,
       initialData: this.options.initialData,
       onChange: displayOnly ? void 0 : this.options.onChange,
-      onSubmitted: displayOnly ? void 0 : this.options.onSubmitted,
+      onSubmitted: transportDisabled ? void 0 : this.options.onSubmitted,
       getHoneypot: () => this.element.querySelector('input[name="fillo_hp_field"]')?.value ?? this.hpValue,
       surface: "default",
-      resolveFormId: displayOnly ? void 0 : this.resolveFormIdFn,
+      resolveFormId: transportDisabled ? void 0 : this.resolveFormIdFn,
+      skipValidation: renderOnly,
       // Dev chrome gets the developer-grade resolution failure (message +
       // machine code) instead of the respondent-safe "unavailable" fallback.
       verboseResolutionErrors: this.devChrome(),
-      respondent: displayOnly ? void 0 : this.options.respondent
+      respondent: transportDisabled ? void 0 : this.options.respondent,
+      // Challenge (Turnstile) — wired as react's useFilloController wires the
+      // core controller: challengeRequired captured once here (forced off for
+      // a not-open preview, which never submits regardless);
+      // getChallengeToken/onChallengeFailed stay live via `this`.
+      challengeRequired: transportDisabled ? false : Boolean(this.challenge),
+      getChallengeToken: () => this.challengeToken,
+      onChallengeFailed: () => this.resetChallengeWidget()
     });
     let lastStatus = this.engine.getState().status;
     let lastResumed = this.engine.getState().resumedDraft;
@@ -1461,13 +2025,15 @@ var DomFormController = class {
       const state = this.engine?.getState();
       if (!state) return;
       if (state.status !== lastStatus || state.resumedDraft !== lastResumed || state.editingPrevious !== lastEditing) {
+        if (state.editingPrevious && !lastEditing) this.announce(DEFAULT_STRINGS.editNotice);
+        else if (state.resumedDraft && !lastResumed) this.announce(DEFAULT_STRINGS.resumeNotice);
         lastStatus = state.status;
         lastResumed = state.resumedDraft;
         lastEditing = state.editingPrevious;
         this.queueRender();
       }
     });
-    if (!displayOnly) this.configureDraftFlush(normalizedSchema);
+    if (!transportDisabled) this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
@@ -1540,7 +2106,11 @@ var DomFormController = class {
   async submit() {
     if (!this.engine || this.phase !== "ready" || this.notOpenVariant) return;
     const pending = this.engine.submit();
-    if (this.hasErrors()) this.focusIntent = "error";
+    if (this.hasErrors()) {
+      this.focusIntent = "error";
+    } else if (this.engine.getState().status === "submitting") {
+      this.announce(DEFAULT_FIELD_STRINGS.submittingAnnouncement);
+    }
     this.render();
     try {
       await pending;
@@ -1574,18 +2144,103 @@ var DomFormController = class {
     this.options.respondent = respondent;
     this.engine?.setContext({ respondent });
   }
-  async uploadFiles(field, files) {
-    if (!this.schema || this.notOpenVariant) return;
-    if (this.uploadProgress.has(field.id)) {
-      this.uploadNotices.set(field.id, "Wait for the current upload to finish before adding more files.");
+  /** This field's active (non-failed) in-flight count — room math and the
+   *  setUploading(field, …) flip both key off it. A failed row holds no slot
+   *  (it must not strand the field at permanently-full). */
+  fieldActive(fieldId) {
+    let n = 0;
+    for (const row of this.inFlight.values())
+      if (row.fieldId === fieldId && row.error === void 0) n++;
+    return n;
+  }
+  uploadRowsFor(fieldId) {
+    const rows = [];
+    for (const [key, row] of this.inFlight) {
+      if (row.fieldId === fieldId)
+        rows.push({
+          key,
+          name: row.name,
+          size: row.size,
+          fraction: row.fraction,
+          error: row.error
+        });
+    }
+    return rows;
+  }
+  /** Cancel/retry/dismiss one row by its per-file key (audit P0.3) — the
+   *  per-file counterpart of setValueInternal, called from the rendered
+   *  Cancel/Retry/Dismiss buttons via InternalFieldRenderContext. */
+  uploadAction = (key, action) => {
+    const row = this.inFlight.get(key);
+    if (!row) return;
+    if (action === "cancel") {
+      row.controller.abort();
+      this.inFlight.delete(key);
+    } else if (action === "dismiss") {
+      this.inFlight.delete(key);
+    } else {
+      this.inFlight.delete(key);
+      void this.startUpload(row.fieldId, row.file, row.maxFiles);
+    }
+    if (this.fieldActive(row.fieldId) === 0) this.engine?.setUploading(row.fieldId, false);
+    this.queueRender();
+  };
+  async startUpload(fieldId, file, maxFiles) {
+    const key = `${file.name}-${file.size}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    const controller = new AbortController();
+    this.inFlight.set(key, {
+      fieldId,
+      name: file.name,
+      size: file.size,
+      fraction: 0,
+      file,
+      controller,
+      maxFiles
+    });
+    this.engine?.setUploading(fieldId, true);
+    this.queueRender();
+    try {
+      const value = this.options.client && this.formId ? await this.options.client.uploadFile(this.formId, file, {
+        fieldId,
+        signal: controller.signal,
+        onProgress: (progress) => {
+          const row = this.inFlight.get(key);
+          if (!row) return;
+          row.fraction = progress.fraction;
+          this.queueRender();
+        }
+      }) : {
+        fileId: `local:${file.name}:${file.size}`,
+        name: file.name,
+        size: file.size,
+        mime: file.type || "application/octet-stream"
+      };
+      if (this.destroyed) return;
+      this.inFlight.delete(key);
+      const current = maxFiles > 1 && Array.isArray(this.mutableData[fieldId]) ? this.mutableData[fieldId] : [];
+      this.setValueInternal(fieldId, [...current, value]);
+    } catch (error) {
+      if (this.destroyed || controller.signal.aborted) return;
+      const uploadError = toFilloError(error);
+      const message = uploadError.status !== void 0 && uploadError.status >= 500 ? DEFAULT_FIELD_STRINGS.uploadUnavailable : uploadError.message || DEFAULT_FIELD_STRINGS.uploadFailed;
+      const row = this.inFlight.get(key);
+      if (row) row.error = message;
+      this.announceAlert(message);
+      this.options.onError?.(uploadError);
+    } finally {
+      if (this.fieldActive(fieldId) === 0) this.engine?.setUploading(fieldId, false);
       this.queueRender();
-      return;
     }
+  }
+  async uploadFiles(field, files) {
+    if (!this.schema || this.notOpenVariant) return;
     const maxFiles = field.maxFiles ?? 1;
-    const existing = maxFiles > 1 && Array.isArray(this.mutableData[field.id]) ? [...this.mutableData[field.id]] : [];
-    const room = Math.max(0, maxFiles - existing.length);
+    const existingCount = maxFiles > 1 && Array.isArray(this.mutableData[field.id]) ? this.mutableData[field.id].length : 0;
+    const room = Math.max(0, maxFiles - existingCount - this.fieldActive(field.id));
     const withinLimit = files.slice(0, room);
-    const maxBytes = (field.maxFileSizeMb ?? 500) * 1024 * 1024;
+    const configuredMaxMb = field.maxFileSizeMb ?? 500;
+    const maxFileSizeMb = this.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, this.uploadFileSizeLimitMb) : configuredMaxMb;
+    const maxBytes = maxFileSizeMb * 1024 * 1024;
     const selected = withinLimit.filter((file) => file.size <= maxBytes);
     const dropped = files.length - withinLimit.length;
     const oversized = withinLimit.length - selected.length;
@@ -1598,13 +2253,12 @@ var DomFormController = class {
       }
       if (oversized > 0) {
         notices.push(
-          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${field.maxFileSizeMb ?? 500} MB limit.`
+          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${maxFileSizeMb} MB limit.`
         );
       }
-      this.uploadNotices.set(
-        field.id,
-        notices.join(" ")
-      );
+      const text = notices.join(" ");
+      this.uploadNotices.set(field.id, text);
+      this.announce(text);
     } else {
       this.uploadNotices.delete(field.id);
     }
@@ -1612,58 +2266,15 @@ var DomFormController = class {
       this.queueRender();
       return;
     }
-    const controller = new AbortController();
-    this.uploadControllers.set(field.id, controller);
-    this.uploadProgress.set(field.id, 0);
-    this.engine?.setUploading(field.id, true);
-    this.queueRender();
-    try {
-      const values = [];
-      for (const [index, file] of selected.entries()) {
-        if (this.options.client && this.formId) {
-          values.push(
-            await this.options.client.uploadFile(this.formId, file, {
-              fieldId: field.id,
-              signal: controller.signal,
-              onProgress: (progress) => {
-                this.uploadProgress.set(field.id, (index + progress.fraction) / selected.length);
-                this.queueRender();
-              }
-            })
-          );
-        } else {
-          values.push({
-            fileId: `local:${file.name}:${file.size}`,
-            name: file.name,
-            size: file.size,
-            mime: file.type || "application/octet-stream"
-          });
-        }
-      }
-      if (this.destroyed) return;
-      this.setValueInternal(field.id, [...existing, ...values]);
-    } catch (error) {
-      if (!this.destroyed && !controller.signal.aborted) {
-        const uploadError = toFilloError(error);
-        this.uploadNotices.set(field.id, uploadError.message || "Upload failed \u2014 try again");
-        this.options.onError?.(uploadError);
-      }
-    } finally {
-      if (this.uploadControllers.get(field.id) === controller) {
-        this.uploadControllers.delete(field.id);
-      }
-      this.uploadProgress.delete(field.id);
-      this.engine?.setUploading(field.id, false);
-      this.queueRender();
-    }
+    await Promise.all(selected.map((file) => this.startUpload(field.id, file, maxFiles)));
   }
   destroy() {
     this.destroyed = true;
     this.teardownDraftFlush();
     this.closeOverlays();
-    this.uploadControllers.forEach((controller) => controller.abort());
-    this.uploadControllers.clear();
-    this.uploadProgress.clear();
+    this.teardownTurnstileWidget();
+    for (const row of this.inFlight.values()) row.controller.abort();
+    this.inFlight.clear();
     this.engine?.destroy();
     this.engine = null;
     this.target.replaceChildren();
@@ -1688,6 +2299,84 @@ var DomFormController = class {
     }
     this.overlays.clear();
   }
+  /** Idempotent: at most one load+render per armed container (guarded by
+   *  widget id / in-flight / already-failed); re-arms on a changed site key
+   *  (mirrors react's effect, keyed on siteKey). */
+  ensureTurnstileWidget(siteKey) {
+    if (this.turnstileSiteKey !== siteKey) {
+      this.teardownTurnstileWidget();
+      this.turnstileSiteKey = siteKey;
+    }
+    if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight || this.challengeError)
+      return;
+    this.turnstileLoadInFlight = true;
+    const attempt = ++this.turnstileAttempt;
+    loadTurnstileScript().then(() => {
+      if (this.destroyed || attempt !== this.turnstileAttempt) return;
+      const api = turnstileGlobal();
+      if (!api) {
+        this.turnstileLoadInFlight = false;
+        this.handleChallengeError();
+        return;
+      }
+      this.turnstileWidgetId = api.render(this.turnstileContainer, {
+        sitekey: siteKey,
+        theme: "auto",
+        callback: (token) => this.handleChallengeToken(token),
+        "error-callback": () => {
+          this.handleChallengeToken(void 0);
+          this.handleChallengeError();
+        },
+        "expired-callback": () => this.resetChallengeWidget(),
+        "timeout-callback": () => this.resetChallengeWidget()
+      });
+      this.turnstileLoadInFlight = false;
+    }).catch(() => {
+      if (this.destroyed || attempt !== this.turnstileAttempt) return;
+      this.turnstileLoadInFlight = false;
+      this.handleChallengeError();
+    });
+  }
+  handleChallengeToken(token) {
+    this.challengeToken = token;
+    if (token) this.challengeError = false;
+    this.queueRender();
+  }
+  /** Surfaces via `.fillo-turnstile-error` AND the assertive channel — the
+   *  paragraph mounts fresh with the tree, and a live region announces
+   *  mutations, not initial content (same reasoning as the announce channels). */
+  handleChallengeError() {
+    this.challengeError = true;
+    this.announceAlert(DEFAULT_STRINGS.challengeUnavailable);
+    this.queueRender();
+  }
+  /** Re-arm the SAME widget instance for a fresh solve (server rejection,
+   *  expiry, or timeout) — not a teardown, the widget stays mounted. */
+  resetChallengeWidget() {
+    this.challengeToken = void 0;
+    if (this.turnstileWidgetId) turnstileGlobal()?.reset(this.turnstileWidgetId);
+    this.queueRender();
+  }
+  /** Fully remove any active/pending widget (mirrors react's unmount effect):
+   *  the script stays cached, but the widget and its token are gone, and a
+   *  fresh container replaces the old one for a pristine next mount. Safe to
+   *  call when nothing is active. */
+  teardownTurnstileWidget() {
+    if (this.turnstileWidgetId === null && !this.turnstileLoadInFlight) return;
+    this.turnstileAttempt++;
+    const api = turnstileGlobal();
+    if (this.turnstileWidgetId && api) {
+      try {
+        api.remove(this.turnstileWidgetId);
+      } catch {
+      }
+    }
+    this.turnstileWidgetId = null;
+    this.turnstileLoadInFlight = false;
+    this.challengeError = false;
+    this.turnstileContainer = newTurnstileContainer();
+    this.challengeToken = void 0;
+  }
   captureFocus() {
     if (typeof document === "undefined") return null;
     const active = document.activeElement;
@@ -1722,7 +2411,9 @@ var DomFormController = class {
       const buttons = Array.from(
         this.element.querySelectorAll("[data-fillo-rank-opt]")
       ).filter((b) => b.getAttribute("data-fillo-rank-opt") === desc.rankOpt);
-      target = buttons.find((b) => b.getAttribute("data-fillo-rank-dir") === desc.rankDir && !b.disabled) ?? buttons.find((b) => !b.disabled) ?? null;
+      target = buttons.find(
+        (b) => b.getAttribute("data-fillo-rank-dir") === desc.rankDir && !b.disabled
+      ) ?? buttons.find((b) => !b.disabled) ?? null;
     }
     if (!target && desc.id) target = document.getElementById(desc.id);
     if (!target && desc.fieldId != null && desc.controlIndex != null && desc.controlIndex >= 0) {
@@ -1745,9 +2436,13 @@ var DomFormController = class {
   applyFocus(intent, captured) {
     if (typeof document === "undefined") return;
     if (intent === "error") {
+      const summary = this.element.querySelector(".fillo-error-summary");
+      if (summary) {
+        summary.focus();
+        return;
+      }
       const invalid = this.element.querySelector('[aria-invalid="true"]');
-      const target = invalid?.matches(FOCUSABLE_SELECTOR) ? invalid : invalid?.querySelector(FOCUSABLE_SELECTOR);
-      target?.focus?.();
+      invalid && focusableWithin(invalid)?.focus();
       return;
     }
     if (intent === "page") {
@@ -1802,13 +2497,26 @@ var DomFormController = class {
     );
     this.syncErrorNotice = error;
   }
+  // A macrotask, not a microtask (ledger #4, docs/decisions/input-quality.md):
+  // a text field's blur fires "change" -> setValue -> this full-tree rebuild,
+  // and if the respondent's next action is a pointer click elsewhere (e.g. a
+  // rating star), that click is a SEPARATE, later task from the blur's — but
+  // a microtask always drains before any later task runs, including that
+  // click. A microtask-deferred rebuild still replaces the click's target
+  // node before the click is dispatched, so Chromium/WebKit never fire it at
+  // all (the click is silently swallowed — click doesn't fire when the
+  // mousedown target was detached before mouseup: w3c/uievents#141).
+  // setTimeout is the standard fix for exactly this "blur beats click" race:
+  // scheduled during the blur's own task, it reliably runs BEHIND whatever
+  // pointer/click tasks were already in flight for the same gesture, so an
+  // in-flight click lands on the pre-rebuild node first.
   queueRender() {
     if (this.renderQueued || this.destroyed) return;
     this.renderQueued = true;
-    queueMicrotask(() => {
+    setTimeout(() => {
       this.renderQueued = false;
       this.render();
-    });
+    }, 0);
   }
   render(error) {
     if (this.destroyed) return;
@@ -1816,6 +2524,8 @@ var DomFormController = class {
     this.focusIntent = null;
     const captured = intent ? null : this.captureFocus();
     this.closeOverlays();
+    const willRenderForm = this.phase === "ready" && this.engine?.getState().status !== "submitted";
+    if (!willRenderForm) this.teardownTurnstileWidget();
     this.element.replaceChildren();
     if (this.phase === "loading") {
       const loading = el("div", {
@@ -1833,12 +2543,16 @@ var DomFormController = class {
     }
     const activeError = error ?? this.fatalError;
     if (this.phase === "error" && activeError) {
+      const targetMessage = activeError.code === "form_target_required" && this.devChrome() ? `${activeError.message} (${activeError.code})` : null;
       const errorView = this.options.renderError?.(activeError) ?? el("div", {
         className: "fillo-form fillo-form--error",
-        text: this.genericUnavailable ? "This form is unavailable." : loadFailureMessage(activeError)
+        text: targetMessage ?? (this.genericUnavailable ? "This form is unavailable." : loadFailureMessage(activeError))
       });
       if (!errorView.hasAttribute("data-fillo")) errorView.setAttribute("data-fillo", "root");
       if (!errorView.hasAttribute("data-state")) errorView.setAttribute("data-state", "error");
+      if (activeError.code && !errorView.hasAttribute("data-error-code")) {
+        errorView.setAttribute("data-error-code", activeError.code);
+      }
       if (!errorView.hasAttribute("role")) errorView.setAttribute("role", "alert");
       themeStyle(errorView, this.theme);
       this.element.appendChild(errorView);
@@ -1850,13 +2564,16 @@ var DomFormController = class {
         attrs: { "data-fillo": "root", "data-state": "closed" }
       });
       themeStyle(closed, this.theme);
-      closed.appendChild(el("p", { className: "fillo-closed", text: "This form is no longer accepting responses." }));
+      closed.appendChild(
+        el("p", { className: "fillo-closed", text: "This form is no longer accepting responses." })
+      );
       this.element.appendChild(closed);
       return;
     }
     if (this.notOpenVariant && this.schema) {
       this.element.appendChild(this.renderNotOpen(this.notOpenVariant));
-      if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+      if (this.brandingVisible())
+        this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
       return;
     }
     if (!this.schema) return;
@@ -1865,18 +2582,23 @@ var DomFormController = class {
       const state = this.engine.getState();
       const success = this.options.renderSuccess?.(api) ?? defaultSuccess(this.schema);
       success.setAttribute("data-fillo", success.getAttribute("data-fillo") ?? "root");
+      if (this.formId && !success.hasAttribute("data-fillo-form-id")) {
+        success.setAttribute("data-fillo-form-id", this.formId);
+      }
       success.setAttribute("data-state", success.getAttribute("data-state") ?? "submitted");
-      success.setAttribute("role", success.getAttribute("role") ?? "status");
-      success.setAttribute("aria-live", success.getAttribute("aria-live") ?? "polite");
       if (!success.hasAttribute("tabindex")) success.setAttribute("tabindex", "-1");
       themeStyle(success, this.theme);
       this.element.appendChild(success);
-      if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+      if (this.brandingVisible())
+        this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
       if (!state.restoredSubmission && !this.liveSubmissionHandled) {
         this.liveSubmissionHandled = true;
         const redirect = safeHttpUrl(this.schema.settings.redirectUrl);
         if (redirect && typeof window !== "undefined") window.location.assign(redirect);
-        else success.focus();
+        else {
+          success.focus();
+          this.announce(success.textContent ?? "");
+        }
       }
       return;
     }
@@ -1890,21 +2612,23 @@ var DomFormController = class {
           staged: this.stagedNotice,
           draft: this.draftNotice,
           warningUrl: this.syncWarningUrl,
-          noClient: !this.options.client
+          noClient: !this.options.client && !this.options.renderOnly
         })
       );
     }
     this.element.appendChild(this.renderForm());
-    if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+    if (this.brandingVisible())
+      this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
     this.applyFocus(intent, captured);
   }
   /** Server-driven and not client-removable; defaults on until the server says. */
   brandingVisible() {
     return this.fetchedPoweredBy ?? true;
   }
-  /** Production not-accepting chrome: the REAL form rendered blurred and
-   * display-only beneath a small card — honest about the state without a dead
-   * grey panel, and impossible to fill. The wrapper is inert + aria-hidden +
+  /** Production not-accepting chrome: a calm state backed by the real form
+   * rendered display-only — honest about the state and impossible to fill.
+   * The default CSS hides the preview; hosts without it still get the layered
+   * safety contract. The wrapper is inert + aria-hidden +
    * pointer-events:none, the preview markup nests every control in a natively
    * disabled fieldset (see renderForm), and the engine behind it was created
    * without a client/formId/resolver — so nothing inside can focus, submit,
@@ -1942,6 +2666,8 @@ var DomFormController = class {
   renderForm() {
     const api = this.api();
     const displayOnly = this.notOpenVariant !== null;
+    const challengeRequired = Boolean(this.challenge);
+    const showChallenge = !displayOnly && challengeRequired && api.isLastPage;
     const form = el(displayOnly ? "div" : "form", {
       className: `fillo-form ${this.options.className ?? ""}`,
       attrs: {
@@ -1950,6 +2676,7 @@ var DomFormController = class {
         "data-page": String(api.pageIndex + 1)
       }
     });
+    if (!displayOnly && this.formId) form.setAttribute("data-fillo-form-id", this.formId);
     form.toggleAttribute("data-last-page", api.isLastPage);
     themeStyle(form, this.theme);
     const advance = () => {
@@ -1971,17 +2698,17 @@ var DomFormController = class {
     if (restoreState?.resumedDraft || restoreState?.editingPrevious) {
       const resume = el("div", {
         className: "fillo-resume",
-        attrs: { role: "status", "data-fillo": "resume" }
+        attrs: { "data-fillo": "resume" }
       });
       resume.appendChild(
         el("span", {
           className: "fillo-resume-text",
-          text: restoreState.editingPrevious ? "You're updating your earlier response." : "Picked up where you left off."
+          text: restoreState.editingPrevious ? DEFAULT_STRINGS.editNotice : DEFAULT_STRINGS.resumeNotice
         })
       );
       const clear = el("button", {
         className: "fillo-resume-clear",
-        text: "Start over",
+        text: DEFAULT_STRINGS.resumeStartOver,
         attrs: { type: "button" }
       });
       clear.addEventListener("click", () => this.resetDraft());
@@ -1989,6 +2716,10 @@ var DomFormController = class {
       content.appendChild(resume);
     }
     if (api.pageCount > 1 && this.schema?.settings.showProgress !== false) {
+      const seq = reachablePageSequence(api.form, api.data);
+      const total = Math.max(seq.length, 1);
+      const pos = seq.indexOf(api.page.id);
+      const step = pos >= 0 ? pos + 1 : Math.min(api.pageIndex + 1, total);
       const progress = el("div", {
         className: "fillo-progress-track",
         attrs: {
@@ -1996,8 +2727,8 @@ var DomFormController = class {
           "data-fillo": "progress",
           "aria-label": api.form.title || "Form progress",
           "aria-valuemin": "1",
-          "aria-valuemax": String(api.pageCount),
-          "aria-valuenow": String(api.pageIndex + 1)
+          "aria-valuemax": String(total),
+          "aria-valuenow": String(step)
         }
       });
       progress.appendChild(
@@ -2005,7 +2736,7 @@ var DomFormController = class {
       );
       progress.firstElementChild?.style.setProperty(
         "--fillo-progress-value",
-        `${(api.pageIndex + 1) / api.pageCount * 100}%`
+        `${step / total * 100}%`
       );
       content.appendChild(progress);
     }
@@ -2013,7 +2744,11 @@ var DomFormController = class {
       const header = el("header", { className: "fillo-header", attrs: { "data-fillo": "header" } });
       if (api.form.title) {
         header.appendChild(
-          el("h1", { className: "fillo-title", text: api.form.title, attrs: { "data-fillo": "title" } })
+          el("h1", {
+            className: "fillo-title",
+            text: api.form.title,
+            attrs: { "data-fillo": "title" }
+          })
         );
       }
       if (api.form.description) {
@@ -2035,6 +2770,8 @@ var DomFormController = class {
         })
       );
     }
+    const summary = this.renderErrorSummary(api);
+    if (summary) content.appendChild(summary);
     const blocks = el("div", { className: "fillo-blocks", attrs: { "data-fillo": "blocks" } });
     for (const block of api.blocks) {
       const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
@@ -2042,7 +2779,16 @@ var DomFormController = class {
     }
     content.appendChild(blocks);
     if (!displayOnly) {
-      const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
+      const hp = el("input", {
+        className: "fillo-hp",
+        attrs: {
+          type: "text",
+          name: "fillo_hp_field",
+          tabindex: "-1",
+          autocomplete: "off",
+          "aria-hidden": "true"
+        }
+      });
       hp.style.position = "absolute";
       hp.style.left = "-9999px";
       hp.style.top = "auto";
@@ -2056,20 +2802,49 @@ var DomFormController = class {
       });
       content.appendChild(hp);
     }
+    if (showChallenge) {
+      const slot = el("div", {
+        className: "fillo-turnstile-slot",
+        attrs: { "data-fillo": "turnstile-slot" }
+      });
+      slot.appendChild(this.turnstileContainer);
+      if (this.challengeError) {
+        slot.appendChild(
+          el("p", {
+            className: "fillo-turnstile-error",
+            attrs: { role: "alert" },
+            text: DEFAULT_STRINGS.challengeUnavailable
+          })
+        );
+      }
+      content.appendChild(slot);
+      this.ensureTurnstileWidget(this.challenge.siteKey);
+    } else if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight) {
+      this.teardownTurnstileWidget();
+    }
     const submitError = api.status === "error" ? "This form can't submit right now. Please try again in a moment." : this.engine?.getState().submitError;
     if (submitError) {
-      const alert = el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError });
+      const alert = el("p", {
+        className: "fillo-submit-error",
+        attrs: { role: "alert" },
+        text: submitError
+      });
       const fixUrl = this.devChrome() && this.resolutionFailureCode === "form_not_published" && this.syncWarningCode === "storage_required" ? safeHttpUrl(this.syncWarningUrl) : null;
       if (fixUrl) {
         alert.append(" Connect storage: ");
         alert.appendChild(
-          el("a", { text: fixUrl, attrs: { href: fixUrl, target: "_blank", rel: "noopener noreferrer" } })
+          el("a", {
+            text: fixUrl,
+            attrs: { href: fixUrl, target: "_blank", rel: "noopener noreferrer" }
+          })
         );
       }
       content.appendChild(alert);
     }
     const autoSubmit = api.form.settings.submitMode === "auto";
-    const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
+    const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data)) || // A challenge needs an explicit Submit even on an otherwise button-less
+    // auto-submit form — you can't one-tap past a human check.
+    showChallenge;
     const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
     if (showFooter) {
       const footer = el("footer", { className: "fillo-footer", attrs: { "data-fillo": "footer" } });
@@ -2088,7 +2863,12 @@ var DomFormController = class {
           text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
           attrs: { type: "submit", "data-fillo": "button" }
         });
-        submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
+        submit.toggleAttribute(
+          "disabled",
+          api.status === "submitting" || this.engine?.getState().uploading === true || // Wait for the human check before enabling submit (never "Next").
+          // The server rejects a tokenless submit regardless — this is UX only.
+          showChallenge && !this.challengeToken
+        );
         submit.addEventListener("click", (event) => {
           event.preventDefault();
           advance();
@@ -2099,6 +2879,45 @@ var DomFormController = class {
     }
     return form;
   }
+  /** GOV.UK error summary (audit P2.8): scoped to the CURRENTLY RENDERED
+   *  page — a failed submit already jumps to the first page with a visible
+   *  error, so every link resolves to something in the live tree. Per-field
+   *  messages lose their own role="alert"; this is the one alert. */
+  renderErrorSummary(api) {
+    const fields = api.blocks.filter(isField).filter((field) => api.errors[field.id]);
+    if (fields.length === 0) return null;
+    const box = el("div", {
+      className: "fillo-error-summary",
+      attrs: { role: "alert", tabindex: "-1", "data-fillo": "error-summary" }
+    });
+    box.appendChild(
+      el("p", {
+        className: "fillo-error-summary-title",
+        text: DEFAULT_FIELD_STRINGS.errorSummaryTitle
+      })
+    );
+    const list = el("ul");
+    for (const field of fields) {
+      const link = el("a", {
+        text: `${field.label}: ${api.errors[field.id]}`,
+        attrs: { href: `#${fieldIds(this.instanceId, field.id).inputId}` }
+      });
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+        const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+          (node) => node.getAttribute("data-field") === field.id
+        );
+        if (!fieldEl) return;
+        const invalid = fieldEl.querySelector('[aria-invalid="true"]') ?? fieldEl;
+        focusableWithin(invalid)?.focus();
+      });
+      const item = el("li");
+      item.appendChild(link);
+      list.appendChild(item);
+    }
+    box.appendChild(list);
+    return box;
+  }
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
     const setValue = (value, options) => {
@@ -2110,7 +2929,7 @@ var DomFormController = class {
         // dom's status union adds render phases; non-"idle" is a no anyway.
         status: api.status,
         isLastPage: api.isLastPage,
-        uploading: this.uploadProgress.size > 0
+        uploading: this.engine?.getState().uploading === true
       };
       if (shouldAutoSubmit(block, value, autoCtx)) void this.submit();
     };
@@ -2122,13 +2941,16 @@ var DomFormController = class {
       api,
       setValue,
       uploadFiles: (field, files) => this.uploadFiles(field, files),
-      uploadProgress: this.uploadProgress,
+      uploadRows: this.uploadRowsFor(block.id),
+      uploadAction: this.uploadAction,
       activeOtherFields: this.activeOtherFields,
       getValue: () => this.engine?.getState().data[block.id],
       registerOverlay: this.registerOverlay,
       uploadNotice: this.uploadNotices.get(block.id),
-      storageBlocked: this.storageBlocked(),
-      storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null
+      uploadDisabledReason: this.options.renderOnly ? "render_only" : this.storageBlocked() ? "storage_unavailable" : void 0,
+      storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null,
+      announce: this.announce,
+      announceAlert: this.announceAlert
     };
     const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
     return renderer?.(context) ?? null;
@@ -2149,9 +2971,12 @@ function defaultSuccess(schema) {
   const success = el("div", { className: "fillo-form fillo-form--success" });
   const inner = el("div", { className: "fillo-success" });
   appendChildren(inner, [
-    el("div", { className: "fillo-success-mark", text: "\u2713", attrs: { "aria-hidden": "true" } }),
+    el("div", { className: "fillo-success-mark", attrs: { "aria-hidden": "true" } }),
     el("h2", { className: "fillo-success-title", text: schema.settings.successTitle ?? "Thanks!" }),
-    el("p", { className: "fillo-success-message", text: schema.settings.successMessage ?? "Your response has been recorded." })
+    el("p", {
+      className: "fillo-success-message",
+      text: schema.settings.successMessage ?? "Your response has been recorded."
+    })
   ]);
   success.appendChild(inner);
   return success;
@@ -2199,7 +3024,10 @@ function devDraftEl(warningUrl) {
   if (safeUrl) {
     node.append("Connect storage to publish: ");
     node.appendChild(
-      el("a", { text: safeUrl, attrs: { href: safeUrl, target: "_blank", rel: "noopener noreferrer" } })
+      el("a", {
+        text: safeUrl,
+        attrs: { href: safeUrl, target: "_blank", rel: "noopener noreferrer" }
+      })
     );
     node.append(". ");
   }
@@ -2237,6 +3065,14 @@ function loadFailureMessage(error) {
   if (error.status === 422) return DEFAULT_STRINGS.renderFailed;
   return DEFAULT_STRINGS.loadFailed;
 }
+function formTargetRequiredError() {
+  return new FilloError(
+    "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
+    422,
+    void 0,
+    "form_target_required"
+  );
+}
 function toFilloError(error) {
   if (isFilloError(error)) return error;
   return new FilloError(error instanceof Error ? error.message : String(error), 0);
@@ -2244,7 +3080,11 @@ function toFilloError(error) {
 function renderForm(target, options) {
   const element = typeof target === "string" ? document.querySelector(target) : target;
   if (!element) throw new FilloError(`Fillo mount target not found: ${String(target)}`, 0);
-  return new DomFormController(element, { ...options, initialData: options.initialData ?? {} });
+  const internalOptions = {
+    ...options,
+    initialData: options.initialData ?? {}
+  };
+  return new DomFormController(element, internalOptions);
 }
 function createFormElement(options) {
   const host = el("div");
@@ -2262,7 +3102,7 @@ var FilloFormElement = class extends HTMLElementBase {
   mounted = false;
   mountScheduled = false;
   static get observedAttributes() {
-    return ["publishable-key", "form-id", "data-preview"];
+    return ["publishable-key", "form-id", "data-preview", "data-render-only"];
   }
   connectedCallback() {
     this.scheduleMount();
@@ -2319,6 +3159,11 @@ var FilloFormElement = class extends HTMLElementBase {
     const value = this.getAttribute("data-preview");
     return value !== null && value !== "false" && value !== "0";
   }
+  /** Explicit local-preview mode for custom-element integrations. */
+  renderOnlyAttrEnabled() {
+    const value = this.getAttribute("data-render-only");
+    return value !== null && value !== "false" && value !== "0";
+  }
   mount() {
     this.instance?.destroy();
     const key = this.getAttribute("publishable-key") ?? void 0;
@@ -2336,6 +3181,7 @@ var FilloFormElement = class extends HTMLElementBase {
       // Value-aware: frameworks stringify booleans onto data-* attributes, so
       // data-preview="false"/"0" must mean OFF, not presence-implies-on.
       preview: this.previewAttrEnabled() ? true : void 0,
+      renderOnly: this.renderOnlyAttrEnabled() ? true : void 0,
       onChange: (data) => this.dispatchEvent(new CustomEvent("fillo-change", { detail: { data } })),
       onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
       onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))