@usefillo/dom 0.19.0 → 0.21.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 (5) hide show
  1. package/dist/index.js +21 -11
  2. package/dist/standalone.global.js +1 -1
  3. package/dist/styles.css +37 -34
  4. package/dist/styles.unlayered.css +37 -34
  5. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -93,22 +93,25 @@
93
93
  }
94
94
 
95
95
  .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
96
- .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
96
+ /* Text roles: title 1.5em, heading 1.125em, body 1em, helper 0.875em,
97
+ metadata 0.75em. Nested helper text inherits its container size.
98
+ Glyphs used as icons (stars, flags, carets) have independent sizes. */
99
+ .fillo-title { font-size: 1.5em; font-weight: 600; letter-spacing: 0; margin: 0; }
97
100
  .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
98
- .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
101
+ .fillo-page-title { font-size: 1.125em; font-weight: 600; margin: 0; }
99
102
 
100
103
  .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
101
104
 
102
105
  /* ---------- Field chrome ---------- */
103
106
  .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
104
- .fillo-label { font-weight: 550; font-size: 0.95em; }
107
+ .fillo-label { font-weight: 500; font-size: 1em; }
105
108
  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
106
109
  /* Fillo marks the few optional fields rather than starring the many required
107
110
  ones — so a clean label reads as required by default. */
108
- .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
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; }
111
+ .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.875em; }
112
+ .fillo-description { color: var(--fillo-muted); font-size: 0.875em; margin: 0; line-height: 1.5; }
113
+ .fillo-error { color: var(--fillo-error); font-size: 0.875em; font-weight: 500; line-height: 1.4; margin: 0; }
114
+ .fillo-submit-error { color: var(--fillo-error); font-size: 0.875em; font-weight: 500; margin: 0; }
112
115
 
113
116
  /* ---------- Inputs ---------- */
114
117
  .fillo-input {
@@ -326,7 +329,7 @@
326
329
  gap: 0.55rem;
327
330
  }
328
331
  :where(.fillo-option--with-other) .fillo-option-label {
329
- font-weight: 550;
332
+ font-weight: 500;
330
333
  }
331
334
 
332
335
  /* ---------- Toggle checkbox ---------- */
@@ -447,7 +450,7 @@
447
450
  min-width: 0;
448
451
  padding: 0.5rem 0.15rem;
449
452
  font: inherit;
450
- font-size: 0.92em;
453
+ font-size: 1em;
451
454
  font-variant-numeric: tabular-nums;
452
455
  text-align: center;
453
456
  border: 1px solid var(--fillo-border);
@@ -476,7 +479,7 @@
476
479
  display: flex;
477
480
  justify-content: space-between;
478
481
  color: var(--fillo-muted);
479
- font-size: 0.78em;
482
+ font-size: 0.875em;
480
483
  margin-top: 0.35rem;
481
484
  }
482
485
 
@@ -499,8 +502,8 @@
499
502
  border-radius: 999px;
500
503
  background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
501
504
  color: var(--fillo-primary);
502
- font-size: 0.78em;
503
- font-weight: 650;
505
+ font-size: 0.875em;
506
+ font-weight: 600;
504
507
  font-variant-numeric: tabular-nums;
505
508
  }
506
509
  .fillo-ranking-label { flex: 1; font-size: 1em; }
@@ -522,13 +525,13 @@
522
525
 
523
526
  /* ---------- Matrix ---------- */
524
527
  .fillo-matrix-wrap { overflow-x: auto; }
525
- .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
528
+ .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 1em; }
526
529
  :where(.fillo-matrix) th, :where(.fillo-matrix) td {
527
530
  padding: 0.55rem 0.7rem;
528
531
  text-align: center;
529
532
  border-bottom: 1px solid var(--fillo-border);
530
533
  }
531
- .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
534
+ .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.875em; }
532
535
  .fillo-matrix tbody th { text-align: start; font-weight: 500; }
533
536
  .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
