@utrecht/component-library-css 4.2.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 +81 -35
  3. package/dist/prince-xml.css +96 -47
  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;
@@ -169,10 +170,9 @@
169
170
  border-radius: var(--utrecht-alert-border-radius, 0);
170
171
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
171
172
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
172
- display: grid;
173
- gap: var(--utrecht-alert-icon-gap);
174
- grid-template-areas: "icon message";
175
- grid-template-columns: 0fr 100fr;
173
+ column-gap: var(--utrecht-alert-column-gap);
174
+ display: flex;
175
+ flex-direction: row;
176
176
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
177
177
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
178
178
  padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -215,11 +215,12 @@
215
215
 
216
216
  .utrecht-alert-dialog__icon {
217
217
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
218
- grid-area: icon;
218
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
219
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
219
220
  }
220
221
 
221
222
  .utrecht-alert-dialog__message {
222
- grid-area: message;
223
+ row-gap: var(--utrecht-alert-message-row-gap);
223
224
  }
224
225
 
225
226
  .utrecht-alert-dialog--error {
@@ -252,10 +253,9 @@
252
253
  border-style: solid;
253
254
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
254
255
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
255
- display: grid;
256
- gap: var(--utrecht-alert-icon-gap);
257
- grid-template-areas: "icon message";
258
- grid-template-columns: 0fr 100fr;
256
+ column-gap: var(--utrecht-alert-column-gap);
257
+ display: flex;
258
+ flex-direction: row;
259
259
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
260
260
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
261
261
  padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -266,11 +266,16 @@
266
266
 
267
267
  .utrecht-alert__icon {
268
268
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
269
- grid-area: icon;
269
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
270
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
271
+ }
272
+
273
+ .utrecht-alert__content {
274
+ row-gap: var(--utrecht-alert-content-row-gap);
270
275
  }
271
276
 
272
277
  .utrecht-alert__message {
273
- grid-area: message;
278
+ row-gap: var(--utrecht-alert-message-row-gap);
274
279
  }
275
280
 
276
281
  .utrecht-alert--info {
@@ -410,9 +415,10 @@
410
415
  }
411
416
  }
412
417
  .utrecht-badge-list {
418
+ column-gap: var(--utrecht-badge-list-column-gap);
413
419
  display: flex;
414
420
  flex-wrap: wrap;
415
- gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
421
+ row-gap: var(--utrecht-badge-list-row-gap);
416
422
  }
417
423
  .utrecht-badge-status {
418
424
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
@@ -528,6 +534,14 @@
528
534
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
529
535
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
530
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
+ );
531
545
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
532
546
  --utrecht-link-focus-text-decoration: var(
533
547
  --utrecht-breadcrumb-nav-link-focus-text-decoration,
@@ -544,6 +558,7 @@
544
558
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
545
559
  font-family: var(--utrecht-document-font-family, inherit);
546
560
  font-size: var(--utrecht-breadcrumb-nav-font-size);
561
+ line-height: var(--utrecht-breadcrumb-nav-line-height);
547
562
  text-transform: var(--utrecht-document-text-transform, inherit);
548
563
  }
549
564
 
@@ -914,7 +929,7 @@
914
929
  color: var(--_utrecht-button-color);
915
930
  cursor: var(--utrecht-action-activate-cursor, revert);
916
931
  display: inline-flex;
917
- 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));
918
933
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
919
934
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
920
935
  gap: var(--utrecht-button-icon-gap);
@@ -1292,7 +1307,7 @@
1292
1307
  color: var(--_utrecht-button-color);
1293
1308
  cursor: var(--utrecht-action-activate-cursor, revert);
1294
1309
  display: inline-flex;
1295
- 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));
1296
1311
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1297
1312
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1298
1313
  gap: var(--utrecht-button-icon-gap);
@@ -2262,7 +2277,7 @@
2262
2277
  cursor: var(--utrecht-action-busy-cursor, busy);
2263
2278
  }
2264
2279
  .utrecht-digid-button {
2265
- --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);
2266
2281
  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
2267
2282
  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
2268
2283
  block-size: var(--utrecht-digid-button-block-size, 50px);
@@ -2722,7 +2737,7 @@
2722
2737
  }
2723
2738
 
2724
2739
  .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
2725
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
2740
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
2726
2741
  color: var(--utrecht-form-toggle-disabled-color, black);
2727
2742
  }
2728
2743
 
@@ -3230,7 +3245,8 @@
3230
3245
  cursor: default;
