@utrecht/web-component-library-stencil 1.0.0-alpha.308 → 1.0.0-alpha.310

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 (80) hide show
  1. package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js +1 -1
  2. package/dist/cjs/utrecht-form-field-description.cjs.entry.js +1 -1
  3. package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js +1 -1
  4. package/dist/cjs/utrecht-heading-1.cjs.entry.js +1 -1
  5. package/dist/cjs/utrecht-heading-2_3.cjs.entry.js +3 -3
  6. package/dist/cjs/utrecht-heading-4.cjs.entry.js +1 -1
  7. package/dist/cjs/utrecht-heading-5.cjs.entry.js +1 -1
  8. package/dist/cjs/utrecht-heading-6.cjs.entry.js +1 -1
  9. package/dist/cjs/utrecht-heading.cjs.entry.js +1 -1
  10. package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
  11. package/dist/cjs/utrecht-pagination.cjs.entry.js +1 -1
  12. package/dist/cjs/utrecht-separator.cjs.entry.js +1 -1
  13. package/dist/cjs/utrecht-table.cjs.entry.js +1 -1
  14. package/dist/collection/form-field-checkbox/web-component/index.css +3 -2
  15. package/dist/collection/form-field-description/web-component/index.css +3 -2
  16. package/dist/collection/form-field-textarea/web-component/index.css +3 -2
  17. package/dist/collection/heading/web-component/index.css +18 -24
  18. package/dist/collection/heading-1/web-component/index.css +3 -4
  19. package/dist/collection/heading-2/web-component/index.css +3 -4
  20. package/dist/collection/heading-3/web-component/index.css +3 -4
  21. package/dist/collection/heading-4/web-component/index.css +3 -4
  22. package/dist/collection/heading-5/web-component/index.css +3 -4
  23. package/dist/collection/heading-6/web-component/index.css +3 -4
  24. package/dist/collection/html-content/web-component/index.css +42 -47
  25. package/dist/collection/pagination/web-component/index.css +3 -3
  26. package/dist/collection/paragraph/web-component/index.css +3 -4
  27. package/dist/collection/separator/web-component/index.css +3 -2
  28. package/dist/collection/table/web-component/table.css +2 -0
  29. package/dist/components/index.stencil3.js +1 -1
  30. package/dist/components/index.stencil4.js +1 -1
  31. package/dist/components/index.stencil5.js +1 -1
  32. package/dist/components/utrecht-form-field-checkbox.js +1 -1
  33. package/dist/components/utrecht-form-field-description.js +1 -1
  34. package/dist/components/utrecht-form-field-textarea.js +1 -1
  35. package/dist/components/utrecht-heading-1.js +1 -1
  36. package/dist/components/utrecht-heading-4.js +1 -1
  37. package/dist/components/utrecht-heading-5.js +1 -1
  38. package/dist/components/utrecht-heading-6.js +1 -1
  39. package/dist/components/utrecht-heading.js +1 -1
  40. package/dist/components/utrecht-html-content.js +1 -1
  41. package/dist/components/utrecht-pagination.js +1 -1
  42. package/dist/components/utrecht-separator.js +1 -1
  43. package/dist/components/utrecht-table.js +1 -1
  44. package/dist/esm/utrecht-form-field-checkbox.entry.js +1 -1
  45. package/dist/esm/utrecht-form-field-description.entry.js +1 -1
  46. package/dist/esm/utrecht-form-field-textarea.entry.js +1 -1
  47. package/dist/esm/utrecht-heading-1.entry.js +1 -1
  48. package/dist/esm/utrecht-heading-2_3.entry.js +3 -3
  49. package/dist/esm/utrecht-heading-4.entry.js +1 -1
  50. package/dist/esm/utrecht-heading-5.entry.js +1 -1
  51. package/dist/esm/utrecht-heading-6.entry.js +1 -1
  52. package/dist/esm/utrecht-heading.entry.js +1 -1
  53. package/dist/esm/utrecht-html-content.entry.js +1 -1
  54. package/dist/esm/utrecht-pagination.entry.js +1 -1
  55. package/dist/esm/utrecht-separator.entry.js +1 -1
  56. package/dist/esm/utrecht-table.entry.js +1 -1
  57. package/dist/utrecht/{p-9f19bb9a.entry.js → p-25e5c2d3.entry.js} +1 -1
  58. package/dist/utrecht/p-2c15976e.entry.js +1 -0
  59. package/dist/utrecht/p-38e4ecfb.entry.js +1 -0
  60. package/dist/utrecht/p-60c29452.entry.js +1 -0
  61. package/dist/utrecht/p-7c39e6d1.entry.js +1 -0
  62. package/dist/utrecht/p-93b3f56d.entry.js +1 -0
  63. package/dist/utrecht/p-b8b2235b.entry.js +1 -0
  64. package/dist/utrecht/p-b92bba48.entry.js +1 -0
  65. package/dist/utrecht/{p-191ac1b5.entry.js → p-c1e7988b.entry.js} +1 -1
  66. package/dist/utrecht/{p-5a9f4805.entry.js → p-c8089d1b.entry.js} +1 -1
  67. package/dist/utrecht/{p-9c538af6.entry.js → p-cf8a93cf.entry.js} +1 -1
  68. package/dist/utrecht/p-da746900.entry.js +1 -0
  69. package/dist/utrecht/p-eea541e5.entry.js +1 -0
  70. package/dist/utrecht/utrecht.esm.js +1 -1
  71. package/package.json +2 -2
  72. package/dist/utrecht/p-3ced8cf9.entry.js +0 -1
  73. package/dist/utrecht/p-3df45650.entry.js +0 -1
  74. package/dist/utrecht/p-4460c3ef.entry.js +0 -1
  75. package/dist/utrecht/p-945039fd.entry.js +0 -1
  76. package/dist/utrecht/p-95a80eec.entry.js +0 -1
  77. package/dist/utrecht/p-b797e946.entry.js +0 -1
  78. package/dist/utrecht/p-c4f71d4f.entry.js +0 -1
  79. package/dist/utrecht/p-d18f3b8b.entry.js +0 -1
  80. package/dist/utrecht/p-fef03b9e.entry.js +0 -1
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
29
29
  line-height: var(--utrecht-heading-1-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-1--distanced {
36
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  /**
@@ -62,14 +61,13 @@
62
61
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
63
62
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
64
63
  line-height: var(--utrecht-heading-2-line-height);
65
- margin-block-end: 0;
66
- margin-block-start: 0;
64
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
65
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
67
66
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
68
67
  }
69
68
 
70
69
  .utrecht-heading-2--distanced {
71
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
72
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
70
+ --utrecht-space-around: 1;
73
71
  }
74
72
 
75
73
  /**
@@ -97,14 +95,13 @@
97
95
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
98
96
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
99
97
  line-height: var(--utrecht-heading-3-line-height);
100
- margin-block-end: 0;
101
- margin-block-start: 0;
98
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
99
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
102
100
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
103
101
  }
104
102
 
105
103
  .utrecht-heading-3--distanced {
106
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
107
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
104
+ --utrecht-space-around: 1;
108
105
  }
109
106
 
110
107
  /**
@@ -132,14 +129,13 @@
132
129
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
133
130
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
134
131
  line-height: var(--utrecht-heading-4-line-height);
135
- margin-block-end: 0;
136
- margin-block-start: 0;
132
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
133
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
137
134
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
138
135
  }
139
136
 
140
137
  .utrecht-heading-4--distanced {
141
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
142
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
138
+ --utrecht-space-around: 1;
143
139
  }
144
140
 
145
141
  /**
@@ -167,14 +163,13 @@
167
163
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
168
164
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
169
165
  line-height: var(--utrecht-heading-5-line-height);
170
- margin-block-end: 0;
171
- margin-block-start: 0;
166
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
167
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
172
168
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
173
169
  }
174
170
 
175
171
  .utrecht-heading-5--distanced {
176
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
177
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
172
+ --utrecht-space-around: 1;
178
173
  }
179
174
 
180
175
  /**
@@ -202,14 +197,13 @@
202
197
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
203
198
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
204
199
  line-height: var(--utrecht-heading-6-line-height);
205
- margin-block-end: 0;
206
- margin-block-start: 0;
200
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
201
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
207
202
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
208
203
  }
209
204
 
210
205
  .utrecht-heading-6--distanced {
211
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
212
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
206
+ --utrecht-space-around: 1;
213
207
  }
214
208
 
215
209
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
29
29
  line-height: var(--utrecht-heading-1-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-1--distanced {
36
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
29
29
  line-height: var(--utrecht-heading-2-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-2--distanced {
36
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
29
29
  line-height: var(--utrecht-heading-3-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-3--distanced {
36
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
29
29
  line-height: var(--utrecht-heading-4-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-4--distanced {
36
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
29
29
  line-height: var(--utrecht-heading-5-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-5--distanced {
36
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -27,14 +27,13 @@
27
27
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
28
28
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
29
29
  line-height: var(--utrecht-heading-6-line-height);
30
- margin-block-end: 0;
31
- margin-block-start: 0;
30
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
31
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
32
32
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
33
33
  }
34
34
 
35
35
  .utrecht-heading-6--distanced {
36
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
37
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
36
+ --utrecht-space-around: 1;
38
37
  }
39
38
 
40
39
  :host {
@@ -10,6 +10,7 @@
10
10
  /* Collection of all semantic HTML styles in the component library */
11
11
  /* stylelint-disable no-invalid-position-at-import-rule */
12
12
  .utrecht-html {
13
+ --utrecht-space-around: 1;
13
14
  /**
14
15
  * @license EUPL-1.2
15
16
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -84,7 +85,6 @@
84
85
  * @license EUPL-1.2
85
86
  * Copyright (c) 2021 Robbert Broersma
86
87
  */
87
- /* stylelint-disable-next-line block-no-empty */
88
88
  /**
89
89
  * @license EUPL-1.2
90
90
  * Copyright (c) 2021 Robbert Broersma
@@ -365,14 +365,15 @@
365
365
  .utrecht-html blockquote {
366
366
  font-family: var(--utrecht-document-font-family);
367
367
  font-size: var(--utrecht-blockquote-font-size);
368
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
369
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
368
370
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
369
371
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
370
372
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
371
373
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
372
374
  color: var(--utrecht-blockquote-content-color, inherit);
373
375
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
374
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
375
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
376
+ --utrecht-space-around: 1;
376
377
  }
377
378
  .utrecht-html input[type=button i],
378
379
  .utrecht-html input[type=reset i],
@@ -533,6 +534,8 @@
533
534
  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
534
535
  }
535
536
  .utrecht-html fieldset {
537
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
538
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
536
539
  border: 0;
537
540
  margin-inline-end: 0;
538
541
  margin-inline-start: 0;
@@ -541,8 +544,7 @@
541
544
  padding-block-start: 0.01em;
542
545
  padding-inline-end: 0;
543
546
  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);
547
+ --utrecht-space-around: 1;
546
548
  }
547
549
  .utrecht-html legend {
548
550
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
@@ -555,8 +557,8 @@
555
557
  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
556
558
  padding-inline-end: 0;
557
559
  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);
560
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
561
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
560
562
  }
561
563
  .utrecht-html label {
562
564
  color: var(--utrecht-form-label-color);
@@ -580,11 +582,10 @@
580
582
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
581
583
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
582
584
  line-height: var(--utrecht-heading-1-line-height);
583
- margin-block-end: 0;
584
- margin-block-start: 0;
585
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
586
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
585
587
  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);
588
+ --utrecht-space-around: 1;
588
589
  }
589
590
  .utrecht-html h2 {
590
591
  page-break-after: avoid;
@@ -595,11 +596,10 @@
595
596
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
596
597
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
597
598
  line-height: var(--utrecht-heading-2-line-height);
598
- margin-block-end: 0;
599
- margin-block-start: 0;
599
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
600
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
600
601
  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);
602
+ --utrecht-space-around: 1;
603
603
  }
604
604
  .utrecht-html h3 {
605
605
  page-break-after: avoid;
@@ -610,11 +610,10 @@
610
610
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
611
611
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
612
612
  line-height: var(--utrecht-heading-3-line-height);
613
- margin-block-end: 0;
614
- margin-block-start: 0;
613
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
614
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
615
615
  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);
616
+ --utrecht-space-around: 1;
618
617
  }
619
618
  .utrecht-html h4 {
620
619
  page-break-after: avoid;
@@ -625,11 +624,10 @@
625
624
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
626
625
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
627
626
  line-height: var(--utrecht-heading-4-line-height);
628
- margin-block-end: 0;
629
- margin-block-start: 0;
627
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
628
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
630
629
  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);
630
+ --utrecht-space-around: 1;
633
631
  }
634
632
  .utrecht-html h5 {
635
633
  page-break-after: avoid;
@@ -640,11 +638,10 @@
640
638
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
641
639
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
642
640
  line-height: var(--utrecht-heading-5-line-height);
643
- margin-block-end: 0;
644
- margin-block-start: 0;
641
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
642
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
645
643
  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);
644
+ --utrecht-space-around: 1;
648
645
  }
649
646
  .utrecht-html h6 {
650
647
  page-break-after: avoid;
@@ -655,11 +652,10 @@
655
652
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
656
653
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
657
654
  line-height: var(--utrecht-heading-6-line-height);
658
- margin-block-end: 0;
659
- margin-block-start: 0;
655
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
656
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
660
657
  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);
658
+ --utrecht-space-around: 1;
663
659
  }
664
660
  .utrecht-html a:link {
665
661
  color: var(--utrecht-link-color, blue);
@@ -704,11 +700,10 @@
704
700
  }
705
701
  .utrecht-html ol {
706
702
  font-family: var(--utrecht-document-font-family, inherit);
707
- margin-block-end: 0;
708
- margin-block-start: 0;
703
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
704
+ 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
705
  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));
706
+ --utrecht-space-around: 1;
712
707
  }
713
708
  .utrecht-html ol > li {
714
709
  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
@@ -724,8 +719,8 @@
724
719
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
725
720
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
726
721
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
727
- margin-block-end: 0;
728
- margin-block-start: 0;
722
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
723
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
729
724
  }
730
725
  .utrecht-html p.lead {
731
726
  color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
@@ -734,8 +729,7 @@
734
729
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
735
730
  }
736
731
  .utrecht-html * ~ p {
737
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
738
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
732
+ --utrecht-space-around: 1;
739
733
  }
740
734
  .utrecht-html input[type=radio i] {
741
735
  /* reset native margin for input[type="radio" i] */
@@ -816,8 +810,9 @@
816
810
  border-color: var(--utrecht-separator-color);
817
811
  border-style: solid;
818
812
  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);
813
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
814
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
815
+ --utrecht-space-around: 1;
821
816
  }
822
817
  .utrecht-html table {
823
818
  border-collapse: collapse;
@@ -826,9 +821,10 @@
826
821
  border-width: var(--utrecht-table-border-width, 0);
827
822
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
828
823
  font-size: var(--utrecht-table-font-size, inherit);
824
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
825
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
829
826
  width: 100%;
830
- margin-block-end: var(--utrecht-table-margin-block-end);
831
- margin-block-start: var(--utrecht-table-margin-block-start);
827
+ --utrecht-space-around: 1;
832
828
  }
833
829
  .utrecht-html caption {
834
830
  color: var(--utrecht-table-caption-color);
@@ -1155,11 +1151,10 @@
1155
1151
  font-family: var(--utrecht-document-font-family, inherit);
1156
1152
  font-size: var(--utrecht-document-font-size, inherit);
1157
1153
  line-height: var(--utrecht-document-line-height, inherit);
1158
- margin-block-end: 0;
1159
- margin-block-start: 0;
1154
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1155
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1160
1156
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1161
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1162
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1157
+ --utrecht-space-around: 1;
1163
1158
  }
1164
1159
  .utrecht-html ul > li {
1165
1160
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
@@ -35,11 +35,12 @@
35
35
  .utrecht-pagination {
36
36
  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
37
37
  font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
38
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-end, 0));
39
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-start, 0));
38
40
  }
