@utrecht/component-library-css 1.0.0-alpha.111 → 1.0.0-alpha.115

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 (5) hide show
  1. package/dist/bem.css +154 -46
  2. package/dist/html.css +222 -91
  3. package/dist/index.css +423 -169
  4. package/dist/root-theme.css +1 -1
  5. package/package.json +3 -3
package/dist/html.css CHANGED
@@ -113,7 +113,9 @@
113
113
  cursor: var(--utrecht-action-submit-cursor);
114
114
  }
115
115
 
116
- .utrecht-button--busy, .utrecht-html button[aria-busy=true] {
116
+ .utrecht-button--busy, .utrecht-html button[aria-busy=true],
117
+ .utrecht-html button[aria-disabled=true][aria-busy=true],
118
+ .utrecht-html button:disabled[aria-busy=true] {
117
119
  cursor: var(--utrecht-action-busy-cursor);
118
120
  }
119
121
 
@@ -121,27 +123,27 @@
121
123
  .utrecht-html input[type=reset i]:disabled,
122
124
  .utrecht-html input[type=submit i]:disabled,
123
125
  .utrecht-html button:disabled,
124
- .utrecht-button--disabled {
126
+ .utrecht-button--disabled,
127
+ .utrecht-html button[aria-disabled=true] {
125
128
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
126
129
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
127
130
  cursor: var(--utrecht-action-disabled-cursor);
128
131
  }
129
132
 
130
- .utrecht-button:active, .utrecht-html input[type=button i]:active,
131
- .utrecht-html input[type=reset i]:active,
132
- .utrecht-html input[type=submit i]:active,
133
- .utrecht-html button:active,
134
- .utrecht-button--active {
133
+ .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
134
+ .utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
135
+ .utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
136
+ .utrecht-button--active,
137
+ .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
135
138
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
136
139
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
137
140
  }
138
141
 
139
- .utrecht-button--focus-visible,
140
- .utrecht-button:focus-visible,
141
- .utrecht-html input[type=button i]:focus-visible,
142
- .utrecht-html input[type=reset i]:focus-visible,
143
- .utrecht-html input[type=submit i]:focus-visible,
144
- .utrecht-html button:focus-visible {
142
+ .utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
143
+ .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
144
+ .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
145
+ .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
146
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
145
147
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
146
148
  outline-color: var(--utrecht-focus-outline-color, transparent);
147
149
  outline-offset: 0;
@@ -149,25 +151,37 @@
149
151
  outline-width: var(--utrecht-focus-outline-width, 0);
150
152
  }
151
153
 
152
- .utrecht-button--focus, .utrecht-html button:focus,
153
- .utrecht-button:not(.utrecht-button--disabled):focus,
154
- .utrecht-html input[type=button i]:not(.utrecht-button--disabled):focus,
155
- .utrecht-html input[type=reset i]:not(.utrecht-button--disabled):focus,
156
- .utrecht-html input[type=submit i]:not(.utrecht-button--disabled):focus {
154
+ .utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
155
+ .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
156
+ .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
157
+ .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
157
158
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
158
159
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
159
160
  }
160
161
 
161
- .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
162
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled),
163
- .utrecht-html input[type=button i]:hover:not(:disabled):not(.utrecht-button--disabled),
164
- .utrecht-html input[type=reset i]:hover:not(:disabled):not(.utrecht-button--disabled),
165
- .utrecht-html input[type=submit i]:hover:not(:disabled):not(.utrecht-button--disabled) {
162
+ /* override the `:focus` selector above */
163
+ /* stylelint-disable-next-line no-descending-specificity */
164
+ .utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
165
+ .utrecht-html input[type=reset i]:focus:not(:focus-visible),
166
+ .utrecht-html input[type=submit i]:focus:not(:focus-visible),
167
+ .utrecht-html button:focus:not(:focus-visible) {
168
+ /* undo focus ring */
169
+ box-shadow: none;
170
+ outline-style: none;
171
+ }
172
+
173
+ .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
174
+ .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
175
+ .utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
176
+ .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
177
+ .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
166
178
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
167
179
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
168
180
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
169
181
  }
170
182
 
183
+ /* override the `:focus` selector above */
184
+ /* stylelint-disable-next-line no-descending-specificity */
171
185
  /**
172
186
  * @license EUPL-1.2
173
187
  * Copyright (c) 2021 Robbert Broersma
@@ -195,13 +209,26 @@
195
209
  cursor: var(--utrecht-action-disabled-cursor);
196
210
  }
197
211
 
198
- .utrecht-checkbox--focus-visible, .utrecht-checkbox--html-input:focus-visible, .utrecht-html input[type=checkbox i]:focus-visible {
212
+ .utrecht-checkbox--focus-visible {
213
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
214
+ outline-color: var(--utrecht-focus-outline-color, transparent);
215
+ outline-offset: 0;
216
+ outline-style: var(--utrecht-focus-outline-style, solid);
217
+ outline-width: var(--utrecht-focus-outline-width, 0);
218
+ }
219
+
220
+ .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
199
221
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
200
222
  outline-color: var(--utrecht-focus-outline-color, transparent);
201
223
  outline-offset: 0;
202
224
  outline-style: var(--utrecht-focus-outline-style, solid);
203
225
  outline-width: var(--utrecht-focus-outline-width, 0);
204
226
  }
227
+ .utrecht-checkbox--html-input:focus:not(:focus-visible), .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
228
+ /* undo focus ring */
229
+ box-shadow: none;
230
+ outline-style: none;
231
+ }
205
232
 