534
537
  .fillo-matrix-cell:focus-within {
@@ -542,7 +545,7 @@
542
545
  /* A quiet computed-value line, not a control: no border or input chrome —
543
546
  the slightly heavier tabular number is the only emphasis. */
544
547
  .fillo-calculated-value {
545
- font-size: 1.05em;
548
+ font-size: 1em;
546
549
  font-weight: 600;
547
550
  font-variant-numeric: tabular-nums;
548
551
  color: var(--fillo-text);
@@ -571,7 +574,7 @@
571
574
  display: grid;
572
575
  place-items: center;
573
576
  color: var(--fillo-muted);
574
- font-size: 0.85em;
577
+ font-size: 0.875em;
575
578
  pointer-events: none;
576
579
  }
577
580
  .fillo-signature-clear {
@@ -579,7 +582,7 @@
579
582
  top: 0.4rem;
580
583
  inset-inline-end: 0.4rem;
581
584
  font: inherit;
582
- font-size: 0.75em;
585
+ font-size: 0.875em;
583
586
  border: 1px solid var(--fillo-border);
584
587
  border-radius: calc(var(--fillo-radius) * 0.6);
585
588
  background: var(--fillo-control-bg);
@@ -598,7 +601,7 @@
598
601
  }
599
602
  .fillo-signature-type-label {
600
603
  color: var(--fillo-muted);
601
- font-size: 0.8em;
604
+ font-size: 0.875em;
602
605
  }
603
606
  .fillo-signature-type-input {
604
607
  margin-top: 0;
@@ -638,8 +641,8 @@
638
641
  outline: none;
639
642
  }
640
643
  .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
641
- .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
642
- .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
644
+ .fillo-dropzone-title { font-weight: 500; font-size: 1em; }
645
+ .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.875em; }
643
646
 
644
647
  .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
645
648
  .fillo-file {
@@ -650,7 +653,7 @@
650
653
  border: 1px solid var(--fillo-border);
651
654
  border-radius: var(--fillo-radius);
652
655
  padding: 0.625rem 0.75rem;
653
- font-size: 0.88em;
656
+ font-size: 1em;
654
657
  background: var(--fillo-control-bg);
655
658
  box-sizing: border-box;
656
659
  min-width: 0;
@@ -710,7 +713,7 @@
710
713
  }
711
714
  .fillo-file-error {
712
715
  color: var(--fillo-error);
713
- font-size: 0.93em;
716
+ font-size: 0.875em;
714
717
  line-height: 1.35;
715
718
  overflow-wrap: anywhere;
716
719
  }
@@ -745,7 +748,7 @@
745
748
  cursor: pointer;
746
749
  color: var(--fillo-primary);
747
750
  font: inherit;
748
- font-weight: 550;
751
+ font-weight: 500;
749
752
  padding: 0 0.5rem;
750
753
  }
751
754
  .fillo-file-retry:hover { text-decoration: underline; }
@@ -765,7 +768,7 @@
765
768
  }
766
769
 
767
770
  /* ---------- Content blocks ---------- */
768
- .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
771
+ .fillo-heading { font-size: 1.125em; font-weight: 600; margin: 0.5rem 0 0; }
769
772
  .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
770
773
  .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
771
774
 
@@ -773,7 +776,7 @@
773
776
  .fillo-footer { display: flex; justify-content: flex-end; gap: 0.6rem; }
774
777
  .fillo-button {
775
778
  font: inherit;
776
- font-weight: 550;
779
+ font-weight: 500;
777
780
  border-radius: var(--fillo-radius);
778
781
  padding: 0.6rem 1.4rem;
779
782
  cursor: pointer;
@@ -839,7 +842,7 @@
839
842
  padding: 2rem 1rem;
840
843
  text-align: center;
841
844
  }
842
- .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
845
+ .fillo-not-open-title { margin: 0; font-size: 1.125em; font-weight: 600; letter-spacing: 0; }
843
846
  .fillo-not-open-body {
844
847
  max-width: 26rem;
845
848
  margin: 0;
@@ -867,7 +870,7 @@
867
870
  border-bottom: 2.5px solid var(--fillo-primary-contrast);
868
871
  transform: translateY(-0.09rem) rotate(-45deg);
869
872
  }
