@usefillo/dom 0.3.2 → 0.5.0

package/dist/index.js

@@ -2,16 +2,37 @@
 import {
   FilloClient,
   FilloError,
+  PHONE_COUNTRIES,
+  countryByIso,
   createClient,
   createFormController as coreCreateFormController,
   defineForm,
+  digitsOnly,
+  flagEmoji,
+  formatNational,
   isCodeForm,
   isField,
+  normalizeFormSchema,
+  normalizeFormTheme,
+  parsePhone,
   pipeBlock,
   provisionWorkspace,
-  syncCodeForm
+  syncCodeForm,
+  toE164,
+  validateResponse
 } from "@usefillo/core";
 var FIELD_INPUT_PREFIX = "fillo-";
+var domInstanceCounter = 0;
+function fieldIds(instanceId, fieldId) {
+  const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
+  return {
+    inputId: base,
+    labelId: `${base}-label`,
+    descriptionId: `${base}-desc`,
+    errorId: `${base}-error`,
+    name: base
+  };
+}
 function el(tag, options = {}) {
   const node = document.createElement(tag);
   if (options.className) node.className = options.className;
@@ -20,12 +41,32 @@ function el(tag, options = {}) {
   return node;
 }
 function themeStyle(node, theme) {
-  if (!theme) return;
-  if (theme.primary) node.style.setProperty("--fillo-primary", theme.primary);
-  if (theme.background) node.style.setProperty("--fillo-bg", theme.background);
-  if (theme.text) node.style.setProperty("--fillo-text", theme.text);
-  if (theme.radius) node.style.setProperty("--fillo-radius", theme.radius);
-  if (theme.fontFamily) node.style.setProperty("--fillo-font", theme.fontFamily);
+  const safeTheme = normalizeFormTheme(theme);
+  if (!safeTheme) return;
+  if (safeTheme.colorScheme) node.setAttribute("data-fillo-color-scheme", safeTheme.colorScheme);
+  if (safeTheme.primary) node.style.setProperty("--fillo-primary", safeTheme.primary);
+  if (safeTheme.background) node.style.setProperty("--fillo-bg", safeTheme.background);
+  if (safeTheme.text) node.style.setProperty("--fillo-text", safeTheme.text);
+  if (safeTheme.radius) node.style.setProperty("--fillo-radius", safeTheme.radius);
+  if (safeTheme.fontFamily) node.style.setProperty("--fillo-font", safeTheme.fontFamily);
+  if (safeTheme.primary || safeTheme.background || safeTheme.text) {
+    node.setAttribute("data-fillo-has-color-theme", "");
+  }
+}
+function safeHttpUrl(href) {
+  try {
+    if (!href) return null;
+    const url = new URL(href);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+function badgeUrl(href) {
+  const url = new URL(safeHttpUrl(href) ?? "https://fillo.so");
+  url.searchParams.set("utm_source", "form_badge");
+  return url.toString();
 }
 function inputValue(value) {
   return typeof value === "string" || typeof value === "number" ? String(value) : "";
@@ -36,16 +77,37 @@ function appendChildren(parent, children) {
   }
   return parent;
 }
-function applyFieldAria(node, field, error) {
+var SVG_NS = "http://www.w3.org/2000/svg";
+var OPTION_ICON_PATHS = {
+  thumbs_up: "M7 10v10M7 10l4.8-6.1a2 2 0 0 1 3.5 1.7L14.6 10h4.8a2.1 2.1 0 0 1 2 2.5l-1.1 5.4A3 3 0 0 1 17.4 20H7M3 10h4v10H3z",
+  thumbs_down: "M7 14V4M7 14l4.8 6.1a2 2 0 0 0 3.5-1.7L14.6 14h4.8a2.1 2.1 0 0 0 2-2.5l-1.1-5.4A3 3 0 0 0 17.4 4H7M3 4h4v10H3z"
+};
+function optionIcon(icon) {
+  if (!icon) return null;
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "fillo-option-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.8");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", OPTION_ICON_PATHS[icon]);
+  svg.appendChild(path);
+  return svg;
+}
+function applyFieldAria(node, field, error, ids) {
   if (error) node.setAttribute("aria-invalid", "true");
   if (field.required) node.setAttribute("aria-required", "true");
   const describedBy = [
-    field.description ? `${FIELD_INPUT_PREFIX}${field.id}-desc` : null,
-    error ? `${FIELD_INPUT_PREFIX}${field.id}-error` : null
+    field.description ? ids.descriptionId : null,
+    error ? ids.errorId : null
   ].filter(Boolean).join(" ");
   if (describedBy) node.setAttribute("aria-describedby", describedBy);
 }
-function shell(field, error, child) {
+function shell(field, error, child, ids) {
   const wrap = el("div", {
     className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
     attrs: { "data-field": field.id }
@@ -53,7 +115,7 @@ function shell(field, error, child) {
   const label = el("label", {
     className: "fillo-label",
     text: field.label,
-    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}-label`, for: `${FIELD_INPUT_PREFIX}${field.id}` }
+    attrs: { id: ids.labelId, for: ids.inputId }
   });
   if (!field.required)
     label.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
@@ -63,7 +125,7 @@ function shell(field, error, child) {
       el("p", {
         className: "fillo-description",
         text: field.description,
-        attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}-desc` }
+        attrs: { id: ids.descriptionId }
       })
     );
   wrap.appendChild(child);
@@ -72,7 +134,7 @@ function shell(field, error, child) {
       el("p", {
         className: "fillo-error",
         text: error,
-        attrs: { role: "alert", id: `${FIELD_INPUT_PREFIX}${field.id}-error` }
+        attrs: { role: "alert", id: ids.errorId }
       })
     );
   return wrap;
@@ -80,66 +142,284 @@ function shell(field, error, child) {
 function textInput(type, context) {
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, type }
+    attrs: { id: context.ids.inputId, type }
   });
   input.value = inputValue(context.value);
   if (context.field.placeholder) input.placeholder = context.field.placeholder;
   input.addEventListener("input", () => context.setValue(input.value, { render: false }));
   input.addEventListener("change", () => context.setValue(input.value));
-  applyFieldAria(input, context.field, context.error);
-  return shell(context.field, context.error, input);
+  applyFieldAria(input, context.field, context.error, context.ids);
+  return shell(context.field, context.error, input, context.ids);
+}
+function domLocaleCountry() {
+  if (typeof navigator === "undefined") return void 0;
+  const tag = navigator.languages?.[0] || navigator.language || "";
+  const region = tag.split("-")[1];
+  return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
+}
+function setCaretAfterDigits(input, target) {
+  if (target <= 0) return input.setSelectionRange(0, 0);
+  const s = input.value;
+  let seen = 0;
+  let pos = s.length;
+  for (let i = 0; i < s.length; i++) {
+    if (/\d/.test(s[i]) && ++seen === target) {
+      pos = i + 1;
+      break;
+    }
+  }
+  input.setSelectionRange(pos, pos);
+}
+function phoneInput(context) {
+  const schema = context.field;
+  let country = parsePhone(inputValue(context.value)).country ?? countryByIso(schema.defaultCountry) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
+  const wrap = el("div", { className: "fillo-phone" });
+  const countryWrap = el("div", { className: "fillo-phone-country" });
+  const flagBtn = el("button", {
+    className: "fillo-phone-flag",
+    attrs: { type: "button", "aria-haspopup": "listbox", "aria-expanded": "false" }
+  });
+  const flagSpan = el("span", { className: "fillo-phone-flag-emoji", attrs: { "aria-hidden": "true" } });
+  const dialSpan = el("span", { className: "fillo-phone-dial" });
+  appendChildren(flagBtn, [
+    flagSpan,
+    dialSpan,
+    el("span", { className: "fillo-phone-caret", text: "\u25BE", attrs: { "aria-hidden": "true" } })
+  ]);
+  appendChildren(countryWrap, [flagBtn]);
+  const input = el("input", {
+    className: "fillo-input fillo-phone-input",
+    attrs: { id: context.ids.inputId, type: "tel", inputmode: "tel", autocomplete: "tel-national" }
+  });
+  applyFieldAria(input, context.field, context.error, context.ids);
+  const nationalFromValue = () => {
+    const digits = digitsOnly(inputValue(context.value));
+    return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
+  };
+  const syncFlag = () => {
+    flagSpan.textContent = flagEmoji(country.iso2);
+    dialSpan.textContent = `+${country.dialCode}`;
+    flagBtn.setAttribute("aria-label", `Country: ${country.name} (+${country.dialCode})`);
+  };
+  const syncInput = () => {
+    input.value = formatNational(country, nationalFromValue());
+    input.placeholder = formatNational(country, country.example);
+  };
+  const commit = (nat) => context.setValue(nat ? toE164(country, nat) : "", { render: false });
+  syncFlag();
+  syncInput();
+  input.addEventListener("input", () => {
+    const raw = input.value;
+    const caret = input.selectionStart ?? raw.length;
+    const before = digitsOnly(raw.slice(0, caret)).length;
+    if (raw.trimStart().startsWith("+")) {
+      const p = parsePhone(raw);
+      if (p.country) {
+        country = p.country;
+        syncFlag();
+      }
+      commit(p.country ? p.national : digitsOnly(raw));
+    } else {
+      commit(digitsOnly(raw));
+    }
+    input.value = formatNational(country, nationalFromValue());
+    setCaretAfterDigits(input, before);
+  });
+  let popover = null;
+  let active = 0;
+  let matches = PHONE_COUNTRIES;
+  const listId = `${context.ids.inputId}-countries`;
+  const closePopover = () => {
+    popover?.remove();
+    popover = null;
+    flagBtn.setAttribute("aria-expanded", "false");
+    document.removeEventListener("mousedown", onOutside);
+  };
+  const onOutside = (e) => {
+    if (!countryWrap.contains(e.target)) closePopover();
+  };
+  const pick = (c) => {
+    if (!c) return;
+    country = c;
+    syncFlag();
+    commit(nationalFromValue());
+    syncInput();
+    closePopover();
+    input.focus();
+  };
+  const openPopover = () => {
+    const pop = el("div", { className: "fillo-phone-popover" });
+    const search = el("input", {
+      className: "fillo-phone-search",
+      attrs: {
+        type: "text",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        placeholder: "Search country or code"
+      }
+    });
+    const list = el("ul", {
+      className: "fillo-phone-list",
+      attrs: { role: "listbox", id: listId, "aria-label": "Country" }
+    });
+    const renderList = () => {
+      list.replaceChildren();
+      if (matches.length === 0) {
+        list.appendChild(el("li", { className: "fillo-phone-empty", text: "No matches" }));
+        return;
+      }
+      matches.forEach((c, i) => {
+        const li = el("li", {
+          className: `fillo-phone-option${i === active ? " fillo-phone-option--active" : ""}`,
+          attrs: { id: `${listId}-opt-${i}`, role: "option", "aria-selected": String(c.iso2 === country.iso2) }
+        });
+        appendChildren(li, [
+          el("span", { className: "fillo-phone-flag-emoji", text: flagEmoji(c.iso2), attrs: { "aria-hidden": "true" } }),
+          el("span", { className: "fillo-phone-option-name", text: c.name }),
+          el("span", { className: "fillo-phone-option-dial", text: `+${c.dialCode}` })
+        ]);
+        li.addEventListener("mouseenter", () => {
+          active = i;
+          search.setAttribute("aria-activedescendant", li.id);
+          syncActive();
+        });
+        li.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          pick(c);
+        });
+        list.appendChild(li);
+      });
+      search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
+    };
+    const syncActive = () => {
+      [...list.children].forEach(
+        (li, i) => li.classList.toggle("fillo-phone-option--active", i === active)
+      );
+      document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
+    };
+    const filter = (q) => {
+      const query = q.trim().toLowerCase();
+      const qDigits = query.replace(/[^\d]/g, "");
+      matches = !query ? PHONE_COUNTRIES : PHONE_COUNTRIES.filter(
+        (c) => c.name.toLowerCase().includes(query) || c.iso2.toLowerCase() === query || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
+      );
+      active = 0;
+      renderList();
+    };
+    search.addEventListener("input", () => filter(search.value));
+    search.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        active = Math.min(active + 1, matches.length - 1);
+        syncActive();
+        search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        active = Math.max(active - 1, 0);
+        syncActive();
+        search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        pick(matches[active]);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        closePopover();
+        flagBtn.focus();
+      }
+    });
+    appendChildren(pop, [search, list]);
+    popover = pop;
+    countryWrap.appendChild(pop);
+    flagBtn.setAttribute("aria-expanded", "true");
+    matches = PHONE_COUNTRIES;
+    active = Math.max(0, PHONE_COUNTRIES.indexOf(country));
+    renderList();
+    syncActive();
+    document.addEventListener("mousedown", onOutside);
+    requestAnimationFrame(() => search.focus());
+  };
+  flagBtn.addEventListener("click", () => popover ? closePopover() : openPopover());
+  appendChildren(wrap, [countryWrap, input]);
+  return shell(context.field, context.error, wrap, context.ids);
 }
 function longText(context) {
   const textarea = el("textarea", {
     className: "fillo-input fillo-textarea",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, rows: "4" }
+    attrs: { id: context.ids.inputId, rows: "4" }
   });
   textarea.value = typeof context.value === "string" ? context.value : "";
   if (context.field.placeholder) textarea.placeholder = context.field.placeholder;
   textarea.addEventListener("input", () => context.setValue(textarea.value, { render: false }));
   textarea.addEventListener("change", () => context.setValue(textarea.value));