206
233
  /**
207
234
  * @license EUPL-1.2
@@ -598,7 +625,9 @@
598
625
  cursor: var(--utrecht-action-submit-cursor);
599
626
  }
600
627
 
601
- .utrecht-button--busy, .utrecht-html button[aria-busy=true] {
628
+ .utrecht-button--busy, .utrecht-html button[aria-busy=true],
629
+ .utrecht-html button[aria-disabled=true][aria-busy=true],
630
+ .utrecht-html button:disabled[aria-busy=true] {
602
631
  cursor: var(--utrecht-action-busy-cursor);
603
632
  }
604
633
 
@@ -606,27 +635,27 @@
606
635
  .utrecht-html input[type=reset i]:disabled,
607
636
  .utrecht-html input[type=submit i]:disabled,
608
637
  .utrecht-html button:disabled,
609
- .utrecht-button--disabled {
638
+ .utrecht-button--disabled,
639
+ .utrecht-html button[aria-disabled=true] {
610
640
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
611
641
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
612
642
  cursor: var(--utrecht-action-disabled-cursor);
613
643
  }
614
644
 
615
- .utrecht-button:active, .utrecht-html input[type=button i]:active,
616
- .utrecht-html input[type=reset i]:active,
617
- .utrecht-html input[type=submit i]:active,
618
- .utrecht-html button:active,
619
- .utrecht-button--active {
645
+ .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
646
+ .utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
647
+ .utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
648
+ .utrecht-button--active,
649
+ .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
620
650
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
621
651
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
622
652
  }
623
653
 
624
- .utrecht-button--focus-visible,
625
- .utrecht-button:focus-visible,
626
- .utrecht-html input[type=button i]:focus-visible,
627
- .utrecht-html input[type=reset i]:focus-visible,
628
- .utrecht-html input[type=submit i]:focus-visible,
629
- .utrecht-html button:focus-visible {
654
+ .utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
655
+ .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
656
+ .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
657
+ .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus-visible {
658
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
630
659
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
631
660
  outline-color: var(--utrecht-focus-outline-color, transparent);
632
661
  outline-offset: 0;
@@ -634,25 +663,37 @@
634
663
  outline-width: var(--utrecht-focus-outline-width, 0);
635
664
  }
636
665
 
637
- .utrecht-button--focus, .utrecht-html button:focus,
638
- .utrecht-button:not(.utrecht-button--disabled):focus,
639
- .utrecht-html input[type=button i]:not(.utrecht-button--disabled):focus,
640
- .utrecht-html input[type=reset i]:not(.utrecht-button--disabled):focus,
641
- .utrecht-html input[type=submit i]:not(.utrecht-button--disabled):focus {
666
+ .utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
667
+ .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
668
+ .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
669
+ .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
642
670
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
643
671
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
644
672
  }
645
673
 
646
- .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
647
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled),
648
- .utrecht-html input[type=button i]:hover:not(:disabled):not(.utrecht-button--disabled),
649
- .utrecht-html input[type=reset i]:hover:not(:disabled):not(.utrecht-button--disabled),
650
- .utrecht-html input[type=submit i]:hover:not(:disabled):not(.utrecht-button--disabled) {
674
+ /* override the `:focus` selector above */
675
+ /* stylelint-disable-next-line no-descending-specificity */
676
+ .utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
677
+ .utrecht-html input[type=reset i]:focus:not(:focus-visible),
678
+ .utrecht-html input[type=submit i]:focus:not(:focus-visible),
679
+ .utrecht-html button:focus:not(:focus-visible) {
680
+ /* undo focus ring */
681
+ box-shadow: none;
682
+ outline-style: none;
683
+ }
684
+
685
+ .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
686
+ .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
687
+ .utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
688
+ .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
689
+ .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
651
690
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
652
691
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
653
692
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
654
693
  }
