@utrecht/component-library-css 6.0.0 → 7.0.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,80 +3,18 @@
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) 2021 The Knights Who Say NIH! B.V.
9
- */
10
- /**
11
- * @license EUPL-1.2
12
- * Copyright (c) 2021 Robbert Broersma
13
- * Copyright (c) 2021 Gemeente Utrecht
14
- */
15
- /**
16
- * @license EUPL-1.2
17
- * Copyright (c) 2022 Gemeente Utrecht
18
- * Copyright (c) 2022 Robbert Broersma
19
- */
20
- /**
21
- * @license EUPL-1.2
22
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
23
- * Copyright (c) 2022 Gemeente Utrecht
24
- */
25
- /**
26
- * @license EUPL-1.2
27
- * Copyright (c) 2022 Robbert Broersma
28
- */
29
- /**
30
- * @license EUPL-1.2
31
- * Copyright (c) 2022 Gemeente Utrecht
32
- * Copyright (c) 2022 Robbert Broersma
33
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
34
- */
35
- /**
36
- * @license EUPL-1.2
37
- * Copyright (c) 2021-2022 Frameless B.V.
38
- */
39
- /**
40
- * @license EUPL-1.2
41
- * Copyright (c) 2021 Gemeente Utrecht
42
- * Copyright (c) 2021 Robbert Broersma
43
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
44
- */
45
6
  /**
46
7
  * @license EUPL-1.2
47
8
  * Copyright (c) 2023 Frameless B.V.
48
9
  */
49
- /**
50
- * @license EUPL-1.2
51
- * Copyright (c) 2021-2022 Gemeente Utrecht
52
- * Copyright (c) 2021-2022 Frameless B.V.
53
- */
54
- /**
55
- * @license EUPL-1.2
56
- * Copyright (c) 2021 Gemeente Utrecht
57
- * Copyright (c) 2021 Robbert Broersma
58
- */
59
- /**
60
- * @license EUPL-1.2
61
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
62
- * Copyright (c) 2021 Gemeente Utrecht
63
- */
64
10
  /**
65
11
  * @license EUPL-1.2
66
12
  * Copyright (c) 2022 Frameless B.V.
67
13
  */
68
14
  /**
69
15
  * @license EUPL-1.2
70
- * Copyright (c) 2021 Robbert Broersma
71
- */
72
- /**
73
- * @license EUPL-1.2
74
- * Copyright (c) 2020-2022 Gemeente Utrecht
75
- * Copyright (c) 2020-2022 Frameless B.V.
76
- */
77
- /**
78
- * @license EUPL-1.2
79
- * Copyright (c) 2021 Gemeente Utrecht
16
+ * Copyright (c) 2020-2024 Frameless B.V.
17
+ * Copyright (c) 2021-2024 Gemeente Utrecht
80
18
  */
81
19
  .utrecht-accordion {
82
20
  display: grid;
@@ -459,7 +397,14 @@
459
397
  }
460
398
  .utrecht-blockquote {
461
399
  background-color: var(--utrecht-blockquote-background-color);
400
+ border-color: var(--utrecht-blockquote-border-color);
401
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
402
+ border-style: solid;
403
+ border-width: var(--utrecht-blockquote-border-width, 0);
404
+ border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
462
405
  color: var(--utrecht-blockquote-color);
406
+ display: flex;
407
+ flex-direction: column;
463
408
  font-family: var(--utrecht-document-font-family);
464
409
  font-size: var(--utrecht-blockquote-font-size);
465
410
  font-style: var(--utrecht-blockquote-font-style);
@@ -471,14 +416,25 @@
471
416
  padding-top: var(--utrecht-blockquote-padding-block-start);
472
417
  padding-right: var(--utrecht-blockquote-padding-inline-end);
473
418
  padding-left: var(--utrecht-blockquote-padding-inline-start);
419
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
474
420
  }
