@utrecht/component-library-css 5.0.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html.css +15 -12
  2. package/dist/index.css +103 -23
  3. package/dist/prince-xml.css +193 -261
  4. package/package.json +2 -2
package/dist/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;
@@ -188,7 +189,7 @@
188
189
  min-width: var(--utrecht-alert-dialog-min-inline-size);
189
190
  }
190
191
 
191
- .utrecht-alert-dialog::backdrop {
192
+ .utrecht-alert-dialog[prince-xml-ignore-pseudo-element-backdrop] {
192
193
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
193
194
  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
194
195
  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
@@ -200,16 +201,6 @@
200
201
  -webkit-user-select: none;
201
202
  user-select: none;
202
203
  }
203
- @media (prefers-reduced-motion: reduce) {
204
- .utrecht-alert-dialog::backdrop {
205
- --_utrecht-backdrop-fade-in-animation-duration: 0;
206
- }
207
- }
208
- @media (prefers-reduced-transparency: reduce) {
209
- .utrecht-alert-dialog::backdrop {
210
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
211
- }
212
- }
213
204
 
214
205
  .utrecht-alert-dialog__icon {
215
206
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
@@ -332,16 +323,6 @@
332
323
  position: absolute;
333
324
  z-index: var(--utrecht-backdrop-z-index);
334
325
  }
335
- @media (prefers-reduced-motion: reduce) {
336
- .utrecht-backdrop {
337
- --_utrecht-backdrop-fade-in-animation-duration: 0;
338
- }
339
- }
340
- @media (prefers-reduced-transparency: reduce) {
341
- .utrecht-backdrop {
342
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
343
- }
344
- }
345
326
 
346
327
  .utrecht-backdrop--reduced-motion {
347
328
  --_utrecht-backdrop-fade-in-animation-duration: 0;
@@ -376,13 +357,6 @@
376
357
  text-decoration: none;
377
358
  white-space: nowrap;
378
359
  }
379
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
380
- .utrecht-badge-counter {
381
- border-color: currentColor;
382
- border-style: solid;
383
- border-width: 1px;
384
- }
385
- }
386
360
  .utrecht-badge-data {
387
361
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
388
362
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
@@ -405,17 +379,11 @@
405
379
  letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
406
380
  text-transform: var(--utrecht-badge-data-text-transform, inherit);
407
381
  }
408
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
409
- .utrecht-badge-data {
410
- border-color: currentColor;
411
- border-style: solid;
412
- border-width: 1px;
413
- }
414
- }
415
382
  .utrecht-badge-list {
383
+ column-gap: var(--utrecht-badge-list-column-gap);
416
384
  display: flex;
417
385
  flex-wrap: wrap;
418
- gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
386
+ row-gap: var(--utrecht-badge-list-row-gap);
419
387
  }
420
388
  .utrecht-badge-status {
421
389
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
@@ -439,13 +407,6 @@
439
407
  letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
440
408
  text-transform: var(--utrecht-badge-status-text-transform, inherit);
441
409
  }
442
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
443
- .utrecht-badge-status {
444
- border-color: currentColor;
445
- border-style: solid;
446
- border-width: 1px;
447
- }
448
- }
449
410
 
450
411
  .utrecht-badge-status--danger {
451
412
  background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%));
@@ -531,6 +492,14 @@
531
492
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
532
493
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
533
494
  --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-text-decoration);
495
+ --utrecht-link-active-color: var(
496
+ --utrecht-breadcrumb-nav-link-active-color,
497
+ var(--utrecht-breadcrumb-nav-link-color)
498
+ );
499
+ --utrecht-link-active-text-decoration: var(
500
+ --utrecht-breadcrumb-nav-link-focus-text-decoration,
501
+ var(--utrecht-breadcrumb-nav-link-text-decoration)
502
+ );
534
503
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
535
504
  --utrecht-link-focus-text-decoration: var(
536
505
  --utrecht-breadcrumb-nav-link-focus-text-decoration,
@@ -547,6 +516,7 @@
547
516
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
548
517
  font-family: var(--utrecht-document-font-family, inherit);
549
518
  font-size: var(--utrecht-breadcrumb-nav-font-size);
519
+ line-height: var(--utrecht-breadcrumb-nav-line-height);
550
520
  text-transform: var(--utrecht-document-text-transform, inherit);
551
521
  }
552
522
 
@@ -917,7 +887,7 @@
917
887
  color: var(--_utrecht-button-color);
918
888
  cursor: var(--utrecht-action-activate-cursor, revert);
919
889
  display: inline-flex;
920
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
890
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
921
891
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
922
892
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
923
893
  gap: var(--utrecht-button-icon-gap);
@@ -938,15 +908,6 @@
938
908
  cursor: var(--utrecht-action-navigate-cursor, pointer);
939
909
  text-decoration: none;
940
910
  }
941
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
942
- .utrecht-button-link {
943
- --_utrecht-button-disabled-border-color: GrayText;
944
- --_utrecht-button-disabled-color: GrayText;
945
- background-color: ButtonFace;
946
- border-color: buttonborder;
947
- color: ButtonText;
948
- }
949
- }
950
911
 
951
912
  .utrecht-button-link--active {
952
913
  background-color: var(--_utrecht-button-active-background-color);
@@ -991,7 +952,7 @@
991
952
  color: var(--_utrecht-button-focus-color);
992
953
  scale: var(--utrecht-button-focus-scale, 1);
993
954
  }
