@utrecht/component-library-css 1.0.0-alpha.310 → 1.0.0-alpha.313

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 +55 -48
  2. package/dist/index.css +106 -76
  3. package/package.json +3 -3
package/dist/html.css CHANGED
@@ -11,6 +11,7 @@
11
11
  /* Collection of all semantic HTML styles in the component library */
12
12
  /* stylelint-disable no-invalid-position-at-import-rule */
13
13
  .utrecht-html {
14
+ --utrecht-space-around: 1;
14
15
  /**
15
16
  * @license EUPL-1.2
16
17
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -85,7 +86,6 @@
85
86
  * @license EUPL-1.2
86
87
  * Copyright (c) 2021 Robbert Broersma
87
88
  */
88
- /* stylelint-disable-next-line block-no-empty */
89
89
  /**
90
90
  * @license EUPL-1.2
91
91
  * Copyright (c) 2021 Robbert Broersma
@@ -253,6 +253,11 @@
253
253
  /* stylelint-disable-next-line block-no-empty */
254
254
  /* stylelint-disable-next-line block-no-empty */
255
255
  /* stylelint-disable-next-line block-no-empty */
256
+ /**
257
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
258
+ *
259
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
260
+ */
256
261
  /**
257
262
  * @license EUPL-1.2
258
263
  * Copyright (c) 2021 Robbert Broersma
@@ -320,7 +325,6 @@
320
325
  * Copyright (c) 2021 Robbert Broersma
321
326
  */
322
327
  /* stylelint-disable-next-line block-no-empty */
323
- /* stylelint-disable-next-line block-no-empty */
324
328
  /* stylelint-disable selector-class-pattern */
325
329
  /**
326
330
  * @license EUPL-1.2
@@ -366,14 +370,15 @@
366
370
  .utrecht-html blockquote {
367
371
  font-family: var(--utrecht-document-font-family);
368
372
  font-size: var(--utrecht-blockquote-font-size);
373
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
374
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
369
375
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
370
376
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
371
377
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
372
378
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
373
379
  color: var(--utrecht-blockquote-content-color, inherit);
374
380
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
375
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
376
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
381
+ --utrecht-space-around: 1;
377
382
  }
378
383
  .utrecht-html input[type=button i],
379
384
  .utrecht-html input[type=reset i],
@@ -533,6 +538,8 @@
533
538
  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
534
539
  }
535
540
  .utrecht-html fieldset {
541
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
542
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
536
543
  border: 0;
537
544
  margin-inline-end: 0;
538
545
  margin-inline-start: 0;
@@ -541,8 +548,7 @@
541
548
  padding-block-start: 0.01em;
542
549
  padding-inline-end: 0;
543
550
  padding-inline-start: 0;
544
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
545
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
551
+ --utrecht-space-around: 1;
546
552
  }
547
553
  .utrecht-html legend {
548
554
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
@@ -555,8 +561,8 @@
555
561
  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
556
562
  padding-inline-end: 0;
557
563
  padding-inline-start: 0;
558
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
559
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
564
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
565
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
560
566
  }
561
567
  .utrecht-html label {
562
568
  color: var(--utrecht-form-label-color);
@@ -580,11 +586,11 @@
580
586
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
581
587
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
582
588
  line-height: var(--utrecht-heading-1-line-height);
583
- margin-block-end: 0;
584
- margin-block-start: 0;
589
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
590
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
591
+ page-break-after: avoid;
585
592
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
586
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
587
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
593
+ --utrecht-space-around: 1;
588
594
  }
589
595
  .utrecht-html h2 {
590
596
  page-break-after: avoid;
@@ -595,11 +601,11 @@
595
601
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
596
602
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
597
603
  line-height: var(--utrecht-heading-2-line-height);
598
- margin-block-end: 0;
599
- margin-block-start: 0;
604
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
605
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
606
+ page-break-after: avoid;
600
607
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
601
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
602
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
608
+ --utrecht-space-around: 1;
603
609
  }
604
610
  .utrecht-html h3 {
605
611
  page-break-after: avoid;
@@ -610,11 +616,11 @@
610
616
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
611
617
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
612
618
  line-height: var(--utrecht-heading-3-line-height);
613
- margin-block-end: 0;
614
- margin-block-start: 0;
619
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
620
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
621
+ page-break-after: avoid;
615
622
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
616
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
617
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
623
+ --utrecht-space-around: 1;
618
624
  }
619
625
  .utrecht-html h4 {
620
626
  page-break-after: avoid;
@@ -625,11 +631,11 @@
625
631
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
626
632
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
627
633
  line-height: var(--utrecht-heading-4-line-height);
628
- margin-block-end: 0;
629
- margin-block-start: 0;
634
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
635
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
636
+ page-break-after: avoid;
630
637
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
631
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
632
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
638
+ --utrecht-space-around: 1;
633
639
  }
634
640
  .utrecht-html h5 {
635
641
  page-break-after: avoid;
@@ -640,11 +646,11 @@
640
646
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
641
647
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
642
648
  line-height: var(--utrecht-heading-5-line-height);
643
- margin-block-end: 0;
644
- margin-block-start: 0;
649
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
650
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
651
+ page-break-after: avoid;
645
652
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
646
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
647
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
653
+ --utrecht-space-around: 1;
648
654
  }
649
655
  .utrecht-html h6 {
650
656
  page-break-after: avoid;
@@ -655,11 +661,11 @@
655
661
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
656
662
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
657
663
  line-height: var(--utrecht-heading-6-line-height);
658
- margin-block-end: 0;
659
- margin-block-start: 0;
664
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
665
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
666
+ page-break-after: avoid;
660
667
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
661
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
662
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
668
+ --utrecht-space-around: 1;
663
669
  }
664
670
  .utrecht-html a:link {
665
671
  color: var(--utrecht-link-color, blue);
@@ -704,11 +710,10 @@
704
710
  }
705
711
  .utrecht-html ol {
706
712
  font-family: var(--utrecht-document-font-family, inherit);
707
- margin-block-end: 0;
708
- margin-block-start: 0;
713
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
714
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
709
715
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
710
- margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
711
- margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
716
+ --utrecht-space-around: 1;
712
717
  }
713
718
  .utrecht-html ol > li {
714
719
  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
@@ -724,8 +729,8 @@
724
729
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
725
730
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
726
731
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
727
- margin-block-end: 0;
728
- margin-block-start: 0;
732
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
733
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
729
734
  }
730
735
  .utrecht-html p.lead {
731
736
  color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
@@ -734,8 +739,7 @@
734
739
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
735
740
  }
736
741
  .utrecht-html * ~ p {
737
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
738
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
742
+ --utrecht-space-around: 1;
739
743
  }
740
744
  .utrecht-html input[type=radio i] {
741
745
  /* reset native margin for input[type="radio" i] */
@@ -816,8 +820,9 @@
816
820
  border-color: var(--utrecht-separator-color);
817
821
  border-style: solid;
818
822
  border-width: 0 0 var(--utrecht-separator-block-size) 0;
819
- margin-block-end: var(--utrecht-separator-margin-block-end);
820
- margin-block-start: var(--utrecht-separator-margin-block-start);
823
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
824
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
825
+ --utrecht-space-around: 1;
821
826
  }