3231
3246
  display: flex;
3232
3247
  flex-direction: column;
3233
- 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));
3234
3250
  max-block-size: var(--utrecht-listbox-max-block-size);
3235
3251
  min-block-size: 1em;
3236
3252
  overflow-block: auto;
@@ -3872,6 +3888,35 @@
3872
3888
  box-shadow: none;
3873
3889
  outline-style: revert;
3874
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
+ }
3875
3920
  .utrecht-number-data {
3876
3921
  font-variant-numeric: lining-nums tabular-nums;
3877
3922
  }
@@ -6160,7 +6205,7 @@
6160
6205
  }
6161
6206
  .utrecht-search-bar {
6162
6207
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6163
- --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
6208
+ --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
6164
6209
  --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
6165
6210
  --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
6166
6211
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
@@ -6185,7 +6230,7 @@
6185
6230
  border-color: var(--utrecht-search-bar-dropdown-border-color);
6186
6231
  border-style: solid;
6187
6232
  border-width: var(--utrecht-search-bar-dropdown-border-width);
6188
- 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));
6189
6234
  max-block-size: var(--utrecht-search-bar-dropdown-max-block-size);
6190
6235
  overflow: auto;
6191
6236
  padding-block-end: var(--utrecht-search-bar-dropdown-padding-block-end);
@@ -6233,6 +6278,7 @@
6233
6278
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
6234
6279
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
6235
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));
6236
6282
  inline-size: 100%;
6237
6283
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6238
6284
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
@@ -6479,7 +6525,7 @@
6479
6525
  .utrecht-table__header {
6480
6526
  --_utrecht-table-header-cell-vertical-align: bottom;
6481
6527
  --_utrecht-table-header-cell-z-index: 8;
6482
- background-color: var(--utrecht-table-header-background-color);
6528
+ background-color: var(--utrecht-table-header-background-color, transparent);
6483
6529
  break-inside: avoid;
6484
6530
  color: var(--utrecht-table-header-color);
6485
6531
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6488,7 +6534,7 @@
6488
6534
  }
6489
6535
 
6490
6536
  .utrecht-table__header--sticky th {
6491
- background-color: var(--utrecht-table-header-sticky-background-color);
6537
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6492
6538
  color: var(--utrecht-table-header-sticky-color);
6493
6539
  inset-block-start: 0;
6494
6540
  position: sticky;
@@ -6505,7 +6551,7 @@
6505
6551
  }
6506
6552
 
6507
6553
  .utrecht-table__footer--sticky {
6508
- 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));
6509
6555
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6510
6556
  inset-block-end: 0;
6511
6557
  position: sticky;
@@ -6640,12 +6686,12 @@
6640
6686
  }
6641
6687
 
6642
6688
  .utrecht-table__row--alternate-odd {
6643
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6689
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6644
6690
  color: var(--utrecht-table-row-alternate-odd-color);
6645
6691
  }
6646
6692
 
6647
6693
  .utrecht-table__row--alternate-even {
6648
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6694
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6649
6695
  color: var(--utrecht-table-row-alternate-even-color);
6650
6696
  }
6651
6697
 
@@ -6705,11 +6751,11 @@
6705
6751
  }
6706
6752
 
6707
6753
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
6708
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6754
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6709
6755
  color: var(--utrecht-table-row-alternate-odd-color);
6710
6756
  }
6711
6757
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
6712
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6758
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6713
6759
  color: var(--utrecht-table-row-alternate-even-color);
6714
6760
  }
6715
6761
 
@@ -6728,7 +6774,7 @@
6728
6774
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6729
6775
  block-size: initial;
6730
6776
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
6731
- 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)));
6732
6778
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6733
6779
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6734
6780
  border-style: solid;
@@ -6736,7 +6782,7 @@
6736
6782
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6737
6783
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6738
6784
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6739
- font-weight: initial;
6785
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6740
6786
  inline-size: 100%;
6741
6787
  line-height: var(--utrecht-textarea-line-height, initial);
6742
6788
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6760,7 +6806,7 @@
6760
6806
  );
6761
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))));
6762
6808
  border-width: var(--_utrecht-textarea-border-width);
6763
- 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)))));
6764
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))));
6765
6811
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6766
6812
  }
@@ -6828,7 +6874,7 @@
6828
6874
  );
6829
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))));
6830
6876
  border-width: var(--_utrecht-textarea-border-width);
6831
- 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)))));
6832
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))));
6833
6879
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6834
6880
  }
