@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.
@@ -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 {
@@ -3506,6 +3555,27 @@
3506
3555
  margin-top: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
3507
3556
  padding-left: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
3508
3557
  }
3558
+ .utrecht-page-body {
3559
+ background-color: var(--utrecht-page-body-background-color);
3560
+ box-sizing: border-box;
3561
+ color: var(--utrecht-page-body-color);
3562
+ display: grid;
3563
+ flex-grow: 1;
3564
+ width: 100%;
3565
+ }
3566
+
3567
+ .utrecht-page-body__content {
3568
+ background-color: var(--utrecht-page-body-content-background-color);
3569
+ box-sizing: border-box;
3570
+ color: var(--utrecht-page-body-content-color);
3571
+ width: 100%;
3572
+ justify-self: center;
3573
+ max-width: var(--utrecht-page-body-content-max-inline-size);
3574
+ padding-bottom: var(--utrecht-page-body-content-padding-block-end);
3575
+ padding-top: var(--utrecht-page-body-content-padding-block-start);
3576
+ padding-right: var(--utrecht-page-body-content-padding-inline-end);
3577
+ padding-left: var(--utrecht-page-body-content-padding-inline-start);
3578
+ }
3509
3579
  .utrecht-page-content {
3510
3580
  padding-bottom: var(--utrecht-page-content-padding-block-end);
3511
3581
  padding-top: var(--utrecht-page-content-padding-block-start);
@@ -3530,15 +3600,31 @@
3530
3600
  --utrecht-link-visited-color: currentColor;
3531
3601
  background-color: var(--utrecht-page-footer-background-color);
3532
3602
  background-image: var(--utrecht-page-footer-background-image);
3603
+ box-sizing: border-box;
3533
3604
  color: var(--utrecht-page-footer-color);
3605
+ display: grid;
3534
3606
  font-family: var(--utrecht-document-font-family);
3535
3607
  font-size: var(--utrecht-document-font-size);
3608
+ width: 100%;
3536
3609
  padding-bottom: var(--utrecht-page-footer-padding-block-end);
3537
3610
  padding-top: var(--utrecht-page-footer-padding-block-start);
3538
3611
  padding-right: var(--utrecht-page-footer-padding-inline-end);
3539
3612
  padding-left: var(--utrecht-page-footer-padding-inline-start);
3540
3613
  }
3541
3614
 
3615
+ .utrecht-page-footer__content {
3616
+ background-color: var(--utrecht-page-footer-content-background-color);
3617
+ box-sizing: border-box;
3618
+ color: var(--utrecht-page-footer-content-color);
3619
+ width: 100%;
3620
+ justify-self: center;
3621
+ max-width: var(--utrecht-page-footer-content-max-inline-size);
3622
+ padding-bottom: var(--utrecht-page-footer-content-padding-block-end);
3623
+ padding-top: var(--utrecht-page-footer-content-padding-block-start);
3624
+ padding-left: var(--utrecht-page-footer-content-padding-inline);
3625
+ padding-right: var(--utrecht-page-footer-content-padding-inline);
3626
+ }
3627
+
3542
3628
  .utrecht-page-footer__address--reset-address {
3543
3629
  font-style: inherit;
3544
3630
  margin-bottom: 0;
@@ -3546,8 +3632,14 @@
3546
3632
  }
3547
3633
  .utrecht-page-header {
3548
3634
  background-color: var(--utrecht-page-header-background-color);
3635
+ border-bottom-color: var(--utrecht-page-header-border-block-end-color, currentColor);
3636
+ border-bottom-style: solid;
3637
+ border-bottom-width: var(--utrecht-page-header-border-block-end-width, 0);
3638
+ box-sizing: border-box;
3549
3639
  color: var(--utrecht-page-header-color);
3640
+ display: grid;
3550
3641
  grid-area: "utrecht-header";
3642
+ width: 100%;
3551
3643
  padding-bottom: var(--utrecht-page-header-padding-block-end);
3552
3644
  padding-top: var(--utrecht-page-header-padding-block-start);
3553
3645
  padding-right: var(--utrecht-page-padding-inline-end);
@@ -3555,7 +3647,24 @@
3555
3647
  }
3556
3648
 
