@utrecht/component-library-css 1.0.0-alpha.463 → 1.0.0-alpha.465

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 +76 -76
  2. package/dist/index.css +108 -108
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -1150,39 +1150,39 @@ however browsers don't seem to have implemented great looking supixel tweening y
1150
1150
  -moz-appearance: none;
1151
1151
  -webkit-appearance: none;
1152
1152
  appearance: none;
1153
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1153
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
1154
1154
  background-image: var(--utrecht-select-background-image);
1155
1155
  background-position: 100%;
1156
1156
  background-repeat: no-repeat;
1157
1157
  background-size: 1.4em;
1158
- border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1159
- border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1160
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1161
- border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1162
- border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1163
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1158
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
1159
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1160
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
1161
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1162
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1163
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
1164
1164
  border-style: solid;
1165
- color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1166
- font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1167
- font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1168
- max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1169
- padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1170
- padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1171
- padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1172
- padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1165
+ color: var(--utrecht-select-color, var(--utrecht-form-control-color));
1166
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
1167
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
1168
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
1169
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
1170
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
1171
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
1172
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
1173
1173
  width: 100%;
1174
1174
  /* <select> does not support :read-only */
1175
1175
  }
1176
1176
  .utrecht-html select:disabled {
1177
- background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1178
- border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1179
- color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1177
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1178
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1179
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
1180
1180
  cursor: var(--utrecht-action-disabled-cursor);
1181
1181
  }
1182
1182
  .utrecht-html select:focus {
1183
- background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1184
- border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1185
- color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1183
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1184
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1185
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
1186
1186
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1187
1187
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1188
1188
  * can combine it with the focus ring box shadow.
@@ -1201,9 +1201,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1201
1201
  outline-style: revert;
1202
1202
  }
1203
1203
  .utrecht-html select[aria-invalid=true] {
1204
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1205
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1206
- border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1204
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1205
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1206
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))));
1207
1207
  }
1208
1208
  .utrecht-html hr {
1209
1209
  border-color: var(--utrecht-separator-color);
@@ -1307,38 +1307,38 @@ however browsers don't seem to have implemented great looking supixel tweening y
1307
1307
  color: var(--utrecht-table-row-alternate-odd-color);
1308
1308
  }
1309
1309
  .utrecht-html textarea {
1310
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
1311
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
1312
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
1313
- border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
1314
- border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
1310
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1311
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1312
+ border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1313
+ border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
1314
+ border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
1315
1315
  border-style: solid;
1316
1316
  box-sizing: border-box;
1317
- color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
1318
- font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1319
- font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1317
+ color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
1318
+ font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
1319
+ font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, 1em));
1320
1320
  font-weight: initial; /* harden */
1321
1321
  height: initial; /* harden */
1322
1322
  line-height: var(--utrecht-textarea-line-height, initial);
1323
- max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1323
+ max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
1324
1324
  min-block-size: var(--utrecht-textarea-min-block-size);
1325
- padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
1326
- padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
1327
- padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
1328
- padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
1325
+ padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1326
+ padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1327
+ padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1328
+ padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1329
1329
  resize: vertical;
1330
1330
  width: 100%;
1331
1331
  }
1332
1332
  .utrecht-html textarea:disabled {
1333
- background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1334
- border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1335
- color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1333
+ background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1334
+ border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1335
+ color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1336
1336
  cursor: var(--utrecht-action-disabled-cursor);
1337
1337
  }
1338
1338
  .utrecht-html textarea:focus {
1339
- background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1340
- border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1341
- color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1339
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1340
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1341
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1342
1342
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1343
1343
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1344
1344
  * can combine it with the focus ring box shadow.
@@ -1357,17 +1357,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
1357
1357
  outline-style: revert;
1358
1358
  }
1359
1359
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1360
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1361
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1362
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
1360
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1361
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1362
+ border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
1363
1363
  }
1364
1364
  .utrecht-html textarea:read-only {
1365
- border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
1366
- color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1365
+ border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
1366
+ color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1367
1367
  }
1368
1368
  .utrecht-html textarea::placeholder {
1369
- color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1370
- font-style: var(--utrecht-form-input-placeholder-font-style);
1369
+ color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1370
+ font-style: var(--utrecht-form-control-placeholder-font-style);
1371
1371
  opacity: 100%;
1372
1372
  }
1373
1373
  .utrecht-html input:not([type]),
@@ -1383,24 +1383,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
1383
1383
  .utrecht-html input[type=time i],