475
-
476
- .utrecht-blockquote__attribution {
477
- color: var(--utrecht-blockquote-attribution-color, inherit);
478
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
421
+ .utrecht-blockquote__attribution,
422
+ .utrecht-blockquote__caption {
423
+ color: var(--utrecht-blockquote-caption-color, inherit);
424
+ font-size: var(--utrecht-blockquote-caption-font-size, inherit);
479
425
  }
480
426
 
481
- .utrecht-blockquote__content {
427
+ .utrecht-blockquote__figure {
428
+ display: flex;
429
+ flex-direction: column;
430
+ margin-bottom: 0;
431
+ margin-top: 0;
432
+ margin-right: 0;
433
+ margin-left: 0;
434
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
435
+ }
436
+ .utrecht-blockquote__content,
437
+ .utrecht-blockquote__quote {
482
438
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
483
439
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
484
440
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -488,6 +444,13 @@
488
444
  .utrecht-blockquote--distanced {
489
445
  --utrecht-space-around: 1;
490
446
  }
447
+
448
+ .utrecht-blockquote--html-blockquote {
449
+ --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
450
+ --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
451
+ color: var(--utrecht-blockquote-content-color, inherit);
452
+ font-size: var(--utrecht-blockquote-content-font-size, inherit);
453
+ }
491
454
  .utrecht-breadcrumb-nav {
492
455
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
493
456
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -1883,6 +1846,13 @@
1883
1846
  column-gap: var(--utrecht-column-layout-gap, 2em);
1884
1847
  column-width: var(--utrecht-column-layout-column-width, 40ch);
1885
1848
  display: block;
1849
+ column-width: var(--utrecht-column-layout-column-width, 25em);
1850
+ }
1851
+ @media print {
1852
+ .utrecht-column-layout {
1853
+ column-count: var(--utrecht-column-layout-print-column-count, 2);
1854
+ column-width: var(--utrecht-column-layout-print-column-width, auto);
1855
+ }
1886
1856
  }
1887
1857
 
1888
1858
  .utrecht-column-layout--rule {
@@ -1912,7 +1882,7 @@
1912
1882
  left: 0;
1913
1883
  overflow: auto;
1914
1884
  position: absolute;
1915
- z-index: var(--utrecht-combobox-popover-z-index);
1885
+ z-index: var(--utrecht-combobox-popover-z-index, 1);
1916
1886
  }
1917
1887
 
1918
1888
  .utrecht-combobox__popover--block-end {
@@ -2394,7 +2364,7 @@
2394
2364
  .utrecht-form-field--checkbox {
2395
2365
  display: grid;
2396
2366
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
2397
- grid-template-areas: "input label" "input description" "input description-invalid";
2367
+ grid-template-areas: "input label" "input description" "input error-message";
2398
2368
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
2399
2369
  }
2400
2370
  .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2407,7 +2377,7 @@
2407
2377
  .utrecht-form-field--radio {
2408
2378
  display: grid;
2409
2379
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
2410
- grid-template-areas: "input label" "input description" "input description-invalid";
2380
+ grid-template-areas: "input label" "input description" "input error-message";
2411
2381
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
2412
2382
  }
2413
2383
  .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2439,7 +2409,7 @@
2439
2409
  }
2440
2410
 
2441
2411
  .utrecht-form-field .utrecht-form-field-description--invalid {
2442
- grid-area: description-invalid;
2412
+ grid-area: error-message;
2443
2413
  order: 3;
2444
2414
  }
2445
2415
 
@@ -2454,6 +2424,11 @@
2454
2424
  grid-area: description-before;
2455
2425
  order: 4;
2456
2426
  }
2427
+
2428
+ .utrecht-form-field__error-message {
2429
+ grid-area: error-message;
2430
+ order: 3;
2431
+ }
2457
2432
  .utrecht-form-fieldset {
2458
2433
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
2459
2434
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -2789,8 +2764,10 @@
2789
2764
  pointer-events: none;
2790
2765
  width: 100%;
2791
2766
  }
2792
- .utrecht-img {
2767
+ .utrecht-img:not(img[height]) {
2793
2768
  height: auto;
2769
+ }
2770
+ .utrecht-img:not(img[width]) {
2794
2771
  width: auto;
2795
2772
  }
2796
2773
 
@@ -3125,12 +3102,13 @@
3125
3102
  }
3126
3103
  .utrecht-listbox {
3127
3104
  --utrecht-listbox-max-block-size: 300px;
3128
- background-color: var(--utrecht-listbox-background-color);
3129
- border-color: var(--utrecht-listbox-border-color);
3105
+ background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
3106
+ border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
3130
3107
  border-radius: var(--utrecht-listbox-border-radius);
3131
3108
  border-style: solid;
3132
3109
  border-width: var(--utrecht-listbox-border-width);
3133
3110
  box-sizing: border-box;
3111
+ color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
3134
3112
  cursor: default;
3135
3113
  display: flex;
3136
3114
  flex-direction: column;
@@ -3149,6 +3127,7 @@
3149
3127
  }
3150
3128
 
3151
3129
  .utrecht-listbox--focus {
3130
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3152
3131
  }
3153
3132
 
3154
3133
  .utrecht-listbox--focus-visible {
@@ -3164,9 +3143,6 @@
3164
3143
  .utrecht-listbox--invalid {
3165
3144
  }
3166
3145
 
3167
- .utrecht-listbox--read-only {
3168
- }
3169
-
3170
3146
  .utrecht-listbox__list {
3171
3147
  margin-bottom: 0;
3172
3148
  margin-top: 0;
@@ -3194,11 +3170,24 @@
3194
3170
 
3195
3171
  .utrecht-listbox__option {
3196
3172
  list-style: none;
3197
- --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
3173
+ --_utrecht-listbox-option-background-color: var(
3174
+ --_utrecht-listbox-option-disabled-background-color,
3175
+ var(
3176
+ --_utrecht-listbox-option-interactive-background-color,
3177
+ var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
3178
+ )
3179
+ );
3180
+ --_utrecht-listbox-option-color: var(
3181
+ --_utrecht-listbox-option-disabled-color,
3182
+ var(
3183
+ --_utrecht-listbox-option-interactive-color,
3184
+ var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
3185
+ )
3186
+ );
3198
3187
  align-items: center;
3199
- background-color: var(--utrecht-listbox-option-background-color);
3188
+ background-color: var(--_utrecht-listbox-option-background-color);
3200
3189
  box-sizing: border-box;
3201
- color: var(--utrecht-listbox-option-color);
3190
+ color: var(--_utrecht-listbox-option-color);
3202
3191
  display: flex;
3203
3192
  min-height: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
3204
3193
  padding-bottom: var(--utrecht-listbox-option-padding-block-end);
@@ -3207,19 +3196,14 @@
3207
3196
  padding-left: var(--utrecht-listbox-option-padding-inline-start);
3208
3197
  }
3209
3198
 
3210
- .utrecht-listbox__option--disabled {
3211
- background-color: var(--utrecht-listbox-option-disabled-background-color);
3212
- color: var(--utrecht-listbox-option-disabled-color);
3213
- }
3214
-
3215
3199
  .utrecht-listbox__option--hover {
3216
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3217
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3200
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3201
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3218
3202
  }
3219
3203
 
3220
3204
  .utrecht-listbox__option--focus {
3221
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3222
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3205
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3206
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3223
3207
  }
3224
3208
 
3225
3209
  .utrecht-listbox__option--focus-visible {
@@ -3234,33 +3218,50 @@
3234
3218
  }
3235
3219
 
3236
3220
  .utrecht-listbox__option--active {
3237
- background-color: var(--utrecht-listbox-option-is-active-background-color);
3238
- color: var(--utrecht-listbox-option-is-active-color);
3221
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
3222
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
3239
3223
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
3240
3224
  }
3241
3225
 
3242
3226
  .utrecht-listbox__option--selected {
3243
- background-color: var(--utrecht-listbox-option-selected-background-color);
3244
- color: var(--utrecht-listbox-option-selected-color);
3227
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3228
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3229
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
3230
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
3231
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
3232
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
3245
3233
  }
3246
3234
 
3247
3235
  .utrecht-listbox__option--html-li {
3248
3236
  list-style: none;
3249
3237
  }
3250
3238
  .utrecht-listbox__option--html-li:hover {
3251
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3252
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3239
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3240
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3253
3241
  }
3254
3242
  .utrecht-listbox__option--html-li:focus {
3255
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3256
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3243
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3244
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3245
+ }
3246
+ .utrecht-listbox__option--disabled {
3247
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
3248
+ --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
3249
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
3250
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
3251
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3257
3252
  }
3258
3253
 
3259
3254
  .utrecht-listbox--disabled {
3255
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
3256
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
3257
+ --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
3258
+ --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
3259
+ --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
3260
3260
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3261
3261
  }
3262
3262
 
3263
3263
  .utrecht-listbox--html-div:focus {
3264
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3264
3265
  }
3265
3266
  .utrecht-listbox--html-div[prince-xml-ignore-pseudo-class-focus-visible] {
3266
3267
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -3271,6 +3272,30 @@
3271
3272
  outline-style: var(--utrecht-focus-outline-style, revert);
3272
3273
  outline-width: var(--utrecht-focus-outline-width, revert);
3273
3274
  }
3275
+
3276
+ .utrecht-listbox--forced-colors {
3277
+ --utrecht-listbox-background-color: field;
3278
+ --utrecht-listbox-border-color: fieldtext;
3279
+ --utrecht-listbox-hover-background-color: field;
3280
+ --utrecht-listbox-hover-border-color: fieldtext;
3281
+ --utrecht-listbox-hover-color: fieldtext;
3282
+ --utrecht-listbox-focus-border-color: Highlight;
3283
+ --utrecht-listbox-disabled-border-color: GrayText;
3284
+ --utrecht-listbox-option-background-color: field;
3285
+ --utrecht-listbox-option-color: fieldtext;
3286
+ --utrecht-listbox-option-hover-background-color: Highlight;
3287
+ --utrecht-listbox-option-hover-color: HighlightText;
3288
+ --utrecht-listbox-option-active-background-color: Highlight;
3289
+ --utrecht-listbox-option-active-color: HighlightText;
3290
+ --utrecht-listbox-option-disabled-background-color: field;
3291
+ --utrecht-listbox-option-disabled-color: GrayText;
3292
+ --utrecht-listbox-option-selected-background-color: Highlight;
3293
+ --utrecht-listbox-option-selected-color: HighlightText;
3294
+ --utrecht-listbox-option-selected-hover-background-color: Highlight;
3295
+ --utrecht-listbox-option-selected-hover-color: HighlightText;
3296
+ --utrecht-listbox-option-selected-disabled-background-color: GrayText;
3297
+ --utrecht-listbox-option-selected-disabled-color: field;
3298
+ }
3274
3299
  .utrecht-logo-button {
3275
3300
  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
3276
3301
  --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
@@ -3292,13 +3317,23 @@
3292
3317
  fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
3293
3318
  }
3294
3319
  .utrecht-logo {
3320
+ margin-bottom: 0;
3321
+ margin-top: 0;
3322
+ margin-right: 0;
3323
+ margin-left: 0;
3295
3324
  display: block;
3296
3325
  max-height: var(--utrecht-logo-max-block-size, 192px);
3297
3326
  max-width: var(--utrecht-logo-max-inline-size, 96px);
3298
3327
  min-height: var(--utrecht-logo-min-block-size);
3299
3328
  min-width: var(--utrecht-logo-min-inline-size);
3300
3329
  }
3301
- .utrecht-logo > * {
3330
+ .utrecht-logo svg[role=img][aria-label] {
3331
+ -prince-alt-text: attr(aria-label);
3332
+ -prince-pdf-tag-type: figure;
3333
+ }
3334
+ .utrecht-logo > img,
3335
+ .utrecht-logo > picture,
3336
+ .utrecht-logo > svg {
3302
3337
  height: 100%;
3303
3338
  display: inline-block;
3304
3339
  width: auto;
@@ -3318,59 +3353,6 @@
3318
3353
  width: var(--utrecht-map-marker-size);
3319
3354
  justify-content: center;
3320
3355
  }
3321
- .utrecht-mapcontrolbutton {
3322
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
3323
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
3324
- align-items: center;
3325
- background-color: var(--utrecht-mapcontrolbutton-background-color);
3326
- border-color: var(--utrecht-mapcontrolbutton-border-color);
3327
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
3328
- border-style: var(--utrecht-mapcontrolbutton-border-style);
3329
- border-width: var(--utrecht-mapcontrolbutton-border-width);
3330
- color: var(--utrecht-mapcontrolbutton-color);
3331
- display: flex;
3332
- flex-direction: row;
3333
- justify-content: center;
3334
- min-height: var(--utrecht-mapcontrolbutton-min-block-size);
3335
- min-width: var(--utrecht-mapcontrolbutton-min-inline-size);
3336
- padding-bottom: 0;
3337
- padding-top: 0;
3338
- padding-right: 0;
3339
- padding-left: 0;
3340
- }
3341
-
3342
- .utrecht-mapcontrolbutton:disabled,
3343
- .utrecht-mapcontrolbutton--disabled {
3344
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
3345
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
3346
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
3347
- color: var(--utrecht-mapcontrolbutton-disabled-color);
3348
- }
3349
-
3350
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton[prince-xml-ignore-pseudo-class-focus-visible] {
3351
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3352
- var(--utrecht-focus-inverse-outline-color, transparent);
3353
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3354
- outline-color: var(--utrecht-focus-outline-color, revert);
3355
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3356
- outline-style: var(--utrecht-focus-outline-style, revert);
3357
- outline-width: var(--utrecht-focus-outline-width, revert);
3358
- }
3359
-
3360
- .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3361
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3362
- }
3363
- .utrecht-mapcontrolbutton--hover:not(:disabled),
3364
- .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3365
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
3366
- color: var(--utrecht-mapcontrolbutton-color);
3367
- }
3368
-
3369
- .utrecht-mapcontrolbutton__label {
3370
- display: block;
3371
- padding-right: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
3372
- padding-left: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
3373
- }
3374
3356
  .utrecht-mark {
3375
3357
  background-color: var(--utrecht-mark-background-color, revert);
3376
3358
  color: var(--utrecht-mark-color, revert);
@@ -3397,45 +3379,6 @@
3397
3379
  background-color: Highlight;
3398
3380
  color: HighlightText;
3399
3381
  }
3400
- .utrecht-menulijst {
3401
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3402
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3403
- font-family: var(--utrecht-document-font-family);
3404
- padding-bottom: var(--utrecht-space-block-sm);
3405
- padding-top: var(--utrecht-space-block-sm);
3406
- padding-left: 0;
3407
- }
3408
-
3409
- .utrecht-menulijst__item {
3410
- list-style: none;
3411
- margin-bottom: var(--utrecht-space-block-sm);
3412
- margin-top: var(--utrecht-space-block-sm);
3413
- }
3414
-
3415
- .utrecht-menulijst__item a {
3416
- background-image: var(--utrecht-menulijst-item-background-image, none);
3417
- background-position: 0 0.25em;
3418
- background-repeat: no-repeat;
3419
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
3420
- display: block;
3421
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3422
- padding-left: var(--utrecht-space-block-md);
3423
- text-decoration: none;
3424
- }
3425
-
3426
- .utrecht-menulijst__item a:hover {
3427
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3428
- }
3429
-
3430
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link[prince-xml-ignore-pseudo-class-focus-visible] {
3431
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3432
- var(--utrecht-focus-inverse-outline-color, transparent);
3433
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3434
- outline-color: var(--utrecht-focus-outline-color, revert);
3435
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3436
- outline-style: var(--utrecht-focus-outline-style, revert);
3437
- outline-width: var(--utrecht-focus-outline-width, revert);
3438
- }
3439
3382
  .utrecht-multiline-data {
3440
3383
  white-space: pre-line;
3441
3384
  }
@@ -3493,226 +3436,6 @@
3493
3436
  padding-left: var(--utrecht-nav-bar-link-padding-inline-start);
3494
3437
  text-decoration: none;
3495
3438
  }
3496
- .utrecht-sidenav {
3497
- --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
3498
- --utrecht-sidenav-connection-inline-size: 2px;
3499
- --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
3500
- --utrecht-sidenav-marker-offset: 26px;
3501
- --utrecht-sidenav-connection-block-size: 100%;
3502
- --utrecht-sidenav-marker-height: 8px;
3503
- --utrecht-sidenav-marker-outline-width: 2px;
3504
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3505
- border-top: 1px solid var(--utrecht-color-grey-80);
3506
- width: 19rem;
3507
- margin-bottom: 0;
3508
- margin-top: 0;
3509
- padding-bottom: 0;
3510
- padding-top: 0;
3511
- }
3512
-
3513
- .utrecht-sidenav__list {
3514
- margin-bottom: 0;
3515
- margin-top: 0.2rem;
3516
- padding-bottom: 0;
3517
- padding-top: 0;
3518
- padding-left: 0;
3519
- }
3520
-
3521
- .utrecht-sidenav__list--child {
3522
- margin-top: 0;
3523
- padding-right: 0;
3524
- padding-left: 1.4rem;
3525
- }
3526
-
3527
- .utrecht-sidenav__item {
3528
- list-style: none;
3529
- margin-left: 0;
3530
- position: relative;
3531
- }
3532
-
3533
- .utrecht-sidenav__item--current {
3534
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
3535
- }
3536
-
3537
- .utrecht-sidenav__item--last {
3538
- border-bottom: none;
3539
- }
3540
- .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
3541
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3542
- display: block;
3543
- margin-left: var(--utrecht-space-inline-lg);
3544
- }
3545
-
3546
- .utrecht-sidenav__link {
3547
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3548
- display: block;
3549
- margin-left: 0;
3550
- padding-bottom: var(--utrecht-space-block-xs);
3551
- padding-top: var(--utrecht-space-block-xs);
3552
- padding-right: var(--utrecht-space-inline-3xs);
3553
- padding-left: var(--utrecht-space-inline-lg);
3554
- text-decoration: none;
3555
- }
3556
-
3557
- .utrecht-sidenav__link:hover {
3558
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
3559
- text-decoration: underline;
3560
- }
3561
-
3562
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3563
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3564
- var(--utrecht-focus-inverse-outline-color, transparent);
3565
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3566
- outline-color: var(--utrecht-focus-outline-color, revert);
3567
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3568
- outline-style: var(--utrecht-focus-outline-style, revert);
3569
- outline-width: var(--utrecht-focus-outline-width, revert);
3570
- }
3571
- .utrecht-sidenav__link--parent {
3572
- padding-bottom: 0;
3573
- }
3574
- .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
3575
- .utrecht-sidenav__link--parent,
3576
- .utrecht-sidenav__link--child)::after {
3577
- background: var(--utrecht-sidenav-connection-color);
3578
- height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
3579
- content: "";
3580
- display: block;
3581
- width: var(--utrecht-sidenav-connection-inline-size);
3582
- bottom: 0;
3583
- top: calc(var(--utrecht-sidenav-marker-offset));
3584
- left: 3px;
3585
- overflow: hidden;
3586
- position: absolute;
3587
- z-index: 5;
3588
- }
3589
-
3590
- .utrecht-sidenav__connection--last,
3591
- .utrecht-sidenav__connection--parent,
3592
- .utrecht-sidenav__connection--sibling {
3593
- display: none;
3594
- }
3595
- .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
3596
- background-color: var(--utrecht-sidenav-item-marker-color);
3597
- height: var(--utrecht-sidenav-marker-height);
3598
- border-radius: 100%;
3599
- content: "";
3600
- width: 8px;
3601
- top: 20px;
3602
- left: var(--utrecht-sidenav-marker-offset);
3603
- overflow: hidden;
3604
- position: absolute;
3605
- transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
3606
- z-index: 10;
3607
- }
3608
- .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
3609
- background-color: transparent;
3610
- height: 4px;
3611
- border: 2px solid var(--utrecht-sidenav-link-color);
3612
- width: 4px;
3613
- top: 16px;
3614
- left: 1.2rem;
3615
- transform: translateY(-50%) translateX(-19.5px);
3616
- }
3617
- .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
3618
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
3619
- background-color: var(--utrecht-sidenav-marker-current-color);
3620
- }
3621
-
3622
- .utrecht-sidenav__link--child,
3623
- .utrecht-sidenav__link--current-child {
3624
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3625
- margin-bottom: 0;
3626
- margin-top: 0;
3627
- padding-bottom: var(--utrecht-space-block-2xs);
3628
- padding-top: var(--utrecht-space-block-2xs);
3629
- padding-right: var(--utrecht-space-inline-3xs);
3630
- padding-left: var(--utrecht-space-inline-lg);
3631
- text-decoration: none;
3632
- }
3633
-
3634
- .utrecht-sidenav__link--current,
3635
- .utrecht-sidenav__link--current-child {
3636
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3637
- }
3638
- .utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
3639
- background-color: var(--utrecht-sidenav-link-hover-color);
3640
- }
3641
- .utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
3642
- background-color: var(--utrecht-sidenav-link-hover-color);
3643
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
3644
- }
3645
-
3646
- .utrecht-sidenav--pseudo-elements {
3647
- }
3648
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3649
- display: none;
3650
- }
3651
- .utrecht-navhtml {
3652
- font-family: var(--utrecht-document-font-family);
3653
- }
3654
-
3655
- .utrecht-topnav__list {
3656
- background-color: var(--utrecht-topnav-list-background-color);
3657
- display: flex;
3658
- justify-content: space-between;
3659
- list-style: none;
3660
- list-style-image: none;
3661
- margin-bottom: 0;
3662
- margin-top: 0;
3663
- overflow: visible;
3664
- padding-bottom: 0;
3665
- padding-top: 0;
3666
- padding-right: 0;
3667
- padding-left: 0;
3668
- }
3669
-
3670
- .utrecht-topnav__item {
3671
- border-right: 1px solid var(--utrecht-topnav-list-border-color);
3672
- flex: 1 0 auto;
3673
- margin-left: 0;
3674
- text-align: center;
3675
- }
3676
-
3677
- .utrecht-topnav__item li:first-child {
3678
- border-left: 1px solid var(--utrecht-topnav-list-border-color);
3679
- padding-left: 0;
3680
- }
3681
-
3682
- .utrecht-topnav__link {
3683
- color: var(--utrecht-topnav-link-color);
3684
- display: block;
3685
- padding-bottom: 1rem;
3686
- padding-top: 1rem;
3687
- text-decoration: none;
3688
- }
3689
-
3690
- .utrecht-topnav__link--hover,
3691
- .utrecht-topnav__link:hover {
3692
- background-color: var(--utrecht-topnav-link-hover-background-color);
3693
- color: var(--utrecht-topnav-link-color);
3694
- text-decoration: underline;
3695
- }
3696
-
3697
- .utrecht-topnav__link--current {
3698
- background-color: var(--utrecht-topnav-list-background-active);
3699
- text-decoration: underline;
3700
- }
3701
-
3702
- .utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
3703
- background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
3704
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3705
- }
3706
-
3707
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3708
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3709
- var(--utrecht-focus-inverse-outline-color, transparent);
3710
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3711
- outline-color: var(--utrecht-focus-outline-color, revert);
3712
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3713
- outline-style: var(--utrecht-focus-outline-style, revert);
3714
- outline-width: var(--utrecht-focus-outline-width, revert);
3715
- }
3716
3439
  .utrecht-number-badge {
3717
3440
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3718
3441
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -6140,6 +5863,12 @@
6140
5863
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6141
5864
  }