-  applyFieldAria(textarea, context.field, context.error);
-  return shell(context.field, context.error, textarea);
+  applyFieldAria(textarea, context.field, context.error, context.ids);
+  return shell(context.field, context.error, textarea, context.ids);
 }
 function singleChoice(context) {
   const field = context.field;
   const options = displayOptions(field);
   const value = typeof context.value === "string" ? context.value : "";
+  const activeOtherFields = context.activeOtherFields;
   const isOther = value !== "" && !field.options.some((option) => option.id === value);
+  const otherActive = isOther || value === "" && activeOtherFields?.has(field.id) === true;
   const wrap = el("div", {
     className: "fillo-options",
-    attrs: { role: "radiogroup", "aria-labelledby": `${FIELD_INPUT_PREFIX}${field.id}-label` }
+    attrs: { role: "radiogroup", "aria-labelledby": context.ids.labelId }
   });
-  applyFieldAria(wrap, field, context.error);
+  applyFieldAria(wrap, field, context.error, context.ids);
   for (const option of options) {
     const label = el("label", {
-      className: `fillo-option${value === option.id ? " fillo-option--selected" : ""}`,
+      className: `fillo-option${option.icon ? " fillo-option--has-icon" : ""}${value === option.id ? " fillo-option--selected" : ""}`,
       attrs: { "data-option": option.id }
     });
-    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: `fillo-${field.id}` } });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
     input.checked = value === option.id;
