@utrecht/component-library-css 5.2.0 → 6.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/html.css CHANGED
@@ -283,12 +283,12 @@
283
283
  border-width: var(--_utrecht-button-border-width);
284
284
  box-sizing: border-box;
285
285
  color: var(--_utrecht-button-color);
286
+ column-gap: var(--utrecht-button-column-gap);
286
287
  cursor: var(--utrecht-action-activate-cursor, revert);
287
288
  display: inline-flex;
288
289
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
289
290
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
290
291
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
291
- gap: var(--utrecht-button-icon-gap);
292
292
  inline-size: var(--utrecht-button-inline-size, auto);
293
293
  justify-content: center;
294
294
  line-height: var(--_utrecht-button-line-height);
@@ -365,7 +365,7 @@
365
365
  .utrecht-html input[type=checkbox i]:disabled {
366
366
  cursor: var(--utrecht-action-disabled-cursor, revert);
367
367
  }
368
- .utrecht-html input[type=checkbox i]:focus {
368
+ .utrecht-html input[type=checkbox i] :focus-visible {
369
369
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
370
370
  var(--utrecht-focus-inverse-outline-color, transparent);
371
371
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -374,10 +374,6 @@
374
374
  outline-style: var(--utrecht-focus-outline-style, revert);
375
375
  outline-width: var(--utrecht-focus-outline-width, revert);
376
376
  }
377
- .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
378
- box-shadow: none;
379
- outline-style: revert;
380
- }
381
377
  .utrecht-html body {
382
378
  -webkit-font-smoothing: auto !important;
383
379
  -moz-osx-font-smoothing: auto !important;
@@ -606,11 +602,11 @@
606
602
  }
607
603
  .utrecht-html a:focus {
608
604
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
609
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
610
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
611
605
  background-color: var(--utrecht-link-focus-background-color, transparent);
612
606
  text-decoration-skip: none;
613
607
  text-decoration-skip-ink: none;
608
+ }
609
+ .utrecht-html a:focus-visible {
614
610
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
615
611
  var(--utrecht-focus-inverse-outline-color, transparent);
616
612
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -618,12 +614,16 @@
618
614
  outline-offset: var(--utrecht-focus-outline-offset, revert);
619
615
  outline-style: var(--utrecht-focus-outline-style, revert);
620
616
  outline-width: var(--utrecht-focus-outline-width, revert);
617
+ --_utrecht-link-state-text-decoration: var(
618
+ --utrecht-link-focus-visible-text-decoration,
619
+ var(--utrecht-link-focus-text-decoration)
620
+ );
621
+ --_utrecht-link-state-text-decoration-thickness: var(
622
+ --utrecht-link-focus-visible-text-decoration-thickness,
623
+ var(--utrecht-link-focus-text-decoration-thickness)
624
+ );
621
625
  z-index: var(--utrecht-stack-focus-z-index, 1);
622
626
  }
623
- .utrecht-html a:focus:not(:focus-visible) {
624
- box-shadow: none;
625
- outline-style: revert;
626
- }
627
627
  .utrecht-html a[href^="tel:" i] {
628
628
  white-space: nowrap;
629
629
  }
@@ -655,24 +655,9 @@
655
655
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
656
656
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
657
657
  }
658
- .utrecht-html p.lead {
659
- color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
660
- font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
661
- font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
662
- line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
663
- }
664
658
  .utrecht-html * ~ p {
665
659
  --utrecht-space-around: 1;
666
660
  }
667
- .utrecht-html p:has(> small:only-child) {
668
- color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
669
- font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
670
- font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
671
- line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
672
- }
673
- .utrecht-html p > small:only-child {
674
- font-size: inherit;
675
- }
676
661
  .utrecht-html pre:has(> code:only-child) {
677
662
  background-color: var(--utrecht-code-background-color);
678
663
  color: var(--utrecht-code-color);
@@ -771,10 +756,19 @@
771
756
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
772
757
  }
773
758
  .utrecht-html input[type=radio i]:disabled {
774
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
775
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
776
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
777
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
759
+ --_utrecht-radio-button-background-color: var(
760
+ --utrecht-radio-button-disabled-background-color,
761
+ var(--utrecht-radio-button-background-color)
762
+ );
763
+ --_utrecht-radio-button-border-color: var(
764
+ --utrecht-radio-button-disabled-border-color,
765
+ var(--utrecht-radio-button-border-color)
766
+ );
767
+ --_utrecht-radio-button-border-width: var(
768
+ --utrecht-radio-button-disabled-border-width,
769
+ var(--utrecht-radio-button-border-width)
770
+ );
771
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
778
772
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
779
773
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
780
774
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -871,6 +865,7 @@
871
865
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
872
866
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
873
867
  inline-size: 100%;
868
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
874
869
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
875
870
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
876
871
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -883,6 +878,8 @@
883
878
  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))));
884
879
  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))));
885
880
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
881
+ }
882
+ .utrecht-html select:focus-visible {
886
883
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
887
884
  var(--utrecht-focus-inverse-outline-color, transparent);
888
885
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -891,10 +888,6 @@
891
888
  outline-style: var(--utrecht-focus-outline-style, revert);
892
889
  outline-width: var(--utrecht-focus-outline-width, revert);
893
890
  }
894
- .utrecht-html select:focus:not(:focus-visible) {
895
- box-shadow: none;
896
- outline-style: revert;
897
- }
898
891
  .utrecht-html select:disabled {
899
892
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
900
893
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -1060,6 +1053,8 @@
1060
1053
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1061
1054
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1062
1055
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1056
+ }
1057
+ .utrecht-html textarea:focus-visible {
1063
1058
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1064
1059
  var(--utrecht-focus-inverse-outline-color, transparent);
1065
1060
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1068,10 +1063,6 @@
1068
1063
  outline-style: var(--utrecht-focus-outline-style, revert);
1069
1064
  outline-width: var(--utrecht-focus-outline-width, revert);
1070
1065
  }
1071
- .utrecht-html textarea:focus:not(:focus-visible) {
1072
- box-shadow: none;
1073
- outline-style: revert;
1074
- }
1075
1066
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1076
1067
  --_utrecht-textarea-border-width: var(
1077
1068
  --utrecht-textarea-invalid-border-width,
@@ -1161,6 +1152,20 @@
1161
1152
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1162
1153
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1163
1154
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1155
+ }
1156
+ .utrecht-html input:not([type]):focus-visible,
1157
+ .utrecht-html input[type=date i]:focus-visible,
1158
+ .utrecht-html input[type=datetime-local i]:focus-visible,
1159
+ .utrecht-html input[type=email i]:focus-visible,
1160
+ .utrecht-html input[type=month i]:focus-visible,
1161
+ .utrecht-html input[type=number i]:focus-visible,
1162
+ .utrecht-html input[type=password i]:focus-visible,
1163
+ .utrecht-html input[type=search i]:focus-visible,
1164
+ .utrecht-html input[type=tel i]:focus-visible,
1165
+ .utrecht-html input[type=text i]:focus-visible,
1166
+ .utrecht-html input[type=time i]:focus-visible,
1167
+ .utrecht-html input[type=url i]:focus-visible,
1168
+ .utrecht-html input[type=week i]:focus-visible {
1164
1169
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1165
1170
  var(--utrecht-focus-inverse-outline-color, transparent);
1166
1171
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1169,22 +1174,6 @@
1169
1174
  outline-style: var(--utrecht-focus-outline-style, revert);
1170
1175
  outline-width: var(--utrecht-focus-outline-width, revert);
1171
1176
  }
