@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.
package/dist/index.css CHANGED
@@ -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
  @charset "UTF-8";
82
20
  .utrecht-accordion {
@@ -501,7 +439,14 @@
501
439
  }
502
440
  .utrecht-blockquote {
503
441
  background-color: var(--utrecht-blockquote-background-color);
442
+ border-color: var(--utrecht-blockquote-border-color);
443
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
444
+ border-style: solid;
445
+ border-width: var(--utrecht-blockquote-border-width, 0);
446
+ border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
504
447
  color: var(--utrecht-blockquote-color);
448
+ display: flex;
449
+ flex-direction: column;
505
450
  font-family: var(--utrecht-document-font-family);
506
451
  font-size: var(--utrecht-blockquote-font-size);
507
452
  font-style: var(--utrecht-blockquote-font-style);
@@ -513,14 +458,25 @@
513
458
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
514
459
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
515
460
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
461
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
516
462
  }
517
-
518
- .utrecht-blockquote__attribution {
519
- color: var(--utrecht-blockquote-attribution-color, inherit);
520
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
463
+ .utrecht-blockquote__attribution,
464
+ .utrecht-blockquote__caption {
465
+ color: var(--utrecht-blockquote-caption-color, inherit);
466
+ font-size: var(--utrecht-blockquote-caption-font-size, inherit);
521
467
  }
522
468
 
523
- .utrecht-blockquote__content {
469
+ .utrecht-blockquote__figure {
470
+ display: flex;
471
+ flex-direction: column;
472
+ margin-block-end: 0;
473
+ margin-block-start: 0;
474
+ margin-inline-end: 0;
475
+ margin-inline-start: 0;
476
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
477
+ }
478
+ .utrecht-blockquote__content,
479
+ .utrecht-blockquote__quote {
524
480
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
525
481
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
526
482
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -530,6 +486,13 @@
530
486
  .utrecht-blockquote--distanced {
531
487
  --utrecht-space-around: 1;
532
488
  }
489
+
490
+ .utrecht-blockquote--html-blockquote {
491
+ --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
492
+ --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
493
+ color: var(--utrecht-blockquote-content-color, inherit);
494
+ font-size: var(--utrecht-blockquote-content-font-size, inherit);
495
+ }
533
496
  .utrecht-breadcrumb-nav {
534
497
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
535
498
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -1952,6 +1915,12 @@
1952
1915
  column-width: var(--utrecht-column-layout-column-width, 40ch);
1953
1916
  display: block;
1954
1917
  }
1918
+ @media print {
1919
+ .utrecht-column-layout {
1920
+ column-count: var(--utrecht-column-layout-print-column-count, 2);
1921
+ column-width: var(--utrecht-column-layout-print-column-width, auto);
1922
+ }
1923
+ }
1955
1924
 
1956
1925
  .utrecht-column-layout--rule {
1957
1926
  column-rule-color: var(--utrecht-column-layout-column-rule-color);
@@ -1977,7 +1946,7 @@
1977
1946
  inset: 0;
1978
1947
  overflow: auto;
1979
1948
  position: absolute;
1980
- z-index: var(--utrecht-combobox-popover-z-index);
1949
+ z-index: var(--utrecht-combobox-popover-z-index, 1);
1981
1950
  }
1982
1951
 
1983
1952
  .utrecht-combobox__popover--block-end {
@@ -2480,7 +2449,7 @@
2480
2449
  .utrecht-form-field--checkbox {
2481
2450
  display: grid;
2482
2451
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
2483
- grid-template-areas: "input label" "input description" "input description-invalid";
2452
+ grid-template-areas: "input label" "input description" "input error-message";
2484
2453
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
2485
2454
  }
2486
2455
  .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2493,7 +2462,7 @@
2493
2462
  .utrecht-form-field--radio {
2494
2463
  display: grid;
2495
2464
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
2496
- grid-template-areas: "input label" "input description" "input description-invalid";
2465
+ grid-template-areas: "input label" "input description" "input error-message";
2497
2466
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
2498
2467
  }
2499
2468
  .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2525,7 +2494,7 @@
2525
2494
  }
2526
2495
 
2527
2496
  .utrecht-form-field .utrecht-form-field-description--invalid {
2528
- grid-area: description-invalid;
2497
+ grid-area: error-message;
2529
2498
  order: 3;
2530
2499
  }
2531
2500
 
@@ -2540,6 +2509,11 @@
2540
2509
  grid-area: description-before;
2541
2510
  order: 4;
2542
2511
  }
2512
+
2513
+ .utrecht-form-field__error-message {
2514
+ grid-area: error-message;
2515
+ order: 3;
2516
+ }
2543
2517
  .utrecht-form-fieldset {
2544
2518
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
2545
2519
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -2887,8 +2861,10 @@
2887
2861
  pointer-events: none;
2888
2862
  width: 100%;
2889
2863
  }
2890
- .utrecht-img {
2864
+ .utrecht-img:not(img[height]) {
2891
2865
  height: auto;
2866
+ }
2867
+ .utrecht-img:not(img[width]) {
2892
2868
  width: auto;
2893
2869
  }
2894
2870
 
@@ -3226,12 +3202,13 @@
3226
3202
  }
3227
3203
  .utrecht-listbox {
3228
3204
  --utrecht-listbox-max-block-size: 300px;
3229
- background-color: var(--utrecht-listbox-background-color);
3230
- border-color: var(--utrecht-listbox-border-color);
3205
+ background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
3206
+ border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
3231
3207
  border-radius: var(--utrecht-listbox-border-radius);
3232
3208
  border-style: solid;
3233
3209
  border-width: var(--utrecht-listbox-border-width);
3234
3210
  box-sizing: border-box;
3211
+ color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
3235
3212
  cursor: default;
3236
3213
  display: flex;
3237
3214
  flex-direction: column;
@@ -3250,16 +3227,32 @@
3250
3227
  }
3251
3228
  @media (forced-colors: active) {
3252
3229
  .utrecht-listbox {
3253
- --utrecht-listbox-option-selected-background-color: Highlight;
3254
- --utrecht-listbox-option-selected-color: HighlightText;
3230
+ --utrecht-listbox-background-color: field;
3231
+ --utrecht-listbox-border-color: fieldtext;
3232
+ --utrecht-listbox-hover-background-color: field;
3233
+ --utrecht-listbox-hover-border-color: fieldtext;
3234
+ --utrecht-listbox-hover-color: fieldtext;
3235
+ --utrecht-listbox-focus-border-color: Highlight;
3236
+ --utrecht-listbox-disabled-border-color: GrayText;
3237
+ --utrecht-listbox-option-background-color: field;
3238
+ --utrecht-listbox-option-color: fieldtext;
3239
+ --utrecht-listbox-option-hover-background-color: Highlight;
3240
+ --utrecht-listbox-option-hover-color: HighlightText;
3241
+ --utrecht-listbox-option-active-background-color: Highlight;
3242
+ --utrecht-listbox-option-active-color: HighlightText;
3255
3243
  --utrecht-listbox-option-disabled-background-color: field;
3256
3244
  --utrecht-listbox-option-disabled-color: GrayText;
3257
- background-color: field;
3258
- color: fieldtext;
3245
+ --utrecht-listbox-option-selected-background-color: Highlight;
3246
+ --utrecht-listbox-option-selected-color: HighlightText;
3247
+ --utrecht-listbox-option-selected-hover-background-color: Highlight;
3248
+ --utrecht-listbox-option-selected-hover-color: HighlightText;
3249
+ --utrecht-listbox-option-selected-disabled-background-color: GrayText;
3250
+ --utrecht-listbox-option-selected-disabled-color: field;
3259
3251
  }
3260
3252
  }
3261
3253
 
3262
3254
  .utrecht-listbox--focus {
3255
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3263
3256
  }
3264
3257
 
3265
3258
  .utrecht-listbox--focus-visible {
@@ -3275,9 +3268,6 @@
3275
3268
  .utrecht-listbox--invalid {
3276
3269
  }
3277
3270
 
3278
- .utrecht-listbox--read-only {
3279
- }
3280
-
3281
3271
  .utrecht-listbox__list {
3282
3272
  margin-block-end: 0;
3283
3273
  margin-block-start: 0;
@@ -3311,11 +3301,24 @@
3311
3301
 
3312
3302
  .utrecht-listbox__option {
3313
3303
  list-style: none;
3314
- --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
3304
+ --_utrecht-listbox-option-background-color: var(
3305
+ --_utrecht-listbox-option-disabled-background-color,
3306
+ var(
3307
+ --_utrecht-listbox-option-interactive-background-color,
3308
+ var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
3309
+ )
3310
+ );
3311
+ --_utrecht-listbox-option-color: var(
3312
+ --_utrecht-listbox-option-disabled-color,
3313
+ var(
3314
+ --_utrecht-listbox-option-interactive-color,
3315
+ var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
3316
+ )
3317
+ );
3315
3318
  align-items: center;
3316
- background-color: var(--utrecht-listbox-option-background-color);
3319
+ background-color: var(--_utrecht-listbox-option-background-color);
3317
3320
  box-sizing: border-box;
3318
- color: var(--utrecht-listbox-option-color);
3321
+ color: var(--_utrecht-listbox-option-color);
3319
3322
  display: flex;
3320
3323
  min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
3321
3324
  padding-block-end: var(--utrecht-listbox-option-padding-block-end);
@@ -3329,19 +3332,14 @@
3329
3332
  }
3330
3333
  }
3331
3334
 
3332
- .utrecht-listbox__option--disabled {
3333
- background-color: var(--utrecht-listbox-option-disabled-background-color);
3334
- color: var(--utrecht-listbox-option-disabled-color);
3335
- }
3336
-
3337
3335
  .utrecht-listbox__option--hover {
3338
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3339
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3336
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3337
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3340
3338
  }
3341
3339
 
3342
3340
  .utrecht-listbox__option--focus {
3343
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3344
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3341
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3342
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3345
3343
  }
3346
3344
 
3347
3345
  .utrecht-listbox__option--focus-visible {
@@ -3356,43 +3354,50 @@
3356
3354
  }
3357
3355
 
3358
3356
  .utrecht-listbox__option--active {
3359
- background-color: var(--utrecht-listbox-option-is-active-background-color);
3360
- color: var(--utrecht-listbox-option-is-active-color);
3357
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
3358
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
3361
3359
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
3362
3360
  }
3363
3361
 
3364
3362
  .utrecht-listbox__option--selected {
3365
- background-color: var(--utrecht-listbox-option-selected-background-color);
3366
- color: var(--utrecht-listbox-option-selected-color);
3363
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3364
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3365
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
3366
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
3367
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
3368
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
3367
3369
  }
3368
3370
 
3369
3371
  .utrecht-listbox__option--html-li {
3370
3372
  list-style: none;
3371
3373
  }
3372
3374
  .utrecht-listbox__option--html-li:hover {
3373
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3374
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3375
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3376
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3375
3377
  }
3376
3378
  .utrecht-listbox__option--html-li:focus {
3377
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3378
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3379
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3380
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3381
+ }
3382
+ .utrecht-listbox__option--disabled {
3383
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
3384
+ --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
3385
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
3386
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
3387
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3379
3388
  }
3380
3389
 
3381
3390
  .utrecht-listbox--disabled {
3391
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
3392
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
3393
+ --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
3394
+ --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
3395
+ --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
3382
3396
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3383
3397
  }
3384
- @media (forced-colors: active) {
3385
- .utrecht-listbox--disabled {
3386
- --utrecht-listbox-option-selected-background-color: GrayText;
3387
- --utrecht-listbox-option-selected-color: field;
3388
- --utrecht-listbox-option-background-color: field;
3389
- --utrecht-listbox-option-color: GrayText;
3390
- --utrecht-listbox-background-color: field;
3391
- --utrecht-listbox-color: GrayText;
3392
- }
3393
- }
3394
3398
 
3395
3399
  .utrecht-listbox--html-div:focus {
3400
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3396
3401
  }
3397
3402
  .utrecht-listbox--html-div:focus-visible {
3398
3403
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -3403,6 +3408,30 @@
3403
3408
  outline-style: var(--utrecht-focus-outline-style, revert);
3404
3409
  outline-width: var(--utrecht-focus-outline-width, revert);
3405
3410
  }
3411
+
3412
+ .utrecht-listbox--forced-colors {
3413
+ --utrecht-listbox-background-color: field;
3414
+ --utrecht-listbox-border-color: fieldtext;
3415
+ --utrecht-listbox-hover-background-color: field;
3416
+ --utrecht-listbox-hover-border-color: fieldtext;
3417
+ --utrecht-listbox-hover-color: fieldtext;
3418
+ --utrecht-listbox-focus-border-color: Highlight;
3419
+ --utrecht-listbox-disabled-border-color: GrayText;
3420
+ --utrecht-listbox-option-background-color: field;
3421
+ --utrecht-listbox-option-color: fieldtext;
3422
+ --utrecht-listbox-option-hover-background-color: Highlight;
3423
+ --utrecht-listbox-option-hover-color: HighlightText;
3424
+ --utrecht-listbox-option-active-background-color: Highlight;
3425
+ --utrecht-listbox-option-active-color: HighlightText;
3426
+ --utrecht-listbox-option-disabled-background-color: field;
3427
+ --utrecht-listbox-option-disabled-color: GrayText;
3428
+ --utrecht-listbox-option-selected-background-color: Highlight;
3429
+ --utrecht-listbox-option-selected-color: HighlightText;
3430
+ --utrecht-listbox-option-selected-hover-background-color: Highlight;
3431
+ --utrecht-listbox-option-selected-hover-color: HighlightText;
3432
+ --utrecht-listbox-option-selected-disabled-background-color: GrayText;
3433
+ --utrecht-listbox-option-selected-disabled-color: field;
3434
+ }
3406
3435
  .utrecht-logo-button {
3407
3436
  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
3408
3437
  --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
@@ -3424,13 +3453,19 @@
3424
3453
  fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
3425
3454
  }
3426
3455
  .utrecht-logo {
3456
+ margin-block-end: 0;
3457
+ margin-block-start: 0;
3458
+ margin-inline-end: 0;
3459
+ margin-inline-start: 0;
3427
3460
  display: block;
3428
3461
  max-block-size: var(--utrecht-logo-max-block-size, 192px);
3429
3462
  max-inline-size: var(--utrecht-logo-max-inline-size, 96px);
3430
3463
  min-block-size: var(--utrecht-logo-min-block-size);
3431
3464
  min-inline-size: var(--utrecht-logo-min-inline-size);
3432
3465
  }
3433
- .utrecht-logo > * {
3466
+ .utrecht-logo > img,
3467
+ .utrecht-logo > picture,
3468
+ .utrecht-logo > svg {
3434
3469
  block-size: 100%;
3435
3470
  display: inline-block;
3436
3471
  inline-size: auto;
@@ -3450,59 +3485,6 @@
3450
3485
  inline-size: var(--utrecht-map-marker-size);
3451
3486
  justify-content: center;
3452
3487
  }
3453
- .utrecht-mapcontrolbutton {
3454
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
3455
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
3456
- align-items: center;
3457
- background-color: var(--utrecht-mapcontrolbutton-background-color);
3458
- border-color: var(--utrecht-mapcontrolbutton-border-color);
3459
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
3460
- border-style: var(--utrecht-mapcontrolbutton-border-style);
3461
- border-width: var(--utrecht-mapcontrolbutton-border-width);
3462
- color: var(--utrecht-mapcontrolbutton-color);
3463
- display: flex;
3464
- flex-direction: row;
3465
- justify-content: center;
3466
- min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
3467
- min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
3468
- padding-block-end: 0;
3469
- padding-block-start: 0;
3470
- padding-inline-end: 0;
3471
- padding-inline-start: 0;
3472
- }
3473
-
3474
- .utrecht-mapcontrolbutton:disabled,
3475
- .utrecht-mapcontrolbutton--disabled {
3476
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
3477
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
3478
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
3479
- color: var(--utrecht-mapcontrolbutton-disabled-color);
3480
- }
3481
-
3482
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus-visible {
3483
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3484
- var(--utrecht-focus-inverse-outline-color, transparent);
3485
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3486
- outline-color: var(--utrecht-focus-outline-color, revert);
3487
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3488
- outline-style: var(--utrecht-focus-outline-style, revert);
3489
- outline-width: var(--utrecht-focus-outline-width, revert);
3490
- }
3491
-
3492
- .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3493
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3494
- }
3495
- .utrecht-mapcontrolbutton--hover:not(:disabled),
3496
- .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3497
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
3498
- color: var(--utrecht-mapcontrolbutton-color);
3499
- }
3500
-
3501
- .utrecht-mapcontrolbutton__label {
3502
- display: block;
3503
- padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
3504
- padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
3505
- }
3506
3488
  .utrecht-mark {
3507
3489
  background-color: var(--utrecht-mark-background-color, revert);
3508
3490
  color: var(--utrecht-mark-color, revert);
@@ -3529,45 +3511,6 @@
3529
3511
  background-color: Highlight;
3530
3512
  color: HighlightText;
3531
3513
  }
3532
- .utrecht-menulijst {
3533
- border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3534
- border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3535
- font-family: var(--utrecht-document-font-family);
3536
- padding-block-end: var(--utrecht-space-block-sm);
3537
- padding-block-start: var(--utrecht-space-block-sm);
3538
- padding-inline-start: 0;
3539
- }
3540
-
3541
- .utrecht-menulijst__item {
3542
- list-style: none;
3543
- margin-block-end: var(--utrecht-space-block-sm);
3544
- margin-block-start: var(--utrecht-space-block-sm);
3545
- }
3546
-
3547
- .utrecht-menulijst__item a {
3548
- background-image: var(--utrecht-menulijst-item-background-image, none);
3549
- background-position: 0 0.25em;
3550
- background-repeat: no-repeat;
3551
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
3552
- display: block;
3553
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3554
- padding-inline-start: var(--utrecht-space-block-md);
3555
- text-decoration: none;
3556
- }
3557
-
3558
- .utrecht-menulijst__item a:hover {
3559
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3560
- }
3561
-
3562
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link: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
3514
  .utrecht-multiline-data {
3572
3515
  white-space: pre-line;
3573
3516
  white-space-collapse: preserve-breaks;
@@ -3638,226 +3581,6 @@
3638
3581
  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
3639
3582
  text-decoration: none;
3640
3583
  }
3641
- .utrecht-sidenav {
3642
- --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
3643
- --utrecht-sidenav-connection-inline-size: 2px;
3644
- --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
3645
- --utrecht-sidenav-marker-offset: 26px;
3646
- --utrecht-sidenav-connection-block-size: 100%;
3647
- --utrecht-sidenav-marker-height: 8px;
3648
- --utrecht-sidenav-marker-outline-width: 2px;
3649
- border-block-end: 1px solid var(--utrecht-color-grey-80);
3650
- border-block-start: 1px solid var(--utrecht-color-grey-80);
3651
- inline-size: 19rem;
3652
- margin-block-end: 0;
3653
- margin-block-start: 0;
3654
- padding-block-end: 0;
3655
- padding-block-start: 0;
3656
- }
3657
-
3658
- .utrecht-sidenav__list {
3659
- margin-block-end: 0;
3660
- margin-block-start: 0.2rem;
3661
- padding-block-end: 0;
3662
- padding-block-start: 0;
3663
- padding-inline-start: 0;
3664
- }
3665
-
3666
- .utrecht-sidenav__list--child {
3667
- margin-block-start: 0;
3668
- padding-inline-end: 0;
3669
- padding-inline-start: 1.4rem;
3670
- }
3671
-
3672
- .utrecht-sidenav__item {
3673
- list-style: none;
3674
- margin-inline-start: 0;
3675
- position: relative;
3676
- }
3677
-
3678
- .utrecht-sidenav__item--current {
3679
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
3680
- }
3681
-
3682
- .utrecht-sidenav__item--last {
3683
- border-block-end: none;
3684
- }
3685
- .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
3686
- border-block-end: 1px solid var(--utrecht-color-grey-80);
3687
- display: block;
3688
- margin-inline-start: var(--utrecht-space-inline-lg);
3689
- }
3690
-
3691
- .utrecht-sidenav__link {
3692
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3693
- display: block;
3694
- margin-inline-start: 0;
3695
- padding-block-end: var(--utrecht-space-block-xs);
3696
- padding-block-start: var(--utrecht-space-block-xs);
3697
- padding-inline-end: var(--utrecht-space-inline-3xs);
3698
- padding-inline-start: var(--utrecht-space-inline-lg);
3699
- text-decoration: none;
3700
- }
3701
-
3702
- .utrecht-sidenav__link:hover {
3703
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
3704
- text-decoration: underline;
3705
- }
3706
-
3707
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link: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
- .utrecht-sidenav__link--parent {
3717
- padding-block-end: 0;
3718
- }
3719
- .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
3720
- .utrecht-sidenav__link--parent,
3721
- .utrecht-sidenav__link--child)::after {
3722
- background: var(--utrecht-sidenav-connection-color);
3723
- block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
3724
- content: "";
3725
- display: block;
3726
- inline-size: var(--utrecht-sidenav-connection-inline-size);
3727
- inset-block-end: 0;
3728
- inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
3729
- inset-inline-start: 3px;
3730
- overflow: hidden;
3731
- position: absolute;
3732
- z-index: 5;
3733
- }
3734
-
3735
- .utrecht-sidenav__connection--last,
3736
- .utrecht-sidenav__connection--parent,
3737
- .utrecht-sidenav__connection--sibling {
3738
- display: none;
3739
- }
3740
- .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
3741
- background-color: var(--utrecht-sidenav-item-marker-color);
3742
- block-size: var(--utrecht-sidenav-marker-height);
3743
- border-radius: 100%;
3744
- content: "";
3745
- inline-size: 8px;
3746
- inset-block-start: 20px;
3747
- inset-inline-start: var(--utrecht-sidenav-marker-offset);
3748
- overflow: hidden;
3749
- position: absolute;
3750
- transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
3751
- z-index: 10;
3752
- }
3753
- .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
3754
- background-color: transparent;
3755
- block-size: 4px;
3756
- border: 2px solid var(--utrecht-sidenav-link-color);
3757
- inline-size: 4px;
3758
- inset-block-start: 16px;
3759
- inset-inline-start: 1.2rem;
3760
- transform: translateY(-50%) translateX(-19.5px);
3761
- }
3762
- .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
3763
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
3764
- background-color: var(--utrecht-sidenav-marker-current-color);
3765
- }
3766
-
3767
- .utrecht-sidenav__link--child,
3768
- .utrecht-sidenav__link--current-child {
3769
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3770
- margin-block-end: 0;
3771
- margin-block-start: 0;
3772
- padding-block-end: var(--utrecht-space-block-2xs);
3773
- padding-block-start: var(--utrecht-space-block-2xs);
3774
- padding-inline-end: var(--utrecht-space-inline-3xs);
3775
- padding-inline-start: var(--utrecht-space-inline-lg);
3776
- text-decoration: none;
3777
- }
3778
-
3779
- .utrecht-sidenav__link--current,
3780
- .utrecht-sidenav__link--current-child {
3781
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3782
- }
3783
- .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 {
3784
- background-color: var(--utrecht-sidenav-link-hover-color);
3785
- }
3786
- .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 {
3787
- background-color: var(--utrecht-sidenav-link-hover-color);
3788
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
3789
- }
3790
-
3791
- .utrecht-sidenav--pseudo-elements {
3792
- }
3793
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3794
- display: none;
3795
- }
3796
- .utrecht-navhtml {
3797
- font-family: var(--utrecht-document-font-family);
3798
- }
3799
-
3800
- .utrecht-topnav__list {
3801
- background-color: var(--utrecht-topnav-list-background-color);
3802
- display: flex;
3803
- justify-content: space-between;
3804
- list-style: none;
3805
- list-style-image: none;
3806
- margin-block-end: 0;
3807
- margin-block-start: 0;
3808
- overflow: visible;
3809
- padding-block-end: 0;
3810
- padding-block-start: 0;
3811
- padding-inline-end: 0;
3812
- padding-inline-start: 0;
3813
- }
3814
-
3815
- .utrecht-topnav__item {
3816
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
3817
- flex: 1 0 auto;
3818
- margin-inline-start: 0;
3819
- text-align: center;
3820
- }
3821
-
3822
- .utrecht-topnav__item li:first-child {
3823
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
3824
- padding-inline-start: 0;
3825
- }
3826
-
3827
- .utrecht-topnav__link {
3828
- color: var(--utrecht-topnav-link-color);
3829
- display: block;
3830
- padding-block-end: 1rem;
3831
- padding-block-start: 1rem;
3832
- text-decoration: none;
3833
- }
3834
-
3835
- .utrecht-topnav__link--hover,
3836
- .utrecht-topnav__link:hover {
3837
- background-color: var(--utrecht-topnav-link-hover-background-color);
3838
- color: var(--utrecht-topnav-link-color);
3839
- text-decoration: underline;
3840
- }
3841
-
3842
- .utrecht-topnav__link--current {
3843
- background-color: var(--utrecht-topnav-list-background-active);
3844
- text-decoration: underline;
3845
- }
3846
-
3847
- .utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
3848
- background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
3849
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3850
- }
3851
-
3852
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus-visible {
3853
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3854
- var(--utrecht-focus-inverse-outline-color, transparent);
3855
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3856
- outline-color: var(--utrecht-focus-outline-color, revert);
3857
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3858
- outline-style: var(--utrecht-focus-outline-style, revert);
3859
- outline-width: var(--utrecht-focus-outline-width, revert);
3860
- }
3861
3584
  .utrecht-number-badge {
3862
3585
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3863
3586
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -6281,6 +6004,12 @@
6281
6004
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6282
6005
  }
6283
6006
 
6007
+ .utrecht-select--hover {
6008
+ 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))));
6009
+ 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))));
6010
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6011
+ }
6012
+
6284
6013
  .utrecht-select--focus {
6285
6014
  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))));
6286
6015
  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))));
@@ -6316,6 +6045,11 @@
6316
6045
  }
6317
6046
  .utrecht-select--html-select {
6318
6047
  }
6048
+ .utrecht-select--html-select:hover {
6049
+ 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))));
6050
+ 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))));
6051
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6052
+ }
6319
6053
  .utrecht-select--html-select:focus {
6320
6054
  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))));
6321
6055
  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))));