@usefillo/react 0.12.0 → 0.12.1

package/dist/index.js

@@ -15,7 +15,6 @@ import {
   createClient,
   formSchemasEqual,
   isBuildTimeDevEnv as isBuildTimeDevEnv2,
-  isField as isField2,
   isFilloError as isFilloError2,
   isLikelyDevEnv,
   needsExplicitSubmit,
@@ -25,7 +24,7 @@ import {
   reachablePageSequence,
   resolveThemeAppearance
 } from "@usefillo/core";
-import { REQUIRED_FIELD_MESSAGE as REQUIRED_FIELD_MESSAGE2, resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
+import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
 
 // src/appearance.tsx
 import { createContext, useContext } from "react";
@@ -488,6 +487,7 @@ import {
   pipeBlock,
   radioGroupStep,
   REQUIRED_FIELD_MESSAGE,
+  requiredFieldMessage,
   shouldAutoSubmit,
   slotClass as slotClass2,
   visibleFields
@@ -1008,6 +1008,76 @@ function uploadFailureMessage(error, strings) {
   }
   return strings.uploadFailed;
 }
+function FileStateIcon({ state }) {
+  if (state === "done") {
+    return /* @__PURE__ */ jsx4("span", { className: "fillo-file-state fillo-file-state--done", "aria-hidden": "true", children: /* @__PURE__ */ jsxs4(
+      "svg",
+      {
+        className: "fillo-file-state-icon",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx4("path", { d: "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0" }),
+          /* @__PURE__ */ jsx4("path", { d: "m8.5 12 2.25 2.25 4.75-5" })
+        ]
+      }
+    ) });
+  }
+  if (state === "failed") {
+    return /* @__PURE__ */ jsx4("span", { className: "fillo-file-state fillo-file-state--failed", "aria-hidden": "true", children: /* @__PURE__ */ jsxs4(
+      "svg",
+      {
+        className: "fillo-file-state-icon",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx4("path", { d: "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0" }),
+          /* @__PURE__ */ jsx4("path", { d: "M12 7.75v5.5" }),
+          /* @__PURE__ */ jsx4("path", { d: "M12 16.5h.01" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx4("span", { className: "fillo-file-state fillo-file-state--uploading", "aria-hidden": "true", children: /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: "fillo-file-state-icon",
+      viewBox: "0 0 24 24",
+      width: "22",
+      height: "22",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx4("path", { d: "M7.25 3.75h6.5l3 3v13.5h-9.5z" }),
+        /* @__PURE__ */ jsx4("path", { d: "M13.75 3.75v3h3" })
+      ]
+    }
+  ) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      className: "fillo-file-action-icon",
+      viewBox: "0 0 24 24",
+      width: "16",
+      height: "16",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx4("path", { d: "m7 7 10 10M17 7 7 17" })
+    }
+  );
+}
 function FileUploadField({
   field,
   value,
@@ -1197,90 +1267,91 @@ function FileUploadField({
         ),
         (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
           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(
+            /* @__PURE__ */ jsx4(FileStateIcon, { state: "done" }),
+            /* @__PURE__ */ jsxs4("span", { className: "fillo-file-content", children: [
+              /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
+              /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: strings.uploadedFile(formatBytes(f.size)) })
+            ] }),
+            /* @__PURE__ */ jsx4("span", { className: "fillo-file-actions", children: /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
                 className: "fillo-file-remove",
-                "aria-label": `Remove ${f.name}`,
+                "aria-label": `${strings.uploadRemove} ${f.name}`,
                 onClick: () => removeFile(f.fileId),
-                children: "\xD7"
+                children: /* @__PURE__ */ jsx4(CloseIcon, {})
               }
-            )
+            ) })
           ] }, f.fileId)),
-          inFlight.map((f) => /* @__PURE__ */ jsxs4(
-            "li",
-            {
-              className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
-              ...f.error ? {} : {
-                role: "progressbar",
-                "aria-label": `Uploading ${f.name}`,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                "aria-valuenow": Math.round(f.fraction * 100)
-              },
-              children: [
+          inFlight.map((f) => /* @__PURE__ */ jsxs4("li", { className: `fillo-file${f.error ? " fillo-file--failed" : ""}`, children: [
+            /* @__PURE__ */ jsx4(FileStateIcon, { state: f.error ? "failed" : "uploading" }),
+            f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-content", children: [
                 /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-                f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  /* @__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),
-                    "% of ",
-                    formatBytes(f.size)
-                  ] }),
-                  /* @__PURE__ */ jsx4(
-                    "button",
-                    {
-                      type: "button",
-                      className: "fillo-file-remove",
-                      "aria-label": `Cancel ${f.name}`,
-                      onClick: () => cancelUpload(f.key),
-                      children: "\xD7"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
+              ] }),
+              /* @__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": `${strings.uploadDismiss} ${f.name}`,
+                    onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                    children: /* @__PURE__ */ jsx4(CloseIcon, {})
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-content", children: [
+                /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
+                /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: strings.uploadingFile(Math.round(f.fraction * 100), formatBytes(f.size)) })
+              ] }),
+              /* @__PURE__ */ jsx4("span", { className: "fillo-file-actions", children: /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": `${strings.uploadCancel} ${f.name}`,
+                  onClick: () => cancelUpload(f.key),
+                  children: /* @__PURE__ */ jsx4(CloseIcon, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: "fillo-progress",
+                  role: "progressbar",
+                  "aria-label": `Uploading ${f.name}`,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": Math.round(f.fraction * 100),
+                  children: /* @__PURE__ */ jsx4(
                     "span",
                     {
                       className: "fillo-progress-bar",
                       style: { width: `${f.fraction * 100}%` }
                     }
-                  ) })
-                ] })
-              ]
-            },
-            f.key
-          ))
+                  )
+                }
+              )
+            ] })
+          ] }, f.key))
         ] }),
         error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
       ]