1172
- .utrecht-html input:not([type]):focus:not(:focus-visible),
1173
- .utrecht-html input[type=date i]:focus:not(:focus-visible),
1174
- .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
1175
- .utrecht-html input[type=email i]:focus:not(:focus-visible),
1176
- .utrecht-html input[type=month i]:focus:not(:focus-visible),
1177
- .utrecht-html input[type=number i]:focus:not(:focus-visible),
1178
- .utrecht-html input[type=password i]:focus:not(:focus-visible),
1179
- .utrecht-html input[type=search i]:focus:not(:focus-visible),
1180
- .utrecht-html input[type=tel i]:focus:not(:focus-visible),
1181
- .utrecht-html input[type=text i]:focus:not(:focus-visible),
1182
- .utrecht-html input[type=time i]:focus:not(:focus-visible),
1183
- .utrecht-html input[type=url i]:focus:not(:focus-visible),
1184
- .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1185
- box-shadow: none;
1186
- outline-style: revert;
1187
- }
1188
1177
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1189
1178
  .utrecht-html input[type=date i]:invalid,
1190
1179
  .utrecht-html input[type=date i][aria-invalid=true],
package/dist/index.css CHANGED
@@ -927,12 +927,12 @@
927
927
  border-width: var(--_utrecht-button-border-width);
928
928
  box-sizing: border-box;
929
929
  color: var(--_utrecht-button-color);
930
+ column-gap: var(--utrecht-button-column-gap);
930
931
  cursor: var(--utrecht-action-activate-cursor, revert);
931
932
  display: inline-flex;
932
933
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
933
934
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
934
935
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
935
- gap: var(--utrecht-button-icon-gap);
936
936
  inline-size: var(--utrecht-button-inline-size, auto);
937
937
  justify-content: center;
938
938
  line-height: var(--_utrecht-button-line-height);
@@ -1305,12 +1305,12 @@
1305
1305
  border-width: var(--_utrecht-button-border-width);
1306
1306
  box-sizing: border-box;
1307
1307
  color: var(--_utrecht-button-color);
1308
+ column-gap: var(--utrecht-button-column-gap);
1308
1309
  cursor: var(--utrecht-action-activate-cursor, revert);
1309
1310
  display: inline-flex;
1310
1311
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1311
1312
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1312
1313
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1313
- gap: var(--utrecht-button-icon-gap);
1314
1314
  inline-size: var(--utrecht-button-inline-size, auto);
1315
1315
  justify-content: center;
1316
1316
  line-height: var(--_utrecht-button-line-height);
@@ -1382,7 +1382,7 @@
1382
1382
  scale: var(--utrecht-button-focus-scale, 1);
1383
1383
  }
1384
1384
 