@@ -6868,7 +6914,7 @@
6868
6914
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6869
6915
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6870
6916
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6871
- font-weight: initial;
6917
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6872
6918
  inline-size: 100%;
6873
6919
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6874
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;
@@ -168,10 +169,9 @@
168
169
  border-radius: var(--utrecht-alert-border-radius, 0);
169
170
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
170
171
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
171
- display: grid;
172
- gap: var(--utrecht-alert-icon-gap);
173
- grid-template-areas: "icon message";
174
- grid-template-columns: 0fr 100fr;
172
+ column-gap: var(--utrecht-alert-column-gap);
173
+ display: flex;
174
+ flex-direction: row;
175
175
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
176
176
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
177
177
  padding-bottom: var(--utrecht-alert-padding-block-end);
@@ -214,11 +214,12 @@
214
214
 
215
215
  .utrecht-alert-dialog__icon {
216
216
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
217
- grid-area: icon;
217
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
218
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
218
219
  }
219
220
 
220
221
  .utrecht-alert-dialog__message {
221
- grid-area: message;
222
+ row-gap: var(--utrecht-alert-message-row-gap);
222
223
  }
223
224
 
224
225
  .utrecht-alert-dialog--error {
@@ -251,10 +252,9 @@
251
252
  border-style: solid;
252
253
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
253
254
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
254
- display: grid;
255
- gap: var(--utrecht-alert-icon-gap);
256
- grid-template-areas: "icon message";
257
- grid-template-columns: 0fr 100fr;
255
+ column-gap: var(--utrecht-alert-column-gap);
256
+ display: flex;
257
+ flex-direction: row;
258
258
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
259
259
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
260
260
  padding-bottom: var(--utrecht-alert-padding-block-end);
@@ -265,11 +265,16 @@
265
265
 
266
266
  .utrecht-alert__icon {
267
267
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
268
- grid-area: icon;
268
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
269
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
270
+ }
271
+
272
+ .utrecht-alert__content {
273
+ row-gap: var(--utrecht-alert-content-row-gap);
269
274
  }
270
275
 
271
276
  .utrecht-alert__message {
272
- grid-area: message;
277
+ row-gap: var(--utrecht-alert-message-row-gap);
273
278
  }
274
279
 
275
280
  .utrecht-alert--info {
@@ -409,9 +414,10 @@
409
414
  }
410
415
  }
411
416
  .utrecht-badge-list {
417
+ column-gap: var(--utrecht-badge-list-column-gap);
412
418
  display: flex;
413
419
  flex-wrap: wrap;
414
- gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
420
+ row-gap: var(--utrecht-badge-list-row-gap);
415
421
  }
416
422
  .utrecht-badge-status {
417
423
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
@@ -527,6 +533,14 @@
527
533
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
528
534
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
529
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
+ );
530
544
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
531
545
  --utrecht-link-focus-text-decoration: var(
532
546
  --utrecht-breadcrumb-nav-link-focus-text-decoration,
@@ -543,6 +557,7 @@
543
557
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
544
558
  font-family: var(--utrecht-document-font-family, inherit);
545
559
  font-size: var(--utrecht-breadcrumb-nav-font-size);
560
+ line-height: var(--utrecht-breadcrumb-nav-line-height);
546
561
  text-transform: var(--utrecht-document-text-transform, inherit);
547
562
  }
548
563
 
@@ -913,7 +928,7 @@
913
928
  color: var(--_utrecht-button-color);
914
929
  cursor: var(--utrecht-action-activate-cursor, revert);
915
930
  display: inline-flex;
916
- 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));
917
932
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
918
933
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
919
934
  gap: var(--utrecht-button-icon-gap);
@@ -1291,7 +1306,7 @@
1291
1306
  color: var(--_utrecht-button-color);
1292
1307
  cursor: var(--utrecht-action-activate-cursor, revert);
1293
1308
  display: inline-flex;
1294
- 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));
1295
1310
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1296
1311
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1297
1312
  gap: var(--utrecht-button-icon-gap);
@@ -2272,7 +2287,7 @@
2272
2287
  cursor: var(--utrecht-action-busy-cursor, busy);
2273
2288
  }
2274
2289
  .utrecht-digid-button {
2275
- --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);
2276
2291
  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
2277
2292
  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
2278
2293
  height: var(--utrecht-digid-button-block-size, 50px);
@@ -2732,7 +2747,7 @@
2732
2747
  }
2733
2748
 
2734
2749
  .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