@@ -2214,7 +2285,7 @@ function BlockRendererInner({ block, api, components, customComponents }) {
     Component = components?.[block.kind] ?? DEFAULT_COMPONENTS[block.kind];
   }
   const rawError = api.errors[block.id];
-  const error = rawError === REQUIRED_FIELD_MESSAGE ? strings.required : rawError;
+  const error = rawError === REQUIRED_FIELD_MESSAGE ? requiredFieldMessage(block, strings) : rawError;
   return /* @__PURE__ */ jsx5(
     Component,
     {
@@ -2414,16 +2485,13 @@ function nextFrame(run) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
-function focusErrorSummary(formEl) {
+function focusFirstInvalid(formEl) {
   if (!formEl || typeof window === "undefined") return;
   nextFrame(() => {
-    formEl.querySelector(".fillo-error-summary")?.focus();
+    const invalid = formEl.querySelector('[aria-invalid="true"]');
+    resolveFocusable(invalid)?.focus();
   });
 }
-function focusField(inputId) {
-  if (typeof document === "undefined") return;
-  resolveFocusable(document.getElementById(inputId))?.focus();
-}
 var HP_STYLE = {
   position: "absolute",
   left: "-9999px",
@@ -2986,17 +3054,6 @@ 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
@@ -3101,24 +3158,6 @@ function ResolvedForm(props) {
         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",
       {
@@ -3246,11 +3285,11 @@ function ResolvedForm(props) {
         e.preventDefault();
         const formEl = e.currentTarget;
         if (api.isLastPage) {
-          void api.submit().then(() => focusErrorSummary(formEl)).catch(() => {
+          void api.submit().then(() => focusFirstInvalid(formEl)).catch(() => {
           });
         } else {
           api.next();
-          focusErrorSummary(formEl);
+          focusFirstInvalid(formEl);
         }
       },
       children: formBody

package/dist/styles.css

@@ -84,11 +84,12 @@
   /* ---------- Field chrome ---------- */
   .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
   .fillo-label { font-weight: 550; font-size: 0.95rem; }
+  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
   /* Fillo marks the few optional fields rather than starring the many required
      ones — so a clean label reads as required by default. */
   .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
   .fillo-description { color: var(--fillo-muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
-  .fillo-error { color: var(--fillo-error); font-size: 0.85rem; margin: 0; }
+  .fillo-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; line-height: 1.4; margin: 0; }
   .fillo-submit-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; margin: 0; }
 
   /* ---------- Inputs ---------- */
@@ -111,6 +112,11 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
   :where(.fillo-field--error) .fillo-input { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-input:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-textarea { resize: vertical; min-height: 6rem; }
 
   /* Number field adornments: the wrapper draws the field's box (border/
@@ -134,6 +140,11 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
   :where(.fillo-field--error) .fillo-number { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-number:focus-within {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   :where(.fillo-number) .fillo-input {
     flex: 1 1 auto;
     min-width: 0;
@@ -143,6 +154,7 @@
     padding: 0;
   }
   :where(.fillo-number) .fillo-input:focus-visible { box-shadow: none; }
+  :where(.fillo-field--error) :where(.fillo-number) .fillo-input:focus-visible { outline: none; }
   .fillo-number-prefix, .fillo-number-suffix { flex: 0 0 auto; color: var(--fillo-muted); }
 
   /* Phone field: country picker + national input */
@@ -242,6 +254,15 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 14%, transparent);
   }
+  :where(.fillo-field--error) .fillo-option {
+    border-color: var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 2%, var(--fillo-control-bg));
+  }
+  :where(.fillo-field--error) .fillo-option:focus-within {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-option--selected {
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 6%, var(--fillo-control-bg));
@@ -357,6 +378,13 @@
       inset 0 0 0 1px var(--fillo-primary),
       0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-toggle { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) :where(.fillo-toggle-input:focus-visible) + .fillo-toggle-track {
+    box-shadow:
+      inset 0 0 0 1px var(--fillo-error),
+      0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-toggle:where(:has(.fillo-toggle-input:checked)) {
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 5%, var(--fillo-control-bg));
@@ -416,6 +444,11 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-scale-step:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-scale-step--active {
     background: var(--fillo-primary);
     border-color: var(--fillo-primary);
@@ -480,6 +513,12 @@
   .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
   .fillo-matrix tbody th { text-align: start; font-weight: 500; }
   .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
+  .fillo-matrix-cell:focus-within {
+    border-radius: var(--fillo-radius);
+    outline: 2px solid var(--fillo-primary);
+    outline-offset: 2px;
+  }
+  :where(.fillo-field--error) .fillo-matrix-cell:focus-within { outline-color: var(--fillo-error); }
 
   /* ---------- Calculated ---------- */
   /* A quiet computed-value line, not a control: no border or input chrome —
@@ -571,6 +610,15 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-dropzone {
+    border-color: var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 2%, var(--fillo-control-bg));
+  }
+  :where(.fillo-field--error) .fillo-dropzone:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
   .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
   .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
@@ -578,20 +626,50 @@
   .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
   .fillo-file {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 0.45rem 0.65rem;
+    gap: 0.45rem 0.625rem;
     border: 1px solid var(--fillo-border);
     border-radius: var(--fillo-radius);
     padding: 0.625rem 0.75rem;
     font-size: 0.88rem;
     background: var(--fillo-control-bg);
+    box-sizing: border-box;
+    min-width: 0;
   }
   .fillo-file--failed {
-    grid-template-columns: minmax(0, 1fr) auto;
-    border-color: var(--fillo-error);
+    border-color: color-mix(in srgb, var(--fillo-error) 32%, var(--fillo-border));
+    border-inline-start: 3px solid var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 4%, var(--fillo-control-bg));
+  }
+  .fillo-file-state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--fillo-muted);
+  }
+  .fillo-file-state--done { color: var(--fillo-primary); }
+  .fillo-file-state--failed { color: var(--fillo-error); }
+  .fillo-file-state-icon {
+    display: block;
+    width: 1.35rem;
+    height: 1.35rem;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .fillo-file-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+    text-align: start;
   }
   .fillo-file-name {
+    display: block;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -609,14 +687,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 0.15rem;
+    gap: 0.25rem;
     white-space: nowrap;
   }
   .fillo-file-error {
-    grid-column: 1 / -1;
     color: var(--fillo-error);
     font-size: 0.82rem;
     line-height: 1.35;
+    overflow-wrap: anywhere;
   }
   .fillo-file-remove {
     appearance: none;
@@ -627,11 +705,18 @@
     border: none;
     cursor: pointer;
     color: var(--fillo-muted);
-    font-size: 1.1rem;
     line-height: 1;
     padding: 0;
   }
-  .fillo-file-remove:hover { color: var(--fillo-error); }
+  .fillo-file-action-icon {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+  }
+  .fillo-file-remove:hover { color: var(--fillo-text); }
   .fillo-file-retry {
     appearance: none;
     display: inline-flex;
@@ -643,11 +728,11 @@
     color: var(--fillo-primary);
     font: inherit;
     font-weight: 550;
-    padding: 0 0.3rem;
+    padding: 0 0.5rem;
   }
   .fillo-file-retry:hover { text-decoration: underline; }
   .fillo-progress {
-    grid-column: 1 / -1;
+    grid-column: 2 / -1;
     height: 4px;
     border-radius: 999px;
     background: var(--fillo-border);
@@ -913,18 +998,6 @@
     line-height: 1.45;
   }
 
-  /* Error summary (GOV.UK pattern): ONE alert on failed submit; links focus
-     their fields. Per-field messages are plain describedby text. */
-  .fillo-error-summary {
-    border: 2px solid var(--fillo-error);
-    border-radius: var(--fillo-radius);
-    padding: 0.8rem 1rem;
-  }
-  .fillo-error-summary-title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; }
-  .fillo-error-summary ul { margin: 0; padding-inline-start: 1.1rem; }
-  .fillo-error-summary li { margin: 0.2rem 0; }
-  .fillo-error-summary a { color: var(--fillo-error); }
-
   /* ---------- Accessibility: focus rings, pointer targets, forced-colors
      (input-quality audit P1.1-P1.3) ---------- */
   /* Focus visibility: controls without a compensating border swap get a
@@ -941,11 +1014,10 @@
     outline-offset: 2px;
     box-shadow: none;
   }
+  :where(.fillo-field--error) .fillo-star:focus-visible { outline-color: var(--fillo-error); }
 
   /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
   .fillo-ranking-move,
-  .fillo-file-remove,
-  .fillo-file-retry,
   .fillo-signature-clear {
     min-width: 1.5rem;
     min-height: 1.5rem;
@@ -953,6 +1025,12 @@
     align-items: center;
     justify-content: center;
   }
+  /* Upload row actions use a calmer, easier 32px target. */
+  .fillo-file-remove,
+  .fillo-file-retry {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
   .fillo-star { min-width: 1.75rem; min-height: 1.75rem; }
   .fillo-matrix-cell {
     display: flex;
@@ -974,6 +1052,7 @@
   /* Matrix on narrow viewports: stacked rows, never a horizontal scroll
      trap. Column names come from data-label (set by both renderers). */
   @media (max-width: 30rem) {
+    .fillo-file { gap: 0.4rem 0.5rem; padding: 0.55rem 0.625rem; }
     .fillo-matrix thead { position: absolute; width: 1px; height: 1px;
       overflow: hidden; clip-path: inset(50%); }
     .fillo-matrix, .fillo-matrix tbody, .fillo-matrix tr,
@@ -991,6 +1070,12 @@
 
   /* Forced-colors: restore what author colors can't carry. */
   @media (forced-colors: active) {
+    .fillo-file--failed {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+      background: Canvas;
+    }
+    .fillo-file-state--failed { color: Highlight; }
     .fillo-star--active,
     .fillo-scale-step--active,
     :where(.fillo-option--selected) {
@@ -1001,7 +1086,11 @@
     .fillo-number:focus-within,
     .fillo-phone-flag:focus-visible,
     .fillo-phone-search:focus-visible,
+    .fillo-option:focus-within,
+    :where(.fillo-toggle-input:focus-visible) + .fillo-toggle-track,
+    .fillo-star:focus-visible,
     .fillo-scale-step:focus-visible,
+    .fillo-matrix-cell:focus-within,
     .fillo-dropzone:focus-visible,
     .fillo-select:focus-visible {
       outline: 2px solid Highlight;

package/dist/styles.unlayered.css

@@ -84,11 +84,12 @@
   /* ---------- Field chrome ---------- */
   .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
   .fillo-label { font-weight: 550; font-size: 0.95rem; }
+  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
   /* Fillo marks the few optional fields rather than starring the many required
      ones — so a clean label reads as required by default. */
   .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
   .fillo-description { color: var(--fillo-muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
-  .fillo-error { color: var(--fillo-error); font-size: 0.85rem; margin: 0; }
+  .fillo-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; line-height: 1.4; margin: 0; }
   .fillo-submit-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; margin: 0; }
 
   /* ---------- Inputs ---------- */
@@ -111,6 +112,11 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
   :where(.fillo-field--error) .fillo-input { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-input:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-textarea { resize: vertical; min-height: 6rem; }
 
   /* Number field adornments: the wrapper draws the field's box (border/
@@ -134,6 +140,11 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
   :where(.fillo-field--error) .fillo-number { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-number:focus-within {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   :where(.fillo-number) .fillo-input {
     flex: 1 1 auto;
     min-width: 0;
@@ -143,6 +154,7 @@
     padding: 0;
   }
   :where(.fillo-number) .fillo-input:focus-visible { box-shadow: none; }
+  :where(.fillo-field--error) :where(.fillo-number) .fillo-input:focus-visible { outline: none; }
   .fillo-number-prefix, .fillo-number-suffix { flex: 0 0 auto; color: var(--fillo-muted); }
 
   /* Phone field: country picker + national input */
@@ -242,6 +254,15 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 14%, transparent);
   }
+  :where(.fillo-field--error) .fillo-option {
+    border-color: var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 2%, var(--fillo-control-bg));
+  }
+  :where(.fillo-field--error) .fillo-option:focus-within {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-option--selected {
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 6%, var(--fillo-control-bg));
@@ -357,6 +378,13 @@
       inset 0 0 0 1px var(--fillo-primary),
       0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-toggle { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) :where(.fillo-toggle-input:focus-visible) + .fillo-toggle-track {
+    box-shadow:
+      inset 0 0 0 1px var(--fillo-error),
+      0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-toggle:where(:has(.fillo-toggle-input:checked)) {
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 5%, var(--fillo-control-bg));
@@ -416,6 +444,11 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-scale-step:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-scale-step--active {
     background: var(--fillo-primary);
     border-color: var(--fillo-primary);
@@ -480,6 +513,12 @@
   .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
   .fillo-matrix tbody th { text-align: start; font-weight: 500; }
   .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
+  .fillo-matrix-cell:focus-within {
+    border-radius: var(--fillo-radius);
+    outline: 2px solid var(--fillo-primary);
+    outline-offset: 2px;
+  }
+  :where(.fillo-field--error) .fillo-matrix-cell:focus-within { outline-color: var(--fillo-error); }
 
   /* ---------- Calculated ---------- */
   /* A quiet computed-value line, not a control: no border or input chrome —
@@ -571,6 +610,15 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+  :where(.fillo-field--error) .fillo-dropzone {
+    border-color: var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 2%, var(--fillo-control-bg));
+  }
+  :where(.fillo-field--error) .fillo-dropzone:focus-visible {
+    border-color: var(--fillo-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-error) 20%, transparent);
+    outline: none;
+  }
   .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
   .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
   .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
@@ -578,20 +626,50 @@
   .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
   .fillo-file {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 0.45rem 0.65rem;
+    gap: 0.45rem 0.625rem;
     border: 1px solid var(--fillo-border);
     border-radius: var(--fillo-radius);
     padding: 0.625rem 0.75rem;
     font-size: 0.88rem;
     background: var(--fillo-control-bg);
+    box-sizing: border-box;
+    min-width: 0;
   }
   .fillo-file--failed {
-    grid-template-columns: minmax(0, 1fr) auto;
-    border-color: var(--fillo-error);
+    border-color: color-mix(in srgb, var(--fillo-error) 32%, var(--fillo-border));
+    border-inline-start: 3px solid var(--fillo-error);
+    background: color-mix(in srgb, var(--fillo-error) 4%, var(--fillo-control-bg));
+  }
+  .fillo-file-state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--fillo-muted);
+  }
+  .fillo-file-state--done { color: var(--fillo-primary); }
+  .fillo-file-state--failed { color: var(--fillo-error); }
+  .fillo-file-state-icon {
+    display: block;
+    width: 1.35rem;
+    height: 1.35rem;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .fillo-file-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+    text-align: start;
   }
   .fillo-file-name {
+    display: block;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -609,14 +687,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 0.15rem;
+    gap: 0.25rem;
     white-space: nowrap;
   }
   .fillo-file-error {
-    grid-column: 1 / -1;
     color: var(--fillo-error);
     font-size: 0.82rem;
     line-height: 1.35;
+    overflow-wrap: anywhere;
   }
   .fillo-file-remove {
     appearance: none;
@@ -627,11 +705,18 @@
     border: none;
     cursor: pointer;
     color: var(--fillo-muted);
-    font-size: 1.1rem;
     line-height: 1;
     padding: 0;
   }
-  .fillo-file-remove:hover { color: var(--fillo-error); }
+  .fillo-file-action-icon {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+  }
+  .fillo-file-remove:hover { color: var(--fillo-text); }
   .fillo-file-retry {
     appearance: none;
     display: inline-flex;
@@ -643,11 +728,11 @@
     color: var(--fillo-primary);
     font: inherit;
     font-weight: 550;
-    padding: 0 0.3rem;
+    padding: 0 0.5rem;
   }
   .fillo-file-retry:hover { text-decoration: underline; }
   .fillo-progress {
-    grid-column: 1 / -1;
+    grid-column: 2 / -1;
     height: 4px;
     border-radius: 999px;
     background: var(--fillo-border);
@@ -913,18 +998,6 @@
     line-height: 1.45;
   }
 
-  /* Error summary (GOV.UK pattern): ONE alert on failed submit; links focus
-     their fields. Per-field messages are plain describedby text. */
-  .fillo-error-summary {
-    border: 2px solid var(--fillo-error);
-    border-radius: var(--fillo-radius);
-    padding: 0.8rem 1rem;
-  }
-  .fillo-error-summary-title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; }
-  .fillo-error-summary ul { margin: 0; padding-inline-start: 1.1rem; }
-  .fillo-error-summary li { margin: 0.2rem 0; }
-  .fillo-error-summary a { color: var(--fillo-error); }
-
   /* ---------- Accessibility: focus rings, pointer targets, forced-colors
      (input-quality audit P1.1-P1.3) ---------- */
   /* Focus visibility: controls without a compensating border swap get a
@@ -941,11 +1014,10 @@
     outline-offset: 2px;
     box-shadow: none;
   }
+  :where(.fillo-field--error) .fillo-star:focus-visible { outline-color: var(--fillo-error); }
 
   /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
   .fillo-ranking-move,
-  .fillo-file-remove,
-  .fillo-file-retry,
   .fillo-signature-clear {
     min-width: 1.5rem;
     min-height: 1.5rem;
@@ -953,6 +1025,12 @@
     align-items: center;
     justify-content: center;
   }
+  /* Upload row actions use a calmer, easier 32px target. */
+  .fillo-file-remove,
+  .fillo-file-retry {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
   .fillo-star { min-width: 1.75rem; min-height: 1.75rem; }
   .fillo-matrix-cell {
     display: flex;
@@ -974,6 +1052,7 @@
   /* Matrix on narrow viewports: stacked rows, never a horizontal scroll
      trap. Column names come from data-label (set by both renderers). */
   @media (max-width: 30rem) {
+    .fillo-file { gap: 0.4rem 0.5rem; padding: 0.55rem 0.625rem; }
     .fillo-matrix thead { position: absolute; width: 1px; height: 1px;
       overflow: hidden; clip-path: inset(50%); }
     .fillo-matrix, .fillo-matrix tbody, .fillo-matrix tr,
@@ -991,6 +1070,12 @@
 
   /* Forced-colors: restore what author colors can't carry. */
   @media (forced-colors: active) {
+    .fillo-file--failed {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+      background: Canvas;
+    }
+    .fillo-file-state--failed { color: Highlight; }
     .fillo-star--active,
     .fillo-scale-step--active,
     :where(.fillo-option--selected) {
@@ -1001,7 +1086,11 @@
     .fillo-number:focus-within,
     .fillo-phone-flag:focus-visible,
     .fillo-phone-search:focus-visible,
+    .fillo-option:focus-within,
+    :where(.fillo-toggle-input:focus-visible) + .fillo-toggle-track,
+    .fillo-star:focus-visible,
     .fillo-scale-step:focus-visible,
+    .fillo-matrix-cell:focus-within,
     .fillo-dropzone:focus-visible,
     .fillo-select:focus-visible {
       outline: 2px solid Highlight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.12.0"
+    "@usefillo/core": "^0.12.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",