@usefillo/dom 0.5.2 → 0.5.4

package/dist/index.d.ts

@@ -72,12 +72,18 @@ interface FilloDomForm {
 }
 declare function renderForm(target: HTMLElement | string, options: RenderFormOptions): FilloDomForm;
 declare function createFormElement(options: RenderFormOptions): HTMLElement;
-declare class FilloFormElement extends HTMLElement {
+declare const HTMLElementBase: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+declare class FilloFormElement extends HTMLElementBase {
     private instance;
     private assignedForm;
     private assignedClient;
     private assignedTheme;
     private assignedInitialData;
+    private mounted;
+    private mountScheduled;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -87,6 +93,7 @@ declare class FilloFormElement extends HTMLElement {
     set client(value: FilloClient | undefined);
     set theme(value: FormTheme | undefined);
     set initialData(value: ResponseData | undefined);
+    private scheduleMount;
     private mount;
 }
 declare function registerFilloElement(name?: string): void;

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   FilloError,
   PHONE_COUNTRIES,
   countryByIso,
+  countryByTimeZone,
   createClient,
   createFormController as coreCreateFormController,
   defineForm,
@@ -24,6 +25,7 @@ import {
 } from "@usefillo/core";
 var FIELD_INPUT_PREFIX = "fillo-";
 var domInstanceCounter = 0;
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -158,6 +160,15 @@ function domLocaleCountry() {
   const region = tag.split("-")[1];
   return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
 }
+function domBrowserTimeZone() {
+  if (typeof Intl === "undefined") return void 0;
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return typeof timeZone === "string" && timeZone ? timeZone : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function setCaretAfterDigits(input, target) {
   if (target <= 0) return input.setSelectionRange(0, 0);
   const s = input.value;
@@ -171,9 +182,34 @@ function setCaretAfterDigits(input, target) {
   }
   input.setSelectionRange(pos, pos);
 }
+var PHONE_POPOVER_VIEWPORT_GAP = 8;
+function positionPhonePopover(anchor, popover) {
+  if (typeof window === "undefined") return "below";
+  const gap = PHONE_POPOVER_VIEWPORT_GAP;
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const anchorRect = anchor.getBoundingClientRect();
+  const spaceBelow = Math.max(0, viewportHeight - anchorRect.bottom - gap);
+  const spaceAbove = Math.max(0, anchorRect.top - gap);
+  const placement = spaceBelow < popover.scrollHeight && spaceAbove > spaceBelow ? "above" : "below";
+  const availableHeight = placement === "above" ? spaceAbove : spaceBelow;
+  const maxHeight = Math.max(0, Math.min(availableHeight, viewportHeight - gap * 2));
+  const maxWidth = Math.max(0, viewportWidth - gap * 2);
+  popover.style.setProperty("--fillo-phone-popover-max-height", `${Math.floor(maxHeight)}px`);
+  popover.style.setProperty("--fillo-phone-popover-max-width", `${Math.floor(maxWidth)}px`);
+  popover.style.setProperty("--fillo-phone-popover-offset-x", "0px");
+  const width = Math.min(popover.offsetWidth, maxWidth);
+  let offsetX = 0;
+  const rightOverflow = anchorRect.left + width - (viewportWidth - gap);
+  if (rightOverflow > 0) offsetX -= rightOverflow;
+  const leftOverflow = gap - (anchorRect.left + offsetX);
+  if (leftOverflow > 0) offsetX += leftOverflow;
+  popover.style.setProperty("--fillo-phone-popover-offset-x", `${Math.round(offsetX)}px`);
+  return placement;
+}
 function phoneInput(context) {
   const schema = context.field;
-  let country = parsePhone(inputValue(context.value)).country ?? countryByIso(schema.defaultCountry) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
+  let country = parsePhone(inputValue(context.value)).country ?? countryByIso(schema.defaultCountry) ?? countryByTimeZone(domBrowserTimeZone()) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
   const wrap = el("div", { className: "fillo-phone" });
   const countryWrap = el("div", { className: "fillo-phone-country" });
   const flagBtn = el("button", {
@@ -226,15 +262,39 @@ function phoneInput(context) {
     input.value = formatNational(country, nationalFromValue());
     setCaretAfterDigits(input, before);
   });
+  const registerOverlay = context.registerOverlay;
   let popover = null;
   let active = 0;
   let matches = PHONE_COUNTRIES;
+  let stopPopoverLayout = null;
+  let unregisterOverlay = null;
   const listId = `${context.ids.inputId}-countries`;
+  const syncPopoverLayout = () => {
+    if (!popover) return;
+    const placement = positionPhonePopover(countryWrap, popover);
+    popover.classList.toggle("fillo-phone-popover--above", placement === "above");
+    popover.classList.toggle("fillo-phone-popover--below", placement === "below");
+  };
+  const bindPopoverLayout = () => {
+    stopPopoverLayout?.();
+    const update = () => syncPopoverLayout();
+    syncPopoverLayout();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    stopPopoverLayout = () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  };
   const closePopover = () => {
+    stopPopoverLayout?.();
+    stopPopoverLayout = null;
     popover?.remove();
     popover = null;
     flagBtn.setAttribute("aria-expanded", "false");
     document.removeEventListener("mousedown", onOutside);
+    unregisterOverlay?.();
+    unregisterOverlay = null;
   };
   const onOutside = (e) => {
     if (!countryWrap.contains(e.target)) closePopover();
@@ -249,7 +309,7 @@ function phoneInput(context) {
     input.focus();
   };
   const openPopover = () => {
-    const pop = el("div", { className: "fillo-phone-popover" });
+    const pop = el("div", { className: "fillo-phone-popover fillo-phone-popover--below" });
     const search = el("input", {
       className: "fillo-phone-search",
       attrs: {
@@ -269,6 +329,7 @@ function phoneInput(context) {
       list.replaceChildren();
       if (matches.length === 0) {
         list.appendChild(el("li", { className: "fillo-phone-empty", text: "No matches" }));
+        syncPopoverLayout();
         return;
       }
       matches.forEach((c, i) => {
@@ -293,6 +354,7 @@ function phoneInput(context) {
         list.appendChild(li);
       });
       search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
+      syncPopoverLayout();
     };
     const syncActive = () => {
       [...list.children].forEach(
@@ -337,8 +399,10 @@ function phoneInput(context) {
     matches = PHONE_COUNTRIES;
     active = Math.max(0, PHONE_COUNTRIES.indexOf(country));
     renderList();
+    bindPopoverLayout();
     syncActive();
     document.addEventListener("mousedown", onOutside);
+    unregisterOverlay = registerOverlay?.(closePopover) ?? null;
     requestAnimationFrame(() => search.focus());
   };
   flagBtn.addEventListener("click", () => popover ? closePopover() : openPopover());
@@ -705,10 +769,18 @@ function ranking(context) {
       [next[index], next[target]] = [next[target], next[index]];
       context.setValue(next);
     };
-    const up = el("button", { className: "fillo-ranking-move", text: "Up", attrs: { type: "button" } });
+    const up = el("button", {
+      className: "fillo-ranking-move",
+      text: "Up",
+      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "up" }
+    });
     up.toggleAttribute("disabled", index === 0);
     up.addEventListener("click", () => move(-1));
-    const down = el("button", { className: "fillo-ranking-move", text: "Down", attrs: { type: "button" } });
+    const down = el("button", {
+      className: "fillo-ranking-move",
+      text: "Down",
+      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "down" }
+    });
     down.toggleAttribute("disabled", index === order.length - 1);
     down.addEventListener("click", () => move(1));
     appendChildren(controls, [up, down]);
@@ -753,18 +825,18 @@ function matrix(context) {
   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 wrap = el("div", { className: "fillo-signature-field" });
+  const pad = el("div", { className: "fillo-signature" });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
-    attrs: { id: context.ids.inputId }
+    attrs: { "aria-hidden": "true" }
   });
-  applyFieldAria(canvas, context.field, context.error, context.ids);
   const clear = el("button", {
     className: "fillo-signature-clear",
     text: "Clear",
     attrs: { type: "button" }
   });
-  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here" });
+  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here", attrs: { "aria-hidden": "true" } });
   canvas.width = 720;
   canvas.height = 220;
   const ctx = canvas.getContext("2d");
@@ -776,6 +848,34 @@ function signature(context) {
     image.src = String(context.value);
     hint.style.display = "none";
   }
+  const typed = el("input", {
+    className: "fillo-input fillo-signature-type-input",
+    attrs: {
+      id: context.ids.inputId,
+      type: "text",
+      autocomplete: "name",
+      placeholder: "Type your full name to sign"
+    }
+  });
+  applyFieldAria(typed, context.field, context.error, context.ids);
+  const drawTyped = (text) => {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (text.trim()) {
+      ctx.fillStyle = getComputedStyle(canvas).color || "#18181b";
+      ctx.font = `italic ${Math.min(96, canvas.height * 0.45)}px "Segoe Script", "Brush Script MT", cursive`;
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, 24, canvas.height / 2);
+      hasInk = true;
+      hint.style.display = "none";
+      context.setValue(canvas.toDataURL("image/png"), { render: false });
+    } else {
+      hasInk = false;
+      hint.style.display = "";
+      context.setValue(null, { render: false });
+    }
+  };
+  typed.addEventListener("input", () => drawTyped(typed.value));
   const point = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -788,6 +888,7 @@ function signature(context) {
     drawing = true;
     hasInk = true;
     hint.style.display = "none";
+    if (typed.value) typed.value = "";
     canvas.setPointerCapture(event.pointerId);
     const p = point(event);
     ctx.beginPath();
@@ -805,7 +906,7 @@ function signature(context) {
   const finish = () => {
     if (!drawing) return;
     drawing = false;
-    if (hasInk) context.setValue(canvas.toDataURL("image/png"));
+    if (hasInk) context.setValue(canvas.toDataURL("image/png"), { render: false });
   };
   canvas.addEventListener("pointerup", finish);
   canvas.addEventListener("pointercancel", finish);
@@ -813,9 +914,13 @@ function signature(context) {
     ctx?.clearRect(0, 0, canvas.width, canvas.height);
     hasInk = false;
     hint.style.display = "";
-    context.setValue(null);
+    typed.value = "";
+    context.setValue(null, { render: false });
   });
-  appendChildren(wrap, [canvas, hint, clear]);
+  appendChildren(pad, [canvas, hint, clear]);
+  const typeWrap = el("div", { className: "fillo-signature-type" });
+  typeWrap.appendChild(typed);
+  appendChildren(wrap, [pad, typeWrap]);
   return shell(context.field, context.error, wrap, context.ids);
 }
 function fileUpload(context) {
@@ -845,6 +950,10 @@ function fileUpload(context) {
   for (const file of value) {
     wrap.appendChild(el("p", { className: "fillo-description", text: `${file.name} (${Math.round(file.size / 1024)} KB)` }));
   }
+  const notice = context.uploadNotice;
+  if (notice) {
+    wrap.appendChild(el("p", { className: "fillo-upload-notice", text: notice, attrs: { role: "status" } }));
+  }
   return shell(field, context.error, wrap, context.ids);
 }
 var shuffleCache = /* @__PURE__ */ new Map();
@@ -951,6 +1060,14 @@ var DomFormController = class {
   hpValue = "";
   activeOtherFields = /* @__PURE__ */ new Set();
   uploadProgress = /* @__PURE__ */ new Map();
+  // Per-field "some files weren't added" notices (over-limit selections).
+  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.
+  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.
+  overlays = /* @__PURE__ */ new Set();
   get status() {
     if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
     return this.phase;
@@ -1056,17 +1173,21 @@ var DomFormController = class {
   }
   next() {
     if (!this.engine) return;
+    const before = this.engine.getState().pageIndex;
     this.engine.next();
+    this.focusIntent = this.engine.getState().pageIndex !== before ? "page" : "error";
     this.render();
   }
   back() {
     if (!this.engine) return;
     this.engine.back();
+    this.focusIntent = "page";
     this.render();
   }
   async submit() {
     if (!this.engine || this.phase !== "ready") return;
     const pending = this.engine.submit();
+    if (this.hasErrors()) this.focusIntent = "error";
     this.render();
     try {
       await pending;
@@ -1074,12 +1195,43 @@ var DomFormController = class {
       this.handleError(toFilloError(error));
       return;
     }
+    if (this.hasErrors()) this.focusIntent = "error";
+    this.render();
+  }
+  hasErrors() {
+    return Object.keys(this.engine?.getState().errors ?? {}).length > 0;
+  }
+  /** Re-apply a theme to the live instance — no remount, so entered data survives. */
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.theme = theme;
+    this.render();
+  }
+  /** Swap the client in place (late `client` assignment) without a remount. */
+  setClient(client) {
+    this.options.client = client;
+    this.engine?.setContext({ client });
     this.render();
   }
   async uploadFiles(field, files) {
     if (!this.schema) return;
     const maxFiles = field.maxFiles ?? 1;
-    const selected = files.slice(0, maxFiles);
+    const existing = maxFiles > 1 && Array.isArray(this.mutableData[field.id]) ? [...this.mutableData[field.id]] : [];
+    const room = Math.max(0, maxFiles - existing.length);
+    const selected = files.slice(0, room);
+    const dropped = files.length - selected.length;
+    if (dropped > 0) {
+      this.uploadNotices.set(
+        field.id,
+        `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
+      );
+    } else {
+      this.uploadNotices.delete(field.id);
+    }
+    if (selected.length === 0) {
+      this.queueRender();
+      return;
+    }
     this.uploadProgress.set(field.id, 0);
     this.queueRender();
     try {
@@ -1105,7 +1257,7 @@ var DomFormController = class {
         }
       }
       this.uploadProgress.delete(field.id);
-      this.setValueInternal(field.id, values);
+      this.setValueInternal(field.id, [...existing, ...values]);
     } catch (error) {
       this.uploadProgress.delete(field.id);
       this.handleError(toFilloError(error));
@@ -1113,8 +1265,95 @@ var DomFormController = class {
   }
   destroy() {
     this.destroyed = true;
+    this.closeOverlays();
     this.target.replaceChildren();
   }
+  /** Add/return the phone popover teardown; called back on re-render or destroy. */
+  registerOverlay = (close) => {
+    this.overlays.add(close);
+    return () => this.overlays.delete(close);
+  };
+  closeOverlays() {
+    if (this.overlays.size === 0) return;
+    for (const close of Array.from(this.overlays)) {
+      try {
+        close();
+      } catch {
+      }
+    }
+    this.overlays.clear();
+  }
+  captureFocus() {
+    if (typeof document === "undefined") return null;
+    const active = document.activeElement;
+    if (!active || !this.element.contains(active)) return null;
+    const desc = {};
+    if (active.id) desc.id = active.id;
+    const rankOpt = active.getAttribute("data-fillo-rank-opt");
+    if (rankOpt) {
+      desc.rankOpt = rankOpt;
+      desc.rankDir = active.getAttribute("data-fillo-rank-dir") ?? void 0;
+    }
+    const fieldEl = active.closest("[data-field]");
+    if (fieldEl) {
+      desc.fieldId = fieldEl.getAttribute("data-field") ?? void 0;
+      desc.controlIndex = Array.from(
+        fieldEl.querySelectorAll(FOCUSABLE_SELECTOR)
+      ).indexOf(active);
+    }
+    if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
+      try {
+        desc.selStart = active.selectionStart;
+        desc.selEnd = active.selectionEnd;
+      } catch {
+      }
+    }
+    return desc.id || desc.rankOpt || desc.fieldId ? desc : null;
+  }
+  restoreFocus(desc) {
+    if (typeof document === "undefined") return;
+    let target = null;
+    if (desc.rankOpt) {
+      const buttons = Array.from(
+        this.element.querySelectorAll("[data-fillo-rank-opt]")
+      ).filter((b) => b.getAttribute("data-fillo-rank-opt") === desc.rankOpt);
+      target = buttons.find((b) => b.getAttribute("data-fillo-rank-dir") === desc.rankDir && !b.disabled) ?? buttons.find((b) => !b.disabled) ?? null;
+    }
+    if (!target && desc.id) target = document.getElementById(desc.id);
+    if (!target && desc.fieldId != null && desc.controlIndex != null && desc.controlIndex >= 0) {
+      const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+        (e) => e.getAttribute("data-field") === desc.fieldId
+      );
+      if (fieldEl) {
+        target = Array.from(fieldEl.querySelectorAll(FOCUSABLE_SELECTOR))[desc.controlIndex] ?? null;
+      }
+    }
+    if (!target || typeof target.focus !== "function") return;
+    target.focus();
+    if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) && desc.selStart != null) {
+      try {
+        target.setSelectionRange(desc.selStart, desc.selEnd ?? desc.selStart);
+      } catch {
+      }
+    }
+  }
+  applyFocus(intent, captured) {
+    if (typeof document === "undefined") return;
+    if (intent === "error") {
+      this.element.querySelector('[aria-invalid="true"]')?.focus?.();
+      return;
+    }
+    if (intent === "page") {
+      const heading = this.element.querySelector(".fillo-page-title, .fillo-title");
+      const target = heading ?? this.element.querySelector(".fillo-blocks");
+      if (target) {
+        if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+        target.focus?.();
+      }
+      return;
+    }
+    if (captured) this.restoreFocus(captured);
+  }
   handleError(error) {
     this.phase = "error";
     this.options.onError?.(error);
@@ -1130,6 +1369,10 @@ var DomFormController = class {
   }
   render(error) {
     if (this.destroyed) return;
+    const intent = this.focusIntent;
+    this.focusIntent = null;
+    const captured = intent ? null : this.captureFocus();
+    this.closeOverlays();
     this.element.replaceChildren();
     if (this.phase === "loading") {
       const loading = el("div", { className: `fillo-form fillo-form--loading ${this.options.className ?? ""}`, attrs: { "aria-busy": "true" } });
@@ -1165,6 +1408,7 @@ var DomFormController = class {
     if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
     this.element.appendChild(this.renderForm());
     if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+    this.applyFocus(intent, captured);
   }
   /** Server-driven and not client-removable; defaults on until the server says. */
   brandingVisible() {
@@ -1263,7 +1507,9 @@ var DomFormController = class {
       uploadFiles: (field, files) => this.uploadFiles(field, files),
       uploadProgress: this.uploadProgress,
       activeOtherFields: this.activeOtherFields,
-      getValue: () => this.engine?.getState().data[block.id]
+      getValue: () => this.engine?.getState().data[block.id],
+      registerOverlay: this.registerOverlay,
+      uploadNotice: this.uploadNotices.get(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;
@@ -1322,43 +1568,65 @@ function createFormElement(options) {
   renderForm(host, options);
   return host;
 }
-var FilloFormElement = class extends HTMLElement {
+var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var FilloFormElement = class extends HTMLElementBase {
   instance = null;
   assignedForm;
   assignedClient;
   assignedTheme;
   assignedInitialData;
+  mounted = false;
+  mountScheduled = false;
   static get observedAttributes() {
     return ["publishable-key", "form-id"];
   }
   connectedCallback() {
-    this.mount();
+    this.scheduleMount();
   }
   disconnectedCallback() {
     this.instance?.destroy();
     this.instance = null;
+    this.mounted = false;
   }
+  // On upgrade, attributeChangedCallback fires once per observed attribute
+  // *before* connectedCallback; remounting on each would run (and tear down)
+  // several getForm fetches. The first mount is owned by connectedCallback — only
+  // remount here once we're already mounted, and coalesce it.
   attributeChangedCallback() {
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.isConnected) this.scheduleMount();
   }
   set form(value) {
     this.assignedForm = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted) this.scheduleMount();
   }
   get form() {
     return this.assignedForm;
   }
+  // Client swaps in place — a late `client` assignment (common when a host sets
+  // properties after appending the element) must not wipe entered data.
   set client(value) {
     this.assignedClient = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.instance instanceof DomFormController) this.instance.setClient(value);
   }
+  // Theme is re-applied to the live instance — no remount, no data loss.
   set theme(value) {
     this.assignedTheme = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.instance instanceof DomFormController) this.instance.setTheme(value);
   }
   set initialData(value) {
     this.assignedInitialData = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted) this.scheduleMount();
+  }
+  // Coalesce a burst of attribute/property changes in one tick into a single
+  // mount so concurrent renders (and duplicate fetches) can't happen.
+  scheduleMount() {
+    if (this.mountScheduled) return;
+    this.mountScheduled = true;
+    queueMicrotask(() => {
+      this.mountScheduled = false;
+      if (this.isConnected) this.mount();
+    });
   }
   mount() {
     this.instance?.destroy();
@@ -1375,9 +1643,11 @@ var FilloFormElement = class extends HTMLElement {
       onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
       onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))
     });
+    this.mounted = true;
   }
 };
 function registerFilloElement(name = "fillo-form") {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get(name)) customElements.define(name, FilloFormElement);
 }
 function createFormController(options) {