@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.
@@ -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.
@@ -116,15 +121,19 @@
116
121
  padding-top: var(--utrecht-alert-padding-block-start);
117
122
  padding-right: var(--utrecht-alert-padding-inline-end);
118
123
  padding-left: var(--utrecht-alert-padding-inline-start);
124
+ align-self: center;
119
125
  border-color: var(--utrecht-alert-dialog-border-color);
120
126
  border-radius: var(--utrecht-alert-dialog-border-radius, 0);
121
127
  border-style: solid;
122
128
  border-width: var(--utrecht-alert-dialog-border-width, 0);
123
129
  box-shadow: var(--utrecht-alert-dialog-box-shadow);
124
- max-height: var(--utrecht-alert-dialog-max-block-size);
125
- max-width: var(--utrecht-alert-dialog-max-inline-size);
130
+ justify-self: center;
131
+ max-height: min(var(--utrecht-alert-dialog-max-block-size), 100%);
132
+ max-width: min(var(--utrecht-alert-dialog-max-inline-size), 100%);
126
133
  min-height: var(--utrecht-alert-dialog-min-block-size);
127
134
  min-width: var(--utrecht-alert-dialog-min-inline-size);
135
+ overflow-y: auto;
136
+ overflow-block: auto;
128
137
  }
129
138
 
130
139
  .utrecht-alert-dialog[prince-xml-ignore-pseudo-element-backdrop] {
@@ -295,28 +304,6 @@
295
304
  text-decoration: none;
296
305
  white-space: nowrap;
297
306
  }
298
- .utrecht-badge-data {
299
- background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
300
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
301
- color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
302
- display: inline-block;
303
- font-family: var(--utrecht-document-font-family, sans-serif);
304
- font-size: var(--utrecht-badge-font-size, inherit);
305
- font-style: var(--utrecht-badge-font-style, normal);
306
- font-weight: var(--utrecht-badge-font-weight, bold);
307
- line-height: var(--utrecht-badge-line-height, 1em);
308
- max-height: max-content;
309
- max-width: max-content;
310
- min-height: 1em;
311
- min-width: 1em;
312
- padding-bottom: var(--utrecht-badge-padding-block, 0.5ex);
313
- padding-top: var(--utrecht-badge-padding-block, 0.5ex);
314
- padding-right: var(--utrecht-badge-padding-inline, 0.5ch);
315
- padding-left: var(--utrecht-badge-padding-inline, 0.5ch);
316
- text-decoration: none;
317
- letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
318
- text-transform: var(--utrecht-badge-data-text-transform, inherit);
319
- }
320
307
  .utrecht-badge-list {
321
308
  column-gap: var(--utrecht-badge-list-column-gap);
322
309
  display: flex;
@@ -451,6 +438,27 @@
451
438
  color: var(--utrecht-blockquote-content-color, inherit);
452
439
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
453
440
  }