655
694
 
695
+ /* override the `:focus` selector above */
696
+ /* stylelint-disable-next-line no-descending-specificity */
656
697
  /**
657
698
  * @license EUPL-1.2
658
699
  * Copyright (c) 2021 Robbert Broersma
@@ -680,7 +721,7 @@
680
721
  cursor: var(--utrecht-action-disabled-cursor);
681
722
  }
682
723
 
683
- .utrecht-checkbox--focus-visible, .utrecht-checkbox--html-input:focus-visible, .utrecht-html input[type=checkbox i]:focus-visible {
724
+ .utrecht-checkbox--focus-visible {
684
725
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
685
726
  outline-color: var(--utrecht-focus-outline-color, transparent);
686
727
  outline-offset: 0;
@@ -688,6 +729,19 @@
688
729
  outline-width: var(--utrecht-focus-outline-width, 0);
689
730
  }
690
731
 
732
+ .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
733
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
734
+ outline-color: var(--utrecht-focus-outline-color, transparent);
735
+ outline-offset: 0;
736
+ outline-style: var(--utrecht-focus-outline-style, solid);
737
+ outline-width: var(--utrecht-focus-outline-width, 0);
738
+ }
739
+ .utrecht-checkbox--html-input:focus:not(:focus-visible), .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
740
+ /* undo focus ring */
741
+ box-shadow: none;
742
+ outline-style: none;
743
+ }
744
+
691
745
  /**
692
746
  * @license EUPL-1.2
693
747
  * Copyright (c) 2021 Robbert Broersma
@@ -984,16 +1038,12 @@
984
1038
  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
985
1039
  }
986
1040
 
987
- .utrecht-link:focus,
988
- .utrecht-link--focus,
989
- .utrecht-html a:focus {
1041
+ .utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
990
1042
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
991
1043
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
992
1044
  }
993
1045
 
994
- .utrecht-link:focus-visible,
995
- .utrecht-link--focus-visible,
996
- .utrecht-html a:focus-visible {
1046
+ .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
997
1047
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
998
1048
  outline-color: var(--utrecht-focus-outline-color, transparent);
999
1049
  outline-offset: 0;
@@ -1001,12 +1051,24 @@
1001
1051
  outline-width: var(--utrecht-focus-outline-width, 0);
1002
1052
  }
1003
1053
 
1054
+ .utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
1055
+ /* undo focus ring */
1056
+ box-shadow: none;
1057
+ outline-style: none;
1058
+ }
1059
+
1004
1060
  /* stylelint-disable-next-line block-no-empty */
1005
1061
  /* stylelint-disable-next-line block-no-empty */
1006
1062
  .utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
1007
1063
  white-space: nowrap;
1008
1064
  }
1009
1065
 