1384
1384
  .utrecht-html input[type=url i],
1385
1385
  .utrecht-html input[type=week i] {
1386
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
1387
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
1388
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
1389
- border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
1390
- border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
1386
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
1387
+ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
1388
+ border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
1389
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
1390
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
1391
1391
  border-style: solid;
1392
1392
  box-sizing: border-box;
1393
- color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
1394
- font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
1395
- font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
1393
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
1394
+ font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1395
+ font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, 1em));
1396
1396
  font-weight: initial; /* harden */
1397
1397
  height: initial; /* harden */
1398
1398
  line-height: initial; /* harden */
1399
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
1400
- padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
1401
- padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
1402
- padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
1403
- padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
1399
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
1400
+ padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1401
+ padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1402
+ padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1403
+ padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1404
1404
  width: 100%;
1405
1405
  }
1406
1406
  .utrecht-html input:not([type]):disabled,
@@ -1416,9 +1416,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1416
1416
  .utrecht-html input[type=time i]:disabled,
1417
1417
  .utrecht-html input[type=url i]:disabled,
1418
1418
  .utrecht-html input[type=week i]:disabled {
1419
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1420
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1421
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1419
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1420
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1421
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1422
1422
  cursor: var(--utrecht-action-disabled-cursor);
1423
1423
  }
1424
1424
  .utrecht-html input:not([type]):focus,
@@ -1434,9 +1434,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1434
1434
  .utrecht-html input[type=time i]:focus,
1435
1435
  .utrecht-html input[type=url i]:focus,
1436
1436
  .utrecht-html input[type=week i]:focus {
1437
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1438
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1439
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1437
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1438
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1439
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1440
1440
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1441
1441
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1442
1442
  * can combine it with the focus ring box shadow.
@@ -1491,9 +1491,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1491
1491
  .utrecht-html input[type=url i][aria-invalid=true],
1492
1492
  .utrecht-html input[type=week i]:invalid,
1493
1493
  .utrecht-html input[type=week i][aria-invalid=true] {
1494
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
1495
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
1496
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
1494
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1495
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1496
+ border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
1497
1497
  }
1498
1498
  .utrecht-html input:not([type]):read-only,
1499
1499
  .utrecht-html input[type=date i]:read-only,
@@ -1508,8 +1508,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1508
1508
  .utrecht-html input[type=time i]:read-only,
1509
1509
  .utrecht-html input[type=url i]:read-only,
1510
1510
  .utrecht-html input[type=week i]:read-only {
1511
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
1512
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
1511
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1512
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1513
1513
  }
1514
1514
  .utrecht-html input:not([type])::placeholder,
1515
1515
  .utrecht-html input[type=date i]::placeholder,
@@ -1524,8 +1524,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1524
1524
  .utrecht-html input[type=time i]::placeholder,
1525
1525
  .utrecht-html input[type=url i]::placeholder,
1526
1526
  .utrecht-html input[type=week i]::placeholder {
1527
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
1528
- font-style: var(--utrecht-form-input-placeholder-font-style);
1527
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1528
+ font-style: var(--utrecht-form-control-placeholder-font-style);
1529
1529
  opacity: 100%;
1530
1530
  }
1531
1531
  .utrecht-html input[autocomplete~=current-password i],
package/dist/index.css CHANGED
@@ -4503,40 +4503,40 @@ however browsers don't seem to have implemented great looking supixel tweening y
4503
4503
  -moz-appearance: none;
4504
4504
  -webkit-appearance: none;
4505
4505
  appearance: none;
4506
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
4506
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
4507
4507
  background-image: var(--utrecht-select-background-image);
4508
4508
  background-position: 100%;
4509
4509
  background-repeat: no-repeat;
4510
4510
  background-size: 1.4em;
4511
- border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
4512
- border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
4513
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
4514
- border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
4515
- border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
4516
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
4511
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
4512
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
4513
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
4514
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
4515
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
4516
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
4517
4517
  border-style: solid;
4518
- color: var(--utrecht-select-color, var(--utrecht-form-input-color));
4519
- font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
4520
- font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
4521
- max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
4522
- padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
4523
- padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
4524
- padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
4525
- padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
4518
+ color: var(--utrecht-select-color, var(--utrecht-form-control-color));
4519
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
4520
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
4521
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
4522
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
4523
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
4524
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
4525
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
4526
4526
  width: 100%;
4527
4527
  }