994
- .utrecht-button-link--html-a:focus-visible {
955
+ .utrecht-button-link--html-a[prince-xml-ignore-pseudo-class-focus-visible] {
995
956
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
996
957
  var(--utrecht-focus-inverse-outline-color, transparent);
997
958
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1295,7 +1256,7 @@
1295
1256
  color: var(--_utrecht-button-color);
1296
1257
  cursor: var(--utrecht-action-activate-cursor, revert);
1297
1258
  display: inline-flex;
1298
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
1259
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1299
1260
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1300
1261
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1301
1262
  gap: var(--utrecht-button-icon-gap);
@@ -1314,15 +1275,6 @@
1314
1275
  -webkit-user-select: none;
1315
1276
  user-select: none;
1316
1277
  }
1317
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
1318
- .utrecht-button {
1319
- --_utrecht-button-disabled-border-color: GrayText;
1320
- --_utrecht-button-disabled-color: GrayText;
1321
- background-color: ButtonFace;
1322
- border-color: buttonborder;
1323
- color: ButtonText;
1324
- }
1325
- }
1326
1278
 
1327
1279
  .utrecht-button--distanced {
1328
1280
  margin-bottom: var(--utrecht-button-margin-block-end);
@@ -1393,7 +1345,7 @@
1393
1345
  outline-style: var(--utrecht-focus-outline-style, revert);
1394
1346
  outline-width: var(--utrecht-focus-outline-width, revert);
1395
1347
  }
1396
- .utrecht-button:focus:not(:focus-visible) {
1348
+ .utrecht-button:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
1397
1349
  box-shadow: none;
1398
1350
  outline-style: revert;
1399
1351
  }
@@ -1887,7 +1839,7 @@
1887
1839
  outline-style: var(--utrecht-focus-outline-style, revert);
1888
1840
  outline-width: var(--utrecht-focus-outline-width, revert);
1889
1841
  }
1890
- .utrecht-checkbox--html-input:focus:not(:focus-visible) {
1842
+ .utrecht-checkbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
1891
1843
  box-shadow: none;
1892
1844
  outline-style: revert;
1893
1845
  }
@@ -1941,22 +1893,6 @@
1941
1893
  display: inline-block;
1942
1894
  width: var(--utrecht-color-sample-inline-size, 2em);
1943
1895
  -webkit-print-color-adjust: exact;
1944
- print-color-adjust: exact;
1945
- }
1946
- @media (forced-colors: active) {
1947
- .utrecht-color-sample {
1948
- forced-color-adjust: none;
1949
- }
1950
- }
1951
- @media (forced-colors: active) and (prefers-color-scheme: dark) {
1952
- .utrecht-color-sample {
1953
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-dark-border-color, #000);
1954
- }
1955
- }
1956
- @media (forced-colors: active) and (prefers-color-scheme: light) {
1957
- .utrecht-color-sample {
1958
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
1959
- }
1960
1896
  }
1961
1897
  .utrecht-column-layout {
1962
1898
  column-gap: var(--utrecht-column-layout-gap, 2em);
@@ -2024,7 +1960,6 @@
2024
1960
  min-height: 24px;
2025
1961
  min-width: 24px;
2026
1962
  -webkit-print-color-adjust: exact;
2027
- print-color-adjust: exact;
2028
1963
  vertical-align: top;
2029
1964
  }
2030
1965
 
@@ -2130,8 +2065,8 @@
2130
2065
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2131
2066
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2132
2067
  }
2133
- .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
2134
- .utrecht-custom-checkbox--html-input:focus-visible {
2068
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input[prince-xml-ignore-pseudo-class-focus-visible],
2069
+ .utrecht-custom-checkbox--html-input[prince-xml-ignore-pseudo-class-focus-visible] {
2135
2070
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2136
2071
  var(--utrecht-focus-inverse-outline-color, transparent);
2137
2072
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -2250,16 +2185,6 @@
2250
2185
  outline-width: 0.1em;
2251
2186
  }
2252
2187
  }
2253
- @media screen and (prefers-contrast: more) {
2254
- .utrecht-data-placeholder {
2255
- background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
2256
- }
2257
- }
2258
- @media screen and (forced-colors: active) {
2259
- .utrecht-data-placeholder {
2260
- background-color: GrayText;
2261
- }
2262
- }
2263
2188
 
2264
2189
  .utrecht-data-placeholder--loading {
2265
2190
  cursor: var(--utrecht-action-busy-cursor, busy);
@@ -2276,7 +2201,7 @@
2276
2201
  cursor: var(--utrecht-action-busy-cursor, busy);
2277
2202
  }
2278
2203
  .utrecht-digid-button {
2279
- --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
2204
+ --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 44px);
2280
2205
  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
2281
2206
  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
2282
2207
  height: var(--utrecht-digid-button-block-size, 50px);
@@ -2319,7 +2244,7 @@
2319
2244
  z-index: var(--utrecht-drawer-z-index, 1);
2320
2245
  }
2321
2246
 
2322
- .utrecht-drawer::backdrop {
2247
+ .utrecht-drawer[prince-xml-ignore-pseudo-element-backdrop] {
2323
2248
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
2324
2249
  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
2325
2250
  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
@@ -2339,16 +2264,6 @@
2339
2264
  opacity: var(--_utrecht-backdrop-opacity);
2340
2265
  }
2341
2266
  }
2342
- @media (prefers-reduced-motion: reduce) {
2343
- .utrecht-drawer::backdrop {
2344
- --_utrecht-backdrop-fade-in-animation-duration: 0;
2345
- }
2346
- }
2347
- @media (prefers-reduced-transparency: reduce) {
2348
- .utrecht-drawer::backdrop {
2349
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
2350
- }
2351
- }
2352
2267
 
2353
2268
  .utrecht-drawer--inline-start {
2354
2269
  height: 100%;
@@ -2659,20 +2574,8 @@
2659
2574
  -webkit-user-select: none;
2660
2575
  user-select: none;
2661
2576
  }
2662
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
2663
- .utrecht-form-toggle {
2664
- --utrecht-form-toggle-background-color: ButtonFace;
2665
- --utrecht-form-toggle-border-color: buttonborder;
2666
- --utrecht-form-toggle-border-width: 1px;
2667
- --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
2668
- --utrecht-form-toggle-thumb-background-color: ButtonText;
2669
- --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
2670
- border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
2671
- border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
2672
- }
2673
- }
2674
2577
 
