@utrecht/component-library-css 5.0.0 → 5.1.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 +65 -23
  3. package/dist/prince-xml.css +80 -35
  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);
@@ -6483,7 +6525,7 @@
6483
6525
  .utrecht-table__header {
6484
6526
  --_utrecht-table-header-cell-vertical-align: bottom;
6485
6527
  --_utrecht-table-header-cell-z-index: 8;
6486
- background-color: var(--utrecht-table-header-background-color);
6528
+ background-color: var(--utrecht-table-header-background-color, transparent);
6487
6529
  break-inside: avoid;
6488
6530
  color: var(--utrecht-table-header-color);
6489
6531
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6492,7 +6534,7 @@
6492
6534
  }
6493
6535
 
6494
6536
  .utrecht-table__header--sticky th {
6495
- background-color: var(--utrecht-table-header-sticky-background-color);
6537
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6496
6538
  color: var(--utrecht-table-header-sticky-color);
6497
6539
  inset-block-start: 0;
6498
6540
  position: sticky;
@@ -6509,7 +6551,7 @@
6509
6551
  }
6510
6552
 
6511
6553
  .utrecht-table__footer--sticky {
6512
- background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color));
6554
+ background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
6513
6555
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6514
6556
  inset-block-end: 0;
6515
6557
  position: sticky;
@@ -6644,12 +6686,12 @@
6644
6686
  }
6645
6687
 
6646
6688
  .utrecht-table__row--alternate-odd {
6647
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6689
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6648
6690
  color: var(--utrecht-table-row-alternate-odd-color);
6649
6691
  }
6650
6692
 
6651
6693
  .utrecht-table__row--alternate-even {
6652
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6694
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6653
6695
  color: var(--utrecht-table-row-alternate-even-color);
6654
6696
  }
6655
6697
 
@@ -6709,11 +6751,11 @@
6709
6751
  }
6710
6752
 
6711
6753
  .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);
6754
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6713
6755
  color: var(--utrecht-table-row-alternate-odd-color);
6714
6756
  }
6715
6757
  .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);
6758
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6717
6759
  color: var(--utrecht-table-row-alternate-even-color);
6718
6760
  }
6719
6761
 
@@ -6732,7 +6774,7 @@
6732
6774
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6733
6775
  block-size: initial;
6734
6776
  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)));
6777
+ border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6736
6778
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6737
6779
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6738
6780
  border-style: solid;
@@ -6740,7 +6782,7 @@
6740
6782
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6741
6783
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6742
6784
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6743
- font-weight: initial;
6785
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6744
6786
  inline-size: 100%;
6745
6787
  line-height: var(--utrecht-textarea-line-height, initial);
6746
6788
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6764,7 +6806,7 @@
6764
6806
  );
6765
6807
  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
6808
  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)))));
6809
+ 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
6810
  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
6811
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6770
6812
  }
@@ -6832,7 +6874,7 @@
6832
6874
  );
6833
6875
  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
6876
  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)))));
6877
+ 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
6878
  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
6879
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6838
6880
  }
@@ -6872,7 +6914,7 @@
6872
6914
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6873
6915
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6874
6916
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6875
- font-weight: initial;
6917
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6876
6918
  inline-size: 100%;
6877
6919
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6878
6920
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
package/dist/prince-xml.css CHANGED
@@ -79,14 +79,14 @@
79
79
  * Copyright (c) 2021 Gemeente Utrecht
80
80
  */
81
81
  .utrecht-accordion {
82
+ display: grid;
82
83
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
83
84
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
85
+ row-gap: var(--utrecht-accordion-row-gap);
84
86
  }
85
87
 
86
88
  .utrecht-accordion__section {
87
89
  break-inside: avoid;
88
- margin-bottom: var(--utrecht-accordion-section-margin-block-end);
89
- margin-top: var(--utrecht-accordion-section-margin-block-start);
90
90
  }
91
91
 
92
92
  .utrecht-accordion__button {
@@ -158,7 +158,8 @@
158
158
  }
159
159
 
160
160
  .utrecht-accordion__header {
161
- --utrecht-space-around: 0;
161
+ margin-bottom: 0;
162
+ margin-top: 0;
162
163
  }
163
164
  .utrecht-alert-dialog:not(dialog:not([open])) {
164
165
  --utrecht-alert-dialog-margin-block-start: auto;
@@ -413,9 +414,10 @@
413
414
  }
414
415
  }
