@utrecht/component-library-css 1.0.0-alpha.57 → 1.0.0-alpha.571

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 (12) hide show
  1. package/README.md +5 -3
  2. package/dist/html.css +1426 -1147
  3. package/dist/index.css +5332 -2499
  4. package/html-component.md +4 -3
  5. package/package.json +8 -5
  6. package/project.json +18 -0
  7. package/src/html.scss +1 -24
  8. package/src/index.scss +12 -7
  9. package/dist/bem.css +0 -1485
  10. package/dist/root-theme.css +0 -584
  11. package/src/bem.scss +0 -58
  12. package/src/root-theme.scss +0 -9
package/dist/html.css CHANGED
@@ -12,20 +12,17 @@
12
12
  * @license EUPL-1.2
13
13
  * Copyright (c) 2021 Robbert Broersma
14
14
  */
15
- /* stylelint-disable-next-line block-no-empty */
16
- /* stylelint-disable-next-line block-no-empty */
15
+ /* Collection of all semantic HTML styles in the component library */
17
16
  /**
18
17
  * @license EUPL-1.2
19
- * Copyright (c) 2021 Robbert Broersma
18
+ * Copyright (c) 2020-2022 Gemeente Utrecht
19
+ * Copyright (c) 2020-2022 Frameless B.V.
20
20
  */
21
21
  /**
22
22
  * @license EUPL-1.2
23
- * Copyright (c) 2021 Robbert Broersma
23
+ * Copyright (c) 2020-2022 Gemeente Utrecht
24
+ * Copyright (c) 2020-2022 Frameless B.V.
24
25
  */
25
- .utrecht-article, .utrecht-html article {
26
- max-inline-size: var(--utrecht-article-max-inline-size);
27
- }
28
-
29
26
  /**
30
27
  * @license EUPL-1.2
31
28
  * Copyright (c) 2021 Robbert Broersma
@@ -34,30 +31,6 @@
34
31
  * @license EUPL-1.2
35
32
  * Copyright (c) 2021 Robbert Broersma
36
33
  */
37
- .utrecht-blockquote, .utrecht-html blockquote {
38
- font-family: var(--utrecht-document-font-family);
39
- font-size: var(--utrecht-blockquote-font-size);
40
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
41
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
42
- }
43
-
44
- .utrecht-blockquote__attribution {
45
- color: var(--utrecht-blockquote-attribution-color, inherit);
46
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
47
- }
48
-
49
- .utrecht-blockquote__content, .utrecht-html blockquote {
50
- --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
51
- --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
52
- color: var(--utrecht-blockquote-content-color, inherit);
53
- font-size: var(--utrecht-blockquote-content-font-size, inherit);
54
- }
55
-
56
- .utrecht-blockquote--distanced, .utrecht-html blockquote {
57
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
58
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
59
- }
60
-
61
34
  /**
62
35
  * @license EUPL-1.2
63
36
  * Copyright (c) 2021 Robbert Broersma
@@ -67,85 +40,52 @@
67
40
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
68
41
  * Copyright (c) 2021 Gemeente Utrecht
69
42
  */
70
- .utrecht-button, .utrecht-html button {
71
- background-color: var(--utrecht-button-primary-action-background-color);
72
- border-radius: var(--utrecht-button-border-radius);
73
- border-width: var(--utrecht-button-border-width);
74
- color: var(--utrecht-button-primary-action-color);
75
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
76
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
77
- font-weight: var(--utrecht-button-font-weight);
78
- letter-spacing: var(--utrecht-button-letter-spacing);
79
- padding-block-end: var(--utrecht-button-padding-block-end);
80
- padding-block-start: var(--utrecht-button-padding-block-start);
81
- padding-inline-end: var(--utrecht-button-padding-inline-end);
82
- padding-inline-start: var(--utrecht-button-padding-inline-start);
83
- text-transform: var(--utrecht-button-text-transform);
84
- }
85
-
86
- .utrecht-button--distanced, .utrecht-html button {
87
- margin-block-end: var(--utrecht-button-margin-block-end);
88
- margin-block-start: var(--utrecht-button-margin-block-start);
89
- margin-inline-end: var(--utrecht-button-margin-inline-end);
90
- margin-inline-start: var(--utrecht-button-margin-inline-start);
91
- }
92
-
93
- .utrecht-button:disabled, .utrecht-html button:disabled,
94
- .utrecht-button--disabled {
95
- background-color: var(--utrecht-button-disabled-background-color);
96
- color: var(--utrecht-button-disabled-color);
97
- }
98
-
99
- .utrecht-button--focus, .utrecht-html button:focus,
100
- .utrecht-button:not(.utrecht-button--disabled):focus {
101
- background-color: var(--utrecht-focus-background-color);
102
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
103
- color: var(--utrecht-focus-color, inherit);
104
- outline-color: var(--utrecht-focus-outline-color, transparent);
105
- outline-offset: 0;
106
- outline-style: var(--utrecht-focus-outline-style, solid);
107
- outline-width: var(--utrecht-focus-outline-width, 0);
108
- }
109
-
110
- .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
111
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
112
- background-color: var(--utrecht-button-primary-action-hover-background-color);
113
- color: var(--utrecht-button-primary-action-color);
114
- transform: scale(var(--utrecht-button-focus-transform-scale, 1));
115
- }
116
-
117
43
  /**
118
44
  * @license EUPL-1.2
45
+ * Copyright (c) 2021 Gemeente Utrecht
119
46
  * Copyright (c) 2021 Robbert Broersma
120
47
  */
48
+ /* stylelint-disable-next-line block-no-empty */
121
49
  /**
122
50
  * @license EUPL-1.2
123
51
  * Copyright (c) 2021 Robbert Broersma
124
52
  */
125
- .utrecht-checkbox, .utrecht-html input[type=checkbox] {
126
- margin-block-end: 0;
127
- /* reset native margin for input[type="checkbox"] */
128
- margin-block-start: 0;
129
- margin-inline-end: 0;
130
- margin-inline-start: 0;
131
- }
132
-
133
53
  /**
134
54
  * @license EUPL-1.2
135
55
  * Copyright (c) 2021 Robbert Broersma
136
56
  */
137
57
  /**
138
58
  * @license EUPL-1.2
59
+ * Copyright (c) 2021 Gemeente Utrecht
139
60
  * Copyright (c) 2021 Robbert Broersma
140
61
  */
141
- .utrecht-emphasis--stressed, .utrecht-html em {
142
- font-style: var(--utrecht-emphasis-stressed-font-style, italic);
143
- }
144
-
145
- .utrecht-emphasis--strong, .utrecht-html strong {
146
- font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
147
- }
148
-
62
+ /* stylelint-disable-next-line block-no-empty */
63
+ /* stylelint-disable-next-line block-no-empty */
64
+ /**
65
+ * @license EUPL-1.2
66
+ * Copyright (c) 2020-2022 Gemeente Utrecht
67
+ * Copyright (c) 2020-2022 Frameless B.V.
68
+ */
69
+ /**
70
+ * @license EUPL-1.2
71
+ * Copyright (c) 2020-2022 Gemeente Utrecht
72
+ * Copyright (c) 2020-2022 Frameless B.V.
73
+ */
74
+ /**
75
+ * @license EUPL-1.2
76
+ * Copyright (c) 2020-2022 Gemeente Utrecht
77
+ * Copyright (c) 2020-2022 Frameless B.V.
78
+ */
79
+ /**
80
+ * @license EUPL-1.2
81
+ * Copyright (c) 2020-2022 Gemeente Utrecht
82
+ * Copyright (c) 2020-2022 Frameless B.V.
83
+ */
84
+ /**
85
+ * @license EUPL-1.2
86
+ * Copyright (c) 2020-2022 Gemeente Utrecht
87
+ * Copyright (c) 2020-2022 Frameless B.V.
88
+ */
149
89
  /**
150
90
  * @license EUPL-1.2
151
91
  * Copyright (c) 2021 Robbert Broersma
@@ -154,40 +94,6 @@
154
94
  * @license EUPL-1.2
155
95
  * Copyright (c) 2021 Robbert Broersma
156
96
  */
157
- .utrecht-form-fieldset--distanced, .utrecht-html fieldset {
158
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
159
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
160
- }
161
-
162
- .utrecht-form-fieldset__legend, .utrecht-html legend {
163
- color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
164
- font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
165
- font-size: var(--utrecht-form-fieldset-legend-font-size);
166
- font-weight: var(--utrecht-form-fieldset-legend-font-weight);
167
- line-height: var(--utrecht-form-fieldset-legend-line-height);
168
- }
169
-
170
- .utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
171
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
172
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
173
- }
174
-
175
- .utrecht-html fieldset {
176
- border: 0;
177
- margin-inline-end: 0;
178
- margin-inline-start: 0;
179
- min-width: 0;
180
- padding-block-end: 0;
181
- padding-block-start: 0.01em;
182
- padding-inline-end: 0;
183
- padding-inline-start: 0;
184
- }
185
-
186
- .utrecht-html legend {
187
- padding-inline-end: 0;
188
- padding-inline-start: 0;
189
- }
190
-
191
97
  /**
192
98
  * @license EUPL-1.2
193
99
  * Copyright (c) 2021 Robbert Broersma
@@ -196,94 +102,45 @@
196
102
  * @license EUPL-1.2
197
103
  * Copyright (c) 2021 Robbert Broersma
198
104
  */
199
- .utrecht-form-label, .utrecht-html label {
200
- font-size: var(--utrecht-form-label-font-size);
201
- font-weight: var(--utrecht-form-label-font-weight);
202
- }
203
-
204
- .utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
205
- font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
206
- }
207
-
208
- .utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
209
- font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
210
- }
211
-
212
105
  /**
213
106
  * @license EUPL-1.2
214
107
  * Copyright (c) 2021 Robbert Broersma
215
108
  */
216
109
  /**
217
110
  * @license EUPL-1.2
218
- * Copyright (c) 2021 Gemeente Utrecht
219
111
  * Copyright (c) 2021 Robbert Broersma
220
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
221
112
  */
222
- .utrecht-heading-1, .utrecht-html h1 {
223
- color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
224
- font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
225
- font-size: var(--utrecht-heading-1-font-size);
226
- font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
227
- letter-spacing: var(--utrecht-heading-1-letter-spacing);
228
- line-height: var(--utrecht-heading-1-line-height);
229
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
230
- }
231
-
232
- .utrecht-heading-1--distanced, .utrecht-html h1 {
233
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
234
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
235
- }
236
-
113
+ /**
114
+ * @license EUPL-1.2
115
+ * Copyright (c) 2020-2022 Gemeente Utrecht
116
+ * Copyright (c) 2020-2022 Frameless B.V.
117
+ */
118
+ /**
119
+ * @license EUPL-1.2
120
+ * Copyright (c) 2020-2022 Gemeente Utrecht
121
+ * Copyright (c) 2020-2022 Frameless B.V.
122
+ */
237
123
  /**
238
124
  * @license EUPL-1.2
239
125
  * Copyright (c) 2021 Robbert Broersma
240
126
  */
241
127
  /**
242
128
  * @license EUPL-1.2
243
- * Copyright (c) 2021 Gemeente Utrecht
244
129
  * Copyright (c) 2021 Robbert Broersma
245
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
246
130
  */
247
- .utrecht-heading-2, .utrecht-html h2 {
248
- color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
249
- font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
250
- font-size: var(--utrecht-heading-2-font-size);
251
- font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
252
- letter-spacing: var(--utrecht-heading-2-letter-spacing);
253
- line-height: var(--utrecht-heading-2-line-height);
254
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
255
- }
256
-
257
- .utrecht-heading-2--distanced, .utrecht-html h2 {
258
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
259
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
260
- }
261
-
131
+ /**
132
+ * @license EUPL-1.2
133
+ * Copyright (c) 2021 Robbert Broersma
134
+ */
135
+ /* stylelint-disable-next-line block-no-empty */
262
136
  /**
263
137
  * @license EUPL-1.2
264
138
  * Copyright (c) 2021 Robbert Broersma
265
139
  */
266
140
  /**
267
141
  * @license EUPL-1.2
268
- * Copyright (c) 2021 Gemeente Utrecht
269
142
  * Copyright (c) 2021 Robbert Broersma
270
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
271
143
  */
272
- .utrecht-heading-3, .utrecht-html h3 {
273
- color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
274
- font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
275
- font-size: var(--utrecht-heading-3-font-size);
276
- font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
277
- letter-spacing: var(--utrecht-heading-3-letter-spacing);
278
- line-height: var(--utrecht-heading-3-line-height);
279
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
280
- }
281
-
282
- .utrecht-heading-3--distanced, .utrecht-html h3 {
283
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
284
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
285
- }
286
-
287
144
  /**
288
145
  * @license EUPL-1.2
289
146
  * Copyright (c) 2021 Robbert Broersma
@@ -294,21 +151,10 @@
294
151
  * Copyright (c) 2021 Robbert Broersma
295
152
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
296
153
  */
297
- .utrecht-heading-4, .utrecht-html h4 {
298
- color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
299
- font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
300
- font-size: var(--utrecht-heading-4-font-size);
301
- font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
302
- letter-spacing: var(--utrecht-heading-4-letter-spacing);
303
- line-height: var(--utrecht-heading-4-line-height);
304
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
305
- }
306
-
307
- .utrecht-heading-4--distanced, .utrecht-html h4 {
308
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
309
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
310
- }
311
-
154
+ /**
155
+ * @license EUPL-1.2
156
+ * Copyright (c) 2021-2022 Frameless B.V.
157
+ */
312
158
  /**
313
159
  * @license EUPL-1.2
314
160
  * Copyright (c) 2021 Robbert Broersma
@@ -319,21 +165,10 @@
319
165
  * Copyright (c) 2021 Robbert Broersma
320
166
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
321
167
  */
