@utrecht/component-library-css 1.0.0-alpha.523 → 1.0.0-alpha.525

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 +28 -20
  2. package/dist/index.css +85 -68
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -370,6 +370,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
370
370
  * Copyright (c) 2021 Robbert Broersma
371
371
  */
372
372
  /* stylelint-disable-next-line block-no-empty */
373
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
374
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
375
+ /* stylelint-disable order/properties-alphabetical-order */
373
376
  /* stylelint-disable-next-line block-no-empty */
374
377
  /**
375
378
  * @license EUPL-1.2
@@ -406,6 +409,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
406
409
  * Copyright (c) 2021 Robbert Broersma
407
410
  */
408
411
  /* stylelint-disable-next-line block-no-empty */
412
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
413
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
414
+ /* stylelint-disable order/properties-alphabetical-order */
409
415
  /**
410
416
  * @license EUPL-1.2
411
417
  * Copyright (c) 2021 Robbert Broersma
@@ -420,6 +426,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
420
426
  * Copyright (c) 2021 Robbert Broersma
421
427
  */
422
428
  /* stylelint-disable-next-line block-no-empty */
429
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
430
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
431
+ /* stylelint-disable order/properties-alphabetical-order */
423
432
  /**
424
433
  * @license EUPL-1.2
425
434
  * Copyright (c) 2021 Robbert Broersma
@@ -658,19 +667,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
658
667
  )
659
668
  );
660
669
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
661
- --_utrecht-button-border-bottom-width: var(
670
+ --_utrecht-button-border-block-end-width: var(
662
671
  --utrecht-button-border-bottom-width,
663
672
  var(--_utrecht-button-border-width, 0)
664
673
  );
665
674
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
666
675
  align-items: center;
667
676
  background-color: var(--_utrecht-button-background-color);
677
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
678
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
668
679
  border-color: var(--_utrecht-button-border-color);
669
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
670
680
  border-radius: var(--utrecht-button-border-radius);
671
681
  border-style: solid;
672
682
  border-width: var(--_utrecht-button-border-width);
673
- border-bottom-width: var(--_utrecht-button-border-bottom-width);
674
683
  box-sizing: border-box;
675
684
  color: var(--_utrecht-button-color);
676
685
  cursor: var(--utrecht-action-activate-cursor);
@@ -813,7 +822,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
813
822
  border: 0;
814
823
  margin-inline-end: 0;
815
824
  margin-inline-start: 0;
816
- min-width: 0;
825
+ min-inline-size: 0;
817
826
  padding-block-end: 0;
818
827
  padding-block-start: 0.01em;
819
828
  padding-inline-end: 0;
@@ -1299,12 +1308,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
1299
1308
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
1300
1309
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
1301
1310
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
1311
+ inline-size: 100%;
1302
1312
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
1303
1313
  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
1304
1314
  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
1305
1315
  padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
1306
1316
  padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
1307
- width: 100%;
1308
1317
  /* <select> does not support :read-only */
1309
1318
  }
1310
1319
  .utrecht-html select:disabled {
@@ -1343,9 +1352,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1343
1352
  )
1344
1353
  );
1345
1354
  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))));
1346
- 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))));
1347
1355
  border-width: var(--_utrecht-select-border-width);
1348
- border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
1356
+ border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
1357
+ 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))));
1349
1358
  }
1350
1359
  .utrecht-html hr {
1351
1360
  border-color: var(--utrecht-separator-color);
@@ -1362,10 +1371,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1362
1371
  border-width: var(--utrecht-table-border-width, 0);
1363
1372
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
1364
1373
  font-size: var(--utrecht-table-font-size, inherit);
1374
+ inline-size: 100%;
1365
1375
  line-height: var(--utrecht-table-line-height, inherit);
1366
1376
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
1367
1377
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
1368
- width: 100%;
1369
1378
  --utrecht-space-around: 1;
1370
1379
  }
1371
1380
  .utrecht-html caption {
@@ -1452,11 +1461,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
1452
1461
  background-color: var(--utrecht-table-row-alternate-odd-background-color);
1453
1462
  color: var(--utrecht-table-row-alternate-odd-color);
1454
1463
  }