3557
3649
  .utrecht-page-header__content {
3558
- max-width: var(--utrecht-page-max-inline-size);
3650
+ background-color: var(--utrecht-page-header-content-background-color);
3651
+ box-sizing: border-box;
3652
+ color: var(--utrecht-page-header-content-color);
3653
+ width: 100%;
3654
+ justify-self: center;
3655
+ max-width: var(--utrecht-page-header-content-max-inline-size);
3656
+ padding-bottom: var(--utrecht-page-header-content-padding-block-end);
3657
+ padding-top: var(--utrecht-page-header-content-padding-block-start);
3658
+ padding-left: var(--utrecht-page-header-content-padding-inline);
3659
+ padding-right: var(--utrecht-page-header-content-padding-inline);
3660
+ }
3661
+ .utrecht-page-layout {
3662
+ align-items: flex-start;
3663
+ height: 100%;
3664
+ display: flex;
3665
+ flex-direction: column;
3666
+ width: 100%;
3667
+ justify-content: flex-start;
3559
3668
  }
3560
3669
  .utrecht-page {
3561
3670
  margin-right: auto;
@@ -3661,6 +3770,7 @@
3661
3770
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3662
3771
  outline-style: var(--utrecht-focus-outline-style, revert);
3663
3772
  outline-width: var(--utrecht-focus-outline-width, revert);
3773
+ z-index: 1;
3664
3774
  }
3665
3775
  .utrecht-paragraph {
3666
3776
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
@@ -3808,19 +3918,19 @@
3808
3918
 
3809
3919
  .utrecht-radio-button--focus {
3810
3920
  --_utrecht-radio-button-interactive-background-color: var(
3811
- --utrecht-radio-button-focus-background-color,
3921
+ --_utrecht-radio-button-state-focus-background-color,
3812
3922
  var(--utrecht-radio-button-focus-background-color)
3813
3923
  );
3814
3924
  --_utrecht-radio-button-interactive-border-color: var(
3815
- --utrecht-radio-button-focus-border-color,
3925
+ --_utrecht-radio-button-state-focus-border-color,
3816
3926
  var(--utrecht-radio-button-focus-border-color)
3817
3927
  );
3818
3928
  --_utrecht-radio-button-interactive-border-width: var(
3819
- --utrecht-radio-button-focus-border-width,
3929
+ --_utrecht-radio-button-state-focus-border-width,
3820
3930
  var(--utrecht-radio-button-focus-border-width)
3821
3931
  );
3822
3932
  --_utrecht-radio-button-interactive-color: var(
3823
- --utrecht-radio-button-focus-color,
3933
+ --_utrecht-radio-button-state-focus-color,
3824
3934
  var(--utrecht-radio-button-focus-color)
3825
3935
  );
3826
3936
  }
@@ -3833,6 +3943,7 @@
3833
3943
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3834
3944
  outline-style: var(--utrecht-focus-outline-style, revert);
3835
3945
  outline-width: var(--utrecht-focus-outline-width, revert);
3946
+ z-index: 1;
3836
3947
  }
3837
3948
 
3838
3949
  .utrecht-radio-button--active {
@@ -3945,19 +4056,19 @@
3945
4056
  }
3946
4057
  .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
3947
4058
  --_utrecht-radio-button-interactive-background-color: var(
3948
- --utrecht-radio-button-focus-background-color,
4059
+ --_utrecht-radio-button-state-focus-background-color,
3949
4060
  var(--utrecht-radio-button-focus-background-color)
3950
4061
  );
3951
4062
  --_utrecht-radio-button-interactive-border-color: var(
3952
- --utrecht-radio-button-focus-border-color,
4063
+ --_utrecht-radio-button-state-focus-border-color,
3953
4064
  var(--utrecht-radio-button-focus-border-color)
3954
4065
  );
3955
4066
  --_utrecht-radio-button-interactive-border-width: var(
3956
- --utrecht-radio-button-focus-border-width,
4067
+ --_utrecht-radio-button-state-focus-border-width,
3957
4068
  var(--utrecht-radio-button-focus-border-width)
3958
4069
  );
3959
4070
  --_utrecht-radio-button-interactive-color: var(
3960
- --utrecht-radio-button-focus-color,
4071
+ --_utrecht-radio-button-state-focus-color,
3961
4072
  var(--utrecht-radio-button-focus-color)
3962
4073
  );
3963
4074
  }
@@ -3969,6 +4080,7 @@
3969
4080
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3970
4081
  outline-style: var(--utrecht-focus-outline-style, revert);
3971
4082
  outline-width: var(--utrecht-focus-outline-width, revert);