2675
- .utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
2578
+ .utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div[prince-xml-ignore-pseudo-class-focus-visible] {
2676
2579
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2677
2580
  var(--utrecht-focus-inverse-outline-color, transparent);
2678
2581
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -2736,7 +2639,7 @@
2736
2639
  }
2737
2640
 
2738
2641
  .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);
2642
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
2740
2643
  color: var(--utrecht-form-toggle-disabled-color, black);
2741
2644
  }
2742
2645
 
@@ -2763,7 +2666,7 @@
2763
2666
  position: absolute !important;
2764
2667
  white-space: nowrap !important;
2765
2668
  }
2766
- .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
2669
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox[prince-xml-ignore-pseudo-class-focus-visible] ~ .utrecht-form-toggle__track {
2767
2670
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2768
2671
  var(--utrecht-focus-inverse-outline-color, transparent);
2769
2672
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -2940,7 +2843,6 @@
2940
2843
  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
2941
2844
  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
2942
2845
  text-decoration-skip-ink: all;
2943
- text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
2944
2846
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2945
2847
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2946
2848
  align-items: center;
@@ -2990,7 +2892,7 @@
2990
2892
  text-decoration-skip-ink: none;
2991
2893
  }
2992
2894
 
2993
- .utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
2895
+ .utrecht-link-button--focus-visible, .utrecht-link-button--html-button[prince-xml-ignore-pseudo-class-focus-visible] {
2994
2896
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2995
2897
  var(--utrecht-focus-inverse-outline-color, transparent);
2996
2898
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3081,7 +2983,7 @@
3081
2983
  transform: var(--utrecht-link-social-hover-transform-scale);
3082
2984
  }
3083
2985
 
3084
- .utrecht-link-social:focus-visible,
2986
+ .utrecht-link-social[prince-xml-ignore-pseudo-class-focus-visible],
3085
2987
  .utrecht-link-social--focus-visible {
3086
2988
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3087
2989
  var(--utrecht-focus-inverse-outline-color, transparent);
@@ -3100,12 +3002,11 @@
3100
3002
  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
3101
3003
  }
3102
3004
 
3103
- .utrecht-link:any-link {
3005
+ .utrecht-link[href] {
3104
3006
  --_utrecht-link-forced-colors-color: linktext;
3105
3007
  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
3106
3008
  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
3107
3009
  text-decoration-skip-ink: all;
3108
- text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
3109
3010
  text-underline-offset: var(--utrecht-link-text-underline-offset);
3110
3011
  }
3111
3012
 
@@ -3123,7 +3024,7 @@
3123
3024
  --_utrecht-link-forced-colors-color: visitedtext;
3124
3025
  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
3125
3026
  }
3126
- .utrecht-link--html-a:any-link:hover,
3027
+ .utrecht-link--html-a[href]:hover,
3127
3028
  .utrecht-link--hover {
3128
3029
  --_utrecht-link-forced-colors-color: linktext;
3129
3030
  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
@@ -3153,7 +3054,7 @@
3153
3054
  z-index: var(--utrecht-stack-focus-z-index, 1);
3154
3055
  }
3155
3056
  .utrecht-link--html-span:focus,
3156
- .utrecht-link--html-a:any-link:focus {
3057
+ .utrecht-link--html-a[href]:focus {
3157
3058
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3158
3059
  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
3159
3060
  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
@@ -3170,14 +3071,14 @@
3170
3071
  z-index: var(--utrecht-stack-focus-z-index, 1);
3171
3072
  }
3172
3073
 
3173
- .utrecht-link--html-span:focus:not(:focus-visible),
3174
- .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
3074
+ .utrecht-link--html-span:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
3075
+ .utrecht-link--html-a[href]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3175
3076
  box-shadow: none;
3176
3077
  outline-style: revert;
3177
3078
  }
3178
3079
 
3179
3080
  .utrecht-link--html-span:active,
3180
- .utrecht-link--html-a:any-link:active,
3081
+ .utrecht-link--html-a[href]:active,
3181
3082
  .utrecht-link--active {
3182
3083
  --_utrecht-link-forced-colors-color: activetext;
3183
3084
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
@@ -3192,12 +3093,11 @@
3192
3093
  font-weight: var(--utrecht-link-current-font-weight);
3193
3094
  }
3194
3095
 
3195
- .utrecht-link--box-content:any-link {
3096
+ .utrecht-link--box-content[href] {
3196
3097
  color: unset;
3197
3098
  display: inline-block;
3198
3099
  text-decoration-line: unset;
3199
3100
  text-decoration-skip-ink: unset;
3200
- text-decoration-thickness: unset;
3201
3101
  text-underline-offset: unset;
3202
3102
  }
3203
3103
 
@@ -3244,7 +3144,8 @@
3244
3144
  cursor: default;
3245
3145
  display: flex;
3246
3146
  flex-direction: column;
3247
- width: var(--utrecht-listbox-inline-size, var(--utrecht-form-input-max-inline-size));
3147
+ font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3148
+ width: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3248
3149
  max-height: var(--utrecht-listbox-max-block-size);
3249
3150
  min-height: 1em;
3250
3151
  overflow-block: auto;
@@ -3256,16 +3157,6 @@
3256
3157
  -webkit-user-select: none;
3257
3158
  user-select: none;
3258
3159
  }
3259
- @media (forced-colors: active) {
3260
- .utrecht-listbox {
3261
- --utrecht-listbox-option-selected-background-color: Highlight;
3262
- --utrecht-listbox-option-selected-color: HighlightText;
3263
- --utrecht-listbox-option-disabled-background-color: field;
3264
- --utrecht-listbox-option-disabled-color: GrayText;
3265
- background-color: field;
3266
- color: fieldtext;
3267
- }
3268
- }
3269
3160
 