441
+ .utrecht-body {
442
+ height: 100%;
443
+ font-family: var(--utrecht-body-font-family, inherit);
444
+ font-size: var(--utrecht-body-font-size, inherit);
445
+ font-weight: var(--utrecht-body-font-weight, inherit);
446
+ line-height: var(--utrecht-body-line-height, inherit);
447
+ margin-bottom: 0;
448
+ margin-top: 0;
449
+ margin-right: 0;
450
+ margin-left: 0;
451
+ padding-bottom: 0;
452
+ padding-top: 0;
453
+ padding-right: 0;
454
+ padding-left: 0;
455
+ }
456
+ @media screen {
457
+ .utrecht-body {
458
+ min-height: 100vh;
459
+ min-height: 100vb;
460
+ }
461
+ }
454
462
  .utrecht-breadcrumb-nav {
455
463
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
456
464
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -616,6 +624,7 @@
616
624
  .utrecht-button-group {
617
625
  align-items: baseline;
618
626
  background-color: var(--utrecht-button-group-background-color);
627
+ break-inside: avoid;
619
628
  display: flex;
620
629
  flex-wrap: wrap;
621
630
  gap: var(--utrecht-button-group-inline-gap, 1em);
@@ -900,6 +909,7 @@
900
909
  outline-offset: var(--utrecht-focus-outline-offset, revert);
901
910
  outline-style: var(--utrecht-focus-outline-style, revert);
902
911
  outline-width: var(--utrecht-focus-outline-width, revert);
912
+ z-index: 1;
903
913
  }
904
914
 
905
915
  .utrecht-button-link--placeholder {
@@ -923,6 +933,7 @@
923
933
  outline-offset: var(--utrecht-focus-outline-offset, revert);
924
934
  outline-style: var(--utrecht-focus-outline-style, revert);
925
935
  outline-width: var(--utrecht-focus-outline-width, revert);
936
+ z-index: 1;
926
937
  }
927
938
  .utrecht-button-link--html-a:hover {
928
939
  background-color: var(--_utrecht-button-hover-background-color);
@@ -1276,6 +1287,7 @@
1276
1287
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1277
1288
  outline-style: var(--utrecht-focus-outline-style, revert);
1278
1289
  outline-width: var(--utrecht-focus-outline-width, revert);
1290
+ z-index: 1;
1279
1291
  }
1280
1292
 
1281
1293
  .utrecht-button--focus:not(.utrecht-button--disabled) {
@@ -1293,6 +1305,7 @@
1293
1305
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1294
1306
  outline-style: var(--utrecht-focus-outline-style, revert);
1295
1307
  outline-width: var(--utrecht-focus-outline-width, revert);
1308
+ z-index: 1;
1296
1309
  }
1297
1310
 
1298
1311
  .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
@@ -1777,6 +1790,7 @@
1777
1790
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1778
1791
  outline-style: var(--utrecht-focus-outline-style, revert);
1779
1792
  outline-width: var(--utrecht-focus-outline-width, revert);
1793
+ z-index: 1;
1780
1794
  }
1781
1795
 
1782
1796
  .utrecht-checkbox--html-input:disabled {
@@ -1790,6 +1804,7 @@
1790
1804
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1791
1805
  outline-style: var(--utrecht-focus-outline-style, revert);
1792
1806
  outline-width: var(--utrecht-focus-outline-width, revert);
1807
+ z-index: 1;
1793
1808
  }
1794
1809
  .utrecht-code-block {
1795
1810
  background-color: var(--utrecht-code-background-color);
@@ -1960,7 +1975,6 @@
1960
1975
  .utrecht-checkbox--custom.utrecht-checkbox--active,
1961
1976
  .utrecht-custom-checkbox--active {
1962
1977
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
1963
- 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");
1964
1978
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
1965
1979
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
1966
1980
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -1976,7 +1990,6 @@
1976
1990
  .utrecht-checkbox--custom.utrecht-checkbox--focus,
1977
1991
  .utrecht-custom-checkbox--focus {
1978
1992
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
1979
- 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");
1980
1993
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
1981
1994
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
1982
1995
  }
@@ -1990,6 +2003,7 @@
1990
2003
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1991
2004
  outline-style: var(--utrecht-focus-outline-style, revert);
1992
2005
  outline-width: var(--utrecht-focus-outline-width, revert);
2006
+ z-index: 1;
1993
2007
  }
1994
2008
 
1995
2009
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
@@ -2016,7 +2030,6 @@
2016
2030
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
2017
2031
  .utrecht-custom-checkbox--html-input:focus {
2018
2032
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2019
- 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");
2020
2033
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2021
2034
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2022
2035
  }
@@ -2029,6 +2042,7 @@
2029
2042
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2030
2043
  outline-style: var(--utrecht-focus-outline-style, revert);
2031
2044
  outline-width: var(--utrecht-focus-outline-width, revert);
2045
+ z-index: 1;
2032
2046
  }
2033
2047
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
2034
2048
  .utrecht-custom-checkbox--html-input:invalid,
@@ -2039,7 +2053,6 @@
2039
2053
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
2040
2054
  .utrecht-custom-checkbox--html-input:active {
2041
2055
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2042
- 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");
2043
2056
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2044
2057
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2045
2058
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -2060,6 +2073,27 @@
2060
2073
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2061
2074
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2062
2075
  }
