@usefillo/react 0.10.0 → 0.11.0

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   useEffect as useEffect8,
   useId as useId2,
   useMemo as useMemo5,
-  useRef as useRef7,
+  useRef as useRef8,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -15,15 +15,17 @@ import {
   createClient,
   formSchemasEqual,
   isBuildTimeDevEnv as isBuildTimeDevEnv2,
+  isField as isField2,
   isFilloError as isFilloError2,
   isLikelyDevEnv,
   needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
   reachableFields,
-  reachablePageSequence
+  reachablePageSequence,
+  resolveThemeAppearance
 } from "@usefillo/core";
-import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
+import { REQUIRED_FIELD_MESSAGE as REQUIRED_FIELD_MESSAGE2, resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
 
 // src/appearance.tsx
 import { createContext, useContext } from "react";
@@ -155,6 +157,12 @@ var FilloChromeContext = createContext2(null);
 function useFilloChrome() {
   return useContext2(FilloChromeContext);
 }
+var noopAnnounce = () => {
+};
+var FilloAnnounceContext = createContext2(noopAnnounce);
+function useFilloAnnounce() {
+  return useContext2(FilloAnnounceContext);
+}
 function useFilloInstanceId() {
   const instanceId = useContext2(FilloInstanceIdContext);
   const fallbackId = useId().replace(/:/g, "");
@@ -328,6 +336,7 @@ function useCodeFormSync(form, client, onError, options) {
         accepting: void 0,
         acceptingReason: void 0,
         uploadsAvailable: void 0,
+        uploadFileSizeLimitMb: void 0,
         resolvedSchema: void 0,
         resolvedTheme: void 0,
         warning: void 0,
@@ -390,6 +399,7 @@ function useCodeFormSync(form, client, onError, options) {
         accepting: r.accepting,
         acceptingReason: r.acceptingReason,
         uploadsAvailable: r.uploadsAvailable,
+        uploadFileSizeLimitMb: r.uploadFileSizeLimitMb,
         resolvedSchema: r.resolvedSchema,
         resolvedTheme: r.resolvedTheme,
         warning: r.warning,
@@ -451,6 +461,7 @@ function useCodeFormSync(form, client, onError, options) {
     accepting: synced.accepting,
     acceptingReason: synced.acceptingReason,
     uploadsAvailable: synced.uploadsAvailable,
+    uploadFileSizeLimitMb: synced.uploadFileSizeLimitMb,
     resolvedSchema: synced.resolvedSchema,
     resolvedTheme: synced.resolvedTheme,
     warning: synced.warning,
@@ -467,12 +478,25 @@ function useCodeFormSync(form, client, onError, options) {
 }
 
 // src/fields.tsx
-import { isField, pipeBlock, REQUIRED_FIELD_MESSAGE, shouldAutoSubmit, slotClass as slotClass2, visibleFields } from "@usefillo/core";
-import { memo, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import {
+  formatAnswer,
+  formatGroupedNumber,
+  isField,
+  isValidPartialNumberText,
+  parseGroupedNumber,
+  pipeBlock,
+  radioGroupStep,
+  REQUIRED_FIELD_MESSAGE,
+  shouldAutoSubmit,
+  slotClass as slotClass2,
+  visibleFields
+} from "@usefillo/core";
+import { memo, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef6, useState as useState5 } from "react";
 
 // src/phone.tsx
 import {
   PHONE_COUNTRIES,
+  PHONE_PICKER_COUNTRIES,
   countryByIso,
   countryByTimeZone,
   digitsOnly,
@@ -524,8 +548,9 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     const guess = countryByTimeZone(browserTimeZone()) ?? countryByIso(localeCountry());
     if (guess) setCountry(guess);
   }, []);
+  const [pendingRaw, setPendingRaw] = useState2(null);
   const national = nationalFor(stored, country);
-  const display = formatNational(country, national);
+  const display = pendingRaw ?? formatNational(country, national);
   const inputRef = useRef3(null);
   const caretDigits = useRef3(null);
   useLayoutEffect(() => {
@@ -552,15 +577,23 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     const caret = el.selectionStart ?? raw.length;
     caretDigits.current = digitsOnly(raw.slice(0, caret)).length;
     if (raw.trimStart().startsWith("+")) {
-      const p = parsePhone(raw);
+      const p = parsePhone(raw, country, { previousDigits: national });
+      if (p.pending) {
+        setPendingRaw(p.raw ?? raw);
+        setValue(p.raw ?? raw);
+        return;
+      }
+      setPendingRaw(null);
       if (p.country) setCountry(p.country);
       commit(p.country ?? country, p.country ? p.national : digitsOnly(raw));
       return;
     }
+    setPendingRaw(null);
     commit(country, digitsOnly(raw));
   }
   function pickCountry(c) {
     touched.current = true;
+    setPendingRaw(null);
     setCountry(c);
     commit(c, national);
     inputRef.current?.focus();
@@ -593,7 +626,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx2("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 function CountrySelect({
@@ -601,6 +634,8 @@ function CountrySelect({
   onPick,
   labelledBy
 }) {
+  const strings = useStrings();
+  const announce = useFilloAnnounce();
   const [open, setOpen] = useState2(false);
   const [query, setQuery] = useState2("");
   const [active, setActive] = useState2(0);
@@ -609,19 +644,22 @@ function CountrySelect({
   const triggerRef = useRef3(null);
   const popoverRef = useRef3(null);
   const searchRef = useRef3(null);
+  const seedRef = useRef3(null);
   const listId = `${labelledBy}-countries`;
   const matches = useMemo3(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return PHONE_COUNTRIES;
+    if (!q) return PHONE_PICKER_COUNTRIES;
     const qDigits = q.replace(/[^\d]/g, "");
-    return PHONE_COUNTRIES.filter(
+    return PHONE_PICKER_COUNTRIES.filter(
       (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase() === q || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
     );
   }, [query]);
   useEffect3(() => {
     if (!open) return;
-    setQuery("");
-    setActive(Math.max(0, PHONE_COUNTRIES.indexOf(country)));
+    const seed = seedRef.current ?? "";
+    seedRef.current = null;
+    setQuery(seed);
+    setActive(seed ? 0 : Math.max(0, PHONE_PICKER_COUNTRIES.indexOf(country)));
     const id = requestAnimationFrame(() => searchRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, [open, country]);
@@ -648,8 +686,15 @@ function CountrySelect({
     if (!open) return;
     document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
   }, [active, open, listId]);
+  const resultsAnnouncement = strings.phoneResultsCount(matches.length);
+  useEffect3(() => {
+    if (!open || !query.trim()) return;
+    const id = setTimeout(() => announce(resultsAnnouncement), 300);
+    return () => clearTimeout(id);
+  }, [open, query, resultsAnnouncement, announce]);
   function choose(c) {
     if (!c) return;
+    announce(strings.phoneCountrySelected(c.name));
     onPick(c);
     setOpen(false);
   }
@@ -669,7 +714,30 @@ function CountrySelect({
       triggerRef.current?.focus();
     }
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, children: [
+  function onTriggerKeyDown(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
+      e.preventDefault();
+      seedRef.current = e.key;
+      setOpen(true);
+    }
+  }
+  function onCompositeBlur(e) {
+    if (!open) return;
+    const next = e.relatedTarget;
+    if (next) {
+      if (!rootRef.current?.contains(next)) setOpen(false);
+      return;
+    }
+    queueMicrotask(() => {
+      if (!rootRef.current?.contains(document.activeElement)) setOpen(false);
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, onBlur: onCompositeBlur, children: [
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -681,6 +749,7 @@ function CountrySelect({
         "aria-controls": open ? listId : void 0,
         "aria-label": `Country: ${country.name} (+${country.dialCode})`,
         onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
         children: [
           /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
           /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-dial", children: [
@@ -737,7 +806,7 @@ function CountrySelect({
           },
           c.iso2
         )),
-        matches.length === 0 && /* @__PURE__ */ jsx2("li", { className: "fillo-phone-empty", children: "No matches" })
+        matches.length === 0 && /* @__PURE__ */ jsx2("li", { className: "fillo-phone-empty", role: "option", "aria-disabled": "true", children: "No matches" })
       ] })
     ] })
   ] });
@@ -752,6 +821,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const strings = useStrings();
   const typedInputId = `${ids.inputId}-typed`;
   const canvasRef = useRef4(null);
+  const typedInputRef = useRef4(null);
   const drawing = useRef4(false);
   const [hasInk, setHasInk] = useState3(Boolean(value));
   const [typedName, setTypedName] = useState3("");
@@ -848,6 +918,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     setHasInk(false);
     setTypedName("");
     setValue(null);
+    typedInputRef.current?.focus();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
@@ -869,7 +940,8 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
               {
                 ref: canvasRef,
                 className: "fillo-signature-canvas",
-                "aria-hidden": "true",
+                role: "img",
+                "aria-label": hasInk ? strings.signatureSigned : strings.signatureEmpty,
                 onPointerDown: start,
                 onPointerMove: move,
                 onPointerUp: end,
@@ -886,6 +958,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
               "input",
               {
                 id: typedInputId,
+                ref: typedInputRef,
                 type: "text",
                 className: "fillo-input fillo-signature-type-input",
                 autoComplete: "name",
@@ -904,7 +977,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
@@ -926,6 +999,14 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
+function uploadFailureMessage(error, strings) {
+  if (error instanceof Error && error.name === "FilloError") {
+    const status = error.status;
+    if (status !== void 0 && status >= 500) return strings.uploadUnavailable;
+    return error.message || strings.uploadFailed;
+  }
+  return strings.uploadFailed;
+}
 function FileUploadField({ field, value, error, setValue, api, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const slots = useFieldSlots(field, error);
@@ -952,7 +1033,8 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
   const filesRef = useRef5(files);
   filesRef.current = files;
   const maxFiles = schema.maxFiles ?? 1;
-  const maxMb = schema.maxFileSizeMb ?? 500;
+  const configuredMaxMb = schema.maxFileSizeMb ?? 500;
+  const maxMb = chrome?.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, chrome.uploadFileSizeLimitMb) : configuredMaxMb;
   const maxBytes = maxMb * 1024 * 1024;
   const storageBlocked = chrome?.uploadsAvailable === false;
   const storageUrl = storageBlocked && chrome?.devChrome ? safeHttpUrl(chrome.warningUrl) : null;
@@ -991,7 +1073,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
       setValue(next);
     } catch (err) {
       if (mountedRef.current) {
-        const message = err instanceof Error && err.name === "FilloError" && err.message ? err.message : strings.uploadFailed;
+        const message = uploadFailureMessage(err, strings);
         setInFlight(
           (prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f)
         );
@@ -1095,6 +1177,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
       files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
         /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
         /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+        /* @__PURE__ */ jsx4("span", { className: "fillo-sr-only", children: "Uploaded" }),
         /* @__PURE__ */ jsx4(
           "button",
           {
@@ -1120,32 +1203,34 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
           children: [
             /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
             f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: f.error }),
-              f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-retry",
-                  "aria-label": `${strings.uploadRetry} ${f.name}`,
-                  onClick: () => {
-                    const retryFile = f.file;
-                    if (!retryFile) return;
-                    setInFlight((prev) => prev.filter((x) => x.key !== f.key));
-                    void startUpload(retryFile);
-                  },
-                  children: strings.uploadRetry
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-remove",
-                  "aria-label": "Dismiss",
-                  onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-                  children: "\xD7"
-                }
-              )
+              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-actions", children: [
+                f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "fillo-file-retry",
+                    "aria-label": `${strings.uploadRetry} ${f.name}`,
+                    onClick: () => {
+                      const retryFile = f.file;
+                      if (!retryFile) return;
+                      setInFlight((prev) => prev.filter((x) => x.key !== f.key));
+                      void startUpload(retryFile);
+                    },
+                    children: strings.uploadRetry
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "fillo-file-remove",
+                    "aria-label": "Dismiss",
+                    onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
             ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
               /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
                 Math.round(f.fraction * 100),
@@ -1169,7 +1254,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         f.key
       ))
     ] }),
-    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
@@ -1198,9 +1283,6 @@ function useControl(base, field, error) {
     "data-fillo": "control"
   };
 }
-function isNativeControlTarget(target) {
-  return target instanceof HTMLElement && Boolean(target.closest("input, textarea, select, button"));
-}
 function FieldShell({
   field,
   error,
@@ -1237,7 +1319,7 @@ function FieldShell({
         ] }),
         field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx5("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx5("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
@@ -1245,6 +1327,7 @@ function FieldShell({
 function TextInput({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
+  const autoComplete = field.kind === "email" ? "email" : field.kind === "url" ? "url" : void 0;
   const control = useControl("fillo-input", field, error);
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "input",
@@ -1252,6 +1335,7 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
       id: ids.inputId,
       ...control,
       type,
+      autoComplete,
       value: typeof value === "string" || typeof value === "number" ? String(value) : "",
       placeholder: field.placeholder,
       maxLength: "maxLength" in field ? field.maxLength : void 0,
@@ -1262,6 +1346,71 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
     }
   ) });
 }
+function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const control = useControl("fillo-input", field, error);
+  const [draft, setDraft] = useState5(null);
+  const inputRef = useRef6(null);
+  const pendingCaret = useRef6(null);
+  const [, setRevertTick] = useState5(0);
+  useLayoutEffect2(() => {
+    if (pendingCaret.current === null) return;
+    const pos = pendingCaret.current;
+    pendingCaret.current = null;
+    inputRef.current?.setSelectionRange(pos, pos);
+  });
+  const num = field;
+  const grouped = num.notation === "grouped";
+  const hasAffix = Boolean(num.prefix) || Boolean(num.suffix);
+  if (!grouped && !hasAffix) {
+    return /* @__PURE__ */ jsx5(
+      TextInput,
+      {
+        field,
+        value,
+        error,
+        setValue,
+        api,
+        ids: providedIds
+      }
+    );
+  }
+  const stored = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  const n = Number(stored);
+  const display = draft !== null ? draft : grouped && stored !== "" && Number.isFinite(n) ? formatGroupedNumber(n, { decimals: num.decimals }) : stored;
+  const input = /* @__PURE__ */ jsx5(
+    "input",
+    {
+      ref: inputRef,
+      id: ids.inputId,
+      ...control,
+      type: "text",
+      inputMode: "decimal",
+      value: display,
+      placeholder: field.placeholder,
+      onBlur: grouped ? () => setDraft(null) : void 0,
+      onChange: (e) => {
+        if (!isValidPartialNumberText(e.target.value)) {
+          pendingCaret.current = e.target.selectionStart ?? e.target.value.length;
+          setRevertTick((t) => t + 1);
+          return;
+        }
+        if (grouped) {
+          setDraft(e.target.value);
+          setValue(parseGroupedNumber(e.target.value));
+        } else {
+          setValue(e.target.value);
+        }
+      },
+      ...fieldAria(field, error, ids)
+    }
+  );
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: hasAffix ? /* @__PURE__ */ jsxs5("div", { className: "fillo-number", children: [
+    num.prefix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-prefix", children: num.prefix }),
+    input,
+    num.suffix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-suffix", children: num.suffix })
+  ] }) : input });
+}
 function LongText({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const control = useControl("fillo-input fillo-textarea", field, error);
@@ -1347,12 +1496,6 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               opt.id,
               value === opt.id
             ),
-            onClick: (event) => {
-              if (isNativeControlTarget(event.target)) return;
-              event.preventDefault();
-              setOtherOn(false);
-              setValue(opt.id);
-            },
             children: [
               /* @__PURE__ */ jsx5(
                 "input",
@@ -1368,15 +1511,21 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              opt.icon && value === opt.id && // Icon-mode hides the native input, so its check state is
+              // otherwise color-only (forfeits forced-colors' own indicator).
+              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
               /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
         )),
-        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
-        // toggle the radio. The radio + "Other" text keep their own <label>.
+        choice.allowOther && // The outer element is a <label> so the whole row is a pointer
+        // target (native label click-forwarding), same as every other
+        // option row above. The free-text input below is its own labelable
+        // descendant, so it handles its own clicks without re-toggling the
+        // radio (dom's proven pattern).
         /* @__PURE__ */ jsxs5(
-          "div",
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1386,7 +1535,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx5(
                   "input",
                   {
@@ -1454,11 +1603,6 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               opt.id,
               selected.includes(opt.id)
             ),
-            onClick: (event) => {
-              if (isNativeControlTarget(event.target)) return;
-              event.preventDefault();
-              toggle(opt.id);
-            },
             children: [
               /* @__PURE__ */ jsx5(
                 "input",
@@ -1470,15 +1614,21 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              opt.icon && selected.includes(opt.id) && // Icon-mode hides the native input, so its check state is
+              // otherwise color-only (forfeits forced-colors' own indicator).
+              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
               /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
         )),
-        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
-        // toggle the checkbox. The checkbox + "Other" text keep their own <label>.
+        choice.allowOther && // The outer element is a <label> so the whole row is a pointer
+        // target (native label click-forwarding), same as every other
+        // option row above. The free-text input below is its own labelable
+        // descendant, so it handles its own clicks without re-toggling the
+        // checkbox (dom's proven pattern).
         /* @__PURE__ */ jsxs5(
-          "div",
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1488,7 +1638,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx5(
                   "input",
                   {
@@ -1610,18 +1760,16 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
               {
                 id: ids.inputId,
                 type: "checkbox",
-                role: "switch",
                 className: "fillo-toggle-input",
                 checked: value === true,
                 onChange: (e) => setValue(e.target.checked),
-                "aria-checked": value === true,
                 ...fieldAria(field, error, ids)
               }
             ),
             /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-thumb" }) })
           ] }),
           field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-          error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+          error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
         ]
       }
     );
@@ -1651,28 +1799,21 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
           ] })
         ] }),
         field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
 }
 function radiogroupKeyDown(e, steps, current, setValue) {
-  const forward = e.key === "ArrowRight" || e.key === "ArrowDown";
-  const backward = e.key === "ArrowLeft" || e.key === "ArrowUp";
-  if (!forward && !backward) return;
+  const group = e.currentTarget;
+  const rtl = getComputedStyle(group).direction === "rtl";
+  const index = rovingIndex(steps, current);
+  const next = radioGroupStep(e.key, index, steps.length, { rtl });
+  if (next == null) return;
   e.preventDefault();
-  const index = current == null ? -1 : steps.indexOf(current);
-  let next;
-  if (index === -1) {
-    next = forward ? 0 : steps.length - 1;
-  } else {
-    next = forward ? index + 1 : index - 1;
-    next = (next + steps.length) % steps.length;
-  }
   const value = steps[next];
   if (value === void 0) return;
   setValue(value);
-  const group = e.currentTarget;
   const buttons = group.querySelectorAll('[role="radio"]');
   buttons[next]?.focus();
 }