-    input.addEventListener("change", () => context.setValue(option.id));
-    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: option.label })]);
+    input.addEventListener("change", () => {
+      activeOtherFields?.delete(field.id);
+      context.setValue(option.id);
+    });
+    appendChildren(label, [
+      input,
+      optionIcon(option.icon),
+      el("span", { className: "fillo-option-label", text: option.label })
+    ]);
     wrap.appendChild(label);
   }
   if (field.allowOther) {
-    const label = el("label", { className: `fillo-option${isOther ? " fillo-option--selected" : ""}` });
-    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: `fillo-${field.id}` } });
-    input.checked = isOther;
-    input.addEventListener("change", () => context.setValue("", { render: true }));
-    label.appendChild(input);
-    label.appendChild(el("span", { className: "fillo-option-label", text: "Other" }));
-    if (isOther) {
+    const label = el("label", {
+      className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`
+    });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
+    input.checked = otherActive;
+    input.addEventListener("change", () => {
+      activeOtherFields?.add(field.id);
+      context.setValue("", { render: true });
+    });
+    appendChildren(label, [
+      appendChildren(el("span", { className: "fillo-option-main" }), [
+        input,
+        el("span", { className: "fillo-option-label", text: "Other" })
+      ])
+    ]);
+    if (otherActive) {
       const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
-      other.value = value;
+      other.value = isOther ? value : "";
       other.placeholder = "Your answer";
-      other.addEventListener("input", () => context.setValue(other.value, { render: false }));
-      other.addEventListener("change", () => context.setValue(other.value));
+      other.addEventListener("input", () => {
+        activeOtherFields?.add(field.id);
+        context.setValue(other.value, { render: false });
+      });
+      other.addEventListener("change", () => {
+        activeOtherFields?.add(field.id);
+        context.setValue(other.value);
+      });
       label.appendChild(other);
+      if (!isOther) queueMicrotask(() => other.focus());
     }
     wrap.appendChild(label);
   }
-  return shell(field, context.error, wrap);
+  return shell(field, context.error, wrap, context.ids);
 }
 function multiChoice(context) {
   const field = context.field;
@@ -147,88 +427,183 @@ function multiChoice(context) {
   const selected = Array.isArray(context.value) ? context.value : [];
   const knownIds = new Set(field.options.map((option) => option.id));
   const otherText = selected.find((value) => !knownIds.has(value));
+  const activeOtherFields = context.activeOtherFields;
+  const getSelected = () => {
+    const current = context.getValue?.() ?? context.value;
+    return Array.isArray(current) ? current : [];
+  };
   const wrap = el("div", {
     className: "fillo-options",
-    attrs: { role: "group", "aria-labelledby": `${FIELD_INPUT_PREFIX}${field.id}-label` }
+    attrs: { role: "group", "aria-labelledby": context.ids.labelId }
   });
-  applyFieldAria(wrap, field, context.error);
+  applyFieldAria(wrap, field, context.error, context.ids);
   const setSelected = (next) => context.setValue(next);
   for (const option of options) {
     const label = el("label", {
-      className: `fillo-option${selected.includes(option.id) ? " fillo-option--selected" : ""}`,
+      className: `fillo-option${option.icon ? " fillo-option--has-icon" : ""}${selected.includes(option.id) ? " fillo-option--selected" : ""}`,
       attrs: { "data-option": option.id }
     });
     const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
     input.checked = selected.includes(option.id);
     input.addEventListener("change", () => {
-      setSelected(input.checked ? [...selected, option.id] : selected.filter((id) => id !== option.id));
+      const current = getSelected();
+      setSelected(input.checked ? [...current, option.id] : current.filter((id) => id !== option.id));
     });
-    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: option.label })]);
+    appendChildren(label, [
+      input,
+      optionIcon(option.icon),
+      el("span", { className: "fillo-option-label", text: option.label })
+    ]);
     wrap.appendChild(label);
   }
   if (field.allowOther) {
-    const active = otherText !== void 0;
-    const label = el("label", { className: `fillo-option${active ? " fillo-option--selected" : ""}` });
+    const active = otherText !== void 0 || activeOtherFields?.has(field.id) === true;
+    const label = el("label", {
+      className: `fillo-option fillo-option--other${active ? " fillo-option--selected fillo-option--with-other" : ""}`
+    });
     const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
     input.checked = active;
     input.addEventListener("change", () => {
-      const rest = selected.filter((value) => knownIds.has(value));
-      setSelected(input.checked ? [...rest, otherText ?? ""] : rest);
+      const rest = getSelected().filter((value) => knownIds.has(value));
+      if (input.checked) {
+        activeOtherFields?.add(field.id);
+        setSelected(rest);
+      } else {
+        activeOtherFields?.delete(field.id);
+        setSelected(rest);
+      }
     });
-    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: "Other" })]);
+    appendChildren(label, [
+      appendChildren(el("span", { className: "fillo-option-main" }), [
+        input,
+        el("span", { className: "fillo-option-label", text: "Other" })
+      ])
+    ]);
     if (active) {
       const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
       other.value = otherText ?? "";
       other.placeholder = "Your answer";
       other.addEventListener("input", () => {
-        const rest = selected.filter((value) => knownIds.has(value));
+        activeOtherFields?.add(field.id);
+        const rest = getSelected().filter((value) => knownIds.has(value));
         context.setValue(other.value ? [...rest, other.value] : rest, { render: false });
       });
       other.addEventListener("change", () => {
-        const rest = selected.filter((value) => knownIds.has(value));
+        activeOtherFields?.add(field.id);
+        const rest = getSelected().filter((value) => knownIds.has(value));
         context.setValue(other.value ? [...rest, other.value] : rest);
       });
       label.appendChild(other);
+      if (otherText === void 0) queueMicrotask(() => other.focus());
     }
     wrap.appendChild(label);
   }
-  return shell(field, context.error, wrap);
+  return shell(field, context.error, wrap, context.ids);
 }
 var OTHER_VALUE = "__fillo_other__";
 function dropdown(context) {
   const field = context.field;
   const value = typeof context.value === "string" ? context.value : "";
+  const activeOtherFields = context.activeOtherFields;
   const isOther = value !== "" && !field.options.some((option) => option.id === value);
+  const otherActive = isOther || value === "" && activeOtherFields?.has(field.id) === true;
   const wrap = el("div");
+  const selectWrap = el("div", { className: "fillo-select-wrap" });
   const select = el("select", {
     className: "fillo-input fillo-select",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}` }
+    attrs: { id: context.ids.inputId }
   });
   select.appendChild(el("option", { text: field.placeholder ?? "Choose...", attrs: { value: "" } }));
   for (const option of displayOptions(field)) {
     select.appendChild(el("option", { text: option.label, attrs: { value: option.id } }));
   }
   if (field.allowOther) select.appendChild(el("option", { text: "Other...", attrs: { value: OTHER_VALUE } }));