3270
3161
  .utrecht-listbox--focus {
3271
3162
  }
@@ -3310,12 +3201,6 @@
3310
3201
  line-height: var(--utrecht-listbox-option-group-label-line-height);
3311
3202
  margin-left: var(--utrecht-listbox-option-group-label-margin-inline-start);
3312
3203
  }
3313
- @media (forced-colors: active) {
3314
- .utrecht-listbox__group-label {
3315
- background-color: field;
3316
- color: fieldtext;
3317
- }
3318
- }
3319
3204
 
3320
3205
  .utrecht-listbox__option {
3321
3206
  list-style: none;
@@ -3331,11 +3216,6 @@
3331
3216
  padding-right: var(--utrecht-listbox-option-padding-inline-end);
3332
3217
  padding-left: var(--utrecht-listbox-option-padding-inline-start);
3333
3218
  }
3334
- @media (forced-colors: active) {
3335
- .utrecht-listbox__option {
3336
- forced-color-adjust: none;
3337
- }
3338
- }
3339
3219
 
3340
3220
  .utrecht-listbox__option--disabled {
3341
3221
  background-color: var(--utrecht-listbox-option-disabled-background-color);
@@ -3389,20 +3269,10 @@
3389
3269
  .utrecht-listbox--disabled {
3390
3270
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3391
3271
  }
3392
- @media (forced-colors: active) {
3393
- .utrecht-listbox--disabled {
3394
- --utrecht-listbox-option-selected-background-color: GrayText;
3395
- --utrecht-listbox-option-selected-color: field;
3396
- --utrecht-listbox-option-background-color: field;
3397
- --utrecht-listbox-option-color: GrayText;
3398
- --utrecht-listbox-background-color: field;
3399
- --utrecht-listbox-color: GrayText;
3400
- }
3401
- }
3402
3272
 
3403
3273
  .utrecht-listbox--html-div:focus {
3404
3274
  }
3405
- .utrecht-listbox--html-div:focus-visible {
3275
+ .utrecht-listbox--html-div[prince-xml-ignore-pseudo-class-focus-visible] {
3406
3276
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3407
3277
  var(--utrecht-focus-inverse-outline-color, transparent);
3408
3278
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3500,7 +3370,7 @@
3500
3370
  .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3501
3371
  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3502
3372
  }
3503
- .utrecht-mapcontrolbutton:focus:not(:focus-visible) {
3373
+ .utrecht-mapcontrolbutton:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3504
3374
  box-shadow: none;
3505
3375
  outline-style: revert;
3506
3376
  }
@@ -3582,13 +3452,12 @@
3582
3452
  outline-width: var(--utrecht-focus-outline-width, revert);
3583
3453
  }
3584
3454
 
3585
- .utrecht-menulijst__link:focus:not(:focus-visible) {
3455
+ .utrecht-menulijst__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3586
3456
  box-shadow: none;
3587
3457
  outline-style: revert;
3588
3458
  }
3589
3459
  .utrecht-multiline-data {
3590
3460
  white-space: pre-line;
3591
- white-space-collapse: preserve-breaks;
3592
3461
  }
3593
3462
 
3594
3463
  .utrecht-multiline-data--html-pre {
@@ -3602,18 +3471,6 @@
3602
3471
  display: flex;
3603
3472
  justify-content: center;
3604
3473
  }
3605
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
3606
- .utrecht-nav-bar {
3607
- border-bottom-color: currentColor;
3608
- border-bottom-style: solid;
3609
- border-bottom-width: 1px;
3610
- border-top-color: currentColor;
3611
- border-top-style: solid;
3612
- border-top-width: 1px;
3613
- padding-bottom: calc(var(--utrecht-focus-outline-width) * 2);
3614
- padding-top: calc(var(--utrecht-focus-outline-width) * 2);
3615
- }
3616
- }
3617
3474
 
3618
3475
  .utrecht-nav-bar__content {
3619
3476
  align-items: stretch;
@@ -3812,7 +3669,7 @@
3812
3669
  display: none;
3813
3670
  }
3814
3671
 
3815
- .utrecht-sidenav__link:focus:not(:focus-visible) {
3672
+ .utrecht-sidenav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3816
3673
  box-shadow: none;
3817
3674
  outline-style: revert;
3818
3675
  }
@@ -3882,10 +3739,32 @@
3882
3739
  outline-width: var(--utrecht-focus-outline-width, revert);
3883
3740
  }
3884
3741
 
3885
- .utrecht-topnav__link:focus:not(:focus-visible) {
3742
+ .utrecht-topnav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3886
3743
  box-shadow: none;
3887
3744
  outline-style: revert;
3888
3745
  }
3746
+ .utrecht-number-badge {
3747
+ background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3748
+ border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
3749
+ color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
3750
+ display: inline-block;
3751
+ font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
3752
+ font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size));
3753
+ font-style: var(--utrecht-number-badge-font-style, normal);
3754
+ font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold));
3755
+ line-height: 1;
3756
+ max-height: max-content;
3757
+ max-width: max-content;
3758
+ min-height: var(--utrecht-number-badge-min-block-size, var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)));
3759
+ min-width: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em));
3760
+ padding-bottom: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3761
+ padding-top: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
3762
+ padding-right: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3763
+ padding-left: var(--utrecht-number-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
3764
+ text-align: center;
3765
+ text-decoration: none;
3766
+ white-space: nowrap;
3767
+ }
3889
3768
  .utrecht-number-data {
3890
3769
  font-variant-numeric: lining-nums tabular-nums;
3891
3770
  }
@@ -4088,8 +3967,8 @@
4088
3967
  outline-width: var(--utrecht-focus-outline-width, revert);
4089
3968
  }
4090
3969
 