39
41
 
40
42
  .utrecht-pagination--distanced {
41
- margin-block-end: var(--utrecht-pagination-margin-block-end);
42
- margin-block-start: var(--utrecht-pagination-margin-block-start);
43
+ --utrecht-space-around: 1;
43
44
  }
44
45
 
45
46
  .utrecht-pagination__relative-link {
@@ -101,7 +102,6 @@
101
102
  --utrecht-pagination-page-link-color: var(--utrecht-pagination-page-link-current-color);
102
103
  }
103
104
 
104
- .utrecht-pagination__page-link--distanced,
105
105
  .utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
106
106
  margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
107
107
  }
@@ -16,8 +16,8 @@
16
16
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
17
17
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
18
18
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
19
- margin-block-end: 0;
20
- margin-block-start: 0;
19
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
20
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
21
21
  }
22
22
 
23
23
  .utrecht-paragraph--lead {
@@ -28,8 +28,7 @@
28
28
  }
29
29
 
30
30
  .utrecht-paragraph--distanced {
31
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
32
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
31
+ --utrecht-space-around: 1;
33
32
  }
34
33
 
35
34
  :host {
@@ -18,11 +18,12 @@
18
18
  border-color: var(--utrecht-separator-color);
19
19
  border-style: solid;
20
20
  border-width: 0 0 var(--utrecht-separator-block-size) 0;
21
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
22
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
21
23
  }