822
827
  .utrecht-html table {
823
828
  border-collapse: collapse;
@@ -826,9 +831,10 @@
826
831
  border-width: var(--utrecht-table-border-width, 0);
827
832
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
828
833
  font-size: var(--utrecht-table-font-size, inherit);
834
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
835
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
829
836
  width: 100%;
830
- margin-block-end: var(--utrecht-table-margin-block-end);
831
- margin-block-start: var(--utrecht-table-margin-block-start);
837
+ --utrecht-space-around: 1;
832
838
  }
833
839
  .utrecht-html caption {
834
840
  color: var(--utrecht-table-caption-color);
@@ -837,12 +843,14 @@
837
843
  font-weight: var(--utrecht-table-caption-font-weight);
838
844
  line-height: var(--utrecht-table-caption-line-height);
839
845
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
846
+ page-break-after: avoid;
840
847
  text-align: var(--utrecht-table-caption-text-align, center);
841
848
  }
842
849
  .utrecht-html thead {
843
850
  background-color: var(--utrecht-table-header-background-color);
844
851
  color: var(--utrecht-table-header-color);
845
852
  font-weight: var(--utrecht-table-header-font-weight);
853
+ page-break-inside: avoid;
846
854
  text-transform: var(--utrecht-table-header-text-transform);
847
855
  vertical-align: bottom;
848
856
  }