1385
- .utrecht-button:focus {
1385
+ .utrecht-button:focus-visible {
1386
1386
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1387
1387
  var(--utrecht-focus-inverse-outline-color, transparent);
1388
1388
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1397,17 +1397,6 @@
1397
1397
  border-color: var(--_utrecht-button-focus-border-color);
1398
1398
  color: var(--_utrecht-button-focus-color);
1399
1399
  scale: var(--utrecht-button-focus-scale, 1);
1400
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1401
- var(--utrecht-focus-inverse-outline-color, transparent);
1402
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
1403
- outline-color: var(--utrecht-focus-outline-color, revert);
1404
- outline-offset: var(--utrecht-focus-outline-offset, revert);
1405
- outline-style: var(--utrecht-focus-outline-style, revert);
1406
- outline-width: var(--utrecht-focus-outline-width, revert);
1407
- }
1408
- .utrecht-button:focus:not(:focus-visible) {
1409
- box-shadow: none;
1410
- outline-style: revert;
1411
1400
  }
1412
1401
 
1413
1402
  .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
@@ -1882,7 +1871,7 @@
1882
1871
  .utrecht-checkbox--html-input:disabled {
1883
1872
  cursor: var(--utrecht-action-disabled-cursor, revert);
1884
1873
  }
1885
- .utrecht-checkbox--html-input:focus {
1874
+ .utrecht-checkbox--html-input :focus-visible {
1886
1875
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1887
1876
  var(--utrecht-focus-inverse-outline-color, transparent);
1888
1877
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1891,10 +1880,6 @@
1891
1880
  outline-style: var(--utrecht-focus-outline-style, revert);
1892
1881
  outline-width: var(--utrecht-focus-outline-width, revert);
1893
1882
  }
1894
- .utrecht-checkbox--html-input:focus:not(:focus-visible) {
1895
- box-shadow: none;
1896
- outline-style: revert;
1897
- }
1898
1883
  .utrecht-code-block {
1899
1884
  background-color: var(--utrecht-code-background-color);
1900
1885
  color: var(--utrecht-code-color);
@@ -2984,8 +2969,6 @@
2984
2969
 
2985
2970
  .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
2986
2971
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
2987
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
2988
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
2989
2972
  background-color: var(--utrecht-link-focus-background-color, transparent);
2990
2973
  text-decoration-skip: none;
2991
2974
  text-decoration-skip-ink: none;
@@ -2999,6 +2982,14 @@
2999
2982
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3000
2983
  outline-style: var(--utrecht-focus-outline-style, revert);
3001
2984
  outline-width: var(--utrecht-focus-outline-width, revert);
2985
+ --_utrecht-link-state-text-decoration: var(
2986
+ --utrecht-link-focus-visible-text-decoration,
2987
+ var(--utrecht-link-focus-text-decoration)
2988
+ );
2989
+ --_utrecht-link-state-text-decoration-thickness: var(
2990
+ --utrecht-link-focus-visible-text-decoration-thickness,
2991
+ var(--utrecht-link-focus-text-decoration-thickness)
2992
+ );
3002
2993
  z-index: var(--utrecht-stack-focus-z-index, 1);
3003
2994
  }
3004
2995
 
@@ -3110,16 +3101,6 @@
3110
3101
  text-underline-offset: var(--utrecht-link-text-underline-offset);
3111
3102
  }
3112
3103
 
3113
- .utrecht-link--icon-left {
3114
- background-image: var(--utrecht-link-icon-left-background-image, none);
3115
- background-position: 0 0.25em;
3116
- background-repeat: no-repeat;
3117
- color: var(--utrecht-link-color, LinkText);
3118
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3119
- padding-inline-start: var(--utrecht-space-block-md);
3120
- text-decoration-line: none;
3121
- }
3122
-
3123
3104
  .utrecht-link--visited {
3124
3105
  --_utrecht-link-forced-colors-color: visitedtext;
3125
3106
  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -3136,8 +3117,6 @@
3136
3117
 
3137
3118
  .utrecht-link--focus {
3138
3119
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3139
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
3140
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
3141
3120
  background-color: var(--utrecht-link-focus-background-color, transparent);
3142
3121
  text-decoration-skip: none;
3143
3122
  text-decoration-skip-ink: none;
@@ -3151,16 +3130,18 @@
3151
3130
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3152
3131
  outline-style: var(--utrecht-focus-outline-style, revert);
3153
3132
  outline-width: var(--utrecht-focus-outline-width, revert);
3133
+ --_utrecht-link-state-text-decoration: var(
3134
+ --utrecht-link-focus-visible-text-decoration,
3135
+ var(--utrecht-link-focus-text-decoration)
3136
+ );
3137
+ --_utrecht-link-state-text-decoration-thickness: var(
3138
+ --utrecht-link-focus-visible-text-decoration-thickness,
3139
+ var(--utrecht-link-focus-text-decoration-thickness)
3140
+ );
3154
3141
  z-index: var(--utrecht-stack-focus-z-index, 1);
3155
3142
  }
3156
- .utrecht-link--html-span:focus,
3157
- .utrecht-link--html-a:any-link:focus {
3158
- --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3159
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
3160
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
3161
- background-color: var(--utrecht-link-focus-background-color, transparent);
3162
- text-decoration-skip: none;
3163
- text-decoration-skip-ink: none;
3143
+ .utrecht-link--html-span:focus-visible,
3144
+ .utrecht-link--html-a:focus-visible {
3164
3145
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3165
3146
  var(--utrecht-focus-inverse-outline-color, transparent);
3166
3147
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3168,13 +3149,22 @@
3168
3149
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3169
3150
  outline-style: var(--utrecht-focus-outline-style, revert);
3170
3151
  outline-width: var(--utrecht-focus-outline-width, revert);
3152
+ --_utrecht-link-state-text-decoration: var(
3153
+ --utrecht-link-focus-visible-text-decoration,
3154
+ var(--utrecht-link-focus-text-decoration)
3155
+ );
3156
+ --_utrecht-link-state-text-decoration-thickness: var(
3157
+ --utrecht-link-focus-visible-text-decoration-thickness,
3158
+ var(--utrecht-link-focus-text-decoration-thickness)
3159
+ );
3171
3160
  z-index: var(--utrecht-stack-focus-z-index, 1);
3172
3161
  }
3173
-
3174
- .utrecht-link--html-span:focus:not(:focus-visible),
3175
- .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
3176
- box-shadow: none;
3177
- outline-style: revert;
3162
+ .utrecht-link--html-span:focus,
3163
+ .utrecht-link--html-a:any-link:focus {
3164
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3165
+ background-color: var(--utrecht-link-focus-background-color, transparent);
3166
+ text-decoration-skip: none;
3167
+ text-decoration-skip-ink: none;
3178
3168
  }
3179
3169
 
3180
3170
  .utrecht-link--html-span:active,
@@ -3489,7 +3479,7 @@
3489
3479
  color: var(--utrecht-mapcontrolbutton-disabled-color);
3490
3480
  }
3491
3481
 
3492
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3482
+ .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus-visible {
3493
3483
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3494
3484
  var(--utrecht-focus-inverse-outline-color, transparent);
3495
3485
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3502,11 +3492,6 @@
3502
3492
  .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3503
3493
  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3504
3494
  }
3505
- .utrecht-mapcontrolbutton:focus:not(:focus-visible) {
3506
- box-shadow: none;
3507
- outline-style: revert;
3508
- }
3509
-
3510
3495
  .utrecht-mapcontrolbutton--hover:not(:disabled),
3511
3496
  .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3512
3497
  background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
@@ -3574,7 +3559,7 @@
3574
3559
  color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3575
3560
  }
3576
3561
 
3577
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
3562
+ .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus-visible {
3578
3563
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3579
3564
  var(--utrecht-focus-inverse-outline-color, transparent);
3580
3565
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3583,11 +3568,6 @@
3583
3568
  outline-style: var(--utrecht-focus-outline-style, revert);
3584
3569
  outline-width: var(--utrecht-focus-outline-width, revert);
3585
3570
  }
3586
-
3587
- .utrecht-menulijst__link:focus:not(:focus-visible) {
3588
- box-shadow: none;
3589
- outline-style: revert;
3590
- }
3591
3571
  .utrecht-multiline-data {
3592
3572
  white-space: pre-line;
3593
3573
  white-space-collapse: preserve-breaks;
@@ -3724,7 +3704,7 @@
3724
3704
  text-decoration: underline;
3725
3705
  }
3726
3706
 
3727
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
3707
+ .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus-visible {
3728
3708
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3729
3709
  var(--utrecht-focus-inverse-outline-color, transparent);
3730
3710
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3813,11 +3793,6 @@
3813
3793
  .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3814
3794
  display: none;
3815
3795
  }
3816
-
3817
- .utrecht-sidenav__link:focus:not(:focus-visible) {
3818
- box-shadow: none;
3819
- outline-style: revert;
3820
- }
3821
3796
  .utrecht-navhtml {
3822
3797
  font-family: var(--utrecht-document-font-family);
3823
3798
  }
@@ -3874,7 +3849,7 @@
3874
3849
  color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3875
3850
  }
3876
3851
 
3877
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
3852
+ .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus-visible {
3878
3853
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3879
3854
  var(--utrecht-focus-inverse-outline-color, transparent);
3880
3855
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3883,14 +3858,12 @@
3883
3858
  outline-style: var(--utrecht-focus-outline-style, revert);
3884
3859
  outline-width: var(--utrecht-focus-outline-width, revert);
3885
3860
  }
3886
-
3887
- .utrecht-topnav__link:focus:not(:focus-visible) {
3888
- box-shadow: none;
3889
- outline-style: revert;
3890
- }
3891
3861
  .utrecht-number-badge {
3892
3862
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3863
+ border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
3893
3864
  border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
3865
+ border-style: solid;
3866
+ border-width: max(var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), var(--_utrecht-number-badge-min-border-width, 0));
3894
3867
  color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
3895
3868
  display: inline-block;
3896
3869
  font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
@@ -3910,11 +3883,10 @@
3910
3883
  text-decoration: none;
3911
3884
  white-space: nowrap;
3912
3885
  }
3913
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
3886
+ @media screen and (forced-colors: active) {
3914
3887
  .utrecht-number-badge {
3888
+ --_utrecht-number-badge-min-border-width: 1px;
3915
3889
  border-color: currentColor;
3916
- border-style: solid;
3917
- border-width: 1px;
3918
3890
  }
3919
3891
  }
3920
3892
  .utrecht-number-data {
@@ -4108,8 +4080,8 @@
4108
4080
  color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
4109
4081
  }
4110
4082
 