4091
- .utrecht-pagination__page-link:focus:not(:focus-visible),
4092
- .utrecht-pagination__relative-link:focus:not(:focus-visible) {
3970
+ .utrecht-pagination__page-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
3971
+ .utrecht-pagination__relative-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
4093
3972
  box-shadow: none;
4094
3973
  outline-style: revert;
4095
3974
  }
@@ -4144,7 +4023,6 @@
4144
4023
  }
4145
4024
  .utrecht-preserve-data {
4146
4025
  unicode-bidi: isolate;
4147
- white-space-collapse: preserve-spaces;
4148
4026
  }
4149
4027
  .utrecht-radio-button {
4150
4028
  -webkit-appearance: none;
@@ -4187,7 +4065,6 @@
4187
4065
  min-height: 24px;
4188
4066
  min-width: 24px;
4189
4067
  -webkit-print-color-adjust: exact;
4190
- print-color-adjust: exact;
4191
4068
  -webkit-user-select: none;
4192
4069
  user-select: none;
4193
4070
  vertical-align: top;
@@ -4376,7 +4253,7 @@
4376
4253
  var(--utrecht-radio-button-focus-color)
4377
4254
  );
4378
4255
  }
4379
- .utrecht-radio-button--html-input:focus-visible {
4256
+ .utrecht-radio-button--html-input[prince-xml-ignore-pseudo-class-focus-visible] {
4380
4257
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4381
4258
  var(--utrecht-focus-inverse-outline-color, transparent);
4382
4259
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6181,7 +6058,7 @@
6181
6058
  }
6182
6059
  .utrecht-search-bar {
6183
6060
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6184
- --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
6061
+ --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
6185
6062
  --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
6186
6063
  --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
6187
6064
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
@@ -6206,7 +6083,7 @@
6206
6083
  border-color: var(--utrecht-search-bar-dropdown-border-color);
6207
6084
  border-style: solid;
6208
6085
  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));
6086
+ width: var(--utrecht-search-bar-dropdown-inline-size, var(--utrecht-form-control-max-inline-size));
6210
6087
  max-height: var(--utrecht-search-bar-dropdown-max-block-size);
6211
6088
  overflow: auto;
6212
6089
  padding-bottom: var(--utrecht-search-bar-dropdown-padding-block-end);
@@ -6254,6 +6131,7 @@
6254
6131
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
6255
6132
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
6256
6133
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
6134
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
6257
6135
  width: 100%;
6258
6136
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6259
6137
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -6323,7 +6201,7 @@
6323
6201
  outline-style: var(--utrecht-focus-outline-style, revert);
6324
6202
  outline-width: var(--utrecht-focus-outline-width, revert);
6325
6203
  }
6326
- .utrecht-select--html-select:focus:not(:focus-visible) {
6204
+ .utrecht-select--html-select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
6327
6205
  box-shadow: none;
6328
6206
  outline-style: revert;
6329
6207
  }
@@ -6398,7 +6276,7 @@
6398
6276
 
6399
6277
  .utrecht-skip-link--focus,
6400
6278
  .utrecht-skip-link:focus,
6401
- .utrecht-skip-link:focus-visible {
6279
+ .utrecht-skip-link[prince-xml-ignore-pseudo-class-focus-visible] {
6402
6280
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6403
6281
  var(--utrecht-focus-inverse-outline-color, transparent);
6404
6282
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6437,6 +6315,22 @@
6437
6315
  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-warning-border-width);
6438
6316
  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
6439
6317
  }
6318
+
6319
+ .utrecht-spotlight-section--error {
6320
+ --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-error-color);
6321
+ --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-error-background-color);
6322
+ --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-error-border-color);
6323
+ --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-error-border-width);
6324
+ --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-error-color);
6325
+ }
6326
+
6327
+ .utrecht-spotlight-section--ok {
6328
+ --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-ok-color);
6329
+ --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-ok-background-color);
6330
+ --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-ok-border-color);
6331
+ --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-ok-border-width);
6332
+ --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-ok-color);
6333
+ }
6440
6334
  .utrecht-surface {
6441
6335
  background-color: var(--utrecht-surface-background-color, inherit);
6442
6336
  color: var(--utrecht-surface-color, inherit);
@@ -6505,7 +6399,7 @@
6505
6399
  .utrecht-table__header {
6506
6400
  --_utrecht-table-header-cell-vertical-align: bottom;
6507
6401
  --_utrecht-table-header-cell-z-index: 8;
6508
- background-color: var(--utrecht-table-header-background-color);
6402
+ background-color: var(--utrecht-table-header-background-color, transparent);
6509
6403
  break-inside: avoid;
6510
6404
  color: var(--utrecht-table-header-color);
6511
6405
  font-weight: var(--utrecht-table-header-font-weight);
@@ -6514,7 +6408,7 @@
6514
6408
  }
6515
6409
 
6516
6410
  .utrecht-table__header--sticky th {
6517
- background-color: var(--utrecht-table-header-sticky-background-color);
6411
+ background-color: var(--utrecht-table-header-sticky-background-color, transparent);
6518
6412
  color: var(--utrecht-table-header-sticky-color);
6519
6413
  top: 0;
6520
6414
  position: sticky;
@@ -6531,7 +6425,7 @@
6531
6425
  }
6532
6426
 
6533
6427
  .utrecht-table__footer--sticky {
6534
- background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color));
6428
+ background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
6535
6429
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
6536
6430
  bottom: 0;
6537
6431
  position: sticky;
@@ -6666,12 +6560,12 @@
6666
6560
  }
6667
6561
 
6668
6562
  .utrecht-table__row--alternate-odd {
6669
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
6563
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6670
6564
  color: var(--utrecht-table-row-alternate-odd-color);
6671
6565
  }
6672
6566
 
6673
6567
  .utrecht-table__row--alternate-even {
6674
- background-color: var(--utrecht-table-row-alternate-even-background-color);
6568
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6675
6569
  color: var(--utrecht-table-row-alternate-even-color);
6676
6570
  }