322
- .utrecht-heading-5, .utrecht-html h5 {
323
- color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
324
- font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
325
- font-size: var(--utrecht-heading-5-font-size);
326
- font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
327
- letter-spacing: var(--utrecht-heading-5-letter-spacing);
328
- line-height: var(--utrecht-heading-5-line-height);
329
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
330
- }
331
-
332
- .utrecht-heading-5--distanced, .utrecht-html h5 {
333
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
334
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
335
- }
336
-
168
+ /**
169
+ * @license EUPL-1.2
170
+ * Copyright (c) 2021-2022 Frameless B.V.
171
+ */
337
172
  /**
338
173
  * @license EUPL-1.2
339
174
  * Copyright (c) 2021 Robbert Broersma
@@ -344,231 +179,145 @@
344
179
  * Copyright (c) 2021 Robbert Broersma
345
180
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
346
181
  */
347
- .utrecht-heading-6, .utrecht-html h6 {
348
- color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
349
- font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
350
- font-size: var(--utrecht-heading-6-font-size);
351
- font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
352
- letter-spacing: var(--utrecht-heading-6-letter-spacing);
353
- line-height: var(--utrecht-heading-6-line-height);
354
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
355
- }
356
-
357
- .utrecht-heading-6--distanced, .utrecht-html h6 {
358
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
359
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
360
- }
361
-
362
182
  /**
363
183
  * @license EUPL-1.2
364
- * Copyright (c) 2021 Robbert Broersma
184
+ * Copyright (c) 2021-2022 Frameless B.V.
365
185
  */
366
- /* Collection of all semantic HTML styles in the component library */
367
186
  /**
368
187
  * @license EUPL-1.2
369
188
  * Copyright (c) 2021 Robbert Broersma
370
189
  */
371
190
  /**
372
191
  * @license EUPL-1.2
192
+ * Copyright (c) 2021 Gemeente Utrecht
373
193
  * Copyright (c) 2021 Robbert Broersma
194
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
374
195
  */
375
- /* stylelint-disable-next-line block-no-empty */
376
- /* stylelint-disable-next-line block-no-empty */
377
196
  /**
378
197
  * @license EUPL-1.2
379
- * Copyright (c) 2021 Robbert Broersma
198
+ * Copyright (c) 2021-2022 Frameless B.V.
380
199
  */
381
200
  /**
382
201
  * @license EUPL-1.2
383
202
  * Copyright (c) 2021 Robbert Broersma
384
203
  */
385
- .utrecht-article, .utrecht-html article {
386
- max-inline-size: var(--utrecht-article-max-inline-size);
387
- }
388
-
389
204
  /**
390
205
  * @license EUPL-1.2
206
+ * Copyright (c) 2021 Gemeente Utrecht
391
207
  * Copyright (c) 2021 Robbert Broersma
208
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
392
209
  */
393
210
  /**
394
211
  * @license EUPL-1.2
395
- * Copyright (c) 2021 Robbert Broersma
212
+ * Copyright (c) 2021-2022 Frameless B.V.
396
213
  */
397
- .utrecht-blockquote, .utrecht-html blockquote {
398
- font-family: var(--utrecht-document-font-family);
399
- font-size: var(--utrecht-blockquote-font-size);
400
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
401
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
402
- }
403
-
404
- .utrecht-blockquote__attribution {
405
- color: var(--utrecht-blockquote-attribution-color, inherit);
406
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
407
- }
408
-
409
- .utrecht-blockquote__content, .utrecht-html blockquote {
410
- --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
411
- --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
412
- color: var(--utrecht-blockquote-content-color, inherit);
413
- font-size: var(--utrecht-blockquote-content-font-size, inherit);
414
- }
415
-
416
- .utrecht-blockquote--distanced, .utrecht-html blockquote {
417
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
418
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
419
- }
420
-
421
214
  /**
422
215
  * @license EUPL-1.2
423
216
  * Copyright (c) 2021 Robbert Broersma
424
217
  */
425
218
  /**
426
219
  * @license EUPL-1.2
427
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
428
220
  * Copyright (c) 2021 Gemeente Utrecht
221
+ * Copyright (c) 2021 Robbert Broersma
222
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
429
223
  */
430
- .utrecht-button, .utrecht-html button {
431
- background-color: var(--utrecht-button-primary-action-background-color);
432
- border-radius: var(--utrecht-button-border-radius);
433
- border-width: var(--utrecht-button-border-width);
434
- color: var(--utrecht-button-primary-action-color);
435
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
436
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
437
- font-weight: var(--utrecht-button-font-weight);
438
- letter-spacing: var(--utrecht-button-letter-spacing);
439
- padding-block-end: var(--utrecht-button-padding-block-end);
440
- padding-block-start: var(--utrecht-button-padding-block-start);
441
- padding-inline-end: var(--utrecht-button-padding-inline-end);
442
- padding-inline-start: var(--utrecht-button-padding-inline-start);
443
- text-transform: var(--utrecht-button-text-transform);
444
- }
445
-
446
- .utrecht-button--distanced, .utrecht-html button {
447
- margin-block-end: var(--utrecht-button-margin-block-end);
448
- margin-block-start: var(--utrecht-button-margin-block-start);
449
- margin-inline-end: var(--utrecht-button-margin-inline-end);
450
- margin-inline-start: var(--utrecht-button-margin-inline-start);
451
- }
452
-
453
- .utrecht-button:disabled, .utrecht-html button:disabled,
454
- .utrecht-button--disabled {
455
- background-color: var(--utrecht-button-disabled-background-color);
456
- color: var(--utrecht-button-disabled-color);
457
- }
458
-
459
- .utrecht-button--focus, .utrecht-html button:focus,
460
- .utrecht-button:not(.utrecht-button--disabled):focus {
461
- background-color: var(--utrecht-focus-background-color);
462
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
463
- color: var(--utrecht-focus-color, inherit);
464
- outline-color: var(--utrecht-focus-outline-color, transparent);
465
- outline-offset: 0;
466
- outline-style: var(--utrecht-focus-outline-style, solid);
467
- outline-width: var(--utrecht-focus-outline-width, 0);
468
- }
469
-
470
- .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
471
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
472
- background-color: var(--utrecht-button-primary-action-hover-background-color);
473
- color: var(--utrecht-button-primary-action-color);
474
- transform: scale(var(--utrecht-button-focus-transform-scale, 1));
475
- }
476
-
477
224
  /**
478
225
  * @license EUPL-1.2
479
- * Copyright (c) 2021 Robbert Broersma
226
+ * Copyright (c) 2021-2022 Frameless B.V.
480
227
  */
481
228
  /**
482
229
  * @license EUPL-1.2
483
230
  * Copyright (c) 2021 Robbert Broersma
484
231
  */
485
- .utrecht-checkbox, .utrecht-html input[type=checkbox] {
486
- margin-block-end: 0;
487
- /* reset native margin for input[type="checkbox"] */
488
- margin-block-start: 0;
489
- margin-inline-end: 0;
490
- margin-inline-start: 0;
491
- }
492
-
493
232
  /**
494
233
  * @license EUPL-1.2
495
- * Copyright (c) 2021 Robbert Broersma
234
+ * Copyright (c) 2022 Gemeente Utrecht
235
+ * Copyright (c) 2022 Robbert Broersma
236
+ * Copyright (c) 2022 The Knights Who Say NIH! B.V.
496
237
  */
497
238
  /**
498
239
  * @license EUPL-1.2
499
240
  * Copyright (c) 2021 Robbert Broersma
500
241
  */
501
- .utrecht-emphasis--stressed, .utrecht-html em {
502
- font-style: var(--utrecht-emphasis-stressed-font-style, italic);
503
- }
504
-
505
- .utrecht-emphasis--strong, .utrecht-html strong {
506
- font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
507
- }
508
-
509
242
  /**
510
243
  * @license EUPL-1.2
511
- * Copyright (c) 2021 Robbert Broersma
244
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
245
+ * Copyright (c) 2021 Gemeente Utrecht
512
246
  */
247
+ /* stylelint-disable scss/no-global-function-names */
513
248
  /**
514
249
  * @license EUPL-1.2
250
+ * Copyright (c) 2021 Gemeente Utrecht
515
251
  * Copyright (c) 2021 Robbert Broersma
516
252
  */
517
- .utrecht-form-fieldset--distanced, .utrecht-html fieldset {
518
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
519
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
520
- }
253
+ /* stylelint-disable-next-line block-no-empty */
254
+ /*
521
255
 
522
- .utrecht-form-fieldset__legend, .utrecht-html legend {
523
- color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
524
- font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
525
- font-size: var(--utrecht-form-fieldset-legend-font-size);
526
- font-weight: var(--utrecht-form-fieldset-legend-font-weight);
527
- line-height: var(--utrecht-form-fieldset-legend-line-height);
528
- }
256
+ # CSS implementation
529
257
 
530
- .utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
531
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
532
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
533
- }
258
+ ## `text-decoration-skip`
534
259
 
535
- .utrecht-html fieldset {
536
- border: 0;
537
- margin-inline-end: 0;
538
- margin-inline-start: 0;
539
- min-width: 0;
540
- padding-block-end: 0;
541
- padding-block-start: 0.01em;
542
- padding-inline-end: 0;
543
- padding-inline-start: 0;
544
- }
260
+ `text-decoration-skip` can be helpful to avoid making some texts unreadable.
261
+ For example by obscuring Arabic diacritics.
545
262
 
546
- .utrecht-html legend {
547
- padding-inline-end: 0;
548
- padding-inline-start: 0;
549
- }
263
+ However, the combination of a greater thickness and skipping this thick underline
264
+ leads to a very unappealing rendering of the underline. To avoid this,
265
+ `text-decoration-skip` is disabled for interactive states.
266
+
267
+ For design token configurations that have identical thickness for normal and interactive
268
+ states, this will lead to the (undesirable) effect that the focus/hover effect is switching
269
+ from an interrupted to an uninterrupted underline (for some texts).
270
+
271
+ Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
272
+
273
+ ---
274
+
275
+ Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
276
+ that moving the pointer away from a link or having focus elsewhere first is simple enough to
277
+ not make this too inconvenient.
278
+
279
+ ---
280
+
281
+ Some folks implement the underline of links using `border-bottom` or even using a finely crafted
282
+ `linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
283
+ would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
284
+
285
+ ## `text-decoration-thickness`
286
+
287
+ Varying `text-decoration-thickness` can be used to distinguish interactive states.
288
+
289
+ ---
290
+
291
+ `text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
292
+ In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
293
+ the underline offset also seems to increase along with the thickness, which effectively means
294
+ the underline is closer to the next line than in Safari.
295
+
296
+ ---
550
297
 
298
+ It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
299
+ use the `max()` function to ensure the underline remains visible for every font size.
300
+
301
+ ## `transition`
302
+
303
+ `text-decoration-thickness` could be a candidate for animating between interactive states,
304
+ however browsers don't seem to have implemented great looking supixel tweening yet.
305
+
306
+ `text-decoration-skip` also makes the transition more challenging to implement.
307
+
308
+ */
551
309
  /**
552
- * @license EUPL-1.2
553
- * Copyright (c) 2021 Robbert Broersma
310
+ * Simulate forced-colors mode.
554
311
  */
312
+ /* stylelint-disable-next-line block-no-empty */
313
+ /* stylelint-disable-next-line block-no-empty */
314
+ /* stylelint-disable-next-line block-no-empty */
315
+ /* stylelint-disable-next-line block-no-empty */
555
316
  /**
556
- * @license EUPL-1.2
557
- * Copyright (c) 2021 Robbert Broersma
317
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
318
+ *
319
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
558
320
  */
559
- .utrecht-form-label, .utrecht-html label {
560
- font-size: var(--utrecht-form-label-font-size);
561
- font-weight: var(--utrecht-form-label-font-weight);
562
- }
563
-
564
- .utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
565
- font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
566
- }
567
-
568
- .utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
569
- font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
570
- }
571
-
572
321
  /**
573
322
  * @license EUPL-1.2
574
323
  * Copyright (c) 2021 Robbert Broersma
@@ -577,123 +326,43 @@
577
326
  * @license EUPL-1.2
578
327
  * Copyright (c) 2021 Gemeente Utrecht
579
328
  * Copyright (c) 2021 Robbert Broersma
580
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
581
329
  */
582
- .utrecht-heading-1, .utrecht-html h1 {
583
- color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
584
- font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
585
- font-size: var(--utrecht-heading-1-font-size);
586
- font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
587
- letter-spacing: var(--utrecht-heading-1-letter-spacing);
588
- line-height: var(--utrecht-heading-1-line-height);
589
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
590
- }
591
-
592
- .utrecht-heading-1--distanced, .utrecht-html h1 {
593
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
594
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
595
- }
596
-
597
330
  /**
598
331
  * @license EUPL-1.2
599
332
  * Copyright (c) 2021 Robbert Broersma
600
333
  */
601
334
  /**
602
335
  * @license EUPL-1.2
603
- * Copyright (c) 2021 Gemeente Utrecht
604
336
  * Copyright (c) 2021 Robbert Broersma
605
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
337
+ * Copyright (c) 2021 Gemeente Utrecht
606
338
  */
607
- .utrecht-heading-2, .utrecht-html h2 {
608
- color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
609
- font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
610
- font-size: var(--utrecht-heading-2-font-size);
611
- font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
612
- letter-spacing: var(--utrecht-heading-2-letter-spacing);
613
- line-height: var(--utrecht-heading-2-line-height);
614
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
615
- }
616
-
617
- .utrecht-heading-2--distanced, .utrecht-html h2 {
618
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
619
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
620
- }
621
-
622
339
  /**
623
340
  * @license EUPL-1.2
624
341
  * Copyright (c) 2021 Robbert Broersma
625
342
  */
626
343
  /**
627
344
  * @license EUPL-1.2
628
- * Copyright (c) 2021 Gemeente Utrecht
629
- * Copyright (c) 2021 Robbert Broersma
630
345
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
631
346
  */
632
- .utrecht-heading-3, .utrecht-html h3 {
633
- color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
634
- font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
635
- font-size: var(--utrecht-heading-3-font-size);
636
- font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
637
- letter-spacing: var(--utrecht-heading-3-letter-spacing);
638
- line-height: var(--utrecht-heading-3-line-height);
639
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
640
- }
641
-
642
- .utrecht-heading-3--distanced, .utrecht-html h3 {
643
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
644
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
645
- }
646
-
647
347
  /**
648
348
  * @license EUPL-1.2
649
- * Copyright (c) 2021 Robbert Broersma
349
+ * Copyright (c) 2021 Gemeente Utrecht
650
350
  */
