@utrecht/component-library-css 6.1.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 {
@@ -2008,7 +1946,7 @@
2008
1946
  inset: 0;
2009
1947
  overflow: auto;
2010
1948
  position: absolute;
2011
- z-index: var(--utrecht-combobox-popover-z-index);
1949
+ z-index: var(--utrecht-combobox-popover-z-index, 1);
2012
1950
  }
2013
1951
 
2014
1952
  .utrecht-combobox__popover--block-end {
@@ -2923,8 +2861,10 @@
2923
2861
  pointer-events: none;
2924
2862
  width: 100%;
2925
2863
  }
2926
- .utrecht-img {
2864
+ .utrecht-img:not(img[height]) {
2927
2865
  height: auto;
2866
+ }
2867
+ .utrecht-img:not(img[width]) {
2928
2868
  width: auto;
2929
2869
  }
2930
2870
 
@@ -3262,12 +3202,13 @@
3262
3202
  }
3263
3203
  .utrecht-listbox {
3264
3204
  --utrecht-listbox-max-block-size: 300px;
3265
- background-color: var(--utrecht-listbox-background-color);
3266
- 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)));
3267
3207
  border-radius: var(--utrecht-listbox-border-radius);
3268
3208
  border-style: solid;
3269
3209
  border-width: var(--utrecht-listbox-border-width);
3270
3210
  box-sizing: border-box;
3211
+ color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
3271
3212
  cursor: default;
3272
3213
  display: flex;
3273
3214
  flex-direction: column;
@@ -3286,16 +3227,32 @@
3286
3227
  }
3287
3228
  @media (forced-colors: active) {
3288
3229
  .utrecht-listbox {
3289
- --utrecht-listbox-option-selected-background-color: Highlight;
3290
- --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;
3291
3243
  --utrecht-listbox-option-disabled-background-color: field;
3292
3244
  --utrecht-listbox-option-disabled-color: GrayText;
3293
- background-color: field;
3294
- 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;
3295
3251
  }
3296
3252
  }
3297
3253
 
3298
3254
  .utrecht-listbox--focus {
3255
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3299
3256
  }
3300
3257
 
3301
3258
  .utrecht-listbox--focus-visible {
@@ -3311,9 +3268,6 @@
3311
3268
  .utrecht-listbox--invalid {
3312
3269
  }
3313
3270
 
3314
- .utrecht-listbox--read-only {
3315
- }
3316
-
3317
3271
  .utrecht-listbox__list {
3318
3272
  margin-block-end: 0;
3319
3273
  margin-block-start: 0;
@@ -3347,11 +3301,24 @@
3347
3301
 
3348
3302
  .utrecht-listbox__option {
3349
3303
  list-style: none;
3350
- --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
+ );
3351
3318
  align-items: center;
3352
- background-color: var(--utrecht-listbox-option-background-color);
3319
+ background-color: var(--_utrecht-listbox-option-background-color);
3353
3320
  box-sizing: border-box;
3354
- color: var(--utrecht-listbox-option-color);
3321
+ color: var(--_utrecht-listbox-option-color);
3355
3322
  display: flex;
3356
3323
  min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
3357
3324
  padding-block-end: var(--utrecht-listbox-option-padding-block-end);
@@ -3365,19 +3332,14 @@
3365
3332
  }
3366
3333
  }
3367
3334
 
3368
- .utrecht-listbox__option--disabled {
3369
- background-color: var(--utrecht-listbox-option-disabled-background-color);
3370
- color: var(--utrecht-listbox-option-disabled-color);
3371
- }
3372
-
3373
3335
  .utrecht-listbox__option--hover {
3374
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3375
- 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);
3376
3338
  }
3377
3339
 
3378
3340
  .utrecht-listbox__option--focus {
3379
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3380
- 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);
3381
3343
  }
3382
3344
 
3383
3345
  .utrecht-listbox__option--focus-visible {
@@ -3392,43 +3354,50 @@
3392
3354
  }
3393
3355
 
3394
3356
  .utrecht-listbox__option--active {
3395
- background-color: var(--utrecht-listbox-option-is-active-background-color);
3396
- 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);
3397
3359
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
3398
3360
  }
3399
3361
 
3400
3362
  .utrecht-listbox__option--selected {
3401
- background-color: var(--utrecht-listbox-option-selected-background-color);
3402
- 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);
3403
3369
  }
3404
3370
 
3405
3371
  .utrecht-listbox__option--html-li {
3406
3372
  list-style: none;
3407
3373
  }