1455
- .utrecht-html textarea {
1456
- /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1464
+ .utrecht-html textarea { /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1457
1465
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1466
+ block-size: initial; /* harden */
1458
1467
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1459
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1468
+ border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1460
1469
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
1461
1470
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
1462
1471
  border-style: solid;
@@ -1465,7 +1474,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1465
1474
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
1466
1475
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
1467
1476
  font-weight: initial; /* harden */
1468
- height: initial; /* harden */
1477
+ inline-size: 100%;
1469
1478
  line-height: var(--utrecht-textarea-line-height, initial);
1470
1479
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
1471
1480
  min-block-size: var(--utrecht-textarea-min-block-size);
@@ -1475,7 +1484,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
1475
1484
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1476
1485
  resize: vertical;
1477
1486
  resize: block;
1478
- width: 100%;
1479
1487
  }
1480
1488
  .utrecht-html textarea:disabled {
1481
1489
  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))));
@@ -1513,9 +1521,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1513
1521
  )
1514
1522
  );
1515
1523
  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))));
1516
- 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))));
1517
1524
  border-width: var(--_utrecht-textarea-border-width);
1518
- border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
1525
+ border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
1526
+ 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))));
1519
1527
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1520
1528
  }
1521
1529
  .utrecht-html textarea:read-only {
@@ -1542,8 +1550,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1542
1550
  .utrecht-html input[type=url i],
1543
1551
  .utrecht-html input[type=week i] {
1544
1552
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
1553
+ block-size: initial; /* harden */
1545
1554
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
1546
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
1555
+ border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
1547
1556
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
1548
1557
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
1549
1558
  border-style: solid;
@@ -1552,14 +1561,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
1552
1561
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1553
1562
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
1554
1563
  font-weight: initial; /* harden */
1555
- height: initial; /* harden */
1564
+ inline-size: 100%;
1556
1565
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
1557
1566
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
1558
1567
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1559
1568
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1560
1569
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1561
1570
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1562
- width: 100%;
1563
1571
  }
1564
1572
  .utrecht-html input:not([type]):disabled,
1565
1573
  .utrecht-html input[type=date i]:disabled,
@@ -1657,9 +1665,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
1657
1665
  )
1658
1666
  );
1659
1667
  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))));
1660
- 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))));
1661
1668
  border-width: var(--_utrecht-textbox-border-width);
1662
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
1669
+ border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
1670
+ 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))));
1663
1671
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1664
1672
  }
1665
1673
  .utrecht-html input:not([type]):read-only,
package/dist/index.css CHANGED
@@ -58,12 +58,12 @@
58
58
  background-color: var(--utrecht-accordion-button-icon-background-color);
59
59
  background-position: center;
60
60
  background-repeat: no-repeat;
61
+ block-size: var(--utrecht-accordion-button-icon-size);
61
62
  content: "";
62
- height: var(--utrecht-accordion-button-icon-size);
63
+ inline-size: var(--utrecht-accordion-button-icon-size);
63
64
  inset-block-start: 0;
64
65
  inset-inline-end: 0;
65
66
  position: absolute;
66
- width: var(--utrecht-accordion-button-icon-size);
67
67
  }