1066
+ .utrecht-html a:focus:not(:focus-visible) {
1067
+ /* undo focus ring */
1068
+ box-shadow: none;
1069
+ outline-style: none;
1070
+ }
1071
+
1010
1072
  /**
1011
1073
  * @license EUPL-1.2
1012
1074
  * Copyright (c) 2021 Robbert Broersma
@@ -1096,7 +1158,7 @@
1096
1158
  cursor: var(--utrecht-action-disabled-cursor);
1097
1159
  }
1098
1160
 
1099
- .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus-visible, .utrecht-html input[type=radio i]:focus-visible {
1161
+ .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
1100
1162
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1101
1163
  outline-color: var(--utrecht-focus-outline-color, transparent);
1102
1164
  outline-offset: 0;
@@ -1104,6 +1166,12 @@
1104
1166
  outline-width: var(--utrecht-focus-outline-width, 0);
1105
1167
  }
1106
1168
 
1169
+ .utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
1170
+ /* undo focus ring */
1171
+ box-shadow: none;
1172
+ outline-style: none;
1173
+ }
1174
+
1107
1175
  /**
1108
1176
  * @license EUPL-1.2
1109
1177
  * Copyright (c) 2021 Robbert Broersma
@@ -1282,7 +1350,7 @@
1282
1350
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1283
1351
  }
1284
1352
 
1285
- .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus-visible, .utrecht-html textarea:focus-visible {
1353
+ .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
1286
1354
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1287
1355
  outline-color: var(--utrecht-focus-outline-color, transparent);
1288
1356
  outline-offset: 0;
@@ -1301,6 +1369,11 @@
1301
1369
  opacity: 100%;
1302
1370
  }
1303
1371
 
1372
+ .utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
1373
+ /* undo focus ring */
1374
+ box-shadow: none;
1375
+ outline-style: none;
1376
+ }
1304
1377
  /**
1305
1378
  * @license EUPL-1.2
1306
1379
  * Copyright (c) 2021 Robbert Broersma
@@ -1413,19 +1486,19 @@
1413
1486
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1414
1487
  }
1415
1488
 
1416
- .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus-visible, .utrecht-html input:focus-visible:not([type]),
1417
- .utrecht-html input[type=date i]:focus-visible,
1418
- .utrecht-html input[type=datetime-local i]:focus-visible,
1419
- .utrecht-html input[type=email i]:focus-visible,
1420
- .utrecht-html input[type=month i]:focus-visible,
1421
- .utrecht-html input[type=number i]:focus-visible,
1422
- .utrecht-html input[type=password i]:focus-visible,
1423
- .utrecht-html input[type=search i]:focus-visible,
1424
- .utrecht-html input[type=tel i]:focus-visible,
1425
- .utrecht-html input[type=text i]:focus-visible,
1426
- .utrecht-html input[type=time i]:focus-visible,
1427
- .utrecht-html input[type=url i]:focus-visible,
1428
- .utrecht-html input[type=week i]:focus-visible {
1489
+ .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
1490
+ .utrecht-html input[type=date i]:focus,
1491
+ .utrecht-html input[type=datetime-local i]:focus,
1492
+ .utrecht-html input[type=email i]:focus,
1493
+ .utrecht-html input[type=month i]:focus,
1494
+ .utrecht-html input[type=number i]:focus,
1495
+ .utrecht-html input[type=password i]:focus,
1496
+ .utrecht-html input[type=search i]:focus,
1497
+ .utrecht-html input[type=tel i]:focus,
1498
+ .utrecht-html input[type=text i]:focus,
1499
+ .utrecht-html input[type=time i]:focus,
1500
+ .utrecht-html input[type=url i]:focus,
1501
+ .utrecht-html input[type=week i]:focus {
1429
1502
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1430
1503
  outline-color: var(--utrecht-focus-outline-color, transparent);
1431
1504
  outline-offset: 0;
@@ -1502,6 +1575,23 @@
1502
1575
  font-variant-ligatures: none;
1503
1576
  }
1504
1577
 
1578
+ .utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
1579
+ .utrecht-html input[type=date i]:focus:not(:focus-visible),
1580
+ .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
1581
+ .utrecht-html input[type=email i]:focus:not(:focus-visible),
1582
+ .utrecht-html input[type=month i]:focus:not(:focus-visible),
1583
+ .utrecht-html input[type=number i]:focus:not(:focus-visible),
1584
+ .utrecht-html input[type=password i]:focus:not(:focus-visible),
1585
+ .utrecht-html input[type=search i]:focus:not(:focus-visible),
1586
+ .utrecht-html input[type=tel i]:focus:not(:focus-visible),
1587
+ .utrecht-html input[type=text i]:focus:not(:focus-visible),
1588
+ .utrecht-html input[type=time i]:focus:not(:focus-visible),
1589
+ .utrecht-html input[type=url i]:focus:not(:focus-visible),
1590
+ .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1591
+ /* undo focus ring */
1592
+ box-shadow: none;
1593
+ outline-style: none;
1594
+ }
1505
1595
  /**
1506
1596
  * @license EUPL-1.2
1507
1597
  * Copyright (c) 2021 Robbert Broersma
@@ -1583,16 +1673,12 @@
1583
1673
  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
1584
1674
  }
1585
1675
 
1586
- .utrecht-link:focus,
1587
- .utrecht-link--focus,
1588
- .utrecht-html a:focus {
1676
+ .utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
1589
1677
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1590
1678
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1591
1679
  }
1592
1680
 
1593
- .utrecht-link:focus-visible,
1594
- .utrecht-link--focus-visible,
1595
- .utrecht-html a:focus-visible {
1681
+ .utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
1596
1682
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1597
1683
  outline-color: var(--utrecht-focus-outline-color, transparent);
1598
1684
  outline-offset: 0;
@@ -1600,12 +1686,24 @@
1600
1686
  outline-width: var(--utrecht-focus-outline-width, 0);
1601
1687
  }
1602
1688
 
1689
+ .utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
1690
+ /* undo focus ring */
1691
+ box-shadow: none;
1692
+ outline-style: none;
1693
+ }
1694
+
1603
1695
  /* stylelint-disable-next-line block-no-empty */
