@utrecht/component-library-css 7.0.0 → 7.1.1

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 +12 -4
  2. package/dist/index.css +181 -46
  3. package/dist/prince-xml.css +195 -43
  4. package/package.json +100 -94
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 {
@@ -3629,6 +3671,7 @@
3629
3671
  font-family: var(--utrecht-document-font-family, inherit);
3630
3672
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
3631
3673
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
3674
+ list-style-type: decimal;
3632
3675
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
3633
3676
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
3634
3677
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
@@ -3657,6 +3700,27 @@
3657
3700
  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
3658
3701
  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
3659
3702
  }
3703
+ .utrecht-page-body {
3704
+ background-color: var(--utrecht-page-body-background-color);
3705
+ box-sizing: border-box;
3706
+ color: var(--utrecht-page-body-color);
3707
+ display: grid;
3708
+ flex-grow: 1;
3709
+ inline-size: 100%;
3710
+ }
3711
+
3712
+ .utrecht-page-body__content {
3713
+ background-color: var(--utrecht-page-body-content-background-color);
3714
+ box-sizing: border-box;
3715
+ color: var(--utrecht-page-body-content-color);
3716
+ inline-size: 100%;
3717
+ justify-self: center;
3718
+ max-inline-size: var(--utrecht-page-body-content-max-inline-size);
3719
+ padding-block-end: var(--utrecht-page-body-content-padding-block-end);
3720
+ padding-block-start: var(--utrecht-page-body-content-padding-block-start);
3721
+ padding-inline-end: var(--utrecht-page-body-content-padding-inline-end);
3722
+ padding-inline-start: var(--utrecht-page-body-content-padding-inline-start);
3723
+ }
3660
3724
  .utrecht-page-content {
3661
3725
  padding-block-end: var(--utrecht-page-content-padding-block-end);
3662
3726
  padding-block-start: var(--utrecht-page-content-padding-block-start);
@@ -3681,15 +3745,30 @@
3681
3745
  --utrecht-link-visited-color: currentColor;
3682
3746
  background-color: var(--utrecht-page-footer-background-color);
3683
3747
  background-image: var(--utrecht-page-footer-background-image);
3748
+ box-sizing: border-box;
3684
3749
  color: var(--utrecht-page-footer-color);
3750
+ display: grid;
3685
3751
  font-family: var(--utrecht-document-font-family);
3686
3752
  font-size: var(--utrecht-document-font-size);
3753
+ inline-size: 100%;
3687
3754
  padding-block-end: var(--utrecht-page-footer-padding-block-end);
3688
3755
  padding-block-start: var(--utrecht-page-footer-padding-block-start);
3689
3756
  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
3690
3757
  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
3691
3758
  }
3692
3759
 
3760
+ .utrecht-page-footer__content {
3761
+ background-color: var(--utrecht-page-footer-content-background-color);
3762
+ box-sizing: border-box;
3763
+ color: var(--utrecht-page-footer-content-color);
3764
+ inline-size: 100%;
3765
+ justify-self: center;
3766
+ max-inline-size: var(--utrecht-page-footer-content-max-inline-size);
3767
+ padding-block-end: var(--utrecht-page-footer-content-padding-block-end);
3768
+ padding-block-start: var(--utrecht-page-footer-content-padding-block-start);
3769
+ padding-inline: var(--utrecht-page-footer-content-padding-inline);
3770
+ }
3771
+
3693
3772
  .utrecht-page-footer__address--reset-address {
3694
3773
  font-style: inherit;
3695
3774
  margin-block-end: 0;
@@ -3697,8 +3776,14 @@
3697
3776
  }
3698
3777
  .utrecht-page-header {
3699
3778
  background-color: var(--utrecht-page-header-background-color);
3779
+ border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor);
3780
+ border-block-end-style: solid;
3781
+ border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0);
3782
+ box-sizing: border-box;
3700
3783
  color: var(--utrecht-page-header-color);
3784
+ display: grid;
3701
3785
  grid-area: "utrecht-header";
3786
+ inline-size: 100%;
3702
3787
  padding-block-end: var(--utrecht-page-header-padding-block-end);
3703
3788
  padding-block-start: var(--utrecht-page-header-padding-block-start);
3704
3789
  padding-inline-end: var(--utrecht-page-padding-inline-end);
@@ -3706,7 +3791,23 @@
3706
3791
  }
3707
3792
 