68
68
  .utrecht-accordion__button[aria-expanded=false]::after {
69
69
  background-image: var(--utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
@@ -76,9 +76,9 @@
76
76
  }
77
77
 
78
78
  .utrecht-accordion__body {
79
+ border-block-start: none;
79
80
  border-color: var(--utrecht-accordion-body-border-color);
80
81
  border-style: solid;
81
- border-top: none;
82
82
  border-width: var(--utrecht-accordion-body-border-width);
83
83
  padding-block-end: var(--utrecht-accordion-body-padding-block-end);
84
84
  padding-block-start: var(--utrecht-accordion-body-padding-block-start);
@@ -523,12 +523,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
523
523
  opacity: var(--_utrecht-backdrop-opacity);
524
524
  -webkit-user-select: none;
525
525
  user-select: none;
526
- bottom: 0;
527
526
  display: block;
528
- left: 0;
527
+ inset-block-end: 0;
528
+ inset-block-start: 0;
529
+ inset-inline-end: 0;
530
+ inset-inline-start: 0;
529
531
  position: absolute;
530
- right: 0;
531
- top: 0;
532
532
  z-index: var(--utrecht-backdrop-z-index);
533
533
  }
534
534
  @keyframes utrecht-backdrop-fade-in {
@@ -719,18 +719,18 @@ ol.utrecht-breadcrumb__list {
719
719
  }
720
720
  .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
721
721
  .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
722
+ block-size: 0;
722
723
  border-block-end-width: var(--utrecht-breadcrumb-block-size);
723
724
  border-block-start-width: var(--utrecht-breadcrumb-block-size);
724
725
  border-color: transparent;
725
726
  border-style: solid;
726
727
  content: " ";
727
728
  display: block;
728
- height: 0;
729
- left: 100%;
729
+ inline-size: 0;
730
+ inset-block-start: 50%;
731
+ inset-inline-start: 100%;
730
732
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
731
733
  position: absolute;
732
- top: 50%;
733
- width: 0;
734
734
  }
735
735
  .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
736
736
  border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
@@ -978,19 +978,19 @@ ol.utrecht-breadcrumb__list {
978
978
  )
979
979
  );
