@usefillo/dom 0.12.0 → 0.13.0

package/dist/index.js

@@ -34,11 +34,14 @@ import {
   needsExplicitSubmit,
   radioGroupStep,
   reachablePageSequence,
+  REQUIRED_FIELD_MESSAGE,
+  requiredFieldMessage,
   resolveThemeAppearance,
   shouldAutoSubmit,
   syncCodeForm,
   toE164,
-  visibleFields
+  visibleFields,
+  visibleGroupChildren
 } from "@usefillo/core";
 var FIELD_INPUT_PREFIX = "fillo-";
 var domInstanceCounter = 0;
@@ -46,6 +49,10 @@ var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled])
 function focusableWithin(node) {
   return node.matches(FOCUSABLE_SELECTOR) ? node : node.querySelector(FOCUSABLE_SELECTOR);
 }
+function firstChildControl(card) {
+  const focusable = Array.from(card.querySelectorAll(FOCUSABLE_SELECTOR));
+  return focusable.find((node) => !node.closest(".fillo-group-instance-header")) ?? null;
+}
 function fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -159,7 +166,8 @@ function shell(field, error, child, ids) {
     text: field.label,
     attrs: { id: ids.labelId, for: ids.inputId, "data-fillo": "label" }
   });
-  if (!field.required)
+  const optionalMarker = !field.required && !(field.kind === "repeating_group" && (field.minInstances ?? 1) > 0);
+  if (optionalMarker)
     label.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
   wrap.appendChild(label);
   if (field.description)
@@ -942,7 +950,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-error",
         text: context.error,
