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

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 +129 -43
  2. package/dist/index.css +228 -71
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -1073,6 +1073,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1073
1073
  display: contents;
1074
1074
  }
1075
1075
  .utrecht-html input[type=radio i] {
1076
+ /*
1077
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
1078
+ * With a 0% gradient, the circle will have jagged edges.
1079
+ */
1076
1080
  -webkit-appearance: none;
1077
1081
  -moz-appearance: none;
1078
1082
  appearance: none;
@@ -1080,48 +1084,113 @@ however browsers don't seem to have implemented great looking supixel tweening y
1080
1084
  margin-block-start: 0;
1081
1085
  margin-inline-end: 0;
1082
1086
  margin-inline-start: 0;
1083
- background-color: var(--utrecht-radio-button-background-color);
1087
+ --_utrecht-radio-button-background-color: var(
1088
+ --_utrecht-radio-button-interactive-background-color,
1089
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
1090
+ );
1091
+ --_utrecht-radio-button-border-color: var(
1092
+ --_utrecht-radio-button-interactive-border-color,
1093
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
1094
+ );
1095
+ --_utrecht-radio-button-border-width: var(
1096
+ --_utrecht-radio-button-interactive-border-width,
1097
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
1098
+ );
1099
+ --_utrecht-radio-button-color: var(
1100
+ --_utrecht-radio-button-interactive-color,
1101
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
1102
+ );
1103
+ --_utrecht-radio-button-icon-size: 0;
1104
+ background-color: var(--_utrecht-radio-button-background-color);
1105
+ 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
1106
  background-position: center;
1085
1107
  background-repeat: no-repeat;
1086
1108
  background-size: contain;
1087
- border-color: var(--utrecht-radio-button-border-color);
1109
+ block-size: var(--utrecht-radio-button-size, 1em);
1110
+ border-color: var(--_utrecht-radio-button-border-color);
1088
1111
  border-radius: 50%;
1089
1112
  border-style: solid;
1090
- border-width: var(--utrecht-radio-button-border-width);
1113
+ border-width: var(--_utrecht-radio-button-border-width);
1091
1114
  cursor: var(--utrecht-action-activate-cursor);
1092
- height: var(--utrecht-radio-button-size);
1115
+ inline-size: var(--utrecht-radio-button-size, 1em);
1093
1116
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1094
1117
  -webkit-print-color-adjust: exact;
1095
1118
  print-color-adjust: exact;
1096
1119
  user-select: none;
1097
1120
  vertical-align: top;
1098
- width: var(--utrecht-radio-button-size);
1121
+ /* override the `:focus` selector above */
1122
+ /* stylelint-disable-next-line no-descending-specificity */
1123
+ }
1124
+ .utrecht-html input[type=radio i]:checked {
1125
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
1126
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
1127
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
1128
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
1129
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
1130
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
1131
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
1132
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
1133
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
1134
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
1135
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
1136
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
1137
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
1138
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
1139
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
1140
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
1141
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
1099
1142
  }
1100
1143
  .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));
1144
+ /*
1145
+ * The disabled radio button should have:
1146
+ * - should have no active effect
1147
+ * - should have no focus effect
1148
+ * - should have no hover effect
1149
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
1150
+ */
1151
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
1152
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
1153
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
1154
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
1155
+ /* no focus effect */
1156
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
1157
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
1158
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
1159
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
1160
+ /* no active effect */
1161
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
1162
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
1163
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
1164
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
1165
+ /* no hover effect */
1166
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
1167
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
1168
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
1169
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
1104
1170
  cursor: var(--utrecht-action-disabled-cursor);
1105
1171
  }
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));
1172
+ .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1173
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
1174
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
1175
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
1118
1176
  }
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));
1177
+ .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
1178
+ --_utrecht-radio-button-interactive-background-color: var(
1179
+ --utrecht-radio-button-focus-background-color,
1180
+ var(--utrecht-radio-button-focus-background-color)
1181
+ );
1182
+ --_utrecht-radio-button-interactive-border-color: var(
1183
+ --utrecht-radio-button-focus-border-color,
1184
+ var(--utrecht-radio-button-focus-border-color)
1185
+ );
1186
+ --_utrecht-radio-button-interactive-border-width: var(
1187
+ --utrecht-radio-button-focus-border-width,
1188
+ var(--utrecht-radio-button-focus-border-width)
1189
+ );
1190
+ --_utrecht-radio-button-interactive-color: var(
1191
+ --utrecht-radio-button-focus-color,
1192
+ var(--utrecht-radio-button-focus-color)
1193
+ );
1125
1194
  }
