@usefillo/react 0.17.0 → 0.19.0

package/README.md

@@ -24,6 +24,8 @@ npm i @usefillo/react
 
 `react` and `react-dom` (18 or 19) are peer dependencies.
 
+The default stylesheet inherits the host page's CSS `color-scheme` and font. If your theme provider only toggles a class or data attribute, pass its resolved mode as `theme={{ colorScheme: "light" | "dark" }}`. Use `"auto"` only for a deliberately system-driven page. A fixed hex `background` automatically selects a readable palette unless you explicitly choose one.
+
 ## Write forms as components
 
 ```tsx

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, ReactElement } from 'react';
 import * as _usefillo_core from '@usefillo/core';
-import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloRendererStrings, FilloRespondent, ChallengeConfig, ChallengeTheme, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField, CalculatedField } from '@usefillo/core';
+import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloRendererStrings, FilloRespondent, ChallengeConfig, ChallengeTheme, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField, CalculatedField, RespondentErrorStrings } from '@usefillo/core';
 export { CodeForm, Field, FieldValue, FileValue, FilloAppearance, FilloClient, FilloError, FilloJsxError, FilloRendererStrings, FilloSlot, FilloStrings, FormSchema, FormStatus, FormTheme, ProvisionWorkspaceResult, PublishedForm, ResponseData, SlotState, createClient, defineForm, provisionWorkspace, when } from '@usefillo/core';
 
 /**
@@ -270,7 +270,7 @@ type ContentProps = {
 /** Inert: rendering one throws; they exist to be read by the compiler. */
 type Inert<P> = (props: P) => never;
 interface FilloJsxFormBaseProps extends Omit<FilloFormProps, "form" | "formId" | "client" | "renderOnly" | "skipValidation"> {
-    /** Workspace handle — the form's identity across syncs. */
+    /** Project handle — the form's identity across syncs. */
     id: string;
     title?: string;
     description?: string;
@@ -366,6 +366,8 @@ interface ControllerOptions {
      * environment) so integration details never reach production visitors.
      */
     verboseResolutionErrors?: boolean;
+    /** Resolved renderer fallbacks for localized respondent-safe failures. */
+    respondentErrorStrings?: Partial<RespondentErrorStrings>;
     /**
      * Host-app account context (identify()): who is filling this form, by your
      * own user id. Recorded with the response as an unverified claim so the

package/dist/index.js

@@ -22,6 +22,7 @@ import {
   normalizeFormTheme,
   reachableFields,
   reachablePageSequence,
+  respondentErrorStringsFor,
   resolveThemeAppearance
 } from "@usefillo/core";
 import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
@@ -104,26 +105,35 @@ function DevNoClientNotice() {
     " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development and preview.)"
   ] });
 }
-function DevDraftNotice({ warningUrl }) {
-  const safeUrl = safeHttpUrl(warningUrl);
+function DevDraftNotice({ warningUrl, formUrl }) {
+  const storageUrl = safeHttpUrl(warningUrl);
+  const publishUrl = safeHttpUrl(formUrl);
   return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx("strong", { children: "Draft form." }),
-    " It renders here, but it won\u2019t accept responses until you publish it in your Fillo dashboard.",
+    /* @__PURE__ */ jsx("strong", { children: "Draft form preview." }),
+    " The form renders for local testing, but Fillo will reject the submission and save no response until you publish it.",
     " ",
-    safeUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Connect storage to publish:",
-      " ",
-      /* @__PURE__ */ jsx("a", { href: safeUrl, target: "_blank", rel: "noopener noreferrer", children: safeUrl }),
+    storageUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: "Connect storage to publish" }),
       ".",
       " "
-    ] }),
+    ] }) : publishUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("a", { href: publishUrl, target: "_blank", rel: "noopener noreferrer", children: "Open in Fillo to publish" }),
+      ".",
+      " "
+    ] }) : null,
     "(This notice only appears in development and preview.)"
   ] });
 }
-function DevStagedNotice() {
+function DevStagedNotice({ formUrl }) {
+  const publishUrl = safeHttpUrl(formUrl);
   return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx("strong", { children: "Code changes are staged." }),
-    " This local preview is not the live form yet. Publish the changes in Fillo before deploying them for respondents."
+    /* @__PURE__ */ jsx("strong", { children: "Code changes are staged, not live." }),
+    " This page shows your draft, while respondents still get the live version.",
+    " ",
+    publishUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("a", { href: publishUrl, target: "_blank", rel: "noopener noreferrer", children: "Review and publish in Fillo" }),
+      "."
+    ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Review and publish the changes in Fillo." })
   ] });
 }
 function DevSyncErrorNotice({ error }) {
@@ -139,7 +149,7 @@ function DevSyncErrorNotice({ error }) {
   ] });
 }
 function DevChrome(props) {
-  const notice = props.devNotices === false ? null : props.syncError ? /* @__PURE__ */ jsx(DevSyncErrorNotice, { error: props.syncError }) : props.staged ? /* @__PURE__ */ jsx(DevStagedNotice, {}) : props.draft ? /* @__PURE__ */ jsx(DevDraftNotice, { warningUrl: props.warningUrl }) : props.noClient ? /* @__PURE__ */ jsx(DevNoClientNotice, {}) : null;
+  const notice = props.devNotices === false ? null : props.syncError ? /* @__PURE__ */ jsx(DevSyncErrorNotice, { error: props.syncError }) : props.staged ? /* @__PURE__ */ jsx(DevStagedNotice, { formUrl: props.formUrl }) : props.draft ? /* @__PURE__ */ jsx(DevDraftNotice, { warningUrl: props.warningUrl, formUrl: props.formUrl }) : props.noClient ? /* @__PURE__ */ jsx(DevNoClientNotice, {}) : null;
   if (!props.preview && !notice) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     props.preview && /* @__PURE__ */ jsx(PreviewBadge, {}),
@@ -210,6 +220,24 @@ import {
 function useFilloController(options) {
   const optsRef = useRef(options);
   optsRef.current = options;
+  const errorCopy = options.respondentErrorStrings;
+  const respondentErrorStrings = useMemo2(
+    () => ({ ...errorCopy }),
+    [
+      errorCopy?.submitFailed,
+      errorCopy?.loadFailedNotFound,
+      errorCopy?.loadFailedNetwork,
+      errorCopy?.formUnavailable,
+      errorCopy?.formClosed,
+      errorCopy?.submitRateLimited,
+      errorCopy?.respondentUnrecognized,
+      errorCopy?.fileUnavailable,
+      errorCopy?.scopeMissing,
+      errorCopy?.challengeIncomplete,
+      errorCopy?.challengeRetry,
+      errorCopy?.reviewAnswers
+    ]
+  );
   const storeRef = useRef(null);
   if (storeRef.current === null) {
     storeRef.current = createFormController({
@@ -230,6 +258,7 @@ function useFilloController(options) {
       get verboseResolutionErrors() {
         return optsRef.current.verboseResolutionErrors;
       },
+      respondentErrorStrings,
       respondent: options.respondent,
       // Challenge wiring read through optsRef so the engine (created once) sees
       // the latest token/reset each submit — the widget solves after mount.
@@ -244,9 +273,17 @@ function useFilloController(options) {
       form: options.form,
       formId: options.formId,
       client: options.client,
-      respondent: options.respondent
+      respondent: options.respondent,
+      respondentErrorStrings
     });
-  }, [store, options.form, options.formId, options.client, options.respondent]);
+  }, [
+    store,
+    options.form,
+    options.formId,
+    options.client,
+    options.respondent,
+    respondentErrorStrings
+  ]);
   useEffect(() => () => store.destroy(), [store]);
   const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
   return useMemo2(
@@ -329,6 +366,7 @@ function useCodeFormSync(form, client, onError, options) {
         settled: false,
         formId: null,
         status: null,
+        manageUrl: void 0,
         error: null,
         noticeError: null,
         staged: false,
@@ -390,6 +428,7 @@ function useCodeFormSync(form, client, onError, options) {
         settled: true,
         formId: r.formId,
         status: r.status ?? null,
+        manageUrl: r.manageUrl,
         branding: r.branding,
         challenge: r.challenge,
         error: null,
@@ -405,7 +444,7 @@ function useCodeFormSync(form, client, onError, options) {
         warningCode: r.warningCode,
         warningUrl: r.warningUrl
       });
-      const dashboardUrl = `${client.baseUrl || "https://fillo.so"}/forms/${r.formId}`;
+      const dashboardUrl = r.manageUrl;
       if (r.warning) {
         console.warn(
           `[fillo] ${r.warning}${r.warningUrl ? ` Connect storage to publish: ${r.warningUrl}` : ""}`
@@ -421,10 +460,14 @@ function useCodeFormSync(form, client, onError, options) {
         noticeSync(
           codeForm.id,
           "staged",
-          `[fillo] "${codeForm.id}": changes staged as a draft \u2014 the live version remains rendered until you publish them at ${dashboardUrl}`
+          `[fillo] "${codeForm.id}": changes staged as a draft \u2014 the live version remains rendered until you publish them${dashboardUrl ? ` at ${dashboardUrl}` : " in Fillo"}`
         );
       } else if (r.status === "draft") {
-        noticeSync(codeForm.id, "draft", `[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published: ${dashboardUrl}`);
+        noticeSync(
+          codeForm.id,
+          "draft",
+          `[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published${dashboardUrl ? `: ${dashboardUrl}` : " in Fillo"}`
+        );
       }
     }).catch((err) => {
       if (cancelled) return;
@@ -451,6 +494,7 @@ function useCodeFormSync(form, client, onError, options) {
   return synced.key === syncKey && synced.client === client ? {
     formId: synced.formId,
     status: synced.status,
+    manageUrl: synced.manageUrl,
     branding: synced.branding,
     challenge: synced.challenge,
     error: synced.error,
@@ -1167,8 +1211,9 @@ function formatBytes(bytes) {
 function uploadFailureMessage(error, strings) {
   if (error instanceof Error && error.name === "FilloError") {
     const status = error.status;
-    if (status !== void 0 && status >= 500) return strings.uploadUnavailable;
-    return error.message || strings.uploadFailed;
+    if (status === 0 || status !== void 0 && status >= 500) {
+      return strings.uploadUnavailable;
+    }
   }
   return strings.uploadFailed;
 }
@@ -1323,7 +1368,10 @@ function FileUploadField({
       filesRef.current = next;
       setValue(next);
     } catch (err) {
-      if (mountedRef.current) {
+      if (mountedRef.current && !controller.signal.aborted) {
+        if (err instanceof Error && err.name === "FilloError") {
+          chrome?.onError?.(err);
+        }
         const message = uploadFailureMessage(err, strings);
         setInFlight((prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f));
       }
@@ -2825,7 +2873,8 @@ function FilloForm(props) {
     resolvedSchema,
     resolvedTheme,
     warningCode: syncedWarningCode,
-    warningUrl: syncedWarningUrl
+    warningUrl: syncedWarningUrl,
+    manageUrl: syncedManageUrl
   } = useCodeFormSync(form, client, onError, {
     // An absent client is intentional render-only use. Builder previews and an
     // explicit canonical id also do not need publishable-key resolution.
@@ -3042,6 +3091,7 @@ function FilloForm(props) {
       draftNotice: notPublished,
       stagedNotice: codeChangesStaged,
       syncErrorNotice: syncError ?? syncNoticeError ?? void 0,
+      syncFormUrl: syncedManageUrl,
       uploadsAvailable: codeForm ? syncedUploadsAvailable : currentLoaded?.uploadsAvailable,
       uploadFileSizeLimitMb: codeForm ? syncedUploadFileSizeLimitMb : currentLoaded?.uploadFileSizeLimitMb ?? props.uploadFileSizeLimitMb,
       syncWarningCode: codeForm ? syncedWarningCode : void 0,
@@ -3201,6 +3251,7 @@ function ResolvedForm(props) {
     ) : void 0,
     [codeForm, client, props.onError, schema]
   );
+  const strings = resolveStrings(props.strings);
   const api = useFilloController({
     form: schema,
     formId: props.formId,
@@ -3217,6 +3268,7 @@ function ResolvedForm(props) {
     // Dev chrome gets the developer-grade resolution failure (message + code)
     // instead of the respondent-safe "unavailable" fallback.
     verboseResolutionErrors: devChrome,
+    respondentErrorStrings: respondentErrorStringsFor(strings),
     respondent: props.respondent,
     challengeRequired,
     getChallengeToken: () => challengeTokenRef.current,
@@ -3226,7 +3278,6 @@ function ResolvedForm(props) {
     }
   });
   useDraftFlush(api, !displayOnly && !renderOnly);
-  const strings = resolveStrings(props.strings);
   const announceRef = useRef9(null);
   const announce = useCallback2((text) => {
     const el = announceRef.current;
@@ -3260,9 +3311,18 @@ function ResolvedForm(props) {
       uploadsAvailable,
       uploadFileSizeLimitMb,
       warningCode,
-      warningUrl
+      warningUrl,
+      onError: props.onError
     }),
-    [devChrome, renderOnly, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
+    [
+      devChrome,
+      renderOnly,
+      uploadsAvailable,
+      uploadFileSizeLimitMb,
+      warningCode,
+      warningUrl,
+      props.onError
+    ]
   );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
@@ -3363,6 +3423,7 @@ function ResolvedForm(props) {
         staged: props.stagedNotice,
         draft: props.draftNotice,
         warningUrl: props.syncWarningUrl,
+        formUrl: props.syncFormUrl,
         noClient: !props.client && !props.skipValidation && !renderOnly
       }
     ),
@@ -3662,6 +3723,7 @@ import {
   formSchemasEqual as formSchemasEqual2,
   isFilloError as isFilloError3,
   normalizeFormSchema as normalizeFormSchema2,
+  respondentErrorStringsFor as respondentErrorStringsFor2,
   resolveStrings as resolveStrings2,
   syncCodeForm as syncCodeForm3
 } from "@usefillo/core";
@@ -3792,6 +3854,7 @@ function FilloProvider({
     } : void 0,
     [activeClient, codeForm, onError, schema]
   );
+  const resolvedStrings = resolveStrings2(strings);
   const api = useFilloController({
     ...options,
     client: activeClient,
@@ -3802,6 +3865,7 @@ function FilloProvider({
     // Dev chrome (preview or dev env) surfaces the developer-grade resolution
     // failure (message + code); an explicit option wins.
     verboseResolutionErrors: options.verboseResolutionErrors ?? devChrome,
+    respondentErrorStrings: respondentErrorStringsFor2(resolvedStrings),
     // Headless = your markup, no Fillo-rendered layout. Free like every embed
     // method; recorded per response so usage stays measurable.
     surface: "headless"
@@ -3818,7 +3882,8 @@ function FilloProvider({
       uploadsAvailable: freshUploadsAvailable,
       uploadFileSizeLimitMb: freshUploadFileSizeLimitMb,
       warningCode: freshWarningCode,
-      warningUrl: freshWarningUrl
+      warningUrl: freshWarningUrl,
+      onError
     }),
     [
       devChrome,
@@ -3826,10 +3891,10 @@ function FilloProvider({
       freshUploadsAvailable,
       freshUploadFileSizeLimitMb,
       freshWarningCode,
-      freshWarningUrl
+      freshWarningUrl,
+      onError
     ]
   );
-  const resolvedStrings = resolveStrings2(strings);
   if (targetError) {
     if (renderError) return /* @__PURE__ */ jsx10(Fragment4, { children: renderError(targetError) });
     throw targetError;

package/dist/styles.css

@@ -20,20 +20,36 @@
 
 @layer components {
   .fillo-form {
-    color-scheme: light;
     --fillo-primary: #18181b;
+    --fillo-primary: light-dark(#18181b, #fafafa);
     --fillo-primary-contrast: #ffffff;
+    --fillo-primary-contrast: light-dark(#ffffff, #18181b);
     --fillo-bg: transparent;
     --fillo-text: #18181b;
+    --fillo-text: light-dark(#18181b, #f4f4f5);
     --fillo-muted: #71717a;
+    --fillo-muted: light-dark(#71717a, #a1a1aa);
     --fillo-border: #e4e4e7;
+    --fillo-border: light-dark(#e4e4e7, #3f3f46);
     --fillo-error: #dc2626;
+    --fillo-error: light-dark(#dc2626, #f87171);
     --fillo-radius: 10px;
     --fillo-font: inherit;
+    /* The form's local type root. Default = inherit the host's font, so the
+       form blends in; set it once to pin or scale the WHOLE form — every
+       internal size is em-based and proportional to this. Prefer an ABSOLUTE
+       value (px): the not-open state nests a preview .fillo-form inside the
+       root .fillo-form, and a relative value would compound there. */
+    --fillo-font-size: 1em;
     --fillo-control-bg: #ffffff;
+    --fillo-control-bg: light-dark(#ffffff, #18181b);
 
-    color-scheme: light;
+    /* Unthemed forms follow the host's CSS color-scheme. The first value for
+       each token above is a safe light fallback for browsers without
+       light-dark(); explicit light/dark and auto remain available below. */
+    color-scheme: inherit;
     font-family: var(--fillo-font);
+    font-size: var(--fillo-font-size);
     color: var(--fillo-text);
     background: var(--fillo-bg);
     display: flex;
@@ -46,8 +62,11 @@
     color-scheme: light;
   }
 
+  .fillo-form[data-fillo-color-scheme="auto"] {
+    color-scheme: light dark;
+  }
+
   .fillo-form[data-fillo-color-scheme="dark"] {
-    color-scheme: dark;
     --fillo-primary: #fafafa;
     --fillo-primary-contrast: #18181b;
     --fillo-text: #f4f4f5;
@@ -60,9 +79,8 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    .fillo-form:not([data-fillo-color-scheme="light"]):not([data-fillo-has-color-theme]) {
-      color-scheme: dark;
-    --fillo-primary: #fafafa;
+    .fillo-form[data-fillo-color-scheme="auto"] {
+      --fillo-primary: #fafafa;
       --fillo-primary-contrast: #18181b;
       --fillo-text: #f4f4f5;
       --fillo-muted: #a1a1aa;
@@ -75,22 +93,22 @@
   }
 
   .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
-  .fillo-title { font-size: 1.6rem; font-weight: 650; letter-spacing: 0; margin: 0; }
+  .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
   .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
-  .fillo-page-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
+  .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
 
   .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
 
   /* ---------- Field chrome ---------- */
   .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
-  .fillo-label { font-weight: 550; font-size: 0.95rem; }
+  .fillo-label { font-weight: 550; font-size: 0.95em; }
   :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; 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; }
+  .fillo-description { color: var(--fillo-muted); font-size: 0.85em; margin: 0; line-height: 1.5; }
+  .fillo-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; line-height: 1.4; margin: 0; }
+  .fillo-submit-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; margin: 0; }
 
   /* ---------- Inputs ---------- */
   .fillo-input {
@@ -294,7 +312,7 @@
   /* Selected marker for icon-mode options — the non-color signal (the native
      input is visually hidden there, so forced-colors has nothing else). */
   .fillo-option-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--fillo-primary); }
-  .fillo-option-label { font-size: 0.95rem; }
+  .fillo-option-label { font-size: 1em; }
 
   .fillo-option-main {
     display: flex;
@@ -396,7 +414,7 @@
     min-width: 0;
     margin-left: 0;
     padding: 0.5rem 0.7rem;
-    font-size: 0.92rem;
+    font-size: 1em;
     background: color-mix(in srgb, var(--fillo-primary) 3%, var(--fillo-control-bg));
   }
   .fillo-other-input--block {
@@ -407,7 +425,7 @@
   /* ---------- Rating ---------- */
   .fillo-rating { display: flex; gap: 0.25rem; }
   .fillo-star {
-    font-size: 1.75rem;
+    font-size: 1.75em;
     line-height: 1;
     background: none;
     border: none;
@@ -458,7 +476,7 @@
     display: flex;
     justify-content: space-between;
     color: var(--fillo-muted);
-    font-size: 0.78rem;
+    font-size: 0.78em;
     margin-top: 0.35rem;
   }
 
@@ -481,11 +499,11 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
     color: var(--fillo-primary);
-    font-size: 0.78rem;
+    font-size: 0.78em;
     font-weight: 650;
     font-variant-numeric: tabular-nums;
   }
-  .fillo-ranking-label { flex: 1; font-size: 0.95rem; }
+  .fillo-ranking-label { flex: 1; font-size: 1em; }
   .fillo-ranking-controls { display: flex; gap: 0.2rem; }
   .fillo-ranking-move {
     font: inherit;
@@ -504,13 +522,13 @@
 
   /* ---------- Matrix ---------- */
   .fillo-matrix-wrap { overflow-x: auto; }
-  .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
+  .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
   :where(.fillo-matrix) th, :where(.fillo-matrix) td {
     padding: 0.55rem 0.7rem;
     text-align: center;
     border-bottom: 1px solid var(--fillo-border);
   }
-  .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
+  .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
   .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 {
@@ -524,7 +542,7 @@
   /* A quiet computed-value line, not a control: no border or input chrome —
      the slightly heavier tabular number is the only emphasis. */
   .fillo-calculated-value {
-    font-size: 1.05rem;
+    font-size: 1.05em;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
     color: var(--fillo-text);
@@ -553,7 +571,7 @@
     display: grid;
     place-items: center;
     color: var(--fillo-muted);
-    font-size: 0.85rem;
+    font-size: 0.85em;
     pointer-events: none;
   }
   .fillo-signature-clear {
@@ -561,7 +579,7 @@
     top: 0.4rem;
     inset-inline-end: 0.4rem;
     font: inherit;
-    font-size: 0.75rem;
+    font-size: 0.75em;
     border: 1px solid var(--fillo-border);
     border-radius: calc(var(--fillo-radius) * 0.6);
     background: var(--fillo-control-bg);
@@ -580,7 +598,7 @@
   }
   .fillo-signature-type-label {
     color: var(--fillo-muted);
-    font-size: 0.8rem;
+    font-size: 0.8em;
   }
   .fillo-signature-type-input {
     margin-top: 0;
@@ -620,8 +638,8 @@
     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; }
+  .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
+  .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
 
   .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
   .fillo-file {
@@ -632,7 +650,7 @@
     border: 1px solid var(--fillo-border);
     border-radius: var(--fillo-radius);
     padding: 0.625rem 0.75rem;
-    font-size: 0.88rem;
+    font-size: 0.88em;
     background: var(--fillo-control-bg);
     box-sizing: border-box;
     min-width: 0;
@@ -692,7 +710,7 @@
   }
   .fillo-file-error {
     color: var(--fillo-error);
-    font-size: 0.82rem;
+    font-size: 0.93em;
     line-height: 1.35;
     overflow-wrap: anywhere;
   }
@@ -747,7 +765,7 @@
   }
 
   /* ---------- Content blocks ---------- */
-  .fillo-heading { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0 0; }
+  .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
   .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
   .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
 
@@ -821,11 +839,11 @@
     padding: 2rem 1rem;
     text-align: center;
   }
-  .fillo-not-open-title { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
+  .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
   .fillo-not-open-body {
     max-width: 26rem;
     margin: 0;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     color: var(--fillo-muted);
     line-height: 1.5;
   }
@@ -849,8 +867,8 @@
     border-bottom: 2.5px solid var(--fillo-primary-contrast);
     transform: translateY(-0.09rem) rotate(-45deg);
   }
-  .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
-  .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
+  .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
+  .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
 
   /* Honeypot — off-screen, never display:none (bots check that) */
   .fillo-hp {
@@ -911,7 +929,7 @@
     display: block;
     margin-top: 1.25rem;
     text-align: center;
-    font-size: 0.75rem;
+    font-size: 0.75em;
     font-weight: 500;
     letter-spacing: 0;
     color: var(--fillo-muted);
@@ -929,7 +947,7 @@
     border-radius: var(--fillo-radius);
     background: #fffbeb;
     color: #92400e;
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
   .fillo-devwarning code {
@@ -948,7 +966,7 @@
     border-radius: 999px;
     background: #fef3c7;
     color: #92400e;
-    font-size: 0.7rem;
+    font-size: 0.7em;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
@@ -966,7 +984,7 @@
     border-radius: var(--fillo-radius);
     background: var(--fillo-control-bg);
     color: var(--fillo-muted);
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
   .fillo-resume-clear {
@@ -1006,7 +1024,7 @@
   .fillo-turnstile-error {
     margin: 0;
     color: var(--fillo-error);
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
 
@@ -1027,7 +1045,7 @@
     justify-content: space-between;
     gap: 0.5rem;
   }
-  .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
+  .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
   .fillo-group-add {
     align-self: flex-start;
     font: inherit;
@@ -1040,7 +1058,7 @@
   }
   .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
   .fillo-group-remove {
-    font-size: 1.1rem;
+    font-size: 1.1em;
     line-height: 1;
     padding: 0 0.2rem;
     border: none;

package/dist/styles.unlayered.css

@@ -20,20 +20,36 @@
 
 
   .fillo-form {
-    color-scheme: light;
     --fillo-primary: #18181b;
+    --fillo-primary: light-dark(#18181b, #fafafa);
     --fillo-primary-contrast: #ffffff;
+    --fillo-primary-contrast: light-dark(#ffffff, #18181b);
     --fillo-bg: transparent;
     --fillo-text: #18181b;
+    --fillo-text: light-dark(#18181b, #f4f4f5);
     --fillo-muted: #71717a;
+    --fillo-muted: light-dark(#71717a, #a1a1aa);
     --fillo-border: #e4e4e7;
+    --fillo-border: light-dark(#e4e4e7, #3f3f46);
     --fillo-error: #dc2626;
+    --fillo-error: light-dark(#dc2626, #f87171);
     --fillo-radius: 10px;
     --fillo-font: inherit;
+    /* The form's local type root. Default = inherit the host's font, so the
+       form blends in; set it once to pin or scale the WHOLE form — every
+       internal size is em-based and proportional to this. Prefer an ABSOLUTE
+       value (px): the not-open state nests a preview .fillo-form inside the
+       root .fillo-form, and a relative value would compound there. */
+    --fillo-font-size: 1em;
     --fillo-control-bg: #ffffff;
+    --fillo-control-bg: light-dark(#ffffff, #18181b);
 
-    color-scheme: light;
+    /* Unthemed forms follow the host's CSS color-scheme. The first value for
+       each token above is a safe light fallback for browsers without
+       light-dark(); explicit light/dark and auto remain available below. */
+    color-scheme: inherit;
     font-family: var(--fillo-font);
+    font-size: var(--fillo-font-size);
     color: var(--fillo-text);
     background: var(--fillo-bg);
     display: flex;
@@ -46,8 +62,11 @@
     color-scheme: light;
   }
 
+  .fillo-form[data-fillo-color-scheme="auto"] {
+    color-scheme: light dark;
+  }
+
   .fillo-form[data-fillo-color-scheme="dark"] {
-    color-scheme: dark;
     --fillo-primary: #fafafa;
     --fillo-primary-contrast: #18181b;
     --fillo-text: #f4f4f5;
@@ -60,9 +79,8 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    .fillo-form:not([data-fillo-color-scheme="light"]):not([data-fillo-has-color-theme]) {
-      color-scheme: dark;
-    --fillo-primary: #fafafa;
+    .fillo-form[data-fillo-color-scheme="auto"] {
+      --fillo-primary: #fafafa;
       --fillo-primary-contrast: #18181b;
       --fillo-text: #f4f4f5;
       --fillo-muted: #a1a1aa;
@@ -75,22 +93,22 @@
   }
 
   .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
-  .fillo-title { font-size: 1.6rem; font-weight: 650; letter-spacing: 0; margin: 0; }
+  .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
   .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
-  .fillo-page-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
+  .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
 
   .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
 
   /* ---------- Field chrome ---------- */
   .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
-  .fillo-label { font-weight: 550; font-size: 0.95rem; }
+  .fillo-label { font-weight: 550; font-size: 0.95em; }
   :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; 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; }
+  .fillo-description { color: var(--fillo-muted); font-size: 0.85em; margin: 0; line-height: 1.5; }
+  .fillo-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; line-height: 1.4; margin: 0; }
+  .fillo-submit-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; margin: 0; }
 
   /* ---------- Inputs ---------- */
   .fillo-input {
@@ -294,7 +312,7 @@
   /* Selected marker for icon-mode options — the non-color signal (the native
      input is visually hidden there, so forced-colors has nothing else). */
   .fillo-option-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--fillo-primary); }
-  .fillo-option-label { font-size: 0.95rem; }
+  .fillo-option-label { font-size: 1em; }
 
   .fillo-option-main {
     display: flex;
@@ -396,7 +414,7 @@
     min-width: 0;
     margin-left: 0;
     padding: 0.5rem 0.7rem;
-    font-size: 0.92rem;
+    font-size: 1em;
     background: color-mix(in srgb, var(--fillo-primary) 3%, var(--fillo-control-bg));
   }
   .fillo-other-input--block {
@@ -407,7 +425,7 @@
   /* ---------- Rating ---------- */
   .fillo-rating { display: flex; gap: 0.25rem; }
   .fillo-star {
-    font-size: 1.75rem;
+    font-size: 1.75em;
     line-height: 1;
     background: none;
     border: none;
@@ -458,7 +476,7 @@
     display: flex;
     justify-content: space-between;
     color: var(--fillo-muted);
-    font-size: 0.78rem;
+    font-size: 0.78em;
     margin-top: 0.35rem;
   }
 
@@ -481,11 +499,11 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
     color: var(--fillo-primary);
-    font-size: 0.78rem;
+    font-size: 0.78em;
     font-weight: 650;
     font-variant-numeric: tabular-nums;
   }
-  .fillo-ranking-label { flex: 1; font-size: 0.95rem; }
+  .fillo-ranking-label { flex: 1; font-size: 1em; }
   .fillo-ranking-controls { display: flex; gap: 0.2rem; }
   .fillo-ranking-move {
     font: inherit;
@@ -504,13 +522,13 @@
 
   /* ---------- Matrix ---------- */
   .fillo-matrix-wrap { overflow-x: auto; }
-  .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
+  .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
   :where(.fillo-matrix) th, :where(.fillo-matrix) td {
     padding: 0.55rem 0.7rem;
     text-align: center;
     border-bottom: 1px solid var(--fillo-border);
   }
-  .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
+  .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
   .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 {
@@ -524,7 +542,7 @@
   /* A quiet computed-value line, not a control: no border or input chrome —
      the slightly heavier tabular number is the only emphasis. */
   .fillo-calculated-value {
-    font-size: 1.05rem;
+    font-size: 1.05em;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
     color: var(--fillo-text);
@@ -553,7 +571,7 @@
     display: grid;
     place-items: center;
     color: var(--fillo-muted);
-    font-size: 0.85rem;
+    font-size: 0.85em;
     pointer-events: none;
   }
   .fillo-signature-clear {
@@ -561,7 +579,7 @@
     top: 0.4rem;
     inset-inline-end: 0.4rem;
     font: inherit;
-    font-size: 0.75rem;
+    font-size: 0.75em;
     border: 1px solid var(--fillo-border);
     border-radius: calc(var(--fillo-radius) * 0.6);
     background: var(--fillo-control-bg);
@@ -580,7 +598,7 @@
   }
   .fillo-signature-type-label {
     color: var(--fillo-muted);
-    font-size: 0.8rem;
+    font-size: 0.8em;
   }
   .fillo-signature-type-input {
     margin-top: 0;
@@ -620,8 +638,8 @@
     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; }
+  .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
+  .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
 
   .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
   .fillo-file {
@@ -632,7 +650,7 @@
     border: 1px solid var(--fillo-border);
     border-radius: var(--fillo-radius);
     padding: 0.625rem 0.75rem;
-    font-size: 0.88rem;
+    font-size: 0.88em;
     background: var(--fillo-control-bg);
     box-sizing: border-box;
     min-width: 0;
@@ -692,7 +710,7 @@
   }
   .fillo-file-error {
     color: var(--fillo-error);
-    font-size: 0.82rem;
+    font-size: 0.93em;
     line-height: 1.35;
     overflow-wrap: anywhere;
   }
@@ -747,7 +765,7 @@
   }
 
   /* ---------- Content blocks ---------- */
-  .fillo-heading { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0 0; }
+  .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
   .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
   .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
 
@@ -821,11 +839,11 @@
     padding: 2rem 1rem;
     text-align: center;
   }
-  .fillo-not-open-title { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
+  .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
   .fillo-not-open-body {
     max-width: 26rem;
     margin: 0;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     color: var(--fillo-muted);
     line-height: 1.5;
   }
@@ -849,8 +867,8 @@
     border-bottom: 2.5px solid var(--fillo-primary-contrast);
     transform: translateY(-0.09rem) rotate(-45deg);
   }
-  .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
-  .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
+  .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
+  .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
 
   /* Honeypot — off-screen, never display:none (bots check that) */
   .fillo-hp {
@@ -911,7 +929,7 @@
     display: block;
     margin-top: 1.25rem;
     text-align: center;
-    font-size: 0.75rem;
+    font-size: 0.75em;
     font-weight: 500;
     letter-spacing: 0;
     color: var(--fillo-muted);
@@ -929,7 +947,7 @@
     border-radius: var(--fillo-radius);
     background: #fffbeb;
     color: #92400e;
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
   .fillo-devwarning code {
@@ -948,7 +966,7 @@
     border-radius: 999px;
     background: #fef3c7;
     color: #92400e;
-    font-size: 0.7rem;
+    font-size: 0.7em;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
@@ -966,7 +984,7 @@
     border-radius: var(--fillo-radius);
     background: var(--fillo-control-bg);
     color: var(--fillo-muted);
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
   .fillo-resume-clear {
@@ -1006,7 +1024,7 @@
   .fillo-turnstile-error {
     margin: 0;
     color: var(--fillo-error);
-    font-size: 0.82rem;
+    font-size: 0.82em;
     line-height: 1.45;
   }
 
@@ -1027,7 +1045,7 @@
     justify-content: space-between;
     gap: 0.5rem;
   }
-  .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
+  .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
   .fillo-group-add {
     align-self: flex-start;
     font: inherit;
@@ -1040,7 +1058,7 @@
   }
   .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
   .fillo-group-remove {
-    font-size: 1.1rem;
+    font-size: 1.1em;
     line-height: 1;
     padding: 0 0.2rem;
     border: none;

package/package.json

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