415
416
  .utrecht-badge-list {
417
+ column-gap: var(--utrecht-badge-list-column-gap);
416
418
  display: flex;
417
419
  flex-wrap: wrap;
418
- gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
420
+ row-gap: var(--utrecht-badge-list-row-gap);
419
421
  }
420
422
  .utrecht-badge-status {
421
423
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
@@ -531,6 +533,14 @@
531
533
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
532
534
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
533
535
  --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-text-decoration);
536
+ --utrecht-link-active-color: var(
537
+ --utrecht-breadcrumb-nav-link-active-color,
538
+ var(--utrecht-breadcrumb-nav-link-color)
539
+ );
540
+ --utrecht-link-active-text-decoration: var(
541
+ --utrecht-breadcrumb-nav-link-focus-text-decoration,
542
+ var(--utrecht-breadcrumb-nav-link-text-decoration)
543
+ );
534
544
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
535
545
  --utrecht-link-focus-text-decoration: var(
536
546
  --utrecht-breadcrumb-nav-link-focus-text-decoration,
@@ -547,6 +557,7 @@
547
557
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
548
558
  font-family: var(--utrecht-document-font-family, inherit);
549
559
  font-size: var(--utrecht-breadcrumb-nav-font-size);
560
+ line-height: var(--utrecht-breadcrumb-nav-line-height);
550
561
  text-transform: var(--utrecht-document-text-transform, inherit);
551
562
  }
552
563
 
@@ -917,7 +928,7 @@
917
928
  color: var(--_utrecht-button-color);
918
929
  cursor: var(--utrecht-action-activate-cursor, revert);
919
930
  display: inline-flex;
920
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
931
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
921
932
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
922
933
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
923
934
  gap: var(--utrecht-button-icon-gap);
@@ -1295,7 +1306,7 @@
1295
1306
  color: var(--_utrecht-button-color);
1296
1307
  cursor: var(--utrecht-action-activate-cursor, revert);
1297
1308
  display: inline-flex;
1298
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
1309
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1299
1310
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1300
1311
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1301
1312
  gap: var(--utrecht-button-icon-gap);
@@ -2276,7 +2287,7 @@
2276
2287
  cursor: var(--utrecht-action-busy-cursor, busy);
2277
2288
  }
2278
2289
  .utrecht-digid-button {
2279
- --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
2290
+ --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 44px);
2280
2291
  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
2281
2292
  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
2282
2293
  height: var(--utrecht-digid-button-block-size, 50px);
@@ -2736,7 +2747,7 @@
2736
2747
  }
2737
2748
 
2738
2749
  .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
2739
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
2750
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
2740
2751
  color: var(--utrecht-form-toggle-disabled-color, black);
2741
2752
  }
2742
2753
 
@@ -3244,7 +3255,8 @@
3244
3255
  cursor: default;
3245
3256
  display: flex;
3246
3257
  flex-direction: column;
3247
- width: var(--utrecht-listbox-inline-size, var(--utrecht-form-input-max-inline-size));
3258
+ font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3259
+ width: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3248
3260
  max-height: var(--utrecht-listbox-max-block-size);
3249
3261
  min-height: 1em;
3250
3262
  overflow-block: auto;
@@ -3886,6 +3898,35 @@
3886
3898
  box-shadow: none;
3887
3899
  outline-style: revert;
3888
3900
  }
3901
+ .utrecht-number-badge {
3902
+ background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3903
+ border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
3904
+ color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
3905
+ display: inline-block;
3906
+ font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
3907
+ font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size));
3908
+ font-style: var(--utrecht-number-badge-font-style, normal);
3909
+ font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold));
3910
+ line-height: 1;
3911
+ max-height: max-content;
3912
+ max-width: max-content;
3913
+ min-height: var(--utrecht-number-badge-min-block-size, var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)));
3914
+ min-width: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em));
3915
+ padding-bottom: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3916
+ padding-top: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3917
+ padding-right: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3918
+ padding-left: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3919
+ text-align: center;
3920
+ text-decoration: none;
3921
+ white-space: nowrap;
3922
+ }
3923
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
3924
+ .utrecht-number-badge {
3925
+ border-color: currentColor;
3926
+ border-style: solid;
3927
+ border-width: 1px;
3928
+ }
3929
+ }
3889
3930
  .utrecht-number-data {
3890
3931
  font-variant-numeric: lining-nums tabular-nums;
3891
3932
  }
@@ -6181,7 +6222,7 @@
6181
6222
  }
