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

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 +13 -4
  2. package/dist/index.css +70 -22
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -390,6 +390,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
390
390
  * Copyright (c) 2021 Robbert Broersma
391
391
  */
392
392
  /* stylelint-disable-next-line block-no-empty */
393
+ /* stylelint-disable-next-line block-no-empty */
393
394
  /* stylelint-disable selector-class-pattern */
394
395
  /**
395
396
  * @license EUPL-1.2
@@ -991,12 +992,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
991
992
  white-space: nowrap;
992
993
  }
993
994
  .utrecht-html ol {
995
+ /* Configure `width` and `text-align` for `--center` */
994
996
  font-family: var(--utrecht-document-font-family, inherit);
995
997
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
996
998
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
997
999
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
998
1000
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
999
1001
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
1002
+ text-align: start;
1003
+ width: max-content;
1000
1004
  --utrecht-space-around: 1;
1001
1005
  }
1002
1006
  .utrecht-html ol > li {
@@ -1237,15 +1241,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
1237
1241
  text-align: var(--utrecht-table-caption-text-align, center);
1238
1242
  }
1239
1243
  .utrecht-html thead {
1244
+ --_utrecht-table-header-cell-vertical-align: bottom;
1240
1245
  background-color: var(--utrecht-table-header-background-color);
1241
1246
  color: var(--utrecht-table-header-color);
1242
1247
  font-weight: var(--utrecht-table-header-font-weight);
1243
1248
  page-break-inside: avoid;
1244
1249
  text-transform: var(--utrecht-table-header-text-transform);
1245
- vertical-align: bottom;
1246
- }
1247
- .utrecht-html tbody {
1248
- vertical-align: baseline;
1249
1250
  }
1250
1251
  .utrecht-html th {
1251
1252
  color: var(--utrecht-table-header-cell-color);
@@ -1253,6 +1254,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1253
1254
  font-weight: var(--utrecht-table-header-cell-font-weight);
1254
1255
  text-align: start;
1255
1256
  text-transform: var(--utrecht-table-header-cell-text-transform);
1257
+ vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
1256
1258
  }
1257
1259
  .utrecht-html th,
1258
1260
  .utrecht-html td {
@@ -1265,6 +1267,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1265
1267
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
1266
1268
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
1267
1269
  text-align: start;
1270
+ vertical-align: top;
1268
1271
  }
1269
1272
  .utrecht-html td:first-child,
1270
1273
  .utrecht-html th:first-child {
@@ -1360,8 +1363,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1360
1363
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1361
1364
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1362
1365
  border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
1366
+ color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1363
1367
  }
1364
1368
  .utrecht-html textarea:read-only {
1369
+ background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
1365
1370
  border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
1366
1371
  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1367
1372
  }
@@ -1494,6 +1499,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1494
1499
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1495
1500
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1496
1501
  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
1502
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1497
1503
  }
1498
1504
  .utrecht-html input:not([type]):read-only,
1499
1505
  .utrecht-html input[type=date i]:read-only,
@@ -1508,6 +1514,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1508
1514
  .utrecht-html input[type=time i]:read-only,
1509
1515
  .utrecht-html input[type=url i]:read-only,
1510
1516
  .utrecht-html input[type=week i]:read-only {
1517
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1511
1518
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1512
1519
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1513
1520
  }
@@ -1573,6 +1580,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1573
1580
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1574
1581
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1575
1582
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1583
+ text-align: start;
1584
+ width: max-content;
1576
1585
  --utrecht-space-around: 1;
1577
1586
  }
1578
1587
  .utrecht-html ul > li {
package/dist/index.css CHANGED
@@ -307,6 +307,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
307
307
  max-inline-size: var(--utrecht-article-max-inline-size);
308
308
  }
309
309
 
310
+ /**
311
+ * @license EUPL-1.2
312
+ * Copyright (c) 2020-2022 Gemeente Utrecht
313
+ * Copyright (c) 2020-2022 Frameless B.V.
314
+ */
310
315
  /**
311
316
  * @license EUPL-1.2
312
317
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -337,7 +342,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
337
342
  * Copyright (c) 2020-2022 Gemeente Utrecht
338
343
  * Copyright (c) 2020-2022 Frameless B.V.
339
344
  */
345
+ /**
346
+ * @license EUPL-1.2
347
+ * Copyright (c) 2020-2022 Gemeente Utrecht
348
+ * Copyright (c) 2020-2022 Frameless B.V.
349
+ */
340
350
  .utrecht-badge-data {
351
+ /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
341
352
  background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
342
353
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
343
354
  color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
@@ -346,7 +357,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
346
357
  font-size: var(--utrecht-badge-font-size, inherit);
347
358
  font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
348
359
  font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
349
- line-height: var(--utrecht-badge-line-height);
360
+ line-height: var(--utrecht-badge-line-height, 1em);
350
361
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
351
362
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
352
363
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -356,6 +367,22 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
356
367
  text-transform: var(--utrecht-badge-data-text-transform, inherit);
357
368
  }
