@utrecht/component-library-css 7.5.1 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html.css +2 -0
  2. package/dist/index.css +262 -7
  3. package/dist/prince-xml.css +264 -7
  4. package/package.json +8 -7
package/dist/html.css CHANGED
@@ -392,6 +392,8 @@
392
392
  .utrecht-html figure {
393
393
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
394
394
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
395
+ margin-inline-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
396
+ margin-inline-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
395
397
  }
396
398
  .utrecht-html figcaption {
397
399
  color: var(--utrecht-figure-caption-color);
package/dist/index.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2020-2025 Frameless B.V.
4
- * Copyright (c) 2021-2025 Gemeente Utrecht
3
+ * Copyright (c) 2024-2025 Gemeente Utrecht
4
+ * Copyright (c) 2024-2025 Frameless B.V.
5
5
  */
6
6
  /**
7
7
  * @license EUPL-1.2
8
- * Copyright (c) 2024-2025 Gemeente Utrecht
9
- * Copyright (c) 2024-2025 Frameless B.V.
8
+ * Copyright (c) 2020-2025 Frameless B.V.
9
+ * Copyright (c) 2021-2025 Gemeente Utrecht
10
10
  */
11
11
  /**
12
12
  * @license EUPL-1.2
@@ -117,14 +117,15 @@
117
117
  align-items: baseline;
118
118
  background-color: var(--utrecht-action-group-background-color);
119
119
  break-inside: avoid;
120
+ column-gap: var(--utrecht-action-group-column-gap, 1em);
120
121
  display: flex;
121
122
  flex-wrap: wrap;
122
- gap: var(--utrecht-action-group-inline-gap, 1em);
123
123
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-end, 0));
124
124
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-start, 0));
125
125
  min-block-size: var(--utrecht-button-block-size);
126
126
  padding-block-end: var(--utrecht-action-group-padding-block-end);
127
127
  padding-block-start: var(--utrecht-action-group-padding-block-start);
128
+ row-gap: var(--utrecht-action-group-row-gap, 1em);
128
129
  }
129
130
 
130
131
  .utrecht-action-group--distanced {
@@ -140,12 +141,10 @@
140
141
 
141
142
  .utrecht-action-group--column {
142
143
  flex-direction: column;
143
- gap: var(--utrecht-button-group-block-gap, 1em);
144
144
  }
145
145
 
146
146
  .utrecht-action-group--column-stretch {
147
147
  flex-direction: column;
148
- gap: var(--utrecht-button-group-block-gap, 1em);
149
148
  --utrecht-button-max-inline-size: none;
150
149
  align-items: stretch;
151
150
  inline-size: fit-content;
@@ -2452,6 +2451,8 @@
2452
2451
  .utrecht-figure {
2453
2452
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
2454
2453
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
2454
+ margin-inline-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
2455
+ margin-inline-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
2455
2456
  }
2456
2457
 
2457
2458
  .utrecht-figure__caption {
@@ -3676,6 +3677,260 @@
3676
3677
  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
3677
3678
  text-decoration: none;
3678
3679
  }
3680
+ .utrecht-navigation {
3681
+ border-block-end-color: var(--utrecht-navigation-border-block-end-color);
3682
+ border-block-end-style: solid;
3683
+ border-block-end-width: var(--utrecht-navigation-border-block-end-width);
3684
+ border-block-start-color: var(--utrecht-navigation-border-block-start-color);
3685
+ border-block-start-style: solid;
3686
+ border-block-start-width: var(--utrecht-navigation-border-block-start-width);
3687
+ margin-block-end: var(--utrecht-nav-margin-back-end);
3688
+ margin-block-start: var(--utrecht-nav-margin-back-start);
3689
+ }
3690
+
3691
+ .utrecht-navigation--mobile {
3692
+ align-items: flex-end;
3693
+ block-size: 100%;
3694
+ display: flex;
3695
+ flex: 1;
3696
+ flex-direction: column;
3697
+ inline-size: 100%;
3698
+ justify-content: var(--utrecht-navigation-mobile-justify-content, flex-start);
3699
+ }
3700
+
3701
+ .utrecht-navigation-drawer {
3702
+ --utrecht-drawer-padding-block-start: 0;
3703
+ --utrecht-drawer-padding-inline-start: 0;
3704
+ --utrecht-drawer-padding-inline-end: 0;
3705
+ --utrecht-drawer-min-inline-size: var(--utrecht-navigation-drawer-min-inline-size);
3706
+ }
3707
+
3708
+ .utrecht-navigation-drawer::backdrop {
3709
+ --utrecht-backdrop-background-color: var(--utrecht-navigation-drawer-backdrop-background-color);
3710
+ }
3711
+
3712
+ .utrecht-navigation__item {
3713
+ border-block-end-color: var(--utrecht-navigation-item-border-block-end-color);
3714
+ border-block-end-style: solid;
3715
+ border-block-end-width: var(--utrecht-navigation-item-border-block-end-width);
3716
+ border-block-start-color: var(--utrecht-navigation-item-border-block-start-color);
3717
+ border-block-start-style: solid;
3718
+ border-block-start-width: var(--utrecht-navigation-item-border-block-start-width);
3719
+ flex: 1 1 auto;
3720
+ padding-block-end: var(--utrecht-navigation-item-padding-block-end);
3721
+ padding-block-start: var(--utrecht-navigation-item-padding-block-start);
3722
+ padding-inline-end: var(--utrecht-navigation-item-padding-inline-end);
3723
+ padding-inline-start: var(--utrecht-navigation-item-padding-inline-start);
3724
+ }
3725
+ .utrecht-navigation__item:last-child .utrecht-navigation__link {
3726
+ border-inline-end: none;
3727
+ }
3728
+
3729
+ .utrecht-navigation__item--mobile {
3730
+ --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
3731
+ --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
3732
+ --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
3733
+ --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
3734
+ --utrecht-navigation-item-border-block-end-color: var(--utrecht-navigation-item-mobile-border-block-end-color);
3735
+ --utrecht-navigation-item-border-block-end-width: var(--utrecht-navigation-item-mobile-border-block-end-width);
3736
+ }
3737
+ .utrecht-navigation__item--mobile:first-of-type {
3738
+ --utrecht-navigation-item-border-block-start-color: var(--utrecht-navigation-item-mobile-border-block-start-color);
3739
+ --utrecht-navigation-item-border-block-start-width: var(--utrecht-navigation-item-mobile-border-block-start-width);
3740
+ }
3741
+
3742
+ .utrecht-navigation__link {
3743
+ --utrecht-link-focus-text-decoration: underline;
3744
+ --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
3745
+ --utrecht-link-text-decoration: none;
3746
+ --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
3747
+ --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
3748
+ --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
3749
+ --utrecht-link-color: var(--utrecht-navigation-link-color);
3750
+ --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
3751
+ align-items: var(--_utrecht-navigation-link-align-items, center);
3752
+ background-color: var(--utrecht-navigation-link-background-color);
3753
+ border-inline-end-color: var(--utrecht-navigation-link-border-color);
3754
+ border-inline-end-style: solid;
3755
+ border-inline-end-width: var(--utrecht-navigation-link-border-inline-end-width);
3756
+ display: flex;
3757
+ font-weight: var(--utrecht-navigation-link-font-weight);
3758
+ gap: var(--utrecht-navigation-link-gap, 8px);
3759
+ justify-content: var(--_utrecht-navigation-link-justify-content, center);
3760
+ padding-block-end: var(--utrecht-navigation-link-padding-block-end);
3761
+ padding-block-start: var(--utrecht-navigation-link-padding-block-start);
3762
+ padding-inline-end: var(--utrecht-navigation-link-padding-inline-end);
3763
+ padding-inline-start: var(--utrecht-navigation-link-padding-inline-start);
3764
+ text-align: var(--utrecht-navigation-link-text-align);
3765
+ }
3766
+
3767
+ .utrecht-navigation__link:hover {
3768
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
3769
+ --utrecht-navigation-marker-color: currentColor;
3770
+ --utrecht-navigation-marker-outline-hover-fill: currentColor;
3771
+ }
3772
+
3773
+ .utrecht-navigation__link:focus {
3774
+ --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
3775
+ --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
3776
+ --utrecht-navigation-marker-color: currentColor;
3777
+ --utrecht-navigation-marker-outline-hover-fill: currentColor;
3778
+ }
3779
+
3780
+ .utrecht-navigation__link:active:focus {
3781
+ --utrecht-link-focus-color: var(--utrecht-navigation-link-active-focus-color);
3782
+ }
3783
+
3784
+ .utrecht-navigation__link--mobile {
3785
+ --_utrecht-navigation-link-align-items: center;
3786
+ --_utrecht-navigation-link-justify-content: normal;
3787
+ --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
3788
+ --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
3789
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
3790
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
3791
+ --utrecht-navigation-link-border-inline-end-width: 0;
3792
+ --utrecht-navigation-link-border-color: transparent;
3793
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
3794
+ --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
3795
+ --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content, flex-start);
3796
+ flex: 1 1 auto;
3797
+ min-block-size: var(--utrecht-navigation-link-mobile-min-block-size);
3798
+ transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
3799
+ transition-property: font-weight;
3800
+ transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
3801
+ }
3802
+
3803
+ .utrecht-navigation__link--mobile:hover {
3804
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
3805
+ --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
3806
+ --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-mobile-hover-font-weight);
3807
+ }
3808
+
3809
+ .utrecht-navigation__link--is-current {
3810
+ --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
3811
+ }
3812
+
3813
+ .utrecht-navigation__list {
3814
+ display: var(--utrecht-navigation-list-display, flex);
3815
+ inline-size: var(--utrecht-navigation-list-inline-size);
3816
+ list-style: none;
3817
+ margin-block-end: 0;
3818
+ margin-block-start: 0;
3819
+ padding-block-end: var(--utrecht-navigation-list-padding-block-end);
3820
+ padding-block-start: var(--utrecht-navigation-list-padding-block-start);
3821
+ padding-inline-end: var(--utrecht-navigation-list-padding-inline-end);
3822
+ padding-inline-start: var(--utrecht-navigation-list-padding-inline-start);
3823
+ }
3824
+
3825
+ .utrecht-navigation__list:focus {
3826
+ outline: none;
3827
+ }
3828
+
3829
+ .utrecht-navigation__list--mobile {
3830
+ --utrecht-navigation-list-display: block;
3831
+ --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
3832
+ --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
3833
+ --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
3834
+ --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
3835
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
3836
+ background-color: var(--utrecht-navigation-list-mobile-background-color);
3837
+ block-size: 100%;
3838
+ box-sizing: border-box;
3839
+ flex: 1;
3840
+ overflow-y: auto;
3841
+ }
3842
+
3843
+ .utrecht-navigation__list--side-nav {
3844
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-side-nav-inline-size);
3845
+ }
3846
+
3847
+ .utrecht-navigation__list--sub-list {
3848
+ display: var(--utrecht-navigation-list-display, flex);
3849
+ inline-size: var(--utrecht-navigation-list-inline-size);
3850
+ list-style: none;
3851
+ margin-block-end: 0;
3852
+ margin-block-start: 0;
3853
+ padding-block-end: var(--utrecht-navigation-list-padding-block-end);
3854
+ padding-block-start: var(--utrecht-navigation-list-padding-block-start);
3855
+ padding-inline-end: var(--utrecht-navigation-list-padding-inline-end);
3856
+ padding-inline-start: var(--utrecht-navigation-list-padding-inline-start);
3857
+ --utrecht-navigation-list-display: block;
3858
+ --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
3859
+ --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
3860
+ --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
3861
+ --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
3862
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
3863
+ background-color: var(--utrecht-navigation-list-mobile-background-color);
3864
+ block-size: 100%;
3865
+ box-sizing: border-box;
3866
+ flex: 1;
3867
+ overflow-y: auto;
3868
+ inline-size: 100%;
3869
+ padding-block-end: 0;
3870
+ padding-block-start: 0;
3871
+ padding-inline-end: 0;
3872
+ }
3873
+
3874
+ .utrecht-navigation__list--sub-list-item {
3875
+ --utrecht-navigation-item-border-block-start-width: 0;
3876
+ --utrecht-navigation-item-border-block-end-width: 0;
3877
+ --utrecht-navigation-item-mobile-border-block-start-width: 0;
3878
+ --utrecht-navigation-item-mobile-border-block-end-width: 0;
3879
+ --utrecht-navigation-list-mobile-padding-inline-end: 0;
3880
+ }
3881
+
3882
+ .utrecht-navigation__marker {
3883
+ color: var(--utrecht-navigation-marker-color);
3884
+ flex-shrink: 0;
3885
+ }
3886
+
3887
+ .utrecht-navigation__marker--current {
3888
+ --utrecht-navigation-marker-color: currentColor;
3889
+ }
3890
+
3891
+ .utrecht-navigation__marker--outline {
3892
+ fill: var(--utrecht-navigation-marker-outline-hover-fill, none);
3893
+ }
3894
+
3895
+ .utrecht-navigation__toggle-button {
3896
+ --utrecht-button-subtle-color: currentColor;
3897
+ --utrecht-button-subtle-hover-color: currentColor;
3898
+ --utrecht-button-subtle-hover-border-color: transparent;
3899
+ --utrecht-button-subtle-active-background-color: transparent;
3900
+ --utrecht-button-subtle-active-border-color: transparent;
3901
+ --utrecht-button-subtle-active-color: currentColor;
3902
+ --utrecht-button-subtle-focus-background-color: transparent;
3903
+ --utrecht-button-subtle-focus-border-color: transparent;
3904
+ --utrecht-button-subtle-focus-color: currentColor;
3905
+ --utrecht-button-subtle-hover-border-width: 0;
3906
+ --utrecht-button-hover-scale: 1;
3907
+ --utrecht-button-focus-scale: 1;
3908
+ --utrecht-button-group-margin-block-start: var(--utrecht-navigation-toggle-button-margin-block-start);
3909
+ --utrecht-button-group-margin-block-end: var(--utrecht-navigation-toggle-button-margin-block-end);
3910
+ justify-content: flex-end;
3911
+ padding-inline-end: var(--utrecht-navigation-toggle-button-padding-inline-end);
3912
+ }
3913
+
3914
+ .utrecht-icon-custom {
3915
+ margin-inline-end: var(--utrecht-icon-custom-margin-inline-end);
3916
+ }
3917
+
3918
+ .utrecht-navigation__toggle-button--start-end {
3919
+ --utrecht-button-group-margin-block-start: calc(-1 * var(--utrecht-navigation-toggle-button-offset-start));
3920
+ margin-inline-end: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end));
3921
+ }
3922
+
3923
+ .utrecht-navigation__toggle-button-close {
3924
+ margin-block-end: var(--utrecht-navigation-toggle-button-close, 32px);
3925
+ margin-inline-end: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end, 16px));
3926
+ margin-inline-start: auto;
3927
+ }
3928
+
3929
+ @media (width >= 600px) {
3930
+ .utrecht-navigation-drawer {
3931
+ --utrecht-navigation-drawer-min-inline-size: var(--utrecht-navigation-drawer-mobile-min-inline-size);
3932
+ }
3933
+ }
3679
3934
  .utrecht-number-badge {
3680
3935
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3681
3936
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
package/dist/prince-xml.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2020-2025 Frameless B.V.
4
- * Copyright (c) 2021-2025 Gemeente Utrecht
3
+ * Copyright (c) 2024-2025 Gemeente Utrecht
4
+ * Copyright (c) 2024-2025 Frameless B.V.
5
5
  */
6
6
  /**
7
7
  * @license EUPL-1.2
8
- * Copyright (c) 2024-2025 Gemeente Utrecht
9
- * Copyright (c) 2024-2025 Frameless B.V.
8
+ * Copyright (c) 2020-2025 Frameless B.V.
9
+ * Copyright (c) 2021-2025 Gemeente Utrecht
10
10
  */
11
11
  /**
12
12
  * @license EUPL-1.2
@@ -116,14 +116,15 @@
116
116
  align-items: baseline;
117
117
  background-color: var(--utrecht-action-group-background-color);
118
118
  break-inside: avoid;
119
+ column-gap: var(--utrecht-action-group-column-gap, 1em);
119
120
  display: flex;
120
121
  flex-wrap: wrap;
121
- gap: var(--utrecht-action-group-inline-gap, 1em);
122
122
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-end, 0));
123
123
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-start, 0));
124
124
  min-height: var(--utrecht-button-block-size);
125
125
  padding-bottom: var(--utrecht-action-group-padding-block-end);
126
126
  padding-top: var(--utrecht-action-group-padding-block-start);
127
+ row-gap: var(--utrecht-action-group-row-gap, 1em);
127
128
  }
128
129
 
129
130
  .utrecht-action-group--distanced {
@@ -139,12 +140,10 @@
139
140
 
140
141
  .utrecht-action-group--column {
141
142
  flex-direction: column;
142
- gap: var(--utrecht-button-group-block-gap, 1em);
143
143
  }
144
144
 
145
145
  .utrecht-action-group--column-stretch {
146
146
  flex-direction: column;
147
- gap: var(--utrecht-button-group-block-gap, 1em);
148
147
  --utrecht-button-max-inline-size: none;
149
148
  align-items: stretch;
150
149
  width: fit-content;
@@ -2374,6 +2373,8 @@
2374
2373
  .utrecht-figure {
2375
2374
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
2376
2375
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
2376
+ margin-right: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
2377
+ margin-left: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
2377
2378
  }
2378
2379
 
2379
2380
  .utrecht-figure__caption {
@@ -3538,6 +3539,260 @@
3538
3539
  padding-left: var(--utrecht-nav-bar-link-padding-inline-start);
3539
3540
  text-decoration: none;
3540
3541
  }
3542
+ .utrecht-navigation {
3543
+ border-bottom-color: var(--utrecht-navigation-border-block-end-color);
3544
+ border-bottom-style: solid;
3545
+ border-bottom-width: var(--utrecht-navigation-border-block-end-width);
3546
+ border-top-color: var(--utrecht-navigation-border-block-start-color);
3547
+ border-top-style: solid;
3548
+ border-top-width: var(--utrecht-navigation-border-block-start-width);
3549
+ margin-bottom: var(--utrecht-nav-margin-back-end);
3550
+ margin-top: var(--utrecht-nav-margin-back-start);
3551
+ }
3552
+
3553
+ .utrecht-navigation--mobile {
3554
+ align-items: flex-end;
3555
+ height: 100%;
3556
+ display: flex;
3557
+ flex: 1;
3558
+ flex-direction: column;
3559
+ width: 100%;
3560
+ justify-content: var(--utrecht-navigation-mobile-justify-content, flex-start);
3561
+ }
3562
+
3563
+ .utrecht-navigation-drawer {
3564
+ --utrecht-drawer-padding-block-start: 0;
3565
+ --utrecht-drawer-padding-inline-start: 0;
3566
+ --utrecht-drawer-padding-inline-end: 0;
3567
+ --utrecht-drawer-min-inline-size: var(--utrecht-navigation-drawer-min-inline-size);
3568
+ }
3569
+
3570
+ .utrecht-navigation-drawer[prince-xml-ignore-pseudo-element-backdrop] {
3571
+ --utrecht-backdrop-background-color: var(--utrecht-navigation-drawer-backdrop-background-color);
3572
+ }
3573
+
3574
+ .utrecht-navigation__item {
3575
+ border-bottom-color: var(--utrecht-navigation-item-border-block-end-color);
3576
+ border-bottom-style: solid;
3577
+ border-bottom-width: var(--utrecht-navigation-item-border-block-end-width);
3578
+ border-top-color: var(--utrecht-navigation-item-border-block-start-color);
3579
+ border-top-style: solid;
3580
+ border-top-width: var(--utrecht-navigation-item-border-block-start-width);
3581
+ flex: 1 1 auto;
3582
+ padding-bottom: var(--utrecht-navigation-item-padding-block-end);
3583
+ padding-top: var(--utrecht-navigation-item-padding-block-start);
3584
+ padding-right: var(--utrecht-navigation-item-padding-inline-end);
3585
+ padding-left: var(--utrecht-navigation-item-padding-inline-start);
3586
+ }
3587
+ .utrecht-navigation__item:last-child .utrecht-navigation__link {
3588
+ border-right: none;
3589
+ }
3590
+
3591
+ .utrecht-navigation__item--mobile {
3592
+ --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
3593
+ --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
3594
+ --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
3595
+ --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
3596
+ --utrecht-navigation-item-border-block-end-color: var(--utrecht-navigation-item-mobile-border-block-end-color);
3597
+ --utrecht-navigation-item-border-block-end-width: var(--utrecht-navigation-item-mobile-border-block-end-width);
3598
+ }
3599
+ .utrecht-navigation__item--mobile:first-of-type {
3600
+ --utrecht-navigation-item-border-block-start-color: var(--utrecht-navigation-item-mobile-border-block-start-color);
3601
+ --utrecht-navigation-item-border-block-start-width: var(--utrecht-navigation-item-mobile-border-block-start-width);
3602
+ }
3603
+
3604
+ .utrecht-navigation__link {
3605
+ --utrecht-link-focus-text-decoration: underline;
3606
+ --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
3607
+ --utrecht-link-text-decoration: none;
3608
+ --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
3609
+ --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
3610
+ --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
3611
+ --utrecht-link-color: var(--utrecht-navigation-link-color);
3612
+ --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
3613
+ align-items: var(--_utrecht-navigation-link-align-items, center);
3614
+ background-color: var(--utrecht-navigation-link-background-color);
3615
+ border-right-color: var(--utrecht-navigation-link-border-color);
3616
+ border-right-style: solid;
3617
+ border-right-width: var(--utrecht-navigation-link-border-inline-end-width);
3618
+ display: flex;
3619
+ font-weight: var(--utrecht-navigation-link-font-weight);
3620
+ gap: var(--utrecht-navigation-link-gap, 8px);
3621
+ justify-content: var(--_utrecht-navigation-link-justify-content, center);
3622
+ padding-bottom: var(--utrecht-navigation-link-padding-block-end);
3623
+ padding-top: var(--utrecht-navigation-link-padding-block-start);
3624
+ padding-right: var(--utrecht-navigation-link-padding-inline-end);
3625
+ padding-left: var(--utrecht-navigation-link-padding-inline-start);
3626
+ text-align: var(--utrecht-navigation-link-text-align);
3627
+ }
3628
+
3629
+ .utrecht-navigation__link:hover {
3630
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
3631
+ --utrecht-navigation-marker-color: currentColor;
3632
+ --utrecht-navigation-marker-outline-hover-fill: currentColor;
3633
+ }
3634
+
3635
+ .utrecht-navigation__link:focus {
3636
+ --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
3637
+ --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
3638
+ --utrecht-navigation-marker-color: currentColor;
3639
+ --utrecht-navigation-marker-outline-hover-fill: currentColor;
3640
+ }
3641
+
3642
+ .utrecht-navigation__link:active:focus {
3643
+ --utrecht-link-focus-color: var(--utrecht-navigation-link-active-focus-color);
3644
+ }
3645
+
3646
+ .utrecht-navigation__link--mobile {
3647
+ --_utrecht-navigation-link-align-items: center;
3648
+ --_utrecht-navigation-link-justify-content: normal;
3649
+ --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
3650
+ --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
3651
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
3652
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
3653
+ --utrecht-navigation-link-border-inline-end-width: 0;
3654
+ --utrecht-navigation-link-border-color: transparent;
3655
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
3656
+ --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
3657
+ --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content, flex-start);
3658
+ flex: 1 1 auto;
3659
+ min-height: var(--utrecht-navigation-link-mobile-min-block-size);
3660
+ transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
3661
+ transition-property: font-weight;
3662
+ transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
3663
+ }
3664
+
3665
+ .utrecht-navigation__link--mobile:hover {
3666
+ --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
3667
+ --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
3668
+ --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-mobile-hover-font-weight);
3669
+ }
3670
+
3671
+ .utrecht-navigation__link--is-current {
3672
+ --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
3673
+ }
3674
+
3675
+ .utrecht-navigation__list {
3676
+ display: var(--utrecht-navigation-list-display, flex);
3677
+ width: var(--utrecht-navigation-list-inline-size);
3678
+ list-style: none;
3679
+ margin-bottom: 0;
3680
+ margin-top: 0;
3681
+ padding-bottom: var(--utrecht-navigation-list-padding-block-end);
3682
+ padding-top: var(--utrecht-navigation-list-padding-block-start);
3683
+ padding-right: var(--utrecht-navigation-list-padding-inline-end);
3684
+ padding-left: var(--utrecht-navigation-list-padding-inline-start);
3685
+ }
3686
+
3687
+ .utrecht-navigation__list:focus {
3688
+ outline: none;
3689
+ }
3690
+
3691
+ .utrecht-navigation__list--mobile {
3692
+ --utrecht-navigation-list-display: block;
3693
+ --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
3694
+ --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
3695
+ --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
3696
+ --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
3697
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
3698
+ background-color: var(--utrecht-navigation-list-mobile-background-color);
3699
+ height: 100%;
3700
+ box-sizing: border-box;
3701
+ flex: 1;
3702
+ overflow-y: auto;
3703
+ }
3704
+
3705
+ .utrecht-navigation__list--side-nav {
3706
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-side-nav-inline-size);
3707
+ }
3708
+
3709
+ .utrecht-navigation__list--sub-list {
3710
+ display: var(--utrecht-navigation-list-display, flex);
3711
+ width: var(--utrecht-navigation-list-inline-size);
3712
+ list-style: none;
3713
+ margin-bottom: 0;
3714
+ margin-top: 0;
3715
+ padding-bottom: var(--utrecht-navigation-list-padding-block-end);
3716
+ padding-top: var(--utrecht-navigation-list-padding-block-start);
3717
+ padding-right: var(--utrecht-navigation-list-padding-inline-end);
3718
+ padding-left: var(--utrecht-navigation-list-padding-inline-start);
3719
+ --utrecht-navigation-list-display: block;
3720
+ --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
3721
+ --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
3722
+ --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
3723
+ --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
3724
+ --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
3725
+ background-color: var(--utrecht-navigation-list-mobile-background-color);
3726
+ height: 100%;
3727
+ box-sizing: border-box;
3728
+ flex: 1;
3729
+ overflow-y: auto;
3730
+ width: 100%;
3731
+ padding-bottom: 0;
3732
+ padding-top: 0;
3733
+ padding-right: 0;
3734
+ }
3735
+
3736
+ .utrecht-navigation__list--sub-list-item {
3737
+ --utrecht-navigation-item-border-block-start-width: 0;
3738
+ --utrecht-navigation-item-border-block-end-width: 0;
3739
+ --utrecht-navigation-item-mobile-border-block-start-width: 0;
3740
+ --utrecht-navigation-item-mobile-border-block-end-width: 0;
3741
+ --utrecht-navigation-list-mobile-padding-inline-end: 0;
3742
+ }
3743
+
3744
+ .utrecht-navigation__marker {
3745
+ color: var(--utrecht-navigation-marker-color);
3746
+ flex-shrink: 0;
3747
+ }
3748
+
3749
+ .utrecht-navigation__marker--current {
3750
+ --utrecht-navigation-marker-color: currentColor;
3751
+ }
3752
+
3753
+ .utrecht-navigation__marker--outline {
3754
+ fill: var(--utrecht-navigation-marker-outline-hover-fill, none);
3755
+ }
3756
+
3757
+ .utrecht-navigation__toggle-button {
3758
+ --utrecht-button-subtle-color: currentColor;
3759
+ --utrecht-button-subtle-hover-color: currentColor;
3760
+ --utrecht-button-subtle-hover-border-color: transparent;
3761
+ --utrecht-button-subtle-active-background-color: transparent;
3762
+ --utrecht-button-subtle-active-border-color: transparent;
3763
+ --utrecht-button-subtle-active-color: currentColor;
3764
+ --utrecht-button-subtle-focus-background-color: transparent;
3765
+ --utrecht-button-subtle-focus-border-color: transparent;
3766
+ --utrecht-button-subtle-focus-color: currentColor;
3767
+ --utrecht-button-subtle-hover-border-width: 0;
3768
+ --utrecht-button-hover-scale: 1;
3769
+ --utrecht-button-focus-scale: 1;
3770
+ --utrecht-button-group-margin-block-start: var(--utrecht-navigation-toggle-button-margin-block-start);
3771
+ --utrecht-button-group-margin-block-end: var(--utrecht-navigation-toggle-button-margin-block-end);
3772
+ justify-content: flex-end;
3773
+ padding-right: var(--utrecht-navigation-toggle-button-padding-inline-end);
3774
+ }
3775
+
3776
+ .utrecht-icon-custom {
3777
+ margin-right: var(--utrecht-icon-custom-margin-inline-end);
3778
+ }
3779
+
3780
+ .utrecht-navigation__toggle-button--start-end {
3781
+ --utrecht-button-group-margin-block-start: calc(-1 * var(--utrecht-navigation-toggle-button-offset-start));
3782
+ margin-right: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end));
3783
+ }
3784
+
3785
+ .utrecht-navigation__toggle-button-close {
3786
+ margin-bottom: var(--utrecht-navigation-toggle-button-close, 32px);
3787
+ margin-right: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end, 16px));
3788
+ margin-left: auto;
3789
+ }
3790
+
3791
+ @media (width >= 600px) {
3792
+ .utrecht-navigation-drawer {
3793
+ --utrecht-navigation-drawer-min-inline-size: var(--utrecht-navigation-drawer-mobile-min-inline-size);
3794
+ }
3795
+ }
3541
3796
  .utrecht-number-badge {
3542
3797
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3543
3798
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -7783,6 +8038,8 @@
7783
8038
  .utrecht-html figure {
7784
8039
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
7785
8040
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
8041
+ margin-right: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
8042
+ margin-left: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
7786
8043
  }
7787
8044
  .utrecht-html figcaption {
7788
8045
  color: var(--utrecht-figure-caption-color);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "7.5.1",
2
+ "version": "8.1.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@utrecht/accordion-css": "2.0.0",
24
- "@utrecht/action-group-css": "1.1.0",
24
+ "@utrecht/action-group-css": "2.0.0",
25
25
  "@utrecht/alert-css": "2.4.0",
26
26
  "@utrecht/alert-dialog-css": "1.4.2",
27
27
  "@utrecht/alternate-lang-nav-css": "1.3.1",
@@ -42,8 +42,8 @@
42
42
  "@utrecht/code-css": "1.5.1",
43
43
  "@utrecht/color-sample-css": "1.4.1",
44
44
  "@utrecht/column-layout-css": "1.5.1",
45
- "@utrecht/currency-data-css": "1.3.1",
46
45
  "@utrecht/combobox-css": "1.4.1",
46
+ "@utrecht/currency-data-css": "1.3.1",
47
47
  "@utrecht/custom-checkbox-css": "1.3.2",
48
48
  "@utrecht/data-badge-css": "1.0.1",
49
49
  "@utrecht/data-list-css": "1.4.1",
@@ -52,7 +52,7 @@
52
52
  "@utrecht/document-css": "1.5.1",
53
53
  "@utrecht/drawer-css": "1.4.1",
54
54
  "@utrecht/emphasis-css": "1.5.1",
55
- "@utrecht/figure-css": "1.5.1",
55
+ "@utrecht/figure-css": "1.6.0",
56
56
  "@utrecht/form-css": "1.5.1",
57
57
  "@utrecht/form-field-css": "1.5.1",
58
58
  "@utrecht/form-field-description-css": "1.5.1",
@@ -72,13 +72,13 @@
72
72
  "@utrecht/icon-css": "2.0.1",
73
73
  "@utrecht/img-css": "1.3.1",
74
74
  "@utrecht/index-char-nav-css": "1.4.1",
75
- "@utrecht/link-css": "1.6.1",
76
75
  "@utrecht/link-button-css": "1.4.1",
76
+ "@utrecht/link-css": "1.6.1",
77
77
  "@utrecht/link-list-css": "2.3.1",
78
78
  "@utrecht/link-social-css": "1.4.1",
79
- "@utrecht/logo-button-css": "1.4.1",
80
- "@utrecht/listbox-css": "1.5.2",
81
79
  "@utrecht/list-social-css": "1.4.1",
80
+ "@utrecht/listbox-css": "1.5.2",
81
+ "@utrecht/logo-button-css": "1.4.1",
82
82
  "@utrecht/logo-css": "1.4.1",
83
83
  "@utrecht/logo-image-css": "1.4.1",
84
84
  "@utrecht/map-marker-css": "1.4.1",
@@ -86,6 +86,7 @@
86
86
  "@utrecht/multiline-data-css": "1.3.1",
87
87
  "@utrecht/nav-bar-css": "1.4.1",
88
88
  "@utrecht/nav-list-css": "1.3.1",
89
+ "@utrecht/navigation-css": "1.0.0",
89
90
  "@utrecht/number-badge-css": "2.3.1",
90
91
  "@utrecht/number-data-css": "1.4.1",
91
92
  "@utrecht/ordered-list-css": "2.0.0",