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

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.
package/dist/html.css CHANGED
@@ -1034,7 +1034,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1034
1034
  white-space: nowrap;
1035
1035
  }
1036
1036
  .utrecht-html ol {
1037
- /* Configure `width` and `text-align` for `--center` */
1037
+ /* Configure `box-sizing` and `text-align` for `--center` */
1038
+ box-sizing: border-box;
1038
1039
  font-family: var(--utrecht-document-font-family, inherit);
1039
1040
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
1040
1041
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
@@ -1042,7 +1043,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
1042
1043
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
1043
1044
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
1044
1045
  text-align: start;
1045
- width: max-content;
1046
1046
  --utrecht-space-around: 1;
1047
1047
  }
1048
1048
  .utrecht-html ol > li {
@@ -1299,12 +1299,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
1299
1299
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
1300
1300
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
1301
1301
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
1302
+ inline-size: 100%;
1302
1303
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
1303
1304
  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
1304
1305
  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
1305
1306
  padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
1306
1307
  padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
1307
- width: 100%;
1308
1308
  /* <select> does not support :read-only */
1309
1309
  }
1310
1310
  .utrecht-html select:disabled {
@@ -1362,10 +1362,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1362
1362
  border-width: var(--utrecht-table-border-width, 0);
1363
1363
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
1364
1364
  font-size: var(--utrecht-table-font-size, inherit);
1365
+ inline-size: 100%;
1365
1366
  line-height: var(--utrecht-table-line-height, inherit);
1366
1367
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
1367
1368
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
1368
- width: 100%;
1369
1369
  --utrecht-space-around: 1;
1370
1370
  }
1371
1371
  .utrecht-html caption {
@@ -1455,6 +1455,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1455
1455
  .utrecht-html textarea {
1456
1456
  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1457
1457
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1458
+ block-size: initial; /* harden */
1458
1459
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1459
1460
  border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1460
1461
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
@@ -1465,7 +1466,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1465
1466
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
1466
1467
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
1467
1468
  font-weight: initial; /* harden */
1468
- height: initial; /* harden */
1469
+ inline-size: 100%;
1469
1470
  line-height: var(--utrecht-textarea-line-height, initial);
1470
1471
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
1471
1472
  min-block-size: var(--utrecht-textarea-min-block-size);
@@ -1475,7 +1476,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
1475
1476
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1476
1477
  resize: vertical;
1477
1478
  resize: block;
1478
- width: 100%;
1479
1479
  }
1480
1480
  .utrecht-html textarea:disabled {
1481
1481
  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))));
@@ -1542,6 +1542,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1542
1542
  .utrecht-html input[type=url i],
1543
1543
  .utrecht-html input[type=week i] {
1544
1544
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
1545
+ block-size: initial; /* harden */
1545
1546
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
1546
1547
  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
1547
1548
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
@@ -1552,14 +1553,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
1552
1553
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1553
1554
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
1554
1555
  font-weight: initial; /* harden */
1555
- height: initial; /* harden */
1556
+ inline-size: 100%;
1556
1557
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
1557
1558
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
1558
1559
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1559
1560
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1560
1561
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1561
1562
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1562
- width: 100%;
1563
1563
  }
1564
1564
  .utrecht-html input:not([type]):disabled,
1565
1565
  .utrecht-html input[type=date i]:disabled,
@@ -1735,6 +1735,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1735
1735
  font-variant-ligatures: none;
1736
1736
  }
1737
1737
  .utrecht-html ul {
1738
+ /* Configure `box-sizing` and `text-align` for `--center` */
1739
+ box-sizing: border-box;
1738
1740
  font-family: var(--utrecht-document-font-family, inherit);
1739
1741
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
1740
1742
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
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"));
@@ -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
+ inline-size: 0;
729
730
  left: 100%;
730
731
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
731
732
  position: absolute;
732
733
  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);