4111
- .utrecht-pagination__page-link:focus,
4112
- .utrecht-pagination__relative-link:focus {
4083
+ .utrecht-pagination__page-link:focus-visible,
4084
+ .utrecht-pagination__relative-link:focus-visible {
4113
4085
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4114
4086
  var(--utrecht-focus-inverse-outline-color, transparent);
4115
4087
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -4118,12 +4090,6 @@
4118
4090
  outline-style: var(--utrecht-focus-outline-style, revert);
4119
4091
  outline-width: var(--utrecht-focus-outline-width, revert);
4120
4092
  }
4121
-
4122
- .utrecht-pagination__page-link:focus:not(:focus-visible),
4123
- .utrecht-pagination__relative-link:focus:not(:focus-visible) {
4124
- box-shadow: none;
4125
- outline-style: revert;
4126
- }
4127
4093
  .utrecht-paragraph {
4128
4094
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
4129
4095
  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
@@ -4312,10 +4278,19 @@
4312
4278
  }
4313
4279
 
4314
4280
  .utrecht-radio-button--disabled {
4315
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4316
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4317
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4318
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4281
+ --_utrecht-radio-button-background-color: var(
4282
+ --utrecht-radio-button-disabled-background-color,
4283
+ var(--utrecht-radio-button-background-color)
4284
+ );
4285
+ --_utrecht-radio-button-border-color: var(
4286
+ --utrecht-radio-button-disabled-border-color,
4287
+ var(--utrecht-radio-button-border-color)
4288
+ );
4289
+ --_utrecht-radio-button-border-width: var(
4290
+ --utrecht-radio-button-disabled-border-width,
4291
+ var(--utrecht-radio-button-border-width)
4292
+ );
4293
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4319
4294
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4320
4295
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4321
4296
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -4359,10 +4334,19 @@
4359
4334
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4360
4335
  }
4361
4336
  .utrecht-radio-button--html-input:disabled {
4362
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4363
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4364
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4365
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4337
+ --_utrecht-radio-button-background-color: var(
4338
+ --utrecht-radio-button-disabled-background-color,
4339
+ var(--utrecht-radio-button-background-color)
4340
+ );
4341
+ --_utrecht-radio-button-border-color: var(
4342
+ --utrecht-radio-button-disabled-border-color,
4343
+ var(--utrecht-radio-button-border-color)
4344
+ );
4345
+ --_utrecht-radio-button-border-width: var(
4346
+ --utrecht-radio-button-disabled-border-width,
4347
+ var(--utrecht-radio-button-border-width)
4348
+ );
4349
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4366
4350
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4367
4351
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4368
4352
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -6280,6 +6264,7 @@
6280
6264
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
6281
6265
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
6282
6266
  inline-size: 100%;
6267
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
6283
6268
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6284
6269
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
6285
6270
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6335,6 +6320,8 @@
6335
6320
  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))));
6336
6321
  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))));
6337
6322
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6323
+ }
6324
+ .utrecht-select--html-select:focus-visible {
6338
6325
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6339
6326
  var(--utrecht-focus-inverse-outline-color, transparent);
6340
6327
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6343,10 +6330,6 @@
6343
6330
  outline-style: var(--utrecht-focus-outline-style, revert);
6344
6331
  outline-width: var(--utrecht-focus-outline-width, revert);
6345
6332
  }
6346
- .utrecht-select--html-select:focus:not(:focus-visible) {
6347
- box-shadow: none;
6348
- outline-style: revert;
6349
- }
6350
6333
  .utrecht-select--html-select:disabled {
6351
6334
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6352
6335
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6415,9 +6398,18 @@
6415
6398
  position: fixed;
6416
6399
  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
6417
6400
  }
6401
+ .utrecht-skip-link--focus {
6402
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6403
+ var(--utrecht-focus-inverse-outline-color, transparent);
6404
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
6405
+ outline-color: var(--utrecht-focus-outline-color, revert);
6406
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
6407
+ outline-style: var(--utrecht-focus-outline-style, revert);
6408
+ outline-width: var(--utrecht-focus-outline-width, revert);
6409
+ text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6410
+ }
6418
6411
 
6419
- .utrecht-skip-link--focus,
6420
- .utrecht-skip-link:focus,
6412
+ .utrecht-skip-link--focus-visible,
6421
6413
  .utrecht-skip-link:focus-visible {
6422
6414
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6423
6415
  var(--utrecht-focus-inverse-outline-color, transparent);
@@ -6426,7 +6418,7 @@
6426
6418
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6427
6419
  outline-style: var(--utrecht-focus-outline-style, revert);
6428
6420
  outline-width: var(--utrecht-focus-outline-width, revert);
6429
- text-decoration: var(--utrecht-skip-link-focus-text-decoration);
6421
+ text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6430
6422
  }
6431
6423
  .utrecht-spotlight-section {
6432
6424
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
@@ -6890,6 +6882,8 @@
6890
6882
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6891
6883
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6892
6884
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6885
+ }
6886
+ .utrecht-textarea--html-textarea:focus-visible {
6893
6887
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6894
6888
  var(--utrecht-focus-inverse-outline-color, transparent);
6895
6889
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6898,10 +6892,6 @@
6898
6892
  outline-style: var(--utrecht-focus-outline-style, revert);
6899
6893
  outline-width: var(--utrecht-focus-outline-width, revert);
6900
6894
  }
6901
- .utrecht-textarea--html-textarea:focus:not(:focus-visible) {
6902
- box-shadow: none;
6903
- outline-style: revert;
6904
- }
6905
6895
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6906
6896
  --_utrecht-textarea-border-width: var(
6907
6897
  --utrecht-textarea-invalid-border-width,
@@ -7076,6 +7066,8 @@
7076
7066
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
7077
7067
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
7078
7068
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
7069
+ }
7070
+ .utrecht-textbox--html-input:focus-visible {
7079
7071
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7080
7072
  var(--utrecht-focus-inverse-outline-color, transparent);
7081
7073
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7084,10 +7076,6 @@
7084
7076
  outline-style: var(--utrecht-focus-outline-style, revert);
7085
7077
  outline-width: var(--utrecht-focus-outline-width, revert);
7086
7078
  }
7087
- .utrecht-textbox--html-input:focus:not(:focus-visible) {
7088
- box-shadow: none;
7089
- outline-style: revert;
7090
- }
7091
7079
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
7092
7080
  --_utrecht-textbox-border-width: var(
7093
7081
  --utrecht-textbox-invalid-border-width,
@@ -7155,7 +7143,7 @@
7155
7143
  transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
7156
7144
  }
7157
7145
 
7158
- .utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
7146
+ .utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus-visible {
7159
7147
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7160
7148
  var(--utrecht-focus-inverse-outline-color, transparent);
7161
7149
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7169,10 +7157,6 @@
7169
7157
  background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
7170
7158
  color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
7171
7159
  }
7172
- .utrecht-toptask-link:focus:not(:focus-visible) {
7173
- box-shadow: none;
7174
- outline-style: revert;
7175
- }
7176
7160
 
