@utrecht/component-library-css 1.0.0-alpha.500 → 1.0.0-alpha.502

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 (3) hide show
  1. package/dist/html.css +132 -43
  2. package/dist/index.css +241 -73
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -654,6 +654,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
654
654
  padding-inline-end: var(--utrecht-button-padding-inline-end);
655
655
  padding-inline-start: var(--utrecht-button-padding-inline-start);
656
656
  text-transform: var(--utrecht-button-text-transform);
657
+ -webkit-user-select: none;
657
658
  user-select: none;
658
659
  margin-block-end: var(--utrecht-button-margin-block-end);
659
660
  margin-block-start: var(--utrecht-button-margin-block-start);
@@ -713,6 +714,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
713
714
  margin-inline-end: 0;
714
715
  margin-inline-start: 0;
715
716
  cursor: var(--utrecht-action-activate-cursor, revert);
717
+ -webkit-user-select: none;
716
718
  user-select: none;
717
719
  }
718
720
  .utrecht-html input[type=checkbox i]:disabled {
@@ -1073,6 +1075,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1073
1075
  display: contents;
1074
1076
  }
1075
1077
  .utrecht-html input[type=radio i] {
1078
+ /*
1079
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
1080
+ * With a 0% gradient, the circle will have jagged edges.
1081
+ */
1076
1082
  -webkit-appearance: none;
1077
1083
  -moz-appearance: none;
1078
1084
  appearance: none;
@@ -1080,48 +1086,114 @@ however browsers don't seem to have implemented great looking supixel tweening y
1080
1086
  margin-block-start: 0;
1081
1087
  margin-inline-end: 0;
1082
1088
  margin-inline-start: 0;
1083
- background-color: var(--utrecht-radio-button-background-color);
1089
+ --_utrecht-radio-button-background-color: var(
1090
+ --_utrecht-radio-button-interactive-background-color,
1091
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
1092
+ );
1093
+ --_utrecht-radio-button-border-color: var(
1094
+ --_utrecht-radio-button-interactive-border-color,
1095
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
1096
+ );
1097
+ --_utrecht-radio-button-border-width: var(
1098
+ --_utrecht-radio-button-interactive-border-width,
1099
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
1100
+ );
1101
+ --_utrecht-radio-button-color: var(
1102
+ --_utrecht-radio-button-interactive-color,
1103
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
1104
+ );
1105
+ --_utrecht-radio-button-icon-size: 0;
1106
+ background-color: var(--_utrecht-radio-button-background-color);
1107
+ background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
1084
1108
  background-position: center;
1085
1109
  background-repeat: no-repeat;
1086
1110
  background-size: contain;
1087
- border-color: var(--utrecht-radio-button-border-color);
1111
+ block-size: var(--utrecht-radio-button-size, 1em);
1112
+ border-color: var(--_utrecht-radio-button-border-color);
1088
1113
  border-radius: 50%;
1089
1114
  border-style: solid;
1090
- border-width: var(--utrecht-radio-button-border-width);
1115
+ border-width: var(--_utrecht-radio-button-border-width);
1091
1116
  cursor: var(--utrecht-action-activate-cursor);
1092
- height: var(--utrecht-radio-button-size);
1117
+ inline-size: var(--utrecht-radio-button-size, 1em);
1093
1118
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1094
1119
  -webkit-print-color-adjust: exact;
1095
1120
  print-color-adjust: exact;
1121
+ -webkit-user-select: none;
1096
1122
  user-select: none;
1097
1123
  vertical-align: top;
1098
- width: var(--utrecht-radio-button-size);
1124
+ /* override the `:focus` selector above */
1125
+ /* stylelint-disable-next-line no-descending-specificity */
1126
+ }
1127
+ .utrecht-html input[type=radio i]:checked {
1128
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
1129
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
1130
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
1131
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
1132
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
1133
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
1134
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
1135
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
1136
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
1137
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
1138
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
1139
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
1140
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
1141
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
1142
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
1143
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
1144
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
1099
1145
  }
1100
1146
  .utrecht-html input[type=radio i]:disabled {
1101
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1102
- border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
1103
- color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
1147
+ /*
1148
+ * The disabled radio button should have:
1149
+ * - should have no active effect
1150
+ * - should have no focus effect
1151
+ * - should have no hover effect
1152
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
1153
+ */
1154
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
1155
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
1156
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
1157
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
1158
+ /* no focus effect */
1159
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
1160
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
1161
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
1162
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
1163
+ /* no active effect */
1164
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
1165
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
1166
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
1167
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
1168
+ /* no hover effect */
1169
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
1170
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
1171
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
1172
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
1104
1173
  cursor: var(--utrecht-action-disabled-cursor);
1105
1174
  }