@@ -1154,11 +1162,10 @@
1154
1162
  font-family: var(--utrecht-document-font-family, inherit);
1155
1163
  font-size: var(--utrecht-document-font-size, inherit);
1156
1164
  line-height: var(--utrecht-document-line-height, inherit);
1157
- margin-block-end: 0;
1158
- margin-block-start: 0;
1165
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1166
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1159
1167
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1160
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1161
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1168
+ --utrecht-space-around: 1;
1162
1169
  }
1163
1170
  .utrecht-html ul > li {
1164
1171
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
package/dist/index.css CHANGED
@@ -195,6 +195,8 @@
195
195
  .utrecht-blockquote {
196
196
  font-family: var(--utrecht-document-font-family);
197
197
  font-size: var(--utrecht-blockquote-font-size);
198
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
199
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
198
200
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
199
201
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
200
202
  }
@@ -212,8 +214,7 @@
212
214
  }
213
215
 
214
216
  .utrecht-blockquote--distanced {
215
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
216
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
217
+ --utrecht-space-around: 1;
217
218
  }
218
219
 
219
220
  /**
@@ -605,6 +606,8 @@ ol.utrecht-breadcrumb__list {
605
606
  background-color: var(--utrecht-button-group-background-color);
606
607
  display: flex;
607
608
  gap: var(--utrecht-button-group-inline-gap, 1em);
609
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
610
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
608
611
  min-block-size: var(--utrecht-button-block-size);
609
612
  padding-block-end: var(--utrecht-button-group-padding-block-end);
610
613
  padding-block-start: var(--utrecht-button-group-padding-block-start);
@@ -614,6 +617,8 @@ ol.utrecht-breadcrumb__list {
614
617
  background-color: var(--utrecht-button-group-background-color);
615
618
  display: flex;
616
619
  gap: var(--utrecht-button-group-inline-gap, 1em);
620
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
621
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
617
622
  min-block-size: var(--utrecht-button-block-size);
618
623
  padding-block-end: var(--utrecht-button-group-padding-block-end);
619
624
  padding-block-start: var(--utrecht-button-group-padding-block-start);
@@ -1294,12 +1299,11 @@ ol.utrecht-breadcrumb__list {
1294
1299
  * Copyright (c) 2021-2022 Gemeente Utrecht
1295
1300
  * Copyright (c) 2021-2022 Frameless B.V.
1296
1301
  */
1297
- /* stylelint-disable-next-line block-no-empty */
1298
1302
  .utrecht-data-list {
1299
1303
  /* also set `margin-block` to reset browser styling of <dl> */
1300
1304
  display: block;
1301
- margin-block-end: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-end));
1302
- margin-block-start: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-start));
1305
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
1306
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
1303
1307
  }
1304
1308
 