1604
1696
  /* stylelint-disable-next-line block-no-empty */
1605
1697
  .utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
1606
1698
  white-space: nowrap;
1607
1699
  }
1608
1700
 
1701
+ .utrecht-html a:focus:not(:focus-visible) {
1702
+ /* undo focus ring */
1703
+ box-shadow: none;
1704
+ outline-style: none;
1705
+ }
1706
+
1609
1707
  /**
1610
1708
  * @license EUPL-1.2
1611
1709
  * Copyright (c) 2021 Robbert Broersma
@@ -1695,7 +1793,7 @@
1695
1793
  cursor: var(--utrecht-action-disabled-cursor);
1696
1794
  }
1697
1795
 
1698
- .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus-visible, .utrecht-html input[type=radio i]:focus-visible {
1796
+ .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
1699
1797
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1700
1798
  outline-color: var(--utrecht-focus-outline-color, transparent);
1701
1799
  outline-offset: 0;
@@ -1703,6 +1801,12 @@
1703
1801
  outline-width: var(--utrecht-focus-outline-width, 0);
1704
1802
  }
1705
1803
 
1804
+ .utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
1805
+ /* undo focus ring */
1806
+ box-shadow: none;
1807
+ outline-style: none;
1808
+ }
1809
+
1706
1810
  /**
1707
1811
  * @license EUPL-1.2
1708
1812
  * Copyright (c) 2021 Robbert Broersma
@@ -1757,7 +1861,7 @@
1757
1861
  color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1758
1862
  }
1759
1863
 
1760
- .utrecht-select--focus-visible, .utrecht-select--html-select:focus-visible, .utrecht-html select:focus-visible {
1864
+ .utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
1761
1865
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1762
1866
  outline-color: var(--utrecht-focus-outline-color, transparent);
1763
1867
  outline-offset: 0;
@@ -1775,6 +1879,11 @@
1775
1879
  .utrecht-select--html-select, .utrecht-html select {
1776
1880
  /* <select> does not support :read-only */
1777
1881
  }