1106
- .utrecht-html input[type=radio i]:disabled:checked {
1107
- background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
1108
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1109
- }
1110
- .utrecht-html input[type=radio i]:disabled:active {
1111
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1112
- }
1113
- .utrecht-html input[type=radio i]:hover {
1114
- background-color: var(--utrecht-radio-button-hover-background-color, var(--utrecht-radio-button-background-color));
1115
- border-color: var(--utrecht-radio-button-hover-border-color, var(--utrecht-radio-button-border-color));
1116
- border-width: var(--utrecht-radio-button-hover-border-width, var(--utrecht-radio-button-border-width));
1117
- color: var(--utrecht-radio-button-hover-color, var(--utrecht-radio-button-color));
1175
+ .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1176
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
1177
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
1178
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
1118
1179
  }
1119
- .utrecht-html input[type=radio i]:focus {
1120
- background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
1121
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
1122
- border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
1123
- border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
1124
- color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
1180
+ .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
1181
+ --_utrecht-radio-button-interactive-background-color: var(
1182
+ --utrecht-radio-button-focus-background-color,
1183
+ var(--utrecht-radio-button-focus-background-color)
1184
+ );
1185
+ --_utrecht-radio-button-interactive-border-color: var(
1186
+ --utrecht-radio-button-focus-border-color,
1187
+ var(--utrecht-radio-button-focus-border-color)
1188
+ );
1189
+ --_utrecht-radio-button-interactive-border-width: var(
1190
+ --utrecht-radio-button-focus-border-width,
1191
+ var(--utrecht-radio-button-focus-border-width)
1192
+ );
1193
+ --_utrecht-radio-button-interactive-color: var(
1194
+ --utrecht-radio-button-focus-color,
1195
+ var(--utrecht-radio-button-focus-color)
1196
+ );
1125
1197
  }
1126
1198
  .utrecht-html input[type=radio i]:focus-visible {
1127
1199
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
@@ -1136,24 +1208,41 @@ however browsers don't seem to have implemented great looking supixel tweening y
1136
1208
  outline-style: var(--utrecht-focus-outline-style, revert);
1137
1209
  outline-width: var(--utrecht-focus-outline-width, revert);
1138
1210
  }
1139
- .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1140
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
1141
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
1142
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
1143
- }
1144
- .utrecht-html input[type=radio i]:active {
1145
- background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
1146
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
1147
- border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
1148
- border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
1149
- color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
1211
+ .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
1212
+ --_utrecht-radio-button-interactive-background-color: var(
1213
+ --_utrecht-radio-button-state-hover-background-color,
1214
+ var(--utrecht-radio-button-hover-background-color)
1215
+ );
1216
+ --_utrecht-radio-button-interactive-border-color: var(
1217
+ --_utrecht-radio-button-state-hover-border-color,
1218
+ var(--utrecht-radio-button-hover-border-color)
1219
+ );
1220
+ --_utrecht-radio-button-interactive-border-width: var(
1221
+ --_utrecht-radio-button-state-hover-border-width,
1222
+ var(--utrecht-radio-button-hover-border-width)
1223
+ );
1224
+ --_utrecht-radio-button-interactive-color: var(
1225
+ --_utrecht-radio-button-state-hover-color,
1226
+ var(--utrecht-radio-button-hover-color)
1227
+ );
1150
1228
  }