651
351
  /**
652
352
  * @license EUPL-1.2
653
- * Copyright (c) 2021 Gemeente Utrecht
654
353
  * Copyright (c) 2021 Robbert Broersma
655
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
656
354
  */
657
- .utrecht-heading-4, .utrecht-html h4 {
658
- color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
659
- font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
660
- font-size: var(--utrecht-heading-4-font-size);
661
- font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
662
- letter-spacing: var(--utrecht-heading-4-letter-spacing);
663
- line-height: var(--utrecht-heading-4-line-height);
664
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
665
- }
666
-
667
- .utrecht-heading-4--distanced, .utrecht-html h4 {
668
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
669
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
670
- }
671
-
672
355
  /**
673
356
  * @license EUPL-1.2
357
+ * Copyright (c) 2021 Gemeente Utrecht
674
358
  * Copyright (c) 2021 Robbert Broersma
675
359
  */
360
+ /* stylelint-disable-next-line block-no-empty */
361
+ /* stylelint-disable-next-line block-no-empty */
676
362
  /**
677
363
  * @license EUPL-1.2
678
- * Copyright (c) 2021 Gemeente Utrecht
679
364
  * Copyright (c) 2021 Robbert Broersma
680
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
681
365
  */
682
- .utrecht-heading-5, .utrecht-html h5 {
683
- color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
684
- font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
685
- font-size: var(--utrecht-heading-5-font-size);
686
- font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
687
- letter-spacing: var(--utrecht-heading-5-letter-spacing);
688
- line-height: var(--utrecht-heading-5-line-height);
689
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
690
- }
691
-
692
- .utrecht-heading-5--distanced, .utrecht-html h5 {
693
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
694
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
695
- }
696
-
697
366
  /**
698
367
  * @license EUPL-1.2
699
368
  * Copyright (c) 2021 Robbert Broersma
@@ -702,75 +371,22 @@
702
371
  * @license EUPL-1.2
703
372
  * Copyright (c) 2021 Gemeente Utrecht
704
373
  * Copyright (c) 2021 Robbert Broersma
705
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
706
374
  */
707
- .utrecht-heading-6, .utrecht-html h6 {
708
- color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
709
- font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
710
- font-size: var(--utrecht-heading-6-font-size);
711
- font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
712
- letter-spacing: var(--utrecht-heading-6-letter-spacing);
713
- line-height: var(--utrecht-heading-6-line-height);
714
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
715
- }
716
-
717
- .utrecht-heading-6--distanced, .utrecht-html h6 {
718
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
719
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
720
- }
721
-
375
+ /* stylelint-disable-next-line block-no-empty */
376
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
377
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
378
+ /* stylelint-disable order/properties-alphabetical-order */
379
+ /* stylelint-disable-next-line block-no-empty */
722
380
  /**
723
381
  * @license EUPL-1.2
724
382
  * Copyright (c) 2021 Robbert Broersma
725
383
  */
726
384
  /**
727
385
  * @license EUPL-1.2
728
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
729
386
  * Copyright (c) 2021 Gemeente Utrecht
387
+ * Copyright (c) 2021 Robbert Broersma
388
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
730
389
  */
731
- .utrecht-link, .utrecht-html a:link {
732
- color: var(--utrecht-link-color, blue);
733
- text-decoration: var(--utrecht-link-text-decoration, underline);
734
- }
735
-
736
- .utrecht-link:visited,
737
- .utrecht-link--visited,
738
- .utrecht-html a:visited {
739
- color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
740
- }
741
-
742
- .utrecht-link:hover,
743
- .utrecht-link--hover,
744
- .utrecht-html a:hover {
745
- color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
746
- text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
747
- }
748
-
749
- .utrecht-link:active,
750
- .utrecht-link--active,
751
- .utrecht-html a:active {
752
- color: var(--utrecht-link-active-color, var(--utrecht-link-color));
753
- }
754
-
755
- .utrecht-link:focus,
756
- .utrecht-link--focus,
757
- .utrecht-html a:focus {
758
- color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
759
- text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
760
- background-color: var(--utrecht-focus-background-color);
761
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
762
- color: var(--utrecht-focus-color, inherit);
763
- outline-color: var(--utrecht-focus-outline-color, transparent);
764
- outline-offset: 0;
765
- outline-style: var(--utrecht-focus-outline-style, solid);
766
- outline-width: var(--utrecht-focus-outline-width, 0);
767
- }
768
-
769
- /* stylelint-disable-next-line block-no-empty */
770
- .utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
771
- white-space: nowrap;
772
- }
773
-
774
390
  /**
775
391
  * @license EUPL-1.2
776
392
  * Copyright (c) 2021 Robbert Broersma
@@ -778,66 +394,31 @@
778
394
  /**
779
395
  * @license EUPL-1.2
780
396
  * Copyright (c) 2021 Robbert Broersma
781
- * Copyright (c) 2021 Gemeente Utrecht
782
397
  */
783
- .utrecht-ordered-list, .utrecht-html ol {
784
- font-family: var(--utrecht-document-font-family, inherit);
785
- }
786
-
787
- .utrecht-ordered-list--distanced, .utrecht-html ol {
788
- margin-block-end: var(--utrecht-ordered-list-margin-block-end);
789
- margin-block-start: var(--utrecht-ordered-list-margin-block-start);
790
- }
791
-
792
- .utrecht-ordered-list__item, .utrecht-html ol > li {
793
- margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
794
- margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
795
- }
796
-
398
+ /* stylelint-disable-next-line block-no-empty */
399
+ /* stylelint-disable-next-line block-no-empty */
400
+ /* stylelint-disable selector-class-pattern */
797
401
  /**
798
402
  * @license EUPL-1.2
799
403
  * Copyright (c) 2021 Robbert Broersma
800
404
  */
801
405
  /**
802
406
  * @license EUPL-1.2
803
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
407
+ * Copyright (c) 2021 Robbert Broersma
804
408
  */
805
- .utrecht-paragraph, .utrecht-html p {
806
- color: var(--utrecht-document-color, inherit);
807
- font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
808
- font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
809
- font-weight: var(--utrecht-paragraph-font-weight, inherit);
810
- line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
811
- }
812
-
813
- .utrecht-paragraph--lead, .utrecht-html p.lead {
814
- font-size: var(--utrecht-paragraph-lead-font-size, inherit);
815
- font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
816
- line-height: var(--utrecht-paragraph-lead-line-height, inherit);
817
- }
818
-
819
- .utrecht-paragraph--distanced, .utrecht-html * ~ p {
820
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
821
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
822
- }
823
-
824
- /* stylelint-disable selector-class-pattern */
825
409
  /**
826
410
  * @license EUPL-1.2
827
411
  * Copyright (c) 2021 Gemeente Utrecht
412
+ * Copyright (c) 2021 Robbert Broersma
828
413
  */
414
+ /* stylelint-disable-next-line block-no-empty */
415
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
416
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
417
+ /* stylelint-disable order/properties-alphabetical-order */
829
418
  /**
830
419
  * @license EUPL-1.2
831
- * Copyright (c) 2021 Gemeente Utrecht
420
+ * Copyright (c) 2021 Robbert Broersma
832
421
  */
833
- .utrecht-radio-button, .utrecht-html input[type=radio] {
834
- margin-block-end: 0;
835
- /* reset native margin for input[type="radio"] */
836
- margin-block-start: 0;
837
- margin-inline-end: 0;
838
- margin-inline-start: 0;
839
- }
840
-
841
422
  /**
842
423
  * @license EUPL-1.2
843
424
  * Copyright (c) 2021 Robbert Broersma
@@ -846,16 +427,11 @@
846
427
  * @license EUPL-1.2
847
428
  * Copyright (c) 2021 Gemeente Utrecht
848
429
  * Copyright (c) 2021 Robbert Broersma
849
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
850
430
  */
851
- .utrecht-separator, .utrecht-html hr {
852
- border-color: var(--utrecht-separator-color);
853
- border-style: solid;
854
- border-width: 0 0 var(--utrecht-separator-width) 0;
855
- margin-block-end: var(--utrecht-separator-margin-block-end);
856
- margin-block-start: var(--utrecht-separator-margin-block-start);
857
- }
858
-
431
+ /* stylelint-disable-next-line block-no-empty */
432
+ /* TODO: Enable ordering properties when the plugin supports logical CSS properties
433
+ * https://github.com/hudochenkov/stylelint-order/pull/162 */
434
+ /* stylelint-disable order/properties-alphabetical-order */
859
435
  /**
860
436
  * @license EUPL-1.2
861
437
  * Copyright (c) 2021 Robbert Broersma
@@ -863,652 +439,1355 @@
863
439
  /**
864
440
  * @license EUPL-1.2
865
441
  * Copyright (c) 2021 Robbert Broersma
442
+ * Copyright (c) 2021 Gemeente Utrecht
866
443
  */