358
369
 
370
+ /**
371
+ * @license EUPL-1.2
372
+ * Copyright (c) 2020-2022 Gemeente Utrecht
373
+ * Copyright (c) 2020-2022 Frameless B.V.
374
+ */
375
+ /**
376
+ * @license EUPL-1.2
377
+ * Copyright (c) 2020-2022 Gemeente Utrecht
378
+ * Copyright (c) 2020-2022 Frameless B.V.
379
+ */
380
+ .utrecht-badge-list {
381
+ display: flex;
382
+ flex-wrap: wrap;
383
+ gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
384
+ }
385
+
359
386
  /**
360
387
  * @license EUPL-1.2
361
388
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -367,6 +394,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
367
394
  * Copyright (c) 2020-2022 Frameless B.V.
368
395
  */
369
396
  .utrecht-badge-status {
397
+ /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
370
398
  background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
371
399
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
372
400
  color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
@@ -375,7 +403,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
375
403
  font-size: var(--utrecht-badge-font-size, inherit);
376
404
  font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
377
405
  font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
378
- line-height: var(--utrecht-badge-line-height);
406
+ line-height: var(--utrecht-badge-line-height, 1em);
379
407
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
380
408
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
381
409
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -1788,18 +1816,18 @@ ol.utrecht-breadcrumb__list {
1788
1816
  cursor: var(--utrecht-action-disabled-cursor);
1789
1817
  }
1790
1818
 
1791
- .utrecht-button-link--html-a:active {
1819
+ .utrecht-button-link--html-a:link:active {
1792
1820
  background-color: var(--_utrecht-button-active-background-color);
1793
1821
  border-color: var(--_utrecht-button-active-border-color);
1794
1822
  color: var(--_utrecht-button-active-color);
1795
1823
  }
1796
- .utrecht-button-link--html-a:focus {
1824
+ .utrecht-button-link--html-a:link:focus {
1797
1825
  background-color: var(--_utrecht-button-focus-background-color);
1798
1826
  border-color: var(--_utrecht-button-focus-border-color);
1799
1827
  color: var(--_utrecht-button-focus-color);
1800
1828
  scale: var(--utrecht-button-focus-scale, 1);
1801
1829
  }
1802
- .utrecht-button-link--html-a:focus-visible {
1830
+ .utrecht-button-link--html-a:link:focus-visible {
1803
1831
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1804
1832
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1805
1833
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
@@ -3097,7 +3125,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3097
3125
  user-select: none;
3098
3126
  }
3099
3127
 
3100
- .utrecht-link-button--hover, .utrecht-link-button--html-button:hover {
3128
+ .utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
3101
3129
  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
3102
3130
  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
3103
3131
  text-decoration-skip: none;
@@ -3105,7 +3133,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3105
3133
  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
3106
3134
  }
3107
3135
 
3108
- .utrecht-link-button--active, .utrecht-link-button--html-button:active {
3136
+ .utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
3109
3137
  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
3110
3138
  }
3111
3139
 
@@ -3115,7 +3143,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3115
3143
  text-decoration: none;
3116
3144
  }
3117
3145
 
3118
- .utrecht-link-button--focus, .utrecht-link-button--html-button:focus {
3146
+ .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
3119
3147
  background-color: var(--utrecht-link-focus-background-color, transparent);
3120
3148
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
3121
3149
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -3439,21 +3467,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
3439
3467
  * Copyright (c) 2021 Robbert Broersma
3440
3468
  */
3441
3469
  .utrecht-logo-button {
3470
+ --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
3442
3471
  --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
3443
3472
  --utrecht-logo-max-block-size: var(--utrecht-logo-button-block-size, 50px);
3444
3473
  --utrecht-logo-max-inline-size: var(--utrecht-logo-button-block-size, 50px);
3474
+ align-items: flex-start;
3445
3475
  display: inline-flex;
3446
3476
  gap: var(--utrecht-space-inline-sm);
3447
3477
  }
3448
3478
 
3449
- .utrecht-logo-button__logo {
3450
- order: 1;
3451
- }
3452
-
3453
- .utrecht-logo-button__button {
3454
- order: 2;
3455
- }
3456
-
3457
3479
  /**
3458
3480
  * @license EUPL-1.2
3459
3481
  * Copyright (c) 2021 Gemeente Utrecht
@@ -3941,12 +3963,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
3941
3963
  */
3942
3964
  .utrecht-ordered-list,
3943
3965
  .utrecht-ordered-list--html-content ol {
3966
+ /* Configure `width` and `text-align` for `--center` */
3944
3967
  font-family: var(--utrecht-document-font-family, inherit);
3945
3968
  font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
3946
3969
  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
3947
3970
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
3948
3971
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
3949
3972
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
3973
+ text-align: start;
3974
+ width: max-content;
3975
+ }
3976
+
3977
+ .utrecht-ordered-list--center {
3978
+ margin-inline-end: auto;
3979
+ margin-inline-start: auto;
3950
3980
  }
3951
3981
 
3952
3982
  .utrecht-ordered-list--distanced {
@@ -4261,6 +4291,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
4261
4291
  --utrecht-space-around: 1;
4262
4292
  }
4263
4293
 
4294
+ /**
4295
+ * @license EUPL-1.2
4296
+ * Copyright (c) 2021 Gemeente Utrecht
4297
+ * Copyright (c) 2021 Robbert Broersma
4298
+ */
4264
4299
  /**
4265
4300
  * @license EUPL-1.2
4266
4301
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4767,6 +4802,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4767
4802
  * Copyright (c) 2021 Robbert Broersma
4768
4803
  */
4769
4804
  /* stylelint-disable-next-line block-no-empty */
4805
+ /* stylelint-disable-next-line block-no-empty */
4770
4806
  .utrecht-table {
4771
4807
  border-collapse: collapse;
4772
4808
  border-color: var(--utrecht-table-border-color, 0);
@@ -4798,12 +4834,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
4798
4834
 
4799
4835
  .utrecht-table--html-table > thead,
4800
4836
  .utrecht-table__header {
4837
+ --_utrecht-table-header-cell-vertical-align: bottom;
4801
4838
  background-color: var(--utrecht-table-header-background-color);
4802
4839
  color: var(--utrecht-table-header-color);
4803
4840
  font-weight: var(--utrecht-table-header-font-weight);
4804
4841
  page-break-inside: avoid;
4805
4842
  text-transform: var(--utrecht-table-header-text-transform);
4806
- vertical-align: bottom;
4807
4843
  }
4808
4844
 
4809
4845
  .utrecht-table--html-table > thead > tr:last-of-type,
@@ -4813,11 +4849,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
4813
4849
  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
4814
4850
  }
4815
4851
 
4816
- .utrecht-table--html-table > tbody,
4817
- .utrecht-table__body {
4818
- vertical-align: baseline;
4819
- }
4820
-
4821
4852
  /* `.utrecht-table--html-table` should not affect nested tables.
4822
4853
  * We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */
4823
4854
  /* stylelint-disable no-descending-specificity */
@@ -4839,6 +4870,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4839
4870
  font-weight: var(--utrecht-table-header-cell-font-weight);
4840
4871
  text-align: start;
4841
4872
  text-transform: var(--utrecht-table-header-cell-text-transform);
4873
+ vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
4842
4874
  }
4843
4875
 
4844
4876
  .utrecht-table--html-table > tr > td,
@@ -4855,6 +4887,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4855
4887
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
4856
4888
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
4857
4889
  text-align: start;
4890
+ vertical-align: top;
4858
4891
  }
4859
4892
 
4860
4893
  .utrecht-table--html-table > tr > td:first-child,
@@ -4942,6 +4975,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4942
4975
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
4943
4976
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
4944
4977
  border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
4978
+ color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4945
4979
  }
4946
4980
 
4947
4981
  .utrecht-textarea--disabled {
@@ -4972,6 +5006,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4972
5006
  }
4973
5007
 
4974
5008
  .utrecht-textarea--read-only {
5009
+ background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
4975
5010
  border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
4976
5011
  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
4977
5012
  }
@@ -5013,8 +5048,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
5013
5048
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5014
5049
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5015
5050
  border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
5051
+ color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5016
5052
  }