3708
3793
  .utrecht-page-header__content {
3709
- max-inline-size: var(--utrecht-page-max-inline-size);
3794
+ background-color: var(--utrecht-page-header-content-background-color);
3795
+ box-sizing: border-box;
3796
+ color: var(--utrecht-page-header-content-color);
3797
+ inline-size: 100%;
3798
+ justify-self: center;
3799
+ max-inline-size: var(--utrecht-page-header-content-max-inline-size);
3800
+ padding-block-end: var(--utrecht-page-header-content-padding-block-end);
3801
+ padding-block-start: var(--utrecht-page-header-content-padding-block-start);
3802
+ padding-inline: var(--utrecht-page-header-content-padding-inline);
3803
+ }
3804
+ .utrecht-page-layout {
3805
+ align-items: flex-start;
3806
+ block-size: 100%;
3807
+ display: flex;
3808
+ flex-direction: column;
3809
+ inline-size: 100%;
3810
+ justify-content: flex-start;
3710
3811
  }
3711
3812
  .utrecht-page {
3712
3813
  margin-inline-end: auto;
@@ -3812,6 +3913,7 @@
3812
3913
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3813
3914
  outline-style: var(--utrecht-focus-outline-style, revert);
3814
3915
  outline-width: var(--utrecht-focus-outline-width, revert);
3916
+ z-index: 1;
3815
3917
  }
3816
3918
  .utrecht-paragraph {
3817
3919
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
@@ -3954,19 +4056,19 @@
3954
4056
 
3955
4057
  .utrecht-radio-button--focus {
3956
4058
  --_utrecht-radio-button-interactive-background-color: var(
3957
- --utrecht-radio-button-focus-background-color,
4059
+ --_utrecht-radio-button-state-focus-background-color,
3958
4060
  var(--utrecht-radio-button-focus-background-color)
3959
4061
  );
3960
4062
  --_utrecht-radio-button-interactive-border-color: var(
3961
- --utrecht-radio-button-focus-border-color,
4063
+ --_utrecht-radio-button-state-focus-border-color,
3962
4064
  var(--utrecht-radio-button-focus-border-color)
3963
4065
  );
3964
4066
  --_utrecht-radio-button-interactive-border-width: var(
3965
- --utrecht-radio-button-focus-border-width,
4067
+ --_utrecht-radio-button-state-focus-border-width,
3966
4068
  var(--utrecht-radio-button-focus-border-width)
3967
4069
  );
3968
4070
  --_utrecht-radio-button-interactive-color: var(
3969
- --utrecht-radio-button-focus-color,
4071
+ --_utrecht-radio-button-state-focus-color,
3970
4072
  var(--utrecht-radio-button-focus-color)
3971
4073
  );
3972
4074
  }
@@ -3979,6 +4081,7 @@
3979
4081
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3980
4082
  outline-style: var(--utrecht-focus-outline-style, revert);
3981
4083
  outline-width: var(--utrecht-focus-outline-width, revert);
4084
+ z-index: 1;
3982
4085
  }
3983
4086
 
3984
4087
  .utrecht-radio-button--active {
@@ -4091,19 +4194,19 @@
4091
4194
  }
4092
4195
  .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
4093
4196
  --_utrecht-radio-button-interactive-background-color: var(
4094
- --utrecht-radio-button-focus-background-color,
4197
+ --_utrecht-radio-button-state-focus-background-color,
4095
4198
  var(--utrecht-radio-button-focus-background-color)
4096
4199
  );
4097
4200
  --_utrecht-radio-button-interactive-border-color: var(
4098
- --utrecht-radio-button-focus-border-color,
4201
+ --_utrecht-radio-button-state-focus-border-color,
4099
4202
  var(--utrecht-radio-button-focus-border-color)
4100
4203
  );
4101
4204
  --_utrecht-radio-button-interactive-border-width: var(
4102
- --utrecht-radio-button-focus-border-width,
4205
+ --_utrecht-radio-button-state-focus-border-width,
4103
4206
  var(--utrecht-radio-button-focus-border-width)
4104
4207
  );
4105
4208
  --_utrecht-radio-button-interactive-color: var(
4106
- --utrecht-radio-button-focus-color,
4209
+ --_utrecht-radio-button-state-focus-color,
4107
4210
  var(--utrecht-radio-button-focus-color)
4108
4211
  );
4109
4212
  }
@@ -4115,6 +4218,7 @@
4115
4218
  outline-offset: var(--utrecht-focus-outline-offset, revert);
4116
4219
  outline-style: var(--utrecht-focus-outline-style, revert);
4117
4220
  outline-width: var(--utrecht-focus-outline-width, revert);
4221
+ z-index: 1;
4118
4222
  }
4119
4223
  .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