2076
+ .utrecht-badge-data,
2077
+ .utrecht-data-badge {
2078
+ background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
2079
+ border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
2080
+ border-width: var(--utrecht-data-badge-border-width, 0);
2081
+ color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
2082
+ display: inline-block;
2083
+ font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif));
2084
+ font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit));
2085
+ font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold));
2086
+ line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em));
2087
+ max-height: max-content;
2088
+ max-width: max-content;
2089
+ min-height: var(--utrecht-data-badge-min-block-size, 1em);
2090
+ min-width: var(--utrecht-data-badge-min-inline-size, 1em);
2091
+ padding-bottom: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2092
+ padding-top: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2093
+ padding-right: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2094
+ padding-left: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2095
+ text-decoration: none;
2096
+ }
2063
2097
  .utrecht-data-list {
2064
2098
  display: block;
2065
2099
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
@@ -2543,6 +2577,7 @@
2543
2577
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2544
2578
  outline-style: var(--utrecht-focus-outline-style, revert);
2545
2579
  outline-width: var(--utrecht-focus-outline-width, revert);
2580
+ z-index: 1;
2546
2581
  }
2547
2582
 
2548
2583
  .utrecht-form-toggle--hover {
@@ -2611,6 +2646,7 @@
2611
2646
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2612
2647
  outline-style: var(--utrecht-focus-outline-style, revert);
2613
2648
  outline-width: var(--utrecht-focus-outline-width, revert);
2649
+ z-index: 1;
2614
2650
  }
2615
2651
 
2616
2652
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
@@ -2634,6 +2670,7 @@
2634
2670
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2635
2671
  outline-style: var(--utrecht-focus-outline-style, revert);
2636
2672
  outline-width: var(--utrecht-focus-outline-width, revert);
2673
+ z-index: 1;
2637
2674
  }