867
- .utrecht-table, .utrecht-html table {
868
- border-collapse: collapse;
869
- width: 100%;
444
+ /* Collection of all semantic HTML styles in the component library */
445
+ .utrecht-html {
446
+ /* override the `:focus` selector above */
447
+ /* stylelint-disable-next-line no-descending-specificity */
448
+ /* stylelint-disable selector-class-pattern */
449
+ --utrecht-space-around: 1;
870
450
  }
871
-
872
- .utrecht-table--distanced, .utrecht-html table {
873
- margin-block-end: var(--utrecht-table-margin-block-end);
874
- margin-block-start: var(--utrecht-table-margin-block-start);
451
+ .utrecht-html article {
452
+ max-inline-size: var(--utrecht-article-max-inline-size);
875
453
  }
876
-
877
- .utrecht-table__caption, .utrecht-html caption {
878
- color: var(--utrecht-table-caption-color);
879
- font-family: var(--utrecht-table-caption-font-family);
880
- font-size: var(--utrecht-table-caption-font-size);
881
- font-weight: var(--utrecht-table-caption-font-weight);
882
- line-height: var(--utrecht-table-caption-line-height);
883
- margin-block-end: var(--utrecht-table-caption-margin-block-end);
884
- text-align: var(--utrecht-table-caption-text-align, center);
454
+ .utrecht-html blockquote {
455
+ background-color: var(--utrecht-blockquote-background-color);
456
+ color: var(--utrecht-blockquote-color);
457
+ font-family: var(--utrecht-document-font-family);
458
+ font-size: var(--utrecht-blockquote-font-size);
459
+ font-style: var(--utrecht-blockquote-font-style);
460
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
461
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
462
+ margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
463
+ margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
464
+ padding-block-end: var(--utrecht-blockquote-padding-block-end);
465
+ padding-block-start: var(--utrecht-blockquote-padding-block-start);
466
+ padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
467
+ padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
468
+ --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
469
+ --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
470
+ color: var(--utrecht-blockquote-content-color, inherit);
471
+ font-size: var(--utrecht-blockquote-content-font-size, inherit);
472
+ --utrecht-space-around: 1;
473
+ }
474
+ .utrecht-html input[type=button i],
475
+ .utrecht-html input[type=reset i],
476
+ .utrecht-html input[type=submit i],
477
+ .utrecht-html button {
478
+ /*
479
+ `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
480
+ The hint color takes priority over the appearance color.
481
+
482
+ `--_utrecht-button-appearance` is the internal prefix for the appearance
483
+ (primary-action, secondary-action or subtle), it is not an API.
484
+ */
485
+ --_utrecht-button-background-color: var(
486
+ --_utrecht-button-hint-background-color,
487
+ var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
488
+ );
489
+ --_utrecht-button-color: var(
490
+ --_utrecht-button-hint-color,
491
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
492
+ );
493
+ --_utrecht-button-border-color: var(
494
+ --_utrecht-button-hint-border-color,
495
+ var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
496
+ );
497
+ --_utrecht-button-border-bottom-color: var(
498
+ --_utrecht-button-hint-border-bottom-color,
499
+ var(
500
+ --_utrecht-button-hint-border-color,
501
+ var(
502
+ --_utrecht-button-appearance-border-bottom-color,
503
+ var(
504
+ --_utrecht-button-appearance-border-color,
505
+ var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
506
+ )
507
+ )
508
+ )
509
+ );
510
+ --_utrecht-button-disabled-background-color: var(
511
+ --_utrecht-button-hint-disabled-background-color,
512
+ var(
513
+ --_utrecht-button-appearance-disabled-background-color,
514
+ var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
515
+ )
516
+ );
517
+ --_utrecht-button-disabled-border-color: var(
518
+ --_utrecht-button-hint-disabled-border-color,
519
+ var(
520
+ --_utrecht-button-appearance-disabled-border-color,
521
+ var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
522
+ )
523
+ );
524
+ --_utrecht-button-disabled-color: var(
525
+ --_utrecht-button-hint-disabled-color,
526
+ var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
527
+ );
528
+ --_utrecht-button-pressed-background-color: var(
529
+ --_utrecht-button-hint-pressed-background-color,
530
+ var(
531
+ --_utrecht-button-hint-background-color,
532
+ var(
533
+ --_utrecht-button-appearance-pressed-background-color,
534
+ var(
535
+ --_utrecht-button-appearance-background-color,
536
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
537
+ )
538
+ )
539
+ )
540
+ );
541
+ --_utrecht-button-pressed-border-color: var(
542
+ --_utrecht-button-hint-pressed-border-color,
543
+ var(
544
+ --_utrecht-button-hint-border-color,
545
+ var(
546
+ --_utrecht-button-appearance-pressed-border-color,
547
+ var(
548
+ --_utrecht-button-appearance-border-color,
549
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
550
+ )
551
+ )
552
+ )
553
+ );
554
+ --_utrecht-button-pressed-color: var(
555
+ --_utrecht-button-hint-pressed-color,
556
+ var(
557
+ --_utrecht-button-hint-color,
558
+ var(
559
+ --_utrecht-button-appearance-pressed-color,
560
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
561
+ )
562
+ )
563
+ );
564
+ --_utrecht-button-focus-background-color: var(
565
+ --_utrecht-button-hint-focus-background-color,
566
+ var(
567
+ --_utrecht-button-hint-background-color,
568
+ var(
569
+ --_utrecht-button-appearance-focus-background-color,
570
+ var(
571
+ --_utrecht-button-appearance-background-color,
572
+ var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
573
+ )
574
+ )
575
+ )
576
+ );
577
+ --_utrecht-button-focus-border-color: var(
578
+ --_utrecht-button-hint-focus-border-color,
579
+ var(
580
+ --_utrecht-button-hint-border-color,
581
+ var(
582
+ --_utrecht-button-appearance-focus-border-color,
583
+ var(
584
+ --_utrecht-button-appearance-border-color,
585
+ var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
586
+ )
587
+ )
588
+ )
589
+ );
590
+ --_utrecht-button-focus-color: var(
591
+ --_utrecht-button-hint-focus-color,
592
+ var(
593
+ --_utrecht-button-hint-color,
594
+ var(
595
+ --_utrecht-button-appearance-focus-color,
596
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
597
+ )
598
+ )
599
+ );
600
+ --_utrecht-button-hover-background-color: var(
601
+ --_utrecht-button-hint-hover-background-color,
602
+ var(
603
+ --_utrecht-button-hint-background-color,
604
+ var(
605
+ --_utrecht-button-appearance-hover-background-color,
606
+ var(
607
+ --_utrecht-button-appearance-background-color,
608
+ var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
609
+ )
610
+ )
611
+ )
612
+ );
613
+ --_utrecht-button-hover-border-color: var(
614
+ --_utrecht-button-hint-hover-border-color,
615
+ var(
616
+ --_utrecht-button-hint-border-color,
617
+ var(
618
+ --_utrecht-button-appearance-hover-border-color,
619
+ var(
620
+ --_utrecht-button-appearance-border-color,
621
+ var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
622
+ )
623
+ )
624
+ )
625
+ );
626
+ --_utrecht-button-hover-color: var(
627
+ --_utrecht-button-hint-hover-color,
628
+ var(
629
+ --_utrecht-button-hint-color,
630
+ var(
631
+ --_utrecht-button-appearance-hover-color,
632
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
633
+ )
634
+ )
635
+ );
636
+ --_utrecht-button-active-background-color: var(
637
+ --_utrecht-button-hint-active-background-color,
638
+ var(
639
+ --_utrecht-button-hint-background-color,
640
+ var(
641
+ --_utrecht-button-appearance-active-background-color,
642
+ var(
643
+ --_utrecht-button-appearance-background-color,
644
+ var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
645
+ )
646
+ )
647
+ )
648
+ );
649
+ --_utrecht-button-active-border-color: var(
650
+ --_utrecht-button-hint-active-border-color,
651
+ var(
652
+ --_utrecht-button-hint-border-color,
653
+ var(
654
+ --_utrecht-button-appearance-active-border-color,
655
+ var(
656
+ --_utrecht-button-appearance-border-color,
657
+ var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
658
+ )
659
+ )
660
+ )
661
+ );
662
+ --_utrecht-button-active-color: var(
663
+ --_utrecht-button-hint-active-color,
664
+ var(
665
+ --_utrecht-button-hint-color,
666
+ var(
667
+ --_utrecht-button-appearance-active-color,
668
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
669
+ )
670
+ )
671
+ );
672
+ --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
673
+ --_utrecht-button-border-block-end-width: var(
674
+ --utrecht-button-border-bottom-width,
675
+ var(--_utrecht-button-border-width, 0)
676
+ );
677
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
678
+ align-items: center;
679
+ background-color: var(--_utrecht-button-background-color);
680
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
681
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
682
+ border-color: var(--_utrecht-button-border-color);
683
+ border-radius: var(--utrecht-button-border-radius);
684
+ border-style: solid;
685
+ border-width: var(--_utrecht-button-border-width);
686
+ box-sizing: border-box;
687
+ color: var(--_utrecht-button-color);
688
+ cursor: var(--utrecht-action-activate-cursor);
689
+ display: inline-flex;
690
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
691
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
692
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
693
+ gap: var(--utrecht-button-icon-gap);
694
+ inline-size: var(--utrecht-button-inline-size, auto);
695
+ justify-content: center;
696
+ line-height: var(--utrecht-button-line-height);
697
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
698
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
699
+ padding-block-end: var(--utrecht-button-padding-block-end);
700
+ padding-block-start: var(--utrecht-button-padding-block-start);
701
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
702
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
703
+ text-transform: var(--utrecht-button-text-transform);
704
+ -webkit-user-select: none;
705
+ user-select: none;
706
+ margin-block-end: var(--utrecht-button-margin-block-end);
707
+ margin-block-start: var(--utrecht-button-margin-block-start);
708
+ margin-inline-end: var(--utrecht-button-margin-inline-end);
709
+ margin-inline-start: var(--utrecht-button-margin-inline-start);
885
710
  }
886
-
887
- .utrecht-table__header, .utrecht-html thead {
888
- color: var(--utrecht-table-header-color);
889
- font-weight: var(--utrecht-table-header-font-weight);
890
- text-transform: var(--utrecht-table-header-text-transform);
891
- vertical-align: bottom;
711
+ .utrecht-html button[type=submit i],
712
+ .utrecht-html input[type=submit i] {
713
+ cursor: var(--utrecht-action-submit-cursor);
714
+ }
715
+ .utrecht-html button:disabled,
716
+ .utrecht-html button[aria-disabled=true] {
717
+ background-color: var(--_utrecht-button-disabled-background-color);
718
+ border-color: var(--_utrecht-button-disabled-border-color);
719
+ color: var(--_utrecht-button-disabled-color);
720
+ cursor: var(--utrecht-action-disabled-cursor);
721
+ }
722
+ .utrecht-html button[aria-busy=true],
723
+ .utrecht-html button[aria-disabled=true][aria-busy=true],
724
+ .utrecht-html button:disabled[aria-busy=true] {
725
+ cursor: var(--utrecht-action-busy-cursor);
726
+ }
727
+ .utrecht-html button:active:not([aria-disabled=true], :disabled) {
728
+ background-color: var(--_utrecht-button-active-background-color);
729
+ border-color: var(--_utrecht-button-active-border-color);
730
+ color: var(--_utrecht-button-active-color);
731
+ }
732
+ .utrecht-html button:hover:not([aria-disabled=true], :disabled) {
733
+ background-color: var(--_utrecht-button-hover-background-color);
734
+ border-color: var(--_utrecht-button-hover-border-color);
735
+ color: var(--_utrecht-button-hover-color);
736
+ scale: var(--utrecht-button-hover-scale, 1);
737
+ }
738
+ .utrecht-html button:focus:not([aria-disabled=true], :disabled) {
739
+ background-color: var(--_utrecht-button-focus-background-color);
740
+ border-color: var(--_utrecht-button-focus-border-color);
741
+ color: var(--_utrecht-button-focus-color);
742
+ scale: var(--utrecht-button-focus-scale, 1);
743
+ }
744
+ .utrecht-html button:focus-visible {
745
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
746
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
747
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
748
+ * can combine it with the focus ring box shadow.
749
+ */
750
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
751
+ var(--utrecht-focus-inverse-outline-color, transparent);
752
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
753
+ outline-color: var(--utrecht-focus-outline-color, revert);
754
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
755
+ outline-style: var(--utrecht-focus-outline-style, revert);
756
+ outline-width: var(--utrecht-focus-outline-width, revert);
757
+ }
758
+ .utrecht-html input[type=checkbox i] {
759
+ margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
760
+ margin-block-start: 0;
761
+ margin-inline-end: 0;
762
+ margin-inline-start: 0;
763
+ cursor: var(--utrecht-action-activate-cursor, revert);
764
+ -webkit-user-select: none;
765
+ user-select: none;
766
+ }
767
+ .utrecht-html input[type=checkbox i]:disabled {
768
+ cursor: var(--utrecht-action-disabled-cursor, revert);
769
+ }
770
+ .utrecht-html input[type=checkbox i]:focus {
771
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
772
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
773
+ * can combine it with the focus ring box shadow.
774
+ */
775
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
776
+ var(--utrecht-focus-inverse-outline-color, transparent);
777
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
778
+ outline-color: var(--utrecht-focus-outline-color, revert);
779
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
780
+ outline-style: var(--utrecht-focus-outline-style, revert);
781
+ outline-width: var(--utrecht-focus-outline-width, revert);
782
+ }
783
+ .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
784
+ /* undo focus ring */
785
+ box-shadow: none;
786
+ outline-style: revert;
787
+ }
788
+ .utrecht-html body {
789
+ /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
790
+ color: var(--utrecht-document-color, inherit);
791
+ font-family: var(--utrecht-document-font-family, inherit);
792
+ font-size: var(--utrecht-document-font-size, inherit);
793
+ font-weight: var(--utrecht-document-font-weight, inherit);
794
+ line-height: var(--utrecht-document-line-height, inherit);
795
+ text-rendering: optimizeLegibility;
796
+ -moz-text-size-adjust: none;
797
+ -webkit-text-size-adjust: none;
798
+ text-size-adjust: none;
799
+ background-color: var(--utrecht-document-background-color, inherit);
800
+ }
801
+ .utrecht-html body :lang(ar) {
802
+ /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
803
+ letter-spacing: 0 !important;
804
+ }
805
+ .utrecht-html code {
806
+ /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
807
+ background-color: var(--utrecht-code-background-color);
808
+ color: var(--utrecht-code-color);
809
+ font-family: var(--utrecht-code-font-family, monospace), monospace;
810
+ font-size: var(--utrecht-code-font-size);
811
+ font-variant-ligatures: none;
812
+ line-height: var(--utrecht-code-line-height);
813
+ }
814
+ .utrecht-html em {
815
+ font-style: var(--utrecht-emphasis-stressed-font-style, italic);
892
816
  }
893
-
894
- .utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
895
- border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
896
- border-block-end-style: solid;
897
- border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
817
+ .utrecht-html strong {
818
+ font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
898
819
  }
899
-
900
- .utrecht-table__body, .utrecht-html tbody {
901
- vertical-align: baseline;
820
+ .utrecht-html fieldset {
821
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
822
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
823
+ all: revert;
824
+ border: 0;
825
+ margin-inline-end: 0;
826
+ margin-inline-start: 0;
827
+ min-inline-size: 0;
828
+ padding-block-end: 0;
829
+ padding-block-start: 0.01em;
830
+ padding-inline-end: 0;
831
+ padding-inline-start: 0;
832
+ --utrecht-space-around: 1;
902
833
  }
903
-
904
- .utrecht-table__heading, .utrecht-html th {
905
- color: var(--utrecht-table-heading-color);
906
- font-weight: var(--utrecht-table-heading-font-weight);
907
- text-transform: var(--utrecht-table-heading-text-transform);
834
+ .utrecht-html figure {
835
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
836
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
908
837
  }
909
-
910
- .utrecht-table__cell, .utrecht-html th,
911
- .utrecht-html td {
912
- border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
913
- border-block-end-style: solid;
914
- border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
915
- line-height: var(--utrecht-table-cell-line-height, inherit);
916
- padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
917
- padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
918
- padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
919
- padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
920
- text-align: start;
838
+ .utrecht-html figcaption {
839
+ color: var(--utrecht-figure-caption-color);
840
+ font-size: var(--utrecht-figure-caption-font-size);
841
+ line-height: var(--utrecht-figure-caption-line-height);
921
842
  }
922
-
923
- .utrecht-table__cell--first, .utrecht-html td:first-child,
924
- .utrecht-html th:first-child {
925
- padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
843
+ .utrecht-html form {
844
+ max-inline-size: var(--utrecht-form-max-inline-size);
926
845
  }
927
-
928
- .utrecht-table__cell--last, .utrecht-html td:last-child,
929
- .utrecht-html th:last-child {
930
- padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
931
- }
932
-
933
- .utrecht-table__cell--numeric, .utrecht-html th.numeric,
934
- .utrecht-html td.numeric {
935
- /* stylelint-disable-next-line declaration-property-value-disallowed-list */
936
- text-align: right;
937
- }
938
-
939
- .utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
940
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
941
- color: var(--utrecht-table-row-alternate-odd-color);
942
- }
943
-
944
- .utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
945
- background-color: var(--utrecht-table-row-alternate-even-background-color);
946
- color: var(--utrecht-table-row-alternate-even-color);
947
- }
948
-
949
- /* stylelint-disable selector-class-pattern */
950
- /**
951
- * @license EUPL-1.2
952
- * Copyright (c) 2021 Robbert Broersma
953
- */
954
- /**
955
- * @license EUPL-1.2
956
- * Copyright (c) 2021 Robbert Broersma
957
- */
958
- .utrecht-textarea, .utrecht-html textarea {
959
- border-width: var(--utrecht-textarea-border-width);
960
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
961
- border-color: var(--utrecht-textarea-border-color);
962
- border-radius: var(--utrecht-textarea-border-radius, 0);
963
- border-style: solid;
964
- color: var(--utrecht-textarea-color);
965
- font-family: var(--utrecht-textarea-font-family);
966
- font-size: var(--utrecht-textarea-font-size, 1em);
967
- max-width: var(--utrecht-textarea-max-width);
968
- padding-block-end: var(--utrecht-textarea-padding-block-end);
969
- padding-block-start: var(--utrecht-textarea-padding-block-start);
970
- padding-inline-end: var(--utrecht-textarea-padding-inline-end);
971
- padding-inline-start: var(--utrecht-textarea-padding-inline-start);
972
- width: 100%;
973
- }
974
-
975
- .utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-html textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea[aria-invalid=true] {
976
- border-color: var(--utrecht-textarea-invalid-border-color);
977
- border-width: var(--utrecht-textarea-invalid-border-width);
978
- }
979
-
980
- .utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
981
- border-color: var(--utrecht-textarea-disabled-border-color);
982
- color: var(--utrecht-textarea-disabled-color);
983
- }
984
-
985
- .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
986
- background-color: var(--utrecht-focus-background-color);
987
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
988
- color: var(--utrecht-focus-color, inherit);
989
- outline-color: var(--utrecht-focus-outline-color, transparent);
990
- outline-offset: 0;
991
- outline-style: var(--utrecht-focus-outline-style, solid);
992
- outline-width: var(--utrecht-focus-outline-width, 0);
993
- }
994
-
995
- .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
996
- border-color: var(--utrecht-textarea-read-only-border-color);
997
- color: var(--utrecht-textarea-read-only-color);
998
- }
999
-
1000
- /**
1001
- * @license EUPL-1.2
1002
- * Copyright (c) 2021 Robbert Broersma
1003
- */
1004
- /**
1005
- * @license EUPL-1.2
1006
- * Copyright (c) 2021 Robbert Broersma
1007
- */
1008
- .utrecht-textbox, .utrecht-html input[type=email],
1009
- .utrecht-html input[type=password],
1010
- .utrecht-html input[type=search],
1011
- .utrecht-html input[type=tel],
1012
- .utrecht-html input[type=text],
1013
- .utrecht-html input[type=url] {
1014
- border-width: var(--utrecht-textbox-border-width);
1015
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
1016
- border-color: var(--utrecht-textbox-border-color);
1017
- border-radius: var(--utrecht-textbox-border-radius, 0);
1018
- border-style: solid;
1019
- box-sizing: border-box;
1020
- color: var(--utrecht-textbox-color);
1021
- font-family: var(--utrecht-textbox-font-family);
1022
- font-size: var(--utrecht-textbox-font-size, 1em);
1023
- max-width: var(--utrecht-textbox-max-width);
1024
- padding-block-end: var(--utrecht-textbox-padding-block-end);
1025
- padding-block-start: var(--utrecht-textbox-padding-block-start);
1026
- padding-inline-end: var(--utrecht-textbox-padding-inline-end);
1027
- padding-inline-start: var(--utrecht-textbox-padding-inline-start);
1028
- width: 100%;
1029
- }
1030
-
1031
- .utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input[type=email]:invalid,
1032
- .utrecht-html input[type=password]:invalid,
1033
- .utrecht-html input[type=search]:invalid,
1034
- .utrecht-html input[type=tel]:invalid,
1035
- .utrecht-html input[type=text]:invalid,
1036
- .utrecht-html input[type=url]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true][type=email],
1037
- .utrecht-html input[aria-invalid=true][type=password],
1038
- .utrecht-html input[aria-invalid=true][type=search],
1039
- .utrecht-html input[aria-invalid=true][type=tel],
1040
- .utrecht-html input[aria-invalid=true][type=text],
1041
- .utrecht-html input[aria-invalid=true][type=url] {
1042
- border-color: var(--utrecht-textbox-invalid-border-color);
1043
- border-width: var(--utrecht-textbox-invalid-border-width);
1044
- }
1045
-
1046
- .utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input[type=email]:disabled,
1047
- .utrecht-html input[type=password]:disabled,
1048
- .utrecht-html input[type=search]:disabled,
1049
- .utrecht-html input[type=tel]:disabled,
1050
- .utrecht-html input[type=text]:disabled,
1051
- .utrecht-html input[type=url]:disabled {
1052
- border-color: var(--utrecht-textbox-disabled-border-color);
1053
- color: var(--utrecht-textbox-disabled-color);
1054
- }
1055
-
1056
- .utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input[type=email]:focus,
1057
- .utrecht-html input[type=password]:focus,
1058
- .utrecht-html input[type=search]:focus,
1059
- .utrecht-html input[type=tel]:focus,
1060
- .utrecht-html input[type=text]:focus,
1061
- .utrecht-html input[type=url]:focus {
1062
- background-color: var(--utrecht-focus-background-color);
1063
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1064
- color: var(--utrecht-focus-color, inherit);
1065
- outline-color: var(--utrecht-focus-outline-color, transparent);
1066
- outline-offset: 0;
1067
- outline-style: var(--utrecht-focus-outline-style, solid);
1068
- outline-width: var(--utrecht-focus-outline-width, 0);
1069
- }
1070
-
1071
- .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input[type=email]:read-only,
1072
- .utrecht-html input[type=password]:read-only,
1073
- .utrecht-html input[type=search]:read-only,
1074
- .utrecht-html input[type=tel]:read-only,
1075
- .utrecht-html input[type=text]:read-only,
1076
- .utrecht-html input[type=url]:read-only {
1077
- border-color: var(--utrecht-textbox-read-only-border-color);
1078
- color: var(--utrecht-textbox-read-only-color);
1079
- }
1080
-
1081
- /**
1082
- * @license EUPL-1.2
1083
- * Copyright (c) 2021 Robbert Broersma
1084
- */
1085
- /**
1086
- * @license EUPL-1.2
1087
- * Copyright (c) 2021 Robbert Broersma
1088
- * Copyright (c) 2021 Gemeente Utrecht
1089
- */
1090
- .utrecht-unordered-list, .utrecht-html ul {
1091
- font-family: var(--utrecht-document-font-family, inherit);
1092
- font-size: var(--utrecht-document-font-size, inherit);
1093
- line-height: var(--utrecht-document-line-height, inherit);
1094
- padding-inline-start: 2ch;
846
+ .utrecht-html legend {
847
+ color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
848
+ font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
849
+ font-size: var(--utrecht-form-fieldset-legend-font-size);
850
+ font-weight: var(--utrecht-form-fieldset-legend-font-weight);
851
+ line-height: var(--utrecht-form-fieldset-legend-line-height);
852
+ page-break-after: avoid;
853
+ page-break-inside: avoid;
854
+ display: table;
855
+ inline-size: 100%;
856
+ padding-inline-end: 0;
857
+ padding-inline-start: 0;
858
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
859
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
1095
860
  }
1096
-
1097
- .utrecht-unordered-list--distanced, .utrecht-html ul {
1098
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1099
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
861
+ .utrecht-html fieldset:disabled > legend {
862
+ color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
1100
863
  }
1101
-
1102
- .utrecht-unordered-list--nested {
1103
- margin-block-end: 0;
1104
- margin-inline-start: 2ch;
864
+ .utrecht-html label {
865
+ color: var(--utrecht-form-label-color);
866
+ font-size: var(--utrecht-form-label-font-size);
867
+ font-weight: var(--utrecht-form-label-font-weight);
1105
868
  }
1106
-
1107
- .utrecht-unordered-list__item, .utrecht-html ul > li {
1108
- margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
1109
- margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
1110
- padding-inline-start: 1ch;
869
+ .utrecht-html input[type=checkbox i] ~ label {
870
+ color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
871
+ cursor: var(--utrecht-action-activate-cursor, revert);
872
+ font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
1111
873
  }
1112
-
1113
- .utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
1114
- .utrecht-unordered-list__marker {
1115
- color: var(--utrecht-unordered-list-marker-color);
1116
- content: "●";
874
+ .utrecht-html input[type=radio i] ~ label {
875
+ color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
876
+ cursor: var(--utrecht-action-activate-cursor, revert);
877
+ font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
1117
878
  }
1118
-
1119
- /**
1120
- * @license EUPL-1.2
1121
- * Copyright (c) 2021 Robbert Broersma
1122
- */
1123
- /**
1124
- * @license EUPL-1.2
1125
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1126
- * Copyright (c) 2021 Gemeente Utrecht
1127
- */
1128
- .utrecht-link, .utrecht-html a:link {
1129
- color: var(--utrecht-link-color, blue);
1130
- text-decoration: var(--utrecht-link-text-decoration, underline);
879
+ .utrecht-html mark {
880
+ background-color: var(--utrecht-mark-background-color, revert);
881
+ color: var(--utrecht-mark-color, revert);
882
+ }
883
+ @media print {
884
+ .utrecht-html mark {
885
+ outline-color: currentColor;
886
+ outline-style: dotted;
887
+ outline-width: 0.1em;
888
+ }
889
+ }
890
+ @media screen and (-ms-high-contrast: active) {
891
+ .utrecht-html mark {
892
+ background-color: Highlight;
893
+ color: HighlightText;
894
+ }
895
+ }
896
+ .utrecht-html h1 {
897
+ page-break-after: avoid;
898
+ page-break-inside: avoid;
899
+ color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
900
+ font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
901
+ font-size: var(--utrecht-heading-1-font-size, revert);
902
+ font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
903
+ line-height: var(--utrecht-heading-1-line-height);
904
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
905
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
906
+ page-break-after: avoid;
907
+ --utrecht-space-around: 1;
908
+ }
909
+ .utrecht-html h2 {
910
+ page-break-after: avoid;
911
+ page-break-inside: avoid;
912
+ color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
913
+ font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
914
+ font-size: var(--utrecht-heading-2-font-size, revert);
915
+ font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
916
+ line-height: var(--utrecht-heading-2-line-height);
917
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
918
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
919
+ page-break-after: avoid;
920
+ --utrecht-space-around: 1;
921
+ }
922
+ .utrecht-html h3 {
923
+ page-break-after: avoid;
924
+ page-break-inside: avoid;
925
+ color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
926
+ font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
927
+ font-size: var(--utrecht-heading-3-font-size, revert);
928
+ font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
929
+ line-height: var(--utrecht-heading-3-line-height);
930
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
931
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
932
+ page-break-after: avoid;
933
+ --utrecht-space-around: 1;
934
+ }
935
+ .utrecht-html h4 {
936
+ page-break-after: avoid;
937
+ page-break-inside: avoid;
938
+ color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
939
+ font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
940
+ font-size: var(--utrecht-heading-4-font-size, revert);
941
+ font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
942
+ line-height: var(--utrecht-heading-4-line-height);
943
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
944
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
945
+ page-break-after: avoid;
946
+ --utrecht-space-around: 1;
947
+ }
948
+ .utrecht-html h5 {
949
+ page-break-after: avoid;
950
+ page-break-inside: avoid;
951
+ color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
952
+ font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
953
+ font-size: var(--utrecht-heading-5-font-size, revert);
954
+ font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
955
+ line-height: var(--utrecht-heading-5-line-height);
956
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
957
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
958
+ page-break-after: avoid;
959
+ --utrecht-space-around: 1;
960
+ }
961
+ .utrecht-html h6 {
962
+ page-break-after: avoid;
963
+ page-break-inside: avoid;
964
+ color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
965
+ font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
966
+ font-size: var(--utrecht-heading-6-font-size, revert);
967
+ font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
968
+ line-height: var(--utrecht-heading-6-line-height);
969
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
970
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
971
+ page-break-after: avoid;
972
+ --utrecht-space-around: 1;
973
+ }
974
+ .utrecht-html hgroup {
975
+ --utrecht-pre-heading-order: -1;
976
+ display: flex;
977
+ flex-direction: column;
978
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));
979
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0));
980
+ --utrecht-space-around: 1;
981
+ }
982
+ .utrecht-html hgroup > * {
983
+ --utrecht-space-around: 0;
984
+ }
985
+ .utrecht-html a {
986
+ --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
987
+ color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
1131
988
  }
1132
-
1133
- .utrecht-link:visited,
1134
- .utrecht-link--visited,
1135
989
  .utrecht-html a:visited {
1136
- color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
990
+ --_utrecht-link-forced-colors-color: visitedtext;
991
+ --_utrecht-link-state-color: var(--utrecht-link-visited-color);
1137
992
  }
1138
-
1139
- .utrecht-link:hover,
1140
- .utrecht-link--hover,
1141
993
  .utrecht-html a:hover {
1142
- color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
1143
- text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
994
+ --_utrecht-link-forced-colors-color: linktext;
995
+ --_utrecht-link-state-color: var(--utrecht-link-hover-color);
996
+ --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
997
+ --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
998
+ text-decoration-skip: none;
999
+ text-decoration-skip-ink: none;
1144
1000
  }
1145
-
1146
- .utrecht-link:active,
1147
- .utrecht-link--active,
1148
1001
  .utrecht-html a:active {
1149
- color: var(--utrecht-link-active-color, var(--utrecht-link-color));
1002
+ --_utrecht-link-forced-colors-color: activetext;
1003
+ --_utrecht-link-state-color: var(--utrecht-link-active-color);
1150
1004
  }
1151
-
1152
- .utrecht-link:focus,
1153
- .utrecht-link--focus,
1154
1005
  .utrecht-html a:focus {
1155
- color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1156
- text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1157
- background-color: var(--utrecht-focus-background-color);
1158
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1159
- color: var(--utrecht-focus-color, inherit);
1160
- outline-color: var(--utrecht-focus-outline-color, transparent);
1161
- outline-offset: 0;
1162
- outline-style: var(--utrecht-focus-outline-style, solid);
1163
- outline-width: var(--utrecht-focus-outline-width, 0);
1164
- }
1165
-
1166
- /* stylelint-disable-next-line block-no-empty */
1167
- .utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
1006
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
1007
+ --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
1008
+ --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
1009
+ background-color: var(--utrecht-link-focus-background-color, transparent);
1010
+ text-decoration-skip: none;
1011
+ text-decoration-skip-ink: none;
1012
+ /*
1013
+ * WCAG SC 2.4.12: Focus Not Obscured
1014
+ * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
1015
+ */
1016
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1017
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1018
+ * can combine it with the focus ring box shadow.
1019
+ */
1020
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1021
+ var(--utrecht-focus-inverse-outline-color, transparent);
1022
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1023
+ outline-color: var(--utrecht-focus-outline-color, revert);
1024
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1025
+ outline-style: var(--utrecht-focus-outline-style, revert);
1026
+ outline-width: var(--utrecht-focus-outline-width, revert);
1027
+ z-index: var(--utrecht-stack-focus-z-index, 1);
1028
+ }
1029
+ .utrecht-html a:focus:not(:focus-visible) {
1030
+ /* undo focus ring */
1031
+ box-shadow: none;
1032
+ outline-style: revert;
1033
+ }
1034
+ .utrecht-html a[href^="tel:" i] {
1168
1035
  white-space: nowrap;
1169
1036
  }
1170
-
1171
- /**
1172
- * @license EUPL-1.2
1173
- * Copyright (c) 2021 Robbert Broersma
1174
- */
1175
- /**
1176
- * @license EUPL-1.2
1177
- * Copyright (c) 2021 Robbert Broersma
1178
- * Copyright (c) 2021 Gemeente Utrecht
1179
- */
1180
- .utrecht-ordered-list, .utrecht-html ol {
1037
+ .utrecht-html ol {
1038
+ /* Configure `box-sizing` and `text-align` for `--center` */
1039
+ box-sizing: border-box;
1181
1040
  font-family: var(--utrecht-document-font-family, inherit);
1041
+ font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
1042
+ line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
1043
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
1044
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
1045
+ padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
1046
+ text-align: start;
1047
+ --utrecht-space-around: 1;
1182
1048
  }
1183
-
1184
- .utrecht-ordered-list--distanced, .utrecht-html ol {
1185
- margin-block-end: var(--utrecht-ordered-list-margin-block-end);
1186
- margin-block-start: var(--utrecht-ordered-list-margin-block-start);
1049
+ .utrecht-html ol > li {
1050
+ margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
1051
+ margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
1052
+ padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
1187
1053
  }
1188
-
1189
- .utrecht-ordered-list__item, .utrecht-html ol > li {
1190
- margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
1191
- margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
1054
+ .utrecht-html ol:lang(ar) {
1055
+ list-style: arabic-indic;
1192
1056
  }
1193
-
1194
- /**
1195
- * @license EUPL-1.2
1196
- * Copyright (c) 2021 Robbert Broersma
1197
- */
1198
- /**
1199
- * @license EUPL-1.2
1200
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1201
- */
1202
- .utrecht-paragraph, .utrecht-html p {
1203
- color: var(--utrecht-document-color, inherit);
1057
+ .utrecht-html p {
1058
+ color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
1204
1059
  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
1205
1060
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
1206
1061
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
1207
1062
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
1208
- }
1209
-
1210
- .utrecht-paragraph--lead, .utrecht-html p.lead {
1211
- font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1212
- font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1213
- line-height: var(--utrecht-paragraph-lead-line-height, inherit);
1214
- }
1215
-
1216
- .utrecht-paragraph--distanced, .utrecht-html * ~ p {
1217
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
1218
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
1219
- }
1220
-
1221
- /* stylelint-disable selector-class-pattern */
1222
- /**
1223
- * @license EUPL-1.2
1224
- * Copyright (c) 2021 Gemeente Utrecht
1225
- */
1226
- /**
1227
- * @license EUPL-1.2
1228
- * Copyright (c) 2021 Gemeente Utrecht
1229
- */
1230
- .utrecht-radio-button, .utrecht-html input[type=radio] {
1063
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
1064
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
1065
+ }
1066
+ .utrecht-html p.lead {
1067
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
1068
+ font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
1069
+ font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
1070
+ line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
1071
+ }
1072
+ .utrecht-html * ~ p {
1073
+ --utrecht-space-around: 1;
1074
+ }
1075
+ .utrecht-html p:has(> small:only-child) {
1076
+ color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
1077
+ font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
1078
+ font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
1079
+ line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
1080
+ }
1081
+ .utrecht-html p > small:only-child {
1082
+ font-size: inherit;
1083
+ }
1084
+ .utrecht-html pre:has(> code:only-child) {
1085
+ /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
1086
+ background-color: var(--utrecht-code-background-color);
1087
+ color: var(--utrecht-code-color);
1088
+ font-family: var(--utrecht-code-font-family, monospace), monospace;
1089
+ font-size: var(--utrecht-code-font-size);
1090
+ font-variant-ligatures: none;
1091
+ line-height: var(--utrecht-code-line-height);
1092
+ --utrecht-code-color: var(--utrecht-code-block-color, inherit);
1093
+ --utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
1094
+ --utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
1095
+ --utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
1096
+ --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
1097
+ background-color: var(--utrecht-code-block-background-color);
1098
+ display: block;
1099
+ font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));
1100
+ line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
1101
+ margin-block-end: var(--utrecht-code-block-margin-block-end);
1102
+ margin-block-start: var(--utrecht-code-block-margin-block-start);
1103
+ margin-inline-end: var(--utrecht-code-block-margin-inline-end);
1104
+ margin-inline-start: var(--utrecht-code-block-margin-inline-start);
1105
+ padding-block-end: var(--utrecht-code-block-padding-block-end);
1106
+ padding-block-start: var(--utrecht-code-block-padding-block-start);
1107
+ padding-inline-end: var(--utrecht-code-block-padding-inline-end);
1108
+ padding-inline-start: var(--utrecht-code-block-padding-inline-start);
1109
+ white-space: pre;
1110
+ }
1111
+ .utrecht-html pre:has(> code:only-child) > code {
1112
+ display: contents;
1113
+ }
1114
+ .utrecht-html input[type=radio i] {
1115
+ /*
1116
+ * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
1117
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
1118
+ */
1119
+ /*
1120
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
1121
+ * With a 0% gradient, the circle will have jagged edges.
1122
+ */
1123
+ -webkit-appearance: none;
1124
+ -moz-appearance: none;
1125
+ appearance: none;
1231
1126
  margin-block-end: 0;
1232
- /* reset native margin for input[type="radio"] */
1233
1127
  margin-block-start: 0;
1234
1128
  margin-inline-end: 0;
1235
1129
  margin-inline-start: 0;
1236
- }
1237
-
1238
- /**
1239
- * @license EUPL-1.2
1240
- * Copyright (c) 2021 Robbert Broersma
1241
- */
1242
- /**
1243
- * @license EUPL-1.2
1244
- * Copyright (c) 2021 Gemeente Utrecht
1245
- * Copyright (c) 2021 Robbert Broersma
1246
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1247
- */
1248
- .utrecht-separator, .utrecht-html hr {
1130
+ --_utrecht-radio-button-background-color: var(
1131
+ --_utrecht-radio-button-interactive-background-color,
1132
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
1133
+ );
1134
+ --_utrecht-radio-button-border-color: var(
1135
+ --_utrecht-radio-button-interactive-border-color,
1136
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
1137
+ );
1138
+ --_utrecht-radio-button-border-width: var(
1139
+ --_utrecht-radio-button-interactive-border-width,
1140
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
1141
+ );
1142
+ --_utrecht-radio-button-color: var(
1143
+ --_utrecht-radio-button-interactive-color,
1144
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
1145
+ );
1146
+ --_utrecht-radio-button-icon-size: 0;
1147
+ background-color: var(--_utrecht-radio-button-background-color);
1148
+ background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
1149
+ background-position: center;
1150
+ background-repeat: no-repeat;
1151
+ background-size: contain;
1152
+ block-size: var(--utrecht-radio-button-size, 1em);
1153
+ border-color: var(--_utrecht-radio-button-border-color);
1154
+ border-radius: 50%;
1155
+ border-style: solid;
1156
+ border-width: var(--_utrecht-radio-button-border-width);
1157
+ cursor: var(--utrecht-action-activate-cursor);
1158
+ inline-size: var(--utrecht-radio-button-size, 1em);
1159
+ margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1160
+ min-block-size: 24px;
1161
+ min-inline-size: 24px;
1162
+ -webkit-print-color-adjust: exact;
1163
+ print-color-adjust: exact;
1164
+ -webkit-user-select: none;
1165
+ user-select: none;
1166
+ vertical-align: top;
1167
+ /* override the `:focus` selector above */
1168
+ /* stylelint-disable-next-line no-descending-specificity */
1169
+ }
1170
+ .utrecht-html input[type=radio i]:checked {
1171
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
1172
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
1173
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
1174
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
1175
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
1176
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
1177
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
1178
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
1179
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
1180
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
1181
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
1182
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
1183
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
1184
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
1185
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
1186
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
1187
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
1188
+ }
1189
+ .utrecht-html input[type=radio i]:disabled {
1190
+ /*
1191
+ * The disabled radio button should have:
1192
+ * - should have no active effect
1193
+ * - should have no focus effect
1194
+ * - should have no hover effect
1195
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
1196
+ */
1197
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
1198
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
1199
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
1200
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
1201
+ /* no focus effect */
1202
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
1203
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
1204
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
1205
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
1206
+ /* no active effect */
1207
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
1208
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
1209
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
1210
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
1211
+ /* no hover effect */
1212
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
1213
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
1214
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
1215
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
1216
+ cursor: var(--utrecht-action-disabled-cursor);
1217
+ }
1218
+ .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1219
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
1220
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
1221
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
1222
+ }
1223
+ .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
1224
+ --_utrecht-radio-button-interactive-background-color: var(
1225
+ --utrecht-radio-button-focus-background-color,
1226
+ var(--utrecht-radio-button-focus-background-color)
1227
+ );
1228
+ --_utrecht-radio-button-interactive-border-color: var(
1229
+ --utrecht-radio-button-focus-border-color,
1230
+ var(--utrecht-radio-button-focus-border-color)
1231
+ );
1232
+ --_utrecht-radio-button-interactive-border-width: var(
1233
+ --utrecht-radio-button-focus-border-width,
1234
+ var(--utrecht-radio-button-focus-border-width)
1235
+ );
1236
+ --_utrecht-radio-button-interactive-color: var(
1237
+ --utrecht-radio-button-focus-color,
1238
+ var(--utrecht-radio-button-focus-color)
1239
+ );
1240
+ }
1241
+ .utrecht-html input[type=radio i]:focus-visible {
1242
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1243
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1244
+ * can combine it with the focus ring box shadow.
1245
+ */
1246
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1247
+ var(--utrecht-focus-inverse-outline-color, transparent);
1248
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1249
+ outline-color: var(--utrecht-focus-outline-color, revert);
1250
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1251
+ outline-style: var(--utrecht-focus-outline-style, revert);
1252
+ outline-width: var(--utrecht-focus-outline-width, revert);
1253
+ }
1254
+ .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
1255
+ --_utrecht-radio-button-interactive-background-color: var(
1256
+ --_utrecht-radio-button-state-hover-background-color,
1257
+ var(--utrecht-radio-button-hover-background-color)
1258
+ );
1259
+ --_utrecht-radio-button-interactive-border-color: var(
1260
+ --_utrecht-radio-button-state-hover-border-color,
1261
+ var(--utrecht-radio-button-hover-border-color)
1262
+ );
1263
+ --_utrecht-radio-button-interactive-border-width: var(
1264
+ --_utrecht-radio-button-state-hover-border-width,
1265
+ var(--utrecht-radio-button-hover-border-width)
1266
+ );
1267
+ --_utrecht-radio-button-interactive-color: var(
1268
+ --_utrecht-radio-button-state-hover-color,
1269
+ var(--utrecht-radio-button-hover-color)
1270
+ );
1271
+ }
1272
+ .utrecht-html input[type=radio i]:active:not([aria-disabled=true], :disabled) {
1273
+ --_utrecht-radio-button-interactive-background-color: var(
1274
+ --_utrecht-radio-button-state-active-background-color,
1275
+ var(--utrecht-radio-button-active-background-color)
1276
+ );
1277
+ --_utrecht-radio-button-interactive-border-color: var(
1278
+ --_utrecht-radio-button-state-active-border-color,
1279
+ var(--utrecht-radio-button-active-border-color)
1280
+ );
1281
+ --_utrecht-radio-button-interactive-border-width: var(
1282
+ --_utrecht-radio-button-state-active-border-width,
1283
+ var(--utrecht-radio-button-active-border-width)
1284
+ );
1285
+ --_utrecht-radio-button-interactive-color: var(
1286
+ --_utrecht-radio-button-state-active-color,
1287
+ var(--utrecht-radio-button-active-color)
1288
+ );
1289
+ }
1290
+ .utrecht-html select {
1291
+ -moz-appearance: none;
1292
+ -webkit-appearance: none;
1293
+ appearance: none;
1294
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
1295
+ background-image: var(--utrecht-select-background-image);
1296
+ background-position: 100%;
1297
+ background-repeat: no-repeat;
1298
+ background-size: 1.4em;
1299
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
1300
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1301
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
1302
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1303
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
1304
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
1305
+ border-style: solid;
1306
+ color: var(--utrecht-select-color, var(--utrecht-form-control-color));
1307
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
1308
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
1309
+ inline-size: 100%;
1310
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
1311
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
1312
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
1313
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
1314
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
1315
+ /* <select> does not have a `readonly` attribute */
1316
+ }
1317
+ .utrecht-html select:focus {
1318
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1319
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1320
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
1321
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1322
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1323
+ * can combine it with the focus ring box shadow.
1324
+ */
1325
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1326
+ var(--utrecht-focus-inverse-outline-color, transparent);
1327
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1328
+ outline-color: var(--utrecht-focus-outline-color, revert);
1329
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1330
+ outline-style: var(--utrecht-focus-outline-style, revert);
1331
+ outline-width: var(--utrecht-focus-outline-width, revert);
1332
+ }
1333
+ .utrecht-html select:focus:not(:focus-visible) {
1334
+ /* undo focus ring */
1335
+ box-shadow: none;
1336
+ outline-style: revert;
1337
+ }
1338
+ .utrecht-html select:disabled {
1339
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1340
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1341
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
1342
+ cursor: var(--utrecht-action-disabled-cursor);
1343
+ }
1344
+ .utrecht-html select[aria-invalid=true] {
1345
+ --_utrecht-select-border-width: var(
1346
+ --utrecht-select-invalid-border-width,
1347
+ var(
1348
+ --utrecht-form-control-invalid-border-width,
1349
+ var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
1350
+ )
1351
+ );
1352
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1353
+ border-width: var(--_utrecht-select-border-width);
1354
+ border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
1355
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1356
+ }
1357
+ .utrecht-html hr {
1249
1358
  border-color: var(--utrecht-separator-color);
1250
1359
  border-style: solid;
1251
- border-width: 0 0 var(--utrecht-separator-width) 0;
1252
- margin-block-end: var(--utrecht-separator-margin-block-end);
1253
- margin-block-start: var(--utrecht-separator-margin-block-start);
1254
- }
1255
-
1256
- /**
1257
- * @license EUPL-1.2
1258
- * Copyright (c) 2021 Robbert Broersma
1259
- */
1260
- /**
1261
- * @license EUPL-1.2
1262
- * Copyright (c) 2021 Robbert Broersma
1263
- */
1264
- .utrecht-table, .utrecht-html table {
1265
- border-collapse: collapse;
1266
- width: 100%;
1267
- }
1268
-
1269
- .utrecht-table--distanced, .utrecht-html table {
1270
- margin-block-end: var(--utrecht-table-margin-block-end);
1271
- margin-block-start: var(--utrecht-table-margin-block-start);
1272
- }
1273
-
1274
- .utrecht-table__caption, .utrecht-html caption {
1360
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1361
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
1362
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
1363
+ --utrecht-space-around: 1;
1364
+ }
1365
+ .utrecht-html table {
1366
+ /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
1367
+ * Therefore we need to use `border-collapse: separate` instead.
1368
+ */
1369
+ border-collapse: separate;
1370
+ border-color: var(--utrecht-table-border-color, 0);
1371
+ border-spacing: 0;
1372
+ border-style: solid;
1373
+ border-width: var(--utrecht-table-border-width, 0);
1374
+ font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
1375
+ font-size: var(--utrecht-table-font-size, inherit);
1376
+ inline-size: 100%;
1377
+ line-height: var(--utrecht-table-line-height, inherit);
1378
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
1379
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
1380
+ --utrecht-space-around: 1;
1381
+ }
1382
+ .utrecht-html caption {
1275
1383
  color: var(--utrecht-table-caption-color);
1276
1384
  font-family: var(--utrecht-table-caption-font-family);
1277
1385
  font-size: var(--utrecht-table-caption-font-size);
1278
1386
  font-weight: var(--utrecht-table-caption-font-weight);
1279
1387
  line-height: var(--utrecht-table-caption-line-height);
1280
1388
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
1389
+ page-break-after: avoid;
1281
1390
  text-align: var(--utrecht-table-caption-text-align, center);
1282
1391
  }
1283
-
1284
- .utrecht-table__header, .utrecht-html thead {
1392
+ .utrecht-html thead {
1393
+ --_utrecht-table-header-cell-vertical-align: bottom;
1394
+ --_utrecht-table-header-cell-z-index: 8;
1395
+ background-color: var(--utrecht-table-header-background-color);
1285
1396
  color: var(--utrecht-table-header-color);
1286
1397
  font-weight: var(--utrecht-table-header-font-weight);
1398
+ page-break-inside: avoid;
1287
1399
  text-transform: var(--utrecht-table-header-text-transform);
1288
- vertical-align: bottom;
1289
1400
  }
1290
-
1291
- .utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
1292
- border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
1293
- border-block-end-style: solid;
1294
- border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
1401
+ .utrecht-html tbody {
1402
+ --_utrecht-table-header-cell-z-index: 2;
1295
1403
  }
1296
-
1297
- .utrecht-table__body, .utrecht-html tbody {
1298
- vertical-align: baseline;
1299
- }
1300
-
1301
- .utrecht-table__heading, .utrecht-html th {
1302
- color: var(--utrecht-table-heading-color);
1303
- font-weight: var(--utrecht-table-heading-font-weight);
1304
- text-transform: var(--utrecht-table-heading-text-transform);
1305
- }
1306
-
1307
- .utrecht-table__cell, .utrecht-html th,
1404
+ .utrecht-html th {
1405
+ --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
1406
+ /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
1407
+ block-size: var(--utrecht-table-cell-line-height, 1em);
1408
+ line-height: var(--utrecht-table-cell-line-height, inherit);
1409
+ padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
1410
+ padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
1411
+ padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
1412
+ padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
1413
+ text-align: start;
1414
+ color: var(--utrecht-table-header-cell-color);
1415
+ font-size: var(--utrecht-table-header-cell-font-size);
1416
+ font-weight: var(--utrecht-table-header-cell-font-weight, bold);
1417
+ text-transform: var(--utrecht-table-header-cell-text-transform);
1418
+ vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
1419
+ z-index: var(--_utrecht-table-header-cell-z-index);
1420
+ }
1421
+ .utrecht-html th,
1308
1422
  .utrecht-html td {
1309
- border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
1310
- border-block-end-style: solid;
1311
- border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
1423
+ --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
1424
+ /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
1425
+ block-size: var(--utrecht-table-cell-line-height, 1em);
1312
1426
  line-height: var(--utrecht-table-cell-line-height, inherit);
1313
1427
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
1314
1428
  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
1315
1429
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
1316
1430
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
1317
1431
  text-align: start;
1432
+ border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
1433
+ border-block-end-style: solid;
1434
+ border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
1435
+ vertical-align: top;
1318
1436
  }
1319
-
1320
- .utrecht-table__cell--first, .utrecht-html td:first-child,
1437
+ .utrecht-html td:first-child,
1321
1438
  .utrecht-html th:first-child {
1322
1439
  padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
1323
1440
  }
1324
-
1325
- .utrecht-table__cell--last, .utrecht-html td:last-child,
1441
+ .utrecht-html td:last-child,
1326
1442
  .utrecht-html th:last-child {
1327
1443
  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
1328
1444
  }
1329
-
1330
- .utrecht-table__cell--numeric, .utrecht-html th.numeric,
1445
+ .utrecht-html thead tr:last-child th {
1446
+ border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
1447
+ border-block-end-style: solid;
1448
+ border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
1449
+ }
1450
+ .utrecht-html thead > tr > th.numeric,
1451
+ .utrecht-html tfoot > tr > th.numeric,
1452
+ .utrecht-html th[scope=column].numeric {
1453
+ --_utrecht-table-cell-text-align: right;
1454
+ /* stylelint-disable-next-line declaration-property-value-disallowed-list */
1455
+ text-align: var(--_utrecht-table-cell-text-align);
1456
+ }
1331
1457
  .utrecht-html td.numeric {
1458
+ --_utrecht-table-cell-text-align: right;
1332
1459
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
1333
- text-align: right;
1460
+ text-align: var(--_utrecht-table-cell-text-align);
1461
+ font-variant-numeric: lining-nums tabular-nums;
1334
1462
  }
1335
-
1336
- .utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
1463
+ .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
1464
+ background-color: var(--utrecht-table-row-alternate-even-background-color);
1465
+ color: var(--utrecht-table-row-alternate-even-color);
1466
+ }
1467
+ .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
1337
1468
  background-color: var(--utrecht-table-row-alternate-odd-background-color);
1338
1469
  color: var(--utrecht-table-row-alternate-odd-color);
1339
1470
  }