4120
4224
  --_utrecht-radio-button-interactive-background-color: var(
@@ -5910,6 +6014,27 @@
5910
6014
  .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
5911
6015
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
5912
6016
  }
6017
+ .utrecht-root {
6018
+ -webkit-font-smoothing: auto !important;
6019
+ -moz-osx-font-smoothing: auto !important;
6020
+ background-color: var(--utrecht-root-background-color);
6021
+ block-size: 100%;
6022
+ color: var(--utrecht-root-color);
6023
+ font-family: var(--utrecht-root-font-family);
6024
+ -webkit-hyphens: auto;
6025
+ -moz-hyphens: auto;
6026
+ -ms-hyphens: auto;
6027
+ hyphens: auto;
6028
+ inline-size: 100%;
6029
+ overflow-block: auto;
6030
+ overflow-inline: auto;
6031
+ position: relative;
6032
+ text-rendering: optimizeLegibility;
6033
+ -moz-text-size-adjust: none;
6034
+ -webkit-text-size-adjust: none;
6035
+ text-size-adjust: none;
6036
+ word-break: break-word;
6037
+ }
5913
6038
  .utrecht-search-bar {
5914
6039
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
5915
6040
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -6024,6 +6149,7 @@
6024
6149
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6025
6150
  outline-style: var(--utrecht-focus-outline-style, revert);
6026
6151
  outline-width: var(--utrecht-focus-outline-width, revert);
6152
+ z-index: 1;
6027
6153
  }
6028
6154
 
6029
6155
  .utrecht-select--busy {
@@ -6063,6 +6189,7 @@
6063
6189
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6064
6190
  outline-style: var(--utrecht-focus-outline-style, revert);
6065
6191
  outline-width: var(--utrecht-focus-outline-width, revert);
6192
+ z-index: 1;
6066
6193
  }
6067
6194
  .utrecht-select--html-select:disabled {
6068
6195
  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 +6267,7 @@
6140
6267
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6141
6268
  outline-style: var(--utrecht-focus-outline-style, revert);
6142
6269
  outline-width: var(--utrecht-focus-outline-width, revert);
6270
+ z-index: 1;
6143
6271
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6144
6272
  }
6145
6273
 
@@ -6152,11 +6280,13 @@
6152
6280
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6153
6281
  outline-style: var(--utrecht-focus-outline-style, revert);
6154
6282
  outline-width: var(--utrecht-focus-outline-width, revert);
6283
+ z-index: 1;
6155
6284
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6156
6285
  }
6157
6286
  .utrecht-spotlight-section {
6158
6287
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
6159
6288
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
6289
+ border-radius: var(--utrecht-spotlight-section-border-radius, 0);
6160
6290
  border-style: solid;
6161
6291
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
6162
6292
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
@@ -6596,6 +6726,7 @@
6596
6726
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6597
6727
  outline-style: var(--utrecht-focus-outline-style, revert);
6598
6728
  outline-width: var(--utrecht-focus-outline-width, revert);
6729
+ z-index: 1;
6599
6730
  }
6600
6731
 
6601
6732
  .utrecht-textarea--read-only {
@@ -6625,6 +6756,7 @@
6625
6756
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6626
6757
  outline-style: var(--utrecht-focus-outline-style, revert);
6627
6758
  outline-width: var(--utrecht-focus-outline-width, revert);
6759
+ z-index: 1;
6628
6760
  }
6629
6761
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6630
6762
  --_utrecht-textarea-border-width: var(
@@ -6724,6 +6856,7 @@
6724
6856
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6725
6857
  outline-style: var(--utrecht-focus-outline-style, revert);
6726
6858
  outline-width: var(--utrecht-focus-outline-width, revert);
6859
+ z-index: 1;
6727
6860
  }
6728
6861
 
6729
6862
  .utrecht-textbox--read-only {
@@ -6809,6 +6942,7 @@
6809
6942
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6810
6943
  outline-style: var(--utrecht-focus-outline-style, revert);
6811
6944
  outline-width: var(--utrecht-focus-outline-width, revert);
6945
+ z-index: 1;
6812
6946
  }
6813
6947
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
6814
6948
  --_utrecht-textbox-border-width: var(
@@ -6885,6 +7019,7 @@
6885
7019
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6886
7020
  outline-style: var(--utrecht-focus-outline-style, revert);
6887
7021
  outline-width: var(--utrecht-focus-outline-width, revert);
7022
+ z-index: 1;
6888
7023
  }
6889
7024
 
6890
7025
  .utrecht-toptask-link--focus, .utrecht-toptask-link:focus {