1305
1309
  .utrecht-data-list__item-key {
@@ -1423,11 +1427,12 @@ ol.utrecht-breadcrumb__list {
1423
1427
  .utrecht-form-field-checkbox-group {
1424
1428
  font-family: var(--utrecht-document-font-family, inherit);
1425
1429
  font-size: var(--utrecht-paragraph-font-size);
1430
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1431
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1426
1432
  }
1427
1433
 
1428
1434
  .utrecht-form-field-checkbox-group--distanced {
1429
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1430
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1435
+ --utrecht-space-around: 1;
1431
1436
  }
1432
1437
 
1433
1438
  .utrecht-form-field-checkbox-group__label {
@@ -1449,12 +1454,14 @@ ol.utrecht-breadcrumb__list {
1449
1454
  */
1450
1455
  .utrecht-form-field {
1451
1456
  font-family: var(--utrecht-document-font-family, inherit);
1457
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
1458
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
1452
1459
  max-inline-size: var(--utrecht-form-field-max-inline-size);
1460
+ page-break-inside: avoid;
1453
1461
  }
1454
1462
 
1455
1463
  .utrecht-form-field--distanced {
1456
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1457
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1464
+ --utrecht-space-around: 1;
1458
1465
  }
1459
1466
 
1460
1467
  .utrecht-form-field__label--checkbox {
@@ -1474,11 +1481,12 @@ ol.utrecht-breadcrumb__list {
1474
1481
  font-family: var(--utrecht-document-font-family, inherit);
1475
1482
  font-size: var(--utrecht-form-field-description-font-size, inherit);
1476
1483
  font-style: var(--utrecht-form-field-description-font-style);
1484
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1485
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1477
1486
  }
1478
1487
 
1479
1488
  .utrecht-form-field-description--distanced {
1480
- margin-block-end: var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1481
- margin-block-start: var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1489
+ --utrecht-space-around: 1;
1482
1490
  }
1483
1491
 
1484
1492
  .utrecht-form-field-description--invalid {
@@ -1500,11 +1508,12 @@ ol.utrecht-breadcrumb__list {
1500
1508
  .utrecht-form-field-radio-group {
1501
1509
  font-family: var(--utrecht-document-font-family, inherit);
1502
1510
  font-size: var(--utrecht-paragraph-font-size);
1511
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1512
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1503
1513
  }
1504
1514
 
1505
1515
  .utrecht-form-field-radio-group--distanced {
1506
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1507
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1516
+ --utrecht-space-around: 1;
1508
1517
  }
1509
1518
 
1510
1519
  .utrecht-form-field-radio-group__label {
@@ -1519,11 +1528,12 @@ ol.utrecht-breadcrumb__list {
1519
1528
  .utrecht-form-field-radio {
1520
1529
  font-family: var(--utrecht-document-font-family, inherit);
1521
1530
  font-size: var(--utrecht-paragraph-font-size);
1531
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1532
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1522
1533
  }
1523
1534
 
1524
1535
  .utrecht-form-field-radio--distanced {
1525
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1526
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1536
+ --utrecht-space-around: 1;
1527
1537
  }
1528
1538
 
1529
1539
  .utrecht-form-field-radio__label {
@@ -1548,12 +1558,14 @@ ol.utrecht-breadcrumb__list {
1548
1558
  */
1549
1559
  .utrecht-form-field {
1550
1560
  font-family: var(--utrecht-document-font-family, inherit);
1561
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
1562
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
1551
1563
  max-inline-size: var(--utrecht-form-field-max-inline-size);
1564
+ page-break-inside: avoid;
1552
1565
  }
1553
1566
 
1554
1567
  .utrecht-form-field--distanced {
1555
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1556
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1568
+ --utrecht-space-around: 1;
1557
1569
  }
1558
1570
 
1559
1571
  /**
@@ -1565,7 +1577,11 @@ ol.utrecht-breadcrumb__list {
1565
1577
  * Copyright (c) 2021 Robbert Broersma
1566
1578
  */
1567
1579
  /* stylelint-disable-next-line block-no-empty */
1568
- /* stylelint-disable-next-line block-no-empty */
1580
+ .utrecht-form-fieldset {
1581
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
1582
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
1583
+ }
1584
+
1569
1585
  .utrecht-form-fieldset--html-fieldset {
1570
1586
  border: 0;
1571
1587
  margin-inline-end: 0;
@@ -1583,8 +1599,7 @@ ol.utrecht-breadcrumb__list {
1583
1599
  }
1584
1600
 
1585
1601
  .utrecht-form-fieldset--distanced {
1586
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
1587
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
1602
+ --utrecht-space-around: 1;
1588
1603
  }
1589
1604
 
1590
1605
  .utrecht-form-fieldset__legend {
@@ -1599,8 +1614,8 @@ ol.utrecht-breadcrumb__list {
1599
1614
  }
1600
1615
 
1601
1616
  .utrecht-form-fieldset__legend--distanced {
1602
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
1603
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
1617
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
1618
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
1604
1619
  }
1605
1620
 
1606
1621
  /**
@@ -1765,14 +1780,14 @@ ol.utrecht-breadcrumb__list {
1765
1780
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
1766
1781
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
1767
1782
  line-height: var(--utrecht-heading-1-line-height);
1768
- margin-block-end: 0;
1769
- margin-block-start: 0;
1783
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
1784
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
1785
+ page-break-after: avoid;
1770
1786
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
1771
1787
  }
1772
1788
 
1773
1789
  .utrecht-heading-1--distanced {
1774
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
1775
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
1790
+ --utrecht-space-around: 1;
1776
1791
  }
1777
1792
 
1778
1793
  /**
@@ -1800,14 +1815,14 @@ ol.utrecht-breadcrumb__list {
1800
1815
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
1801
1816
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
1802
1817
  line-height: var(--utrecht-heading-2-line-height);
1803
- margin-block-end: 0;
1804
- margin-block-start: 0;
1818
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
1819
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
1820
+ page-break-after: avoid;
1805
1821
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
1806
1822
  }
1807
1823
 
1808
1824
  .utrecht-heading-2--distanced {
1809
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
1810
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
1825
+ --utrecht-space-around: 1;
1811
1826
  }
1812
1827
 
1813
1828
  /**
@@ -1835,14 +1850,14 @@ ol.utrecht-breadcrumb__list {
1835
1850
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
1836
1851
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
1837
1852
  line-height: var(--utrecht-heading-3-line-height);
1838
- margin-block-end: 0;
1839
- margin-block-start: 0;
1853
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
1854
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
1855
+ page-break-after: avoid;
1840
1856
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
1841
1857
  }
1842
1858
 
1843
1859
  .utrecht-heading-3--distanced {
1844
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
1845
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
1860
+ --utrecht-space-around: 1;
1846
1861
  }
1847
1862
 
1848
1863
  /**
@@ -1870,14 +1885,14 @@ ol.utrecht-breadcrumb__list {
1870
1885
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
1871
1886
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
1872
1887
  line-height: var(--utrecht-heading-4-line-height);
1873
- margin-block-end: 0;
1874
- margin-block-start: 0;
1888
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
1889
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
1890
+ page-break-after: avoid;
1875
1891
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
1876
1892
  }
1877
1893
 
1878
1894
  .utrecht-heading-4--distanced {
1879
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
1880
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
1895
+ --utrecht-space-around: 1;
1881
1896
  }
1882
1897
 
1883
1898
  /**
@@ -1905,14 +1920,14 @@ ol.utrecht-breadcrumb__list {
1905
1920
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
1906
1921
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
1907
1922
  line-height: var(--utrecht-heading-5-line-height);
1908
- margin-block-end: 0;
1909
- margin-block-start: 0;
1923
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
1924
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
1925
+ page-break-after: avoid;
1910
1926
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
1911
1927
  }
1912
1928
 
1913
1929
  .utrecht-heading-5--distanced {
1914
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
1915
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
1930
+ --utrecht-space-around: 1;
1916
1931
  }
1917
1932
 
1918
1933
  /**
@@ -1940,14 +1955,14 @@ ol.utrecht-breadcrumb__list {
1940
1955
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
1941
1956
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
1942
1957
  line-height: var(--utrecht-heading-6-line-height);
1943
- margin-block-end: 0;
1944
- margin-block-start: 0;
1958
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
1959
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
1960
+ page-break-after: avoid;
1945
1961
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
1946
1962
  }
1947
1963
 
1948
1964
  .utrecht-heading-6--distanced {
1949
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
1950
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
1965
+ --utrecht-space-around: 1;
1951
1966
  }
1952
1967
 
1953
1968
  /**
@@ -2018,11 +2033,12 @@ ol.utrecht-breadcrumb__list {
2018
2033
  --utrecht-link-text-decoration: none;
2019
2034
  --utrecht-link-hover-text-decoration: underline;
2020
2035
  --utrecht-link-focus-text-decoration: underline;
2036
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
2037
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
2021
2038
  }
2022
2039
 
2023
2040
  .utrecht-link-list--distanced {
2024
- margin-block-end: var(--utrecht-link-list-margin-block-end, 0);
2025
- margin-block-start: var(--utrecht-link-list-margin-block-start, 0);
2041
+ --utrecht-space-around: 1;
2026
2042
  }
2027
2043
 
2028
2044
  .utrecht-link-list__marker, .utrecht-link-list__item > a::before {
@@ -2132,6 +2148,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
2132
2148
  /* stylelint-disable-next-line block-no-empty */
2133
2149
  /* stylelint-disable-next-line block-no-empty */
2134
2150
  /* stylelint-disable-next-line block-no-empty */
2151
+ /**
2152
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
2153
+ *
2154
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
2155
+ */
2135
2156
  /**
2136
2157
  * @license EUPL-1.2
2137
2158
  * Copyright (c) 2021 Gemeente Utrecht
@@ -2317,6 +2338,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
2317
2338
  /* stylelint-disable-next-line block-no-empty */
2318
2339
  /* stylelint-disable-next-line block-no-empty */
2319
2340
  /* stylelint-disable-next-line block-no-empty */
2341
+ /**
2342
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
2343
+ *
2344
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
2345
+ */
2320
2346
  .utrecht-link {
2321
2347
  color: var(--utrecht-link-color, blue);
2322
2348
  text-decoration: var(--utrecht-link-text-decoration, underline);
@@ -2391,14 +2417,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
2391
2417
  outline-style: none;
2392
2418
  }
2393
2419
 
2394
- /* stylelint-disable-next-line block-no-empty */
2395
- /* stylelint-disable-next-line block-no-empty */
2396
2420
  .utrecht-link--telephone {
2397
2421
  white-space: nowrap;
2398
2422
  }
2399
2423
 
2400
- /* stylelint-disable-next-line block-no-empty */
2401
- /* stylelint-disable-next-line block-no-empty */
2424
+ .utrecht-link--box-content {
2425
+ color: unset;
2426
+ display: inline-block;
2427
+ text-decoration: unset;
2428
+ text-decoration-skip-ink: unset;
2429
+ text-decoration-thickness: unset;
2430
+ text-underline-offset: unset;
2431
+ }
2432
+
2402
2433
  /**
2403
2434
  * @license EUPL-1.2
2404
2435
  * Copyright (c) 2021 Robbert Broersma
@@ -2849,14 +2880,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
2849
2880
  */
2850
2881
  .utrecht-ordered-list {
2851
2882
  font-family: var(--utrecht-document-font-family, inherit);
2852
- margin-block-end: 0;
2853
- margin-block-start: 0;
2883
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
2884
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
2854
2885
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
2855
2886
  }
2856
2887
 
2857
2888
  .utrecht-ordered-list--distanced {
2858
- margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
2859
- margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
2889
+ --utrecht-space-around: 1;
2860
2890
  }
2861
2891
 
2862
2892
  .utrecht-ordered-list--arabic {
@@ -3019,11 +3049,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
3019
3049
  .utrecht-pagination {
3020
3050
  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
3021
3051
  font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
3052
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-end, 0));
3053
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-start, 0));
3022
3054
  }
3023
3055
 
3024
3056
  .utrecht-pagination--distanced {
3025
- margin-block-end: var(--utrecht-pagination-margin-block-end);
3026
- margin-block-start: var(--utrecht-pagination-margin-block-start);
3057
+ --utrecht-space-around: 1;
3027
3058
  }
3028
3059
 
3029
3060
  .utrecht-pagination__relative-link {
@@ -3085,7 +3116,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3085
3116
  --utrecht-pagination-page-link-color: var(--utrecht-pagination-page-link-current-color);
3086
3117
  }
3087
3118
 
3088
- .utrecht-pagination__page-link--distanced,
3089
3119
  .utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
3090
3120
  margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
3091
3121
  }
@@ -3127,8 +3157,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3127
3157
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
3128
3158
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
3129
3159
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
3130
- margin-block-end: 0;
3131
- margin-block-start: 0;
3160
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
3161
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
3132
3162
  }
3133
3163
 
3134
3164
  .utrecht-paragraph--lead {
@@ -3139,8 +3169,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3139
3169
  }
3140
3170
 
3141
3171
  .utrecht-paragraph--distanced {
3142
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
3143
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
3172
+ --utrecht-space-around: 1;
3144
3173
  }
3145
3174
 
3146
3175
  /**
@@ -3155,14 +3184,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3155
3184
  font-weight: var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));
3156
3185
  letter-spacing: var(--utrecht-pre-heading-letter-spacing);
3157
3186
  line-height: var(--utrecht-pre-heading-line-height);
3158
- margin-block-end: 0;
3159
- margin-block-start: 0;
3187
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-end, 0));
3188
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-start, 0));
3160
3189
  text-transform: var(--utrecht-pre-heading-text-transform, inherit);
3161
3190
  }
3162
3191
 
3163
3192
  .utrecht-pre-heading--distanced {
3164
- margin-block-end: var(--utrecht-pre-heading-margin-block-end);
3165
- margin-block-start: var(--utrecht-pre-heading-margin-block-start);
3193
+ --utrecht-space-around: 1;
3166
3194
  }
3167
3195
 
3168
3196
  /**
@@ -3372,11 +3400,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
3372
3400
  border-color: var(--utrecht-separator-color);
3373
3401
  border-style: solid;
3374
3402
  border-width: 0 0 var(--utrecht-separator-block-size) 0;
3403
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
3404
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
3375
3405
  }
3376
3406
 
3377
3407
  .utrecht-separator--distanced {
3378
- margin-block-end: var(--utrecht-separator-margin-block-end);
3379
- margin-block-start: var(--utrecht-separator-margin-block-start);
3408
+ --utrecht-space-around: 1;
3380
3409
  }
3381
3410
 
3382
3411
  /**
@@ -3408,7 +3437,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3408
3437
  * Copyright (c) 2021 Robbert Broersma
3409
3438
  */
3410
3439
  /* stylelint-disable-next-line block-no-empty */
3411
- /* stylelint-disable-next-line block-no-empty */
3412
3440
  .utrecht-table {
3413
3441
  border-collapse: collapse;
3414
3442
  border-color: var(--utrecht-table-border-color, 0);
@@ -3416,12 +3444,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3416
3444
  border-width: var(--utrecht-table-border-width, 0);
3417
3445
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
3418
3446
  font-size: var(--utrecht-table-font-size, inherit);
3447
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
3448
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
3419
3449
  width: 100%;
3420
3450
  }
3421
3451
 
3422
3452
  .utrecht-table--distanced {
3423
- margin-block-end: var(--utrecht-table-margin-block-end);
3424
- margin-block-start: var(--utrecht-table-margin-block-start);
3453
+ --utrecht-space-around: 1;
3425
3454
  }
3426
3455
 
3427
3456
  .utrecht-table__caption {
@@ -3431,6 +3460,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3431
3460
  font-weight: var(--utrecht-table-caption-font-weight);
3432
3461
  line-height: var(--utrecht-table-caption-line-height);
3433
3462
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
3463
+ page-break-after: avoid;
3434
3464
  text-align: var(--utrecht-table-caption-text-align, center);
3435
3465
  }
3436
3466
 
@@ -3438,6 +3468,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3438
3468
  background-color: var(--utrecht-table-header-background-color);
3439
3469
  color: var(--utrecht-table-header-color);
3440
3470
  font-weight: var(--utrecht-table-header-font-weight);
3471
+ page-break-inside: avoid;
3441
3472
  text-transform: var(--utrecht-table-header-text-transform);
3442
3473
  vertical-align: bottom;
3443
3474
  }
@@ -3767,14 +3798,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3767
3798
  font-family: var(--utrecht-document-font-family, inherit);
3768
3799
  font-size: var(--utrecht-document-font-size, inherit);
3769
3800
  line-height: var(--utrecht-document-line-height, inherit);
3770
- margin-block-end: 0;
3771
- margin-block-start: 0;
3801
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
3802
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
3772
3803
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
3773
3804
  }
3774
3805
 
3775
3806
  .utrecht-unordered-list--distanced {
3776
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
3777
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
3807
+ --utrecht-space-around: 1;
3778
3808
  }
3779
3809
 
3780
3810
  .utrecht-unordered-list--nested {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.310",
2
+ "version": "1.0.0-alpha.313",
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",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.303",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.306",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.54.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "5dadd16977de9f7171083aaab7add3f81a23af00"
30
+ "gitHead": "f49b8678328b2c3ad2b3878e5df0ea4a2ea8658a"
31
31
  }