7177
7161
  .utrecht-toptask-link__title {
7178
7162
  display: block;
@@ -885,12 +885,12 @@
885
885
  border-width: var(--_utrecht-button-border-width);
886
886
  box-sizing: border-box;
887
887
  color: var(--_utrecht-button-color);
888
+ column-gap: var(--utrecht-button-column-gap);
888
889
  cursor: var(--utrecht-action-activate-cursor, revert);
889
890
  display: inline-flex;
890
891
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
891
892
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
892
893
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
893
- gap: var(--utrecht-button-icon-gap);
894
894
  width: var(--utrecht-button-inline-size, auto);
895
895
  justify-content: center;
896
896
  line-height: var(--_utrecht-button-line-height);
@@ -1254,12 +1254,12 @@
1254
1254
  border-width: var(--_utrecht-button-border-width);
1255
1255
  box-sizing: border-box;
1256
1256
  color: var(--_utrecht-button-color);
1257
+ column-gap: var(--utrecht-button-column-gap);
1257
1258
  cursor: var(--utrecht-action-activate-cursor, revert);
1258
1259
  display: inline-flex;
1259
1260
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1260
1261
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1261
1262
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1262
- gap: var(--utrecht-button-icon-gap);
1263
1263
  width: var(--utrecht-button-inline-size, auto);
1264
1264
  justify-content: center;
1265
1265
  line-height: var(--_utrecht-button-line-height);
@@ -1322,7 +1322,7 @@
1322
1322
  scale: var(--utrecht-button-focus-scale, 1);
1323
1323
  }
1324
1324
 
1325
- .utrecht-button:focus {
1325
+ .utrecht-button[prince-xml-ignore-pseudo-class-focus-visible] {
1326
1326
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1327
1327
  var(--utrecht-focus-inverse-outline-color, transparent);
1328
1328
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1337,17 +1337,6 @@
1337
1337
  border-color: var(--_utrecht-button-focus-border-color);
1338
1338
  color: var(--_utrecht-button-focus-color);
1339
1339
  scale: var(--utrecht-button-focus-scale, 1);
1340
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1341
- var(--utrecht-focus-inverse-outline-color, transparent);
1342
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
1343
- outline-color: var(--utrecht-focus-outline-color, revert);
1344
- outline-offset: var(--utrecht-focus-outline-offset, revert);
1345
- outline-style: var(--utrecht-focus-outline-style, revert);
1346
- outline-width: var(--utrecht-focus-outline-width, revert);
1347
- }
1348
- .utrecht-button:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
1349
- box-shadow: none;
1350
- outline-style: revert;
1351
1340
  }
1352
1341
 
1353
1342
  .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
@@ -1830,7 +1819,7 @@
1830
1819
  .utrecht-checkbox--html-input:disabled {
1831
1820
  cursor: var(--utrecht-action-disabled-cursor, revert);
1832
1821
  }
1833
- .utrecht-checkbox--html-input:focus {
1822
+ .utrecht-checkbox--html-input [prince-xml-ignore-pseudo-class-focus-visible] {
1834
1823
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1835
1824
  var(--utrecht-focus-inverse-outline-color, transparent);
1836
1825
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1839,10 +1828,6 @@
1839
1828
  outline-style: var(--utrecht-focus-outline-style, revert);
1840
1829
  outline-width: var(--utrecht-focus-outline-width, revert);
1841
1830
  }
1842
- .utrecht-checkbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
1843
- box-shadow: none;
1844
- outline-style: revert;
1845
- }
1846
1831
  .utrecht-code-block {
1847
1832
  background-color: var(--utrecht-code-background-color);
1848
1833
  color: var(--utrecht-code-color);
@@ -2885,8 +2870,6 @@
2885
2870
 
2886
2871
  .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
2887
2872
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
2888
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
2889
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
2890
2873
  background-color: var(--utrecht-link-focus-background-color, transparent);
2891
2874
  text-decoration-skip: none;
2892
2875
  text-decoration-skip-ink: none;
@@ -2900,6 +2883,14 @@
2900
2883
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2901
2884
  outline-style: var(--utrecht-focus-outline-style, revert);
2902
2885
  outline-width: var(--utrecht-focus-outline-width, revert);
2886
+ --_utrecht-link-state-text-decoration: var(
2887
+ --utrecht-link-focus-visible-text-decoration,
2888
+ var(--utrecht-link-focus-text-decoration)
2889
+ );
2890
+ --_utrecht-link-state-text-decoration-thickness: var(
2891
+ --utrecht-link-focus-visible-text-decoration-thickness,
2892
+ var(--utrecht-link-focus-text-decoration-thickness)
2893
+ );
2903
2894
  z-index: var(--utrecht-stack-focus-z-index, 1);
2904
2895
  }
2905
2896
 
@@ -3010,16 +3001,6 @@
3010
3001
  text-underline-offset: var(--utrecht-link-text-underline-offset);
3011
3002
  }
3012
3003
 
3013
- .utrecht-link--icon-left {
3014
- background-image: var(--utrecht-link-icon-left-background-image, none);
3015
- background-position: 0 0.25em;
3016
- background-repeat: no-repeat;
3017
- color: var(--utrecht-link-color, LinkText);
3018
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3019
- padding-left: var(--utrecht-space-block-md);
3020
- text-decoration-line: none;
3021
- }
3022
-
3023
3004
  .utrecht-link--visited {
3024
3005
  --_utrecht-link-forced-colors-color: visitedtext;
3025
3006
  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -3036,8 +3017,6 @@
3036
3017
 
3037
3018
  .utrecht-link--focus {
3038
3019
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3039
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
3040
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
3041
3020
  background-color: var(--utrecht-link-focus-background-color, transparent);
3042
3021
  text-decoration-skip: none;
3043
3022
  text-decoration-skip-ink: none;
@@ -3051,16 +3030,18 @@
3051
3030
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3052
3031
  outline-style: var(--utrecht-focus-outline-style, revert);
3053
3032
  outline-width: var(--utrecht-focus-outline-width, revert);
3033
+ --_utrecht-link-state-text-decoration: var(
3034
+ --utrecht-link-focus-visible-text-decoration,
3035
+ var(--utrecht-link-focus-text-decoration)
3036
+ );
3037
+ --_utrecht-link-state-text-decoration-thickness: var(
3038
+ --utrecht-link-focus-visible-text-decoration-thickness,
3039
+ var(--utrecht-link-focus-text-decoration-thickness)
3040
+ );
3054
3041
  z-index: var(--utrecht-stack-focus-z-index, 1);
3055
3042
  }
3056
- .utrecht-link--html-span:focus,
3057
- .utrecht-link--html-a[href]:focus {
3058
- --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3059
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
3060
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
3061
- background-color: var(--utrecht-link-focus-background-color, transparent);
3062
- text-decoration-skip: none;
3063
- text-decoration-skip-ink: none;
3043
+ .utrecht-link--html-span[prince-xml-ignore-pseudo-class-focus-visible],
3044
+ .utrecht-link--html-a[prince-xml-ignore-pseudo-class-focus-visible] {
3064
3045
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3065
3046
  var(--utrecht-focus-inverse-outline-color, transparent);
3066
3047
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3068,13 +3049,22 @@
3068
3049
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3069
3050
  outline-style: var(--utrecht-focus-outline-style, revert);
3070
3051
  outline-width: var(--utrecht-focus-outline-width, revert);
3052
+ --_utrecht-link-state-text-decoration: var(
3053
+ --utrecht-link-focus-visible-text-decoration,
3054
+ var(--utrecht-link-focus-text-decoration)
3055
+ );
3056
+ --_utrecht-link-state-text-decoration-thickness: var(
3057
+ --utrecht-link-focus-visible-text-decoration-thickness,
3058
+ var(--utrecht-link-focus-text-decoration-thickness)
3059
+ );
3071
3060
  z-index: var(--utrecht-stack-focus-z-index, 1);
3072
3061
  }
3073
-
3074
- .utrecht-link--html-span:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
3075
- .utrecht-link--html-a[href]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3076
- box-shadow: none;
3077
- outline-style: revert;
3062
+ .utrecht-link--html-span:focus,
3063
+ .utrecht-link--html-a[href]:focus {
3064
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
3065
+ background-color: var(--utrecht-link-focus-background-color, transparent);
3066
+ text-decoration-skip: none;
3067
+ text-decoration-skip-ink: none;
3078
3068
  }
3079
3069
 
3080
3070
  .utrecht-link--html-span:active,
@@ -3357,7 +3347,7 @@
3357
3347
  color: var(--utrecht-mapcontrolbutton-disabled-color);
3358
3348
  }
3359
3349
 
3360
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3350
+ .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton[prince-xml-ignore-pseudo-class-focus-visible] {
3361
3351
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3362
3352
  var(--utrecht-focus-inverse-outline-color, transparent);
3363
3353
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3370,11 +3360,6 @@
3370
3360
  .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3371
3361
  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3372
3362
  }
3373
- .utrecht-mapcontrolbutton:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3374
- box-shadow: none;
3375
- outline-style: revert;
3376
- }
3377
-
3378
3363
  .utrecht-mapcontrolbutton--hover:not(:disabled),