980
980
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
981
- --_utrecht-button-border-bottom-width: var(
981
+ --_utrecht-button-border-block-end-width: var(
982
982
  --utrecht-button-border-bottom-width,
983
983
  var(--_utrecht-button-border-width, 0)
984
984
  );
985
985
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
986
986
  align-items: center;
987
987
  background-color: var(--_utrecht-button-background-color);
988
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
989
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
988
990
  border-color: var(--_utrecht-button-border-color);
989
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
990
991
  border-radius: var(--utrecht-button-border-radius);
991
992
  border-style: solid;
992
993
  border-width: var(--_utrecht-button-border-width);
993
- border-bottom-width: var(--_utrecht-button-border-bottom-width);
994
994
  box-sizing: border-box;
995
995
  color: var(--_utrecht-button-color);
996
996
  cursor: var(--utrecht-action-activate-cursor);
@@ -1491,7 +1491,7 @@ ol.utrecht-breadcrumb__list {
1491
1491
  */
1492
1492
  .utrecht-calendar {
1493
1493
  background-color: var(--utrecht-calendar-background-color);
1494
- width: fit-content;
1494
+ inline-size: fit-content;
1495
1495
  }
1496
1496
 
1497
1497
  .utrecht-calendar__table {
@@ -1501,18 +1501,18 @@ ol.utrecht-breadcrumb__list {
1501
1501
  }
1502
1502
 
1503
1503
  .utrecht-calendar__table-weeks-item {
1504
+ inline-size: var(--utrecht-calendar-table-weeks-item-width);
1504
1505
  line-height: var(--utrecht-calendar-table-weeks-item-line-height, inherit);
1505
1506
  padding-block-end: var(--utrecht-calendar-table-weeks-item-padding-block-end);
1506
1507
  padding-block-start: var(--utrecht-calendar-table-weeks-item-padding-block-start);
1507
- width: var(--utrecht-calendar-table-weeks-item-width);
1508
1508
  }
1509
1509
 
1510
1510
  .utrecht-calendar__table-days-item-day {
1511
1511
  --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-border-color);
1512
1512
  --utrecht-calendar-button-border-width: var(--utrecht-calendar-table-days-item-day-border-width);
1513
1513
  --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-color);
1514
- height: var(--utrecht-calendar-table-days-item-day-size);
1515
- width: var(--utrecht-calendar-table-days-item-day-size);
1514
+ block-size: var(--utrecht-calendar-table-days-item-day-size);
1515
+ inline-size: var(--utrecht-calendar-table-days-item-day-size);
1516
1516
  }
1517
1517
 
1518
1518
  .utrecht-calendar__table-days-item-day:hover {
@@ -1618,8 +1618,8 @@ ol.utrecht-breadcrumb__list {
1618
1618
  }
1619
1619
 
1620
1620
  .utrecht-calendar__icon {
1621
- height: var(--utrecht-calendar-icon-size);
1622
- width: var(--utrecht-calendar-icon-size);
1621
+ block-size: var(--utrecht-calendar-icon-size);
1622
+ inline-size: var(--utrecht-calendar-icon-size);
1623
1623
  }
1624
1624
 
1625
1625
  /**
@@ -1958,19 +1958,19 @@ ol.utrecht-breadcrumb__list {
1958
1958
  )
1959
1959
  );
1960
1960
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
1961
- --_utrecht-button-border-bottom-width: var(
1961
+ --_utrecht-button-border-block-end-width: var(
1962
1962
  --utrecht-button-border-bottom-width,
1963
1963
  var(--_utrecht-button-border-width, 0)
1964
1964
  );
1965
1965
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
1966
1966
  align-items: center;
1967
1967
  background-color: var(--_utrecht-button-background-color);
1968
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
1969
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
1968
1970
  border-color: var(--_utrecht-button-border-color);
1969
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
1970
1971
  border-radius: var(--utrecht-button-border-radius);
1971
1972
  border-style: solid;
1972
1973
  border-width: var(--_utrecht-button-border-width);
1973
- border-bottom-width: var(--_utrecht-button-border-bottom-width);
1974
1974
  box-sizing: border-box;
1975
1975
  color: var(--_utrecht-button-color);
1976
1976
  cursor: var(--utrecht-action-activate-cursor);
@@ -2473,9 +2473,9 @@ ol.utrecht-breadcrumb__list {
2473
2473
  var(--utrecht-data-list-rows-column-inline-size, 80%)
2474
2474
  );
2475
2475
  --_utrecht-auto-col: minmax(var(--_utrecht-minmax), max-content);
2476
- border-bottom-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
2477
- border-bottom-style: solid;
2478
- border-bottom-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
2476
+ border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
2477
+ border-block-end-style: solid;
2478
+ border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
2479
2479
  display: grid;
2480
2480
  gap: 0 var(--utrecht-data-list-rows-gap);
2481
2481
  grid-auto-columns: 1fr;
@@ -2730,7 +2730,7 @@ ol.utrecht-breadcrumb__list {
2730
2730
  border: 0;
2731
2731
  margin-inline-end: 0;
2732
2732
  margin-inline-start: 0;
2733
- min-width: 0;
2733
+ min-inline-size: 0;
2734
2734
  padding-block-end: 0;
2735
2735
  padding-block-start: 0.01em;
2736
2736
  padding-inline-end: 0;
@@ -3192,12 +3192,12 @@ ol.utrecht-breadcrumb__list {
3192
3192
  * Copyright (c) 2021-2022 Frameless B.V.
3193
3193
  */
3194
3194
  .utrecht-icon {
3195
+ block-size: var(--utrecht-icon-size);
3195
3196
  color: var(--utrecht-icon-color);
3196
3197
  display: inline-block;
3197
- height: var(--utrecht-icon-size);
3198
+ inline-size: var(--utrecht-icon-size);
3198
3199
  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
3199
3200
  position: relative;
3200
- width: var(--utrecht-icon-size);
3201
3201
  }
3202
3202
 
3203
3203
  .utrecht-icon svg {
@@ -3207,7 +3207,9 @@ ol.utrecht-breadcrumb__list {
3207
3207
  *
3208
3208
  * <svg width="128px" height="128px">
3209
3209
  */
3210
+ /* stylelint-disable-next-line property-disallowed-list */
3210
3211
  height: 100%;
3212
+ /* stylelint-disable-next-line property-disallowed-list */
3211
3213
  width: 100%;
3212
3214
  }
3213
3215
 
@@ -3222,18 +3224,24 @@ ol.utrecht-breadcrumb__list {
3222
3224
  * Copyright (c) 2020-2022 Frameless B.V.
3223
3225
  */
3224
3226
  .utrecht-img {
3227
+ /* stylelint-disable-next-line property-disallowed-list */
3225
3228
  height: auto;
3229
+ /* stylelint-disable-next-line property-disallowed-list */
3226
3230
  width: auto;
3227
3231
  }
3228
3232
 
3229
3233
  .utrecht-img--scale-down {
3230
3234
  /* use this class name with caution, text contained in image might become too small to read */
3235
+ /* stylelint-disable-next-line property-disallowed-list */
3231
3236
  max-height: 100%;
3237
+ /* stylelint-disable-next-line property-disallowed-list */
3232
3238
  max-width: 100%;
3233
3239
  }
3234
3240
 
3235
3241
  .utrecht-img--photo {
3242
+ /* stylelint-disable-next-line property-disallowed-list */
3236
3243
  max-height: 100%;
3244
+ /* stylelint-disable-next-line property-disallowed-list */
3237
3245
  max-width: 100%;
3238
3246
  }
3239
3247
 
@@ -3291,9 +3299,9 @@ ol.utrecht-breadcrumb__list {
3291
3299
  }
3292
3300
 
3293
3301
  .utrecht-link-list__item > a::before {
3302
+ block-size: 1em;
3294
3303
  content: "";
3295
3304
  display: inline-block;
3296
- height: 1em;
3297
3305
  }
3298
3306
 
3299
3307
  /**
@@ -3501,15 +3509,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
3501
3509
  --utrecht-icon-color: currentColor;
3502
3510
  align-items: center;
3503
3511
  background-color: var(--utrecht-link-social-background-color);
3512
+ block-size: var(--utrecht-link-social-size);
3504
3513
  border-color: var(--utrecht-link-social-border-color);
3505
3514
  border-radius: 50%;
3506
3515
  border-style: solid;
3507
3516
  border-width: var(--utrecht-link-social-border-width);
3508
3517
  color: var(--utrecht-link-social-color);
3509
3518
  display: inline-flex;
3510
- height: var(--utrecht-link-social-size);
3519
+ inline-size: var(--utrecht-link-social-size);
3511
3520
  justify-content: center;
3512
- width: var(--utrecht-link-social-size);
3513
3521
  }
3514
3522
 
3515
3523
  .utrecht-link-social:hover,
@@ -3888,6 +3896,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3888
3896
  --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
3889
3897
  align-items: center;
3890
3898
  background-color: var(--utrecht-map-marker-background-color);
3899
+ block-size: var(--utrecht-map-marker-size);
3891
3900
  border-color: var(--utrecht-map-marker-border-color);
3892
3901
  border-radius: 50%;
3893
3902
  border-style: solid;
@@ -3895,9 +3904,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3895
3904
  box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
3896
3905
  color: var(--utrecht-map-marker-color);
3897
3906
  display: flex;
3898
- height: var(--utrecht-map-marker-size);
3907
+ inline-size: var(--utrecht-map-marker-size);
3899
3908
  justify-content: center;
3900
- width: var(--utrecht-map-marker-size);
3901
3909
  }
3902
3910
 
3903
3911
  /**
@@ -3911,8 +3919,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3911
3919
  */
3912
3920
  /* stylelint-disable-next-line block-no-empty */
3913
3921
  .utrecht-menulijst {
3914
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3915
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3922
+ border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3923
+ border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3916
3924
  font-family: var(--utrecht-document-font-family);
3917
3925
  padding-block-end: var(--utrecht-space-block-sm);
3918
3926
  padding-block-start: var(--utrecht-space-block-sm);
@@ -3981,11 +3989,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
3981
3989
  --utrecht-sidenav-marker-outline-width: 2px;
3982
3990
  border-block-end: 1px solid var(--utrecht-color-grey-80);
3983
3991
  border-block-start: 1px solid var(--utrecht-color-grey-80);
3992
+ inline-size: 19rem;
3984
3993
  margin-block-end: 0;
3985
3994
  margin-block-start: 0;
3986
3995
  padding-block-end: 0;
3987
3996
  padding-block-start: 0;
3988
- width: 19rem;
3989
3997
  }
3990
3998
 
3991
3999
  .utrecht-sidenav__list {
@@ -4064,15 +4072,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
4064
4072
  .utrecht-sidenav__link--parent,
4065
4073
  .utrecht-sidenav__link--child)::after {
4066
4074
  background: var(--utrecht-sidenav-connection-color);
4067
- bottom: 0;
4075
+ block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
4068
4076
  content: "";
4069
4077
  display: block;
4070
- height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
4071
- left: 3px;
4078
+ inline-size: var(--utrecht-sidenav-connection-inline-size);
4079
+ inset-block-end: 0;
4080
+ inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
4081
+ inset-inline-start: 3px;
4072
4082
  overflow: hidden;
4073
4083
  position: absolute;
4074
- top: calc(var(--utrecht-sidenav-marker-offset));
4075
- width: var(--utrecht-sidenav-connection-inline-size);
4076
4084
  z-index: 5;
4077
4085
  }
4078
4086
 
@@ -4086,27 +4094,27 @@ however browsers don't seem to have implemented great looking supixel tweening y
4086
4094
  /* Little fix to move the dot to the right */
4087
4095
  .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
4088
4096
  background-color: var(--utrecht-sidenav-item-marker-color);
4097
+ block-size: var(--utrecht-sidenav-marker-height);
4089
4098
  border-radius: 100%;
4090
4099
  content: "";
4091
- height: var(--utrecht-sidenav-marker-height);
4092
- left: var(--utrecht-sidenav-marker-offset);
4100
+ inline-size: 8px;
4101
+ inset-block-start: 20px; /* Hard value? */
4102
+ inset-inline-start: var(--utrecht-sidenav-marker-offset);
4093
4103
  overflow: hidden;
4094
4104
  position: absolute;
4095
- top: 20px; /* Hard value? */
4096
4105
  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
4097
- width: 8px;
4098
4106
  z-index: 10;
4099
4107
  }
4100
4108
 
4101
4109
  /* Add dot bullets on child links */
4102
4110
  .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
4103
4111
  background-color: transparent;
4112
+ block-size: 4px;
4104
4113
  border: 2px solid var(--utrecht-sidenav-link-color);
4105
- height: 4px;
4106
- left: 1.2rem;
4107
- top: 16px;
4114
+ inline-size: 4px;
4115
+ inset-block-start: 16px;
4116
+ inset-inline-start: 1.2rem;
4108
4117
  transform: translateY(-50%) translateX(-19.5px);
4109
- width: 4px;
4110
4118
  }
4111
4119
 
4112
4120
  /* selector must override .utrecht-sidenav__marker--child */
@@ -4990,6 +4998,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
4990
4998
  * Copyright (c) 2021 Robbert Broersma
4991
4999
  */
4992
5000
  /* stylelint-disable-next-line block-no-empty */
5001
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
5002
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
5003
+ /* stylelint-disable order/properties-alphabetical-order */
4993
5004
  /* stylelint-disable-next-line block-no-empty */
4994
5005
  .utrecht-select {
4995
5006
  -moz-appearance: none;
@@ -5010,12 +5021,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
5010
5021
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
5011
5022
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
5012
5023
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
5024
+ inline-size: 100%;
5013
5025
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
5014
5026
  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
5015
5027
  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
5016
5028
  padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
5017
5029
  padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
5018
- width: 100%;
5019
5030
  }
5020
5031
 
5021
5032
  .utrecht-select--disabled {
@@ -5054,9 +5065,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5054
5065
  )
5055
5066
  );
5056
5067
  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))));