@@ -1693,6 +1834,7 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
     {
+      id: ids.inputId,
       ...control,
       role: "radiogroup",
       "aria-labelledby": ids.labelId,
@@ -1714,8 +1856,11 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
           "aria-label": `${n} of ${max}`,
           "aria-checked": n === current,
           tabIndex: i === tabbable ? 0 : -1,
-          onClick: () => setValue(n === current ? null : n),
-          children: "\u2605"
+          onClick: (event) => {
+            if (event.detail === 0 && n === current) return;
+            setValue(n === current ? null : n);
+          },
+          children: n <= current ? "\u2605" : "\u2606"
         },
         n
       ))
@@ -1745,6 +1890,7 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
     /* @__PURE__ */ jsx5(
       "div",
       {
+        id: ids.inputId,
         ...control,
         role: "radiogroup",
         "aria-labelledby": ids.labelId,
@@ -1768,7 +1914,10 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
             "aria-label": String(n),
             "aria-checked": value === n,
             tabIndex: i === tabbable ? 0 : -1,
-            onClick: () => setValue(value === n ? null : n),
+            onClick: (event) => {
+              if (event.detail === 0 && n === current) return;
+              setValue(value === n ? null : n);
+            },
             children: n
           },
           n
@@ -1783,19 +1932,34 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
 }
 function Ranking({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const strings = useStrings();
+  const announce = useFilloAnnounce();
   const ranking = field;
   const answered = Array.isArray(value) ? value : [];
   const order = [
     ...answered.filter((id) => ranking.options.some((o) => o.id === id)),
     ...ranking.options.map((o) => o.id).filter((id) => !answered.includes(id))
   ];
-  function move(id, delta) {
+  const pressedRef = useRef6(null);
+  useEffect6(() => {
+    const pressed = pressedRef.current;
+    pressedRef.current = null;
+    if (!pressed || !pressed.disabled) return;
+    const sibling = pressed.parentElement?.querySelector(
+      ".fillo-ranking-move:not(:disabled)"
+    );
+    sibling?.focus();
+  }, [value]);
+  function move(id, delta, button) {
     const index = order.indexOf(id);
     const target = index + delta;
     if (target < 0 || target >= order.length) return;
+    pressedRef.current = button;
     const next = [...order];
     [next[index], next[target]] = [next[target], next[index]];
     setValue(next);
+    const moved = ranking.options.find((o) => o.id === id);
+    if (moved) announce(strings.rankingPosition(moved.label, target + 1, order.length));
   }
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
@@ -1818,7 +1982,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 className: "fillo-ranking-move",
                 "aria-label": `Move ${option.label} up`,
                 disabled: index === 0,
-                onClick: () => move(id, -1),
+                onClick: (e) => move(id, -1, e.currentTarget),
                 children: "\u2191"
               }
             ),
@@ -1829,7 +1993,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 className: "fillo-ranking-move",
                 "aria-label": `Move ${option.label} down`,
                 disabled: index === order.length - 1,
-                onClick: () => move(id, 1),
+                onClick: (e) => move(id, 1, e.currentTarget),
                 children: "\u2193"
               }
             )