4528
4528
 
4529
4529
  .utrecht-select--disabled {
4530
- background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
4531
- border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
4532
- color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
4530
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4531
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4532
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
4533
4533
  cursor: var(--utrecht-action-disabled-cursor);
4534
4534
  }
4535
4535
 
4536
4536
  .utrecht-select--focus {
4537
- background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
4538
- border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
4539
- color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
4537
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4538
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4539
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
4540
4540
  }
4541
4541
 
4542
4542
  .utrecht-select--focus-visible {
@@ -4554,9 +4554,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
4554
4554
  }
4555
4555
 
4556
4556
  .utrecht-select--invalid {
4557
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
4558
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
4559
- border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
4557
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4558
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4559
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))));
4560
4560
  }
4561
4561
 
4562
4562
  /* stylelint-disable-next-line block-no-empty */
@@ -4564,15 +4564,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
4564
4564
  /* <select> does not support :read-only */
4565
4565
  }
4566
4566
  .utrecht-select--html-select:disabled {
4567
- background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
4568
- border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
4569
- color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
4567
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4568
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4569
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
4570
4570
  cursor: var(--utrecht-action-disabled-cursor);
4571
4571
  }
4572
4572
  .utrecht-select--html-select:focus {
4573
- background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
4574
- border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
4575
- color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
4573
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4574
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4575
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
4576
4576
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
4577
4577
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4578
4578
  * can combine it with the focus ring box shadow.
@@ -4915,46 +4915,46 @@ however browsers don't seem to have implemented great looking supixel tweening y
4915
4915
  */
4916
4916
  /* stylelint-disable-next-line block-no-empty */
4917
4917
  .utrecht-textarea {
4918
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
4919
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
4920
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
4921
- border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
4922
- border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
4918
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
4919
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
4920
+ border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
4921
+ border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
4922
+ border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
4923
4923
  border-style: solid;
4924
4924
  box-sizing: border-box;
4925
- color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
4926
- font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
4927
- font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
4925
+ color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
4926
+ font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
4927
+ font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, 1em));
4928
4928
  font-weight: initial; /* harden */
4929
4929
  height: initial; /* harden */
4930
4930
  line-height: var(--utrecht-textarea-line-height, initial);
4931
- max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
4931
+ max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
4932
4932
  min-block-size: var(--utrecht-textarea-min-block-size);
4933
- padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
4934
- padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
4935
- padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
4936
- padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
4933
+ padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
4934
+ padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
4935
+ padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
4936
+ padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
4937
4937
  resize: vertical;
4938
4938
  width: 100%;
4939
4939
  }
4940
4940
 
4941
4941
  .utrecht-textarea--invalid {
4942
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
4943
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
4944
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
4942
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4943
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4944
+ border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
4945
4945
  }
4946
4946
 
4947
4947
  .utrecht-textarea--disabled {
4948
- background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
4949
- border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
4950
- color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4948
+ background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4949
+ border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4950
+ color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4951
4951
  cursor: var(--utrecht-action-disabled-cursor);
4952
4952
  }
4953
4953
 
4954
4954
  .utrecht-textarea--focus {
4955
- background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
4956
- border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
4957
- color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4955
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4956
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4957
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4958
4958
  }
4959
4959
 
4960
4960
  .utrecht-textarea--focus-visible {
@@ -4972,26 +4972,26 @@ however browsers don't seem to have implemented great looking supixel tweening y
4972
4972
  }
4973
4973
 
4974
4974
  .utrecht-textarea--read-only {
4975
- border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
4976
- color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4975
+ border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
4976
+ color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4977
4977
  }
4978
4978
 
4979
4979
  .utrecht-textarea__placeholder {
4980
- color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4981
- font-style: var(--utrecht-form-input-placeholder-font-style);
4980
+ color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4981
+ font-style: var(--utrecht-form-control-placeholder-font-style);
4982
4982
  opacity: 100%;
4983
4983
  }
4984
4984
 
4985
4985
  .utrecht-textarea--html-textarea:disabled {
4986
- background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
4987
- border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
4988
- color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4986
+ background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4987
+ border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4988
+ color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4989
4989
  cursor: var(--utrecht-action-disabled-cursor);
4990
4990
  }
4991
4991
  .utrecht-textarea--html-textarea:focus {
4992
- background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
4993
- border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
4994
- color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4992
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4993
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4994
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4995
4995
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
4996
4996
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4997
4997
  * can combine it with the focus ring box shadow.
@@ -5010,17 +5010,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5010
5010
  outline-style: revert;
5011
5011
  }