1126
1195
  .utrecht-html input[type=radio i]:focus-visible {
1127
1196
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
@@ -1136,24 +1205,41 @@ however browsers don't seem to have implemented great looking supixel tweening y
1136
1205
  outline-style: var(--utrecht-focus-outline-style, revert);
1137
1206
  outline-width: var(--utrecht-focus-outline-width, revert);
1138
1207
  }
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));
1208
+ .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
1209
+ --_utrecht-radio-button-interactive-background-color: var(
1210
+ --_utrecht-radio-button-state-hover-background-color,
1211
+ var(--utrecht-radio-button-hover-background-color)
1212
+ );
1213
+ --_utrecht-radio-button-interactive-border-color: var(
1214
+ --_utrecht-radio-button-state-hover-border-color,
1215
+ var(--utrecht-radio-button-hover-border-color)
1216
+ );
1217
+ --_utrecht-radio-button-interactive-border-width: var(
1218
+ --_utrecht-radio-button-state-hover-border-width,
1219
+ var(--utrecht-radio-button-hover-border-width)
1220
+ );
1221
+ --_utrecht-radio-button-interactive-color: var(
1222
+ --_utrecht-radio-button-state-hover-color,
1223
+ var(--utrecht-radio-button-hover-color)
1224
+ );
1150
1225
  }
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));
1226
+ .utrecht-html input[type=radio i]:active:not([aria-disabled=true], :disabled) {
1227
+ --_utrecht-radio-button-interactive-background-color: var(
1228
+ --_utrecht-radio-button-state-active-background-color,
1229
+ var(--utrecht-radio-button-active-background-color)
1230
+ );
1231
+ --_utrecht-radio-button-interactive-border-color: var(
1232
+ --_utrecht-radio-button-state-active-border-color,
1233
+ var(--utrecht-radio-button-active-border-color)
1234
+ );
1235
+ --_utrecht-radio-button-interactive-border-width: var(
1236
+ --_utrecht-radio-button-state-active-border-width,
1237
+ var(--utrecht-radio-button-active-border-width)
1238
+ );
1239
+ --_utrecht-radio-button-interactive-color: var(
1240
+ --_utrecht-radio-button-state-active-color,
1241
+ var(--utrecht-radio-button-active-color)
1242
+ );
1157
1243
  }
1158
1244
  .utrecht-html select {
1159
1245
  -moz-appearance: none;
package/dist/index.css CHANGED
@@ -4390,6 +4390,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
4390
4390
  /* stylelint-disable-next-line block-no-empty */
4391
4391
  /* stylelint-disable-next-line block-no-empty */
4392
4392
  .utrecht-radio-button {
4393
+ /*
4394
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
4395
+ * With a 0% gradient, the circle will have jagged edges.
4396
+ */
4393
4397
  -webkit-appearance: none;
4394
4398
  -moz-appearance: none;
4395
4399
  appearance: none;
@@ -4397,46 +4401,98 @@ however browsers don't seem to have implemented great looking supixel tweening y
4397
4401
  margin-block-start: 0;
4398
4402
  margin-inline-end: 0;
4399
4403
  margin-inline-start: 0;
4400
- background-color: var(--utrecht-radio-button-background-color);
4404
+ --_utrecht-radio-button-background-color: var(
4405
+ --_utrecht-radio-button-interactive-background-color,
4406
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
4407
+ );
4408
+ --_utrecht-radio-button-border-color: var(
4409
+ --_utrecht-radio-button-interactive-border-color,
4410
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
4411
+ );
4412
+ --_utrecht-radio-button-border-width: var(
4413
+ --_utrecht-radio-button-interactive-border-width,
4414
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
4415
+ );
4416
+ --_utrecht-radio-button-color: var(
4417
+ --_utrecht-radio-button-interactive-color,
4418
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
4419
+ );
4420
+ --_utrecht-radio-button-icon-size: 0;
4421
+ background-color: var(--_utrecht-radio-button-background-color);
4422
+ 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
4423
  background-position: center;
4402
4424
  background-repeat: no-repeat;
4403
4425
  background-size: contain;
4404
- border-color: var(--utrecht-radio-button-border-color);
4426
+ block-size: var(--utrecht-radio-button-size, 1em);
4427
+ border-color: var(--_utrecht-radio-button-border-color);
4405
4428
  border-radius: 50%;
4406
4429
  border-style: solid;
4407
- border-width: var(--utrecht-radio-button-border-width);
4430
+ border-width: var(--_utrecht-radio-button-border-width);
4408
4431
  cursor: var(--utrecht-action-activate-cursor);
4409
- height: var(--utrecht-radio-button-size);
4432
+ inline-size: var(--utrecht-radio-button-size, 1em);
4410
4433
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
4411
4434
  -webkit-print-color-adjust: exact;
4412
4435
  print-color-adjust: exact;
4413
4436
  user-select: none;
4414
4437
  vertical-align: top;
4415
- width: var(--utrecht-radio-button-size);
4416
4438
  }
4417
4439
 
4418
4440
  .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));
