@utrecht/component-library-css 1.0.0-alpha.435 → 1.0.0-alpha.437

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 +61 -8
  2. package/dist/index.css +108 -188
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -347,7 +347,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
347
347
  */
348
348
  /**
349
349
  * @license EUPL-1.2
350
- * Copyright (c) 2021 Gemeente Utrecht
350
+ * Copyright (c) 2021 Robbert Broersma
351
351
  */
352
352
  /**
353
353
  * @license EUPL-1.2
@@ -1062,17 +1062,56 @@ however browsers don't seem to have implemented great looking supixel tweening y
1062
1062
  display: contents;
1063
1063
  }
1064
1064
  .utrecht-html input[type=radio i] {
1065
- /* reset native margin for input[type="radio" i] */
1065
+ -webkit-appearance: none;
1066
+ -moz-appearance: none;
1067
+ appearance: none;
1066
1068
  margin-block-end: 0;
1067
1069
  margin-block-start: 0;
1068
1070
  margin-inline-end: 0;
1069
1071
  margin-inline-start: 0;
1070
- cursor: var(--utrecht-action-activate-cursor, revert);
1072
+ background-color: var(--utrecht-radio-button-background-color);
1073
+ background-position: center;
1074
+ background-repeat: no-repeat;
1075
+ background-size: contain;
1076
+ border-color: var(--utrecht-radio-button-border-color);
1077
+ border-radius: 50%;
1078
+ border-style: solid;
1079
+ border-width: var(--utrecht-radio-button-border-width);
1080
+ cursor: var(--utrecht-action-activate-cursor);
1081
+ height: var(--utrecht-radio-button-size);
1082
+ margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1083
+ -webkit-print-color-adjust: exact;
1084
+ print-color-adjust: exact;
1085
+ vertical-align: top;
1086
+ width: var(--utrecht-radio-button-size);
1071
1087
  }
1072
1088
  .utrecht-html input[type=radio i]:disabled {
1073
- cursor: var(--utrecht-action-disabled-cursor, revert);
1089
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1090
+ border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
1091
+ color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
1092
+ cursor: var(--utrecht-action-disabled-cursor);
1093
+ }
1094
+ .utrecht-html input[type=radio i]:disabled:checked {
1095
+ background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
1096
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1097
+ }
1098
+ .utrecht-html input[type=radio i]:disabled:active {
1099
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
1100
+ }
1101
+ .utrecht-html input[type=radio i]:hover {
1102
+ background-color: var(--utrecht-radio-button-hover-background-color, var(--utrecht-radio-button-background-color));
1103
+ border-color: var(--utrecht-radio-button-hover-border-color, var(--utrecht-radio-button-border-color));
1104
+ border-width: var(--utrecht-radio-button-hover-border-width, var(--utrecht-radio-button-border-width));
1105
+ color: var(--utrecht-radio-button-hover-color, var(--utrecht-radio-button-color));
1074
1106
  }
1075
1107
  .utrecht-html input[type=radio i]:focus {
1108
+ background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
1109
+ 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");
1110
+ border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
1111
+ border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
1112
+ color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
1113
+ }
1114
+ .utrecht-html input[type=radio i]:focus-visible {
1076
1115
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1077
1116
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1078
1117
  * can combine it with the focus ring box shadow.
@@ -1085,10 +1124,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
1085
1124
  outline-style: var(--utrecht-focus-outline-style, revert);
1086
1125
  outline-width: var(--utrecht-focus-outline-width, revert);
1087
1126
  }
1088
- .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
1089
- /* undo focus ring */
1090
- box-shadow: none;
1091
- outline-style: revert;
1127
+ .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1128
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
1129
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
1130
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
1131
+ }
1132
+ .utrecht-html input[type=radio i]:active {
1133
+ background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
1134
+ 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");
1135
+ border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
1136
+ border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
1137
+ color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
1138
+ }
1139
+ .utrecht-html input[type=radio i]:checked {
1140
+ background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
1141
+ 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");
1142
+ border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
1143
+ border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
1144
+ color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
1092
1145
  }