1151
- .utrecht-html input[type=radio i]:checked {
1152
- background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
1153
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
1154
- border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
1155
- border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
1156
- color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
1229
+ .utrecht-html input[type=radio i]:active:not([aria-disabled=true], :disabled) {
1230
+ --_utrecht-radio-button-interactive-background-color: var(
1231
+ --_utrecht-radio-button-state-active-background-color,
1232
+ var(--utrecht-radio-button-active-background-color)
1233
+ );
1234
+ --_utrecht-radio-button-interactive-border-color: var(
1235
+ --_utrecht-radio-button-state-active-border-color,
1236
+ var(--utrecht-radio-button-active-border-color)
1237
+ );
1238
+ --_utrecht-radio-button-interactive-border-width: var(
1239
+ --_utrecht-radio-button-state-active-border-width,
1240
+ var(--utrecht-radio-button-active-border-width)
1241
+ );
1242
+ --_utrecht-radio-button-interactive-color: var(
1243
+ --_utrecht-radio-button-state-active-color,
1244
+ var(--utrecht-radio-button-active-color)
1245
+ );
1157
1246
  }
1158
1247
  .utrecht-html select {
1159
1248
  -moz-appearance: none;
package/dist/index.css CHANGED
@@ -220,6 +220,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
220
220
  background-color: var(--utrecht-backdrop-background-color);
221
221
  color: var(--utrecht-backdrop-color);
222
222
  opacity: var(--_utrecht-backdrop-opacity);
223
+ -webkit-user-select: none;
223
224
  user-select: none;
224
225
  }
225
226
  @keyframes utrecht-backdrop-fade-in {
@@ -491,6 +492,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
491
492
  background-color: var(--utrecht-backdrop-background-color);
492
493
  color: var(--utrecht-backdrop-color);
493
494
  opacity: var(--_utrecht-backdrop-opacity);
495
+ -webkit-user-select: none;
494
496
  user-select: none;
495
497
  bottom: 0;
496
498
  display: block;
@@ -943,6 +945,7 @@ ol.utrecht-breadcrumb__list {
943
945
  padding-inline-end: var(--utrecht-button-padding-inline-end);
944
946
  padding-inline-start: var(--utrecht-button-padding-inline-start);
945
947
  text-transform: var(--utrecht-button-text-transform);
948
+ -webkit-user-select: none;
946
949
  user-select: none;
947
950
  }
948
951
 
@@ -1569,13 +1572,16 @@ ol.utrecht-breadcrumb__list {
1569
1572
  */
1570
1573
  .utrecht-color-sample {
1571
1574
  background-color: var(--utrecht-color-sample-background-color, currentColor);
1572
- block-size: 2em;
1575
+ block-size: var(--utrecht-color-sample-block-size, 2em);
1573
1576
  border-color: var(--utrecht-color-sample-border-color, var(--utrecht-color-sample-default-border-color));
1577
+ border-radius: var(--utrecht-color-sample-border-radius, 0);
1574
1578
  border-style: solid;
1575
1579
  border-width: var(--utrecht-color-sample-border-width, 0);
1576
1580
  box-sizing: border-box;
1577
1581
  display: inline-block;
1578
- inline-size: 2em;
1582
+ inline-size: var(--utrecht-color-sample-inline-size, 2em);
1583
+ -webkit-print-color-adjust: exact;
1584
+ print-color-adjust: exact;
1579
1585
  }
1580
1586
  @media (forced-colors: active) {
1581
1587
  .utrecht-color-sample {
@@ -1817,6 +1823,7 @@ ol.utrecht-breadcrumb__list {
1817
1823
  padding-inline-end: var(--utrecht-button-padding-inline-end);
1818
1824
  padding-inline-start: var(--utrecht-button-padding-inline-start);
1819
1825
  text-transform: var(--utrecht-button-text-transform);
1826
+ -webkit-user-select: none;
1820
1827
  user-select: none;
1821
1828
  cursor: var(--utrecht-action-navigate-cursor, pointer);
1822
1829
  text-decoration: none;
@@ -1989,6 +1996,7 @@ ol.utrecht-breadcrumb__list {
1989
1996
  margin-inline-end: 0;
1990
1997
  margin-inline-start: 0;
1991
1998
  cursor: var(--utrecht-action-activate-cursor, revert);
1999
+ -webkit-user-select: none;
1992
2000
  user-select: none;
1993
2001
  }
1994
2002
 
@@ -2634,6 +2642,7 @@ ol.utrecht-breadcrumb__list {
2634
2642
  padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
2635
2643
  padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
2636
2644
  position: relative;
2645
+ -webkit-user-select: none;
2637
2646
  user-select: none;
2638
2647
  width: var(--utrecht-form-toggle-width, 6em);
2639
2648
  }
@@ -3174,6 +3183,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3174
3183
  padding-inline-end: var(--utrecht-button-padding-inline-end);
3175
3184
  padding-inline-start: var(--utrecht-button-padding-inline-start);
3176
3185
  text-transform: var(--utrecht-button-text-transform);
3186
+ -webkit-user-select: none;
3177
3187
  user-select: none;
3178
3188
  }
3179
3189
 
@@ -4390,6 +4400,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
4390
4400
  /* stylelint-disable-next-line block-no-empty */
4391
4401
  /* stylelint-disable-next-line block-no-empty */
4392
4402
  .utrecht-radio-button {
4403
+ /*
4404
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
4405
+ * With a 0% gradient, the circle will have jagged edges.
4406
+ */
4393
4407
  -webkit-appearance: none;
4394
4408
  -moz-appearance: none;
4395
4409
  appearance: none;
@@ -4397,46 +4411,99 @@ however browsers don't seem to have implemented great looking supixel tweening y
4397
4411
  margin-block-start: 0;
4398
4412
  margin-inline-end: 0;
4399
4413
  margin-inline-start: 0;
4400
- background-color: var(--utrecht-radio-button-background-color);
4414
+ --_utrecht-radio-button-background-color: var(
4415
+ --_utrecht-radio-button-interactive-background-color,
4416
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
4417
+ );
4418
+ --_utrecht-radio-button-border-color: var(
4419
+ --_utrecht-radio-button-interactive-border-color,
4420
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
4421
+ );
4422
+ --_utrecht-radio-button-border-width: var(
4423
+ --_utrecht-radio-button-interactive-border-width,
4424
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
4425
+ );
4426
+ --_utrecht-radio-button-color: var(
4427
+ --_utrecht-radio-button-interactive-color,
4428
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
4429
+ );
4430
+ --_utrecht-radio-button-icon-size: 0;
4431
+ background-color: var(--_utrecht-radio-button-background-color);
4432
+ background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
4401
4433
  background-position: center;
4402
4434
  background-repeat: no-repeat;
4403
4435
  background-size: contain;
4404
- border-color: var(--utrecht-radio-button-border-color);
4436
+ block-size: var(--utrecht-radio-button-size, 1em);
4437
+ border-color: var(--_utrecht-radio-button-border-color);
4405
4438
  border-radius: 50%;
4406
4439
  border-style: solid;
4407
- border-width: var(--utrecht-radio-button-border-width);
4440
+ border-width: var(--_utrecht-radio-button-border-width);
4408
4441
  cursor: var(--utrecht-action-activate-cursor);
4409
- height: var(--utrecht-radio-button-size);
4442
+ inline-size: var(--utrecht-radio-button-size, 1em);
4410
4443
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
4411
4444
  -webkit-print-color-adjust: exact;
4412
4445
  print-color-adjust: exact;
4446
+ -webkit-user-select: none;
4413
4447
  user-select: none;
4414
4448
  vertical-align: top;
4415
- width: var(--utrecht-radio-button-size);
4416
4449
  }
4417
4450
 
4418
4451
  .utrecht-radio-button--checked {
4419
- background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
4420
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4421
- border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
4422
- border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
4423
- color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
4424
- }
4425
-
4426
- .utrecht-radio-button--active {
4427
- background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
4428
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4429
- border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
4430
- border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
4431
- color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
4452
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
4453
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
4454
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
4455
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
4456
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
4457
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
4458
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
4459
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
4460
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
4461
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
4462
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
4463
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
4464
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
4465
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
4466
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
4467
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
4468
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4469
+ }
4470
+
4471
+ .utrecht-radio-button--hover {
4472
+ --_utrecht-radio-button-interactive-background-color: var(
4473
+ --_utrecht-radio-button-state-hover-background-color,
4474
+ var(--utrecht-radio-button-hover-background-color)
4475
+ );
4476
+ --_utrecht-radio-button-interactive-border-color: var(
4477
+ --_utrecht-radio-button-state-hover-border-color,
4478
+ var(--utrecht-radio-button-hover-border-color)
4479
+ );
4480
+ --_utrecht-radio-button-interactive-border-width: var(
4481
+ --_utrecht-radio-button-state-hover-border-width,
4482
+ var(--utrecht-radio-button-hover-border-width)
4483
+ );
4484
+ --_utrecht-radio-button-interactive-color: var(
4485
+ --_utrecht-radio-button-state-hover-color,
4486
+ var(--utrecht-radio-button-hover-color)
4487
+ );
4432
4488
  }
4433
4489
 
4434
4490
  .utrecht-radio-button--focus {
4435
- background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
4436
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4437
- border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
4438
- border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
4439
- color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
4491
+ --_utrecht-radio-button-interactive-background-color: var(
4492
+ --utrecht-radio-button-focus-background-color,
4493
+ var(--utrecht-radio-button-focus-background-color)
4494
+ );
4495
+ --_utrecht-radio-button-interactive-border-color: var(
4496
+ --utrecht-radio-button-focus-border-color,
4497
+ var(--utrecht-radio-button-focus-border-color)
4498
+ );
4499
+ --_utrecht-radio-button-interactive-border-width: var(
4500
+ --utrecht-radio-button-focus-border-width,
4501
+ var(--utrecht-radio-button-focus-border-width)
4502
+ );
4503
+ --_utrecht-radio-button-interactive-color: var(
4504
+ --utrecht-radio-button-focus-color,
4505
+ var(--utrecht-radio-button-focus-color)
4506
+ );
4440
4507
  }
4441
4508
 
4442
4509
  .utrecht-radio-button--focus-visible {
@@ -4453,19 +4520,54 @@ however browsers don't seem to have implemented great looking supixel tweening y
4453
4520
  outline-width: var(--utrecht-focus-outline-width, revert);
4454
4521
  }
4455
4522
 
4523
+ .utrecht-radio-button--active {
4524
+ --_utrecht-radio-button-interactive-background-color: var(
4525
+ --_utrecht-radio-button-state-active-background-color,
4526
+ var(--utrecht-radio-button-active-background-color)
4527
+ );
4528
+ --_utrecht-radio-button-interactive-border-color: var(
4529
+ --_utrecht-radio-button-state-active-border-color,
4530
+ var(--utrecht-radio-button-active-border-color)
4531
+ );
4532
+ --_utrecht-radio-button-interactive-border-width: var(
4533
+ --_utrecht-radio-button-state-active-border-width,
4534
+ var(--utrecht-radio-button-active-border-width)
4535
+ );
4536
+ --_utrecht-radio-button-interactive-color: var(
4537
+ --_utrecht-radio-button-state-active-color,
4538
+ var(--utrecht-radio-button-active-color)
4539
+ );
4540
+ }
4541
+
4456
4542
  .utrecht-radio-button--disabled {
4457
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4458
- border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
4459
- color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4543
+ /*
4544
+ * The disabled radio button should have:
4545
+ * - should have no active effect
4546
+ * - should have no focus effect
4547
+ * - should have no hover effect
4548
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
4549
+ */
4550
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4551
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4552
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4553
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4554
+ /* no focus effect */
4555
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4556
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4557
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
4558
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
4559
+ /* no active effect */
4560
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
4561
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
4562
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
4563
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
4564
+ /* no hover effect */
4565
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
4566
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
4567
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
4568
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
4460
4569
  cursor: var(--utrecht-action-disabled-cursor);
4461
4570
  }
4462
- .utrecht-radio-button--disabled:checked {
4463
- background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
4464
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4465
- }
4466
- .utrecht-radio-button--disabled:active {
4467
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4468
- }
4469
4571
 
4470
4572
  .utrecht-radio-button--invalid {
4471
4573
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
@@ -4473,31 +4575,80 @@ however browsers don't seem to have implemented great looking supixel tweening y
4473
4575
  color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4474
4576
  }
4475
4577
 
4476
- .utrecht-radio-button--html-input:disabled {
4477
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4478
- border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
4479
- color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4480
- cursor: var(--utrecht-action-disabled-cursor);
4578
+ .utrecht-radio-button--html-input {
4579
+ /* override the `:focus` selector above */
4580
+ /* stylelint-disable-next-line no-descending-specificity */
4481
4581
  }
4482
- .utrecht-radio-button--html-input:disabled:checked {
4483
- background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
4484
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4582
+ .utrecht-radio-button--html-input:checked {
4583
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
4584
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
4585
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
4586
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
4587
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
4588
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
4589
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
4590
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
4591
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
4592
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
4593
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
4594
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
4595
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
4596
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
4597
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
4598
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
4599
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4485
4600
  }
4486
- .utrecht-radio-button--html-input:disabled:active {
4487
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4601
+ .utrecht-radio-button--html-input:disabled {
4602
+ /*
4603
+ * The disabled radio button should have:
4604
+ * - should have no active effect
4605
+ * - should have no focus effect
4606
+ * - should have no hover effect
4607
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
4608
+ */
4609
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4610
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4611
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4612
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4613
+ /* no focus effect */
4614
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4615
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4616
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
4617
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
4618
+ /* no active effect */
4619
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
4620
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
4621
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
4622
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
4623
+ /* no hover effect */
4624
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
4625
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
4626
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
4627
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
4628
+ cursor: var(--utrecht-action-disabled-cursor);
4488
4629
  }
4489
- .utrecht-radio-button--html-input:hover {
4490
- background-color: var(--utrecht-radio-button-hover-background-color, var(--utrecht-radio-button-background-color));
4491
- border-color: var(--utrecht-radio-button-hover-border-color, var(--utrecht-radio-button-border-color));
4492
- border-width: var(--utrecht-radio-button-hover-border-width, var(--utrecht-radio-button-border-width));
4493
- color: var(--utrecht-radio-button-hover-color, var(--utrecht-radio-button-color));
4630
+ .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
4631
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
4632
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
4633
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4494
4634
  }
4495
- .utrecht-radio-button--html-input:focus {
4496
- background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
4497
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4498
- border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
4499
- border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
4500
- color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
4635
+ .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
4636
+ --_utrecht-radio-button-interactive-background-color: var(
4637
+ --utrecht-radio-button-focus-background-color,
4638
+ var(--utrecht-radio-button-focus-background-color)
4639
+ );
4640
+ --_utrecht-radio-button-interactive-border-color: var(
4641
+ --utrecht-radio-button-focus-border-color,
4642
+ var(--utrecht-radio-button-focus-border-color)
4643
+ );
4644
+ --_utrecht-radio-button-interactive-border-width: var(
4645
+ --utrecht-radio-button-focus-border-width,
4646
+ var(--utrecht-radio-button-focus-border-width)
4647
+ );
4648
+ --_utrecht-radio-button-interactive-color: var(
4649
+ --utrecht-radio-button-focus-color,
4650
+ var(--utrecht-radio-button-focus-color)
4651
+ );
4501
4652
  }
4502
4653
  .utrecht-radio-button--html-input:focus-visible {
4503
4654
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
@@ -4512,24 +4663,41 @@ however browsers don't seem to have implemented great looking supixel tweening y
4512
4663
  outline-style: var(--utrecht-focus-outline-style, revert);
4513
4664
  outline-width: var(--utrecht-focus-outline-width, revert);
4514
4665
  }
4515
- .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
4516
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
4517
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
4518
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4519
- }
4520
- .utrecht-radio-button--html-input:active {
4521
- background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
4522
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4523
- border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
4524
- border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
4525
- color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
4666
+ .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
4667
+ --_utrecht-radio-button-interactive-background-color: var(
4668
+ --_utrecht-radio-button-state-hover-background-color,
4669
+ var(--utrecht-radio-button-hover-background-color)
4670
+ );
4671
+ --_utrecht-radio-button-interactive-border-color: var(
4672
+ --_utrecht-radio-button-state-hover-border-color,
4673
+ var(--utrecht-radio-button-hover-border-color)
4674
+ );
4675
+ --_utrecht-radio-button-interactive-border-width: var(
4676
+ --_utrecht-radio-button-state-hover-border-width,
4677
+ var(--utrecht-radio-button-hover-border-width)
4678
+ );
4679
+ --_utrecht-radio-button-interactive-color: var(
4680
+ --_utrecht-radio-button-state-hover-color,
4681
+ var(--utrecht-radio-button-hover-color)
4682
+ );
4526
4683
  }
4527
- .utrecht-radio-button--html-input:checked {
4528
- background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
4529
- background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
4530
- border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
4531
- border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
4532
- color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
4684
+ .utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
4685
+ --_utrecht-radio-button-interactive-background-color: var(
4686
+ --_utrecht-radio-button-state-active-background-color,
4687
+ var(--utrecht-radio-button-active-background-color)
4688
+ );
4689
+ --_utrecht-radio-button-interactive-border-color: var(
4690
+ --_utrecht-radio-button-state-active-border-color,
4691
+ var(--utrecht-radio-button-active-border-color)
4692
+ );
4693
+ --_utrecht-radio-button-interactive-border-width: var(
4694
+ --_utrecht-radio-button-state-active-border-width,
4695
+ var(--utrecht-radio-button-active-border-width)
4696
+ );
4697
+ --_utrecht-radio-button-interactive-color: var(
4698
+ --_utrecht-radio-button-state-active-color,
4699
+ var(--utrecht-radio-button-active-color)
4700
+ );
4533
4701
  }
4534
4702
 
4535
4703
  /**
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.500",
2
+ "version": "1.0.0-alpha.502",
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,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "3cd3ce25c556926ec7fc0abcc770927a180b4764"
29
+ "gitHead": "48bf97c959290b3ad03aa5b28092dac71c29a1b5"
30
30
  }