@@ -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
  /**
@@ -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,7 +3224,9 @@ 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
 
@@ -3291,9 +3295,9 @@ ol.utrecht-breadcrumb__list {
3291
3295
  }
3292
3296
 
3293
3297
  .utrecht-link-list__item > a::before {
3298
+ block-size: 1em;
3294
3299
  content: "";
3295
3300
  display: inline-block;
3296
- height: 1em;
3297
3301
  }
3298
3302
 
3299
3303
  /**
@@ -3501,15 +3505,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
3501
3505
  --utrecht-icon-color: currentColor;
3502
3506
  align-items: center;
3503
3507
  background-color: var(--utrecht-link-social-background-color);
3508
+ block-size: var(--utrecht-link-social-size);
3504
3509
  border-color: var(--utrecht-link-social-border-color);
3505
3510
  border-radius: 50%;
3506
3511
  border-style: solid;
3507
3512
  border-width: var(--utrecht-link-social-border-width);
3508
3513
  color: var(--utrecht-link-social-color);
3509
3514
  display: inline-flex;
3510
- height: var(--utrecht-link-social-size);
3515
+ inline-size: var(--utrecht-link-social-size);
3511
3516
  justify-content: center;
3512
- width: var(--utrecht-link-social-size);
3513
3517
  }
3514
3518
 
3515
3519
  .utrecht-link-social:hover,
@@ -3888,6 +3892,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3888
3892
  --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
3889
3893
  align-items: center;
3890
3894
  background-color: var(--utrecht-map-marker-background-color);
3895
+ block-size: var(--utrecht-map-marker-size);
3891
3896
  border-color: var(--utrecht-map-marker-border-color);
3892
3897
  border-radius: 50%;
3893
3898
  border-style: solid;
@@ -3895,9 +3900,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3895
3900
  box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
3896
3901
  color: var(--utrecht-map-marker-color);
3897
3902
  display: flex;
3898
- height: var(--utrecht-map-marker-size);
3903
+ inline-size: var(--utrecht-map-marker-size);
3899
3904
  justify-content: center;
3900
- width: var(--utrecht-map-marker-size);
3901
3905
  }
3902
3906
 
3903
3907
  /**
@@ -3981,11 +3985,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
3981
3985
  --utrecht-sidenav-marker-outline-width: 2px;
3982
3986
  border-block-end: 1px solid var(--utrecht-color-grey-80);
3983
3987
  border-block-start: 1px solid var(--utrecht-color-grey-80);
3988
+ inline-size: 19rem;
3984
3989
  margin-block-end: 0;
3985
3990
  margin-block-start: 0;
3986
3991
  padding-block-end: 0;
3987
3992
  padding-block-start: 0;
3988
- width: 19rem;
3989
3993
  }
3990
3994
 
3991
3995
  .utrecht-sidenav__list {
@@ -4064,15 +4068,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
4064
4068
  .utrecht-sidenav__link--parent,
4065
4069
  .utrecht-sidenav__link--child)::after {
4066
4070
  background: var(--utrecht-sidenav-connection-color);
4071
+ block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
4067
4072
  bottom: 0;
4068
4073
  content: "";
4069
4074
  display: block;
4070
- height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
4075
+ inline-size: var(--utrecht-sidenav-connection-inline-size);
4071
4076
  left: 3px;
4072
4077
  overflow: hidden;
4073
4078
  position: absolute;
4074
4079
  top: calc(var(--utrecht-sidenav-marker-offset));
4075
- width: var(--utrecht-sidenav-connection-inline-size);
4076
4080
  z-index: 5;
4077
4081
  }
4078
4082
 
@@ -4086,27 +4090,27 @@ however browsers don't seem to have implemented great looking supixel tweening y
4086
4090
  /* Little fix to move the dot to the right */
4087
4091
  .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
4088
4092
  background-color: var(--utrecht-sidenav-item-marker-color);
4093
+ block-size: var(--utrecht-sidenav-marker-height);
4089
4094
  border-radius: 100%;
4090
4095
  content: "";
4091
- height: var(--utrecht-sidenav-marker-height);
4096
+ inline-size: 8px;
4092
4097
  left: var(--utrecht-sidenav-marker-offset);
4093
4098
  overflow: hidden;
4094
4099
  position: absolute;
4095
4100
  top: 20px; /* Hard value? */
4096
4101
  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
4097
- width: 8px;
4098
4102
  z-index: 10;
4099
4103
  }
4100
4104
 
4101
4105
  /* Add dot bullets on child links */
4102
4106
  .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
4103
4107
  background-color: transparent;
4108
+ block-size: 4px;
4104
4109
  border: 2px solid var(--utrecht-sidenav-link-color);
4105
- height: 4px;
4110
+ inline-size: 4px;
4106
4111
  left: 1.2rem;
4107
4112
  top: 16px;
4108
4113
  transform: translateY(-50%) translateX(-19.5px);
4109
- width: 4px;
4110
4114
  }
4111
4115
 
4112
4116
  /* selector must override .utrecht-sidenav__marker--child */
@@ -4255,7 +4259,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
4255
4259
  */