870
- .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
873
+ .fillo-success-title { margin: 0; font-weight: 600; font-size: 1.125em; letter-spacing: 0; }
871
874
  .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
872
875
 
873
876
  /* Honeypot — off-screen, never display:none (bots check that) */
@@ -947,12 +950,12 @@
947
950
  border-radius: var(--fillo-radius);
948
951
  background: #fffbeb;
949
952
  color: #92400e;
950
- font-size: 0.82em;
953
+ font-size: 0.875em;
951
954
  line-height: 1.45;
952
955
  }
953
956
  .fillo-devwarning code {
954
957
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
955
- font-size: 0.92em;
958
+ font-size: 1em;
956
959
  background: #fef3c7;
957
960
  padding: 0.05em 0.3em;
958
961
  border-radius: 4px;
@@ -966,7 +969,7 @@
966
969
  border-radius: 999px;
967
970
  background: #fef3c7;
968
971
  color: #92400e;
969
- font-size: 0.7em;
972
+ font-size: 0.75em;
970
973
  font-weight: 600;
971
974
  letter-spacing: 0.06em;
972
975
  text-transform: uppercase;
@@ -984,7 +987,7 @@
984
987
  border-radius: var(--fillo-radius);
985
988
  background: var(--fillo-control-bg);
986
989
  color: var(--fillo-muted);
987
- font-size: 0.82em;
990
+ font-size: 0.875em;
988
991
  line-height: 1.45;
989
992
  }
990
993
  .fillo-resume-clear {
@@ -1024,7 +1027,7 @@
1024
1027
  .fillo-turnstile-error {
1025
1028
  margin: 0;
1026
1029
  color: var(--fillo-error);
1027
- font-size: 0.82em;
1030
+ font-size: 0.875em;
1028
1031
  line-height: 1.45;
1029
1032
  }
1030
1033
 
@@ -1045,7 +1048,7 @@
1045
1048
  justify-content: space-between;
1046
1049
  gap: 0.5rem;
1047
1050
  }
1048
- .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
1051
+ .fillo-group-instance-title { margin: 0; font-size: 1.125em; font-weight: 600; }
1049
1052
  .fillo-group-add {
1050
1053
  align-self: flex-start;
1051
1054
  font: inherit;
@@ -1133,7 +1136,7 @@
1133
1136
  .fillo-matrix tbody th { padding: 0.55rem 0 0.15rem; }
1134
1137
  .fillo-matrix td { display: flex; align-items: center; gap: 0.5rem; }
1135
1138
  .fillo-matrix td::before { content: attr(data-label);
1136
- flex: 1 1 auto; font-size: 0.85em; }
1139
+ flex: 1 1 auto; font-size: 0.875em; }
1137
1140
  /* Deviates from the spec's literal ".fillo-matrix .fillo-matrix-cell"
1138
1141
  text (two bare fillo-* classes, no :where()) — that fails this file's
1139
1142
  own specificity lint (styles-lint.test.mjs: "wrap qualifiers in
package/dist/styles.unlayered.css CHANGED
@@ -93,22 +93,25 @@
93
93
  }
94
94
 
95
95
  .fillo-header { display: flex; flex-direction: column; gap: 0.5rem; }
96
- .fillo-title { font-size: 1.6em; font-weight: 650; letter-spacing: 0; margin: 0; }
96
+ /* Text roles: title 1.5em, heading 1.125em, body 1em, helper 0.875em,
97
+ metadata 0.75em. Nested helper text inherits its container size.
98
+ Glyphs used as icons (stars, flags, carets) have independent sizes. */
99
+ .fillo-title { font-size: 1.5em; font-weight: 600; letter-spacing: 0; margin: 0; }
97
100
  .fillo-form-description { color: var(--fillo-muted); margin: 0; line-height: 1.55; }
98
- .fillo-page-title { font-size: 1.2em; font-weight: 600; margin: 0; }
101
+ .fillo-page-title { font-size: 1.125em; font-weight: 600; margin: 0; }
99
102
 
100
103
  .fillo-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
101
104
 
102
105
  /* ---------- Field chrome ---------- */
103
106
  .fillo-field { display: flex; flex-direction: column; gap: 0.45rem; }
104
- .fillo-label { font-weight: 550; font-size: 0.95em; }
107
+ .fillo-label { font-weight: 500; font-size: 1em; }
105
108
  :where(.fillo-field--error) .fillo-label { color: var(--fillo-error); }
106
109
  /* Fillo marks the few optional fields rather than starring the many required
107
110
  ones — so a clean label reads as required by default. */
108
- .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.85em; }
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; }
111
+ .fillo-optional { color: var(--fillo-muted); font-weight: 400; font-size: 0.875em; }
112
+ .fillo-description { color: var(--fillo-muted); font-size: 0.875em; margin: 0; line-height: 1.5; }
113
+ .fillo-error { color: var(--fillo-error); font-size: 0.875em; font-weight: 500; line-height: 1.4; margin: 0; }
114
+ .fillo-submit-error { color: var(--fillo-error); font-size: 0.875em; font-weight: 500; margin: 0; }
112
115
 
113
116
  /* ---------- Inputs ---------- */
114
117
  .fillo-input {
@@ -326,7 +329,7 @@
326
329
  gap: 0.55rem;
327
330
  }
328
331
  :where(.fillo-option--with-other) .fillo-option-label {
329
- font-weight: 550;
332
+ font-weight: 500;
330
333
  }
331
334
 
332
335
  /* ---------- Toggle checkbox ---------- */
@@ -447,7 +450,7 @@
447
450
  min-width: 0;
448
451
  padding: 0.5rem 0.15rem;
449
452
  font: inherit;
450
- font-size: 0.92em;
453
+ font-size: 1em;
451
454
  font-variant-numeric: tabular-nums;
452
455
  text-align: center;
453
456
  border: 1px solid var(--fillo-border);
@@ -476,7 +479,7 @@
476
479
  display: flex;
477
480
  justify-content: space-between;
478
481
  color: var(--fillo-muted);
479
- font-size: 0.78em;
482
+ font-size: 0.875em;
480
483
  margin-top: 0.35rem;
481
484
  }
482
485
 
@@ -499,8 +502,8 @@
499
502
  border-radius: 999px;
500
503
  background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
501
504
  color: var(--fillo-primary);
502
- font-size: 0.78em;
503
- font-weight: 650;
505
+ font-size: 0.875em;
506
+ font-weight: 600;
504
507
  font-variant-numeric: tabular-nums;
505
508
  }
506
509
  .fillo-ranking-label { flex: 1; font-size: 1em; }
@@ -522,13 +525,13 @@
522
525
 
523
526
  /* ---------- Matrix ---------- */
524
527
  .fillo-matrix-wrap { overflow-x: auto; }
525
- .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9em; }
528
+ .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 1em; }
526
529
  :where(.fillo-matrix) th, :where(.fillo-matrix) td {
527
530
  padding: 0.55rem 0.7rem;
528
531
  text-align: center;
529
532
  border-bottom: 1px solid var(--fillo-border);
530
533
  }
531
- .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.89em; }
534
+ .fillo-matrix thead th { color: var(--fillo-muted); font-weight: 500; font-size: 0.875em; }
532
535
  .fillo-matrix tbody th { text-align: start; font-weight: 500; }
533
536
  .fillo-matrix tbody tr:last-child th, .fillo-matrix tbody tr:last-child td { border-bottom: none; }
534
537
  .fillo-matrix-cell:focus-within {
@@ -542,7 +545,7 @@
542
545
  /* A quiet computed-value line, not a control: no border or input chrome —
543
546
  the slightly heavier tabular number is the only emphasis. */
544
547
  .fillo-calculated-value {
545
- font-size: 1.05em;
548
+ font-size: 1em;
546
549
  font-weight: 600;
547
550
  font-variant-numeric: tabular-nums;
548
551
  color: var(--fillo-text);
@@ -571,7 +574,7 @@
571
574
  display: grid;
572
575
  place-items: center;
573
576
  color: var(--fillo-muted);
574
- font-size: 0.85em;
577
+ font-size: 0.875em;
575
578
  pointer-events: none;
576
579
  }
577
580
  .fillo-signature-clear {
@@ -579,7 +582,7 @@
579
582
  top: 0.4rem;
580
583
  inset-inline-end: 0.4rem;
581
584
  font: inherit;
582
- font-size: 0.75em;
585
+ font-size: 0.875em;
583
586
  border: 1px solid var(--fillo-border);
584
587
  border-radius: calc(var(--fillo-radius) * 0.6);
585
588
  background: var(--fillo-control-bg);
@@ -598,7 +601,7 @@
598
601
  }
599
602
  .fillo-signature-type-label {
600
603
  color: var(--fillo-muted);
601
- font-size: 0.8em;
604
+ font-size: 0.875em;
602
605
  }
603
606
  .fillo-signature-type-input {
604
607
  margin-top: 0;
@@ -638,8 +641,8 @@
638
641
  outline: none;
639
642
  }
640
643
  .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
641
- .fillo-dropzone-title { font-weight: 550; font-size: 0.95em; }
642
- .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82em; }
644
+ .fillo-dropzone-title { font-weight: 500; font-size: 1em; }
645
+ .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.875em; }
643
646
 
644
647
  .fillo-files { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
645
648
  .fillo-file {
@@ -650,7 +653,7 @@
650
653
  border: 1px solid var(--fillo-border);
651
654
  border-radius: var(--fillo-radius);
652
655
  padding: 0.625rem 0.75rem;
653
- font-size: 0.88em;
656
+ font-size: 1em;
654
657
  background: var(--fillo-control-bg);
655
658
  box-sizing: border-box;
656
659
  min-width: 0;
@@ -710,7 +713,7 @@
710
713
  }
711
714
  .fillo-file-error {
712
715
  color: var(--fillo-error);
713
- font-size: 0.93em;
716
+ font-size: 0.875em;
714
717
  line-height: 1.35;
715
718
  overflow-wrap: anywhere;
716
719
  }
@@ -745,7 +748,7 @@
745
748
  cursor: pointer;
746
749
  color: var(--fillo-primary);
747
750
  font: inherit;
748
- font-weight: 550;
751
+ font-weight: 500;
749
752
  padding: 0 0.5rem;
750
753
  }
751
754
  .fillo-file-retry:hover { text-decoration: underline; }
@@ -765,7 +768,7 @@
765
768
  }
766
769
 
767
770
  /* ---------- Content blocks ---------- */
768
- .fillo-heading { font-size: 1.15em; font-weight: 600; margin: 0.5rem 0 0; }
771
+ .fillo-heading { font-size: 1.125em; font-weight: 600; margin: 0.5rem 0 0; }
769
772
  .fillo-paragraph { color: var(--fillo-muted); line-height: 1.6; margin: 0; }
770
773
  .fillo-divider { border: none; border-top: 1px solid var(--fillo-border); margin: 0.25rem 0; }
771
774
 
@@ -773,7 +776,7 @@
773
776
  .fillo-footer { display: flex; justify-content: flex-end; gap: 0.6rem; }
774
777
  .fillo-button {
775
778
  font: inherit;
776
- font-weight: 550;
779
+ font-weight: 500;
777
780
  border-radius: var(--fillo-radius);
778
781
  padding: 0.6rem 1.4rem;
779
782
  cursor: pointer;
@@ -839,7 +842,7 @@
839
842
  padding: 2rem 1rem;
840
843
  text-align: center;
841
844
  }
842
- .fillo-not-open-title { margin: 0; font-size: 1.05em; font-weight: 650; letter-spacing: 0; }
845
+ .fillo-not-open-title { margin: 0; font-size: 1.125em; font-weight: 600; letter-spacing: 0; }
843
846
  .fillo-not-open-body {
844
847
  max-width: 26rem;
845
848
  margin: 0;
@@ -867,7 +870,7 @@
867
870
  border-bottom: 2.5px solid var(--fillo-primary-contrast);
868
871
  transform: translateY(-0.09rem) rotate(-45deg);
869
872
  }
870
- .fillo-success-title { margin: 0; font-size: 1.05em; letter-spacing: 0; }
873
+ .fillo-success-title { margin: 0; font-weight: 600; font-size: 1.125em; letter-spacing: 0; }
871
874
  .fillo-success-message { margin: 0; font-size: 0.875em; color: var(--fillo-muted); }
872
875
 
873
876
  /* Honeypot — off-screen, never display:none (bots check that) */
@@ -947,12 +950,12 @@
947
950
  border-radius: var(--fillo-radius);
948
951
  background: #fffbeb;
949
952
  color: #92400e;
950
- font-size: 0.82em;
953
+ font-size: 0.875em;
951
954
  line-height: 1.45;
952
955
  }
953
956
  .fillo-devwarning code {
954
957
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
955
- font-size: 0.92em;
958
+ font-size: 1em;
956
959
  background: #fef3c7;
957
960
  padding: 0.05em 0.3em;
958
961
  border-radius: 4px;
@@ -966,7 +969,7 @@
966
969
  border-radius: 999px;
967
970
  background: #fef3c7;
968
971
  color: #92400e;
969
- font-size: 0.7em;
972
+ font-size: 0.75em;
970
973
  font-weight: 600;
971
974
  letter-spacing: 0.06em;
972
975
  text-transform: uppercase;
@@ -984,7 +987,7 @@
984
987
  border-radius: var(--fillo-radius);
985
988
  background: var(--fillo-control-bg);
986
989
  color: var(--fillo-muted);
987
- font-size: 0.82em;
990
+ font-size: 0.875em;
988
991
  line-height: 1.45;
989
992
  }
990
993
  .fillo-resume-clear {
@@ -1024,7 +1027,7 @@
1024
1027
  .fillo-turnstile-error {
1025
1028
  margin: 0;
1026
1029
  color: var(--fillo-error);
1027
- font-size: 0.82em;
1030
+ font-size: 0.875em;
1028
1031
  line-height: 1.45;
1029
1032
  }
1030
1033
 
@@ -1045,7 +1048,7 @@
1045
1048
  justify-content: space-between;
1046
1049
  gap: 0.5rem;
1047
1050
  }
1048
- .fillo-group-instance-title { margin: 0; font-size: 0.95em; font-weight: 600; }
1051
+ .fillo-group-instance-title { margin: 0; font-size: 1.125em; font-weight: 600; }
1049
1052
  .fillo-group-add {
1050
1053
  align-self: flex-start;
1051
1054
  font: inherit;
@@ -1133,7 +1136,7 @@
1133
1136
  .fillo-matrix tbody th { padding: 0.55rem 0 0.15rem; }
1134
1137
  .fillo-matrix td { display: flex; align-items: center; gap: 0.5rem; }
1135
1138
  .fillo-matrix td::before { content: attr(data-label);
1136
- flex: 1 1 auto; font-size: 0.85em; }
1139
+ flex: 1 1 auto; font-size: 0.875em; }
1137
1140
  /* Deviates from the spec's literal ".fillo-matrix .fillo-matrix-cell"
1138
1141
  text (two bare fillo-* classes, no :where()) — that fails this file's
1139
1142
  own specificity lint (styles-lint.test.mjs: "wrap qualifiers in
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefillo/dom",
3
- "version": "0.19.0",
3
+ "version": "0.21.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.19.0"
48
+ "@usefillo/core": "^0.21.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "axe-core": "^4.10.0",