6677
6571
 
@@ -6731,11 +6625,11 @@
6731
6625
  }
6732
6626
 
6733
6627
  .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);
6628
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
6735
6629
  color: var(--utrecht-table-row-alternate-odd-color);
6736
6630
  }
6737
6631
  .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);
6632
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
6739
6633
  color: var(--utrecht-table-row-alternate-even-color);
6740
6634
  }
6741
6635
 
@@ -6750,11 +6644,47 @@
6750
6644
  background-color: papayawhip;
6751
6645
  color: maroon;
6752
6646
  }
6647
+ .utrecht-table-of-contents {
6648
+ page-break-inside: avoid;
6649
+ }
6650
+
6651
+ .utrecht-table-of-contents__list {
6652
+ list-style-type: none;
6653
+ padding-left: 0;
6654
+ page-break-inside: avoid;
6655
+ -prince-pdf-tag-type: TOC;
6656
+ margin-left: 0;
6657
+ margin-top: 0;
6658
+ margin-right: 0;
6659
+ }
6660
+
6661
+ .utrecht-table-of-contents__list-item {
6662
+ margin-bottom: var(--utrecht-unordered-list-item-margin-block-end);
6663
+ margin-top: var(--utrecht-unordered-list-item-margin-block-start);
6664
+ -prince-pdf-tag-type: TOCI;
6665
+ }
6666
+
6667
+ .utrecht-table-of-contents__list-item::before {
6668
+ content: "";
6669
+ }
6670
+
6671
+ .utrecht-table-of-contents__list-item-body {
6672
+ -prince-pdf-tag-type: P;
6673
+ }
6674
+
6675
+ .utrecht-table-of-contents__list-item-label {
6676
+ font-variant-numeric: lining-nums tabular-nums;
6677
+ -prince-pdf-tag-type: Lbl;
6678
+ }
6679
+
6680
+ .utrecht-table-of-contents__list-item-title {
6681
+ -prince-pdf-tag-type: Span;
6682
+ }
6753
6683
  .utrecht-textarea {
6754
6684
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
6755
6685
  height: initial;
6756
6686
  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)));
6687
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
6758
6688
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
6759
6689
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
6760
6690
  border-style: solid;
@@ -6762,7 +6692,7 @@
6762
6692
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
6763
6693
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
6764
6694
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
6765
- font-weight: initial;
6695
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
6766
6696
  width: 100%;
6767
6697
  line-height: var(--utrecht-textarea-line-height, initial);
6768
6698
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6795,7 +6725,7 @@
6795
6725
  );
6796
6726
  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
6727
  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)))));
6728
+ 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
6729
  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
6730
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6801
6731
  }
@@ -6849,7 +6779,7 @@
6849
6779
  outline-style: var(--utrecht-focus-outline-style, revert);
6850
6780
  outline-width: var(--utrecht-focus-outline-width, revert);
6851
6781
  }
6852
- .utrecht-textarea--html-textarea:focus:not(:focus-visible) {
6782
+ .utrecht-textarea--html-textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
6853
6783
  box-shadow: none;
6854
6784
  outline-style: revert;
6855
6785
  }
@@ -6863,7 +6793,7 @@
6863
6793
  );
6864
6794
  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
6795
  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)))));
6796
+ 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
6797
  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
6798
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6869
6799
  }
@@ -6878,7 +6808,7 @@
6878
6808
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6879
6809
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6880
6810
  }
6881
- .utrecht-textarea--html-textarea::placeholder {
6811
+ .utrecht-textarea--html-textarea[prince-xml-ignore-pseudo-element-placeholder] {
6882
6812
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6883
6813
  font-style: var(--utrecht-form-control-placeholder-font-style);
6884
6814
  opacity: 100%;
@@ -6903,7 +6833,7 @@
6903
6833
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
6904
6834
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
6905
6835
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
6906
- font-weight: initial;
6836
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
6907
6837
  width: 100%;
6908
6838
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6909
6839
  min-height: var(--utrecht-pointer-target-min-size, 44px);
@@ -7019,10 +6949,10 @@
7019
6949
  .utrecht-textbox--iban-nl-size {
7020
6950
  --utrecht-textbox-value-max-length: 22;
7021
6951
  }
7022
- .utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
6952
+ .utrecht-textbox--placeholder-ltr[prince-xml-ignore-pseudo-element-placeholder], .utrecht-textbox--placeholder-ltr[prince-xml-ignore-pseudo-class-placeholder-shown] {
7023
6953
  direction: ltr;
7024
6954
  }
7025
- .utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
6955
+ .utrecht-textbox--placeholder-rtl[prince-xml-ignore-pseudo-element-placeholder], .utrecht-textbox--placeholder-rtl[prince-xml-ignore-pseudo-class-placeholder-shown] {
7026
6956
  direction: rtl;
7027
6957
  }
7028
6958
 
@@ -7044,7 +6974,7 @@
7044
6974
  outline-style: var(--utrecht-focus-outline-style, revert);
7045
6975
  outline-width: var(--utrecht-focus-outline-width, revert);
7046
6976
  }
7047
- .utrecht-textbox--html-input:focus:not(:focus-visible) {
6977
+ .utrecht-textbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7048
6978
  box-shadow: none;
7049
6979
  outline-style: revert;
7050
6980
  }
@@ -7073,7 +7003,7 @@
7073
7003
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
7074
7004
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
7075
7005
  }