3379
3364
  .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3380
3365
  background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
@@ -3442,7 +3427,7 @@
3442
3427
  color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3443
3428
  }
3444
3429
 
3445
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
3430
+ .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link[prince-xml-ignore-pseudo-class-focus-visible] {
3446
3431
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3447
3432
  var(--utrecht-focus-inverse-outline-color, transparent);
3448
3433
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3451,11 +3436,6 @@
3451
3436
  outline-style: var(--utrecht-focus-outline-style, revert);
3452
3437
  outline-width: var(--utrecht-focus-outline-width, revert);
3453
3438
  }
3454
-
3455
- .utrecht-menulijst__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3456
- box-shadow: none;
3457
- outline-style: revert;
3458
- }
3459
3439
  .utrecht-multiline-data {
3460
3440
  white-space: pre-line;
3461
3441
  }
@@ -3579,7 +3559,7 @@
3579
3559
  text-decoration: underline;
3580
3560
  }
3581
3561
 
3582
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
3562
+ .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3583
3563
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3584
3564
  var(--utrecht-focus-inverse-outline-color, transparent);
3585
3565
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3668,11 +3648,6 @@
3668
3648
  .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3669
3649
  display: none;
3670
3650
  }
3671
-
3672
- .utrecht-sidenav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3673
- box-shadow: none;
3674
- outline-style: revert;
3675
- }
3676
3651
  .utrecht-navhtml {
3677
3652
  font-family: var(--utrecht-document-font-family);
3678
3653
  }
@@ -3729,7 +3704,7 @@
3729
3704
  color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3730
3705
  }
3731
3706
 
3732
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
3707
+ .utrecht-topnav__link--focus-visible, .utrecht-topnav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3733
3708
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3734
3709
  var(--utrecht-focus-inverse-outline-color, transparent);
3735
3710
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3738,14 +3713,12 @@
3738
3713
  outline-style: var(--utrecht-focus-outline-style, revert);
3739
3714
  outline-width: var(--utrecht-focus-outline-width, revert);
3740
3715
  }
3741
-
3742
- .utrecht-topnav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3743
- box-shadow: none;
3744
- outline-style: revert;
3745
- }
3746
3716
  .utrecht-number-badge {
3747
3717
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3718
+ border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
3748
3719
  border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
3720
+ border-style: solid;
3721
+ border-width: max(var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), var(--_utrecht-number-badge-min-border-width, 0));
3749
3722
  color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
3750
3723
  display: inline-block;
3751
3724
  font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
@@ -3956,8 +3929,8 @@
3956
3929
  color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
3957
3930
  }
3958
3931
 
3959
- .utrecht-pagination__page-link:focus,
3960
- .utrecht-pagination__relative-link:focus {
3932
+ .utrecht-pagination__page-link[prince-xml-ignore-pseudo-class-focus-visible],
3933
+ .utrecht-pagination__relative-link[prince-xml-ignore-pseudo-class-focus-visible] {
3961
3934
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3962
3935
  var(--utrecht-focus-inverse-outline-color, transparent);
3963
3936
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -3966,12 +3939,6 @@
3966
3939
  outline-style: var(--utrecht-focus-outline-style, revert);
3967
3940
  outline-width: var(--utrecht-focus-outline-width, revert);
3968
3941
  }
3969
-
3970
- .utrecht-pagination__page-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
3971
- .utrecht-pagination__relative-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
3972
- box-shadow: none;
3973
- outline-style: revert;
3974
- }
3975
3942
  .utrecht-paragraph {
3976
3943
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
3977
3944
  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
@@ -4165,10 +4132,19 @@
4165
4132
  }
4166
4133
 
4167
4134
  .utrecht-radio-button--disabled {
4168
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4169
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4170
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4171
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4135
+ --_utrecht-radio-button-background-color: var(
4136
+ --utrecht-radio-button-disabled-background-color,
4137
+ var(--utrecht-radio-button-background-color)
4138
+ );
4139
+ --_utrecht-radio-button-border-color: var(
4140
+ --utrecht-radio-button-disabled-border-color,
4141
+ var(--utrecht-radio-button-border-color)
4142
+ );
4143
+ --_utrecht-radio-button-border-width: var(
4144
+ --utrecht-radio-button-disabled-border-width,
4145
+ var(--utrecht-radio-button-border-width)
4146
+ );
4147
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4172
4148
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4173
4149
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4174
4150
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -4212,10 +4188,19 @@
4212
4188
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4213
4189
  }
4214
4190
  .utrecht-radio-button--html-input:disabled {
4215
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4216
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4217
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4218
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4191
+ --_utrecht-radio-button-background-color: var(
4192
+ --utrecht-radio-button-disabled-background-color,
4193
+ var(--utrecht-radio-button-background-color)
4194
+ );
4195
+ --_utrecht-radio-button-border-color: var(
4196
+ --utrecht-radio-button-disabled-border-color,
4197
+ var(--utrecht-radio-button-border-color)
4198
+ );
4199
+ --_utrecht-radio-button-border-width: var(
4200
+ --utrecht-radio-button-disabled-border-width,
4201
+ var(--utrecht-radio-button-border-width)
4202
+ );
4203
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4219
4204
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4220
4205
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4221
4206
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -6133,6 +6118,7 @@
6133
6118
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
6134
6119
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
6135
6120
  width: 100%;
6121
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
6136
6122
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6137
6123
  min-width: var(--utrecht-pointer-target-min-size, 44px);
6138
6124
  max-width: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6193,6 +6179,8 @@
6193
6179
  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))));
6194
6180
  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))));
