@utrecht/component-library-css 1.0.0-alpha.524 → 1.0.0-alpha.526

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 +22 -14
  2. package/dist/index.css +51 -38
  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;
@@ -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);
@@ -1452,12 +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));
1458
1466
  block-size: initial; /* harden */
1459
1467
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1460
- 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)));
1461
1469
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
1462
1470
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
1463
1471
  border-style: solid;
@@ -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 {
@@ -1544,7 +1552,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1544
1552
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
1545
1553
  block-size: initial; /* harden */
1546
1554
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
1547
- 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)));
1548
1556
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
1549
1557
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
1550
1558
  border-style: solid;
@@ -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
@@ -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 {
@@ -727,10 +727,10 @@ ol.utrecht-breadcrumb__list {
727
727
  content: " ";
728
728
  display: block;
729
729
  inline-size: 0;
730
- left: 100%;
730
+ inset-block-start: 50%;
731
+ inset-inline-start: 100%;
731
732
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
732
733
  position: absolute;
733
- top: 50%;
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);
@@ -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;
@@ -3232,12 +3232,16 @@ ol.utrecht-breadcrumb__list {
3232
3232
 
3233
3233
  .utrecht-img--scale-down {
3234
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 */
3235
3236
  max-height: 100%;
3237
+ /* stylelint-disable-next-line property-disallowed-list */
3236
3238
  max-width: 100%;
3237
3239
  }
3238
3240
 
3239
3241
  .utrecht-img--photo {
3242
+ /* stylelint-disable-next-line property-disallowed-list */
3240
3243
  max-height: 100%;
3244
+ /* stylelint-disable-next-line property-disallowed-list */
3241
3245
  max-width: 100%;
3242
3246
  }
3243
3247
 
@@ -3915,8 +3919,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3915
3919
  */
3916
3920
  /* stylelint-disable-next-line block-no-empty */
3917
3921
  .utrecht-menulijst {
3918
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3919
- 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);
3920
3924
  font-family: var(--utrecht-document-font-family);
3921
3925
  padding-block-end: var(--utrecht-space-block-sm);
3922
3926
  padding-block-start: var(--utrecht-space-block-sm);
@@ -4069,14 +4073,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
4069
4073
  .utrecht-sidenav__link--child)::after {
4070
4074
  background: var(--utrecht-sidenav-connection-color);
4071
4075
  block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
4072
- bottom: 0;
4073
4076
  content: "";
4074
4077
  display: block;
4075
4078
  inline-size: var(--utrecht-sidenav-connection-inline-size);
4076
- left: 3px;
4079
+ inset-block-end: 0;
4080
+ inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
4081
+ inset-inline-start: 3px;
4077
4082
  overflow: hidden;
4078
4083
  position: absolute;
4079
- top: calc(var(--utrecht-sidenav-marker-offset));
4080
4084
  z-index: 5;
4081
4085
  }
4082
4086
 
@@ -4094,10 +4098,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
4094
4098
  border-radius: 100%;
4095
4099
  content: "";
4096
4100
  inline-size: 8px;
4097
- left: var(--utrecht-sidenav-marker-offset);
4101
+ inset-block-start: 20px; /* Hard value? */
4102
+ inset-inline-start: var(--utrecht-sidenav-marker-offset);
4098
4103
  overflow: hidden;
4099
4104
  position: absolute;
4100
- top: 20px; /* Hard value? */
4101
4105
  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
4102
4106
  z-index: 10;
4103
4107
  }
@@ -4108,8 +4112,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
4108
4112
  block-size: 4px;
4109
4113
  border: 2px solid var(--utrecht-sidenav-link-color);
4110
4114
  inline-size: 4px;
4111
- left: 1.2rem;
4112
- top: 16px;
4115
+ inset-block-start: 16px;
4116
+ inset-inline-start: 1.2rem;
4113
4117
  transform: translateY(-50%) translateX(-19.5px);
4114
4118
  }
4115
4119
 
@@ -4994,6 +4998,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
4994
4998
  * Copyright (c) 2021 Robbert Broersma
4995
4999
  */
4996
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 */
4997
5004
  /* stylelint-disable-next-line block-no-empty */
4998
5005
  .utrecht-select {
4999
5006
  -moz-appearance: none;
@@ -5058,9 +5065,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5058
5065
  )
5059
5066
  );
5060
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))));
5061
- 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))));
5062
5068
  border-width: var(--_utrecht-select-border-width);
5063
- 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))));
5064
5071
  }
5065
5072
 
5066
5073
  /* stylelint-disable-next-line block-no-empty */
@@ -5436,12 +5443,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
5436
5443
  * Copyright (c) 2021 Robbert Broersma
5437
5444
  */
5438
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 */
5439
5449
  .utrecht-textarea {
5440
5450
  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
5441
5451
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
5442
5452
  block-size: initial; /* harden */
5443
5453
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
5444
- 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)));
5445
5455
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
5446
5456
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
5447
5457
  border-style: solid;
@@ -5471,9 +5481,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5471
5481
  )
5472
5482
  );
5473
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))));
5474
- 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))));
5475
5484
  border-width: var(--_utrecht-textarea-border-width);
5476
- 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))));
5477
5487
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5478
5488
  }
5479
5489
 
@@ -5552,9 +5562,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5552
5562
  )
5553
5563
  );
5554
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))));
5555
- 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))));
5556
5565
  border-width: var(--_utrecht-textarea-border-width);
5557
- 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))));
5558
5568
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5559
5569
  }
5560
5570
  .utrecht-textarea--html-textarea:read-only {
@@ -5588,11 +5598,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
5588
5598
  * Copyright (c) 2021 Robbert Broersma
5589
5599
  */
5590
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 */
5591
5604
  .utrecht-textbox {
5592
5605
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
5593
5606
  block-size: initial; /* harden */
5594
5607
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
5595
- 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)));
5596
5609
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
5597
5610
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
5598
5611
  border-style: solid;
@@ -5619,9 +5632,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5619
5632
  )
5620
5633
  );
5621
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))));
5622
- 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))));
5623
5635
  border-width: var(--_utrecht-textbox-border-width);
5624
- 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))));
5625
5638
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5626
5639
  }
5627
5640
 
@@ -5732,9 +5745,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
5732
5745
  )
5733
5746
  );
5734
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))));
5735
- 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))));
5736
5748
  border-width: var(--_utrecht-textbox-border-width);
5737
- 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))));
5738
5751
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5739
5752
  }
5740
5753
  .utrecht-textbox--html-input:read-only {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.524",
2
+ "version": "1.0.0-alpha.526",
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": "ad21494090b5e634262e846e807898efece1e228"
29
+ "gitHead": "d86adefb116a615696a127005f60e43de7841fff"
30
30
  }