4441
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
4442
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
4443
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
4444
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
4445
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
4446
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
4447
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
4448
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
4449
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
4450
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
4451
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
4452
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
4453
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
4454
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
4455
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
4456
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
4457
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4458
+ }
4459
+
4460
+ .utrecht-radio-button--hover {
4461
+ --_utrecht-radio-button-interactive-background-color: var(
4462
+ --_utrecht-radio-button-state-hover-background-color,
4463
+ var(--utrecht-radio-button-hover-background-color)
4464
+ );
4465
+ --_utrecht-radio-button-interactive-border-color: var(
4466
+ --_utrecht-radio-button-state-hover-border-color,
4467
+ var(--utrecht-radio-button-hover-border-color)
4468
+ );
4469
+ --_utrecht-radio-button-interactive-border-width: var(
4470
+ --_utrecht-radio-button-state-hover-border-width,
4471
+ var(--utrecht-radio-button-hover-border-width)
4472
+ );
4473
+ --_utrecht-radio-button-interactive-color: var(
4474
+ --_utrecht-radio-button-state-hover-color,
4475
+ var(--utrecht-radio-button-hover-color)
4476
+ );
4432
4477
  }
4433
4478
 
4434
4479
  .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));
4480
+ --_utrecht-radio-button-interactive-background-color: var(
4481
+ --utrecht-radio-button-focus-background-color,
4482
+ var(--utrecht-radio-button-focus-background-color)
4483
+ );
4484
+ --_utrecht-radio-button-interactive-border-color: var(
4485
+ --utrecht-radio-button-focus-border-color,
4486
+ var(--utrecht-radio-button-focus-border-color)
4487
+ );
4488
+ --_utrecht-radio-button-interactive-border-width: var(
4489
+ --utrecht-radio-button-focus-border-width,
4490
+ var(--utrecht-radio-button-focus-border-width)
4491
+ );
4492
+ --_utrecht-radio-button-interactive-color: var(
4493
+ --utrecht-radio-button-focus-color,
4494
+ var(--utrecht-radio-button-focus-color)
4495
+ );
4440
4496
  }
4441
4497
 
4442
4498
  .utrecht-radio-button--focus-visible {
@@ -4453,19 +4509,54 @@ however browsers don't seem to have implemented great looking supixel tweening y
4453
4509
  outline-width: var(--utrecht-focus-outline-width, revert);
4454
4510
  }
4455
4511
 
4512
+ .utrecht-radio-button--active {
4513
+ --_utrecht-radio-button-interactive-background-color: var(
4514
+ --_utrecht-radio-button-state-active-background-color,
4515
+ var(--utrecht-radio-button-active-background-color)
4516
+ );
4517
+ --_utrecht-radio-button-interactive-border-color: var(
4518
+ --_utrecht-radio-button-state-active-border-color,
4519
+ var(--utrecht-radio-button-active-border-color)
4520
+ );
4521
+ --_utrecht-radio-button-interactive-border-width: var(
4522
+ --_utrecht-radio-button-state-active-border-width,
4523
+ var(--utrecht-radio-button-active-border-width)
4524
+ );
4525
+ --_utrecht-radio-button-interactive-color: var(
4526
+ --_utrecht-radio-button-state-active-color,
4527
+ var(--utrecht-radio-button-active-color)
4528
+ );
4529
+ }
4530
+
4456
4531
  .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));
4532
+ /*
4533
+ * The disabled radio button should have:
4534
+ * - should have no active effect
4535
+ * - should have no focus effect
4536
+ * - should have no hover effect
4537
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
4538
+ */
4539
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4540
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4541
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4542
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4543
+ /* no focus effect */
4544
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4545
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4546
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
4547
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
4548
+ /* no active effect */
4549
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
4550
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
4551
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
4552
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
4553
+ /* no hover effect */
4554
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
4555
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
4556
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
4557
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
4460
4558
  cursor: var(--utrecht-action-disabled-cursor);
4461
4559
  }
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
4560
 
4470
4561
  .utrecht-radio-button--invalid {
4471
4562
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
@@ -4473,31 +4564,80 @@ however browsers don't seem to have implemented great looking supixel tweening y
4473
4564
  color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4474
4565
  }