6182
6223
  .utrecht-search-bar {
6183
6224
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6184
- --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
6225
+ --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
6185
6226
  --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
6186
6227
  --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
6187
6228
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
@@ -6206,7 +6247,7 @@
6206
6247
  border-color: var(--utrecht-search-bar-dropdown-border-color);
6207
6248
  border-style: solid;
6208
6249
  border-width: var(--utrecht-search-bar-dropdown-border-width);
6209
- width: var(--utrecht-search-bar-dropdown-inline-size, var(--utrecht-form-input-max-inline-size));
6250
+ width: var(--utrecht-search-bar-dropdown-inline-size, var(--utrecht-form-control-max-inline-size));
6210
6251
  max-height: var(--utrecht-search-bar-dropdown-max-block-size);
6211
6252
  overflow: auto;
6212
6253
  padding-bottom: var(--utrecht-search-bar-dropdown-padding-block-end);
@@ -6254,6 +6295,7 @@
6254
6295
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
6255
6296
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
6256
6297
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
6298
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
6257
6299
  width: 100%;
6258
6300
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6259
6301
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -6505,7 +6547,7 @@
6505
6547
  .utrecht-table__header {
6506
6548
  --_utrecht-table-header-cell-vertical-align: bottom;
6507
6549
  --_utrecht-table-header-cell-z-index: 8;
6508
- background-color: var(--utrecht-table-header-background-color);
6550
+ background-color: var(--utrecht-table-header-background-color, transparent);
6509
6551
  break-inside: avoid;
6510
6552
  color: var(--utrecht-table-header-color);
6511
6553
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6514,7 +6556,7 @@
6514
6556
  }
6515
6557
 
6516
6558
  .utrecht-table__header--sticky th {
6517
- background-color: var(--utrecht-table-header-sticky-background-color);
6559
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6518
6560
  color: var(--utrecht-table-header-sticky-color);
6519
6561
  top: 0;
6520
6562
  position: sticky;
@@ -6531,7 +6573,7 @@
6531
6573
  }
6532
6574
 
6533
6575
  .utrecht-table__footer--sticky {
6534
- background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color));
6576
+ background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
6535
6577
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6536
6578
  bottom: 0;
6537
6579
  position: sticky;
@@ -6666,12 +6708,12 @@
6666
6708
  }
6667
6709
 
6668
6710
  .utrecht-table__row--alternate-odd {
6669
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6711
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6670
6712
  color: var(--utrecht-table-row-alternate-odd-color);
6671
6713
  }
6672
6714
 
6673
6715
  .utrecht-table__row--alternate-even {
6674
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6716
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6675
6717
  color: var(--utrecht-table-row-alternate-even-color);
6676
6718
  }
6677
6719
 
@@ -6731,11 +6773,11 @@
6731
6773
  }
6732
6774
 
6733
6775
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
6734
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6776
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6735
6777
  color: var(--utrecht-table-row-alternate-odd-color);
6736
6778
  }
6737
6779
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
6738
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6780
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6739
6781
  color: var(--utrecht-table-row-alternate-even-color);
6740
6782
  }
6741
6783
 
@@ -6754,7 +6796,7 @@
6754
6796
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6755
6797
  height: initial;
6756
6798
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
6757
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6799
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6758
6800
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6759
6801
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6760
6802
  border-style: solid;
@@ -6762,7 +6804,7 @@
6762
6804
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6763
6805
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6764
6806
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6765
- font-weight: initial;
6807
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6766
6808
  width: 100%;
6767
6809
  line-height: var(--utrecht-textarea-line-height, initial);
6768
6810
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6795,7 +6837,7 @@
6795
6837
  );
6796
6838
  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))));
6797
6839
  border-width: var(--_utrecht-textarea-border-width);
6798
- border-bottom-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)))));
6840
+ border-bottom-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)))));
6799
6841
  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))));
6800
6842
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6801
6843
  }
@@ -6863,7 +6905,7 @@
6863
6905
  );
6864
6906
  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))));
6865
6907
  border-width: var(--_utrecht-textarea-border-width);
6866
- border-bottom-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)))));
6908
+ border-bottom-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)))));
6867
6909
  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))));
6868
6910
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6869
6911
  }
@@ -6903,7 +6945,7 @@
6903
6945
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6904
6946
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6905
6947
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6906
- font-weight: initial;
6948
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6907
6949
  width: 100%;
6908
6950
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6909
6951
  min-height: var(--utrecht-pointer-target-min-size, 44px);