2638
2675
  .utrecht-form {
2639
2676
  display: block;
@@ -2808,6 +2845,7 @@
2808
2845
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2809
2846
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2810
2847
  align-items: center;
2848
+ border-radius: var(--utrecht-button-border-radius, 0);
2811
2849
  cursor: pointer;
2812
2850
  display: inline-flex;
2813
2851
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
@@ -2860,6 +2898,7 @@
2860
2898
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2861
2899
  outline-style: var(--utrecht-focus-outline-style, revert);
2862
2900
  outline-width: var(--utrecht-focus-outline-width, revert);
2901
+ z-index: 1;
2863
2902
  --_utrecht-link-state-text-decoration: var(
2864
2903
  --utrecht-link-focus-visible-text-decoration,
2865
2904
  var(--utrecht-link-focus-text-decoration)
@@ -2960,6 +2999,7 @@
2960
2999
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2961
3000
  outline-style: var(--utrecht-focus-outline-style, revert);
2962
3001
  outline-width: var(--utrecht-focus-outline-width, revert);
3002
+ z-index: 1;
2963
3003
  }
2964
3004
 
2965
3005
  .utrecht-link-social--distanced {
@@ -3007,6 +3047,7 @@
3007
3047
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3008
3048
  outline-style: var(--utrecht-focus-outline-style, revert);
3009
3049
  outline-width: var(--utrecht-focus-outline-width, revert);
3050
+ z-index: 1;
3010
3051
  --_utrecht-link-state-text-decoration: var(
3011
3052
  --utrecht-link-focus-visible-text-decoration,
3012
3053
  var(--utrecht-link-focus-text-decoration)
@@ -3026,6 +3067,7 @@
3026
3067
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3027
3068
  outline-style: var(--utrecht-focus-outline-style, revert);
3028
3069
  outline-width: var(--utrecht-focus-outline-width, revert);
3070
+ z-index: 1;
3029
3071
  --_utrecht-link-state-text-decoration: var(
3030
3072
  --utrecht-link-focus-visible-text-decoration,
3031
3073
  var(--utrecht-link-focus-text-decoration)
@@ -3115,6 +3157,7 @@
3115
3157
  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3116
3158
  width: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3117
3159
  max-height: var(--utrecht-listbox-max-block-size);
3160
+ max-width: 100%;
3118
3161
  min-height: 1em;
3119
3162
  overflow-block: auto;
3120
3163
  overflow-y: auto;
@@ -3138,6 +3181,7 @@
3138
3181
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3139
3182
  outline-style: var(--utrecht-focus-outline-style, revert);
3140
3183
  outline-width: var(--utrecht-focus-outline-width, revert);
3184
+ z-index: 1;
3141
3185
  }
3142
3186
 
3143
3187
  .utrecht-listbox--invalid {
@@ -3214,6 +3258,7 @@
3214
3258
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3215
3259
  outline-style: var(--utrecht-focus-outline-style, revert);
3216
3260
  outline-width: var(--utrecht-focus-outline-width, revert);
3261
+ z-index: 1;
3217
3262
  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
3218
3263
  }
3219
3264
 
@@ -3271,6 +3316,7 @@
3271
3316
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3272
3317
  outline-style: var(--utrecht-focus-outline-style, revert);
3273
3318
  outline-width: var(--utrecht-focus-outline-width, revert);
3319
+ z-index: 1;
3274
3320
  }
3275
3321
 
3276
3322
  .utrecht-listbox--forced-colors {
@@ -3391,17 +3437,20 @@
3391
3437
  .utrecht-nav-bar {
3392
3438
  background-color: var(--utrecht-nav-bar-background-color);
3393
3439
  color: var(--utrecht-nav-bar-color);
3394
- display: flex;
3395
- justify-content: center;
3440
+ display: grid;
3441
+ width: 100%;
3396
3442
  }
3397
3443
 
3398
3444
  .utrecht-nav-bar__content {
3399
3445
  align-items: stretch;
3446
+ background-color: var(--utrecht-nav-bar-content-background-color);
3447
+ color: var(--utrecht-nav-bar-content-color);
3400
3448
  display: flex;
3401
3449
  flex-direction: row;
3402
3450
  flex-wrap: wrap;
3403
3451
  width: 100%;
3404
3452
  justify-content: space-between;
3453
+ justify-self: center;
3405
3454
  max-width: var(--utrecht-nav-bar-content-max-inline-size);
3406
3455
  }
3407
3456
  .utrecht-nav-list {
@@ -3478,6 +3527,7 @@
3478
3527
  font-family: var(--utrecht-document-font-family, inherit);
3479
3528
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
3480
3529
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
3530
+ list-style-type: decimal;
3481
3531
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
3482
3532
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
3483
3533
  padding-left: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
@@ -3506,6 +3556,27 @@
3506
3556
  margin-top: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
3507
3557
  padding-left: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
3508
3558
  }
3559
+ .utrecht-page-body {
3560
+ background-color: var(--utrecht-page-body-background-color);
3561
+ box-sizing: border-box;
3562
+ color: var(--utrecht-page-body-color);
3563
+ display: grid;
3564
+ flex-grow: 1;
3565
+ width: 100%;
3566
+ }
3567
+
3568
+ .utrecht-page-body__content {
3569
+ background-color: var(--utrecht-page-body-content-background-color);
3570
+ box-sizing: border-box;
3571
+ color: var(--utrecht-page-body-content-color);
3572
+ width: 100%;
3573
+ justify-self: center;
3574
+ max-width: var(--utrecht-page-body-content-max-inline-size);
3575
+ padding-bottom: var(--utrecht-page-body-content-padding-block-end);
3576
+ padding-top: var(--utrecht-page-body-content-padding-block-start);
3577
+ padding-right: var(--utrecht-page-body-content-padding-inline-end);
3578
+ padding-left: var(--utrecht-page-body-content-padding-inline-start);
3579
+ }
3509
3580
  .utrecht-page-content {
3510
3581
  padding-bottom: var(--utrecht-page-content-padding-block-end);
3511
3582
  padding-top: var(--utrecht-page-content-padding-block-start);
@@ -3530,15 +3601,31 @@
3530
3601
  --utrecht-link-visited-color: currentColor;
3531
3602
  background-color: var(--utrecht-page-footer-background-color);
3532
3603
  background-image: var(--utrecht-page-footer-background-image);
3604
+ box-sizing: border-box;
3533
3605
  color: var(--utrecht-page-footer-color);
3606
+ display: grid;
3534
3607
  font-family: var(--utrecht-document-font-family);
3535
3608
  font-size: var(--utrecht-document-font-size);
3609
+ width: 100%;
3536
3610
  padding-bottom: var(--utrecht-page-footer-padding-block-end);
3537
3611
  padding-top: var(--utrecht-page-footer-padding-block-start);
3538
3612
  padding-right: var(--utrecht-page-footer-padding-inline-end);
3539
3613
  padding-left: var(--utrecht-page-footer-padding-inline-start);
3540
3614
  }
3541
3615
 
3616
+ .utrecht-page-footer__content {
3617
+ background-color: var(--utrecht-page-footer-content-background-color);
3618
+ box-sizing: border-box;
3619
+ color: var(--utrecht-page-footer-content-color);
3620
+ width: 100%;
3621
+ justify-self: center;
3622
+ max-width: var(--utrecht-page-footer-content-max-inline-size);
3623
+ padding-bottom: var(--utrecht-page-footer-content-padding-block-end);
3624
+ padding-top: var(--utrecht-page-footer-content-padding-block-start);
3625
+ padding-left: var(--utrecht-page-footer-content-padding-inline);
3626
+ padding-right: var(--utrecht-page-footer-content-padding-inline);
3627
+ }
3628
+
3542
3629
  .utrecht-page-footer__address--reset-address {
3543
3630
  font-style: inherit;
3544
3631
  margin-bottom: 0;
@@ -3546,8 +3633,14 @@
3546
3633
  }
3547
3634
  .utrecht-page-header {
3548
3635
  background-color: var(--utrecht-page-header-background-color);
3636
+ border-bottom-color: var(--utrecht-page-header-border-block-end-color, currentColor);
3637
+ border-bottom-style: solid;
3638
+ border-bottom-width: var(--utrecht-page-header-border-block-end-width, 0);
3639
+ box-sizing: border-box;
3549
3640
  color: var(--utrecht-page-header-color);
3641
+ display: grid;
3550
3642
  grid-area: "utrecht-header";
3643
+ width: 100%;
3551
3644
  padding-bottom: var(--utrecht-page-header-padding-block-end);
3552
3645
  padding-top: var(--utrecht-page-header-padding-block-start);
3553
3646
  padding-right: var(--utrecht-page-padding-inline-end);
@@ -3555,7 +3648,24 @@
3555
3648
  }
3556
3649
 
3557
3650
  .utrecht-page-header__content {
3558
- max-width: var(--utrecht-page-max-inline-size);
3651
+ background-color: var(--utrecht-page-header-content-background-color);
3652
+ box-sizing: border-box;
3653
+ color: var(--utrecht-page-header-content-color);
3654
+ width: 100%;
3655
+ justify-self: center;
3656
+ max-width: var(--utrecht-page-header-content-max-inline-size);
3657
+ padding-bottom: var(--utrecht-page-header-content-padding-block-end);
3658
+ padding-top: var(--utrecht-page-header-content-padding-block-start);
3659
+ padding-left: var(--utrecht-page-header-content-padding-inline);
3660
+ padding-right: var(--utrecht-page-header-content-padding-inline);
3661
+ }
3662
+ .utrecht-page-layout {
3663
+ align-items: flex-start;
3664
+ height: 100%;
3665
+ display: flex;
3666
+ flex-direction: column;
3667
+ width: 100%;
3668
+ justify-content: flex-start;
3559
3669
  }
3560
3670
  .utrecht-page {
3561
3671
  margin-right: auto;
@@ -3661,6 +3771,7 @@
3661
3771
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3662
3772
  outline-style: var(--utrecht-focus-outline-style, revert);
3663
3773
  outline-width: var(--utrecht-focus-outline-width, revert);
3774
+ z-index: 1;
3664
3775
  }
3665
3776
  .utrecht-paragraph {
3666
3777
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
@@ -3808,19 +3919,19 @@
3808
3919
 
3809
3920
  .utrecht-radio-button--focus {
3810
3921
  --_utrecht-radio-button-interactive-background-color: var(
3811
- --utrecht-radio-button-focus-background-color,
3922
+ --_utrecht-radio-button-state-focus-background-color,
3812
3923
  var(--utrecht-radio-button-focus-background-color)
3813
3924
  );
3814
3925
  --_utrecht-radio-button-interactive-border-color: var(
3815
- --utrecht-radio-button-focus-border-color,
3926
+ --_utrecht-radio-button-state-focus-border-color,
3816
3927
  var(--utrecht-radio-button-focus-border-color)
3817
3928
  );
3818
3929
  --_utrecht-radio-button-interactive-border-width: var(
3819
- --utrecht-radio-button-focus-border-width,
3930
+ --_utrecht-radio-button-state-focus-border-width,
3820
3931
  var(--utrecht-radio-button-focus-border-width)
3821
3932
  );
3822
3933
  --_utrecht-radio-button-interactive-color: var(
3823
- --utrecht-radio-button-focus-color,
3934
+ --_utrecht-radio-button-state-focus-color,
3824
3935
  var(--utrecht-radio-button-focus-color)
3825
3936
  );
3826
3937
  }
@@ -3833,6 +3944,7 @@
3833
3944
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3834
3945
  outline-style: var(--utrecht-focus-outline-style, revert);
3835
3946
  outline-width: var(--utrecht-focus-outline-width, revert);
3947
+ z-index: 1;
3836
3948
  }
3837
3949
 
3838
3950
  .utrecht-radio-button--active {
@@ -3945,19 +4057,19 @@
3945
4057
  }
3946
4058
  .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
3947
4059
  --_utrecht-radio-button-interactive-background-color: var(
3948
- --utrecht-radio-button-focus-background-color,
4060
+ --_utrecht-radio-button-state-focus-background-color,
3949
4061
  var(--utrecht-radio-button-focus-background-color)
3950
4062
  );
3951
4063
  --_utrecht-radio-button-interactive-border-color: var(
3952
- --utrecht-radio-button-focus-border-color,
4064
+ --_utrecht-radio-button-state-focus-border-color,
3953
4065
  var(--utrecht-radio-button-focus-border-color)
3954
4066
  );
3955
4067
  --_utrecht-radio-button-interactive-border-width: var(
3956
- --utrecht-radio-button-focus-border-width,
4068
+ --_utrecht-radio-button-state-focus-border-width,
3957
4069
  var(--utrecht-radio-button-focus-border-width)
3958
4070
  );
3959
4071
  --_utrecht-radio-button-interactive-color: var(
3960
- --utrecht-radio-button-focus-color,
4072
+ --_utrecht-radio-button-state-focus-color,
3961
4073
  var(--utrecht-radio-button-focus-color)
3962
4074
  );
3963
4075
  }
@@ -3969,6 +4081,7 @@
3969
4081
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3970
4082
  outline-style: var(--utrecht-focus-outline-style, revert);
3971
4083
  outline-width: var(--utrecht-focus-outline-width, revert);
4084
+ z-index: 1;
3972
4085
  }
3973
4086
  .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
3974
4087
  --_utrecht-radio-button-interactive-background-color: var(
@@ -5764,6 +5877,27 @@
5764
5877
  .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
5765
5878
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
5766
5879
  }
5880
+ .utrecht-root {
5881
+ -webkit-font-smoothing: auto !important;
5882
+ -moz-osx-font-smoothing: auto !important;
5883
+ background-color: var(--utrecht-root-background-color);
5884
+ height: 100%;
5885
+ color: var(--utrecht-root-color);
5886
+ font-family: var(--utrecht-root-font-family);
5887
+ -webkit-hyphens: auto;
5888
+ -moz-hyphens: auto;
5889
+ -ms-hyphens: auto;
5890
+ hyphens: auto;
5891
+ width: 100%;
5892
+ overflow-block: auto;
5893
+ overflow-inline: auto;
5894
+ position: relative;
5895
+ text-rendering: optimizeLegibility;
5896
+ -moz-text-size-adjust: none;
5897
+ -webkit-text-size-adjust: none;
5898
+ text-size-adjust: none;
5899
+ word-break: break-word;
5900
+ }
5767
5901
  .utrecht-search-bar {
5768
5902
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
5769
5903
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -5883,6 +6017,7 @@
5883
6017
  outline-offset: var(--utrecht-focus-outline-offset, revert);
5884
6018
  outline-style: var(--utrecht-focus-outline-style, revert);
5885
6019
  outline-width: var(--utrecht-focus-outline-width, revert);
6020
+ z-index: 1;
5886
6021
  }
5887
6022
 
5888
6023
  .utrecht-select--busy {
@@ -5922,6 +6057,7 @@
5922
6057
  outline-offset: var(--utrecht-focus-outline-offset, revert);
5923
6058
  outline-style: var(--utrecht-focus-outline-style, revert);
5924
6059
  outline-width: var(--utrecht-focus-outline-width, revert);
6060
+ z-index: 1;
5925
6061
  }
5926
6062
  .utrecht-select--html-select:disabled {
5927
6063
  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))));