6195
6181
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6182
+ }
6183
+ .utrecht-select--html-select[prince-xml-ignore-pseudo-class-focus-visible] {
6196
6184
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6197
6185
  var(--utrecht-focus-inverse-outline-color, transparent);
6198
6186
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6201,10 +6189,6 @@
6201
6189
  outline-style: var(--utrecht-focus-outline-style, revert);
6202
6190
  outline-width: var(--utrecht-focus-outline-width, revert);
6203
6191
  }
6204
- .utrecht-select--html-select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
6205
- box-shadow: none;
6206
- outline-style: revert;
6207
- }
6208
6192
  .utrecht-select--html-select:disabled {
6209
6193
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6210
6194
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6273,9 +6257,18 @@
6273
6257
  position: fixed;
6274
6258
  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
6275
6259
  }
6260
+ .utrecht-skip-link--focus {
6261
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6262
+ var(--utrecht-focus-inverse-outline-color, transparent);
6263
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
6264
+ outline-color: var(--utrecht-focus-outline-color, revert);
6265
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
6266
+ outline-style: var(--utrecht-focus-outline-style, revert);
6267
+ outline-width: var(--utrecht-focus-outline-width, revert);
6268
+ text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6269
+ }
6276
6270
 
6277
- .utrecht-skip-link--focus,
6278
- .utrecht-skip-link:focus,
6271
+ .utrecht-skip-link--focus-visible,
6279
6272
  .utrecht-skip-link[prince-xml-ignore-pseudo-class-focus-visible] {
6280
6273
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6281
6274
  var(--utrecht-focus-inverse-outline-color, transparent);
@@ -6284,7 +6277,7 @@
6284
6277
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6285
6278
  outline-style: var(--utrecht-focus-outline-style, revert);
6286
6279
  outline-width: var(--utrecht-focus-outline-width, revert);
6287
- text-decoration: var(--utrecht-skip-link-focus-text-decoration);
6280
+ text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6288
6281
  }
6289
6282
  .utrecht-spotlight-section {
6290
6283
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
@@ -6771,6 +6764,8 @@
6771
6764
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6772
6765
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6773
6766
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6767
+ }
6768
+ .utrecht-textarea--html-textarea[prince-xml-ignore-pseudo-class-focus-visible] {
6774
6769
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6775
6770
  var(--utrecht-focus-inverse-outline-color, transparent);
6776
6771
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6779,10 +6774,6 @@
6779
6774
  outline-style: var(--utrecht-focus-outline-style, revert);
6780
6775
  outline-width: var(--utrecht-focus-outline-width, revert);
6781
6776
  }
6782
- .utrecht-textarea--html-textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
6783
- box-shadow: none;
6784
- outline-style: revert;
6785
- }
6786
6777
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6787
6778
  --_utrecht-textarea-border-width: var(
6788
6779
  --utrecht-textarea-invalid-border-width,
@@ -6966,6 +6957,8 @@
6966
6957
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
6967
6958
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
6968
6959
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6960
+ }
6961
+ .utrecht-textbox--html-input[prince-xml-ignore-pseudo-class-focus-visible] {
6969
6962
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
6970
6963
  var(--utrecht-focus-inverse-outline-color, transparent);
6971
6964
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6974,10 +6967,6 @@
6974
6967
  outline-style: var(--utrecht-focus-outline-style, revert);
6975
6968
  outline-width: var(--utrecht-focus-outline-width, revert);
6976
6969
  }
6977
- .utrecht-textbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
6978
- box-shadow: none;
6979
- outline-style: revert;
6980
- }
6981
6970
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
6982
6971
  --_utrecht-textbox-border-width: var(
6983
6972
  --utrecht-textbox-invalid-border-width,
@@ -7045,7 +7034,7 @@
7045
7034
  transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
7046
7035
  }
7047
7036
 
7048
- .utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
7037
+ .utrecht-toptask-link--focus-visible, .utrecht-toptask-link[prince-xml-ignore-pseudo-class-focus-visible] {
7049
7038
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7050
7039
  var(--utrecht-focus-inverse-outline-color, transparent);
7051
7040
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7059,10 +7048,6 @@
7059
7048
  background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
7060
7049
  color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
7061
7050
  }
7062
- .utrecht-toptask-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7063
- box-shadow: none;
7064
- outline-style: revert;
7065
- }
7066
7051
 
7067
7052
  .utrecht-toptask-link__title {
7068
7053
  display: block;
@@ -7371,12 +7356,12 @@
7371
7356
  border-width: var(--_utrecht-button-border-width);
7372
7357
  box-sizing: border-box;
7373
7358
  color: var(--_utrecht-button-color);
7359
+ column-gap: var(--utrecht-button-column-gap);
7374
7360
  cursor: var(--utrecht-action-activate-cursor, revert);
7375
7361
  display: inline-flex;
7376
7362
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
7377
7363
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
7378
7364
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
7379
- gap: var(--utrecht-button-icon-gap);
7380
7365
  width: var(--utrecht-button-inline-size, auto);
7381
7366
  justify-content: center;
7382
7367
  line-height: var(--_utrecht-button-line-height);
@@ -7460,7 +7445,7 @@
7460
7445
  .utrecht-html input[type=checkbox i]:disabled {
7461
7446
  cursor: var(--utrecht-action-disabled-cursor, revert);
7462
7447
  }
7463
- .utrecht-html input[type=checkbox i]:focus {
7448
+ .utrecht-html input[type=checkbox i] [prince-xml-ignore-pseudo-class-focus-visible] {
7464
7449
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7465
7450
  var(--utrecht-focus-inverse-outline-color, transparent);
7466
7451
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7469,10 +7454,6 @@
7469
7454
  outline-style: var(--utrecht-focus-outline-style, revert);
7470
7455
  outline-width: var(--utrecht-focus-outline-width, revert);
7471
7456
  }
7472
- .utrecht-html input[type=checkbox i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7473
- box-shadow: none;
7474
- outline-style: revert;
7475
- }
7476
7457
  .utrecht-html body {
7477
7458
  -webkit-font-smoothing: auto !important;
7478
7459
  -moz-osx-font-smoothing: auto !important;
@@ -7701,11 +7682,11 @@
7701
7682
  }
7702
7683
  .utrecht-html a:focus {
7703
7684
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
7704
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
7705
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
7706
7685
  background-color: var(--utrecht-link-focus-background-color, transparent);
7707
7686
  text-decoration-skip: none;
7708
7687
  text-decoration-skip-ink: none;
7688
+ }
7689
+ .utrecht-html a[prince-xml-ignore-pseudo-class-focus-visible] {
7709
7690
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7710
7691
  var(--utrecht-focus-inverse-outline-color, transparent);
7711
7692
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7713,12 +7694,16 @@
7713
7694
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7714
7695
  outline-style: var(--utrecht-focus-outline-style, revert);
7715
7696
  outline-width: var(--utrecht-focus-outline-width, revert);
7697
+ --_utrecht-link-state-text-decoration: var(
7698
+ --utrecht-link-focus-visible-text-decoration,
7699
+ var(--utrecht-link-focus-text-decoration)
7700
+ );
7701
+ --_utrecht-link-state-text-decoration-thickness: var(
7702
+ --utrecht-link-focus-visible-text-decoration-thickness,
7703
+ var(--utrecht-link-focus-text-decoration-thickness)
7704
+ );
7716
7705
  z-index: var(--utrecht-stack-focus-z-index, 1);
7717
7706
  }
7718
- .utrecht-html a:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
7719
- box-shadow: none;
7720
- outline-style: revert;
7721
- }
7722
7707
  .utrecht-html a[href^="tel:" i] {
7723
7708
  white-space: nowrap;
7724
7709
  }
@@ -7750,24 +7735,9 @@
7750
7735
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
7751
7736
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
7752
7737
  }