5017
5053
  .utrecht-textarea--html-textarea:read-only {
5054
+ background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
5018
5055
  border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
5019
5056
  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5020
5057
  }
@@ -5070,6 +5107,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5070
5107
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5071
5108
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5072
5109
  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5110
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5073
5111
  }
5074
5112
 
5075
5113
  .utrecht-textbox--disabled {
@@ -5100,6 +5138,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5100
5138
  }
5101
5139
 
5102
5140
  .utrecht-textbox--read-only {
5141
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5103
5142
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5104
5143
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5105
5144
  }
@@ -5155,8 +5194,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
5155
5194
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5156
5195
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5157
5196
  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5197
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5158
5198
  }
5159
5199
  .utrecht-textbox--html-input:read-only {
5200
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
5160
5201
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
5161
5202
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5162
5203
  }
@@ -5195,6 +5236,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
5195
5236
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
5196
5237
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
5197
5238
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
5239
+ text-align: start;
5240
+ width: max-content;
5241
+ }
5242
+
5243
+ .utrecht-unordered-list--center {
5244
+ margin-inline-end: auto;
5245
+ margin-inline-start: auto;
5198
5246
  }
5199
5247
 
5200
5248
  .utrecht-unordered-list--distanced {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.465",
2
+ "version": "1.0.0-alpha.467",
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": "0a1a8f203f3a3a17d6daaf84fbecb1c4dbbcac0d"
29
+ "gitHead": "9a3400530b243db0503af267dbdaac5c496a2cb2"
30
30
  }