3408
3374
  .utrecht-listbox__option--html-li:hover {
3409
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3410
- 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);
3411
3377
  }
3412
3378
  .utrecht-listbox__option--html-li:focus {
3413
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3414
- 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);
3415
3388
  }
3416
3389
 
3417
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);
3418
3396
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3419
3397
  }
3420
- @media (forced-colors: active) {
3421
- .utrecht-listbox--disabled {
3422
- --utrecht-listbox-option-selected-background-color: GrayText;
3423
- --utrecht-listbox-option-selected-color: field;
3424
- --utrecht-listbox-option-background-color: field;
3425
- --utrecht-listbox-option-color: GrayText;
3426
- --utrecht-listbox-background-color: field;
3427
- --utrecht-listbox-color: GrayText;
3428
- }
3429
- }
3430
3398
 
3431
3399
  .utrecht-listbox--html-div:focus {
3400
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3432
3401
  }
3433
3402
  .utrecht-listbox--html-div:focus-visible {
3434
3403
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -3439,6 +3408,30 @@
3439
3408
  outline-style: var(--utrecht-focus-outline-style, revert);
3440
3409
  outline-width: var(--utrecht-focus-outline-width, revert);
3441
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
+ }
3442
3435
  .utrecht-logo-button {
3443
3436
  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
3444
3437
  --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
@@ -3492,59 +3485,6 @@
3492
3485
  inline-size: var(--utrecht-map-marker-size);
3493
3486
  justify-content: center;
3494
3487
  }
3495
- .utrecht-mapcontrolbutton {
3496
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
3497
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
3498
- align-items: center;
3499
- background-color: var(--utrecht-mapcontrolbutton-background-color);
3500
- border-color: var(--utrecht-mapcontrolbutton-border-color);
3501
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
3502
- border-style: var(--utrecht-mapcontrolbutton-border-style);
3503
- border-width: var(--utrecht-mapcontrolbutton-border-width);
3504
- color: var(--utrecht-mapcontrolbutton-color);
3505
- display: flex;
3506
- flex-direction: row;
3507
- justify-content: center;
3508
- min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
3509
- min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
3510
- padding-block-end: 0;
3511
- padding-block-start: 0;
3512
- padding-inline-end: 0;
3513
- padding-inline-start: 0;
3514
- }
3515
-
3516
- .utrecht-mapcontrolbutton:disabled,
3517
- .utrecht-mapcontrolbutton--disabled {
3518
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
3519
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
3520
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
3521
- color: var(--utrecht-mapcontrolbutton-disabled-color);
3522
- }
3523
-
3524
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus-visible {
3525
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3526
- var(--utrecht-focus-inverse-outline-color, transparent);
3527
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3528
- outline-color: var(--utrecht-focus-outline-color, revert);
3529
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3530
- outline-style: var(--utrecht-focus-outline-style, revert);
3531
- outline-width: var(--utrecht-focus-outline-width, revert);
3532
- }
3533
-
3534
- .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3535
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3536
- }
3537
- .utrecht-mapcontrolbutton--hover:not(:disabled),
3538
- .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3539
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
3540
- color: var(--utrecht-mapcontrolbutton-color);
3541
- }
3542
-
3543
- .utrecht-mapcontrolbutton__label {
3544
- display: block;
3545
- padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
3546
- padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
3547
- }
3548
3488
  .utrecht-mark {
3549
3489
  background-color: var(--utrecht-mark-background-color, revert);
3550
3490
  color: var(--utrecht-mark-color, revert);
@@ -3571,45 +3511,6 @@
3571
3511
  background-color: Highlight;
3572
3512
  color: HighlightText;
3573
3513
  }
3574
- .utrecht-menulijst {
3575
- border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3576
- border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3577
- font-family: var(--utrecht-document-font-family);
3578
- padding-block-end: var(--utrecht-space-block-sm);
3579
- padding-block-start: var(--utrecht-space-block-sm);
3580
- padding-inline-start: 0;
3581
- }
3582
-
3583
- .utrecht-menulijst__item {
3584
- list-style: none;
3585
- margin-block-end: var(--utrecht-space-block-sm);
3586
- margin-block-start: var(--utrecht-space-block-sm);
3587
- }
3588
-
3589
- .utrecht-menulijst__item a {
3590
- background-image: var(--utrecht-menulijst-item-background-image, none);
3591
- background-position: 0 0.25em;
3592
- background-repeat: no-repeat;
3593
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
3594
- display: block;
3595
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3596
- padding-inline-start: var(--utrecht-space-block-md);
3597
- text-decoration: none;
3598
- }
3599
-
3600
- .utrecht-menulijst__item a:hover {
3601
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3602
- }
3603
-
3604
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus-visible {
3605
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3606
- var(--utrecht-focus-inverse-outline-color, transparent);
3607
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3608
- outline-color: var(--utrecht-focus-outline-color, revert);
3609
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3610
- outline-style: var(--utrecht-focus-outline-style, revert);
3611
- outline-width: var(--utrecht-focus-outline-width, revert);
3612
- }
3613
3514
  .utrecht-multiline-data {
3614
3515
  white-space: pre-line;
3615
3516
  white-space-collapse: preserve-breaks;
@@ -3680,226 +3581,6 @@
3680
3581
  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
3681
3582
  text-decoration: none;
3682
3583
  }
