@usefillo/dom 0.16.1 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/index.d.ts +13 -1
  3. package/dist/index.js +206 -21
  4. package/dist/standalone.global.js +1 -1
  5. package/dist/styles.css +67 -40
  6. package/dist/styles.unlayered.css +67 -40
  7. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -20,20 +20,36 @@
20
20
 
21
21
  @layer components {
22
22
  .fillo-form {
23
- color-scheme: light;
24
23
  --fillo-primary: #18181b;
24
+ --fillo-primary: light-dark(#18181b, #fafafa);
25
25
  --fillo-primary-contrast: #ffffff;
26
+ --fillo-primary-contrast: light-dark(#ffffff, #18181b);
26
27
  --fillo-bg: transparent;
27
28
  --fillo-text: #18181b;
29
+ --fillo-text: light-dark(#18181b, #f4f4f5);
28
30
  --fillo-muted: #71717a;
31
+ --fillo-muted: light-dark(#71717a, #a1a1aa);
29
32
  --fillo-border: #e4e4e7;
33
+ --fillo-border: light-dark(#e4e4e7, #3f3f46);
30
34
  --fillo-error: #dc2626;
35
+ --fillo-error: light-dark(#dc2626, #f87171);
31
36
  --fillo-radius: 10px;
32
37
  --fillo-font: inherit;
38
+ /* The form's local type root. Default = inherit the host's font, so the
39
+ form blends in; set it once to pin or scale the WHOLE form — every
40
+ internal size is em-based and proportional to this. Prefer an ABSOLUTE
41
+ value (px): the not-open state nests a preview .fillo-form inside the
42
+ root .fillo-form, and a relative value would compound there. */
43
+ --fillo-font-size: 1em;
33
44
  --fillo-control-bg: #ffffff;
45
+ --fillo-control-bg: light-dark(#ffffff, #18181b);
34
46
 
35
- color-scheme: light;
47
+ /* Unthemed forms follow the host's CSS color-scheme. The first value for
48
+ each token above is a safe light fallback for browsers without
49
+ light-dark(); explicit light/dark and auto remain available below. */
50
+ color-scheme: inherit;
36
51
  font-family: var(--fillo-font);
52
+ font-size: var(--fillo-font-size);
37
53
  color: var(--fillo-text);
38
54
  background: var(--fillo-bg);
39
55
  display: flex;
@@ -46,8 +62,11 @@
46
62
  color-scheme: light;
47
63
  }
48
64
 
65
+ .fillo-form[data-fillo-color-scheme="auto"] {
66
+ color-scheme: light dark;
67
+ }
68
+
49
69
  .fillo-form[data-fillo-color-scheme="dark"] {
50
- color-scheme: dark;
51
70
  --fillo-primary: #fafafa;
52
71
  --fillo-primary-contrast: #18181b;
53
72
  --fillo-text: #f4f4f5;
@@ -60,9 +79,8 @@
60
79
  }
61
80
 
62
81
  @media (prefers-color-scheme: dark) {
63
- .fillo-form:not([data-fillo-color-scheme="light"]):not([data-fillo-has-color-theme]) {
64
- color-scheme: dark;
65
- --fillo-primary: #fafafa;
82
+ .fillo-form[data-fillo-color-scheme="auto"] {
83
+ --fillo-primary: #fafafa;
66
84
  --fillo-primary-contrast: #18181b;
67
85
  --fillo-text: #f4f4f5;
68
86
  --fillo-muted: #a1a1aa;
@@ -75,22 +93,22 @@
75
93
  }
76
94
 
77
95
  .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
78
- .fillo-title { font-size: 1.6rem; font-weight: 650; letter-spacing: 0; margin: 0; }
96
+ .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
79
97
  .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
80
- .fillo-page-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
98
+ .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
81
99
 
82
100
  .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
83
101
 
84
102
  /* ---------- Field chrome ---------- */
85
103
  .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
86
- .fillo-label { font-weight: 550; font-size: 0.95rem; }
104
+ .fillo-label { font-weight: 550; font-size: 0.95em; }
87
105
  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
88
106
  /* Fillo marks the few optional fields rather than starring the many required
89
107
  ones — so a clean label reads as required by default. */
90
108
  .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
91
- .fillo-description { color: var(--fillo-muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
92
- .fillo-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; line-height: 1.4; margin: 0; }
93
- .fillo-submit-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; margin: 0; }
109
+ .fillo-description { color: var(--fillo-muted); font-size: 0.85em; margin: 0; line-height: 1.5; }
110
+ .fillo-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; line-height: 1.4; margin: 0; }
111
+ .fillo-submit-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; margin: 0; }
94
112
 
95
113
  /* ---------- Inputs ---------- */
96
114
  .fillo-input {
@@ -294,7 +312,7 @@
294
312
  /* Selected marker for icon-mode options — the non-color signal (the native
295
313
  input is visually hidden there, so forced-colors has nothing else). */
296
314
  .fillo-option-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--fillo-primary); }
297
- .fillo-option-label { font-size: 0.95rem; }
315
+ .fillo-option-label { font-size: 1em; }
298
316
 
299
317
  .fillo-option-main {
300
318
  display: flex;
@@ -396,7 +414,7 @@
396
414
  min-width: 0;
397
415
  margin-left: 0;
398
416
  padding: 0.5rem 0.7rem;
399
- font-size: 0.92rem;
417
+ font-size: 1em;
400
418
  background: color-mix(in srgb, var(--fillo-primary) 3%, var(--fillo-control-bg));
401
419
  }
402
420
  .fillo-other-input--block {
@@ -407,7 +425,7 @@
407
425
  /* ---------- Rating ---------- */
408
426
  .fillo-rating { display: flex; gap: 0.25rem; }
409
427
  .fillo-star {
410
- font-size: 1.75rem;
428
+ font-size: 1.75em;
411
429
  line-height: 1;
412
430
  background: none;
413
431
  border: none;
@@ -458,7 +476,7 @@
458
476
  display: flex;
459
477
  justify-content: space-between;
460
478
  color: var(--fillo-muted);
461
- font-size: 0.78rem;
479
+ font-size: 0.78em;
462
480
  margin-top: 0.35rem;
463
481
  }
464
482
 
@@ -481,11 +499,11 @@
481
499
  border-radius: 999px;
482
500
  background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
483
501
  color: var(--fillo-primary);
484
- font-size: 0.78rem;
502
+ font-size: 0.78em;
485
503
  font-weight: 650;
486
504
  font-variant-numeric: tabular-nums;
487
505
  }
488
- .fillo-ranking-label { flex: 1; font-size: 0.95rem; }
506
+ .fillo-ranking-label { flex: 1; font-size: 1em; }
489
507
  .fillo-ranking-controls { display: flex; gap: 0.2rem; }
490
508
  .fillo-ranking-move {
491
509
  font: inherit;
@@ -504,13 +522,13 @@
504
522
 
505
523
  /* ---------- Matrix ---------- */
506
524
  .fillo-matrix-wrap { overflow-x: auto; }
507
- .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
525
+ .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
508
526
  :where(.fillo-matrix) th, :where(.fillo-matrix) td {
509
527
  padding: 0.55rem 0.7rem;
510
528
  text-align: center;
511
529
  border-bottom: 1px solid var(--fillo-border);
512
530
  }
513
- .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
531
+ .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
514
532
  .fillo-matrix tbody th { text-align: start; font-weight: 500; }
515
533
  .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
516
534
  .fillo-matrix-cell:focus-within {
@@ -524,7 +542,7 @@
524
542
  /* A quiet computed-value line, not a control: no border or input chrome —
525
543
  the slightly heavier tabular number is the only emphasis. */
526
544
  .fillo-calculated-value {
527
- font-size: 1.05rem;
545
+ font-size: 1.05em;
528
546
  font-weight: 600;
529
547
  font-variant-numeric: tabular-nums;
530
548
  color: var(--fillo-text);
@@ -553,7 +571,7 @@
553
571
  display: grid;
554
572
  place-items: center;
555
573
  color: var(--fillo-muted);
556
- font-size: 0.85rem;
574
+ font-size: 0.85em;
557
575
  pointer-events: none;
558
576
  }
559
577
  .fillo-signature-clear {
@@ -561,7 +579,7 @@
561
579
  top: 0.4rem;
562
580
  inset-inline-end: 0.4rem;
563
581
  font: inherit;
564
- font-size: 0.75rem;
582
+ font-size: 0.75em;
565
583
  border: 1px solid var(--fillo-border);
566
584
  border-radius: calc(var(--fillo-radius) * 0.6);
567
585
  background: var(--fillo-control-bg);
@@ -580,7 +598,7 @@
580
598
  }
581
599
  .fillo-signature-type-label {
582
600
  color: var(--fillo-muted);
583
- font-size: 0.8rem;
601
+ font-size: 0.8em;
584
602
  }
585
603
  .fillo-signature-type-input {
586
604
  margin-top: 0;
@@ -620,8 +638,8 @@
620
638
  outline: none;
621
639
  }
622
640
  .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
623
- .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
624
- .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
641
+ .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
642
+ .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
625
643
 
626
644
  .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
627
645
  .fillo-file {
@@ -632,7 +650,7 @@
632
650
  border: 1px solid var(--fillo-border);
633
651
  border-radius: var(--fillo-radius);
634
652
  padding: 0.625rem 0.75rem;
635
- font-size: 0.88rem;
653
+ font-size: 0.88em;
636
654
  background: var(--fillo-control-bg);
637
655
  box-sizing: border-box;
638
656
  min-width: 0;
@@ -692,7 +710,7 @@
692
710
  }
693
711
  .fillo-file-error {
694
712
  color: var(--fillo-error);
695
- font-size: 0.82rem;
713
+ font-size: 0.93em;
696
714
  line-height: 1.35;
697
715
  overflow-wrap: anywhere;
698
716
  }
@@ -747,7 +765,7 @@
747
765
  }
748
766
 
749
767
  /* ---------- Content blocks ---------- */
750
- .fillo-heading { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0 0; }
768
+ .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
751
769
  .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
752
770
  .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
753
771
 
@@ -821,11 +839,11 @@
821
839
  padding: 2rem 1rem;
822
840
  text-align: center;
823
841
  }
824
- .fillo-not-open-title { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
842
+ .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
825
843
  .fillo-not-open-body {
826
844
  max-width: 26rem;
827
845
  margin: 0;
828
- font-size: 0.875rem;
846
+ font-size: 0.875em;
829
847
  color: var(--fillo-muted);
830
848
  line-height: 1.5;
831
849
  }
@@ -849,8 +867,8 @@
849
867
  border-bottom: 2.5px solid var(--fillo-primary-contrast);
850
868
  transform: translateY(-0.09rem) rotate(-45deg);
851
869
  }
852
- .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
853
- .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
870
+ .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
871
+ .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
854
872
 
855
873
  /* Honeypot — off-screen, never display:none (bots check that) */
856
874
  .fillo-hp {
@@ -911,7 +929,7 @@
911
929
  display: block;
912
930
  margin-top: 1.25rem;
913
931
  text-align: center;
914
- font-size: 0.75rem;
932
+ font-size: 0.75em;
915
933
  font-weight: 500;
916
934
  letter-spacing: 0;
917
935
  color: var(--fillo-muted);
@@ -929,7 +947,7 @@
929
947
  border-radius: var(--fillo-radius);
930
948
  background: #fffbeb;
931
949
  color: #92400e;
932
- font-size: 0.82rem;
950
+ font-size: 0.82em;
933
951
  line-height: 1.45;
934
952
  }
935
953
  .fillo-devwarning code {
@@ -948,7 +966,7 @@
948
966
  border-radius: 999px;
949
967
  background: #fef3c7;
950
968
  color: #92400e;
951
- font-size: 0.7rem;
969
+ font-size: 0.7em;
952
970
  font-weight: 600;
953
971
  letter-spacing: 0.06em;
954
972
  text-transform: uppercase;
@@ -966,7 +984,7 @@
966
984
  border-radius: var(--fillo-radius);
967
985
  background: var(--fillo-control-bg);
968
986
  color: var(--fillo-muted);
969
- font-size: 0.82rem;
987
+ font-size: 0.82em;
970
988
  line-height: 1.45;
971
989
  }
972
990
  .fillo-resume-clear {
@@ -994,10 +1012,19 @@
994
1012
  .fillo-turnstile {
995
1013
  min-height: 65px;
996
1014
  }
1015
+ /* Bridge mode: the widget lives in Fillo's iframe — keep it flush. */
1016
+ .fillo-turnstile-frame {
1017
+ display: block;
1018
+ border: 0;
1019
+ }
1020
+ /* interaction-only: while the check runs invisibly, reserve no space. */
1021
+ .fillo-turnstile[data-fillo-challenge-visible="false"] {
1022
+ min-height: 0;
1023
+ }
997
1024
  .fillo-turnstile-error {
998
1025
  margin: 0;
999
1026
  color: var(--fillo-error);
1000
- font-size: 0.82rem;
1027
+ font-size: 0.82em;
1001
1028
  line-height: 1.45;
1002
1029
  }
1003
1030
 
@@ -1018,7 +1045,7 @@
1018
1045
  justify-content: space-between;
1019
1046
  gap: 0.5rem;
1020
1047
  }
1021
- .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1048
+ .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
1022
1049
  .fillo-group-add {
1023
1050
  align-self: flex-start;
1024
1051
  font: inherit;
@@ -1031,7 +1058,7 @@
1031
1058
  }
1032
1059
  .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1033
1060
  .fillo-group-remove {
1034
- font-size: 1.1rem;
1061
+ font-size: 1.1em;
1035
1062
  line-height: 1;
1036
1063
  padding: 0 0.2rem;
1037
1064
  border: none;
package/dist/styles.unlayered.css CHANGED
@@ -20,20 +20,36 @@
20
20
 
21
21
 
22
22
  .fillo-form {
23
- color-scheme: light;
24
23
  --fillo-primary: #18181b;
24
+ --fillo-primary: light-dark(#18181b, #fafafa);
25
25
  --fillo-primary-contrast: #ffffff;
26
+ --fillo-primary-contrast: light-dark(#ffffff, #18181b);
26
27
  --fillo-bg: transparent;
27
28
  --fillo-text: #18181b;
29
+ --fillo-text: light-dark(#18181b, #f4f4f5);
28
30
  --fillo-muted: #71717a;
31
+ --fillo-muted: light-dark(#71717a, #a1a1aa);
29
32
  --fillo-border: #e4e4e7;
33
+ --fillo-border: light-dark(#e4e4e7, #3f3f46);
30
34
  --fillo-error: #dc2626;
35
+ --fillo-error: light-dark(#dc2626, #f87171);
31
36
  --fillo-radius: 10px;
32
37
  --fillo-font: inherit;
38
+ /* The form's local type root. Default = inherit the host's font, so the
39
+ form blends in; set it once to pin or scale the WHOLE form — every
40
+ internal size is em-based and proportional to this. Prefer an ABSOLUTE
41
+ value (px): the not-open state nests a preview .fillo-form inside the
42
+ root .fillo-form, and a relative value would compound there. */
43
+ --fillo-font-size: 1em;
33
44
  --fillo-control-bg: #ffffff;
45
+ --fillo-control-bg: light-dark(#ffffff, #18181b);
34
46
 
35
- color-scheme: light;
47
+ /* Unthemed forms follow the host's CSS color-scheme. The first value for
48
+ each token above is a safe light fallback for browsers without
49
+ light-dark(); explicit light/dark and auto remain available below. */
50
+ color-scheme: inherit;
36
51
  font-family: var(--fillo-font);
52
+ font-size: var(--fillo-font-size);
37
53
  color: var(--fillo-text);
38
54
  background: var(--fillo-bg);
39
55
  display: flex;
@@ -46,8 +62,11 @@
46
62
  color-scheme: light;
47
63
  }
48
64
 
65
+ .fillo-form[data-fillo-color-scheme="auto"] {
66
+ color-scheme: light dark;
67
+ }
68
+
49
69
  .fillo-form[data-fillo-color-scheme="dark"] {
50
- color-scheme: dark;
51
70
  --fillo-primary: #fafafa;
52
71
  --fillo-primary-contrast: #18181b;
53
72
  --fillo-text: #f4f4f5;
@@ -60,9 +79,8 @@
60
79
  }
61
80
 
62
81
  @media (prefers-color-scheme: dark) {
63
- .fillo-form:not([data-fillo-color-scheme="light"]):not([data-fillo-has-color-theme]) {
64
- color-scheme: dark;
65
- --fillo-primary: #fafafa;
82
+ .fillo-form[data-fillo-color-scheme="auto"] {
83
+ --fillo-primary: #fafafa;
66
84
  --fillo-primary-contrast: #18181b;
67
85
  --fillo-text: #f4f4f5;
68
86
  --fillo-muted: #a1a1aa;
@@ -75,22 +93,22 @@
75
93
  }
76
94
 
77
95
  .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
78
- .fillo-title { font-size: 1.6rem; font-weight: 650; letter-spacing: 0; margin: 0; }
96
+ .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
79
97
  .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
80
- .fillo-page-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
98
+ .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
81
99
 
82
100
  .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
83
101
 
84
102
  /* ---------- Field chrome ---------- */
85
103
  .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
86
- .fillo-label { font-weight: 550; font-size: 0.95rem; }
104
+ .fillo-label { font-weight: 550; font-size: 0.95em; }
87
105
  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
88
106
  /* Fillo marks the few optional fields rather than starring the many required
89
107
  ones — so a clean label reads as required by default. */
90
108
  .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
91
- .fillo-description { color: var(--fillo-muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
92
- .fillo-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; line-height: 1.4; margin: 0; }
93
- .fillo-submit-error { color: var(--fillo-error); font-size: 0.85rem; font-weight: 500; margin: 0; }
109
+ .fillo-description { color: var(--fillo-muted); font-size: 0.85em; margin: 0; line-height: 1.5; }
110
+ .fillo-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; line-height: 1.4; margin: 0; }
111
+ .fillo-submit-error { color: var(--fillo-error); font-size: 0.85em; font-weight: 500; margin: 0; }
94
112
 
95
113
  /* ---------- Inputs ---------- */
96
114
  .fillo-input {
@@ -294,7 +312,7 @@
294
312
  /* Selected marker for icon-mode options — the non-color signal (the native
295
313
  input is visually hidden there, so forced-colors has nothing else). */
296
314
  .fillo-option-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--fillo-primary); }
297
- .fillo-option-label { font-size: 0.95rem; }
315
+ .fillo-option-label { font-size: 1em; }
298
316
 
299
317
  .fillo-option-main {
300
318
  display: flex;
@@ -396,7 +414,7 @@
396
414
  min-width: 0;
397
415
  margin-left: 0;
398
416
  padding: 0.5rem 0.7rem;
399
- font-size: 0.92rem;
417
+ font-size: 1em;
400
418
  background: color-mix(in srgb, var(--fillo-primary) 3%, var(--fillo-control-bg));
401
419
  }
402
420
  .fillo-other-input--block {
@@ -407,7 +425,7 @@
407
425
  /* ---------- Rating ---------- */
408
426
  .fillo-rating { display: flex; gap: 0.25rem; }
409
427
  .fillo-star {
410
- font-size: 1.75rem;
428
+ font-size: 1.75em;
411
429
  line-height: 1;
412
430
  background: none;
413
431
  border: none;
@@ -458,7 +476,7 @@
458
476
  display: flex;
459
477
  justify-content: space-between;
460
478
  color: var(--fillo-muted);
461
- font-size: 0.78rem;
479
+ font-size: 0.78em;
462
480
  margin-top: 0.35rem;
463
481
  }
464
482
 
@@ -481,11 +499,11 @@
481
499
  border-radius: 999px;
482
500
  background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
483
501
  color: var(--fillo-primary);
484
- font-size: 0.78rem;
502
+ font-size: 0.78em;
485
503
  font-weight: 650;
486
504
  font-variant-numeric: tabular-nums;
487
505
  }
488
- .fillo-ranking-label { flex: 1; font-size: 0.95rem; }
506
+ .fillo-ranking-label { flex: 1; font-size: 1em; }
489
507
  .fillo-ranking-controls { display: flex; gap: 0.2rem; }
490
508
  .fillo-ranking-move {
491
509
  font: inherit;
@@ -504,13 +522,13 @@
504
522
 
505
523
  /* ---------- Matrix ---------- */
506
524
  .fillo-matrix-wrap { overflow-x: auto; }
507
- .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
525
+ .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
508
526
  :where(.fillo-matrix) th, :where(.fillo-matrix) td {
509
527
  padding: 0.55rem 0.7rem;
510
528
  text-align: center;
511
529
  border-bottom: 1px solid var(--fillo-border);
512
530
  }
513
- .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.8rem; }
531
+ .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
514
532
  .fillo-matrix tbody th { text-align: start; font-weight: 500; }
515
533
  .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
516
534
  .fillo-matrix-cell:focus-within {
@@ -524,7 +542,7 @@
524
542
  /* A quiet computed-value line, not a control: no border or input chrome —
525
543
  the slightly heavier tabular number is the only emphasis. */
526
544
  .fillo-calculated-value {
527
- font-size: 1.05rem;
545
+ font-size: 1.05em;
528
546
  font-weight: 600;
529
547
  font-variant-numeric: tabular-nums;
530
548
  color: var(--fillo-text);
@@ -553,7 +571,7 @@
553
571
  display: grid;
554
572
  place-items: center;
555
573
  color: var(--fillo-muted);
556
- font-size: 0.85rem;
574
+ font-size: 0.85em;
557
575
  pointer-events: none;
558
576
  }
559
577
  .fillo-signature-clear {
@@ -561,7 +579,7 @@
561
579
  top: 0.4rem;
562
580
  inset-inline-end: 0.4rem;
563
581
  font: inherit;
564
- font-size: 0.75rem;
582
+ font-size: 0.75em;
565
583
  border: 1px solid var(--fillo-border);
566
584
  border-radius: calc(var(--fillo-radius) * 0.6);
567
585
  background: var(--fillo-control-bg);
@@ -580,7 +598,7 @@
580
598
  }
581
599
  .fillo-signature-type-label {
582
600
  color: var(--fillo-muted);
583
- font-size: 0.8rem;
601
+ font-size: 0.8em;
584
602
  }
585
603
  .fillo-signature-type-input {
586
604
  margin-top: 0;
@@ -620,8 +638,8 @@
620
638
  outline: none;
621
639
  }
622
640
  .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
623
- .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
624
- .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
641
+ .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
642
+ .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
625
643
 
626
644
  .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
627
645
  .fillo-file {
@@ -632,7 +650,7 @@
632
650
  border: 1px solid var(--fillo-border);
633
651
  border-radius: var(--fillo-radius);
634
652
  padding: 0.625rem 0.75rem;
635
- font-size: 0.88rem;
653
+ font-size: 0.88em;
636
654
  background: var(--fillo-control-bg);
637
655
  box-sizing: border-box;
638
656
  min-width: 0;
@@ -692,7 +710,7 @@
692
710
  }
693
711
  .fillo-file-error {
694
712
  color: var(--fillo-error);
695
- font-size: 0.82rem;
713
+ font-size: 0.93em;
696
714
  line-height: 1.35;
697
715
  overflow-wrap: anywhere;
698
716
  }
@@ -747,7 +765,7 @@
747
765
  }
748
766
 
749
767
  /* ---------- Content blocks ---------- */
750
- .fillo-heading { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0 0; }
768
+ .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
751
769
  .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
752
770
  .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
753
771
 
@@ -821,11 +839,11 @@
821
839
  padding: 2rem 1rem;
822
840
  text-align: center;
823
841
  }
824
- .fillo-not-open-title { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
842
+ .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
825
843
  .fillo-not-open-body {
826
844
  max-width: 26rem;
827
845
  margin: 0;
828
- font-size: 0.875rem;
846
+ font-size: 0.875em;
829
847
  color: var(--fillo-muted);
830
848
  line-height: 1.5;
831
849
  }
@@ -849,8 +867,8 @@
849
867
  border-bottom: 2.5px solid var(--fillo-primary-contrast);
850
868
  transform: translateY(-0.09rem) rotate(-45deg);
851
869
  }
852
- .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
853
- .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
870
+ .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
871
+ .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
854
872
 
855
873
  /* Honeypot — off-screen, never display:none (bots check that) */
856
874
  .fillo-hp {
@@ -911,7 +929,7 @@
911
929
  display: block;
912
930
  margin-top: 1.25rem;
913
931
  text-align: center;
914
- font-size: 0.75rem;
932
+ font-size: 0.75em;
915
933
  font-weight: 500;
916
934
  letter-spacing: 0;
917
935
  color: var(--fillo-muted);
@@ -929,7 +947,7 @@
929
947
  border-radius: var(--fillo-radius);
930
948
  background: #fffbeb;
931
949
  color: #92400e;
932
- font-size: 0.82rem;
950
+ font-size: 0.82em;
933
951
  line-height: 1.45;
934
952
  }
935
953
  .fillo-devwarning code {
@@ -948,7 +966,7 @@
948
966
  border-radius: 999px;
949
967
  background: #fef3c7;
950
968
  color: #92400e;
951
- font-size: 0.7rem;
969
+ font-size: 0.7em;
952
970
  font-weight: 600;
953
971
  letter-spacing: 0.06em;
954
972
  text-transform: uppercase;
@@ -966,7 +984,7 @@
966
984
  border-radius: var(--fillo-radius);
967
985
  background: var(--fillo-control-bg);
968
986
  color: var(--fillo-muted);
969
- font-size: 0.82rem;
987
+ font-size: 0.82em;
970
988
  line-height: 1.45;
971
989
  }
972
990
  .fillo-resume-clear {
@@ -994,10 +1012,19 @@
994
1012
  .fillo-turnstile {
995
1013
  min-height: 65px;
996
1014
  }
1015
+ /* Bridge mode: the widget lives in Fillo's iframe — keep it flush. */
1016
+ .fillo-turnstile-frame {
1017
+ display: block;
1018
+ border: 0;
1019
+ }
1020
+ /* interaction-only: while the check runs invisibly, reserve no space. */
1021
+ .fillo-turnstile[data-fillo-challenge-visible="false"] {
1022
+ min-height: 0;
1023
+ }
997
1024
  .fillo-turnstile-error {
998
1025
  margin: 0;
999
1026
  color: var(--fillo-error);
1000
- font-size: 0.82rem;
1027
+ font-size: 0.82em;
1001
1028
  line-height: 1.45;
1002
1029
  }
1003
1030
 
@@ -1018,7 +1045,7 @@
1018
1045
  justify-content: space-between;
1019
1046
  gap: 0.5rem;
1020
1047
  }
1021
- .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1048
+ .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
1022
1049
  .fillo-group-add {
1023
1050
  align-self: flex-start;
1024
1051
  font: inherit;
@@ -1031,7 +1058,7 @@
1031
1058
  }
1032
1059
  .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1033
1060
  .fillo-group-remove {
1034
- font-size: 1.1rem;
1061
+ font-size: 1.1em;
1035
1062
  line-height: 1;
1036
1063
  padding: 0 0.2rem;
1037
1064
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefillo/dom",
3
- "version": "0.16.1",
3
+ "version": "0.19.0",
4
4
  "description": "Framework-agnostic DOM renderer and web component for embedding Fillo forms.",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -45,7 +45,7 @@
45
45
  "access": "public"
46
46
  },
47
47
  "dependencies": {
48
- "@usefillo/core": "^0.16.1"
48
+ "@usefillo/core": "^0.19.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "axe-core": "^4.10.0",