1882
+ .utrecht-select--html-select:focus:not(:focus-visible), .utrecht-html select:focus:not(:focus-visible) {
1883
+ /* undo focus ring */
1884
+ box-shadow: none;
1885
+ outline-style: none;
1886
+ }
1778
1887
  /**
1779
1888
  * @license EUPL-1.2
1780
1889
  * Copyright (c) 2021 Robbert Broersma
@@ -1953,7 +2062,7 @@
1953
2062
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1954
2063
  }
1955
2064
 
1956
- .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus-visible, .utrecht-html textarea:focus-visible {
2065
+ .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
1957
2066
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1958
2067
  outline-color: var(--utrecht-focus-outline-color, transparent);
1959
2068
  outline-offset: 0;
@@ -1972,6 +2081,11 @@
1972
2081
  opacity: 100%;
1973
2082
  }
1974
2083
 
2084
+ .utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
2085
+ /* undo focus ring */
2086
+ box-shadow: none;
2087
+ outline-style: none;
2088
+ }
1975
2089
  /**
1976
2090
  * @license EUPL-1.2
1977
2091
  * Copyright (c) 2021 Robbert Broersma
@@ -2084,19 +2198,19 @@
2084
2198
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2085
2199
  }
2086
2200
 
2087
- .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus-visible, .utrecht-html input:focus-visible:not([type]),
2088
- .utrecht-html input[type=date i]:focus-visible,
2089
- .utrecht-html input[type=datetime-local i]:focus-visible,
2090
- .utrecht-html input[type=email i]:focus-visible,
2091
- .utrecht-html input[type=month i]:focus-visible,
2092
- .utrecht-html input[type=number i]:focus-visible,
2093
- .utrecht-html input[type=password i]:focus-visible,
2094
- .utrecht-html input[type=search i]:focus-visible,
2095
- .utrecht-html input[type=tel i]:focus-visible,
2096
- .utrecht-html input[type=text i]:focus-visible,
2097
- .utrecht-html input[type=time i]:focus-visible,
2098
- .utrecht-html input[type=url i]:focus-visible,
2099
- .utrecht-html input[type=week i]:focus-visible {
2201
+ .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
2202
+ .utrecht-html input[type=date i]:focus,
2203
+ .utrecht-html input[type=datetime-local i]:focus,
2204
+ .utrecht-html input[type=email i]:focus,
2205
+ .utrecht-html input[type=month i]:focus,
2206
+ .utrecht-html input[type=number i]:focus,
2207
+ .utrecht-html input[type=password i]:focus,
2208
+ .utrecht-html input[type=search i]:focus,
2209
+ .utrecht-html input[type=tel i]:focus,
2210
+ .utrecht-html input[type=text i]:focus,
2211
+ .utrecht-html input[type=time i]:focus,
2212
+ .utrecht-html input[type=url i]:focus,
2213
+ .utrecht-html input[type=week i]:focus {
2100
2214
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2101
2215
  outline-color: var(--utrecht-focus-outline-color, transparent);
2102
2216
  outline-offset: 0;
@@ -2173,6 +2287,23 @@
2173
2287
  font-variant-ligatures: none;
2174
2288
  }
2175
2289
 
2290
+ .utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
2291
+ .utrecht-html input[type=date i]:focus:not(:focus-visible),
2292
+ .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
2293
+ .utrecht-html input[type=email i]:focus:not(:focus-visible),
2294
+ .utrecht-html input[type=month i]:focus:not(:focus-visible),
2295
+ .utrecht-html input[type=number i]:focus:not(:focus-visible),
2296
+ .utrecht-html input[type=password i]:focus:not(:focus-visible),
2297
+ .utrecht-html input[type=search i]:focus:not(:focus-visible),
2298
+ .utrecht-html input[type=tel i]:focus:not(:focus-visible),
2299
+ .utrecht-html input[type=text i]:focus:not(:focus-visible),
2300
+ .utrecht-html input[type=time i]:focus:not(:focus-visible),
2301
+ .utrecht-html input[type=url i]:focus:not(:focus-visible),
2302
+ .utrecht-html input[type=week i]:focus:not(:focus-visible) {
2303
+ /* undo focus ring */
2304
+ box-shadow: none;
2305
+ outline-style: none;
2306
+ }
2176
2307
  /**
2177
2308
  * @license EUPL-1.2
2178
2309
  * Copyright (c) 2021 Robbert Broersma