4475
4566
 
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);
4567
+ .utrecht-radio-button--html-input {
4568
+ /* override the `:focus` selector above */
4569
+ /* stylelint-disable-next-line no-descending-specificity */
4481
4570
  }
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));
4571
+ .utrecht-radio-button--html-input:checked {
4572
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
4573
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
4574
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
4575
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
4576
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
4577
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
4578
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
4579
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
4580
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
4581
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
4582
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
4583
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
4584
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
4585
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
4586
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
4587
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
4588
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
4485
4589
  }
4486
- .utrecht-radio-button--html-input:disabled:active {
4487
- border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4590
+ .utrecht-radio-button--html-input:disabled {
4591
+ /*
4592
+ * The disabled radio button should have:
4593
+ * - should have no active effect
4594
+ * - should have no focus effect
4595
+ * - should have no hover effect
4596
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
4597
+ */
4598
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
4599
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
4600
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
4601
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
4602
+ /* no focus effect */
4603
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
4604
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
4605
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
4606
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
4607
+ /* no active effect */
4608
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
4609
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
4610
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
4611
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
4612
+ /* no hover effect */
4613
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
4614
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
4615
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
4616
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
4617
+ cursor: var(--utrecht-action-disabled-cursor);
4488
4618
  }
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));
4619
+ .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
4620
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
4621
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
4622
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4494
4623
  }
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));
4624
+ .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
4625
+ --_utrecht-radio-button-interactive-background-color: var(
4626
+ --utrecht-radio-button-focus-background-color,
4627
+ var(--utrecht-radio-button-focus-background-color)
4628
+ );
4629
+ --_utrecht-radio-button-interactive-border-color: var(
4630
+ --utrecht-radio-button-focus-border-color,
4631
+ var(--utrecht-radio-button-focus-border-color)
4632
+ );
4633
+ --_utrecht-radio-button-interactive-border-width: var(
4634
+ --utrecht-radio-button-focus-border-width,
4635
+ var(--utrecht-radio-button-focus-border-width)
4636
+ );
4637
+ --_utrecht-radio-button-interactive-color: var(
4638
+ --utrecht-radio-button-focus-color,
4639
+ var(--utrecht-radio-button-focus-color)
4640
+ );
4501
4641
  }
4502
4642
  .utrecht-radio-button--html-input:focus-visible {
4503
4643
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
@@ -4512,24 +4652,41 @@ however browsers don't seem to have implemented great looking supixel tweening y
4512
4652
  outline-style: var(--utrecht-focus-outline-style, revert);
4513
4653
  outline-width: var(--utrecht-focus-outline-width, revert);
4514
4654
  }
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));
4655
+ .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
4656
+ --_utrecht-radio-button-interactive-background-color: var(
4657
+ --_utrecht-radio-button-state-hover-background-color,
4658
+ var(--utrecht-radio-button-hover-background-color)
4659
+ );
4660
+ --_utrecht-radio-button-interactive-border-color: var(
4661
+ --_utrecht-radio-button-state-hover-border-color,
4662
+ var(--utrecht-radio-button-hover-border-color)
4663
+ );
4664
+ --_utrecht-radio-button-interactive-border-width: var(
4665
+ --_utrecht-radio-button-state-hover-border-width,
4666
+ var(--utrecht-radio-button-hover-border-width)
4667
+ );
4668
+ --_utrecht-radio-button-interactive-color: var(
4669
+ --_utrecht-radio-button-state-hover-color,
4670
+ var(--utrecht-radio-button-hover-color)
4671
+ );
4526
4672
  }
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));
4673
+ .utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
4674
+ --_utrecht-radio-button-interactive-background-color: var(
4675
+ --_utrecht-radio-button-state-active-background-color,
4676
+ var(--utrecht-radio-button-active-background-color)
4677
+ );
4678
+ --_utrecht-radio-button-interactive-border-color: var(
4679
+ --_utrecht-radio-button-state-active-border-color,
4680
+ var(--utrecht-radio-button-active-border-color)
4681
+ );
4682
+ --_utrecht-radio-button-interactive-border-width: var(
4683
+ --_utrecht-radio-button-state-active-border-width,
4684
+ var(--utrecht-radio-button-active-border-width)
4685
+ );
4686
+ --_utrecht-radio-button-interactive-color: var(
4687
+ --_utrecht-radio-button-state-active-color,
4688
+ var(--utrecht-radio-button-active-color)
4689
+ );
4533
4690
  }
4534
4691
 
4535
4692
  /**
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.500",
2
+ "version": "1.0.0-alpha.501",
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": "34bb97f6857c3d73707de23f7abf91b178e00e56"
30
30
  }