1093
1146
  .utrecht-html select {
1094
1147
  -moz-appearance: none;
package/dist/index.css CHANGED
@@ -2077,178 +2077,6 @@ ol.utrecht-breadcrumb__list {
2077
2077
  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
2078
2078
  }
2079
2079
 
2080
- /**
2081
- * @license EUPL-1.2
2082
- * Copyright (c) 2021 Robbert Broersma
2083
- */
2084
- /**
2085
- * @license EUPL-1.2
2086
- * Copyright (c) 2021 Robbert Broersma
2087
- */
2088
- /**
2089
- * @license EUPL-1.2
2090
- * Copyright (c) 2021 Gemeente Utrecht
2091
- * Copyright (c) 2021 Robbert Broersma
2092
- */
2093
- /* stylelint-disable-next-line block-no-empty */
2094
- /* stylelint-disable-next-line block-no-empty */
2095
- .utrecht-radio-button--custom,
2096
- .utrecht-custom-radio-button {
2097
- -webkit-appearance: none;
2098
- -moz-appearance: none;
2099
- appearance: none;
2100
- background-color: var(--utrecht-custom-radio-button-background-color);
2101
- background-position: center;
2102
- background-repeat: no-repeat;
2103
- background-size: contain;
2104
- border-color: var(--utrecht-custom-radio-button-border-color);
2105
- border-radius: 50%;
2106
- border-style: solid;
2107
- border-width: var(--utrecht-custom-radio-button-border-width);
2108
- cursor: var(--utrecht-action-activate-cursor);
2109
- height: var(--utrecht-custom-radio-button-size);
2110
- margin-block-start: var(--utrecht-custom-radio-button-margin-block-start);
2111
- -webkit-print-color-adjust: exact;
2112
- print-color-adjust: exact;
2113
- vertical-align: top;
2114
- width: var(--utrecht-custom-radio-button-size);
2115
- }
2116
-
2117
- .utrecht-radio-button--custom.utrecht-radio-button--checked,
2118
- .utrecht-custom-radio-button--checked {
2119
- background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
2120
- 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");
2121
- border-color: var(--utrecht-custom-radio-button-checked-border-color, var(--utrecht-custom-radio-button-border-color));
2122
- border-width: var(--utrecht-custom-radio-button-checked-border-width, var(--utrecht-custom-radio-button-border-width));
2123
- color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
2124
- }
2125
-
2126
- .utrecht-radio-button--custom.utrecht-radio-button--active,
2127
- .utrecht-custom-radio-button--active {
2128
- background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
2129
- 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");
2130
- border-color: var(--utrecht-custom-radio-button-active-border-color, var(--utrecht-custom-radio-button-border-color));
2131
- border-width: var(--utrecht-custom-radio-button-active-border-width, var(--utrecht-custom-radio-button-border-width));
2132
- color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
2133
- }
2134
-
2135
- .utrecht-radio-button--custom.utrecht-radio-button--focus,
2136
- .utrecht-custom-radio-button--focus {
2137
- background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
2138
- 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");
2139
- border-color: var(--utrecht-custom-radio-button-focus-border-color, var(--utrecht-custom-radio-button-border-color));
2140
- border-width: var(--utrecht-custom-radio-button-focus-border-width, var(--utrecht-custom-radio-button-border-width));
2141
- color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
2142
- }
2143
-
2144
- .utrecht-radio-button--custom.utrecht-radio-button--focus-visible,
2145
- .utrecht-custom-radio-button--focus-visible {
2146
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2147
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2148
- * can combine it with the focus ring box shadow.
2149
- */
2150
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2151
- var(--utrecht-focus-inverse-outline-color, transparent);
2152
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2153
- outline-color: var(--utrecht-focus-outline-color, revert);
2154
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2155
- outline-style: var(--utrecht-focus-outline-style, revert);
2156
- outline-width: var(--utrecht-focus-outline-width, revert);
2157
- }
2158
-
2159
- .utrecht-radio-button--custom.utrecht-radio-button--disabled,
2160
- .utrecht-custom-radio-button--disabled {
2161
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2162
- border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
2163
- color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
2164
- cursor: var(--utrecht-action-disabled-cursor);
2165
- }
2166
- .utrecht-radio-button--custom.utrecht-radio-button--disabled:checked,
2167
- .utrecht-custom-radio-button--disabled:checked {
2168
- background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
2169
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2170
- }
2171
- .utrecht-radio-button--custom.utrecht-radio-button--disabled:active,
2172
- .utrecht-custom-radio-button--disabled:active {
2173
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2174
- }
2175
-
2176
- .utrecht-radio-button--custom.utrecht-radio-button--invalid,
2177
- .utrecht-custom-radio-button--invalid {
2178
- border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
2179
- border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
2180
- color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
2181
- }
2182
-
2183
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled,
2184
- .utrecht-custom-radio-button--html-input:disabled {
2185
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2186
- border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
2187
- color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
2188
- cursor: var(--utrecht-action-disabled-cursor);
2189
- }
2190
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:checked,
2191
- .utrecht-custom-radio-button--html-input:disabled:checked {
2192
- background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
2193
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2194
- }
2195
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:active,
2196
- .utrecht-custom-radio-button--html-input:disabled:active {
2197
- border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
2198
- }
2199
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:hover,
2200
- .utrecht-custom-radio-button--html-input:hover {
2201
- background-color: var(--utrecht-custom-radio-button-hover-background-color, var(--utrecht-custom-radio-button-background-color));
2202
- border-color: var(--utrecht-custom-radio-button-hover-border-color, var(--utrecht-custom-radio-button-border-color));
2203
- border-width: var(--utrecht-custom-radio-button-hover-border-width, var(--utrecht-custom-radio-button-border-width));
2204
- color: var(--utrecht-custom-radio-button-hover-color, var(--utrecht-custom-radio-button-color));
2205
- }
2206
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:focus,
2207
- .utrecht-custom-radio-button--html-input:focus {
2208
- background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
2209
- 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");
2210
- border-color: var(--utrecht-custom-radio-button-focus-border-color, var(--utrecht-custom-radio-button-border-color));
2211
- border-width: var(--utrecht-custom-radio-button-focus-border-width, var(--utrecht-custom-radio-button-border-width));
2212
- color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
2213
- }
2214
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:focus-visible,
2215
- .utrecht-custom-radio-button--html-input:focus-visible {
2216
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2217
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2218
- * can combine it with the focus ring box shadow.
2219
- */
2220
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2221
- var(--utrecht-focus-inverse-outline-color, transparent);
2222
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2223
- outline-color: var(--utrecht-focus-outline-color, revert);
2224
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2225
- outline-style: var(--utrecht-focus-outline-style, revert);
2226
- outline-width: var(--utrecht-focus-outline-width, revert);
2227
- }
2228
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--custom.utrecht-radio-button--html-input[aria-invalid=true],
2229
- .utrecht-custom-radio-button--html-input:invalid,
2230
- .utrecht-custom-radio-button--html-input[aria-invalid=true] {
2231
- border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
2232
- border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
2233
- color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
2234
- }
2235
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:active,
2236
- .utrecht-custom-radio-button--html-input:active {
2237
- background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
2238
- 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");
2239
- border-color: var(--utrecht-custom-radio-button-active-border-color, var(--utrecht-custom-radio-button-border-color));
2240
- border-width: var(--utrecht-custom-radio-button-active-border-width, var(--utrecht-custom-radio-button-border-width));
2241
- color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
2242
- }
2243
- .utrecht-radio-button--custom.utrecht-radio-button--html-input:checked,
2244
- .utrecht-custom-radio-button--html-input:checked {
2245
- background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
2246
- 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");
2247
- border-color: var(--utrecht-custom-radio-button-checked-border-color, var(--utrecht-custom-radio-button-border-color));
2248
- border-width: var(--utrecht-custom-radio-button-checked-border-width, var(--utrecht-custom-radio-button-border-width));
2249
- color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
2250
- }
2251
-
2252
2080
  /**
2253
2081
  * @license EUPL-1.2
2254
2082
  * Copyright (c) 2021-2022 Gemeente Utrecht
@@ -2478,9 +2306,9 @@ ol.utrecht-breadcrumb__list {
2478
2306
 
2479
2307
  .utrecht-form-field--radio {
2480
2308
  display: grid;
2481
- gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
2309
+ gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
2482
2310
  grid-template-areas: "input label" "input description" "input description-invalid";
2483
- grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
2311
+ grid-template-columns: var(--utrecht-radio-button-size) 100fr;
2484
2312
  /*
2485
2313
  .utrecht-form-field__label .utrecht-form-field__input {
2486
2314
  margin-inline-start: calc(
@@ -2491,10 +2319,10 @@ ol.utrecht-breadcrumb__list {
2491
2319
  */
2492
2320
  }