7076
- .utrecht-textbox--html-input::placeholder {
7006
+ .utrecht-textbox--html-input[prince-xml-ignore-pseudo-element-placeholder] {
7077
7007
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
7078
7008
  font-style: var(--utrecht-form-control-placeholder-font-style);
7079
7009
  opacity: 100%;
@@ -7129,7 +7059,7 @@
7129
7059
  background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
7130
7060
  color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
7131
7061
  }
7132
- .utrecht-toptask-link:focus:not(:focus-visible) {
7062
+ .utrecht-toptask-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7133
7063
  box-shadow: none;
7134
7064
  outline-style: revert;
7135
7065
  }
@@ -7443,7 +7373,7 @@
7443
7373
  color: var(--_utrecht-button-color);
7444
7374
  cursor: var(--utrecht-action-activate-cursor, revert);
7445
7375
  display: inline-flex;
7446
- font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
7376
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
7447
7377
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
7448
7378
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
7449
7379
  gap: var(--utrecht-button-icon-gap);
@@ -7502,7 +7432,7 @@
7502
7432
  color: var(--_utrecht-button-focus-color);
7503
7433
  scale: var(--utrecht-button-focus-scale, 1);
7504
7434
  }
7505
- .utrecht-html button:focus-visible {
7435
+ .utrecht-html button[prince-xml-ignore-pseudo-class-focus-visible] {
7506
7436
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7507
7437
  var(--utrecht-focus-inverse-outline-color, transparent);
7508
7438
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7539,7 +7469,7 @@
7539
7469
  outline-style: var(--utrecht-focus-outline-style, revert);
7540
7470
  outline-width: var(--utrecht-focus-outline-width, revert);
7541
7471
  }
7542
- .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
7472
+ .utrecht-html input[type=checkbox i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7543
7473
  box-shadow: none;
7544
7474
  outline-style: revert;
7545
7475
  }
@@ -7631,12 +7561,14 @@
7631
7561
  font-size: var(--utrecht-form-label-font-size);
7632
7562
  font-weight: var(--utrecht-form-label-font-weight);
7633
7563
  }
7634
- .utrecht-html input[type=checkbox i] ~ label {
7564
+ .utrecht-html input[type=checkbox i] ~ label,
7565
+ .utrecht-html label:has(input[type=checkbox i]) {
7635
7566
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7636
7567
  cursor: var(--utrecht-action-activate-cursor, revert);
7637
7568
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
7638
7569
  }
7639
- .utrecht-html input[type=radio i] ~ label {
7570
+ .utrecht-html input[type=radio i] ~ label,
7571
+ .utrecht-html label:has(input[type=radio i]) {
7640
7572
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
7641
7573
  cursor: var(--utrecht-action-activate-cursor, revert);
7642
7574
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
@@ -7783,7 +7715,7 @@
7783
7715
  outline-width: var(--utrecht-focus-outline-width, revert);
7784
7716
  z-index: var(--utrecht-stack-focus-z-index, 1);
7785
7717
  }
7786
- .utrecht-html a:focus:not(:focus-visible) {
7718
+ .utrecht-html a:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7787
7719
  box-shadow: none;
7788
7720
  outline-style: revert;
7789
7721
  }
@@ -7909,7 +7841,6 @@
7909
7841
  min-height: 24px;
7910
7842
  min-width: 24px;
7911
7843
  -webkit-print-color-adjust: exact;
7912
- print-color-adjust: exact;
7913
7844
  -webkit-user-select: none;
7914
7845
  user-select: none;
7915
7846
  vertical-align: top;
@@ -7982,7 +7913,7 @@
7982
7913
  var(--utrecht-radio-button-focus-color)
7983
7914
  );
7984
7915
  }
7985
- .utrecht-html input[type=radio i]:focus-visible {
7916
+ .utrecht-html input[type=radio i][prince-xml-ignore-pseudo-class-focus-visible] {
7986
7917
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7987
7918
  var(--utrecht-focus-inverse-outline-color, transparent);
7988
7919
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -8039,6 +7970,7 @@
8039
7970
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
8040
7971
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
8041
7972
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
7973
+ font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
8042
7974
  width: 100%;
8043
7975
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
8044
7976
  min-width: var(--utrecht-pointer-target-min-size, 44px);
@@ -8065,7 +7997,7 @@
8065
7997
  outline-style: var(--utrecht-focus-outline-style, revert);
8066
7998
  outline-width: var(--utrecht-focus-outline-width, revert);
8067
7999
  }
8068
- .utrecht-html select:focus:not(:focus-visible) {
8000
+ .utrecht-html select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8069
8001
  box-shadow: none;
8070
8002
  outline-style: revert;
8071
8003
  }
@@ -8124,7 +8056,7 @@
8124
8056
  .utrecht-html thead {
8125
8057
  --_utrecht-table-header-cell-vertical-align: bottom;
8126
8058
  --_utrecht-table-header-cell-z-index: 8;
8127
- background-color: var(--utrecht-table-header-background-color);
8059
+ background-color: var(--utrecht-table-header-background-color, transparent);
8128
8060
  break-inside: avoid;
8129
8061
  color: var(--utrecht-table-header-color);
8130
8062
  font-weight: var(--utrecht-table-header-font-weight);
@@ -8190,26 +8122,26 @@
8190
8122
  font-variant-numeric: lining-nums tabular-nums;
8191
8123
  }
8192
8124
  .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);
8125
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8194
8126
  color: var(--utrecht-table-row-alternate-even-color);
8195
8127
  }
8196
8128
  .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);
8129
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8198
8130
  color: var(--utrecht-table-row-alternate-odd-color);
8199
8131
  }
8200
8132
  .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);
8133
+ background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
8202
8134
  color: var(--utrecht-table-row-alternate-even-color);
8203
8135
  }
8204
8136
  .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);
8137
+ background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
8206
8138
  color: var(--utrecht-table-row-alternate-odd-color);
8207
8139
  }
8208
8140
  .utrecht-html textarea {
8209
8141
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8210
8142
  height: initial;
8211
8143
  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)));
8144
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8213
8145
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
8214
8146
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
8215
8147
  border-style: solid;
@@ -8217,7 +8149,7 @@
8217
8149
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
8218
8150
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
8219
8151
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
8220
- font-weight: initial;
8152
+ font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
8221
8153
  width: 100%;