1340
-
1341
- .utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
1471
+ .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
1342
1472
  background-color: var(--utrecht-table-row-alternate-even-background-color);
1343
1473
  color: var(--utrecht-table-row-alternate-even-color);
1344
1474
  }
1345
-
1346
- /* stylelint-disable selector-class-pattern */
1347
- /**
1348
- * @license EUPL-1.2
1349
- * Copyright (c) 2021 Robbert Broersma
1350
- */
1351
- /**
1352
- * @license EUPL-1.2
1353
- * Copyright (c) 2021 Robbert Broersma
1354
- */
1355
- .utrecht-textarea, .utrecht-html textarea {
1356
- border-width: var(--utrecht-textarea-border-width);
1357
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
1358
- border-color: var(--utrecht-textarea-border-color);
1359
- border-radius: var(--utrecht-textarea-border-radius, 0);
1360
- border-style: solid;
1361
- color: var(--utrecht-textarea-color);
1362
- font-family: var(--utrecht-textarea-font-family);
1363
- font-size: var(--utrecht-textarea-font-size, 1em);
1364
- max-width: var(--utrecht-textarea-max-width);
1365
- padding-block-end: var(--utrecht-textarea-padding-block-end);
1366
- padding-block-start: var(--utrecht-textarea-padding-block-start);
1367
- padding-inline-end: var(--utrecht-textarea-padding-inline-end);
1368
- padding-inline-start: var(--utrecht-textarea-padding-inline-start);
1369
- width: 100%;
1370
- }
1371
-
1372
- .utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1373
- border-color: var(--utrecht-textarea-invalid-border-color);
1374
- border-width: var(--utrecht-textarea-invalid-border-width);
1375
- }
1376
-
1377
- .utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
1378
- border-color: var(--utrecht-textarea-disabled-border-color);
1379
- color: var(--utrecht-textarea-disabled-color);
1380
- }
1381
-
1382
- .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
1383
- background-color: var(--utrecht-focus-background-color);
1384
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1385
- color: var(--utrecht-focus-color, inherit);
1386
- outline-color: var(--utrecht-focus-outline-color, transparent);
1387
- outline-offset: 0;
1388
- outline-style: var(--utrecht-focus-outline-style, solid);
1389
- outline-width: var(--utrecht-focus-outline-width, 0);
1390
- }
1391
-
1392
- .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
1393
- border-color: var(--utrecht-textarea-read-only-border-color);
1394
- color: var(--utrecht-textarea-read-only-color);
1475
+ .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
1476
+ background-color: var(--utrecht-table-row-alternate-odd-background-color);
1477
+ color: var(--utrecht-table-row-alternate-odd-color);
1395
1478
  }