6142
5865
 
5866
+ .utrecht-select--hover {
5867
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5868
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5869
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5870
+ }
5871
+
6143
5872
  .utrecht-select--focus {
6144
5873
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6145
5874
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6175,6 +5904,11 @@
6175
5904
  }
6176
5905
  .utrecht-select--html-select {
6177
5906
  }
5907
+ .utrecht-select--html-select:hover {
5908
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5909
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5910
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5911
+ }
6178
5912
  .utrecht-select--html-select:focus {
6179
5913
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6180
5914
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -7128,7 +6862,14 @@
7128
6862
  }
7129
6863
  .utrecht-html blockquote {
7130
6864
  background-color: var(--utrecht-blockquote-background-color);
6865
+ border-color: var(--utrecht-blockquote-border-color);
6866
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
6867
+ border-style: solid;
6868
+ border-width: var(--utrecht-blockquote-border-width, 0);
6869
+ border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
7131
6870
  color: var(--utrecht-blockquote-color);
6871
+ display: flex;
6872
+ flex-direction: column;
7132
6873
  font-family: var(--utrecht-document-font-family);
7133
6874
  font-size: var(--utrecht-blockquote-font-size);
7134
6875
  font-style: var(--utrecht-blockquote-font-style);
@@ -7140,6 +6881,7 @@
7140
6881
  padding-top: var(--utrecht-blockquote-padding-block-start);
7141
6882
  padding-right: var(--utrecht-blockquote-padding-inline-end);
7142
6883
  padding-left: var(--utrecht-blockquote-padding-inline-start);
6884
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
7143
6885
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
7144
6886
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
7145
6887
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -7965,6 +7707,11 @@
7965
7707
  -prince-pdf-form: enable;
7966
7708
  }
7967
7709
  }
7710
+ .utrecht-html select:hover {
7711
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7712
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7713
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
7714
+ }
7968
7715
  .utrecht-html select:focus {
7969
7716
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7970
7717
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));