2735
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
2750
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
2736
2751
  color: var(--utrecht-form-toggle-disabled-color, black);
2737
2752
  }
2738
2753
 
@@ -3240,7 +3255,8 @@
3240
3255
  cursor: default;
3241
3256
  display: flex;
3242
3257
  flex-direction: column;
3243
- 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));
3244
3260
  max-height: var(--utrecht-listbox-max-block-size);
3245
3261
  min-height: 1em;
3246
3262
  overflow-block: auto;
@@ -3882,6 +3898,35 @@
3882
3898
  box-shadow: none;
3883
3899
  outline-style: revert;
3884
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
+ }
3885
3930
  .utrecht-number-data {
3886
3931
  font-variant-numeric: lining-nums tabular-nums;
3887
3932
  }
@@ -6177,7 +6222,7 @@
6177
6222
  }
6178
6223
  .utrecht-search-bar {
6179
6224
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6180
- --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
6225
+ --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
6181
6226
  --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
6182
6227
  --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
6183
6228
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
@@ -6202,7 +6247,7 @@
6202
6247
  border-color: var(--utrecht-search-bar-dropdown-border-color);
6203
6248
  border-style: solid;
6204
6249
  border-width: var(--utrecht-search-bar-dropdown-border-width);
6205
- 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));
6206
6251
  max-height: var(--utrecht-search-bar-dropdown-max-block-size);
6207
6252
  overflow: auto;
6208
6253
  padding-bottom: var(--utrecht-search-bar-dropdown-padding-block-end);
@@ -6250,6 +6295,7 @@
6250
6295
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
6251
6296
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
6252
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));
6253
6299
  width: 100%;
6254
6300
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6255
6301
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -6501,7 +6547,7 @@
6501
6547
  .utrecht-table__header {
6502
6548
  --_utrecht-table-header-cell-vertical-align: bottom;
6503
6549
  --_utrecht-table-header-cell-z-index: 8;
6504
- background-color: var(--utrecht-table-header-background-color);
6550
+ background-color: var(--utrecht-table-header-background-color, transparent);
6505
6551
  break-inside: avoid;
6506
6552
  color: var(--utrecht-table-header-color);
6507
6553
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6510,7 +6556,7 @@
6510
6556
  }
6511
6557
 
6512
6558
  .utrecht-table__header--sticky th {
6513
- background-color: var(--utrecht-table-header-sticky-background-color);
6559
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6514
6560
  color: var(--utrecht-table-header-sticky-color);
6515
6561
  top: 0;
6516
6562
  position: sticky;
@@ -6527,7 +6573,7 @@
6527
6573
  }
6528
6574
 
6529
6575
  .utrecht-table__footer--sticky {
6530
- 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));
6531
6577
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6532
6578
  bottom: 0;
6533
6579
  position: sticky;
@@ -6662,12 +6708,12 @@
6662
6708
  }
6663
6709
 
6664
6710
  .utrecht-table__row--alternate-odd {
6665
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6711
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6666
6712
  color: var(--utrecht-table-row-alternate-odd-color);
6667
6713
  }
6668
6714
 
6669
6715
  .utrecht-table__row--alternate-even {
6670
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6716
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6671
6717
  color: var(--utrecht-table-row-alternate-even-color);
6672
6718
  }
6673
6719
 
@@ -6727,11 +6773,11 @@
6727
6773
  }
6728
6774
 
6729
6775
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
6730
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6776
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6731
6777
  color: var(--utrecht-table-row-alternate-odd-color);
6732
6778
  }
6733
6779
  .utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
6734
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6780
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6735
6781
  color: var(--utrecht-table-row-alternate-even-color);
6736
6782
  }
6737
6783
 
@@ -6750,7 +6796,7 @@
6750
6796
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6751
6797
  height: initial;
6752
6798
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
6753
- 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)));
6754
6800
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6755
6801
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6756
6802
  border-style: solid;
@@ -6758,7 +6804,7 @@
6758
6804
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6759
6805
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6760
6806
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6761
- font-weight: initial;
6807
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6762
6808
  width: 100%;
6763
6809
  line-height: var(--utrecht-textarea-line-height, initial);
6764
6810
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6791,7 +6837,7 @@
6791
6837
  );
6792
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))));
6793
6839
  border-width: var(--_utrecht-textarea-border-width);
6794
- 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)))));
6795
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))));
6796
6842
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6797
6843
  }
@@ -6859,7 +6905,7 @@
6859
6905
  );