@@ -7443,7 +7485,7 @@
7443
7485
  color: var(--_utrecht-button-color);
7444
7486
  cursor: var(--utrecht-action-activate-cursor, revert);
7445
7487
  display: inline-flex;
7446
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
7488
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
7447
7489
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
7448
7490
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
7449
7491
  gap: var(--utrecht-button-icon-gap);
@@ -7631,12 +7673,14 @@
7631
7673
  font-size: var(--utrecht-form-label-font-size);
7632
7674
  font-weight: var(--utrecht-form-label-font-weight);
7633
7675
  }
7634
- .utrecht-html input[type=checkbox i] ~ label {
7676
+ .utrecht-html input[type=checkbox i] ~ label,
7677
+ .utrecht-html label:has(input[type=checkbox i]) {
7635
7678
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7636
7679
  cursor: var(--utrecht-action-activate-cursor, revert);
7637
7680
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
7638
7681
  }
7639
- .utrecht-html input[type=radio i] ~ label {
7682
+ .utrecht-html input[type=radio i] ~ label,
7683
+ .utrecht-html label:has(input[type=radio i]) {
7640
7684
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7641
7685
  cursor: var(--utrecht-action-activate-cursor, revert);
7642
7686
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
@@ -8039,6 +8083,7 @@
8039
8083
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
8040
8084
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
8041
8085
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
8086
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
8042
8087
  width: 100%;
8043
8088
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
8044
8089
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -8124,7 +8169,7 @@
8124
8169
  .utrecht-html thead {
8125
8170
  --_utrecht-table-header-cell-vertical-align: bottom;
8126
8171
  --_utrecht-table-header-cell-z-index: 8;
8127
- background-color: var(--utrecht-table-header-background-color);
8172
+ background-color: var(--utrecht-table-header-background-color, transparent);
8128
8173
  break-inside: avoid;
8129
8174
  color: var(--utrecht-table-header-color);
8130
8175
  font-weight: var(--utrecht-table-header-font-weight);
@@ -8190,26 +8235,26 @@
8190
8235
  font-variant-numeric: lining-nums tabular-nums;
8191
8236
  }
8192
8237
  .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
8193
- background-color: var(--utrecht-table-row-alternate-even-background-color);
8238
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8194
8239
  color: var(--utrecht-table-row-alternate-even-color);
8195
8240
  }
8196
8241
  .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
8197
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
8242
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8198
8243
  color: var(--utrecht-table-row-alternate-odd-color);
8199
8244
  }
8200
8245
  .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
8201
- background-color: var(--utrecht-table-row-alternate-even-background-color);
8246
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8202
8247
  color: var(--utrecht-table-row-alternate-even-color);
8203
8248
  }
8204
8249
  .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
8205
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
8250
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8206
8251
  color: var(--utrecht-table-row-alternate-odd-color);
8207
8252
  }
8208
8253
  .utrecht-html textarea {
8209
8254
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8210
8255
  height: initial;
8211
8256
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
8212
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8257
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8213
8258
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
8214
8259
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
8215
8260
  border-style: solid;
@@ -8217,7 +8262,7 @@
8217
8262
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
8218
8263
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
8219
8264
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
8220
- font-weight: initial;
8265
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
8221
8266
  width: 100%;
8222
8267
  line-height: var(--utrecht-textarea-line-height, initial);
8223
8268
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -8265,7 +8310,7 @@
8265
8310
  );
8266
8311
  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))));
8267
8312
  border-width: var(--_utrecht-textarea-border-width);
8268
- border-bottom-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)))));
8313
+ border-bottom-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)))));
8269
8314
  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))));
8270
8315
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8271
8316
  }
@@ -8317,7 +8362,7 @@
8317
8362
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8318
8363
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8319
8364
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8320
- font-weight: initial;
8365
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8321
8366
  width: 100%;
8322
8367
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
8323
8368
  min-height: var(--utrecht-pointer-target-min-size, 44px);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "5.0.0",
2
+ "version": "5.1.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -26,7 +26,7 @@
26
26
  "rimraf": "5.0.7",
27
27
  "rollup": "4.18.0",
28
28
  "rollup-plugin-postcss": "4.0.2",
29
- "@utrecht/components": "7.0.0",
29
+ "@utrecht/components": "7.1.0",
30
30
  "@utrecht/html-content-css": "1.1.0"
31
31
  },
32
32
  "main": "dist/index.css",