1396
-
1397
- /**
1398
- * @license EUPL-1.2
1399
- * Copyright (c) 2021 Robbert Broersma
1400
- */
1401
- /**
1402
- * @license EUPL-1.2
1403
- * Copyright (c) 2021 Robbert Broersma
1404
- */
1405
- .utrecht-textbox, .utrecht-html input[type=email],
1406
- .utrecht-html input[type=password],
1407
- .utrecht-html input[type=search],
1408
- .utrecht-html input[type=tel],
1409
- .utrecht-html input[type=text],
1410
- .utrecht-html input[type=url] {
1411
- border-width: var(--utrecht-textbox-border-width);
1412
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
1413
- border-color: var(--utrecht-textbox-border-color);
1414
- border-radius: var(--utrecht-textbox-border-radius, 0);
1479
+ .utrecht-html textarea {
1480
+ /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1481
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1482
+ block-size: initial; /* harden */
1483
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
1484
+ border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
1485
+ border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
1486
+ border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
1415
1487
  border-style: solid;
1416
1488
  box-sizing: border-box;
1417
- color: var(--utrecht-textbox-color);
1418
- font-family: var(--utrecht-textbox-font-family);
1419
- font-size: var(--utrecht-textbox-font-size, 1em);
1420
- max-width: var(--utrecht-textbox-max-width);
1421
- padding-block-end: var(--utrecht-textbox-padding-block-end);
1422
- padding-block-start: var(--utrecht-textbox-padding-block-start);
1423
- padding-inline-end: var(--utrecht-textbox-padding-inline-end);
1424
- padding-inline-start: var(--utrecht-textbox-padding-inline-start);
1425
- width: 100%;
1426
- }
1427
-
1428
- .utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[type=email]:invalid,
1429
- .utrecht-html input[type=password]:invalid,
1430
- .utrecht-html input[type=search]:invalid,
1431
- .utrecht-html input[type=tel]:invalid,
1432
- .utrecht-html input[type=text]:invalid,
1433
- .utrecht-html input[type=url]:invalid, .utrecht-html input[aria-invalid=true][type=email],
1434
- .utrecht-html input[aria-invalid=true][type=password],
1435
- .utrecht-html input[aria-invalid=true][type=search],
1436
- .utrecht-html input[aria-invalid=true][type=tel],
1437
- .utrecht-html input[aria-invalid=true][type=text],
1438
- .utrecht-html input[aria-invalid=true][type=url] {
1439
- border-color: var(--utrecht-textbox-invalid-border-color);
1440
- border-width: var(--utrecht-textbox-invalid-border-width);
1441
- }
1442
-
1443
- .utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input[type=email]:disabled,
1444
- .utrecht-html input[type=password]:disabled,
1445
- .utrecht-html input[type=search]:disabled,
1446
- .utrecht-html input[type=tel]:disabled,
1447
- .utrecht-html input[type=text]:disabled,
1448
- .utrecht-html input[type=url]:disabled {
1449
- border-color: var(--utrecht-textbox-disabled-border-color);
1450
- color: var(--utrecht-textbox-disabled-color);
1451
- }
1452
-
1453
- .utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input[type=email]:focus,
1454
- .utrecht-html input[type=password]:focus,
1455
- .utrecht-html input[type=search]:focus,
1456
- .utrecht-html input[type=tel]:focus,
1457
- .utrecht-html input[type=text]:focus,
1458
- .utrecht-html input[type=url]:focus {
1459
- background-color: var(--utrecht-focus-background-color);
1460
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1461
- color: var(--utrecht-focus-color, inherit);
1462
- outline-color: var(--utrecht-focus-outline-color, transparent);
1463
- outline-offset: 0;
1464
- outline-style: var(--utrecht-focus-outline-style, solid);
1465
- outline-width: var(--utrecht-focus-outline-width, 0);
1466
- }
1467
-
1468
- .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input[type=email]:read-only,
1469
- .utrecht-html input[type=password]:read-only,
1470
- .utrecht-html input[type=search]:read-only,
1471
- .utrecht-html input[type=tel]:read-only,
1472
- .utrecht-html input[type=text]:read-only,
1473
- .utrecht-html input[type=url]:read-only {
1474
- border-color: var(--utrecht-textbox-read-only-border-color);
1475
- color: var(--utrecht-textbox-read-only-color);
1476
- }
1477
-
1478
- /**
1479
- * @license EUPL-1.2
1480
- * Copyright (c) 2021 Robbert Broersma
1481
- */
1482
- /**
1483
- * @license EUPL-1.2
1484
- * Copyright (c) 2021 Robbert Broersma
1485
- * Copyright (c) 2021 Gemeente Utrecht
1486
- */
1487
- .utrecht-unordered-list, .utrecht-html ul {
1489
+ color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
1490
+ font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
1491
+ font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
1492
+ font-weight: initial; /* harden */
1493
+ inline-size: 100%;
1494
+ line-height: var(--utrecht-textarea-line-height, initial);
1495
+ max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
1496
+ min-block-size: var(--utrecht-textarea-min-block-size);
1497
+ padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1498
+ padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1499
+ padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1500
+ padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1501
+ resize: vertical;
1502
+ resize: block;
1503
+ /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
1504
+ /*
1505
+ * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
1506
+ *
1507
+ * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
1508
+ */
1509
+ }
1510
+ .utrecht-html textarea:focus {
1511
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1512
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1513
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1514
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1515
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1516
+ * can combine it with the focus ring box shadow.
1517
+ */
1518
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1519
+ var(--utrecht-focus-inverse-outline-color, transparent);
1520
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1521
+ outline-color: var(--utrecht-focus-outline-color, revert);
1522
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1523
+ outline-style: var(--utrecht-focus-outline-style, revert);
1524
+ outline-width: var(--utrecht-focus-outline-width, revert);
1525
+ }
1526
+ .utrecht-html textarea:focus:not(:focus-visible) {
1527
+ /* undo focus ring */
1528
+ box-shadow: none;
1529
+ outline-style: revert;
1530
+ }
1531
+ .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1532
+ --_utrecht-textarea-border-width: var(
1533
+ --utrecht-textarea-invalid-border-width,
1534
+ var(
1535
+ --utrecht-form-control-invalid-border-width,
1536
+ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
1537
+ )
1538
+ );
1539
+ 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))));
1540
+ border-width: var(--_utrecht-textarea-border-width);
1541
+ border-block-end-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
1542
+ 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))));
1543
+ color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1544
+ }
1545
+ .utrecht-html textarea:read-only {
1546
+ 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))));
1547
+ 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))));
1548
+ color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1549
+ }
1550
+ .utrecht-html textarea:disabled {
1551
+ background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1552
+ border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1553
+ color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1554
+ cursor: var(--utrecht-action-disabled-cursor);
1555
+ }
1556
+ .utrecht-html textarea::placeholder {
1557
+ color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1558
+ font-style: var(--utrecht-form-control-placeholder-font-style);
1559
+ opacity: 100%;
1560
+ }
1561
+ .utrecht-html input:not([type]),
1562
+ .utrecht-html input[type=date i],
1563
+ .utrecht-html input[type=datetime-local i],
1564
+ .utrecht-html input[type=email i],
1565
+ .utrecht-html input[type=month i],
1566
+ .utrecht-html input[type=number i],
1567
+ .utrecht-html input[type=password i],
1568
+ .utrecht-html input[type=search i],
1569
+ .utrecht-html input[type=tel i],
1570
+ .utrecht-html input[type=text i],
1571
+ .utrecht-html input[type=time i],
1572
+ .utrecht-html input[type=url i],
1573
+ .utrecht-html input[type=week i] {
1574
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
1575
+ block-size: initial; /* harden */
1576
+ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
1577
+ border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
1578
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
1579
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
1580
+ border-style: solid;
1581
+ box-sizing: border-box;
1582
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
1583
+ font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1584
+ font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
1585
+ font-weight: initial; /* harden */
1586
+ inline-size: 100%;
1587
+ line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
1588
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
1589
+ padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1590
+ padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1591
+ padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1592
+ padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1593
+ /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
1594
+ /*
1595
+ * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
1596
+ *
1597
+ * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
1598
+ */
1599
+ }
1600
+ .utrecht-html input:not([type]):focus,
1601
+ .utrecht-html input[type=date i]:focus,
1602
+ .utrecht-html input[type=datetime-local i]:focus,
1603
+ .utrecht-html input[type=email i]:focus,
1604
+ .utrecht-html input[type=month i]:focus,
1605
+ .utrecht-html input[type=number i]:focus,
1606
+ .utrecht-html input[type=password i]:focus,
1607
+ .utrecht-html input[type=search i]:focus,
1608
+ .utrecht-html input[type=tel i]:focus,
1609
+ .utrecht-html input[type=text i]:focus,
1610
+ .utrecht-html input[type=time i]:focus,
1611
+ .utrecht-html input[type=url i]:focus,
1612
+ .utrecht-html input[type=week i]:focus {
1613
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1614
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1615
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1616
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1617
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1618
+ * can combine it with the focus ring box shadow.
1619
+ */
1620
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1621
+ var(--utrecht-focus-inverse-outline-color, transparent);
1622
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1623
+ outline-color: var(--utrecht-focus-outline-color, revert);
1624
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1625
+ outline-style: var(--utrecht-focus-outline-style, revert);
1626
+ outline-width: var(--utrecht-focus-outline-width, revert);
1627
+ }
1628
+ .utrecht-html input:not([type]):focus:not(:focus-visible),
1629
+ .utrecht-html input[type=date i]:focus:not(:focus-visible),
1630
+ .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
1631
+ .utrecht-html input[type=email i]:focus:not(:focus-visible),
1632
+ .utrecht-html input[type=month i]:focus:not(:focus-visible),
1633
+ .utrecht-html input[type=number i]:focus:not(:focus-visible),
1634
+ .utrecht-html input[type=password i]:focus:not(:focus-visible),
1635
+ .utrecht-html input[type=search i]:focus:not(:focus-visible),
1636
+ .utrecht-html input[type=tel i]:focus:not(:focus-visible),
1637
+ .utrecht-html input[type=text i]:focus:not(:focus-visible),
1638
+ .utrecht-html input[type=time i]:focus:not(:focus-visible),
1639
+ .utrecht-html input[type=url i]:focus:not(:focus-visible),
1640
+ .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1641
+ /* undo focus ring */
1642
+ box-shadow: none;
1643
+ outline-style: revert;
1644
+ }
1645
+ .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1646
+ .utrecht-html input[type=date i]:invalid,
1647
+ .utrecht-html input[type=date i][aria-invalid=true],
1648
+ .utrecht-html input[type=datetime-local i]:invalid,
1649
+ .utrecht-html input[type=datetime-local i][aria-invalid=true],
1650
+ .utrecht-html input[type=email i]:invalid,
1651
+ .utrecht-html input[type=email i][aria-invalid=true],
1652
+ .utrecht-html input[type=month i]:invalid,
1653
+ .utrecht-html input[type=month i][aria-invalid=true],
1654
+ .utrecht-html input[type=number i]:invalid,
1655
+ .utrecht-html input[type=number i][aria-invalid=true],
1656
+ .utrecht-html input[type=password i]:invalid,
1657
+ .utrecht-html input[type=password i][aria-invalid=true],
1658
+ .utrecht-html input[type=search i]:invalid,
1659
+ .utrecht-html input[type=search i][aria-invalid=true],
1660
+ .utrecht-html input[type=tel i]:invalid,
1661
+ .utrecht-html input[type=tel i][aria-invalid=true],
1662
+ .utrecht-html input[type=text i]:invalid,
1663
+ .utrecht-html input[type=text i][aria-invalid=true],
1664
+ .utrecht-html input[type=time i]:invalid,
1665
+ .utrecht-html input[type=time i][aria-invalid=true],
1666
+ .utrecht-html input[type=url i]:invalid,
1667
+ .utrecht-html input[type=url i][aria-invalid=true],
1668
+ .utrecht-html input[type=week i]:invalid,
1669
+ .utrecht-html input[type=week i][aria-invalid=true] {
1670
+ --_utrecht-textbox-border-width: var(
1671
+ --utrecht-textbox-invalid-border-width,
1672
+ var(
1673
+ --utrecht-form-control-invalid-border-width,
1674
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
1675
+ )
1676
+ );
1677
+ 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))));
1678
+ border-width: var(--_utrecht-textbox-border-width);
1679
+ border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
1680
+ 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))));
1681
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1682
+ }
1683
+ .utrecht-html input:not([type]):read-only,
1684
+ .utrecht-html input[type=date i]:read-only,
1685
+ .utrecht-html input[type=datetime-local i]:read-only,
1686
+ .utrecht-html input[type=email i]:read-only,
1687
+ .utrecht-html input[type=month i]:read-only,
1688
+ .utrecht-html input[type=number i]:read-only,
1689
+ .utrecht-html input[type=password i]:read-only,
1690
+ .utrecht-html input[type=search i]:read-only,
1691
+ .utrecht-html input[type=tel i]:read-only,
1692
+ .utrecht-html input[type=text i]:read-only,
1693
+ .utrecht-html input[type=time i]:read-only,
1694
+ .utrecht-html input[type=url i]:read-only,
1695
+ .utrecht-html input[type=week i]:read-only {
1696
+ 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))));
1697
+ 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))));
1698
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1699
+ }
1700
+ .utrecht-html input:not([type]):disabled,
1701
+ .utrecht-html input[type=date i]:disabled,
1702
+ .utrecht-html input[type=datetime-local i]:disabled,
1703
+ .utrecht-html input[type=email i]:disabled,
1704
+ .utrecht-html input[type=month i]:disabled,
1705
+ .utrecht-html input[type=number i]:disabled,
1706
+ .utrecht-html input[type=password i]:disabled,
1707
+ .utrecht-html input[type=search i]:disabled,
1708
+ .utrecht-html input[type=tel i]:disabled,
1709
+ .utrecht-html input[type=text i]:disabled,
1710
+ .utrecht-html input[type=time i]:disabled,
1711
+ .utrecht-html input[type=url i]:disabled,
1712
+ .utrecht-html input[type=week i]:disabled {
1713
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1714
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1715
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1716
+ cursor: var(--utrecht-action-disabled-cursor);
1717
+ }
1718
+ .utrecht-html input:not([type])::placeholder,
1719
+ .utrecht-html input[type=date i]::placeholder,
1720
+ .utrecht-html input[type=datetime-local i]::placeholder,
1721
+ .utrecht-html input[type=email i]::placeholder,
1722
+ .utrecht-html input[type=month i]::placeholder,
1723
+ .utrecht-html input[type=number i]::placeholder,
1724
+ .utrecht-html input[type=password i]::placeholder,
1725
+ .utrecht-html input[type=search i]::placeholder,
1726
+ .utrecht-html input[type=tel i]::placeholder,
1727
+ .utrecht-html input[type=text i]::placeholder,
1728
+ .utrecht-html input[type=time i]::placeholder,
1729
+ .utrecht-html input[type=url i]::placeholder,
1730
+ .utrecht-html input[type=week i]::placeholder {
1731
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1732
+ font-style: var(--utrecht-form-control-placeholder-font-style);
1733
+ opacity: 100%;
1734
+ }
1735
+ .utrecht-html input[autocomplete~=current-password i],
1736
+ .utrecht-html input[autocomplete~=new-password i],
1737
+ .utrecht-html input[type=password i] {
1738
+ font-variant-ligatures: none;
1739
+ font-variant-numeric: slashed-zero;
1740
+ }
1741
+ .utrecht-html input[autocomplete~=bday i],
1742
+ .utrecht-html input[autocomplete~=bday-day i],
1743
+ .utrecht-html input[autocomplete~=bday-month i],
1744
+ .utrecht-html input[autocomplete~=bday-year i],
1745
+ .utrecht-html input[autocomplete~=cc-csc i],
1746
+ .utrecht-html input[autocomplete~=cc-exp i],
1747
+ .utrecht-html input[autocomplete~=cc-exp-month i],
1748
+ .utrecht-html input[autocomplete~=cc-exp-year i],
1749
+ .utrecht-html input[autocomplete~=cc-number i],
1750
+ .utrecht-html input[autocomplete~=one-time-code i],
1751
+ .utrecht-html input[autocomplete~=postal-code i],
1752
+ .utrecht-html input[autocomplete~=tel i],
1753
+ .utrecht-html input[autocomplete~=tel-area-code i],
1754
+ .utrecht-html input[autocomplete~=tel-country-code i],
1755
+ .utrecht-html input[autocomplete~=tel-extension i],
1756
+ .utrecht-html input[autocomplete~=tel-local i],
1757
+ .utrecht-html input[autocomplete~=tel-national i],
1758
+ .utrecht-html input[autocomplete~=transaction-amount i],
1759
+ .utrecht-html input[inputmode=decimal i],
1760
+ .utrecht-html input[inputmode=numeric i],
1761
+ .utrecht-html input[inputmode=tel i],
1762
+ .utrecht-html input[type=number i],
1763
+ .utrecht-html input[type=tel i] {
1764
+ -moz-appearance: textfield; /* avoid spinner input in Firefox */
1765
+ font-variant-numeric: lining-nums tabular-nums;
1766
+ }
1767
+ .utrecht-html input[inputmode=email i],
1768
+ .utrecht-html input[inputmode=url i],
1769
+ .utrecht-html input[type=email i],
1770
+ .utrecht-html input[type=url i] {
1771
+ font-variant-ligatures: none;
1772
+ }
1773
+ .utrecht-html ul {
1774
+ /* Configure `box-sizing` and `text-align` for `--center` */
1775
+ box-sizing: border-box;
1488
1776
  font-family: var(--utrecht-document-font-family, inherit);
1489
- font-size: var(--utrecht-document-font-size, inherit);
1490
- line-height: var(--utrecht-document-line-height, inherit);
1491
- padding-inline-start: 2ch;
1492
- }
1493
-
1494
- .utrecht-unordered-list--distanced, .utrecht-html ul {
1495
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1496
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1497
- }
1498
-
1499
- .utrecht-unordered-list--nested {
1500
- margin-block-end: 0;
1501
- margin-inline-start: 2ch;
1777
+ font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
1778
+ line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
1779
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1780
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1781
+ padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1782
+ text-align: start;
1783
+ --utrecht-space-around: 1;
1502
1784
  }
1503
-
1504
- .utrecht-unordered-list__item, .utrecht-html ul > li {
1785
+ .utrecht-html ul > li {
1505
1786
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
1506
1787
  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
1507
- padding-inline-start: 1ch;
1788
+ padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
1508
1789
  }
1509
-
1510
- .utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
1511
- .utrecht-unordered-list__marker {
1790
+ .utrecht-html ul > li::marker {
1512
1791
  color: var(--utrecht-unordered-list-marker-color);
1513
1792
  content: "●";
1514
1793
  }