-  select.value = isOther ? OTHER_VALUE : value;
+  select.value = otherActive ? OTHER_VALUE : value;
   select.addEventListener("change", () => {
-    context.setValue(select.value === OTHER_VALUE ? "" : select.value || null);
+    if (select.value === OTHER_VALUE) {
+      activeOtherFields?.add(field.id);
+      context.setValue("", { render: true });
+    } else {
+      activeOtherFields?.delete(field.id);
+      context.setValue(select.value || null);
+    }
   });
-  applyFieldAria(select, field, context.error);
-  wrap.appendChild(select);
-  if (isOther) {
+  applyFieldAria(select, field, context.error, context.ids);
+  appendChildren(selectWrap, [select, el("span", { className: "fillo-select-icon", attrs: { "aria-hidden": "true" } })]);
+  wrap.appendChild(selectWrap);
+  if (otherActive) {
     const other = el("input", {
       className: "fillo-input fillo-other-input fillo-other-input--block",
       attrs: { type: "text" }
     });
-    other.value = value;
+    other.value = isOther ? value : "";
     other.placeholder = "Your answer";
-    other.addEventListener("input", () => context.setValue(other.value, { render: false }));
-    other.addEventListener("change", () => context.setValue(other.value));
+    other.addEventListener("input", () => {
+      activeOtherFields?.add(field.id);
+      context.setValue(other.value, { render: false });
+    });
+    other.addEventListener("change", () => {
+      activeOtherFields?.add(field.id);
+      context.setValue(other.value);
+    });
     wrap.appendChild(other);
+    if (!isOther) queueMicrotask(() => other.focus());
   }
-  return shell(field, context.error, wrap);
+  return shell(field, context.error, wrap, context.ids);
 }
 function checkbox(context) {
+  if (context.field.kind === "checkbox" && context.field.appearance === "toggle") {
+    const wrap2 = el("div", {
+      className: `fillo-field fillo-field--checkbox fillo-field--toggle${context.error ? " fillo-field--error" : ""}`,
+      attrs: { "data-field": context.field.id }
+    });
+    const label2 = el("label", { className: "fillo-toggle" });
+    const labelText2 = el("span", { className: "fillo-option-label", text: context.field.label });
+    if (!context.field.required)
+      labelText2.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
+    const copy = el("span", { className: "fillo-toggle-copy" });
+    copy.appendChild(labelText2);
+    const input2 = el("input", {
+      className: "fillo-toggle-input",
+      attrs: {
+        id: context.ids.inputId,
+        type: "checkbox",
+        role: "switch",
+        "aria-checked": String(context.value === true)
+      }
+    });
+    input2.checked = context.value === true;
+    input2.addEventListener("change", () => {
+      input2.setAttribute("aria-checked", String(input2.checked));
+      context.setValue(input2.checked);
+    });
+    applyFieldAria(input2, context.field, context.error, context.ids);
+    appendChildren(label2, [
+      copy,
+      input2,
+      appendChildren(el("span", { className: "fillo-toggle-track", attrs: { "aria-hidden": "true" } }), [
+        el("span", { className: "fillo-toggle-thumb" })
+      ])
+    ]);
+    wrap2.appendChild(label2);
+    if (context.field.description)
+      wrap2.appendChild(
+        el("p", {
+          className: "fillo-description",
+          text: context.field.description,
+          attrs: { id: context.ids.descriptionId }
+        })
+      );
+    if (context.error)
+      wrap2.appendChild(
+        el("p", {
+          className: "fillo-error",
+          text: context.error,
+          attrs: { role: "alert", id: context.ids.errorId }
+        })
+      );
+    return wrap2;
+  }
   const wrap = el("div", {
     className: `fillo-field fillo-field--checkbox${context.error ? " fillo-field--error" : ""}`,
     attrs: { "data-field": context.field.id }
@@ -236,11 +611,11 @@ function checkbox(context) {
   const label = el("label", { className: "fillo-option" });
   const input = el("input", {
     className: "fillo-option-input",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, type: "checkbox" }
+    attrs: { id: context.ids.inputId, type: "checkbox" }
   });
   input.checked = context.value === true;
   input.addEventListener("change", () => context.setValue(input.checked));
-  applyFieldAria(input, context.field, context.error);
+  applyFieldAria(input, context.field, context.error, context.ids);
   const labelText = el("span", { className: "fillo-option-label", text: context.field.label });
   if (!context.field.required)
     labelText.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
@@ -251,7 +626,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-description",
         text: context.field.description,
-        attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}-desc` }
+        attrs: { id: context.ids.descriptionId }
       })
     );
   if (context.error)
@@ -259,7 +634,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-error",
         text: context.error,
-        attrs: { role: "alert", id: `${FIELD_INPUT_PREFIX}${context.field.id}-error` }
+        attrs: { role: "alert", id: context.ids.errorId }
       })
     );
   return wrap;
@@ -268,8 +643,8 @@ function rating(context) {
   if (context.field.kind !== "rating") return el("div");
   const max = typeof context.field.max === "number" ? context.field.max : 5;
   const current = typeof context.value === "number" ? context.value : 0;
-  const wrap = el("div", { className: "fillo-rating", attrs: { role: "radiogroup", "aria-label": context.field.label } });
-  applyFieldAria(wrap, context.field, context.error);
+  const wrap = el("div", { className: "fillo-rating", attrs: { role: "group", "aria-label": context.field.label } });
+  applyFieldAria(wrap, context.field, context.error, context.ids);
   for (let n = 1; n <= max; n++) {
     const button = el("button", {
       className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
@@ -279,15 +654,15 @@ function rating(context) {
     button.addEventListener("click", () => context.setValue(n === current ? null : n));
     wrap.appendChild(button);
   }
-  return shell(context.field, context.error, wrap);
+  return shell(context.field, context.error, wrap, context.ids);
 }
 function linearScale(context) {
   if (context.field.kind !== "linear_scale") return el("div");
   const min = typeof context.field.min === "number" ? context.field.min : 1;
   const max = typeof context.field.max === "number" ? context.field.max : 10;
   const wrap = el("div");
-  const steps = el("div", { className: "fillo-scale", attrs: { role: "radiogroup", "aria-label": context.field.label } });
-  applyFieldAria(steps, context.field, context.error);
+  const steps = el("div", { className: "fillo-scale", attrs: { role: "group", "aria-label": context.field.label } });
+  applyFieldAria(steps, context.field, context.error, context.ids);
   for (let n = min; n <= max; n++) {
     const button = el("button", {
       className: `fillo-scale-step${context.value === n ? " fillo-scale-step--active" : ""}`,
@@ -306,7 +681,7 @@ function linearScale(context) {
       ])
     ]);
   }
-  return shell(context.field, context.error, wrap);
+  return shell(context.field, context.error, wrap, context.ids);
 }
 function ranking(context) {
   const field = context.field;
@@ -343,7 +718,7 @@ function ranking(context) {
     ]);
     list.appendChild(item);
   }
-  return shell(context.field, context.error, list);
+  return shell(context.field, context.error, list, context.ids);
 }
 function matrix(context) {
   const field = context.field;
@@ -364,7 +739,7 @@ function matrix(context) {
       const td = document.createElement("td");
       const input = el("input", {
         className: "fillo-option-input",
-        attrs: { type: "radio", name: `fillo-${field.id}-${row.id}`, "aria-label": `${row.label}: ${col.label}` }
+        attrs: { type: "radio", name: `${context.ids.name}-${row.id}`, "aria-label": `${row.label}: ${col.label}` }
       });
       input.checked = answers[row.id] === col.id;
       input.addEventListener("change", () => context.setValue({ ...answers, [row.id]: col.id }));
@@ -374,15 +749,15 @@ function matrix(context) {
     tbody.appendChild(tr);
   }
   table.appendChild(tbody);
-  return shell(context.field, context.error, appendChildren(el("div", { className: "fillo-matrix-wrap" }), [table]));
+  return shell(context.field, context.error, appendChildren(el("div", { className: "fillo-matrix-wrap" }), [table]), context.ids);
 }
 function signature(context) {
   const wrap = el("div", { className: "fillo-signature" });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}` }
+    attrs: { id: context.ids.inputId }
   });