7753
- .utrecht-html p.lead {
7754
- color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
7755
- font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
7756
- font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
7757
- line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
7758
- }
7759
7738
  .utrecht-html * ~ p {
7760
7739
  --utrecht-space-around: 1;
7761
7740
  }
7762
- .utrecht-html p:has(> small:only-child) {
7763
- color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
7764
- font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
7765
- font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
7766
- line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
7767
- }
7768
- .utrecht-html p > small:only-child {
7769
- font-size: inherit;
7770
- }
7771
7741
  .utrecht-html pre:has(> code:only-child) {
7772
7742
  background-color: var(--utrecht-code-background-color);
7773
7743
  color: var(--utrecht-code-color);
@@ -7872,10 +7842,19 @@
7872
7842
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
7873
7843
  }
7874
7844
  .utrecht-html input[type=radio i]:disabled {
7875
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
7876
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
7877
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
7878
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
7845
+ --_utrecht-radio-button-background-color: var(
7846
+ --utrecht-radio-button-disabled-background-color,
7847
+ var(--utrecht-radio-button-background-color)
7848
+ );
7849
+ --_utrecht-radio-button-border-color: var(
7850
+ --utrecht-radio-button-disabled-border-color,
7851
+ var(--utrecht-radio-button-border-color)
7852
+ );
7853
+ --_utrecht-radio-button-border-width: var(
7854
+ --utrecht-radio-button-disabled-border-width,
7855
+ var(--utrecht-radio-button-border-width)
7856
+ );
7857
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
7879
7858
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
7880
7859
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
7881
7860
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -7972,6 +7951,7 @@
7972
7951
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
7973
7952
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
7974
7953
  width: 100%;
7954
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
7975
7955
  min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
7976
7956
  min-width: var(--utrecht-pointer-target-min-size, 44px);
7977
7957
  max-width: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -7989,6 +7969,8 @@
7989
7969
  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))));
7990
7970
  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))));
7991
7971
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
7972
+ }
7973
+ .utrecht-html select[prince-xml-ignore-pseudo-class-focus-visible] {
7992
7974
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
7993
7975
  var(--utrecht-focus-inverse-outline-color, transparent);
7994
7976
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -7997,10 +7979,6 @@
7997
7979
  outline-style: var(--utrecht-focus-outline-style, revert);
7998
7980
  outline-width: var(--utrecht-focus-outline-width, revert);
7999
7981
  }
8000
- .utrecht-html select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8001
- box-shadow: none;
8002
- outline-style: revert;
8003
- }
8004
7982
  .utrecht-html select:disabled {
8005
7983
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
8006
7984
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -8175,6 +8153,8 @@
8175
8153
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8176
8154
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8177
8155
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8156
+ }
8157
+ .utrecht-html textarea[prince-xml-ignore-pseudo-class-focus-visible] {
8178
8158
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
8179
8159
  var(--utrecht-focus-inverse-outline-color, transparent);
8180
8160
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -8183,10 +8163,6 @@
8183
8163
  outline-style: var(--utrecht-focus-outline-style, revert);
8184
8164
  outline-width: var(--utrecht-focus-outline-width, revert);
8185
8165
  }
8186
- .utrecht-html textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8187
- box-shadow: none;
8188
- outline-style: revert;
8189
- }
8190
8166
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
8191
8167
  --_utrecht-textarea-border-width: var(
8192
8168
  --utrecht-textarea-invalid-border-width,
@@ -8297,6 +8273,20 @@
8297
8273
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8298
8274
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8299
8275
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8276
+ }
8277
+ .utrecht-html input:not([type])[prince-xml-ignore-pseudo-class-focus-visible],
8278
+ .utrecht-html input[type=date i][prince-xml-ignore-pseudo-class-focus-visible],
8279
+ .utrecht-html input[type=datetime-local i][prince-xml-ignore-pseudo-class-focus-visible],
8280
+ .utrecht-html input[type=email i][prince-xml-ignore-pseudo-class-focus-visible],
8281
+ .utrecht-html input[type=month i][prince-xml-ignore-pseudo-class-focus-visible],
8282
+ .utrecht-html input[type=number i][prince-xml-ignore-pseudo-class-focus-visible],
8283
+ .utrecht-html input[type=password i][prince-xml-ignore-pseudo-class-focus-visible],
8284
+ .utrecht-html input[type=search i][prince-xml-ignore-pseudo-class-focus-visible],
8285
+ .utrecht-html input[type=tel i][prince-xml-ignore-pseudo-class-focus-visible],
8286
+ .utrecht-html input[type=text i][prince-xml-ignore-pseudo-class-focus-visible],
8287
+ .utrecht-html input[type=time i][prince-xml-ignore-pseudo-class-focus-visible],
8288
+ .utrecht-html input[type=url i][prince-xml-ignore-pseudo-class-focus-visible],
8289
+ .utrecht-html input[type=week i][prince-xml-ignore-pseudo-class-focus-visible] {
8300
8290
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
8301
8291
  var(--utrecht-focus-inverse-outline-color, transparent);
8302
8292
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -8305,22 +8295,6 @@
8305
8295
  outline-style: var(--utrecht-focus-outline-style, revert);
8306
8296
  outline-width: var(--utrecht-focus-outline-width, revert);
8307
8297
  }
8308
- .utrecht-html input:not([type]):focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8309
- .utrecht-html input[type=date i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8310
- .utrecht-html input[type=datetime-local i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8311
- .utrecht-html input[type=email i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8312
- .utrecht-html input[type=month i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8313
- .utrecht-html input[type=number i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8314
- .utrecht-html input[type=password i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8315
- .utrecht-html input[type=search i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8316
- .utrecht-html input[type=tel i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8317
- .utrecht-html input[type=text i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8318
- .utrecht-html input[type=time i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8319
- .utrecht-html input[type=url i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
8320
- .utrecht-html input[type=week i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
8321
- box-shadow: none;
8322
- outline-style: revert;
8323
- }
8324
8298
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
8325
8299
  .utrecht-html input[type=date i]:invalid,
8326
8300
  .utrecht-html input[type=date i][aria-invalid=true],
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "5.2.0",
2
+ "version": "6.0.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",
@@ -26,7 +26,7 @@
26
26
  "rimraf": "5.0.7",
27
27
  "rollup": "4.18.0",
28
28
  "rollup-plugin-postcss": "4.0.2",
29
- "@utrecht/components": "7.2.0",
29
+ "@utrecht/components": "7.3.0",
30
30
  "@utrecht/html-content-css": "1.1.0"
31
31
  },
32
32
  "main": "dist/index.css",