5012
5012
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
5013
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
5014
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
5015
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
5013
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5014
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5015
+ border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
5016
5016
  }
5017
5017
  .utrecht-textarea--html-textarea:read-only {
5018
- border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
5019
- color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5018
+ border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
5019
+ color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5020
5020
  }
5021
5021
  .utrecht-textarea--html-textarea::placeholder {
5022
- color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5023
- font-style: var(--utrecht-form-input-placeholder-font-style);
5022
+ color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5023
+ font-style: var(--utrecht-form-control-placeholder-font-style);
5024
5024
  opacity: 100%;
5025
5025
  }
5026
5026
 
@@ -5045,44 +5045,44 @@ however browsers don't seem to have implemented great looking supixel tweening y
5045
5045
  */
5046
5046
  /* stylelint-disable-next-line block-no-empty */
5047
5047
  .utrecht-textbox {
5048
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
5049
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
5050
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
5051
- border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
5052
- border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
5048
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
5049
+ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
5050
+ border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
5051
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
5052
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
5053
5053
  border-style: solid;
5054
5054
  box-sizing: border-box;
5055
- color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
5056
- font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
5057
- font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
5055
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
5056
+ font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
5057
+ font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, 1em));
5058
5058
  font-weight: initial; /* harden */
5059
5059
  height: initial; /* harden */
5060
5060
  line-height: initial; /* harden */
5061
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
5062
- padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
5063
- padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
5064
- padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
5065
- padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
5061
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
5062
+ padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
5063
+ padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
5064
+ padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
5065
+ padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
5066
5066
  width: 100%;
5067
5067
  }
5068
5068
 
5069
5069
  .utrecht-textbox--invalid {
5070
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
5071
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
5072
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
5070
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5071
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5072
+ border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5073
5073
  }
5074
5074
 
5075
5075
  .utrecht-textbox--disabled {
5076
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
5077
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
5078
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5076
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5077
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5078
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5079
5079
  cursor: var(--utrecht-action-disabled-cursor);
5080
5080
  }
5081
5081
 
5082
5082
  .utrecht-textbox--focus {
5083
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
5084
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
5085
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5083
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5084
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5085
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5086
5086
  }
5087
5087
 
5088
5088
  .utrecht-textbox--focus-visible {
@@ -5100,13 +5100,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
5100
5100
  }
5101
5101
 
5102
5102
  .utrecht-textbox--read-only {
5103
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
5104
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
5103
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5104
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5105
5105
  }
5106
5106
 
5107
5107
  .utrecht-textbox__placeholder {
5108
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
5109
- font-style: var(--utrecht-form-input-placeholder-font-style);
5108
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5109
+ font-style: var(--utrecht-form-control-placeholder-font-style);
5110
5110
  opacity: 100%;
5111
5111
  }
5112
5112
 
@@ -5125,15 +5125,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
5125
5125
  }
5126
5126
 
5127
5127
  .utrecht-textbox--html-input:disabled {
5128
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
5129
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
5130
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5128
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5129
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5130
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5131
5131
  cursor: var(--utrecht-action-disabled-cursor);
5132
5132
  }
5133
5133
  .utrecht-textbox--html-input:focus {
5134
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
5135
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
5136
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
5134
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5135
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5136
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5137
5137
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
5138
5138
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
5139
5139
  * can combine it with the focus ring box shadow.
@@ -5152,17 +5152,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5152
5152
  outline-style: revert;
5153
5153
  }
5154
5154
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
5155
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
5156
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
5157
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
5155
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5156
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5157
+ border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5158
5158
  }
5159
5159
  .utrecht-textbox--html-input:read-only {
5160
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
5161
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
5160
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5161
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5162
5162
  }
5163
5163
  .utrecht-textbox--html-input::placeholder {
5164
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
5165
- font-style: var(--utrecht-form-input-placeholder-font-style);
5164
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5165
+ font-style: var(--utrecht-form-control-placeholder-font-style);
5166
5166
  opacity: 100%;
5167
5167
  }
5168
5168
  .utrecht-textbox--html-input[type=password i] {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.463",
2
+ "version": "1.0.0-alpha.465",
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": "ea2b4b892566c96ade23d8f1c02b32ec76f77f59"
29
+ "gitHead": "0a1a8f203f3a3a17d6daaf84fbecb1c4dbbcac0d"
30
30
  }