4083
+ z-index: 1;
3972
4084
  }
3973
4085
  .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
3974
4086
  --_utrecht-radio-button-interactive-background-color: var(
@@ -5764,6 +5876,27 @@
5764
5876
  .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
5765
5877
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
5766
5878
  }
5879
+ .utrecht-root {
5880
+ -webkit-font-smoothing: auto !important;
5881
+ -moz-osx-font-smoothing: auto !important;
5882
+ background-color: var(--utrecht-root-background-color);
5883
+ height: 100%;
5884
+ color: var(--utrecht-root-color);
5885
+ font-family: var(--utrecht-root-font-family);
5886
+ -webkit-hyphens: auto;
5887
+ -moz-hyphens: auto;
5888
+ -ms-hyphens: auto;
5889
+ hyphens: auto;
5890
+ width: 100%;
5891
+ overflow-block: auto;
5892
+ overflow-inline: auto;
5893
+ position: relative;
5894
+ text-rendering: optimizeLegibility;
5895
+ -moz-text-size-adjust: none;
5896
+ -webkit-text-size-adjust: none;
5897
+ text-size-adjust: none;
5898
+ word-break: break-word;
5899
+ }
5767
5900
  .utrecht-search-bar {
5768
5901
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
5769
5902
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -5883,6 +6016,7 @@
5883
6016
  outline-offset: var(--utrecht-focus-outline-offset, revert);
5884
6017
  outline-style: var(--utrecht-focus-outline-style, revert);
5885
6018
  outline-width: var(--utrecht-focus-outline-width, revert);
6019
+ z-index: 1;
5886
6020
  }
5887
6021
 
5888
6022
  .utrecht-select--busy {
@@ -5922,6 +6056,7 @@
5922
6056
  outline-offset: var(--utrecht-focus-outline-offset, revert);
5923
6057
  outline-style: var(--utrecht-focus-outline-style, revert);
5924
6058
  outline-width: var(--utrecht-focus-outline-width, revert);
6059
+ z-index: 1;
5925
6060
  }
5926
6061
  .utrecht-select--html-select:disabled {
5927
6062
  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 +6134,7 @@
5999
6134
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6000
6135
  outline-style: var(--utrecht-focus-outline-style, revert);
6001
6136
  outline-width: var(--utrecht-focus-outline-width, revert);
6137
+ z-index: 1;
6002
6138
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6003
6139
  }
6004
6140
 
@@ -6011,11 +6147,13 @@
6011
6147
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6012
6148
  outline-style: var(--utrecht-focus-outline-style, revert);
6013
6149
  outline-width: var(--utrecht-focus-outline-width, revert);
6150
+ z-index: 1;
6014
6151
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6015
6152
  }
6016
6153
  .utrecht-spotlight-section {
6017
6154
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
6018
6155
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
6156
+ border-radius: var(--utrecht-spotlight-section-border-radius, 0);
6019
6157
  border-style: solid;
6020
6158
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
6021
6159
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
@@ -6478,6 +6616,7 @@
6478
6616
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6479
6617
  outline-style: var(--utrecht-focus-outline-style, revert);
6480
6618
  outline-width: var(--utrecht-focus-outline-width, revert);
6619
+ z-index: 1;
6481
6620
  }
6482
6621
 
6483
6622
  .utrecht-textarea--read-only {
@@ -6507,6 +6646,7 @@
6507
6646
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6508
6647
  outline-style: var(--utrecht-focus-outline-style, revert);
6509
6648
  outline-width: var(--utrecht-focus-outline-width, revert);
6649
+ z-index: 1;
6510
6650
  }
6511
6651
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6512
6652
  --_utrecht-textarea-border-width: var(
@@ -6615,6 +6755,7 @@
6615
6755
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6616
6756
  outline-style: var(--utrecht-focus-outline-style, revert);
6617
6757
  outline-width: var(--utrecht-focus-outline-width, revert);
6758
+ z-index: 1;
6618
6759
  }
6619
6760
 
6620
6761
  .utrecht-textbox--read-only {
@@ -6700,6 +6841,7 @@
6700
6841
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6701
6842
  outline-style: var(--utrecht-focus-outline-style, revert);
6702
6843
  outline-width: var(--utrecht-focus-outline-width, revert);
6844
+ z-index: 1;
6703
6845
  }