5057
- 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))));
5058
5068
  border-width: var(--_utrecht-select-border-width);
5059
- border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
5069
+ border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
5070
+ 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))));
5060
5071
  }
5061
5072
 
5062
5073
  /* stylelint-disable-next-line block-no-empty */
@@ -5275,10 +5286,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
5275
5286
  border-width: var(--utrecht-table-border-width, 0);
5276
5287
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
5277
5288
  font-size: var(--utrecht-table-font-size, inherit);
5289
+ inline-size: 100%;
5278
5290
  line-height: var(--utrecht-table-line-height, inherit);
5279
5291
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
5280
5292
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
5281
- width: 100%;
5282
5293
  }
5283
5294
 
5284
5295
  .utrecht-table--distanced {
@@ -5432,11 +5443,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
5432
5443
  * Copyright (c) 2021 Robbert Broersma
5433
5444
  */
5434
5445
  /* stylelint-disable-next-line block-no-empty */
5446
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
5447
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
5448
+ /* stylelint-disable order/properties-alphabetical-order */
5435
5449
  .utrecht-textarea {
5436
5450
  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
5437
5451
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
5452
+ block-size: initial; /* harden */
5438
5453
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
5439
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
5454
+ border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
5440
5455
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
5441
5456
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
5442
5457
  border-style: solid;
@@ -5445,7 +5460,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5445
5460
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
5446
5461
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
5447
5462
  font-weight: initial; /* harden */
5448
- height: initial; /* harden */
5463
+ inline-size: 100%;
5449
5464
  line-height: var(--utrecht-textarea-line-height, initial);
5450
5465
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
5451
5466
  min-block-size: var(--utrecht-textarea-min-block-size);
@@ -5455,7 +5470,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5455
5470
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
5456
5471
  resize: vertical;
5457
5472
  resize: block;
5458
- width: 100%;
5459
5473
  }
5460
5474
 
5461
5475
  .utrecht-textarea--invalid {
@@ -5467,9 +5481,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5467
5481
  )
5468
5482
  );