@@ -5999,6 +6135,7 @@
5999
6135
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6000
6136
  outline-style: var(--utrecht-focus-outline-style, revert);
6001
6137
  outline-width: var(--utrecht-focus-outline-width, revert);
6138
+ z-index: 1;
6002
6139
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6003
6140
  }
6004
6141
 
@@ -6011,11 +6148,13 @@
6011
6148
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6012
6149
  outline-style: var(--utrecht-focus-outline-style, revert);
6013
6150
  outline-width: var(--utrecht-focus-outline-width, revert);
6151
+ z-index: 1;
6014
6152
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6015
6153
  }
6016
6154
  .utrecht-spotlight-section {
6017
6155
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
6018
6156
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
6157
+ border-radius: var(--utrecht-spotlight-section-border-radius, 0);
6019
6158
  border-style: solid;
6020
6159
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
6021
6160
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
@@ -6478,6 +6617,7 @@
6478
6617
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6479
6618
  outline-style: var(--utrecht-focus-outline-style, revert);
6480
6619
  outline-width: var(--utrecht-focus-outline-width, revert);
6620
+ z-index: 1;
6481
6621
  }
6482
6622
 
6483
6623
  .utrecht-textarea--read-only {
@@ -6507,6 +6647,7 @@
6507
6647
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6508
6648
  outline-style: var(--utrecht-focus-outline-style, revert);
6509
6649
  outline-width: var(--utrecht-focus-outline-width, revert);
6650
+ z-index: 1;
6510
6651
  }