2493
2321
  .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
2494
- margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
2322
+ margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
2495
2323
  }
2496
2324
  .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
2497
- margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
2325
+ margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
2498
2326
  }
2499
2327
 
2500
2328
  .utrecht-form-field__input {
@@ -4394,11 +4222,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
4394
4222
 
4395
4223
  /**
4396
4224
  * @license EUPL-1.2
4397
- * Copyright (c) 2021 Gemeente Utrecht
4225
+ * Copyright (c) 2021 Robbert Broersma
4398
4226
  */
4399
4227
  /**
4400
4228
  * @license EUPL-1.2
4401
- * Copyright (c) 2021 Gemeente Utrecht
4229
+ * Copyright (c) 2021 Robbert Broersma
4402
4230
  */
4403
4231
  /**
4404
4232
  * @license EUPL-1.2
@@ -4408,17 +4236,52 @@ however browsers don't seem to have implemented great looking supixel tweening y
4408
4236
  /* stylelint-disable-next-line block-no-empty */
4409
4237
  /* stylelint-disable-next-line block-no-empty */
4410
4238
  .utrecht-radio-button {
4411
- /* reset native margin for input[type="radio" i] */
4239
+ -webkit-appearance: none;
4240
+ -moz-appearance: none;
4241
+ appearance: none;
4412
4242
  margin-block-end: 0;
4413
4243
  margin-block-start: 0;
4414
4244
  margin-inline-end: 0;
4415
4245
  margin-inline-start: 0;
4416
- cursor: var(--utrecht-action-activate-cursor, revert);
4246
+ background-color: var(--utrecht-radio-button-background-color);
4247
+ background-position: center;
4248
+ background-repeat: no-repeat;
4249
+ background-size: contain;
4250
+ border-color: var(--utrecht-radio-button-border-color);
4251
+ border-radius: 50%;
4252
+ border-style: solid;
4253
+ border-width: var(--utrecht-radio-button-border-width);
4254
+ cursor: var(--utrecht-action-activate-cursor);
4255
+ height: var(--utrecht-radio-button-size);
4256
+ margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
4257
+ -webkit-print-color-adjust: exact;
4258
+ print-color-adjust: exact;
4259
+ vertical-align: top;
4260
+ width: var(--utrecht-radio-button-size);
4417
4261
  }
4418
4262
 
4419
- /* stylelint-disable-next-line block-no-empty */
4420
- .utrecht-radio-button--disabled {
4421
- cursor: var(--utrecht-action-disabled-cursor, revert);
4263
+ .utrecht-radio-button--checked {
4264
+ background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
4265
+ 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");
4266
+ border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
4267
+ border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
4268
+ color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
4269
+ }
4270
+
4271
+ .utrecht-radio-button--active {
4272
+ background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
4273
+ 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");
4274
+ border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
4275
+ border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
4276
+ color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
4277
+ }
4278
+
4279
+ .utrecht-radio-button--focus {
4280
+ background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
4281
+ 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");
4282
+ border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
4283
+ border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
4284
+ color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
4422
4285
  }
4423
4286
 
4424
4287
  .utrecht-radio-button--focus-visible {
@@ -4435,10 +4298,53 @@ however browsers don't seem to have implemented great looking supixel tweening y
4435
4298
  outline-width: var(--utrecht-focus-outline-width, revert);
4436
4299
  }
4437
4300
 
4301
+ .utrecht-radio-button--disabled {
4302
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4303
+ border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
4304
+ color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4305
+ cursor: var(--utrecht-action-disabled-cursor);
4306
+ }
4307
+ .utrecht-radio-button--disabled:checked {
4308
+ background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
4309
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4310
+ }
4311
+ .utrecht-radio-button--disabled:active {
4312
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4313
+ }
4314
+
4315
+ .utrecht-radio-button--invalid {
4316
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
4317
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
4318
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4319
+ }
4320
+
4438
4321
  .utrecht-radio-button--html-input:disabled {
4439
- cursor: var(--utrecht-action-disabled-cursor, revert);
4322
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4323
+ border-width: var(--utrecht-radio-button-disabled-border-width, var(--utrecht-radio-button-border-width));
4324
+ color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
4325
+ cursor: var(--utrecht-action-disabled-cursor);
4326
+ }
4327
+ .utrecht-radio-button--html-input:disabled:checked {
4328
+ background-color: var(--utrecht-radio-button-disabled-background-color, var(--utrecht-radio-button-background-color));
4329
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4330
+ }
4331
+ .utrecht-radio-button--html-input:disabled:active {
4332
+ border-color: var(--utrecht-radio-button-disabled-border-color, var(--utrecht-radio-button-border-color));
4333
+ }
4334
+ .utrecht-radio-button--html-input:hover {
4335
+ background-color: var(--utrecht-radio-button-hover-background-color, var(--utrecht-radio-button-background-color));
4336
+ border-color: var(--utrecht-radio-button-hover-border-color, var(--utrecht-radio-button-border-color));
4337
+ border-width: var(--utrecht-radio-button-hover-border-width, var(--utrecht-radio-button-border-width));
4338
+ color: var(--utrecht-radio-button-hover-color, var(--utrecht-radio-button-color));
4440
4339
  }
4441
4340
  .utrecht-radio-button--html-input:focus {
4341
+ background-color: var(--utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-background-color));
4342
+ 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");
4343
+ border-color: var(--utrecht-radio-button-focus-border-color, var(--utrecht-radio-button-border-color));
4344
+ border-width: var(--utrecht-radio-button-focus-border-width, var(--utrecht-radio-button-border-width));
4345
+ color: var(--utrecht-radio-button-focus-color, var(--utrecht-radio-button-color));
4346
+ }
4347
+ .utrecht-radio-button--html-input:focus-visible {
4442
4348
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
4443
4349
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4444
4350
  * can combine it with the focus ring box shadow.
@@ -4451,10 +4357,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
4451
4357
  outline-style: var(--utrecht-focus-outline-style, revert);
4452
4358
  outline-width: var(--utrecht-focus-outline-width, revert);
4453
4359
  }
4454
- .utrecht-radio-button--html-input:focus:not(:focus-visible) {
4455
- /* undo focus ring */
4456
- box-shadow: none;
4457
- outline-style: revert;
4360
+ .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
4361
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
4362
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
4363
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
4364
+ }
4365
+ .utrecht-radio-button--html-input:active {
4366
+ background-color: var(--utrecht-radio-button-active-background-color, var(--utrecht-radio-button-background-color));
4367
+ 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");
4368
+ border-color: var(--utrecht-radio-button-active-border-color, var(--utrecht-radio-button-border-color));
4369
+ border-width: var(--utrecht-radio-button-active-border-width, var(--utrecht-radio-button-border-width));
4370
+ color: var(--utrecht-radio-button-active-color, var(--utrecht-radio-button-color));
4371
+ }
4372
+ .utrecht-radio-button--html-input:checked {
4373
+ background-color: var(--utrecht-radio-button-checked-background-color, var(--utrecht-radio-button-background-color));
4374
+ 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");
4375
+ border-color: var(--utrecht-radio-button-checked-border-color, var(--utrecht-radio-button-border-color));
4376
+ border-width: var(--utrecht-radio-button-checked-border-width, var(--utrecht-radio-button-border-width));
4377
+ color: var(--utrecht-radio-button-checked-color, var(--utrecht-radio-button-color));
4458
4378
  }
4459
4379
 
4460
4380
  /**
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.435",
2
+ "version": "1.0.0-alpha.437",
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": "515f101f475d9d15be56e2569ca04acf8f195c7d"
29
+ "gitHead": "edb39fb8c46246b2c4888770c540d537b1cd1d68"
30
30
  }