22
24
 
23
25
  .utrecht-separator--distanced {
24
- margin-block-end: var(--utrecht-separator-margin-block-end);
25
- margin-block-start: var(--utrecht-separator-margin-block-start);
26
+ --utrecht-space-around: 1;
26
27
  }
27
28
 
28
29
  :host {
@@ -15,6 +15,8 @@
15
15
  border-width: var(--utrecht-table-border-width, 0);
16
16
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
17
17
  font-size: var(--utrecht-table-font-size, inherit);
18
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
19
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
18
20
  width: 100%;
19
21
  display: table;
20
22
  }
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const indexCss = ".utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
3
+ const indexCss = ".utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
4
4
 
5
5
  const Heading2 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const indexCss = ".utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
3
+ const indexCss = ".utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
4
4
 
5
5
  const Heading3 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:0;margin-block-start:0}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced{margin-block-end:var(--utrecht-paragraph-margin-block-end);margin-block-start:var(--utrecht-paragraph-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0))}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const Paragraph = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);max-inline-size:var(--utrecht-form-field-max-inline-size)}.utrecht-form-field--distanced{margin-block-end:var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));margin-block-start:var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start))}.utrecht-form-field__label--checkbox{margin-inline-start:1ch}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size)}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field__label--checkbox{margin-inline-start:1ch}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-form-field-description{color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style)}.utrecht-form-field-description--distanced{margin-block-end:var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end));margin-block-start:var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start))}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-form-field-description{color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {