@utrecht/component-library-css 5.0.0 → 5.2.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 (4) hide show
  1. package/dist/html.css +15 -12
  2. package/dist/index.css +103 -23
  3. package/dist/prince-xml.css +193 -261
  4. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -285,7 +285,7 @@
285
285
  color: var(--_utrecht-button-color);
286
286
  cursor: var(--utrecht-action-activate-cursor, revert);
287
287
  display: inline-flex;
288
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
288
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
289
289
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
290
290
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
291
291
  gap: var(--utrecht-button-icon-gap);
@@ -466,12 +466,14 @@
466
466
  font-size: var(--utrecht-form-label-font-size);
467
467
  font-weight: var(--utrecht-form-label-font-weight);
468
468
  }
469
- .utrecht-html input[type=checkbox i] ~ label {
469
+ .utrecht-html input[type=checkbox i] ~ label,
470
+ .utrecht-html label:has(input[type=checkbox i]) {
470
471
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
471
472
  cursor: var(--utrecht-action-activate-cursor, revert);
472
473
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
473
474
  }
474
- .utrecht-html input[type=radio i] ~ label {
475
+ .utrecht-html input[type=radio i] ~ label,
476
+ .utrecht-html label:has(input[type=radio i]) {
475
477
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
476
478
  cursor: var(--utrecht-action-activate-cursor, revert);
477
479
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
@@ -867,6 +869,7 @@
867
869
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
868
870
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
869
871
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
872
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
870
873
  inline-size: 100%;
871
874
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
872
875
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
@@ -947,7 +950,7 @@
947
950
  .utrecht-html thead {
948
951
  --_utrecht-table-header-cell-vertical-align: bottom;
949
952
  --_utrecht-table-header-cell-z-index: 8;
950
- background-color: var(--utrecht-table-header-background-color);
953
+ background-color: var(--utrecht-table-header-background-color, transparent);
951
954
  break-inside: avoid;
952
955
  color: var(--utrecht-table-header-color);
953
956
  font-weight: var(--utrecht-table-header-font-weight);
@@ -1013,26 +1016,26 @@
1013
1016
  font-variant-numeric: lining-nums tabular-nums;
1014
1017
  }
1015
1018
  .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
1016
- background-color: var(--utrecht-table-row-alternate-even-background-color);
1019
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
1017
1020
  color: var(--utrecht-table-row-alternate-even-color);
1018
1021
  }
1019
1022
  .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
1020
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
1023
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
1021
1024
  color: var(--utrecht-table-row-alternate-odd-color);
1022
1025
  }
1023
1026
  .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
1024
- background-color: var(--utrecht-table-row-alternate-even-background-color);
1027
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
1025
1028
  color: var(--utrecht-table-row-alternate-even-color);
1026
1029
  }
1027
1030
  .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
1028
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
1031
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
1029
1032
  color: var(--utrecht-table-row-alternate-odd-color);
1030
1033
  }
1031
1034
  .utrecht-html textarea {
1032
1035
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1033
1036
  block-size: initial;
1034
1037
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1035
- border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1038
+ border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1036
1039
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
1037
1040
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
1038
1041
  border-style: solid;
@@ -1040,7 +1043,7 @@
1040
1043
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
1041
1044
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
1042
1045
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
1043
- font-weight: initial;
1046
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
1044
1047
  inline-size: 100%;
1045
1048
  line-height: var(--utrecht-textarea-line-height, initial);
1046
1049
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -1079,7 +1082,7 @@
1079
1082
  );
1080
1083
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1081
1084
  border-width: var(--_utrecht-textarea-border-width);
1082
- border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
1085
+ border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
1083
1086
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1084
1087
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1085
1088
  }
@@ -1131,7 +1134,7 @@
1131
1134
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
1132
1135
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1133
1136
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
1134
- font-weight: initial;
1137
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
1135
1138
  inline-size: 100%;
1136
1139
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
1137
1140
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
package/dist/index.css CHANGED
@@ -80,14 +80,14 @@
80
80
  */
81
81
  @charset "UTF-8";
82
82
  .utrecht-accordion {
83
+ display: grid;
83
84
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
84
85
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
86
+ row-gap: var(--utrecht-accordion-row-gap);
85
87
  }
86
88
 
87
89
  .utrecht-accordion__section {
88
90
  break-inside: avoid;
89
- margin-block-end: var(--utrecht-accordion-section-margin-block-end);
90
- margin-block-start: var(--utrecht-accordion-section-margin-block-start);
91
91
  }
92
92
 
93
93
  .utrecht-accordion__button {
@@ -159,7 +159,8 @@
159
159
  }
160
160
 
161
161
  .utrecht-accordion__header {
162
- --utrecht-space-around: 0;
162
+ margin-block-end: 0;
163
+ margin-block-start: 0;
163
164
  }
164
165
  .utrecht-alert-dialog:not(dialog:not([open])) {
165
166
  --utrecht-alert-dialog-margin-block-start: auto;
@@ -414,9 +415,10 @@
414
415
  }
415
416
  }
416
417
  .utrecht-badge-list {
418
+ column-gap: var(--utrecht-badge-list-column-gap);
417
419
  display: flex;
418
420
  flex-wrap: wrap;
419
- gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
421
+ row-gap: var(--utrecht-badge-list-row-gap);
420
422
  }
421
423
  .utrecht-badge-status {
422
424
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
@@ -532,6 +534,14 @@
532
534
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
533
535
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
534
536
  --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-text-decoration);
537
+ --utrecht-link-active-color: var(
538
+ --utrecht-breadcrumb-nav-link-active-color,
539
+ var(--utrecht-breadcrumb-nav-link-color)
540
+ );
541
+ --utrecht-link-active-text-decoration: var(
542
+ --utrecht-breadcrumb-nav-link-focus-text-decoration,
543
+ var(--utrecht-breadcrumb-nav-link-text-decoration)
544
+ );
535
545
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
536
546
  --utrecht-link-focus-text-decoration: var(
537
547
  --utrecht-breadcrumb-nav-link-focus-text-decoration,
@@ -548,6 +558,7 @@
548
558
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
549
559
  font-family: var(--utrecht-document-font-family, inherit);
550
560
  font-size: var(--utrecht-breadcrumb-nav-font-size);
561
+ line-height: var(--utrecht-breadcrumb-nav-line-height);
551
562
  text-transform: var(--utrecht-document-text-transform, inherit);
552
563
  }
553
564
 
@@ -918,7 +929,7 @@
918
929
  color: var(--_utrecht-button-color);
919
930
  cursor: var(--utrecht-action-activate-cursor, revert);
920
931
  display: inline-flex;
921
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
932
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
922
933
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
923
934
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
924
935
  gap: var(--utrecht-button-icon-gap);
@@ -1296,7 +1307,7 @@
1296
1307
  color: var(--_utrecht-button-color);
1297
1308
  cursor: var(--utrecht-action-activate-cursor, revert);
1298
1309
  display: inline-flex;
1299
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
1310
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1300
1311
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1301
1312
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1302
1313
  gap: var(--utrecht-button-icon-gap);
@@ -2266,7 +2277,7 @@
2266
2277
  cursor: var(--utrecht-action-busy-cursor, busy);
2267
2278
  }
2268
2279
  .utrecht-digid-button {
2269
- --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
2280
+ --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 44px);
2270
2281
  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
2271
2282
  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
2272
2283
  block-size: var(--utrecht-digid-button-block-size, 50px);
@@ -2726,7 +2737,7 @@
2726
2737
  }
2727
2738
 
2728
2739
  .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
2729
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
2740
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
2730
2741
  color: var(--utrecht-form-toggle-disabled-color, black);
2731
2742
  }
2732
2743
 
@@ -3234,7 +3245,8 @@
3234
3245
  cursor: default;
3235
3246
  display: flex;
3236
3247
  flex-direction: column;
3237
- inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-input-max-inline-size));
3248
+ font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3249
+ inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3238
3250
  max-block-size: var(--utrecht-listbox-max-block-size);
3239
3251
  min-block-size: 1em;
3240
3252
  overflow-block: auto;
@@ -3876,6 +3888,35 @@
3876
3888
  box-shadow: none;
3877
3889
  outline-style: revert;
3878
3890
  }
3891
+ .utrecht-number-badge {
3892
+ background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3893
+ border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
3894
+ color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
3895
+ display: inline-block;
3896
+ font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
3897
+ font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size));
3898
+ font-style: var(--utrecht-number-badge-font-style, normal);
3899
+ font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold));
3900
+ line-height: 1;
3901
+ max-block-size: max-content;
3902
+ max-inline-size: max-content;
3903
+ min-block-size: var(--utrecht-number-badge-min-block-size, var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)));
3904
+ min-inline-size: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em));
3905
+ padding-block-end: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3906
+ padding-block-start: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3907
+ padding-inline-end: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3908
+ padding-inline-start: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3909
+ text-align: center;
3910
+ text-decoration: none;
3911
+ white-space: nowrap;
3912
+ }
3913
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
3914
+ .utrecht-number-badge {
3915
+ border-color: currentColor;
3916
+ border-style: solid;
3917
+ border-width: 1px;
3918
+ }
3919
+ }
3879
3920
  .utrecht-number-data {
3880
3921
  font-variant-numeric: lining-nums tabular-nums;
3881
3922
  }
@@ -6164,7 +6205,7 @@
6164
6205
  }
6165
6206
  .utrecht-search-bar {
6166
6207
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6167
- --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
6208
+ --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
6168
6209
  --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
6169
6210
  --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
6170
6211
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
@@ -6189,7 +6230,7 @@
6189
6230
  border-color: var(--utrecht-search-bar-dropdown-border-color);
6190
6231
  border-style: solid;
6191
6232
  border-width: var(--utrecht-search-bar-dropdown-border-width);
6192
- inline-size: var(--utrecht-search-bar-dropdown-inline-size, var(--utrecht-form-input-max-inline-size));
6233
+ inline-size: var(--utrecht-search-bar-dropdown-inline-size, var(--utrecht-form-control-max-inline-size));
6193
6234
  max-block-size: var(--utrecht-search-bar-dropdown-max-block-size);
6194
6235
  overflow: auto;
6195
6236
  padding-block-end: var(--utrecht-search-bar-dropdown-padding-block-end);
@@ -6237,6 +6278,7 @@
6237
6278
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
6238
6279
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
6239
6280
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
6281
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
6240
6282
  inline-size: 100%;
6241
6283
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6242
6284
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
@@ -6415,6 +6457,22 @@
6415
6457
  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-warning-border-width);
6416
6458
  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
6417
6459
  }
6460
+
6461
+ .utrecht-spotlight-section--error {
6462
+ --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-error-color);
6463
+ --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-error-background-color);
6464
+ --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-error-border-color);
6465
+ --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-error-border-width);
6466
+ --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-error-color);
6467
+ }
6468
+
6469
+ .utrecht-spotlight-section--ok {
6470
+ --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-ok-color);
6471
+ --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-ok-background-color);
6472
+ --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-ok-border-color);
6473
+ --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-ok-border-width);
6474
+ --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-ok-color);
6475
+ }
6418
6476
  .utrecht-surface {
6419
6477
  background-color: var(--utrecht-surface-background-color, inherit);
6420
6478
  color: var(--utrecht-surface-color, inherit);
@@ -6483,7 +6541,7 @@
6483
6541
  .utrecht-table__header {
6484
6542
  --_utrecht-table-header-cell-vertical-align: bottom;
6485
6543
  --_utrecht-table-header-cell-z-index: 8;
6486
- background-color: var(--utrecht-table-header-background-color);
6544
+ background-color: var(--utrecht-table-header-background-color, transparent);
6487
6545
  break-inside: avoid;
6488
6546
  color: var(--utrecht-table-header-color);
6489
6547
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6492,7 +6550,7 @@
6492
6550
  }
6493
6551
 
6494
6552
  .utrecht-table__header--sticky th {
6495
- background-color: var(--utrecht-table-header-sticky-background-color);
6553
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6496
6554
  color: var(--utrecht-table-header-sticky-color);
6497
6555
  inset-block-start: 0;
6498
6556
  position: sticky;
@@ -6509,7 +6567,7 @@
6509
6567
  }
6510
6568
 
6511
6569
  .utrecht-table__footer--sticky {
6512
- background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color));
6570
+ background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
6513
6571
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6514
6572
  inset-block-end: 0;
6515
6573
  position: sticky;
@@ -6644,12 +6702,12 @@
6644
6702
  }
6645
6703
 
6646
6704
  .utrecht-table__row--alternate-odd {
6647
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6705
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6648
6706
  color: var(--utrecht-table-row-alternate-odd-color);
6649
6707
  }
6650
6708
 
6651
6709
  .utrecht-table__row--alternate-even {
6652
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6710
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6653
6711
  color: var(--utrecht-table-row-alternate-even-color);
6654
6712
  }
6655
6713
 
@@ -6709,11 +6767,11 @@
6709
6767
  }
6710
6768
 
6711
6769
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
6712
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6770
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6713
6771
  color: var(--utrecht-table-row-alternate-odd-color);
6714
6772
  }
6715
6773
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
6716
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6774
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6717
6775
  color: var(--utrecht-table-row-alternate-even-color);
6718
6776
  }
6719
6777
 
@@ -6728,11 +6786,33 @@
6728
6786
  background-color: papayawhip;
6729
6787
  color: maroon;
6730
6788
  }
6789
+ .utrecht-table-of-contents {
6790
+ page-break-inside: avoid;
6791
+ }
6792
+
6793
+ .utrecht-table-of-contents__list {
6794
+ list-style-type: none;
6795
+ padding-inline-start: 0;
6796
+ page-break-inside: avoid;
6797
+ }
6798
+
6799
+ .utrecht-table-of-contents__list-item {
6800
+ margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
6801
+ margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
6802
+ }
6803
+
6804
+ .utrecht-table-of-contents__list-item::before {
6805
+ content: "";
6806
+ }
6807
+
6808
+ .utrecht-table-of-contents__list-item-label {
6809
+ font-variant-numeric: lining-nums tabular-nums;
6810
+ }
6731
6811
  .utrecht-textarea {
6732
6812
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6733
6813
  block-size: initial;
6734
6814
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
6735
- border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6815
+ border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6736
6816
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6737
6817
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6738
6818
  border-style: solid;
@@ -6740,7 +6820,7 @@
6740
6820
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6741
6821
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6742
6822
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6743
- font-weight: initial;
6823
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6744
6824
  inline-size: 100%;
6745
6825
  line-height: var(--utrecht-textarea-line-height, initial);
6746
6826
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6764,7 +6844,7 @@
6764
6844
  );
6765
6845
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6766
6846
  border-width: var(--_utrecht-textarea-border-width);
6767
- border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
6847
+ border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
6768
6848
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6769
6849
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6770
6850
  }
@@ -6832,7 +6912,7 @@
6832
6912
  );
6833
6913
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6834
6914
  border-width: var(--_utrecht-textarea-border-width);
6835
- border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
6915
+ border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
6836
6916
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6837
6917
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6838
6918
  }
@@ -6872,7 +6952,7 @@
6872
6952
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6873
6953
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6874
6954
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6875
- font-weight: initial;
6955
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6876
6956
  inline-size: 100%;
6877
6957
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6878
6958
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);