@@ -1872,12 +2036,12 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
                 "div",
                 {
                   role: "radiogroup",
-                  "aria-labelledby": rowLabelId,
+                  "aria-labelledby": `${ids.labelId} ${rowLabelId}`,
                   "aria-owns": matrix.columns.map(radioId).join(" "),
                   children: /* @__PURE__ */ jsx5("span", { id: rowLabelId, children: row.label })
                 }
               ) }),
-              matrix.columns.map((col) => /* @__PURE__ */ jsx5("td", { children: /* @__PURE__ */ jsx5(
+              matrix.columns.map((col) => /* @__PURE__ */ jsx5("td", { "data-label": col.label, children: /* @__PURE__ */ jsx5("label", { className: "fillo-matrix-cell", children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   id: radioId(col),
@@ -1890,7 +2054,7 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
                   checked: answers[row.id] === col.id,
                   onChange: () => setValue({ ...answers, [row.id]: col.id })
                 }
-              ) }, col.id))
+              ) }) }, col.id))
             ] }, row.id)
           );
         }) })
@@ -1901,12 +2065,45 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
 function Hidden() {
   return null;
 }
+function Calculated({ field, value, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const state = { kind: field.kind, fieldId: field.id, invalid: false, required: false };
+  const rootCls = useSlotClass("fillo-field fillo-field--calculated fillo-calculated", {
+    slot: "calculated",
+    ...state
+  });
+  const labelCls = useSlotClass("fillo-label", { slot: "label", ...state });
+  const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
+  const answered = value !== void 0 && value !== null && value !== "";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: rootCls,
+      "data-fillo": "calculated",
+      "data-field": field.id,
+      "data-kind": field.kind,
+      children: [
+        /* @__PURE__ */ jsx5("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: field.label }),
+        field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        /* @__PURE__ */ jsx5(
+          "output",
+          {
+            id: ids.inputId,
+            className: `fillo-calculated-value${answered ? "" : " fillo-calculated-value--empty"}`,
+            "aria-describedby": field.description ? ids.descriptionId : void 0,
+            children: answered ? formatAnswer(field, value) : "\u2014"
+          }
+        )
+      ]
+    }
+  );
+}
 var DEFAULT_COMPONENTS = {
   short_text: TextInput,
   email: TextInput,
   url: TextInput,
   phone: PhoneField,
-  number: TextInput,
+  number: NumberInput,
   date: TextInput,
   long_text: LongText,
   select: SingleChoice,
@@ -1919,7 +2116,8 @@ var DEFAULT_COMPONENTS = {
   matrix: Matrix,
   signature: SignatureField,
   file_upload: FileUploadField,
-  hidden: Hidden
+  hidden: Hidden,
+  calculated: Calculated
 };
 function ContentRenderer({ block }) {
   switch (block.kind) {
@@ -2034,7 +2232,7 @@ function FormField({
 }
 
 // src/turnstile.tsx
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
 var SCRIPT_ID = "fillo-turnstile-script";
@@ -2093,13 +2291,13 @@ function TurnstileWidget({
   registerReset,
   className
 }) {
-  const containerRef = useRef6(null);
-  const widgetIdRef = useRef6(null);
-  const onTokenRef = useRef6(onToken);
+  const containerRef = useRef7(null);
+  const widgetIdRef = useRef7(null);
+  const onTokenRef = useRef7(onToken);
   onTokenRef.current = onToken;
-  const onErrorRef = useRef6(onError);
+  const onErrorRef = useRef7(onError);
   onErrorRef.current = onError;
-  const registerResetRef = useRef6(registerReset);
+  const registerResetRef = useRef7(registerReset);
   registerResetRef.current = registerReset;
   useEffect7(() => {
     let cancelled = false;
@@ -2155,7 +2353,7 @@ function TurnstileWidget({
 // src/FilloForm.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function themeProps(theme) {
-  const safeTheme = normalizeFormTheme(theme);
+  const safeTheme = resolveThemeAppearance(normalizeFormTheme(theme));
   if (!safeTheme) return {};
   const style = {};
   if (safeTheme.primary) style["--fillo-primary"] = safeTheme.primary;
@@ -2175,17 +2373,25 @@ function badgeUrl(href) {
   url.searchParams.set("utm_source", "form_badge");
   return url.toString();
 }
-function focusFirstInvalid(formEl) {
-  if (!formEl || typeof window === "undefined") return;
-  const run = () => {
-    const invalid = formEl.querySelector('[aria-invalid="true"]');
-    const focusable = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    const target = invalid?.matches(focusable) ? invalid : invalid?.querySelector(focusable);
-    target?.focus?.();
-  };
+var FOCUSABLE_SELECTOR = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function resolveFocusable(el) {
+  if (!el) return null;
+  return el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
+}
+function nextFrame(run) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
+function focusErrorSummary(formEl) {
+  if (!formEl || typeof window === "undefined") return;
+  nextFrame(() => {
+    formEl.querySelector(".fillo-error-summary")?.focus();
+  });
+}
+function focusField(inputId) {
+  if (typeof document === "undefined") return;
+  resolveFocusable(document.getElementById(inputId))?.focus();
+}
 var HP_STYLE = {
   position: "absolute",
   left: "-9999px",
@@ -2227,6 +2433,7 @@ function FilloForm(props) {
     accepting: syncedAccepting,
     acceptingReason: syncedAcceptingReason,
     uploadsAvailable: syncedUploadsAvailable,
+    uploadFileSizeLimitMb: syncedUploadFileSizeLimitMb,
     resolvedSchema,
     resolvedTheme,
     warningCode: syncedWarningCode,
@@ -2238,7 +2445,7 @@ function FilloForm(props) {
   });
   const renderResolvedSnapshot = Boolean(resolvedSchema && !devChrome);
   const inlineSchema = codeForm ? renderResolvedSnapshot ? resolvedSchema : codeForm.schema : form;
-  const onErrorRef = useRef7(onError);
+  const onErrorRef = useRef8(onError);
   useEffect8(() => {
     onErrorRef.current = onError;
   });
@@ -2262,6 +2469,7 @@ function FilloForm(props) {
         accepting: published.accepting,
         acceptingReason: published.acceptingReason,
         uploadsAvailable: published.uploadsAvailable,
+        uploadFileSizeLimitMb: published.uploadFileSizeLimitMb,
         branding: published.branding ?? null,
         challenge: published.challenge ?? null
       });
@@ -2401,6 +2609,7 @@ function FilloForm(props) {
       stagedNotice: codeChangesStaged,
       syncErrorNotice: syncError ?? syncNoticeError ?? void 0,
       uploadsAvailable: codeForm ? syncedUploadsAvailable : currentLoaded?.uploadsAvailable,
+      uploadFileSizeLimitMb: codeForm ? syncedUploadFileSizeLimitMb : currentLoaded?.uploadFileSizeLimitMb ?? props.uploadFileSizeLimitMb,
       syncWarningCode: codeForm ? syncedWarningCode : void 0,
       syncWarningUrl: syncedWarningUrl,
       challenge
@@ -2466,17 +2675,17 @@ function ResolvedForm(props) {
   const instanceId = useId2().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = !displayOnly && (props.preview === true || devEnv);
-  const hpRef = useRef7(null);
+  const hpRef = useRef8(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
   const challenge = props.challenge;
   const challengeRequired = Boolean(challenge);
-  const challengeTokenRef = useRef7(void 0);
+  const challengeTokenRef = useRef8(void 0);
   const [resyncWarning, setResyncWarning] = useState6(null);
   const [resolutionFailureCode, setResolutionFailureCode] = useState6(null);
   const [challengeToken, setChallengeToken] = useState6(void 0);
   const [challengeError, setChallengeError] = useState6(false);
-  const resetChallengeRef = useRef7(void 0);
+  const resetChallengeRef = useRef8(void 0);
   const handleChallengeToken = useCallback((token) => {
     challengeTokenRef.current = token;
     setChallengeToken(token);
@@ -2494,7 +2703,8 @@ function ResolvedForm(props) {
           setResyncWarning({
             code: result.warningCode,
             url: result.warningUrl,
-            uploadsAvailable: result.uploadsAvailable
+            uploadsAvailable: result.uploadsAvailable,
+            uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
           });
           if (result.status === "draft") {
             throw new FilloError2(
@@ -2581,18 +2791,42 @@ function ResolvedForm(props) {
     }
   });
   useDraftFlush(api, !displayOnly);
+  const strings = resolveStrings(props.strings);
+  const announceRef = useRef8(null);
+  const announce = useCallback((text) => {
+    const el = announceRef.current;
+    if (!el) return;
+    if (el.textContent === text) {
+      el.textContent = "";
+      nextFrame(() => {
+        if (announceRef.current) announceRef.current.textContent = text;
+      });
+      return;
+    }
+    el.textContent = text;
+  }, []);
+  useEffect8(() => {
+    if (api.status === "submitting") announce(strings.submittingAnnouncement);
+  }, [api.status, announce, strings.submittingAnnouncement]);
+  const resuming = api.resumedDraft || api.editingPrevious;
+  const resumeAnnouncement = api.editingPrevious ? strings.editNotice : strings.resumeNotice;
+  useEffect8(() => {
+    if (resuming) announce(resumeAnnouncement);
+  }, [resuming, resumeAnnouncement, announce]);
   const themed = useMemo5(() => themeProps(theme), [theme]);
   const warningCode = resyncWarning ? resyncWarning.code : props.syncWarningCode;
   const warningUrl = resyncWarning ? resyncWarning.url : props.syncWarningUrl;
   const uploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : props.uploadsAvailable;
+  const uploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : props.uploadFileSizeLimitMb;
   const chromeValue = useMemo5(
     () => ({
       devChrome,
       uploadsAvailable,
+      uploadFileSizeLimitMb,
       warningCode,
       warningUrl
     }),
-    [devChrome, uploadsAvailable, warningCode, warningUrl]
+    [devChrome, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
   );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
@@ -2602,19 +2836,23 @@ function ResolvedForm(props) {
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [liveSubmit, settings.redirectUrl]);
-  const successRef = useRef7(null);
+  const successRef = useRef8(null);
   useEffect8(() => {
     if (liveSubmit) successRef.current?.focus();
   }, [liveSubmit]);
-  const blocksRef = useRef7(null);
-  const prevPageIndex = useRef7(api.pageIndex);
+  const blocksRef = useRef8(null);
+  const prevPageIndex = useRef8(api.pageIndex);
   useEffect8(() => {
     if (prevPageIndex.current === api.pageIndex) return;
     prevPageIndex.current = api.pageIndex;
-    blocksRef.current?.focus();
+    const container = blocksRef.current?.parentElement;
+    const heading = container?.querySelector(".fillo-page-title, .fillo-title");
+    const target = heading ?? blocksRef.current;
+    if (!target) return;
+    if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+    target.focus();
   }, [api.pageIndex]);
   const appearance = props.appearance;
-  const strings = resolveStrings(props.strings);
   if (api.status === "submitted") {
     return /* @__PURE__ */ jsxs6(
       "div",
@@ -2638,7 +2876,7 @@ function ResolvedForm(props) {
               className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
               "data-fillo": "success",
               children: [
-                /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+                /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx7("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
                 /* @__PURE__ */ jsx7("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
               ]
@@ -2661,11 +2899,32 @@ function ResolvedForm(props) {
   const progressPos = progressSeq.indexOf(api.page.id);
   const progressStep = progressPos >= 0 ? progressPos + 1 : Math.min(api.pageIndex + 1, progressTotal);
   const submitFixUrl = devChrome && resolutionFailureCode === "form_not_published" && warningCode === "storage_required" ? safeHttpUrl(warningUrl) : null;
+  const invalidFields = [];
+  for (const block of api.blocks) {
+    if (!isField2(block)) continue;
+    const raw = api.errors[block.id];
+    if (!raw) continue;
+    invalidFields.push({
+      field: block,
+      error: raw === REQUIRED_FIELD_MESSAGE2 ? strings.required : raw,
+      inputId: createFilloFieldIds(instanceId, block.id).inputId
+    });
+  }
   const rootClass = slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
     slot: "root",
     status: api.status
   });
   const formBody = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      "span",
+      {
+        ref: announceRef,
+        className: "fillo-sr-only",
+        role: "status",
+        "aria-live": "polite",
+        "data-fillo": "announce"
+      }
+    ),
     devChrome && /* @__PURE__ */ jsx7(
       DevChrome,
       {
@@ -2678,12 +2937,11 @@ function ResolvedForm(props) {
         noClient: !props.client && !props.skipValidation
       }
     ),
-    (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs6(
+    resuming && /* @__PURE__ */ jsxs6(
       "div",
       {
         className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
         "data-fillo": "resume",
-        role: "status",
         children: [
           /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
           /* @__PURE__ */ jsx7("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
@@ -2731,6 +2989,24 @@ function ResolvedForm(props) {
       )
     ] }),
     multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx7("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
+    invalidFields.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "fillo-error-summary", role: "alert", tabIndex: -1, "data-fillo": "error-summary", children: [
+      /* @__PURE__ */ jsx7("p", { className: "fillo-error-summary-title", children: strings.errorSummaryTitle }),
+      /* @__PURE__ */ jsx7("ul", { children: invalidFields.map(({ field, error, inputId }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs6(
+        "a",
+        {
+          href: `#${inputId}`,
+          onClick: (e) => {
+            e.preventDefault();
+            focusField(inputId);
+          },
+          children: [
+            field.label,
+            ": ",
+            error
+          ]
+        }
+      ) }, field.id)) })
+    ] }),
     /* @__PURE__ */ jsx7("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
       BlockRenderer,
       {
@@ -2807,7 +3083,7 @@ function ResolvedForm(props) {
     ] }),
     props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
   ] });
-  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
+  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloAnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
     // Display-only preview: a plain div (no form element to submit) with
     // every control inside a natively disabled fieldset — unfocusable
     // and unfillable even without the stylesheet or inert support.
@@ -2826,20 +3102,20 @@ function ResolvedForm(props) {
         e.preventDefault();
         const formEl = e.currentTarget;
         if (api.isLastPage) {
-          void api.submit().then(() => focusFirstInvalid(formEl)).catch(() => {
+          void api.submit().then(() => focusErrorSummary(formEl)).catch(() => {
           });
         } else {
           api.next();
-          focusFirstInvalid(formEl);
+          focusErrorSummary(formEl);
         }
       },
       children: formBody
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 
 // src/jsx.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import {
   codeFormFromJsx,
   FilloJsxError,
@@ -2853,7 +3129,7 @@ function JsxForm(props) {
   const { id, title, description, settings, theme, client, children, ...rest } = props;
   const compiled = codeFormFromJsx({ id, title, description, settings, theme }, children);
   const json = JSON.stringify(compiled.schema) + JSON.stringify(compiled.theme ?? null);
-  const memo2 = useRef8(null);
+  const memo2 = useRef9(null);
   if (memo2.current && memo2.current.json !== json && isDevEnv()) {
     console.warn(
       `[fillo] "${id}": form structure changed between renders. If you just edited the form, ignore this. Otherwise: conditional questions are visibleIf={when(\u2026)\u2026}, never {cond && <Fillo.\u2026/>} \u2014 a per-visitor schema churns drafts in your workspace.`
@@ -2897,6 +3173,7 @@ var Fillo = {
   Date: B.Date,
   FileUpload: B.FileUpload,
   Hidden: B.Hidden,
+  Calculated: B.Calculated,
   Custom: B.Custom,
   Heading: B.Heading,
   Paragraph: B.Paragraph,
@@ -2942,6 +3219,7 @@ function FilloProvider({
     accepting: syncedAccepting,
     acceptingReason: syncedAcceptingReason,
     uploadsAvailable,
+    uploadFileSizeLimitMb,
     warningCode,
     warningUrl
   } = useCodeFormSync(form, client, onError, {
@@ -2961,7 +3239,8 @@ function FilloProvider({
         setResyncWarning({
           code: result.warningCode,
           url: result.warningUrl,
-          uploadsAvailable: result.uploadsAvailable
+          uploadsAvailable: result.uploadsAvailable,
+          uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
         });
         if (result.status === "draft") {
           throw new FilloError3(
@@ -3037,14 +3316,16 @@ function FilloProvider({
   const freshWarningCode = resyncWarning ? resyncWarning.code : warningCode;
   const freshWarningUrl = resyncWarning ? resyncWarning.url : warningUrl;
   const freshUploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : uploadsAvailable;
+  const freshUploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : uploadFileSizeLimitMb;
   const chromeValue = useMemo6(
     () => ({
       devChrome,
       uploadsAvailable: freshUploadsAvailable,
+      uploadFileSizeLimitMb: freshUploadFileSizeLimitMb,
       warningCode: freshWarningCode,
       warningUrl: freshWarningUrl
     }),
-    [devChrome, freshUploadsAvailable, freshWarningCode, freshWarningUrl]
+    [devChrome, freshUploadsAvailable, freshUploadFileSizeLimitMb, freshWarningCode, freshWarningUrl]
   );
   const resolvedStrings = resolveStrings2(strings);
   const canonicalSyncError = syncError && !options.skipValidation ? syncError : null;