@utrecht/component-library-css 7.0.0 → 7.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 +11 -4
  2. package/dist/index.css +180 -46
  3. package/dist/prince-xml.css +193 -43
  4. package/package.json +96 -92
package/dist/html.css CHANGED
@@ -317,6 +317,7 @@
317
317
  outline-offset: var(--utrecht-focus-outline-offset, revert);
318
318
  outline-style: var(--utrecht-focus-outline-style, revert);
319
319
  outline-width: var(--utrecht-focus-outline-width, revert);
320
+ z-index: 1;
320
321
  }
321
322
  .utrecht-html input[type=checkbox i] {
322
323
  margin-block-end: 0;
@@ -338,6 +339,7 @@
338
339
  outline-offset: var(--utrecht-focus-outline-offset, revert);
339
340
  outline-style: var(--utrecht-focus-outline-style, revert);
340
341
  outline-width: var(--utrecht-focus-outline-width, revert);
342
+ z-index: 1;
341
343
  }
342
344
  .utrecht-html body {
343
345
  -webkit-font-smoothing: auto !important;
@@ -579,6 +581,7 @@
579
581
  outline-offset: var(--utrecht-focus-outline-offset, revert);
580
582
  outline-style: var(--utrecht-focus-outline-style, revert);
581
583
  outline-width: var(--utrecht-focus-outline-width, revert);
584
+ z-index: 1;
582
585
  --_utrecht-link-state-text-decoration: var(
583
586
  --utrecht-link-focus-visible-text-decoration,
584
587
  var(--utrecht-link-focus-text-decoration)
@@ -755,19 +758,19 @@
755
758
  }
756
759
  .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
757
760
  --_utrecht-radio-button-interactive-background-color: var(
758
- --utrecht-radio-button-focus-background-color,
761
+ --_utrecht-radio-button-state-focus-background-color,
759
762
  var(--utrecht-radio-button-focus-background-color)
760
763
  );
761
764
  --_utrecht-radio-button-interactive-border-color: var(
762
- --utrecht-radio-button-focus-border-color,
765
+ --_utrecht-radio-button-state-focus-border-color,
763
766
  var(--utrecht-radio-button-focus-border-color)
764
767
  );
765
768
  --_utrecht-radio-button-interactive-border-width: var(
766
- --utrecht-radio-button-focus-border-width,
769
+ --_utrecht-radio-button-state-focus-border-width,
767
770
  var(--utrecht-radio-button-focus-border-width)
768
771
  );
769
772
  --_utrecht-radio-button-interactive-color: var(
770
- --utrecht-radio-button-focus-color,
773
+ --_utrecht-radio-button-state-focus-color,
771
774
  var(--utrecht-radio-button-focus-color)
772
775
  );
773
776
  }
@@ -779,6 +782,7 @@
779
782
  outline-offset: var(--utrecht-focus-outline-offset, revert);
780
783
  outline-style: var(--utrecht-focus-outline-style, revert);
781
784
  outline-width: var(--utrecht-focus-outline-width, revert);
785
+ z-index: 1;
782
786
  }
783
787
  .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
784
788
  --_utrecht-radio-button-interactive-background-color: var(
@@ -857,6 +861,7 @@
857
861
  outline-offset: var(--utrecht-focus-outline-offset, revert);
858
862
  outline-style: var(--utrecht-focus-outline-style, revert);
859
863
  outline-width: var(--utrecht-focus-outline-width, revert);
864
+ z-index: 1;
860
865
  }
861
866
  .utrecht-html select:disabled {
862
867
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
@@ -1032,6 +1037,7 @@
1032
1037
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1033
1038
  outline-style: var(--utrecht-focus-outline-style, revert);
1034
1039
  outline-width: var(--utrecht-focus-outline-width, revert);
1040
+ z-index: 1;
1035
1041
  }
1036
1042
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1037
1043
  --_utrecht-textarea-border-width: var(
@@ -1143,6 +1149,7 @@
1143
1149
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1144
1150
  outline-style: var(--utrecht-focus-outline-style, revert);
1145
1151
  outline-width: var(--utrecht-focus-outline-width, revert);
1152
+ z-index: 1;
1146
1153
  }