6860
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))));
6861
6907
  border-width: var(--_utrecht-textarea-border-width);
6862
- 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)))));
6863
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))));
6864
6910
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6865
6911
  }
@@ -6899,7 +6945,7 @@
6899
6945
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6900
6946
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6901
6947
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6902
- font-weight: initial;
6948
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6903
6949
  width: 100%;
6904
6950
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6905
6951
  min-height: var(--utrecht-pointer-target-min-size, 44px);
@@ -7439,7 +7485,7 @@
7439
7485
  color: var(--_utrecht-button-color);
7440
7486
  cursor: var(--utrecht-action-activate-cursor, revert);
7441
7487
  display: inline-flex;
7442
- 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));
7443
7489
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
7444
7490
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
7445
7491
  gap: var(--utrecht-button-icon-gap);
@@ -7627,12 +7673,14 @@
7627
7673
  font-size: var(--utrecht-form-label-font-size);
7628
7674
  font-weight: var(--utrecht-form-label-font-weight);
7629
7675
  }
7630
- .utrecht-html input[type=checkbox i] ~ label {
7676
+ .utrecht-html input[type=checkbox i] ~ label,
7677
+ .utrecht-html label:has(input[type=checkbox i]) {
7631
7678
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7632
7679
  cursor: var(--utrecht-action-activate-cursor, revert);
7633
7680
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
7634
7681
  }
7635
- .utrecht-html input[type=radio i] ~ label {
7682
+ .utrecht-html input[type=radio i] ~ label,
7683
+ .utrecht-html label:has(input[type=radio i]) {
7636
7684
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7637
7685
  cursor: var(--utrecht-action-activate-cursor, revert);
7638
7686
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
@@ -8035,6 +8083,7 @@
8035
8083
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
8036
8084
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
8037
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));
8038
8087
  width: 100%;
8039
8088
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
8040
8089
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -8120,7 +8169,7 @@
8120
8169
  .utrecht-html thead {
8121
8170
  --_utrecht-table-header-cell-vertical-align: bottom;
8122
8171
  --_utrecht-table-header-cell-z-index: 8;
8123
- background-color: var(--utrecht-table-header-background-color);
8172
+ background-color: var(--utrecht-table-header-background-color, transparent);
8124
8173
  break-inside: avoid;
8125
8174
  color: var(--utrecht-table-header-color);
8126
8175
  font-weight: var(--utrecht-table-header-font-weight);
@@ -8186,26 +8235,26 @@
8186
8235
  font-variant-numeric: lining-nums tabular-nums;
8187
8236
  }
8188
8237
  .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
8189
- background-color: var(--utrecht-table-row-alternate-even-background-color);
8238
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8190
8239
  color: var(--utrecht-table-row-alternate-even-color);
8191
8240
  }
8192
8241
  .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
8193
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
8242
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8194
8243
  color: var(--utrecht-table-row-alternate-odd-color);
8195
8244
  }
8196
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 {
8197
- background-color: var(--utrecht-table-row-alternate-even-background-color);
8246
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8198
8247
  color: var(--utrecht-table-row-alternate-even-color);
8199
8248
  }
8200
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 {
8201
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
8250
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8202
8251
  color: var(--utrecht-table-row-alternate-odd-color);
8203
8252
  }
8204
8253
  .utrecht-html textarea {
8205
8254
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8206
8255
  height: initial;
8207
8256
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
8208
- 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)));
8209
8258
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
8210
8259
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
8211
8260
  border-style: solid;
@@ -8213,7 +8262,7 @@
8213
8262
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
8214
8263
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
8215
8264
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
8216
- font-weight: initial;
8265
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
8217
8266
  width: 100%;
8218
8267
  line-height: var(--utrecht-textarea-line-height, initial);
8219
8268
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -8261,7 +8310,7 @@
8261
8310
  );
8262
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))));
8263
8312
  border-width: var(--_utrecht-textarea-border-width);
8264
- 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)))));
8265
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))));
8266
8315
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8267
8316
  }
@@ -8313,7 +8362,7 @@
8313
8362
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8314
8363
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8315
8364
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8316
- font-weight: initial;
8365
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8317
8366
  width: 100%;
8318
8367
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
8319
8368
  min-height: var(--utrecht-pointer-target-min-size, 44px);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.2.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": "6.2.0",
29
+ "@utrecht/components": "7.1.0",
30
30
  "@utrecht/html-content-css": "1.1.0"
31
31
  },
32
32
  "main": "dist/index.css",