3683
- .utrecht-sidenav {
3684
- --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
3685
- --utrecht-sidenav-connection-inline-size: 2px;
3686
- --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
3687
- --utrecht-sidenav-marker-offset: 26px;
3688
- --utrecht-sidenav-connection-block-size: 100%;
3689
- --utrecht-sidenav-marker-height: 8px;
3690
- --utrecht-sidenav-marker-outline-width: 2px;
3691
- border-block-end: 1px solid var(--utrecht-color-grey-80);
3692
- border-block-start: 1px solid var(--utrecht-color-grey-80);
3693
- inline-size: 19rem;
3694
- margin-block-end: 0;
3695
- margin-block-start: 0;
3696
- padding-block-end: 0;
3697
- padding-block-start: 0;
3698
- }
3699
-
3700
- .utrecht-sidenav__list {
3701
- margin-block-end: 0;
3702
- margin-block-start: 0.2rem;
3703
- padding-block-end: 0;
3704
- padding-block-start: 0;
3705
- padding-inline-start: 0;
3706
- }
3707
-
3708
- .utrecht-sidenav__list--child {
3709
- margin-block-start: 0;
3710
- padding-inline-end: 0;
3711
- padding-inline-start: 1.4rem;
3712
- }
3713
-
3714
- .utrecht-sidenav__item {
3715
- list-style: none;
3716
- margin-inline-start: 0;
3717
- position: relative;
3718
- }
3719
-
3720
- .utrecht-sidenav__item--current {
3721
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
3722
- }
3723
-
3724
- .utrecht-sidenav__item--last {
3725
- border-block-end: none;
3726
- }
3727
- .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
3728
- border-block-end: 1px solid var(--utrecht-color-grey-80);
3729
- display: block;
3730
- margin-inline-start: var(--utrecht-space-inline-lg);
3731
- }
3732
-
3733
- .utrecht-sidenav__link {
3734
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3735
- display: block;
3736
- margin-inline-start: 0;
3737
- padding-block-end: var(--utrecht-space-block-xs);
3738
- padding-block-start: var(--utrecht-space-block-xs);
3739
- padding-inline-end: var(--utrecht-space-inline-3xs);
3740
- padding-inline-start: var(--utrecht-space-inline-lg);
3741
- text-decoration: none;
3742
- }
3743
-
3744
- .utrecht-sidenav__link:hover {
3745
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
3746
- text-decoration: underline;
3747
- }
3748
-
3749
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus-visible {
3750
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3751
- var(--utrecht-focus-inverse-outline-color, transparent);
3752
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3753
- outline-color: var(--utrecht-focus-outline-color, revert);
3754
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3755
- outline-style: var(--utrecht-focus-outline-style, revert);
3756
- outline-width: var(--utrecht-focus-outline-width, revert);
3757
- }
3758
- .utrecht-sidenav__link--parent {
3759
- padding-block-end: 0;
3760
- }
3761
- .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
3762
- .utrecht-sidenav__link--parent,
3763
- .utrecht-sidenav__link--child)::after {
3764
- background: var(--utrecht-sidenav-connection-color);
3765
- block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
3766
- content: "";
3767
- display: block;
3768
- inline-size: var(--utrecht-sidenav-connection-inline-size);
3769
- inset-block-end: 0;
3770
- inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
3771
- inset-inline-start: 3px;
3772
- overflow: hidden;
3773
- position: absolute;
3774
- z-index: 5;
3775
- }
3776
-
3777
- .utrecht-sidenav__connection--last,
3778
- .utrecht-sidenav__connection--parent,
3779
- .utrecht-sidenav__connection--sibling {
3780
- display: none;
3781
- }
3782
- .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
3783
- background-color: var(--utrecht-sidenav-item-marker-color);
3784
- block-size: var(--utrecht-sidenav-marker-height);
3785
- border-radius: 100%;
3786
- content: "";
3787
- inline-size: 8px;
3788
- inset-block-start: 20px;
3789
- inset-inline-start: var(--utrecht-sidenav-marker-offset);
3790
- overflow: hidden;
3791
- position: absolute;
3792
- transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
3793
- z-index: 10;
3794
- }
3795
- .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
3796
- background-color: transparent;
3797
- block-size: 4px;
3798
- border: 2px solid var(--utrecht-sidenav-link-color);
3799
- inline-size: 4px;
3800
- inset-block-start: 16px;
3801
- inset-inline-start: 1.2rem;
3802
- transform: translateY(-50%) translateX(-19.5px);
3803
- }
3804
- .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
3805
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
3806
- background-color: var(--utrecht-sidenav-marker-current-color);
3807
- }
3808
-
3809
- .utrecht-sidenav__link--child,
3810
- .utrecht-sidenav__link--current-child {
3811
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3812
- margin-block-end: 0;
3813
- margin-block-start: 0;
3814
- padding-block-end: var(--utrecht-space-block-2xs);
3815
- padding-block-start: var(--utrecht-space-block-2xs);
3816
- padding-inline-end: var(--utrecht-space-inline-3xs);
3817
- padding-inline-start: var(--utrecht-space-inline-lg);
3818
- text-decoration: none;
3819
- }
3820
-
3821
- .utrecht-sidenav__link--current,
3822
- .utrecht-sidenav__link--current-child {
3823
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3824
- }
3825
- .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 {
3826
- background-color: var(--utrecht-sidenav-link-hover-color);
3827
- }
3828
- .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 {
3829
- background-color: var(--utrecht-sidenav-link-hover-color);
3830
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
3831
- }
3832
-
3833
- .utrecht-sidenav--pseudo-elements {
3834
- }
3835
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3836
- display: none;
3837
- }
3838
- .utrecht-navhtml {
3839
- font-family: var(--utrecht-document-font-family);
3840
- }
3841
-
3842
- .utrecht-topnav__list {
3843
- background-color: var(--utrecht-topnav-list-background-color);
3844
- display: flex;
3845
- justify-content: space-between;
3846
- list-style: none;
3847
- list-style-image: none;
3848
- margin-block-end: 0;
3849
- margin-block-start: 0;
3850
- overflow: visible;
3851
- padding-block-end: 0;
3852
- padding-block-start: 0;
3853
- padding-inline-end: 0;
3854
- padding-inline-start: 0;
3855
- }
3856
-
3857
- .utrecht-topnav__item {
3858
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
3859
- flex: 1 0 auto;
3860
- margin-inline-start: 0;
3861
- text-align: center;
3862
- }
3863
-
3864
- .utrecht-topnav__item li:first-child {
3865
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
3866
- padding-inline-start: 0;
3867
- }
3868
-
3869
- .utrecht-topnav__link {
3870
- color: var(--utrecht-topnav-link-color);
3871
- display: block;
3872
- padding-block-end: 1rem;
3873
- padding-block-start: 1rem;
3874
- text-decoration: none;
3875
- }
3876
-
3877
- .utrecht-topnav__link--hover,
3878
- .utrecht-topnav__link:hover {
3879
- background-color: var(--utrecht-topnav-link-hover-background-color);
3880
- color: var(--utrecht-topnav-link-color);
3881
- text-decoration: underline;
3882
- }
3883
-
3884
- .utrecht-topnav__link--current {
3885
- background-color: var(--utrecht-topnav-list-background-active);
3886
- text-decoration: underline;
3887
- }
3888
-
3889
- .utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
3890
- background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
3891
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3892
- }
3893
-
3894
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus-visible {
3895
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3896
- var(--utrecht-focus-inverse-outline-color, transparent);
3897
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3898
- outline-color: var(--utrecht-focus-outline-color, revert);
3899
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3900
- outline-style: var(--utrecht-focus-outline-style, revert);
3901
- outline-width: var(--utrecht-focus-outline-width, revert);
3902
- }
3903
3584
  .utrecht-number-badge {
3904
3585
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3905
3586
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -6323,6 +6004,12 @@
6323
6004
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6324
6005
  }
6325
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
+
6326
6013
  .utrecht-select--focus {
6327
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))));
6328
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))));
@@ -6358,6 +6045,11 @@
6358
6045
  }
6359
6046
  .utrecht-select--html-select {
6360
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
+ }
6361
6053
  .utrecht-select--html-select:focus {
6362
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))));
6363
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))));