1147
1154
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1148
1155
  .utrecht-html input[type=date i]:invalid,
package/dist/index.css CHANGED
@@ -3,6 +3,11 @@
3
3
  * Copyright (c) 2024-2025 Gemeente Utrecht
4
4
  * Copyright (c) 2024-2025 Frameless B.V.
5
5
  */
6
+ /**
7
+ * @license EUPL-1.2
8
+ * Copyright (c) 2020-2022 Gemeente Utrecht
9
+ * Copyright (c) 2020-2022 Frameless B.V.
10
+ */
6
11
  /**
7
12
  * @license EUPL-1.2
8
13
  * Copyright (c) 2023 Frameless B.V.
@@ -117,15 +122,19 @@
117
122
  padding-block-start: var(--utrecht-alert-padding-block-start);
118
123
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
119
124
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
125
+ align-self: center;
120
126
  border-color: var(--utrecht-alert-dialog-border-color);
121
127
  border-radius: var(--utrecht-alert-dialog-border-radius, 0);
122
128
  border-style: solid;
123
129
  border-width: var(--utrecht-alert-dialog-border-width, 0);
124
130
  box-shadow: var(--utrecht-alert-dialog-box-shadow);
125
- max-block-size: var(--utrecht-alert-dialog-max-block-size);
126
- max-inline-size: var(--utrecht-alert-dialog-max-inline-size);
131
+ justify-self: center;
132
+ max-block-size: min(var(--utrecht-alert-dialog-max-block-size), 100%);
133
+ max-inline-size: min(var(--utrecht-alert-dialog-max-inline-size), 100%);
127
134
  min-block-size: var(--utrecht-alert-dialog-min-block-size);
128
135
  min-inline-size: var(--utrecht-alert-dialog-min-inline-size);
136
+ overflow-y: auto;
137
+ overflow-block: auto;
129
138
  }
130
139
 
131
140
  .utrecht-alert-dialog::backdrop {
@@ -323,35 +332,6 @@
323
332
  border-width: 1px;
324
333
  }
325
334
  }
326
- .utrecht-badge-data {
327
- background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
328
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
329
- color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
330
- display: inline-block;
331
- font-family: var(--utrecht-document-font-family, sans-serif);
332
- font-size: var(--utrecht-badge-font-size, inherit);
333
- font-style: var(--utrecht-badge-font-style, normal);
334
- font-weight: var(--utrecht-badge-font-weight, bold);
335
- line-height: var(--utrecht-badge-line-height, 1em);
336
- max-block-size: max-content;
337
- max-inline-size: max-content;
338
- min-block-size: 1em;
339
- min-inline-size: 1em;
340
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
341
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
342
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
343
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
344
- text-decoration: none;
345
- letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
346
- text-transform: var(--utrecht-badge-data-text-transform, inherit);
347
- }
348
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
349
- .utrecht-badge-data {
350
- border-color: currentColor;
351
- border-style: solid;
352
- border-width: 1px;
353
- }
354
- }
355
335
  .utrecht-badge-list {
356
336
  column-gap: var(--utrecht-badge-list-column-gap);
357
337
  display: flex;
@@ -493,6 +473,27 @@
493
473
  color: var(--utrecht-blockquote-content-color, inherit);
494
474
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
495
475
  }
476
+ .utrecht-body {
477
+ block-size: 100%;
478
+ font-family: var(--utrecht-body-font-family, inherit);
479
+ font-size: var(--utrecht-body-font-size, inherit);
480
+ font-weight: var(--utrecht-body-font-weight, inherit);
481
+ line-height: var(--utrecht-body-line-height, inherit);
482
+ margin-block-end: 0;
483
+ margin-block-start: 0;
484
+ margin-inline-end: 0;
485
+ margin-inline-start: 0;
486
+ padding-block-end: 0;
487
+ padding-block-start: 0;
488
+ padding-inline-end: 0;
489
+ padding-inline-start: 0;
490
+ }
491
+ @media screen {
492
+ .utrecht-body {
493
+ min-block-size: 100vh;
494
+ min-block-size: 100vb;
495
+ }
496
+ }
496
497
  .utrecht-breadcrumb-nav {
497
498
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
498
499
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -658,6 +659,7 @@
658
659
  .utrecht-button-group {
659
660
  align-items: baseline;
660
661
  background-color: var(--utrecht-button-group-background-color);
662
+ break-inside: avoid;
661
663
  display: flex;
662
664
  flex-wrap: wrap;
663
665
  gap: var(--utrecht-button-group-inline-gap, 1em);
@@ -951,6 +953,7 @@
951
953
  outline-offset: var(--utrecht-focus-outline-offset, revert);
952
954
  outline-style: var(--utrecht-focus-outline-style, revert);
953
955
  outline-width: var(--utrecht-focus-outline-width, revert);
956
+ z-index: 1;
954
957
  }
955
958
 
956
959
  .utrecht-button-link--placeholder {
@@ -974,6 +977,7 @@
974
977
  outline-offset: var(--utrecht-focus-outline-offset, revert);
975
978
  outline-style: var(--utrecht-focus-outline-style, revert);
976
979
  outline-width: var(--utrecht-focus-outline-width, revert);
980
+ z-index: 1;
977
981
  }
978
982
  .utrecht-button-link--html-a:hover {
979
983
  background-color: var(--_utrecht-button-hover-background-color);
@@ -1336,6 +1340,7 @@
1336
1340
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1337
1341
  outline-style: var(--utrecht-focus-outline-style, revert);
1338
1342
  outline-width: var(--utrecht-focus-outline-width, revert);
1343
+ z-index: 1;
1339
1344
  }
1340
1345
 
1341
1346
  .utrecht-button--focus:not(.utrecht-button--disabled) {
@@ -1353,6 +1358,7 @@
1353
1358
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1354
1359
  outline-style: var(--utrecht-focus-outline-style, revert);
1355
1360
  outline-width: var(--utrecht-focus-outline-width, revert);
1361
+ z-index: 1;
1356
1362
  }
1357
1363
 
1358
1364
  .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
@@ -1829,6 +1835,7 @@
1829
1835
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1830
1836
  outline-style: var(--utrecht-focus-outline-style, revert);
1831
1837
  outline-width: var(--utrecht-focus-outline-width, revert);
1838
+ z-index: 1;
1832
1839
  }
1833
1840
 
1834
1841
  .utrecht-checkbox--html-input:disabled {
@@ -1842,6 +1849,7 @@
1842
1849
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1843
1850
  outline-style: var(--utrecht-focus-outline-style, revert);
1844
1851
  outline-width: var(--utrecht-focus-outline-width, revert);
1852
+ z-index: 1;
1845
1853
  }
1846
1854
  .utrecht-code-block {
1847
1855
  background-color: var(--utrecht-code-background-color);
@@ -2025,7 +2033,6 @@
2025
2033
  .utrecht-checkbox--custom.utrecht-checkbox--active,
2026
2034
  .utrecht-custom-checkbox--active {
2027
2035
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2028
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2029
2036
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2030
2037
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2031
2038
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -2041,7 +2048,6 @@
2041
2048
  .utrecht-checkbox--custom.utrecht-checkbox--focus,
2042
2049
  .utrecht-custom-checkbox--focus {
2043
2050
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2044
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2045
2051
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2046
2052
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2047
2053
  }
@@ -2055,6 +2061,7 @@
2055
2061
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2056
2062
  outline-style: var(--utrecht-focus-outline-style, revert);
2057
2063
  outline-width: var(--utrecht-focus-outline-width, revert);
2064
+ z-index: 1;
2058
2065
  }
2059
2066
 
2060
2067
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
@@ -2081,7 +2088,6 @@
2081
2088
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
2082
2089
  .utrecht-custom-checkbox--html-input:focus {
2083
2090
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2084
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2085
2091
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2086
2092
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2087
2093
  }
@@ -2094,6 +2100,7 @@
2094
2100
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2095
2101
  outline-style: var(--utrecht-focus-outline-style, revert);
2096
2102
  outline-width: var(--utrecht-focus-outline-width, revert);
2103
+ z-index: 1;
2097
2104
  }
2098
2105
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
2099
2106
  .utrecht-custom-checkbox--html-input:invalid,
@@ -2104,7 +2111,6 @@
2104
2111
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
2105
2112
  .utrecht-custom-checkbox--html-input:active {
2106
2113
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2107
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2108
2114
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2109
2115
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2110
2116
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -2125,6 +2131,27 @@
2125
2131
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2126
2132
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2127
2133
  }
2134
+ .utrecht-badge-data,
2135
+ .utrecht-data-badge {
2136
+ background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
2137
+ border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
2138
+ border-width: var(--utrecht-data-badge-border-width, 0);
2139
+ color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
2140
+ display: inline-block;
2141
+ font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif));
2142
+ font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit));
2143
+ font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold));
2144
+ line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em));
2145
+ max-block-size: max-content;
2146
+ max-inline-size: max-content;
2147
+ min-block-size: var(--utrecht-data-badge-min-block-size, 1em);
2148
+ min-inline-size: var(--utrecht-data-badge-min-inline-size, 1em);
2149
+ padding-block-end: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2150
+ padding-block-start: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2151
+ padding-inline-end: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2152
+ padding-inline-start: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2153
+ text-decoration: none;
2154
+ }
2128
2155
  .utrecht-data-list {
2129
2156
  display: block;
2130
2157
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
@@ -2640,6 +2667,7 @@
2640
2667
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2641
2668
  outline-style: var(--utrecht-focus-outline-style, revert);
2642
2669
  outline-width: var(--utrecht-focus-outline-width, revert);
2670
+ z-index: 1;
2643
2671
  }
2644
2672
 
2645
2673
  .utrecht-form-toggle--hover {
@@ -2708,6 +2736,7 @@
2708
2736
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2709
2737
  outline-style: var(--utrecht-focus-outline-style, revert);
2710
2738
  outline-width: var(--utrecht-focus-outline-width, revert);
2739
+ z-index: 1;
2711
2740
  }
2712
2741
 
2713
2742
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
@@ -2731,6 +2760,7 @@
2731
2760
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2732
2761
  outline-style: var(--utrecht-focus-outline-style, revert);
2733
2762
  outline-width: var(--utrecht-focus-outline-width, revert);
2763
+ z-index: 1;
2734
2764
  }
2735
2765
  .utrecht-form {
2736
2766
  display: block;
@@ -2906,6 +2936,7 @@
2906
2936
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2907
2937
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2908
2938
  align-items: center;
2939
+ border-radius: var(--utrecht-button-border-radius, 0);
2909
2940
  cursor: pointer;
2910
2941
  display: inline-flex;
2911
2942
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
@@ -2958,6 +2989,7 @@
2958
2989
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2959
2990
  outline-style: var(--utrecht-focus-outline-style, revert);
2960
2991
  outline-width: var(--utrecht-focus-outline-width, revert);
2992
+ z-index: 1;
2961
2993
  --_utrecht-link-state-text-decoration: var(
2962
2994
  --utrecht-link-focus-visible-text-decoration,
2963
2995
  var(--utrecht-link-focus-text-decoration)
@@ -3058,6 +3090,7 @@
3058
3090
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3059
3091
  outline-style: var(--utrecht-focus-outline-style, revert);
3060
3092
  outline-width: var(--utrecht-focus-outline-width, revert);
3093
+ z-index: 1;
3061
3094
  }
3062
3095
 
3063
3096
  .utrecht-link-social--distanced {
@@ -3106,6 +3139,7 @@
3106
3139
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3107
3140
  outline-style: var(--utrecht-focus-outline-style, revert);
3108
3141
  outline-width: var(--utrecht-focus-outline-width, revert);
3142
+ z-index: 1;
3109
3143
  --_utrecht-link-state-text-decoration: var(
3110
3144
  --utrecht-link-focus-visible-text-decoration,
3111
3145
  var(--utrecht-link-focus-text-decoration)
@@ -3125,6 +3159,7 @@
3125
3159
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3126
3160
  outline-style: var(--utrecht-focus-outline-style, revert);
3127
3161
  outline-width: var(--utrecht-focus-outline-width, revert);
3162
+ z-index: 1;
3128
3163
  --_utrecht-link-state-text-decoration: var(
3129
3164
  --utrecht-link-focus-visible-text-decoration,
3130
3165
  var(--utrecht-link-focus-text-decoration)
@@ -3215,6 +3250,7 @@
3215
3250
  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3216
3251
  inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3217
3252
  max-block-size: var(--utrecht-listbox-max-block-size);
3253
+ max-inline-size: 100%;
3218
3254
  min-block-size: 1em;
3219
3255
  overflow-block: auto;
3220
3256
  overflow-y: auto;
@@ -3263,6 +3299,7 @@
3263
3299
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3264
3300
  outline-style: var(--utrecht-focus-outline-style, revert);
3265
3301
  outline-width: var(--utrecht-focus-outline-width, revert);
3302
+ z-index: 1;
3266
3303
  }
3267
3304
 
3268
3305
  .utrecht-listbox--invalid {
@@ -3350,6 +3387,7 @@
3350
3387
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3351
3388
  outline-style: var(--utrecht-focus-outline-style, revert);
3352
3389
  outline-width: var(--utrecht-focus-outline-width, revert);
3390
+ z-index: 1;
3353
3391
  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
3354
3392
  }
3355
3393
 
@@ -3407,6 +3445,7 @@
3407
3445
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3408
3446
  outline-style: var(--utrecht-focus-outline-style, revert);
3409
3447
  outline-width: var(--utrecht-focus-outline-width, revert);
3448
+ z-index: 1;
3410
3449
  }
3411
3450
 
3412
3451
  .utrecht-listbox--forced-colors {
@@ -3524,8 +3563,8 @@
3524
3563
  .utrecht-nav-bar {
3525
3564
  background-color: var(--utrecht-nav-bar-background-color);
3526
3565
  color: var(--utrecht-nav-bar-color);
3527
- display: flex;
3528
- justify-content: center;
3566
+ display: grid;
3567
+ inline-size: 100%;
3529
3568
  }
3530
3569
  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
3531
3570
  .utrecht-nav-bar {
@@ -3542,11 +3581,14 @@
3542
3581
 
3543
3582
  .utrecht-nav-bar__content {
3544
3583
  align-items: stretch;
3584
+ background-color: var(--utrecht-nav-bar-content-background-color);
3585
+ color: var(--utrecht-nav-bar-content-color);
3545
3586
  display: flex;
3546
3587
  flex-direction: row;
3547
3588
  flex-wrap: wrap;
3548
3589
  inline-size: 100%;
3549
3590
  justify-content: space-between;
3591
+ justify-self: center;
3550
3592
  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
3551
3593
  }
3552
3594
  .utrecht-nav-list {
@@ -3657,6 +3699,27 @@
3657
3699
  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
3658
3700
  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
3659
3701
  }
3702
+ .utrecht-page-body {
3703
+ background-color: var(--utrecht-page-body-background-color);
3704
+ box-sizing: border-box;
3705
+ color: var(--utrecht-page-body-color);
3706
+ display: grid;
3707
+ flex-grow: 1;
3708
+ inline-size: 100%;
3709
+ }
3710
+
3711
+ .utrecht-page-body__content {
3712
+ background-color: var(--utrecht-page-body-content-background-color);
3713
+ box-sizing: border-box;
3714
+ color: var(--utrecht-page-body-content-color);
3715
+ inline-size: 100%;
3716
+ justify-self: center;
3717
+ max-inline-size: var(--utrecht-page-body-content-max-inline-size);
3718
+ padding-block-end: var(--utrecht-page-body-content-padding-block-end);
3719
+ padding-block-start: var(--utrecht-page-body-content-padding-block-start);
3720
+ padding-inline-end: var(--utrecht-page-body-content-padding-inline-end);
3721
+ padding-inline-start: var(--utrecht-page-body-content-padding-inline-start);
3722
+ }
3660
3723
  .utrecht-page-content {
3661
3724
  padding-block-end: var(--utrecht-page-content-padding-block-end);
3662
3725
  padding-block-start: var(--utrecht-page-content-padding-block-start);
@@ -3681,15 +3744,30 @@
3681
3744
  --utrecht-link-visited-color: currentColor;
3682
3745
  background-color: var(--utrecht-page-footer-background-color);
3683
3746
  background-image: var(--utrecht-page-footer-background-image);
3747
+ box-sizing: border-box;
3684
3748
  color: var(--utrecht-page-footer-color);
3749
+ display: grid;
3685
3750
  font-family: var(--utrecht-document-font-family);
3686
3751
  font-size: var(--utrecht-document-font-size);
3752
+ inline-size: 100%;
3687
3753
  padding-block-end: var(--utrecht-page-footer-padding-block-end);
3688
3754
  padding-block-start: var(--utrecht-page-footer-padding-block-start);
3689
3755
  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
3690
3756
  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
3691
3757
  }
3692
3758
 
3759
+ .utrecht-page-footer__content {
3760
+ background-color: var(--utrecht-page-footer-content-background-color);
3761
+ box-sizing: border-box;
3762
+ color: var(--utrecht-page-footer-content-color);
3763
+ inline-size: 100%;
3764
+ justify-self: center;
3765
+ max-inline-size: var(--utrecht-page-footer-content-max-inline-size);
3766
+ padding-block-end: var(--utrecht-page-footer-content-padding-block-end);
3767
+ padding-block-start: var(--utrecht-page-footer-content-padding-block-start);
3768
+ padding-inline: var(--utrecht-page-footer-content-padding-inline);
3769
+ }
3770
+
3693
3771
  .utrecht-page-footer__address--reset-address {
3694
3772
  font-style: inherit;
3695
3773
  margin-block-end: 0;
@@ -3697,8 +3775,14 @@
3697
3775
  }
3698
3776
  .utrecht-page-header {
3699
3777
  background-color: var(--utrecht-page-header-background-color);
3778
+ border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor);
3779
+ border-block-end-style: solid;
3780
+ border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0);
3781
+ box-sizing: border-box;
3700
3782
  color: var(--utrecht-page-header-color);
3783
+ display: grid;
3701
3784
  grid-area: "utrecht-header";
3785
+ inline-size: 100%;
3702
3786
  padding-block-end: var(--utrecht-page-header-padding-block-end);
3703
3787
  padding-block-start: var(--utrecht-page-header-padding-block-start);
3704
3788
  padding-inline-end: var(--utrecht-page-padding-inline-end);
@@ -3706,7 +3790,23 @@
3706
3790
  }
3707
3791
 
3708
3792
  .utrecht-page-header__content {
3709
- max-inline-size: var(--utrecht-page-max-inline-size);
3793
+ background-color: var(--utrecht-page-header-content-background-color);
3794
+ box-sizing: border-box;
3795
+ color: var(--utrecht-page-header-content-color);
3796
+ inline-size: 100%;
3797
+ justify-self: center;
3798
+ max-inline-size: var(--utrecht-page-header-content-max-inline-size);
3799
+ padding-block-end: var(--utrecht-page-header-content-padding-block-end);
3800
+ padding-block-start: var(--utrecht-page-header-content-padding-block-start);
3801
+ padding-inline: var(--utrecht-page-header-content-padding-inline);
3802
+ }
3803
+ .utrecht-page-layout {
3804
+ align-items: flex-start;
3805
+ block-size: 100%;
3806
+ display: flex;
3807
+ flex-direction: column;
3808
+ inline-size: 100%;
3809
+ justify-content: flex-start;
3710
3810
  }
3711
3811
  .utrecht-page {
3712
3812
  margin-inline-end: auto;
@@ -3812,6 +3912,7 @@
3812
3912
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3813
3913
  outline-style: var(--utrecht-focus-outline-style, revert);
3814
3914
  outline-width: var(--utrecht-focus-outline-width, revert);
3915
+ z-index: 1;
3815
3916
  }
3816
3917
  .utrecht-paragraph {
3817
3918
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
@@ -3954,19 +4055,19 @@
3954
4055
 
3955
4056
  .utrecht-radio-button--focus {
3956
4057
  --_utrecht-radio-button-interactive-background-color: var(
3957
- --utrecht-radio-button-focus-background-color,
4058
+ --_utrecht-radio-button-state-focus-background-color,
3958
4059
  var(--utrecht-radio-button-focus-background-color)
3959
4060
  );
3960
4061
  --_utrecht-radio-button-interactive-border-color: var(
3961
- --utrecht-radio-button-focus-border-color,
4062
+ --_utrecht-radio-button-state-focus-border-color,
3962
4063
  var(--utrecht-radio-button-focus-border-color)
3963
4064
  );
3964
4065
  --_utrecht-radio-button-interactive-border-width: var(
3965
- --utrecht-radio-button-focus-border-width,
4066
+ --_utrecht-radio-button-state-focus-border-width,
3966
4067
  var(--utrecht-radio-button-focus-border-width)
3967
4068
  );
3968
4069
  --_utrecht-radio-button-interactive-color: var(
3969
- --utrecht-radio-button-focus-color,
4070
+ --_utrecht-radio-button-state-focus-color,
3970
4071
  var(--utrecht-radio-button-focus-color)
3971
4072
  );
3972
4073
  }
@@ -3979,6 +4080,7 @@
3979
4080
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3980
4081
  outline-style: var(--utrecht-focus-outline-style, revert);
3981
4082
  outline-width: var(--utrecht-focus-outline-width, revert);
4083
+ z-index: 1;
3982
4084
  }
3983
4085
 
3984
4086
  .utrecht-radio-button--active {
@@ -4091,19 +4193,19 @@
4091
4193
  }
4092
4194
  .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
4093
4195
  --_utrecht-radio-button-interactive-background-color: var(
4094
- --utrecht-radio-button-focus-background-color,
4196
+ --_utrecht-radio-button-state-focus-background-color,
4095
4197
  var(--utrecht-radio-button-focus-background-color)
4096
4198
  );
4097
4199
  --_utrecht-radio-button-interactive-border-color: var(
4098
- --utrecht-radio-button-focus-border-color,
4200
+ --_utrecht-radio-button-state-focus-border-color,
4099
4201
  var(--utrecht-radio-button-focus-border-color)
4100
4202
  );
4101
4203
  --_utrecht-radio-button-interactive-border-width: var(
4102
- --utrecht-radio-button-focus-border-width,
4204
+ --_utrecht-radio-button-state-focus-border-width,
4103
4205
  var(--utrecht-radio-button-focus-border-width)
4104
4206
  );
4105
4207
  --_utrecht-radio-button-interactive-color: var(
4106
- --utrecht-radio-button-focus-color,
4208
+ --_utrecht-radio-button-state-focus-color,
4107
4209
  var(--utrecht-radio-button-focus-color)
4108
4210
  );
4109
4211
  }
@@ -4115,6 +4217,7 @@
4115
4217
  outline-offset: var(--utrecht-focus-outline-offset, revert);
4116
4218
  outline-style: var(--utrecht-focus-outline-style, revert);
4117
4219
  outline-width: var(--utrecht-focus-outline-width, revert);
4220
+ z-index: 1;
4118
4221
  }
4119
4222
  .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
4120
4223
  --_utrecht-radio-button-interactive-background-color: var(
@@ -5910,6 +6013,27 @@
5910
6013
  .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
5911
6014
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
5912
6015
  }
6016
+ .utrecht-root {
6017
+ -webkit-font-smoothing: auto !important;
6018
+ -moz-osx-font-smoothing: auto !important;
6019
+ background-color: var(--utrecht-root-background-color);
6020
+ block-size: 100%;
6021
+ color: var(--utrecht-root-color);
6022
+ font-family: var(--utrecht-root-font-family);
6023
+ -webkit-hyphens: auto;
6024
+ -moz-hyphens: auto;
6025
+ -ms-hyphens: auto;
6026
+ hyphens: auto;
6027
+ inline-size: 100%;
6028
+ overflow-block: auto;
6029
+ overflow-inline: auto;
6030
+ position: relative;
6031
+ text-rendering: optimizeLegibility;
6032
+ -moz-text-size-adjust: none;
6033
+ -webkit-text-size-adjust: none;
6034
+ text-size-adjust: none;
6035
+ word-break: break-word;
6036
+ }
5913
6037
  .utrecht-search-bar {
5914
6038
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
5915
6039
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -6024,6 +6148,7 @@
6024
6148
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6025
6149
  outline-style: var(--utrecht-focus-outline-style, revert);
6026
6150
  outline-width: var(--utrecht-focus-outline-width, revert);
6151
+ z-index: 1;
6027
6152
  }
6028
6153
 
6029
6154
  .utrecht-select--busy {
@@ -6063,6 +6188,7 @@
6063
6188
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6064
6189
  outline-style: var(--utrecht-focus-outline-style, revert);
6065
6190
  outline-width: var(--utrecht-focus-outline-width, revert);
6191
+ z-index: 1;
6066
6192
  }
6067
6193
  .utrecht-select--html-select:disabled {
6068
6194
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
@@ -6140,6 +6266,7 @@
6140
6266
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6141
6267
  outline-style: var(--utrecht-focus-outline-style, revert);
6142
6268
  outline-width: var(--utrecht-focus-outline-width, revert);
6269
+ z-index: 1;
6143
6270
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6144
6271
  }
6145
6272
 
@@ -6152,11 +6279,13 @@
6152
6279
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6153
6280
  outline-style: var(--utrecht-focus-outline-style, revert);
6154
6281
  outline-width: var(--utrecht-focus-outline-width, revert);
6282
+ z-index: 1;
6155
6283
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6156
6284
  }
6157
6285
  .utrecht-spotlight-section {
6158
6286
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
6159
6287
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
6288
+ border-radius: var(--utrecht-spotlight-section-border-radius, 0);
6160
6289
  border-style: solid;
6161
6290
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
6162
6291
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
@@ -6596,6 +6725,7 @@
6596
6725
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6597
6726
  outline-style: var(--utrecht-focus-outline-style, revert);
6598
6727
  outline-width: var(--utrecht-focus-outline-width, revert);
6728
+ z-index: 1;
6599
6729
  }
6600
6730
 
6601
6731
  .utrecht-textarea--read-only {
@@ -6625,6 +6755,7 @@
6625
6755
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6626
6756
  outline-style: var(--utrecht-focus-outline-style, revert);
6627
6757
  outline-width: var(--utrecht-focus-outline-width, revert);
6758
+ z-index: 1;
6628
6759
  }
6629
6760
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6630
6761
  --_utrecht-textarea-border-width: var(
@@ -6724,6 +6855,7 @@
6724
6855
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6725
6856
  outline-style: var(--utrecht-focus-outline-style, revert);
6726
6857
  outline-width: var(--utrecht-focus-outline-width, revert);
6858
+ z-index: 1;
6727
6859
  }
6728
6860
 
6729
6861
  .utrecht-textbox--read-only {
@@ -6809,6 +6941,7 @@
6809
6941
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6810
6942
  outline-style: var(--utrecht-focus-outline-style, revert);
6811
6943
  outline-width: var(--utrecht-focus-outline-width, revert);
6944
+ z-index: 1;
6812
6945
  }
6813
6946
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
6814
6947
  --_utrecht-textbox-border-width: var(
@@ -6885,6 +7018,7 @@
6885
7018
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6886
7019
  outline-style: var(--utrecht-focus-outline-style, revert);
6887
7020
  outline-width: var(--utrecht-focus-outline-width, revert);
7021
+ z-index: 1;
6888
7022
  }
6889
7023
 
6890
7024
  .utrecht-toptask-link--focus, .utrecht-toptask-link:focus {