-        attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
+        attrs: { id: context.ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
@@ -1306,8 +1314,47 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
-function fileActionBtn(className, label, text, onClick) {
-  const btn = el("button", { className, text, attrs: { type: "button", "aria-label": label } });
+function uploadSvg(paths, size = 22) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "fillo-file-state-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  for (const d of paths) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+function fileStateIcon(state) {
+  const mark = el("span", {
+    className: `fillo-file-state fillo-file-state--${state}`,
+    attrs: { "aria-hidden": "true" }
+  });
+  mark.appendChild(
+    state === "done" ? uploadSvg([
+      "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0",
+      "m8.5 12 2.25 2.25 4.75-5"
+    ]) : state === "failed" ? uploadSvg([
+      "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0",
+      "M12 7.75v5.5",
+      "M12 16.5h.01"
+    ]) : uploadSvg(["M7.25 3.75h6.5l3 3v13.5h-9.5z", "M13.75 3.75v3h3"])
+  );
+  return mark;
+}
+function closeIcon() {
+  const icon = uploadSvg(["m7 7 10 10M17 7 7 17"], 16);
+  icon.setAttribute("class", "fillo-file-action-icon");
+  return icon;
+}
+function fileActionBtn(className, label, content, onClick) {
+  const btn = el("button", { className, attrs: { type: "button", "aria-label": label } });
+  btn.append(content);
   btn.addEventListener("click", onClick);
   return btn;
 }
@@ -1418,35 +1465,39 @@ function fileUpload(context) {
     const list = el("ul", { className: "fillo-files" });
     for (const file of done) {
       const li = el("li", { className: "fillo-file fillo-file--done" });
-      appendChildren(li, [
+      const content = el("span", { className: "fillo-file-content" });
+      appendChildren(content, [
         el("span", { className: "fillo-file-name", text: file.name }),
-        el("span", { className: "fillo-file-meta", text: formatBytes(file.size) }),
-        el("span", { className: "fillo-sr-only", text: "Uploaded" }),
+        el("span", {
+          className: "fillo-file-meta",
+          text: DEFAULT_FIELD_STRINGS.uploadedFile(formatBytes(file.size))
+        })
+      ]);
+      const actions = el("span", { className: "fillo-file-actions" });
+      actions.appendChild(
         fileActionBtn(
           "fillo-file-remove",
-          `Remove ${file.name}`,
-          "\xD7",
+          `${DEFAULT_FIELD_STRINGS.uploadRemove} ${file.name}`,
+          closeIcon(),
           () => context.setValue(done.filter((f) => f.fileId !== file.fileId))
         )
-      ]);
+      );
+      appendChildren(li, [fileStateIcon("done"), content, actions]);
       list.appendChild(li);
     }
     for (const row of rows) {
       const failed = row.error !== void 0;
       const li = el("li", {
-        className: `fillo-file${failed ? " fillo-file--failed" : ""}`,
-        attrs: failed ? {} : {
-          role: "progressbar",
-          "aria-label": `Uploading ${row.name}`,
-          "aria-valuemin": "0",
-          "aria-valuemax": "100",
-          "aria-valuenow": String(Math.round(row.fraction * 100))
-        }
+        className: `fillo-file${failed ? " fillo-file--failed" : ""}`
       });
-      li.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
+      li.appendChild(fileStateIcon(failed ? "failed" : "uploading"));
+      const content = el("span", { className: "fillo-file-content" });
+      content.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
       if (failed) {
         const actions = el("span", { className: "fillo-file-actions" });
-        if (remaining > 0) {
+        content.appendChild(el("span", { className: "fillo-file-error", text: row.error ?? "" }));
+        li.appendChild(content);
+        if (!row.tooLarge && remaining > 0) {
           actions.appendChild(
             fileActionBtn(
               "fillo-file-retry",
@@ -1459,29 +1510,47 @@ function fileUpload(context) {
         actions.appendChild(
           fileActionBtn(
             "fillo-file-remove",
-            "Dismiss",
-            "\xD7",
+            `${DEFAULT_FIELD_STRINGS.uploadDismiss} ${row.name}`,
+            closeIcon(),
             () => internal.uploadAction?.(row.key, "dismiss")
           )
         );
         li.appendChild(actions);
-        li.appendChild(el("span", { className: "fillo-file-error", text: row.error ?? "" }));
       } else {
         const bar = el("span", { className: "fillo-progress-bar" });
         bar.style.width = `${row.fraction * 100}%`;
-        appendChildren(li, [
+        content.appendChild(
           el("span", {
             className: "fillo-file-meta",
-            text: `${Math.round(row.fraction * 100)}% of ${formatBytes(row.size)}`
-          }),
+            text: DEFAULT_FIELD_STRINGS.uploadingFile(
+              Math.round(row.fraction * 100),
+              formatBytes(row.size)
+            )
+          })
+        );
+        const actions = el("span", { className: "fillo-file-actions" });
+        actions.appendChild(
           fileActionBtn(
             "fillo-file-remove",
-            `Cancel ${row.name}`,
-            "\xD7",
+            `${DEFAULT_FIELD_STRINGS.uploadCancel} ${row.name}`,
+            closeIcon(),
             () => internal.uploadAction?.(row.key, "cancel")
-          ),
+          )
+        );
+        appendChildren(li, [
+          content,
+          actions,
           appendChildren(
-            el("span", { className: "fillo-progress", attrs: { "aria-hidden": "true" } }),
+            el("span", {
+              className: "fillo-progress",
+              attrs: {
+                role: "progressbar",
+                "aria-label": `Uploading ${row.name}`,
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+                "aria-valuenow": String(Math.round(row.fraction * 100))
+              }
+            }),
             [bar]
           )
         ]);
@@ -1543,6 +1612,123 @@ function displayOptions(field) {
   const shuffled = order.flatMap((id) => byId.get(id) ?? []);
   return shuffled.length === field.options.length ? shuffled : field.options;
 }
+function groupInstances(context) {
+  const fresh = context.getValue?.() ?? context.value;
+  return Array.isArray(fresh) ? fresh : [];
+}
+function groupRenderedCount(field, stored) {
+  return Math.max(stored.length, field.minInstances ?? 1);
+}
+function groupFloor(field) {
+  return Math.max(field.minInstances ?? 1, 0);
+}
+function materializeGroupInstances(stored, count) {
+  const out = [...stored];
+  while (out.length < count) out.push({});
+  return out;
+}
+function repeatingGroup(context) {
+  const field = context.field;
+  if (field.kind !== "repeating_group") return null;
+  const ictx = context;
+  const announce = ictx.announce;
+  const instanceId = ictx.instanceId ?? "";
+  const item = field.itemLabel || field.label;
+  const stored = groupInstances(context);
+  const count = groupRenderedCount(field, stored);
+  const floor = groupFloor(field);
+  const wrap = el("div", {
+    className: "fillo-group",
+    attrs: { id: context.ids.inputId, "data-fillo": "control" }
+  });
+  applyFieldAria(wrap, field, context.error, context.ids, { requiredSupported: false });
+  for (let index = 0; index < count; index++) {
+    const instanceValues = stored[index] ?? {};
+    const heading = DEFAULT_FIELD_STRINGS.groupInstanceLabel(item, index + 1, count);
+    const card = el("div", {
+      className: "fillo-group-instance",
+      attrs: { role: "group", "aria-label": heading, tabindex: "-1" }
+    });
+    const header = el("div", { className: "fillo-group-instance-header" });
+    const removeBtn = el("button", {
+      className: "fillo-group-remove",
+      text: "\xD7",
+      attrs: {
+        type: "button",
+        "aria-label": DEFAULT_FIELD_STRINGS.groupRemoveLabel(item, index + 1)
+      }
+    });
+    const canRemove = count > floor;
+    removeBtn.toggleAttribute("disabled", !canRemove);
+    if (!canRemove) {
+      removeBtn.setAttribute("aria-disabled", "true");
+      removeBtn.setAttribute("title", `At least ${floor} ${floor === 1 ? "entry" : "entries"} required`);
+    }
+    removeBtn.addEventListener("click", () => {
+      if (count <= floor) return;
+      const next = materializeGroupInstances(groupInstances(context), count);
+      next.splice(index, 1);
+      context.setValue(next);
+      ictx.setGroupFocus?.({ groupId: field.id, cardIndex: index - 1, intoControl: false });
+      announce?.(DEFAULT_FIELD_STRINGS.groupInstanceRemoved(item, next.length));
+    });
+    appendChildren(header, [
+      el("p", { className: "fillo-group-instance-title", text: heading }),
+      removeBtn
+    ]);
+    card.appendChild(header);
+    for (const child of visibleGroupChildren(field, instanceValues)) {
+      const compoundId = `${field.id}.${index}.${child.id}`;
+      const childField = { ...child, id: compoundId };
+      const childIds = fieldIds(instanceId, compoundId);
+      const childSetValue = (value, options) => {
+        const next = materializeGroupInstances(groupInstances(context), count);
+        next[index] = { ...next[index] ?? {}, [child.id]: value };
+        context.setValue(next, options);
+      };
+      const childContext = {
+        field: childField,
+        value: instanceValues[child.id],
+        error: context.api.errors[compoundId],
+        ids: childIds,
+        api: context.api,
+        setValue: childSetValue,
+        getValue: () => groupInstances(context)[index]?.[child.id],
+        announce: ictx.announce,
+        announceAlert: ictx.announceAlert,
+        registerOverlay: ictx.registerOverlay,
+        activeOtherFields: ictx.activeOtherFields
+      };
+      const rendered = ictx.renderChildField?.(childContext) ?? defaultFieldRenderer(childContext);
+      if (rendered) card.appendChild(rendered);
+    }
+    wrap.appendChild(card);
+  }
+  const atMax = count >= field.maxInstances;
+  const addBtn = el("button", {
+    className: "fillo-group-add",
+    text: field.addLabel || DEFAULT_FIELD_STRINGS.groupAdd,
+    attrs: { type: "button" }
+  });
+  addBtn.toggleAttribute("disabled", atMax);
+  if (atMax) {
+    addBtn.setAttribute("aria-disabled", "true");
+    addBtn.setAttribute(
+      "title",
+      `Maximum ${field.maxInstances} ${field.maxInstances === 1 ? "entry" : "entries"}`
+    );
+  }
+  addBtn.addEventListener("click", () => {
+    if (count >= field.maxInstances) return;
+    const next = materializeGroupInstances(groupInstances(context), count);
+    next.push({});
+    context.setValue(next);
+    ictx.setGroupFocus?.({ groupId: field.id, cardIndex: next.length - 1, intoControl: true });
+    announce?.(DEFAULT_FIELD_STRINGS.groupInstanceAdded(item, next.length, next.length));
+  });
+  wrap.appendChild(addBtn);
+  return shell(field, context.error, wrap, context.ids);
+}
 var DEFAULT_COMPONENTS = {
   short_text: (ctx) => textInput("text", ctx),
   email: (ctx) => textInput("email", ctx),
@@ -1561,7 +1747,8 @@ var DEFAULT_COMPONENTS = {
   matrix,
   signature,
   file_upload: fileUpload,
-  calculated
+  calculated,
+  repeating_group: repeatingGroup
 };
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
@@ -1672,7 +1859,9 @@ var DomFormController = class {
   // exceed the limit") — plain text; announce() carries the live semantics.
   uploadNotices = /* @__PURE__ */ new Map();
   // Where to move focus on the next render: "error" after a failed submit/next,
-  // "page" after navigating, null → restore the pre-render active control.
+  // "page" after navigating, a GroupFocusIntent after a repeating-group
+  // Add/Remove (contract decision 9), null → restore the pre-render active
+  // control.
   focusIntent = null;
   // Teardown callbacks for open overlays (phone country popover) whose listeners
   // live on window/document and would otherwise leak past a re-render/unmount.
@@ -2162,7 +2351,8 @@ var DomFormController = class {
           name: row.name,
           size: row.size,
           fraction: row.fraction,
-          error: row.error
+          error: row.error,
+          tooLarge: row.tooLarge
         });
     }
     return rows;
@@ -2179,6 +2369,7 @@ var DomFormController = class {
     } else if (action === "dismiss") {
       this.inFlight.delete(key);
     } else {
+      if (row.tooLarge) return;
       this.inFlight.delete(key);
       void this.startUpload(row.fieldId, row.file, row.maxFiles);
     }
@@ -2242,6 +2433,7 @@ var DomFormController = class {
     const maxFileSizeMb = this.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, this.uploadFileSizeLimitMb) : configuredMaxMb;
     const maxBytes = maxFileSizeMb * 1024 * 1024;
     const selected = withinLimit.filter((file) => file.size <= maxBytes);
+    const oversizedFiles = withinLimit.filter((file) => file.size > maxBytes);
     const dropped = files.length - withinLimit.length;
     const oversized = withinLimit.length - selected.length;
     if (dropped > 0 || oversized > 0) {
@@ -2251,17 +2443,29 @@ var DomFormController = class {
           `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
         );
       }
-      if (oversized > 0) {
-        notices.push(
-          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${maxFileSizeMb} MB limit.`
-        );
-      }
       const text = notices.join(" ");
-      this.uploadNotices.set(field.id, text);
-      this.announce(text);
+      if (text) this.uploadNotices.set(field.id, text);
+      else this.uploadNotices.delete(field.id);
+      if (text) this.announce(text);
     } else {
       this.uploadNotices.delete(field.id);
     }
+    for (const file of oversizedFiles) {
+      const message = DEFAULT_FIELD_STRINGS.fileTooLarge(maxFileSizeMb);
+      const key = `${file.name}-${file.size}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      this.inFlight.set(key, {
+        fieldId: field.id,
+        name: file.name,
+        size: file.size,
+        fraction: 0,
+        error: message,
+        tooLarge: true,
+        file,
+        controller: new AbortController(),
+        maxFiles
+      });
+      this.announceAlert(message);
+    }
     if (selected.length === 0) {
       this.queueRender();
       return;
@@ -2436,11 +2640,6 @@ var DomFormController = class {
   applyFocus(intent, captured) {
     if (typeof document === "undefined") return;
     if (intent === "error") {
-      const summary = this.element.querySelector(".fillo-error-summary");
-      if (summary) {
-        summary.focus();
-        return;
-      }
       const invalid = this.element.querySelector('[aria-invalid="true"]');
       invalid && focusableWithin(invalid)?.focus();
       return;
@@ -2454,8 +2653,32 @@ var DomFormController = class {
       }
       return;
     }
+    if (intent) {
+      this.applyGroupFocus(intent);
+      return;
+    }
     if (captured) this.restoreFocus(captured);
   }
+  /** Focus target after a repeating-group Add/Remove (contract decision 9),
+   *  resolved by POSITION against the tree render() just produced — unlike
+   *  ranking's restoreFocus precedent, the target card either didn't exist
+   *  yet at capture time (Add) or is a different card than whatever was
+   *  clicked (Remove), so a generic FocusDescriptor can't express either.
+   *  Falls back to the Add button, which always exists once a group has
+   *  rendered at all — never strands focus on <body>. */
+  applyGroupFocus(intent) {
+    const groupEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+      (node) => node.getAttribute("data-field") === intent.groupId
+    );
+    const cards = groupEl ? Array.from(groupEl.querySelectorAll(".fillo-group-instance")) : [];
+    const card = intent.cardIndex >= 0 ? cards[intent.cardIndex] : void 0;
+    if (card) {
+      const target = intent.intoControl ? firstChildControl(card) ?? card : card;
+      target.focus();
+      return;
+    }
+    groupEl?.querySelector(".fillo-group-add")?.focus();
+  }
   handleError(error) {
     if (this.destroyed) return;
     this.fatalError = error;
@@ -2770,8 +2993,6 @@ var DomFormController = class {
         })
       );
     }
-    const summary = this.renderErrorSummary(api);
-    if (summary) content.appendChild(summary);
     const blocks = el("div", { className: "fillo-blocks", attrs: { "data-fillo": "blocks" } });
     for (const block of api.blocks) {
       const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
@@ -2879,45 +3100,28 @@ var DomFormController = class {
     }
     return form;
   }
-  /** GOV.UK error summary (audit P2.8): scoped to the CURRENTLY RENDERED
-   *  page — a failed submit already jumps to the first page with a visible
-   *  error, so every link resolves to something in the live tree. Per-field
-   *  messages lose their own role="alert"; this is the one alert. */
-  renderErrorSummary(api) {
-    const fields = api.blocks.filter(isField).filter((field) => api.errors[field.id]);
-    if (fields.length === 0) return null;
-    const box = el("div", {
-      className: "fillo-error-summary",
-      attrs: { role: "alert", tabindex: "-1", "data-fillo": "error-summary" }
-    });
-    box.appendChild(
-      el("p", {
-        className: "fillo-error-summary-title",
-        text: DEFAULT_FIELD_STRINGS.errorSummaryTitle
-      })
-    );
-    const list = el("ul");
-    for (const field of fields) {
-      const link = el("a", {
-        text: `${field.label}: ${api.errors[field.id]}`,
-        attrs: { href: `#${fieldIds(this.instanceId, field.id).inputId}` }
-      });
-      link.addEventListener("click", (event) => {
-        event.preventDefault();
-        const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
-          (node) => node.getAttribute("data-field") === field.id
-        );
-        if (!fieldEl) return;
-        const invalid = fieldEl.querySelector('[aria-invalid="true"]') ?? fieldEl;
-        focusableWithin(invalid)?.focus();
-      });
-      const item = el("li");
-      item.appendChild(link);
-      list.appendChild(item);
-    }
-    box.appendChild(list);
-    return box;
-  }
+  /** The per-kind renderer for a field: host `components`/`customComponents`
+   *  overrides win, else the shipped default. Factored out of renderBlock so
+   *  a repeating group's synthesized child contexts (renderChildField below)
+   *  dispatch through the exact SAME rule instead of a parallel, override-
+   *  blind copy — "the existing per-block path" contract decision 8 asks
+   *  group instances to render through. */
+  fieldRenderer(field) {
+    return field.kind === "custom" ? this.options.customComponents?.[field.component] ?? this.options.components?.custom : this.options.components?.[field.kind] ?? defaultFieldRenderer;
+  }
+  /** Threaded to a repeating group's synthesized child contexts so they
+   *  render through this SAME dispatch instead of the module-level default
+   *  alone (which would silently skip host per-kind overrides). */
+  renderChildField = (context) => {
+    return this.fieldRenderer(context.field)?.(context) ?? null;
+  };
+  /** Threaded to a repeating group's Add/Remove buttons: records where focus
+   *  belongs once the write they just made reaches the deferred
+   *  queueRender() rebuild — applyFocus/applyGroupFocus consume it exactly
+   *  like the "page"/"error" intents set elsewhere in this class. */
+  setGroupFocus = (intent) => {
+    this.focusIntent = intent;
+  };
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
     const setValue = (value, options) => {
@@ -2936,7 +3140,7 @@ var DomFormController = class {
     const context = {
       field: block,
       value: api.data[block.id],
-      error: api.errors[block.id],
+      error: api.errors[block.id] === REQUIRED_FIELD_MESSAGE ? requiredFieldMessage(block, DEFAULT_FIELD_STRINGS) : api.errors[block.id],
       ids: fieldIds(this.instanceId, block.id),
       api,
       setValue,
@@ -2950,10 +3154,12 @@ var DomFormController = class {
       uploadDisabledReason: this.options.renderOnly ? "render_only" : this.storageBlocked() ? "storage_unavailable" : void 0,
       storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null,
       announce: this.announce,
-      announceAlert: this.announceAlert
+      announceAlert: this.announceAlert,
+      instanceId: this.instanceId,
+      renderChildField: this.renderChildField,
+      setGroupFocus: this.setGroupFocus
     };
-    const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
-    return renderer?.(context) ?? null;
+    return this.fieldRenderer(block)?.(context) ?? null;
   }
 };
 function renderContent(block) {