4256
4260
  .utrecht-ordered-list,
4257
4261
  .utrecht-ordered-list--html-content ol {
4258
- /* Configure `width` and `text-align` for `--center` */
4262
+ /* Configure `box-sizing` and `text-align` for `--center` */
4263
+ box-sizing: border-box;
4259
4264
  font-family: var(--utrecht-document-font-family, inherit);
4260
4265
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
4261
4266
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
@@ -4263,12 +4268,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
4263
4268
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
4264
4269
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
4265
4270
  text-align: start;
4266
- width: max-content;
4267
4271
  }
4268
4272
 
4269
4273
  .utrecht-ordered-list--center {
4274
+ inline-size: max-content;
4270
4275
  margin-inline-end: auto;
4271
4276
  margin-inline-start: auto;
4277
+ max-inline-size: 100%;
4272
4278
  }
4273
4279
 
4274
4280
  .utrecht-ordered-list--distanced {
@@ -5008,12 +5014,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
5008
5014
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
5009
5015
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
5010
5016
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
5017
+ inline-size: 100%;
5011
5018
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
5012
5019
  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
5013
5020
  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
5014
5021
  padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
5015
5022
  padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
5016
- width: 100%;
5017
5023
  }
5018
5024
 
5019
5025
  .utrecht-select--disabled {
@@ -5273,10 +5279,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
5273
5279
  border-width: var(--utrecht-table-border-width, 0);
5274
5280
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
5275
5281
  font-size: var(--utrecht-table-font-size, inherit);
5282
+ inline-size: 100%;
5276
5283
  line-height: var(--utrecht-table-line-height, inherit);
5277
5284
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
5278
5285
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
5279
- width: 100%;
5280
5286
  }
5281
5287
 
5282
5288
  .utrecht-table--distanced {
@@ -5433,6 +5439,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5433
5439
  .utrecht-textarea {
5434
5440
  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
5435
5441
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
5442
+ block-size: initial; /* harden */
5436
5443
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
5437
5444
  border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
5438
5445
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
@@ -5443,7 +5450,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5443
5450
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
5444
5451
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
5445
5452
  font-weight: initial; /* harden */
5446
- height: initial; /* harden */
5453
+ inline-size: 100%;
5447
5454
  line-height: var(--utrecht-textarea-line-height, initial);
5448
5455
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
5449
5456
  min-block-size: var(--utrecht-textarea-min-block-size);
@@ -5453,7 +5460,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5453
5460
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
5454
5461
  resize: vertical;
5455
5462
  resize: block;
5456
- width: 100%;
5457
5463
  }
5458
5464
 
5459
5465
  .utrecht-textarea--invalid {
@@ -5584,6 +5590,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5584
5590
  /* stylelint-disable-next-line block-no-empty */
5585
5591
  .utrecht-textbox {
5586
5592
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
5593
+ block-size: initial; /* harden */
5587
5594
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
5588
5595
  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
5589
5596
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
@@ -5594,14 +5601,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
5594
5601
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
5595
5602
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
5596
5603
  font-weight: initial; /* harden */
5597
- height: initial; /* harden */
5604
+ inline-size: 100%;
5598
5605
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
5599
5606
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
5600
5607
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
5601
5608
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
5602
5609
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
5603
5610
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
5604
- width: 100%;
5605
5611
  }
5606
5612
 
5607
5613
  .utrecht-textbox--invalid {
@@ -5857,6 +5863,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
5857
5863
  */
5858
5864
  .utrecht-unordered-list,
5859
5865
  .utrecht-unordered-list--html-content ul {
5866
+ /* Configure `box-sizing` and `text-align` for `--center` */
5867
+ box-sizing: border-box;
5860
5868
  font-family: var(--utrecht-document-font-family, inherit);
5861
5869
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
5862
5870
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
@@ -5867,9 +5875,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
5867
5875
  }
5868
5876
 
5869
5877
  .utrecht-unordered-list--center {
5878
+ inline-size: max-content;
5870
5879
  margin-inline-end: auto;
5871
5880
  margin-inline-start: auto;
5872
- width: max-content;
5881
+ max-inline-size: 100%;
5873
5882
  }
5874
5883
 
5875
5884
  .utrecht-unordered-list--distanced {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.522",
2
+ "version": "1.0.0-alpha.524",
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": "2655f0a2e1247f58b5e7ae9e4844f0bb1c7d5c91"
29
+ "gitHead": "ad21494090b5e634262e846e807898efece1e228"
30
30
  }