6511
6652
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6512
6653
  --_utrecht-textarea-border-width: var(
@@ -6615,6 +6756,7 @@
6615
6756
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6616
6757
  outline-style: var(--utrecht-focus-outline-style, revert);
6617
6758
  outline-width: var(--utrecht-focus-outline-width, revert);
6759
+ z-index: 1;
6618
6760
  }
6619
6761
 
6620
6762
  .utrecht-textbox--read-only {
@@ -6700,6 +6842,7 @@
6700
6842
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6701
6843
  outline-style: var(--utrecht-focus-outline-style, revert);
6702
6844
  outline-width: var(--utrecht-focus-outline-width, revert);
6845
+ z-index: 1;
6703
6846
  }
6704
6847
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
6705
6848
  --_utrecht-textbox-border-width: var(
@@ -6776,6 +6919,7 @@
6776
6919
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6777
6920
  outline-style: var(--utrecht-focus-outline-style, revert);
6778
6921
  outline-width: var(--utrecht-focus-outline-width, revert);
6922
+ z-index: 1;
6779
6923
  }
6780
6924
 
6781
6925
  .utrecht-toptask-link--focus, .utrecht-toptask-link:focus {
@@ -7167,6 +7311,7 @@
7167
7311
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7168
7312
  outline-style: var(--utrecht-focus-outline-style, revert);
7169
7313
  outline-width: var(--utrecht-focus-outline-width, revert);
7314
+ z-index: 1;
7170
7315
  }