8222
8154
  line-height: var(--utrecht-textarea-line-height, initial);
8223
8155
  max-width: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -8251,7 +8183,7 @@
8251
8183
  outline-style: var(--utrecht-focus-outline-style, revert);
8252
8184
  outline-width: var(--utrecht-focus-outline-width, revert);
8253
8185
  }
8254
- .utrecht-html textarea:focus:not(:focus-visible) {
8186
+ .utrecht-html textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8255
8187
  box-shadow: none;
8256
8188
  outline-style: revert;
8257
8189
  }
@@ -8265,7 +8197,7 @@
8265
8197
  );
8266
8198
  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
8199
  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)))));
8200
+ 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
8201
  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
8202
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8271
8203
  }
@@ -8280,7 +8212,7 @@
8280
8212
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8281
8213
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
8282
8214
  }
8283
- .utrecht-html textarea::placeholder {
8215
+ .utrecht-html textarea[prince-xml-ignore-pseudo-element-placeholder] {
8284
8216
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8285
8217
  font-style: var(--utrecht-form-control-placeholder-font-style);
8286
8218
  opacity: 100%;
@@ -8317,7 +8249,7 @@
8317
8249
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8318
8250
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8319
8251
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8320
- font-weight: initial;
8252
+ font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8321
8253
  width: 100%;
8322
8254
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
8323
8255
  min-height: var(--utrecht-pointer-target-min-size, 44px);
@@ -8373,19 +8305,19 @@
8373
8305
  outline-style: var(--utrecht-focus-outline-style, revert);
8374
8306
  outline-width: var(--utrecht-focus-outline-width, revert);
8375
8307
  }
8376
- .utrecht-html input:not([type]):focus:not(:focus-visible),
8377
- .utrecht-html input[type=date i]:focus:not(:focus-visible),
8378
- .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
8379
- .utrecht-html input[type=email i]:focus:not(:focus-visible),
8380
- .utrecht-html input[type=month i]:focus:not(:focus-visible),
8381
- .utrecht-html input[type=number i]:focus:not(:focus-visible),
8382
- .utrecht-html input[type=password i]:focus:not(:focus-visible),
8383
- .utrecht-html input[type=search i]:focus:not(:focus-visible),
8384
- .utrecht-html input[type=tel i]:focus:not(:focus-visible),
8385
- .utrecht-html input[type=text i]:focus:not(:focus-visible),
8386
- .utrecht-html input[type=time i]:focus:not(:focus-visible),
8387
- .utrecht-html input[type=url i]:focus:not(:focus-visible),
8388
- .utrecht-html input[type=week i]:focus:not(:focus-visible) {
8308
+ .utrecht-html input:not([type]):focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8309
+ .utrecht-html input[type=date i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8310
+ .utrecht-html input[type=datetime-local i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8311
+ .utrecht-html input[type=email i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8312
+ .utrecht-html input[type=month i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8313
+ .utrecht-html input[type=number i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8314
+ .utrecht-html input[type=password i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8315
+ .utrecht-html input[type=search i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8316
+ .utrecht-html input[type=tel i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8317
+ .utrecht-html input[type=text i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8318
+ .utrecht-html input[type=time i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8319
+ .utrecht-html input[type=url i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8320
+ .utrecht-html input[type=week i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8389
8321
  box-shadow: none;
8390
8322
  outline-style: revert;
8391
8323
  }
@@ -8462,19 +8394,19 @@
8462
8394
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8463
8395
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
8464
8396
  }
8465
- .utrecht-html input:not([type])::placeholder,
8466
- .utrecht-html input[type=date i]::placeholder,
8467
- .utrecht-html input[type=datetime-local i]::placeholder,
8468
- .utrecht-html input[type=email i]::placeholder,
8469
- .utrecht-html input[type=month i]::placeholder,
8470
- .utrecht-html input[type=number i]::placeholder,
8471
- .utrecht-html input[type=password i]::placeholder,
8472
- .utrecht-html input[type=search i]::placeholder,
8473
- .utrecht-html input[type=tel i]::placeholder,
8474
- .utrecht-html input[type=text i]::placeholder,
8475
- .utrecht-html input[type=time i]::placeholder,
8476
- .utrecht-html input[type=url i]::placeholder,
8477
- .utrecht-html input[type=week i]::placeholder {
8397
+ .utrecht-html input:not([type])[prince-xml-ignore-pseudo-element-placeholder],
8398
+ .utrecht-html input[type=date i][prince-xml-ignore-pseudo-element-placeholder],
8399
+ .utrecht-html input[type=datetime-local i][prince-xml-ignore-pseudo-element-placeholder],
8400
+ .utrecht-html input[type=email i][prince-xml-ignore-pseudo-element-placeholder],
8401
+ .utrecht-html input[type=month i][prince-xml-ignore-pseudo-element-placeholder],
8402
+ .utrecht-html input[type=number i][prince-xml-ignore-pseudo-element-placeholder],
8403
+ .utrecht-html input[type=password i][prince-xml-ignore-pseudo-element-placeholder],
8404
+ .utrecht-html input[type=search i][prince-xml-ignore-pseudo-element-placeholder],
8405
+ .utrecht-html input[type=tel i][prince-xml-ignore-pseudo-element-placeholder],
8406
+ .utrecht-html input[type=text i][prince-xml-ignore-pseudo-element-placeholder],
8407
+ .utrecht-html input[type=time i][prince-xml-ignore-pseudo-element-placeholder],
8408
+ .utrecht-html input[type=url i][prince-xml-ignore-pseudo-element-placeholder],
8409
+ .utrecht-html input[type=week i][prince-xml-ignore-pseudo-element-placeholder] {
8478
8410
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8479
8411
  font-style: var(--utrecht-form-control-placeholder-font-style);
8480
8412
  opacity: 100%;