@usefillo/dom 0.10.0 → 0.11.0

package/dist/index.js

@@ -5,6 +5,7 @@ import {
   FilloClient,
   FilloError,
   PHONE_COUNTRIES,
+  PHONE_PICKER_COUNTRIES,
   countryByIso,
   countryByTimeZone,
   createClient,
@@ -13,19 +14,26 @@ import {
   digitsOnly,
   flagEmoji,
   formSchemasEqual,
+  formatAnswer,
+  formatGroupedNumber,
   formatNational,
   isBuildTimeDevEnv,
   isCodeForm,
   isField,
   isFilloError,
   isLikelyDevEnv,
+  isValidPartialNumberText,
   normalizeFormSchema,
   normalizeFormTheme,
+  parseGroupedNumber,
   parsePhone,
   pipeBlock,
   positionPhonePopover,
   provisionWorkspace,
   needsExplicitSubmit,
+  radioGroupStep,
+  reachablePageSequence,
+  resolveThemeAppearance,
   shouldAutoSubmit,
   syncCodeForm,
   toE164,
@@ -34,6 +42,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 +63,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 +93,12 @@ function badgeUrl(href) {
 function inputValue(value) {
   return typeof value === "string" || typeof value === "number" ? String(value) : "";
 }
+function groupedInputValue(value, decimals) {
+  const raw = inputValue(value);
+  if (raw === "") return raw;
+  const n = Number(raw);
+  return Number.isFinite(n) ? formatGroupedNumber(n, { decimals }) : raw;
+}
 function appendChildren(parent, children) {
   for (const child of children) {
     if (child) parent.appendChild(child);
@@ -120,12 +137,11 @@ function applyFieldAria(node, field, error, ids) {
 }
 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 +177,84 @@ 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 === "grouped";
+  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) : 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)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(parseGroupedNumber(input.value), { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        context.setValue(parseGroupedNumber(input.value));
+      });
+      input.addEventListener("blur", () => {
+        const live = context.getValue?.() ?? context.value;
+        input.value = groupedInputValue(live, numberField?.decimals);
+        lastValid = input.value;
+        lastCaret = input.value.length;
+      });
+    } else {
+      input.addEventListener("input", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(input.value, { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value)) 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;
@@ -241,8 +312,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 +327,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 +335,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 +352,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 +377,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 +410,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 +423,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,7 +435,14 @@ 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;
       }
@@ -377,21 +479,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 +517,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);
 }
@@ -463,7 +596,12 @@ 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);
   }
@@ -482,13 +620,16 @@ 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 });
@@ -536,7 +677,8 @@ function multiChoice(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" } }),
+      option.icon && selected.includes(option.id) ? el("span", { className: "fillo-option-check", text: "\u2713", attrs: { "aria-hidden": "true" } }) : null
     ]);
     wrap.appendChild(label);
   }
@@ -562,13 +704,16 @@ 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));
@@ -609,7 +754,7 @@ function dropdown(context) {
   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) {
@@ -626,10 +771,10 @@ function dropdown(context) {
   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,14 +815,11 @@ 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);
@@ -702,7 +844,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 +915,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 +929,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 +978,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 +999,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)),
@@ -874,18 +1026,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));
@@ -913,17 +1078,40 @@ function matrix(context) {
   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);
@@ -947,7 +1135,7 @@ 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",
@@ -960,6 +1148,13 @@ function signature(context) {
   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 +1166,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 +1186,7 @@ function signature(context) {
       hint.style.display = "";
       context.setValue(null, { render: false });
     }
+    syncSignatureLabel();
   };
   typed.addEventListener("input", () => drawTyped(typed.value));
   const point = (event) => {
@@ -1006,6 +1201,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,14 +1229,31 @@ 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;
@@ -1052,12 +1265,12 @@ function fileUpload(context) {
   });
   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;