7171
7316
  .utrecht-html input[type=checkbox i] {
7172
7317
  margin-bottom: 0;
@@ -7195,6 +7340,7 @@
7195
7340
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7196
7341
  outline-style: var(--utrecht-focus-outline-style, revert);
7197
7342
  outline-width: var(--utrecht-focus-outline-width, revert);
7343
+ z-index: 1;
7198
7344
  }
7199
7345
  .utrecht-html body {
7200
7346
  -webkit-font-smoothing: auto !important;
@@ -7436,6 +7582,7 @@
7436
7582
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7437
7583
  outline-style: var(--utrecht-focus-outline-style, revert);
7438
7584
  outline-width: var(--utrecht-focus-outline-width, revert);
7585
+ z-index: 1;
7439
7586
  --_utrecht-link-state-text-decoration: var(
7440
7587
  --utrecht-link-focus-visible-text-decoration,
7441
7588
  var(--utrecht-link-focus-text-decoration)
@@ -7454,6 +7601,7 @@
7454
7601
  font-family: var(--utrecht-document-font-family, inherit);
7455
7602
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
7456
7603
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
7604
+ list-style-type: decimal;
7457
7605
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
7458
7606
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
7459
7607
  padding-left: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
@@ -7618,19 +7766,19 @@
7618
7766
  }
7619
7767
  .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
7620
7768
  --_utrecht-radio-button-interactive-background-color: var(
7621
- --utrecht-radio-button-focus-background-color,
7769
+ --_utrecht-radio-button-state-focus-background-color,
7622
7770
  var(--utrecht-radio-button-focus-background-color)
7623
7771
  );
7624
7772
  --_utrecht-radio-button-interactive-border-color: var(
7625
- --utrecht-radio-button-focus-border-color,
7773
+ --_utrecht-radio-button-state-focus-border-color,
7626
7774
  var(--utrecht-radio-button-focus-border-color)
7627
7775
  );
7628
7776
  --_utrecht-radio-button-interactive-border-width: var(
7629
- --utrecht-radio-button-focus-border-width,
7777
+ --_utrecht-radio-button-state-focus-border-width,
7630
7778
  var(--utrecht-radio-button-focus-border-width)
7631
7779
  );
7632
7780
  --_utrecht-radio-button-interactive-color: var(
7633
- --utrecht-radio-button-focus-color,
7781
+ --_utrecht-radio-button-state-focus-color,
7634
7782
  var(--utrecht-radio-button-focus-color)
7635
7783
  );
7636
7784
  }