6704
6846
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
6705
6847
  --_utrecht-textbox-border-width: var(
@@ -6776,6 +6918,7 @@
6776
6918
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6777
6919
  outline-style: var(--utrecht-focus-outline-style, revert);
6778
6920
  outline-width: var(--utrecht-focus-outline-width, revert);
6921
+ z-index: 1;
6779
6922
  }
6780
6923
 
6781
6924
  .utrecht-toptask-link--focus, .utrecht-toptask-link:focus {
@@ -7167,6 +7310,7 @@
7167
7310
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7168
7311
  outline-style: var(--utrecht-focus-outline-style, revert);
7169
7312
  outline-width: var(--utrecht-focus-outline-width, revert);
7313
+ z-index: 1;
7170
7314
  }
7171
7315
  .utrecht-html input[type=checkbox i] {
7172
7316
  margin-bottom: 0;
@@ -7195,6 +7339,7 @@
7195
7339
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7196
7340
  outline-style: var(--utrecht-focus-outline-style, revert);
7197
7341
  outline-width: var(--utrecht-focus-outline-width, revert);
7342
+ z-index: 1;
7198
7343
  }
7199
7344
  .utrecht-html body {
7200
7345
  -webkit-font-smoothing: auto !important;
@@ -7436,6 +7581,7 @@
7436
7581
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7437
7582
  outline-style: var(--utrecht-focus-outline-style, revert);
7438
7583
  outline-width: var(--utrecht-focus-outline-width, revert);
7584
+ z-index: 1;
7439
7585
  --_utrecht-link-state-text-decoration: var(
7440
7586
  --utrecht-link-focus-visible-text-decoration,
7441
7587
  var(--utrecht-link-focus-text-decoration)
@@ -7618,19 +7764,19 @@
7618
7764
  }
7619
7765
  .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
7620
7766
  --_utrecht-radio-button-interactive-background-color: var(
7621
- --utrecht-radio-button-focus-background-color,
7767
+ --_utrecht-radio-button-state-focus-background-color,
7622
7768
  var(--utrecht-radio-button-focus-background-color)
7623
7769
  );
7624
7770
  --_utrecht-radio-button-interactive-border-color: var(
7625
- --utrecht-radio-button-focus-border-color,
7771
+ --_utrecht-radio-button-state-focus-border-color,
7626
7772
  var(--utrecht-radio-button-focus-border-color)
7627
7773
  );
7628
7774
  --_utrecht-radio-button-interactive-border-width: var(
7629
- --utrecht-radio-button-focus-border-width,
7775
+ --_utrecht-radio-button-state-focus-border-width,
7630
7776
  var(--utrecht-radio-button-focus-border-width)
7631
7777
  );
7632
7778
  --_utrecht-radio-button-interactive-color: var(
7633
- --utrecht-radio-button-focus-color,
7779
+ --_utrecht-radio-button-state-focus-color,
7634
7780
  var(--utrecht-radio-button-focus-color)
7635
7781
  );
7636
7782
  }
@@ -7642,6 +7788,7 @@
7642
7788
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7643
7789
  outline-style: var(--utrecht-focus-outline-style, revert);
7644
7790
  outline-width: var(--utrecht-focus-outline-width, revert);
7791
+ z-index: 1;
7645
7792
  }
7646
7793
  .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
7647
7794
  --_utrecht-radio-button-interactive-background-color: var(
@@ -7725,6 +7872,7 @@
7725
7872
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7726
7873
  outline-style: var(--utrecht-focus-outline-style, revert);
7727
7874
  outline-width: var(--utrecht-focus-outline-width, revert);
7875
+ z-index: 1;
7728
7876
  }
7729
7877
  .utrecht-html select:disabled {
7730
7878
  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 +8057,7 @@
7909
8057
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7910
8058
  outline-style: var(--utrecht-focus-outline-style, revert);
7911
8059
  outline-width: var(--utrecht-focus-outline-width, revert);
8060
+ z-index: 1;
7912
8061
  }
7913
8062
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
7914
8063
  --_utrecht-textarea-border-width: var(
@@ -8041,6 +8190,7 @@
8041
8190
  outline-offset: var(--utrecht-focus-outline-offset, revert);
8042
8191
  outline-style: var(--utrecht-focus-outline-style, revert);
8043
8192
  outline-width: var(--utrecht-focus-outline-width, revert);
8193
+ z-index: 1;
8044
8194
  }
8045
8195
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
8046
8196
  .utrecht-html input[type=date i]:invalid,