+  input.disabled = storageBlocked;
   applyFieldAria(input, field, context.error, context.ids);
   input.addEventListener("change", () => {
     if (storageBlocked) return;
     const files = Array.from(input.files ?? []);
+    input.value = "";
     void context.uploadFiles?.(field, files);
   });
   const wrap = el("div");
@@ -1065,8 +1278,7 @@ function fileUpload(context) {
   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" }
+      text: internal.storageFixUrl ? "Connect file storage to enable uploads" : DEFAULT_FIELD_STRINGS.uploadsUnavailable
     });
     if (internal.storageFixUrl) {
       hint.append(" \u2014 ");
@@ -1079,31 +1291,102 @@ function fileUpload(context) {
     }
     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))
+  const done = Array.isArray(context.value) ? context.value : [];
+  const rows = internal.uploadRows ?? [];
+  const maxFiles = field.maxFiles ?? 1;
+  const remaining = maxFiles - done.length - rows.filter((row) => row.error === void 0).length;
+  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) {
+        li.appendChild(el("span", { className: "fillo-file-meta", text: row.error ?? "" }));
+        if (remaining > 0) {
+          li.appendChild(
+            fileActionBtn(
+              "fillo-file-retry",
+              `${DEFAULT_FIELD_STRINGS.uploadRetry} ${row.name}`,
+              DEFAULT_FIELD_STRINGS.uploadRetry,
+              () => internal.uploadAction?.(row.key, "retry")
+            )
+          );
+        }
+        li.appendChild(fileActionBtn("fillo-file-remove", "Dismiss", "\xD7", () => internal.uploadAction?.(row.key, "dismiss")));
+      } 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)}` }),
+          appendChildren(el("span", { className: "fillo-progress", attrs: { "aria-hidden": "true" } }), [bar]),
+          fileActionBtn("fillo-file-remove", `Cancel ${row.name}`, "\xD7", () => internal.uploadAction?.(row.key, "cancel"))
+        ]);
       }
-    });
-    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 +1421,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 +1430,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 +1525,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 +1538,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
@@ -1231,8 +1613,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,12 +1632,15 @@ 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.challenge;
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
       if (codeForm) {
         const client = this.options.client;
@@ -1266,6 +1651,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.",
@@ -1358,6 +1744,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;
@@ -1413,9 +1801,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);
@@ -1452,7 +1842,14 @@ var DomFormController = class {
       // 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: displayOnly ? 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: displayOnly ? false : Boolean(this.challenge),
+      getChallengeToken: () => this.challengeToken,
+      onChallengeFailed: () => this.resetChallengeWidget()
     });
     let lastStatus = this.engine.getState().status;
     let lastResumed = this.engine.getState().resumedDraft;
@@ -1461,6 +1858,8 @@ 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;
@@ -1540,7 +1939,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 +1977,87 @@ 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 +2070,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 +2083,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 +2116,83 @@ 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;
@@ -1745,9 +2250,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") {
@@ -1816,6 +2325,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", {
@@ -1866,8 +2377,6 @@ var DomFormController = class {
       const success = this.options.renderSuccess?.(api) ?? defaultSuccess(this.schema);
       success.setAttribute("data-fillo", success.getAttribute("data-fillo") ?? "root");
       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);
@@ -1876,7 +2385,10 @@ var DomFormController = class {
         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;
     }
@@ -1902,9 +2414,10 @@ var DomFormController = class {
   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 +2455,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: {
@@ -1971,17 +2486,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 +2504,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 +2515,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 +2524,7 @@ var DomFormController = class {
       );
       progress.firstElementChild?.style.setProperty(
         "--fillo-progress-value",
-        `${(api.pageIndex + 1) / api.pageCount * 100}%`
+        `${step / total * 100}%`
       );
       content.appendChild(progress);
     }
@@ -2035,6 +2554,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);
@@ -2056,6 +2577,26 @@ 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 });
@@ -2069,7 +2610,9 @@ var DomFormController = class {
       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 +2631,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 +2647,42 @@ 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 +2694,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 +2706,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
+      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,7 +2736,7 @@ 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." })
   ]);