@@ -7642,6 +7790,7 @@
7642
7790
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7643
7791
  outline-style: var(--utrecht-focus-outline-style, revert);
7644
7792
  outline-width: var(--utrecht-focus-outline-width, revert);
7793
+ z-index: 1;
7645
7794
  }
7646
7795
  .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
7647
7796
  --_utrecht-radio-button-interactive-background-color: var(
@@ -7725,6 +7874,7 @@
7725
7874
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7726
7875
  outline-style: var(--utrecht-focus-outline-style, revert);
7727
7876
  outline-width: var(--utrecht-focus-outline-width, revert);
7877
+ z-index: 1;
7728
7878
  }
7729
7879
  .utrecht-html select:disabled {
7730
7880
  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))));
@@ -7909,6 +8059,7 @@
7909
8059
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7910
8060
  outline-style: var(--utrecht-focus-outline-style, revert);
7911
8061
  outline-width: var(--utrecht-focus-outline-width, revert);
8062
+ z-index: 1;
7912
8063
  }
7913
8064
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
7914
8065
  --_utrecht-textarea-border-width: var(
@@ -8041,6 +8192,7 @@
8041
8192
  outline-offset: var(--utrecht-focus-outline-offset, revert);
8042
8193
  outline-style: var(--utrecht-focus-outline-style, revert);
8043
8194
  outline-width: var(--utrecht-focus-outline-width, revert);
8195
+ z-index: 1;
8044
8196
  }
8045
8197
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
8046
8198
  .utrecht-html input[type=date i]:invalid,