5469
5483
  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))));
5470
- 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))));
5471
5484
  border-width: var(--_utrecht-textarea-border-width);
5472
- border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5485
+ border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5486
+ 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))));
5473
5487
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5474
5488
  }
5475
5489
 
@@ -5548,9 +5562,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5548
5562
  )
5549
5563
  );
5550
5564
  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))));
5551
- 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))));
5552
5565
  border-width: var(--_utrecht-textarea-border-width);
5553
- border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5566
+ border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5567
+ 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))));
5554
5568
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5555
5569
  }
5556
5570
  .utrecht-textarea--html-textarea:read-only {
@@ -5584,10 +5598,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
5584
5598
  * Copyright (c) 2021 Robbert Broersma
5585
5599
  */
5586
5600
  /* stylelint-disable-next-line block-no-empty */
5601
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
5602
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
5603
+ /* stylelint-disable order/properties-alphabetical-order */
5587
5604
  .utrecht-textbox {
5588
5605
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
5606
+ block-size: initial; /* harden */
5589
5607
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
5590
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
5608
+ border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
5591
5609
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
5592
5610
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
5593
5611
  border-style: solid;
@@ -5596,14 +5614,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
5596
5614
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
5597
5615
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
5598
5616
  font-weight: initial; /* harden */
5599
- height: initial; /* harden */
5617
+ inline-size: 100%;
5600
5618
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
5601
5619
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
5602
5620
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
5603
5621
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
5604
5622
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
5605
5623
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
5606
- width: 100%;
5607
5624
  }
5608
5625
 
5609
5626
  .utrecht-textbox--invalid {
@@ -5615,9 +5632,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5615
5632
  )
5616
5633
  );
5617
5634
  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))));
5618
- 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))));
5619
5635
  border-width: var(--_utrecht-textbox-border-width);
5620
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
5636
+ border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
5637
+ 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))));
5621
5638
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5622
5639
  }
5623
5640
 
@@ -5728,9 +5745,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5728
5745
  )
5729
5746
  );
5730
5747
  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))));
5731
- 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))));
5732
5748
  border-width: var(--_utrecht-textbox-border-width);
5733
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
5749
+ border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
5750
+ 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))));
5734
5751
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5735
5752
  }
5736
5753
  .utrecht-textbox--html-input:read-only {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.523",
2
+ "version": "1.0.0-alpha.525",
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": "74fc6f880f17cabc3ddfcc9096ab998ce908d6ae"
29
+ "gitHead": "e95d6c1c13f8735e0768216b5bff64f0c0a5090f"
30
30
  }