-  applyFieldAria(canvas, context.field, context.error);
+  applyFieldAria(canvas, context.field, context.error, context.ids);
   const clear = el("button", {
     className: "fillo-signature-clear",
     text: "Clear",
@@ -440,18 +815,18 @@ function signature(context) {
     context.setValue(null);
   });
   appendChildren(wrap, [canvas, hint, clear]);
-  return shell(context.field, context.error, wrap);
+  return shell(context.field, context.error, wrap, context.ids);
 }
 function fileUpload(context) {
   const field = context.field;
   if (field.kind !== "file_upload") return null;
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}`, type: "file" }
+    attrs: { id: context.ids.inputId, type: "file" }
   });
   if ((field.maxFiles ?? 1) > 1) input.multiple = true;
   if (field.accept?.length) input.accept = field.accept.join(",");
-  applyFieldAria(input, field, context.error);
+  applyFieldAria(input, field, context.error, context.ids);
   input.addEventListener("change", () => {
     const files = Array.from(input.files ?? []);
     void context.uploadFiles?.(field, files);
@@ -469,7 +844,7 @@ function fileUpload(context) {
   for (const file of value) {
     wrap.appendChild(el("p", { className: "fillo-description", text: `${file.name} (${Math.round(file.size / 1024)} KB)` }));
   }
-  return shell(field, context.error, wrap);
+  return shell(field, context.error, wrap, context.ids);
 }
 var shuffleCache = /* @__PURE__ */ new Map();
 function displayOptions(field) {
@@ -492,7 +867,7 @@ var DEFAULT_COMPONENTS = {
   short_text: (ctx) => textInput("text", ctx),
   email: (ctx) => textInput("email", ctx),
   url: (ctx) => textInput("url", ctx),
-  phone: (ctx) => textInput("tel", ctx),
+  phone: phoneInput,
   number: (ctx) => textInput("number", ctx),
   date: (ctx) => textInput("date", ctx),
   long_text: longText,
@@ -507,12 +882,37 @@ var DEFAULT_COMPONENTS = {
   signature,
   file_upload: fileUpload
 };
+function isAutoSubmitBlock(block) {
+  return isField(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
+}
+function needsExplicitSubmit(blocks) {
+  return blocks.some((block) => isField(block) && block.kind !== "hidden" && !isAutoSubmitBlock(block));
+}
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
   if (context.field.kind === "custom") return null;
   const renderer = DEFAULT_COMPONENTS[context.field.kind];
   return renderer ? renderer(context) : null;
 }
+function shouldAutoSubmit(field, value, api, uploading) {
+  if (api.form.settings.submitMode !== "auto") return false;
+  if (!api.isLastPage || api.status !== "idle" || uploading) return false;
+  const hasDiscreteAnswer = (() => {
+    switch (field.kind) {
+      case "select":
+      case "dropdown":
+        return typeof value === "string" && field.options.some((option) => option.id === value);
+      case "checkbox":
+        return value === true;
+      case "rating":
+      case "linear_scale":
+        return typeof value === "number";
+      default:
+        return false;
+    }
+  })();
+  return hasDiscreteAnswer && validateResponse(api.form, { ...api.data, [field.id]: value }).ok;
+}
 var DomFormController = class {
   constructor(target, options) {
     this.target = target;
@@ -524,6 +924,7 @@ var DomFormController = class {
   target;
   options;
   element = el("div");
+  instanceId = `d${++domInstanceCounter}`;
   schema = null;
   theme;
   formId;
@@ -540,6 +941,7 @@ var DomFormController = class {
   destroyed = false;
   renderQueued = false;
   hpValue = "";
+  activeOtherFields = /* @__PURE__ */ new Set();
   uploadProgress = /* @__PURE__ */ new Map();
   get status() {
     if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
@@ -618,11 +1020,14 @@ var DomFormController = class {
   }
   /** Bind the resolved schema, create the engine, and render. */
   setSchema(schema, theme, formId) {
-    this.schema = schema;
+    const normalized = normalizeFormSchema(schema);
+    if (!normalized.ok) throw new FilloError(`This form could not be rendered: ${normalized.error}`, 422);
+    const normalizedSchema = normalized.schema;
+    this.schema = normalizedSchema;
     this.theme = theme;
     this.formId = formId;
     this.engine = coreCreateFormController({
-      form: schema,
+      form: normalizedSchema,
       formId,
       client: this.options.client,
       initialData: this.options.initialData,
@@ -751,11 +1156,11 @@ var DomFormController = class {
     }
     if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
     this.element.appendChild(this.renderForm());
-    if (this.brandingVisible()) this.element.appendChild(poweredByEl());
+    if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
   }
-  /** Badge shows by default; the server lowers it for paid workspaces. */
+  /** Server-driven and not client-removable; defaults on until the server says. */
   brandingVisible() {
-    return this.options.poweredBy ?? this.fetchedPoweredBy ?? true;
+    return this.fetchedPoweredBy ?? true;
   }
   renderForm() {
     const api = this.api();
@@ -806,37 +1211,51 @@ var DomFormController = class {
       this.hpValue = hp.value;
     });
     form.appendChild(hp);
-    const footer = el("footer", { className: "fillo-footer" });
-    if (api.pageCount > 1 && !api.isFirstPage) {
-      const back = el("button", { className: "fillo-button fillo-button--ghost", text: "Back", attrs: { type: "button" } });
-      back.addEventListener("click", () => this.back());
-      footer.appendChild(back);
+    const autoSubmit = api.form.settings.submitMode === "auto";
+    const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(api.blocks);
+    const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
+    if (showFooter) {
+      const footer = el("footer", { className: "fillo-footer" });
+      if (api.pageCount > 1 && !api.isFirstPage) {
+        const back = el("button", { className: "fillo-button fillo-button--ghost", text: "Back", attrs: { type: "button" } });
+        back.addEventListener("click", () => this.back());
+        footer.appendChild(back);
+      }
+      if (showPrimaryButton) {
+        const submit = el("button", {
+          className: "fillo-button fillo-button--primary",
+          text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
+          attrs: { type: "submit" }
+        });
+        submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
+        submit.addEventListener("click", (event) => {
+          event.preventDefault();
+          advance();
+        });
+        footer.appendChild(submit);
+      }
+      form.appendChild(footer);
     }
-    const submit = el("button", {
-      className: "fillo-button fillo-button--primary",
-      text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
-      attrs: { type: "submit" }
-    });
-    submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
-    submit.addEventListener("click", (event) => {
-      event.preventDefault();
-      advance();
-    });
-    footer.appendChild(submit);
-    form.appendChild(footer);
     return form;
   }
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
-    const setValue = (value, options) => this.setValueInternal(block.id, value, options);
+    const setValue = (value, options) => {
+      this.setValueInternal(block.id, value, options);
+      if (options?.render === false) return;
+      if (shouldAutoSubmit(block, value, api, this.uploadProgress.size > 0)) void this.submit();
+    };
     const context = {
       field: block,
       value: api.data[block.id],
       error: api.errors[block.id],
+      ids: fieldIds(this.instanceId, block.id),
       api,
       setValue,
       uploadFiles: (field, files) => this.uploadFiles(field, files),
-      uploadProgress: this.uploadProgress
+      uploadProgress: this.uploadProgress,
+      activeOtherFields: this.activeOtherFields,
+      getValue: () => this.engine?.getState().data[block.id]
     };
     const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
     return renderer?.(context) ?? null;
@@ -865,12 +1284,10 @@ function defaultSuccess(schema) {
   return success;
 }
 function poweredByEl(label, href) {
-  const base = href ?? "https://fillo.so";
-  const url = `${base}${base.includes("?") ? "&" : "?"}utm_source=form_badge`;
   return el("a", {
     className: "fillo-powered",
     text: label ?? "Powered by Fillo",
-    attrs: { href: url, target: "_blank", rel: "noopener" }
+    attrs: { href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer" }
   });
 }
 function isDevEnv() {