@utrecht/component-library-css 3.0.1-alpha.9 → 3.2.0

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 (10) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/html.css +41 -18
  3. package/dist/html.js +1 -0
  4. package/dist/index.css +1795 -1354
  5. package/dist/index.js +1 -0
  6. package/package.json +8 -5
  7. package/rollup.config.mjs +37 -0
  8. package/src/html.scss +1 -1
  9. package/src/index.scss +1 -1
  10. package/LICENSE.txt +0 -287
package/dist/index.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --utrecht-button-focus-scale: 1;
51
51
  --utrecht-button-hover-scale: 1;
52
52
  --utrecht-button-inline-size: 100%;
53
+ --utrecht-button-min-inline-size: 100%;
53
54
  --utrecht-button-subtle-background-color: var(--utrecht-accordion-button-background-color);
54
55
  --utrecht-button-subtle-padding-inline-start: var(--utrecht-accordion-button-padding-inline-start);
55
56
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
@@ -67,11 +68,15 @@
67
68
  --utrecht-button-subtle-focus-color: var(--utrecht-accordion-button-focus-color);
68
69
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-border-color);
69
70
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-border-width);
71
+ --utrecht-button-icon-gap: var(--utrecht-accordion-button-gap, var(--utrecht-space-text-xs));
72
+ align-items: baseline;
70
73
  justify-content: start !important;
71
74
  position: relative;
75
+ text-align: start;
72
76
  }
73
- .utrecht-accordion__button[aria-expanded]::after {
74
- background-color: var(--utrecht-accordion-button-icon-background-color);
77
+
78
+ .utrecht-accordion__button--utrecht[aria-expanded]::after {
79
+ background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
75
80
  background-position: center;
76
81
  background-repeat: no-repeat;
77
82
  block-size: var(--utrecht-accordion-button-icon-size);
@@ -81,16 +86,23 @@
81
86
  inset-inline-end: 0;
82
87
  position: absolute;
83
88
  }
84
- .utrecht-accordion__button[aria-expanded=false]::after {
85
- background-image: var(--utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
89
+ .utrecht-accordion__button--utrecht[aria-expanded=false]::after {
90
+ background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
86
91
  }
87
- .utrecht-accordion__button[aria-expanded=true]::after {
88
- background-image: var(--utrecht-accordion-icon-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
92
+ .utrecht-accordion__button--utrecht[aria-expanded=true]::after {
93
+ background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
89
94
  background-position: center;
90
95
  background-repeat: no-repeat;
91
96
  content: "";
92
97
  }
93
98
 
99
+ .utrecht-accordion__button-icon {
100
+ display: flex;
101
+ }
102
+ .utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon {
103
+ transform: rotate(180deg);
104
+ }
105
+
94
106
  .utrecht-accordion__panel {
95
107
  border-block-start: none;
96
108
  border-color: var(--utrecht-accordion-panel-border-color);
@@ -106,76 +118,6 @@
106
118
  --utrecht-space-around: 0;
107
119
  }
108
120
 
109
- /**
110
- * @license EUPL-1.2
111
- * Copyright (c) 2020-2022 Gemeente Utrecht
112
- * Copyright (c) 2020-2022 Frameless B.V.
113
- */
114
- /**
115
- * @license EUPL-1.2
116
- * Copyright (c) 2020-2022 Gemeente Utrecht
117
- * Copyright (c) 2020-2022 Frameless B.V.
118
- */
119
- .utrecht-alert {
120
- background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
121
- border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
122
- border-radius: var(--utrecht-alert-border-radius, 0);
123
- border-style: solid;
124
- border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
125
- color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
126
- display: grid;
127
- gap: var(--utrecht-alert-icon-gap);
128
- grid-template-areas: "icon message";
129
- grid-template-columns: 0fr 100fr;
130
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
131
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
132
- padding-block-end: var(--utrecht-alert-padding-block-end);
133
- padding-block-start: var(--utrecht-alert-padding-block-start);
134
- padding-inline-end: var(--utrecht-alert-padding-inline-end);
135
- padding-inline-start: var(--utrecht-alert-padding-inline-start);
136
- }
137
-
138
- .utrecht-alert__icon {
139
- --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
140
- grid-area: icon;
141
- }
142
-
143
- .utrecht-alert__message {
144
- grid-area: message;
145
- }
146
-
147
- .utrecht-alert--info {
148
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
149
- --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
150
- --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
151
- --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
152
- --_utrecht-alert-color: var(--utrecht-alert-info-color);
153
- }
154
-
155
- .utrecht-alert--ok {
156
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
157
- --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
158
- --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
159
- --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
160
- --_utrecht-alert-color: var(--utrecht-alert-ok-color);
161
- }
162
-
163
- .utrecht-alert--warning {
164
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
165
- --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
166
- --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
167
- --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
168
- --_utrecht-alert-color: var(--utrecht-alert-warning-color);
169
- }
170
-
171
- .utrecht-alert--error {
172
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
173
- --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
174
- --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
175
- --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
176
- --_utrecht-alert-color: var(--utrecht-alert-error-color);
177
- }
178
-
179
121
  /**
180
122
  * @license EUPL-1.2
181
123
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -209,7 +151,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
209
151
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
210
152
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
211
153
  border-radius: var(--utrecht-alert-border-radius, 0);
212
- border-style: solid;
213
154
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
214
155
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
215
156
  display: grid;
@@ -245,14 +186,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
245
186
  -webkit-user-select: none;
246
187
  user-select: none;
247
188
  }
248
- @keyframes utrecht-backdrop-fade-in {
249
- from {
250
- opacity: 0%;
251
- }
252
- to {
253
- opacity: var(--_utrecht-backdrop-opacity);
254
- }
255
- }
256
189
  @media (prefers-reduced-motion: reduce) {
257
190
  .utrecht-alert-dialog::backdrop {
258
191
  --_utrecht-backdrop-fade-in-animation-duration: 0;
@@ -307,24 +240,64 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
307
240
  * Copyright (c) 2020-2022 Gemeente Utrecht
308
241
  * Copyright (c) 2020-2022 Frameless B.V.
309
242
  */
310
- /* stylelint-disable-next-line block-no-empty */
311
- .utrecht-index-char-nav {
312
- --utrecht-button-padding-inline-start: 1ch;
313
- --utrecht-button-padding-inline-end: 1ch;
314
- display: flex;
315
- flex-wrap: wrap;
316
- gap: var(--utrecht-index-char-nav-gap);
317
- margin-block-end: var(--utrecht-index-char-nav-margin-block-end);
318
- margin-block-start: var(--utrecht-index-char-nav-margin-block-start);
243
+ .utrecht-alert {
244
+ background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
245
+ border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
246
+ border-radius: var(--utrecht-alert-border-radius, 0);
247
+ border-style: solid;
248
+ border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
249
+ color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
250
+ display: grid;
251
+ gap: var(--utrecht-alert-icon-gap);
252
+ grid-template-areas: "icon message";
253
+ grid-template-columns: 0fr 100fr;
254
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
255
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
256
+ padding-block-end: var(--utrecht-alert-padding-block-end);
257
+ padding-block-start: var(--utrecht-alert-padding-block-start);
258
+ padding-inline-end: var(--utrecht-alert-padding-inline-end);
259
+ padding-inline-start: var(--utrecht-alert-padding-inline-start);
319
260
  }
320
261
 
321
- .utrecht-index-char-nav__link--current {
322
- --utrecht-button-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
323
- --utrecht-button-link-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
262
+ .utrecht-alert__icon {
263
+ --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
264
+ grid-area: icon;
324
265
  }
325
266
 
326
- .utrecht-index-char-nav__link--disabled {
327
- pointer-events: none;
267
+ .utrecht-alert__message {
268
+ grid-area: message;
269
+ }
270
+
271
+ .utrecht-alert--info {
272
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
273
+ --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
274
+ --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
275
+ --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
276
+ --_utrecht-alert-color: var(--utrecht-alert-info-color);
277
+ }
278
+
279
+ .utrecht-alert--ok {
280
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
281
+ --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
282
+ --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
283
+ --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
284
+ --_utrecht-alert-color: var(--utrecht-alert-ok-color);
285
+ }
286
+
287
+ .utrecht-alert--warning {
288
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
289
+ --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
290
+ --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
291
+ --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
292
+ --_utrecht-alert-color: var(--utrecht-alert-warning-color);
293
+ }
294
+
295
+ .utrecht-alert--error {
296
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
297
+ --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
298
+ --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
299
+ --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
300
+ --_utrecht-alert-color: var(--utrecht-alert-error-color);
328
301
  }
329
302
 
330
303
  /**
@@ -360,6 +333,58 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
360
333
  max-inline-size: var(--utrecht-article-max-inline-size);
361
334
  }
362
335
 
336
+ /**
337
+ * @license EUPL-1.2
338
+ * Copyright (c) 2020-2022 Gemeente Utrecht
339
+ * Copyright (c) 2020-2022 Frameless B.V.
340
+ */
341
+ /**
342
+ * @license EUPL-1.2
343
+ * Copyright (c) 2020-2022 Gemeente Utrecht
344
+ * Copyright (c) 2020-2022 Frameless B.V.
345
+ */
346
+ .utrecht-backdrop {
347
+ --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
348
+ --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
349
+ animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
350
+ animation-name: utrecht-backdrop-fade-in;
351
+ animation-timing-function: ease-in-out;
352
+ background-color: var(--utrecht-backdrop-background-color);
353
+ color: var(--utrecht-backdrop-color);
354
+ opacity: var(--_utrecht-backdrop-opacity);
355
+ -webkit-user-select: none;
356
+ user-select: none;
357
+ display: block;
358
+ inset-block-end: 0;
359
+ inset-block-start: 0;
360
+ inset-inline-end: 0;
361
+ inset-inline-start: 0;
362
+ position: absolute;
363
+ z-index: var(--utrecht-backdrop-z-index);
364
+ }
365
+ @media (prefers-reduced-motion: reduce) {
366
+ .utrecht-backdrop {
367
+ --_utrecht-backdrop-fade-in-animation-duration: 0;
368
+ }
369
+ }
370
+ @media (prefers-reduced-transparency: reduce) {
371
+ .utrecht-backdrop {
372
+ --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
373
+ }
374
+ }
375
+
376
+ .utrecht-backdrop--reduced-motion {
377
+ --_utrecht-backdrop-fade-in-animation-duration: 0;
378
+ }
379
+
380
+ .utrecht-backdrop--reduced-transparency {
381
+ --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
382
+ }
383
+
384
+ .utrecht-backdrop--viewport {
385
+ position: fixed;
386
+ }
387
+
363
388
  /**
364
389
  * @license EUPL-1.2
365
390
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -381,8 +406,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
381
406
  border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
382
407
  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
383
408
  display: inline-block;
384
- font-family: var(--utrecht-document-font-family, sans-serif);
385
- font-size: var(--utrecht-badge-counter-font-size);
409
+ font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
410
+ font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));
386
411
  font-style: var(--utrecht-badge-counter-font-style, normal); /* no inheritance */
387
412
  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
388
413
  line-height: 1;
@@ -581,86 +606,26 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
581
606
 
582
607
  /**
583
608
  * @license EUPL-1.2
584
- * Copyright (c) 2020-2022 Gemeente Utrecht
585
- * Copyright (c) 2020-2022 Frameless B.V.
609
+ * Copyright (c) 2021 Robbert Broersma
586
610
  */
587
611
  /**
588
612
  * @license EUPL-1.2
589
- * Copyright (c) 2020-2022 Gemeente Utrecht
590
- * Copyright (c) 2020-2022 Frameless B.V.
613
+ * Copyright (c) 2021 Robbert Broersma
591
614
  */
592
- .utrecht-backdrop {
593
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
594
- --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
595
- animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
596
- animation-name: utrecht-backdrop-fade-in;
597
- animation-timing-function: ease-in-out;
598
- background-color: var(--utrecht-backdrop-background-color);
599
- color: var(--utrecht-backdrop-color);
600
- opacity: var(--_utrecht-backdrop-opacity);
601
- -webkit-user-select: none;
602
- user-select: none;
603
- display: block;
604
- inset-block-end: 0;
605
- inset-block-start: 0;
606
- inset-inline-end: 0;
607
- inset-inline-start: 0;
608
- position: absolute;
609
- z-index: var(--utrecht-backdrop-z-index);
610
- }
611
- @keyframes utrecht-backdrop-fade-in {
612
- from {
613
- opacity: 0%;
614
- }
615
- to {
616
- opacity: var(--_utrecht-backdrop-opacity);
617
- }
618
- }
619
- @media (prefers-reduced-motion: reduce) {
620
- .utrecht-backdrop {
621
- --_utrecht-backdrop-fade-in-animation-duration: 0;
622
- }
623
- }
624
- @media (prefers-reduced-transparency: reduce) {
625
- .utrecht-backdrop {
626
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
627
- }
628
- }
629
-
630
- .utrecht-backdrop--reduced-motion {
631
- --_utrecht-backdrop-fade-in-animation-duration: 0;
632
- }
633
-
634
- .utrecht-backdrop--reduced-transparency {
635
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
636
- }
637
-
638
- .utrecht-backdrop--viewport {
639
- position: fixed;
640
- }
641
-
642
- /**
643
- * @license EUPL-1.2
644
- * Copyright (c) 2021 Robbert Broersma
645
- */
646
- /**
647
- * @license EUPL-1.2
648
- * Copyright (c) 2021 Robbert Broersma
649
- */
650
- .utrecht-blockquote {
651
- background-color: var(--utrecht-blockquote-background-color);
652
- color: var(--utrecht-blockquote-color);
653
- font-family: var(--utrecht-document-font-family);
654
- font-size: var(--utrecht-blockquote-font-size);
655
- font-style: var(--utrecht-blockquote-font-style);
656
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
657
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
658
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
659
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
660
- padding-block-end: var(--utrecht-blockquote-padding-block-end);
661
- padding-block-start: var(--utrecht-blockquote-padding-block-start);
662
- padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
663
- padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
615
+ .utrecht-blockquote {
616
+ background-color: var(--utrecht-blockquote-background-color);
617
+ color: var(--utrecht-blockquote-color);
618
+ font-family: var(--utrecht-document-font-family);
619
+ font-size: var(--utrecht-blockquote-font-size);
620
+ font-style: var(--utrecht-blockquote-font-style);
621
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
622
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
623
+ margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
624
+ margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
625
+ padding-block-end: var(--utrecht-blockquote-padding-block-end);
626
+ padding-block-start: var(--utrecht-blockquote-padding-block-start);
627
+ padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
628
+ padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
664
629
  }
665
630
 
666
631
  .utrecht-blockquote__attribution {
@@ -748,24 +713,23 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
748
713
  padding-inline-start: var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px);
749
714
  }
750
715
 
716
+ .utrecht-breadcrumb-nav__link--current {
717
+ --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
718
+ /* configure the `current` `cursor` only when the current state is applied */
719
+ --_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
720
+ font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
721
+ }
722
+
751
723
  .utrecht-breadcrumb-nav__link--disabled {
752
724
  --utrecht-link-placeholder-color: var(
753
725
  --utrecht-breadcrumb-nav-link-disabled-color,
754
726
  var(--utrecht-breadcrumb-nav-link-color)
755
727
  );
728
+ /* configure the `disabled` `cursor` only when the current state is applied */
729
+ --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
756
730
  background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
757
- color: var(--utrecht-link-placeholder-color);
758
- cursor: var(--utrecht-action-disabled-cursor, not-allowed);
759
- }
760
-
761
- .utrecht-breadcrumb-nav__link--current {
762
- /*
763
- * `current` should apply to `disabled` links too, and it should override `disabled`.
764
- * The override is the reason why this selector is not ordered alphabetically.
765
- */
766
- --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
767
- cursor: var(--utrecht-action-inert-cursor, default);
768
- font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
731
+ /* Use the `current` cursor when available, otherwise use the `disabled` cursor */
732
+ cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
769
733
  }
770
734
 
771
735
  /* stylelint-disable-next-line block-no-empty */
@@ -857,6 +821,48 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
857
821
  margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
858
822
  }
859
823
 
824
+ /**
825
+ * @license EUPL-1.2
826
+ * Copyright (c) 2022 Frameless B.V.
827
+ */
828
+ /**
829
+ * @license EUPL-1.2
830
+ * Copyright (c) 2022 Frameless B.V.
831
+ */
832
+ .utrecht-button-group {
833
+ align-items: baseline;
834
+ background-color: var(--utrecht-button-group-background-color);
835
+ display: flex;
836
+ flex-wrap: wrap;
837
+ gap: var(--utrecht-button-group-inline-gap, 1em);
838
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
839
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
840
+ min-block-size: var(--utrecht-button-block-size);
841
+ padding-block-end: var(--utrecht-button-group-padding-block-end);
842
+ padding-block-start: var(--utrecht-button-group-padding-block-start);
843
+ }
844
+
845
+ .utrecht-button-group--distanced {
846
+ --utrecht-space-around: 1;
847
+ }
848
+
849
+ .utrecht-button-group__link-button--row,
850
+ .utrecht-button-group--row .utrecht-link-button,
851
+ .utrecht-button-group:not(.utrecht-button-group--column) .utrecht-link-button {
852
+ --utrecht-button-padding-inline-end: 0;
853
+ --utrecht-button-padding-inline-start: 0;
854
+ }
855
+
856
+ .utrecht-button-group--column {
857
+ flex-direction: column;
858
+ gap: var(--utrecht-button-group-block-gap, 1em);
859
+ }
860
+
861
+ /**
862
+ * @license EUPL-1.2
863
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
864
+ * Copyright (c) 2021 Gemeente Utrecht
865
+ */
860
866
  /**
861
867
  * @license EUPL-1.2
862
868
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -873,13 +879,18 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
873
879
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
874
880
  * Copyright (c) 2021 Gemeente Utrecht
875
881
  */
882
+ /**
883
+ * @license EUPL-1.2
884
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
885
+ * Copyright (c) 2021 Gemeente Utrecht
886
+ */
876
887
  /**
877
888
  * @license EUPL-1.2
878
889
  * Copyright (c) 2021 Gemeente Utrecht
879
890
  * Copyright (c) 2021 Robbert Broersma
880
891
  */
881
892
  /* stylelint-disable-next-line block-no-empty */
882
- .utrecht-button {
893
+ .utrecht-button-link {
883
894
  /*
884
895
  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
885
896
  The hint color takes priority over the appearance color.
@@ -1111,9 +1122,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1111
1122
  text-transform: var(--utrecht-button-text-transform);
1112
1123
  -webkit-user-select: none;
1113
1124
  user-select: none;
1125
+ cursor: var(--utrecht-action-navigate-cursor, pointer);
1126
+ text-decoration: none;
1114
1127
  }
1115
1128
  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
1116
- .utrecht-button {
1129
+ .utrecht-button-link {
1117
1130
  --_utrecht-button-disabled-border-color: GrayText;
1118
1131
  --_utrecht-button-disabled-color: GrayText;
1119
1132
  /*
@@ -1129,61 +1142,28 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1129
1142
  }
1130
1143
  }
1131
1144
 
1132
- .utrecht-button--distanced {
1133
- margin-block-end: var(--utrecht-button-margin-block-end);
1134
- margin-block-start: var(--utrecht-button-margin-block-start);
1135
- margin-inline-end: var(--utrecht-button-margin-inline-end);
1136
- margin-inline-start: var(--utrecht-button-margin-inline-start);
1137
- }
1138
-
1139
- .utrecht-button--submit {
1140
- /* lower priority specificty than busy and disabled cursor */
1141
- cursor: var(--utrecht-action-submit-cursor, revert);
1142
- }
1143
-
1144
- .utrecht-button--busy {
1145
- cursor: var(--utrecht-action-busy-cursor, wait);
1146
- }
1147
-
1148
- .utrecht-button--pressed {
1149
- background-color: var(--_utrecht-button-pressed-background-color);
1150
- border-color: var(--_utrecht-button-pressed-border-color);
1151
- color: var(--_utrecht-button-pressed-color);
1152
- }
1153
-
1154
- .utrecht-button:disabled,
1155
- .utrecht-button--disabled {
1156
- background-color: var(--_utrecht-button-disabled-background-color);
1157
- border-color: var(--_utrecht-button-disabled-border-color);
1158
- color: var(--_utrecht-button-disabled-color);
1159
- cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1145
+ .utrecht-button-link--active {
1146
+ background-color: var(--_utrecht-button-active-background-color);
1147
+ border-color: var(--_utrecht-button-active-border-color);
1148
+ color: var(--_utrecht-button-active-color);
1160
1149
  }
1161
1150
 
1162
- .utrecht-button--focus-visible {
1163
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1164
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
1165
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1166
- * can combine it with the focus ring box shadow.
1167
- */
1168
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1169
- var(--utrecht-focus-inverse-outline-color, transparent);
1170
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
1171
- outline-color: var(--utrecht-focus-outline-color, revert);
1172
- outline-offset: var(--utrecht-focus-outline-offset, revert);
1173
- outline-style: var(--utrecht-focus-outline-style, revert);
1174
- outline-width: var(--utrecht-focus-outline-width, revert);
1151
+ .utrecht-button-link--hover {
1152
+ background-color: var(--_utrecht-button-hover-background-color);
1153
+ border-color: var(--_utrecht-button-hover-border-color);
1154
+ color: var(--_utrecht-button-hover-color);
1155
+ scale: var(--utrecht-button-hover-scale, 1);
1175
1156
  }
1176
1157
 
1177
- .utrecht-button--focus:not(.utrecht-button--disabled) {
1158
+ .utrecht-button-link--focus {
1178
1159
  background-color: var(--_utrecht-button-focus-background-color);
1179
1160
  border-color: var(--_utrecht-button-focus-border-color);
1180
1161
  color: var(--_utrecht-button-focus-color);
1181
1162
  scale: var(--utrecht-button-focus-scale, 1);
1182
1163
  }
1183
1164
 
1184
- .utrecht-button:focus {
1185
- /* Show focus ring even for disabled :focus-visible buttons. *
1186
- /* For example: <button disabled tabindex="0"> */
1165
+ .utrecht-button-link--focus-visible {
1166
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1187
1167
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1188
1168
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1189
1169
  * can combine it with the focus ring box shadow.
@@ -1197,11 +1177,20 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1197
1177
  outline-width: var(--utrecht-focus-outline-width, revert);
1198
1178
  }
1199
1179
 
1200
- .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
1180
+ .utrecht-button-link--placeholder {
1181
+ background-color: var(--_utrecht-button-disabled-background-color);
1182
+ border-color: var(--_utrecht-button-disabled-border-color);
1183
+ color: var(--_utrecht-button-disabled-color);
1184
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1185
+ }
1186
+
1187
+ .utrecht-button-link--html-a:focus {
1201
1188
  background-color: var(--_utrecht-button-focus-background-color);
1202
1189
  border-color: var(--_utrecht-button-focus-border-color);
1203
1190
  color: var(--_utrecht-button-focus-color);
1204
1191
  scale: var(--utrecht-button-focus-scale, 1);
1192
+ }
1193
+ .utrecht-button-link--html-a:focus-visible {
1205
1194
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1206
1195
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1207
1196
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
@@ -1215,31 +1204,19 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1215
1204
  outline-style: var(--utrecht-focus-outline-style, revert);
1216
1205
  outline-width: var(--utrecht-focus-outline-width, revert);
1217
1206
  }
1218
-
1219
- /* override the `:focus` selector above */
1220
- /* stylelint-disable-next-line no-descending-specificity */
1221
- .utrecht-button:focus:not(:focus-visible) {
1222
- /* undo focus ring */
1223
- box-shadow: none;
1224
- outline-style: revert;
1225
- }
1226
-
1227
- .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
1228
- .utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
1207
+ .utrecht-button-link--html-a:hover {
1229
1208
  background-color: var(--_utrecht-button-hover-background-color);
1230
1209
  border-color: var(--_utrecht-button-hover-border-color);
1231
1210
  color: var(--_utrecht-button-hover-color);
1232
1211
  scale: var(--utrecht-button-hover-scale, 1);
1233
1212
  }
1234
-
1235
- .utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
1236
- .utrecht-button--active {
1213
+ .utrecht-button-link--html-a:active {
1237
1214
  background-color: var(--_utrecht-button-active-background-color);
1238
1215
  border-color: var(--_utrecht-button-active-border-color);
1239
1216
  color: var(--_utrecht-button-active-color);
1240
1217
  }
1241
1218
 
1242
- .utrecht-button--primary-action {
1219
+ .utrecht-button-link--primary-action {
1243
1220
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
1244
1221
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
1245
1222
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
@@ -1264,7 +1241,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1264
1241
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
1265
1242
  }
1266
1243
 
1267
- .utrecht-button--secondary-action {
1244
+ .utrecht-button-link--secondary-action {
1268
1245
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
1269
1246
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
1270
1247
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
@@ -1289,7 +1266,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1289
1266
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
1290
1267
  }
1291
1268
 
1292
- .utrecht-button--subtle {
1269
+ .utrecht-button-link--subtle {
1293
1270
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
1294
1271
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
1295
1272
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
@@ -1314,473 +1291,686 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1314
1291
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
1315
1292
  }
1316
1293
 
1317
- .utrecht-button--primary-action.utrecht-button--danger {
1318
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
1319
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
1320
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
1321
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
1322
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
1323
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
1324
- --_utrecht-button-hint-disabled-background-color: var(
1325
- --utrecht-button-primary-action-danger-disabled-background-color
1294
+ /**
1295
+ * @license EUPL-1.2
1296
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1297
+ * Copyright (c) 2021 Gemeente Utrecht
1298
+ */
1299
+ /**
1300
+ * @license EUPL-1.2
1301
+ * Copyright (c) 2021 Gemeente Utrecht
1302
+ * Copyright (c) 2021 Robbert Broersma
1303
+ */
1304
+ /* stylelint-disable-next-line block-no-empty */
1305
+ /**
1306
+ * @license EUPL-1.2
1307
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1308
+ * Copyright (c) 2021 Gemeente Utrecht
1309
+ */
1310
+ /**
1311
+ * @license EUPL-1.2
1312
+ * Copyright (c) 2021 Gemeente Utrecht
1313
+ * Copyright (c) 2021 Robbert Broersma
1314
+ */
1315
+ /* stylelint-disable-next-line block-no-empty */
1316
+ .utrecht-button {
1317
+ /*
1318
+ `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
1319
+ The hint color takes priority over the appearance color.
1320
+
1321
+ `--_utrecht-button-appearance` is the internal prefix for the appearance
1322
+ (primary-action, secondary-action or subtle), it is not an API.
1323
+ */
1324
+ --_utrecht-button-background-color: var(
1325
+ --_utrecht-button-hint-background-color,
1326
+ var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
1326
1327
  );
1327
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
1328
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
1329
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
1330
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
1331
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
1332
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
1333
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
1334
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
1335
- --_utrecht-button-hint-pressed-background-color: var(
1336
- --utrecht-button-primary-action-danger-pressed-background-color
1328
+ --_utrecht-button-color: var(
1329
+ --_utrecht-button-hint-color,
1330
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
1337
1331
  );
1338
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
1339
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
1340
- }
1341
-
1342
- .utrecht-button--primary-action.utrecht-button--ready {
1343
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
1344
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
1345
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
1346
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
1347
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
1348
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
1349
- --_utrecht-button-hint-disabled-background-color: var(
1350
- --utrecht-button-primary-action-ready-disabled-background-color
1332
+ --_utrecht-button-border-color: var(
1333
+ --_utrecht-button-hint-border-color,
1334
+ var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
1351
1335
  );
1352
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
1353
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
1354
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
1355
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
1356
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
1357
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
1358
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
1359
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
1360
- --_utrecht-button-hint-pressed-background-color: var(
1361
- --utrecht-button-primary-action-ready-pressed-background-color
1336
+ --_utrecht-button-border-bottom-color: var(
1337
+ --_utrecht-button-hint-border-bottom-color,
1338
+ var(
1339
+ --_utrecht-button-hint-border-color,
1340
+ var(
1341
+ --_utrecht-button-appearance-border-bottom-color,
1342
+ var(
1343
+ --_utrecht-button-appearance-border-color,
1344
+ var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
1345
+ )
1346
+ )
1347
+ )
1362
1348
  );
1363
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
1364
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
1365
- }
1366
-
1367
- .utrecht-button--primary-action.utrecht-button--warning {
1368
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
1369
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
1370
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
1371
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
1372
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
1373
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
1374
- --_utrecht-button-hint-disabled-background-color: var(
1375
- --utrecht-button-primary-action-warning-disabled-background-color
1349
+ --_utrecht-button-disabled-background-color: var(
1350
+ --_utrecht-button-hint-disabled-background-color,
1351
+ var(
1352
+ --_utrecht-button-appearance-disabled-background-color,
1353
+ var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
1354
+ )
1376
1355
  );
1377
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
1378
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
1379
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
1380
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
1381
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
1382
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
1383
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
1384
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
1385
- --_utrecht-button-hint-pressed-background-color: var(
1386
- --utrecht-button-primary-action-warning-pressed-background-color
1356
+ --_utrecht-button-disabled-border-color: var(
1357
+ --_utrecht-button-hint-disabled-border-color,
1358
+ var(
1359
+ --_utrecht-button-appearance-disabled-border-color,
1360
+ var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
1361
+ )
1387
1362
  );
1388
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
1389
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
1390
- }
1391
-
1392
- .utrecht-button--secondary-action.utrecht-button--danger {
1393
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
1394
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
1395
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
1396
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
1397
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
1398
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
1399
- --_utrecht-button-hint-disabled-background-color: var(
1400
- --utrecht-button-secondary-action-danger-disabled-background-color
1363
+ --_utrecht-button-disabled-color: var(
1364
+ --_utrecht-button-hint-disabled-color,
1365
+ var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
1401
1366
  );
1402
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
1403
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
1404
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
1405
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
1406
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
1407
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
1408
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
1409
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
1410
- --_utrecht-button-hint-pressed-background-color: var(
1411
- --utrecht-button-secondary-action-danger-pressed-background-color
1367
+ --_utrecht-button-pressed-background-color: var(
1368
+ --_utrecht-button-hint-pressed-background-color,
1369
+ var(
1370
+ --_utrecht-button-hint-background-color,
1371
+ var(
1372
+ --_utrecht-button-appearance-pressed-background-color,
1373
+ var(
1374
+ --_utrecht-button-appearance-background-color,
1375
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
1376
+ )
1377
+ )
1378
+ )
1412
1379
  );
1413
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
1414
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
1415
- }
1416
-
1417
- .utrecht-button--secondary-action.utrecht-button--ready {
1418
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
1419
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
1420
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
1421
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
1422
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
1423
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
1424
- --_utrecht-button-hint-disabled-background-color: var(
1425
- --utrecht-button-secondary-action-ready-disabled-background-color
1380
+ --_utrecht-button-pressed-border-color: var(
1381
+ --_utrecht-button-hint-pressed-border-color,
1382
+ var(
1383
+ --_utrecht-button-hint-border-color,
1384
+ var(
1385
+ --_utrecht-button-appearance-pressed-border-color,
1386
+ var(
1387
+ --_utrecht-button-appearance-border-color,
1388
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
1389
+ )
1390
+ )
1391
+ )
1426
1392
  );
1427
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
1428
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
1429
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
1430
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
1431
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
1432
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
1433
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
1434
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
1435
- --_utrecht-button-hint-pressed-background-color: var(
1436
- --utrecht-button-secondary-action-ready-pressed-background-color
1393
+ --_utrecht-button-pressed-color: var(
1394
+ --_utrecht-button-hint-pressed-color,
1395
+ var(
1396
+ --_utrecht-button-hint-color,
1397
+ var(
1398
+ --_utrecht-button-appearance-pressed-color,
1399
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
1400
+ )
1401
+ )
1437
1402
  );
1438
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
1439
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
1440
- }
1441
-
1442
- .utrecht-button--secondary-action.utrecht-button--warning {
1443
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
1444
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
1445
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
1446
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
1447
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
1448
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
1449
- --_utrecht-button-hint-disabled-background-color: var(
1450
- --utrecht-button-secondary-action-warning-disabled-background-color
1403
+ --_utrecht-button-focus-background-color: var(
1404
+ --_utrecht-button-hint-focus-background-color,
1405
+ var(
1406
+ --_utrecht-button-hint-background-color,
1407
+ var(
1408
+ --_utrecht-button-appearance-focus-background-color,
1409
+ var(
1410
+ --_utrecht-button-appearance-background-color,
1411
+ var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
1412
+ )
1413
+ )
1414
+ )
1451
1415
  );
1452
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
1453
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
1454
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
1455
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
1456
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
1457
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
1458
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
1459
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
1460
- --_utrecht-button-hint-pressed-background-color: var(
1461
- --utrecht-button-secondary-action-warning-pressed-background-color
1416
+ --_utrecht-button-focus-border-color: var(
1417
+ --_utrecht-button-hint-focus-border-color,
1418
+ var(
1419
+ --_utrecht-button-hint-border-color,
1420
+ var(
1421
+ --_utrecht-button-appearance-focus-border-color,
1422
+ var(
1423
+ --_utrecht-button-appearance-border-color,
1424
+ var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
1425
+ )
1426
+ )
1427
+ )
1462
1428
  );
1463
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
1464
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
1465
- }
1466
-
1467
- .utrecht-button--subtle.utrecht-button--danger {
1468
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
1469
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
1470
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
1471
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
1472
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
1473
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
1474
- --_utrecht-button-hint-disabled-background-color: var(
1475
- --utrecht-button-subtle-danger-disabled-background-color
1429
+ --_utrecht-button-focus-color: var(
1430
+ --_utrecht-button-hint-focus-color,
1431
+ var(
1432
+ --_utrecht-button-hint-color,
1433
+ var(
1434
+ --_utrecht-button-appearance-focus-color,
1435
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
1436
+ )
1437
+ )
1476
1438
  );
1477
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
1478
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
1479
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
1480
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
1481
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
1482
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
1483
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
1484
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
1485
- --_utrecht-button-hint-pressed-background-color: var(
1486
- --utrecht-button-subtle-danger-pressed-background-color
1439
+ --_utrecht-button-hover-background-color: var(
1440
+ --_utrecht-button-hint-hover-background-color,
1441
+ var(
1442
+ --_utrecht-button-hint-background-color,
1443
+ var(
1444
+ --_utrecht-button-appearance-hover-background-color,
1445
+ var(
1446
+ --_utrecht-button-appearance-background-color,
1447
+ var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
1448
+ )
1449
+ )
1450
+ )
1487
1451
  );
1488
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
1489
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
1490
- }
1491
-
1492
- .utrecht-button--subtle.utrecht-button--ready {
1493
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
1494
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
1495
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
1496
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
1497
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
1498
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
1499
- --_utrecht-button-hint-disabled-background-color: var(
1500
- --utrecht-button-subtle-ready-disabled-background-color
1452
+ --_utrecht-button-hover-border-color: var(
1453
+ --_utrecht-button-hint-hover-border-color,
1454
+ var(
1455
+ --_utrecht-button-hint-border-color,
1456
+ var(
1457
+ --_utrecht-button-appearance-hover-border-color,
1458
+ var(
1459
+ --_utrecht-button-appearance-border-color,
1460
+ var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
1461
+ )
1462
+ )
1463
+ )
1501
1464
  );
1502
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
1503
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
1504
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
1505
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
1506
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
1507
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
1508
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
1509
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
1510
- --_utrecht-button-hint-pressed-background-color: var(
1511
- --utrecht-button-subtle-ready-pressed-background-color
1465
+ --_utrecht-button-hover-color: var(
1466
+ --_utrecht-button-hint-hover-color,
1467
+ var(
1468
+ --_utrecht-button-hint-color,
1469
+ var(
1470
+ --_utrecht-button-appearance-hover-color,
1471
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
1472
+ )
1473
+ )
1512
1474
  );
1513
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
1514
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
1515
- }
1516
-
1517
- .utrecht-button--subtle.utrecht-button--warning {
1518
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
1519
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
1520
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
1521
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
1522
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
1523
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
1524
- --_utrecht-button-hint-disabled-background-color: var(
1525
- --utrecht-button-subtle-warning-disabled-background-color
1475
+ --_utrecht-button-active-background-color: var(
1476
+ --_utrecht-button-hint-active-background-color,
1477
+ var(
1478
+ --_utrecht-button-hint-background-color,
1479
+ var(
1480
+ --_utrecht-button-appearance-active-background-color,
1481
+ var(
1482
+ --_utrecht-button-appearance-background-color,
1483
+ var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
1484
+ )
1485
+ )
1486
+ )
1526
1487
  );
1527
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
1528
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
1529
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
1530
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
1531
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
1532
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
1533
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
1534
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
1535
- --_utrecht-button-hint-pressed-background-color: var(
1536
- --utrecht-button-subtle-warning-pressed-background-color
1488
+ --_utrecht-button-active-border-color: var(
1489
+ --_utrecht-button-hint-active-border-color,
1490
+ var(
1491
+ --_utrecht-button-hint-border-color,
1492
+ var(
1493
+ --_utrecht-button-appearance-active-border-color,
1494
+ var(
1495
+ --_utrecht-button-appearance-border-color,
1496
+ var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
1497
+ )
1498
+ )
1499
+ )
1537
1500
  );
1538
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
1539
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
1501
+ --_utrecht-button-active-color: var(
1502
+ --_utrecht-button-hint-active-color,
1503
+ var(
1504
+ --_utrecht-button-hint-color,
1505
+ var(
1506
+ --_utrecht-button-appearance-active-color,
1507
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
1508
+ )
1509
+ )
1510
+ );
1511
+ --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
1512
+ --_utrecht-button-border-block-end-width: var(
1513
+ --utrecht-button-border-bottom-width,
1514
+ var(--_utrecht-button-border-width, 0)
1515
+ );
1516
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
1517
+ align-items: center;
1518
+ background-color: var(--_utrecht-button-background-color);
1519
+ block-size: fit-content;
1520
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
1521
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
1522
+ border-color: var(--_utrecht-button-border-color);
1523
+ border-radius: var(--utrecht-button-border-radius);
1524
+ border-style: solid;
1525
+ border-width: var(--_utrecht-button-border-width);
1526
+ box-sizing: border-box;
1527
+ color: var(--_utrecht-button-color);
1528
+ cursor: var(--utrecht-action-activate-cursor, revert);
1529
+ display: inline-flex;
1530
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1531
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1532
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1533
+ gap: var(--utrecht-button-icon-gap);
1534
+ inline-size: var(--utrecht-button-inline-size, auto);
1535
+ justify-content: center;
1536
+ line-height: var(--utrecht-button-line-height);
1537
+ max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
1538
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
1539
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
1540
+ padding-block-end: var(--utrecht-button-padding-block-end);
1541
+ padding-block-start: var(--utrecht-button-padding-block-start);
1542
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
1543
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
1544
+ scale: 1;
1545
+ text-transform: var(--utrecht-button-text-transform);
1546
+ -webkit-user-select: none;
1547
+ user-select: none;
1540
1548
  }
1541
-
1542
- /**
1543
- * @license EUPL-1.2
1544
- * Copyright (c) 2022 Frameless B.V.
1545
- */
1546
- /**
1547
- * @license EUPL-1.2
1548
- * Copyright (c) 2022 Frameless B.V.
1549
- */
1550
- .utrecht-button-group {
1551
- align-items: baseline;
1552
- background-color: var(--utrecht-button-group-background-color);
1553
- display: flex;
1554
- flex-wrap: wrap;
1555
- gap: var(--utrecht-button-group-inline-gap, 1em);
1556
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
1557
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
1558
- min-block-size: var(--utrecht-button-block-size);
1559
- padding-block-end: var(--utrecht-button-group-padding-block-end);
1560
- padding-block-start: var(--utrecht-button-group-padding-block-start);
1549
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
1550
+ .utrecht-button {
1551
+ --_utrecht-button-disabled-border-color: GrayText;
1552
+ --_utrecht-button-disabled-color: GrayText;
1553
+ /*
1554
+ * `<button>` has these styles by default, but other elements styles as button do not:
1555
+ *
1556
+ * - `<div role="button">` needs this.
1557
+ * - `<a role="button">` needs this.
1558
+ */
1559
+ background-color: ButtonFace;
1560
+ border-color: buttonborder;
1561
+ color: ButtonText;
1562
+ /* TODO: Find a way to express the `pressed` state */
1563
+ }
1561
1564
  }
1562
1565
 
1563
- .utrecht-button-group--distanced {
1564
- --utrecht-space-around: 1;
1566
+ .utrecht-button--distanced {
1567
+ margin-block-end: var(--utrecht-button-margin-block-end);
1568
+ margin-block-start: var(--utrecht-button-margin-block-start);
1569
+ margin-inline-end: var(--utrecht-button-margin-inline-end);
1570
+ margin-inline-start: var(--utrecht-button-margin-inline-start);
1565
1571
  }
1566
1572
 
1567
- .utrecht-button-group__link-button--row,
1568
- .utrecht-button-group--row .utrecht-link-button,
1569
- .utrecht-button-group:not(.utrecht-button-group--column) .utrecht-link-button {
1570
- --utrecht-button-padding-inline-end: 0;
1571
- --utrecht-button-padding-inline-start: 0;
1573
+ .utrecht-button--submit {
1574
+ /* lower priority specificty than busy and disabled cursor */
1575
+ cursor: var(--utrecht-action-submit-cursor, revert);
1572
1576
  }
1573
1577
 
1574
- .utrecht-button-group--column {
1575
- flex-direction: column;
1576
- gap: var(--utrecht-button-group-block-gap, 1em);
1578
+ .utrecht-button--busy {
1579
+ cursor: var(--utrecht-action-busy-cursor, wait);
1577
1580
  }
1578
1581
 
1579
- /**
1580
- * @license EUPL-1.2
1581
- * Copyright (c) 2021-2022 Gemeente Utrecht
1582
- * Copyright (c) 2021-2022 Frameless B.V.
1583
- */
1584
- .utrecht-calendar {
1585
- background-color: var(--utrecht-calendar-background-color);
1586
- inline-size: fit-content;
1582
+ .utrecht-button--pressed {
1583
+ background-color: var(--_utrecht-button-pressed-background-color);
1584
+ border-color: var(--_utrecht-button-pressed-border-color);
1585
+ color: var(--_utrecht-button-pressed-color);
1587
1586
  }
1588
1587
 
1589
- .utrecht-calendar__table {
1590
- margin-inline: auto;
1591
- padding-block-end: var(--utrecht-calendar-table-padding-block-end);
1592
- padding-block-start: var(--utrecht-calendar-table-padding-block-start);
1588
+ .utrecht-button:disabled,
1589
+ .utrecht-button--disabled {
1590
+ background-color: var(--_utrecht-button-disabled-background-color);
1591
+ border-color: var(--_utrecht-button-disabled-border-color);
1592
+ color: var(--_utrecht-button-disabled-color);
1593
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1593
1594
  }
1594
1595
 
1595
- .utrecht-calendar__table-weeks-item {
1596
- inline-size: var(--utrecht-calendar-table-weeks-item-width);
1597
- line-height: var(--utrecht-calendar-table-weeks-item-line-height, inherit);
1598
- padding-block-end: var(--utrecht-calendar-table-weeks-item-padding-block-end);
1599
- padding-block-start: var(--utrecht-calendar-table-weeks-item-padding-block-start);
1596
+ .utrecht-button--focus-visible {
1597
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1598
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1599
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1600
+ * can combine it with the focus ring box shadow.
1601
+ */
1602
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1603
+ var(--utrecht-focus-inverse-outline-color, transparent);
1604
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1605
+ outline-color: var(--utrecht-focus-outline-color, revert);
1606
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1607
+ outline-style: var(--utrecht-focus-outline-style, revert);
1608
+ outline-width: var(--utrecht-focus-outline-width, revert);
1600
1609
  }
1601
1610
 
1602
- .utrecht-calendar__table-days-item-day {
1603
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-border-color);
1604
- --utrecht-calendar-button-border-width: var(--utrecht-calendar-table-days-item-day-border-width);
1605
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-color);
1606
- block-size: var(--utrecht-calendar-table-days-item-day-size);
1607
- inline-size: var(--utrecht-calendar-table-days-item-day-size);
1611
+ .utrecht-button--focus:not(.utrecht-button--disabled) {
1612
+ background-color: var(--_utrecht-button-focus-background-color);
1613
+ border-color: var(--_utrecht-button-focus-border-color);
1614
+ color: var(--_utrecht-button-focus-color);
1615
+ scale: var(--utrecht-button-focus-scale, 1);
1608
1616
  }
1609
1617
 
1610
- .utrecht-calendar__table-days-item-day:hover {
1611
- --utrecht-calendar-button-hover-background-color: var(--utrecht-calendar-table-days-item-day-hover-background-color);
1612
- --utrecht-calendar-button-hover-border-color: var(--utrecht-calendar-table-days-item-day-hover-border-color);
1613
- --utrecht-calendar-button-hover-color: var(--utrecht-calendar-table-days-item-day-hover-color);
1618
+ .utrecht-button:focus {
1619
+ /* Show focus ring even for disabled :focus-visible buttons. *
1620
+ /* For example: <button disabled tabindex="0"> */
1621
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1622
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1623
+ * can combine it with the focus ring box shadow.
1624
+ */
1625
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1626
+ var(--utrecht-focus-inverse-outline-color, transparent);
1627
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1628
+ outline-color: var(--utrecht-focus-outline-color, revert);
1629
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1630
+ outline-style: var(--utrecht-focus-outline-style, revert);
1631
+ outline-width: var(--utrecht-focus-outline-width, revert);
1614
1632
  }
1615
1633
 
1616
- .utrecht-calendar__table-days-item-day:focus {
1617
- --utrecht-calendar-button-focus-background-color: var(--utrecht-calendar-table-days-item-day-focus-background-color);
1618
- --utrecht-calendar-button-focus-border-color: var(--utrecht-calendar-table-days-item-day-focus-border-color);
1619
- --utrecht-calendar-button-focus-color: var(--utrecht-calendar-table-days-item-day-focus-color);
1634
+ .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
1635
+ background-color: var(--_utrecht-button-focus-background-color);
1636
+ border-color: var(--_utrecht-button-focus-border-color);
1637
+ color: var(--_utrecht-button-focus-color);
1638
+ scale: var(--utrecht-button-focus-scale, 1);
1639
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1640
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1641
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1642
+ * can combine it with the focus ring box shadow.
1643
+ */
1644
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1645
+ var(--utrecht-focus-inverse-outline-color, transparent);
1646
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1647
+ outline-color: var(--utrecht-focus-outline-color, revert);
1648
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1649
+ outline-style: var(--utrecht-focus-outline-style, revert);
1650
+ outline-width: var(--utrecht-focus-outline-width, revert);
1620
1651
  }
1621
1652
 
1622
- .utrecht-calendar__table-days-item-day:active {
1623
- --utrecht-calendar-button-active-background-color: var(
1624
- --utrecht-calendar-table-days-item-day-active-background-color
1625
- );
1626
- --utrecht-calendar-button-active-border-color: var(--utrecht-calendar-table-days-item-day-active-border-color);
1627
- --utrecht-calendar-button-active-color: var(--utrecht-calendar-table-days-item-day-active-color);
1653
+ /* override the `:focus` selector above */
1654
+ /* stylelint-disable-next-line no-descending-specificity */
1655
+ .utrecht-button:focus:not(:focus-visible) {
1656
+ /* undo focus ring */
1657
+ box-shadow: none;
1658
+ outline-style: revert;
1628
1659
  }
1629
1660
 
1630
- .utrecht-calendar__table-days-item-day:disabled {
1631
- --utrecht-calendar-button-disabled-background-color: var(
1632
- --utrecht-calendar-table-days-item-day-disabled-background-color
1633
- );
1634
- --utrecht-calendar-button-disabled-border-color: var(--utrecht-calendar-table-days-item-day-disabled-border-color);
1635
- --utrecht-calendar-button-disabled-color: var(--utrecht-calendar-table-days-item-day-disabled-color);
1661
+ .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
1662
+ .utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
1663
+ background-color: var(--_utrecht-button-hover-background-color);
1664
+ border-color: var(--_utrecht-button-hover-border-color);
1665
+ color: var(--_utrecht-button-hover-color);
1666
+ scale: var(--utrecht-button-hover-scale, 1);
1636
1667
  }
1637
1668
 
1638
- .utrecht-calendar__table-days-item-day--out-of-the-month {
1639
- --utrecht-calendar-button-background-color: var(
1640
- --utrecht-calendar-table-days-item-day-out-of-the-month-background-color
1669
+ .utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
1670
+ .utrecht-button--active {
1671
+ background-color: var(--_utrecht-button-active-background-color);
1672
+ border-color: var(--_utrecht-button-active-border-color);
1673
+ color: var(--_utrecht-button-active-color);
1674
+ }
1675
+
1676
+ .utrecht-button--primary-action {
1677
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
1678
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
1679
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
1680
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
1681
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
1682
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
1683
+ --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
1684
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
1685
+ --_utrecht-button-appearance-disabled-background-color: var(
1686
+ --utrecht-button-primary-action-disabled-background-color
1641
1687
  );
1642
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-border-color);
1643
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-color);
1688
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
1689
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
1690
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
1691
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
1692
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
1693
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1694
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
1695
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
1696
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
1697
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
1698
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
1644
1699
  }
1645
1700
 
1646
- .utrecht-calendar__table-days-item-day--is-today {
1647
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-is-today-font-weight);
1648
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-is-today-background-color);
1649
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-is-today-border-color);
1650
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-is-today-color);
1701
+ .utrecht-button--secondary-action {
1702
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
1703
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
1704
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
1705
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
1706
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
1707
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
1708
+ --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
1709
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
1710
+ --_utrecht-button-appearance-disabled-background-color: var(
1711
+ --utrecht-button-secondary-action-disabled-background-color
1712
+ );
1713
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
1714
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
1715
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
1716
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
1717
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
1718
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
1719
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
1720
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
1721
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
1722
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
1723
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
1651
1724
  }
1652
1725
 
1653
- .utrecht-calendar__table-days-item-day--emphasis {
1654
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-emphasis-font-weight);
1655
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-emphasis-background-color);
1656
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-emphasis-border-color);
1657
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-emphasis-color);
1726
+ .utrecht-button--subtle {
1727
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
1728
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
1729
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
1730
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
1731
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
1732
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
1733
+ --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
1734
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
1735
+ --_utrecht-button-appearance-disabled-background-color: var(
1736
+ --utrecht-button-subtle-disabled-background-color
1737
+ );
1738
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
1739
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
1740
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
1741
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
1742
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
1743
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
1744
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
1745
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
1746
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
1747
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
1748
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
1658
1749
  }
1659
1750
 
1660
- .utrecht-calendar__table-days-item-day--selected {
1661
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-selected-font-weight);
1662
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-selected-background-color);
1663
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-selected-border-color);
1664
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-selected-color);
1751
+ .utrecht-button--primary-action.utrecht-button--danger {
1752
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
1753
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
1754
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
1755
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
1756
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
1757
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
1758
+ --_utrecht-button-hint-disabled-background-color: var(
1759
+ --utrecht-button-primary-action-danger-disabled-background-color
1760
+ );
1761
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
1762
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
1763
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
1764
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
1765
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
1766
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
1767
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
1768
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
1769
+ --_utrecht-button-hint-pressed-background-color: var(
1770
+ --utrecht-button-primary-action-danger-pressed-background-color
1771
+ );
1772
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
1773
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
1665
1774
  }
1666
1775
 
1667
- .utrecht-calendar__navigation {
1668
- background-color: var(--utrecht-calendar-navigation-background-color);
1669
- color: var(--utrecht-calendar-navigation-color);
1670
- padding-block-end: var(--utrecht-calendar-navigation-padding-block-end);
1671
- padding-block-start: var(--utrecht-calendar-navigation-padding-block-start);
1776
+ .utrecht-button--primary-action.utrecht-button--ready {
1777
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
1778
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
1779
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
1780
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
1781
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
1782
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
1783
+ --_utrecht-button-hint-disabled-background-color: var(
1784
+ --utrecht-button-primary-action-ready-disabled-background-color
1785
+ );
1786
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
1787
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
1788
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
1789
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
1790
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
1791
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
1792
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
1793
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
1794
+ --_utrecht-button-hint-pressed-background-color: var(
1795
+ --utrecht-button-primary-action-ready-pressed-background-color
1796
+ );
1797
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
1798
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
1672
1799
  }
1673
1800
 
1674
- .utrecht-calendar__navigation-label {
1675
- color: var(--utrecht-calendar-navigation-label-color);
1676
- font-size: var(--utrecht-calendar-navigation-label-font-size);
1677
- text-align: center;
1801
+ .utrecht-button--primary-action.utrecht-button--warning {
1802
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
1803
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
1804
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
1805
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
1806
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
1807
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
1808
+ --_utrecht-button-hint-disabled-background-color: var(
1809
+ --utrecht-button-primary-action-warning-disabled-background-color
1810
+ );
1811
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
1812
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
1813
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
1814
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
1815
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
1816
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
1817
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
1818
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
1819
+ --_utrecht-button-hint-pressed-background-color: var(
1820
+ --utrecht-button-primary-action-warning-pressed-background-color
1821
+ );
1822
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
1823
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
1678
1824
  }
1679
1825
 
1680
- .utrecht-calendar__navigation-buttons {
1681
- align-items: center;
1682
- display: flex;
1683
- flex-grow: 1;
1684
- justify-content: space-between;
1826
+ .utrecht-button--secondary-action.utrecht-button--danger {
1827
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
1828
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
1829
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
1830
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
1831
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
1832
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
1833
+ --_utrecht-button-hint-disabled-background-color: var(
1834
+ --utrecht-button-secondary-action-danger-disabled-background-color
1835
+ );
1836
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
1837
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
1838
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
1839
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
1840
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
1841
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
1842
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
1843
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
1844
+ --_utrecht-button-hint-pressed-background-color: var(
1845
+ --utrecht-button-secondary-action-danger-pressed-background-color
1846
+ );
1847
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
1848
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
1685
1849
  }
1686
1850
 
1687
- .utrecht-calendar__button {
1688
- --utrecht-button-subtle-color: var(--utrecht-calendar-button-color, currentColor);
1689
- --utrecht-button-subtle-background-color: var(--utrecht-calendar-button-background-color, transparent);
1690
- --utrecht-button-subtle-border-color: var(--utrecht-calendar-button-border-color, transparent);
1691
- --utrecht-button-subtle-border-width: var(--utrecht-calendar-button-border-width);
1692
- --utrecht-button-font-weight: var(--utrecht-calendar-button-font-weight);
1693
- --utrecht-button-subtle-focus-background-color: var(--utrecht-calendar-button-focus-background-color);
1694
- --utrecht-button-subtle-focus-border-color: var(--utrecht-calendar-button-focus-border-color);
1695
- --utrecht-button-subtle-focus-color: var(--utrecht-calendar-button-focus-color);
1696
- --utrecht-button-subtle-active-background-color: var(--utrecht-calendar-button-active-background-color);
1697
- --utrecht-button-subtle-active-border-color: var(--utrecht-calendar-button-active-border-color);
1698
- --utrecht-button-subtle-active-color: var(--utrecht-calendar-button-active-color);
1699
- --utrecht-button-subtle-hover-background-color: var(--utrecht-calendar-button-hover-background-color);
1700
- --utrecht-button-subtle-hover-border-color: var(--utrecht-calendar-button-hover-border-color, transparent);
1701
- --utrecht-button-subtle-hover-color: var(--utrecht-calendar-button-hover-color);
1702
- --utrecht-button-subtle-disabled-background-color: var(--utrecht-calendar-button-disabled-background-color);
1703
- --utrecht-button-subtle-disabled-border-color: var(--utrecht-calendar-button-disabled-border-color);
1704
- --utrecht-button-subtle-disabled-color: var(--utrecht-calendar-button-disabled-color);
1705
- --utrecht-button-padding-block-end: var(--utrecht-calendar-button-padding-block-end, 0);
1706
- --utrecht-button-padding-block-start: var(--utrecht-calendar-button-padding-block-start, 0);
1707
- --utrecht-button-padding-inline-end: var(--utrecht-calendar-button-padding-inline-end, 0);
1708
- --utrecht-button-padding-inline-start: var(--utrecht-calendar-button-padding-inline-start, 0);
1709
- cursor: pointer;
1851
+ .utrecht-button--secondary-action.utrecht-button--ready {
1852
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
1853
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
1854
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
1855
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
1856
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
1857
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
1858
+ --_utrecht-button-hint-disabled-background-color: var(
1859
+ --utrecht-button-secondary-action-ready-disabled-background-color
1860
+ );
1861
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
1862
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
1863
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
1864
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
1865
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
1866
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
1867
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
1868
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
1869
+ --_utrecht-button-hint-pressed-background-color: var(
1870
+ --utrecht-button-secondary-action-ready-pressed-background-color
1871
+ );
1872
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
1873
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
1710
1874
  }
1711
1875
 
1712
- .utrecht-calendar__icon {
1713
- block-size: var(--utrecht-calendar-icon-size);
1714
- inline-size: var(--utrecht-calendar-icon-size);
1876
+ .utrecht-button--secondary-action.utrecht-button--warning {
1877
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
1878
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
1879
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
1880
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
1881
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
1882
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
1883
+ --_utrecht-button-hint-disabled-background-color: var(
1884
+ --utrecht-button-secondary-action-warning-disabled-background-color
1885
+ );
1886
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
1887
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
1888
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
1889
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
1890
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
1891
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
1892
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
1893
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
1894
+ --_utrecht-button-hint-pressed-background-color: var(
1895
+ --utrecht-button-secondary-action-warning-pressed-background-color
1896
+ );
1897
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
1898
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
1715
1899
  }
1716
1900
 
1717
- /**
1718
- * @license EUPL-1.2
1719
- * Copyright (c) 2020-2022 Gemeente Utrecht
1720
- * Copyright (c) 2020-2022 Frameless B.V.
1721
- */
1722
- /**
1723
- * @license EUPL-1.2
1724
- * Copyright (c) 2020-2022 Gemeente Utrecht
1725
- * Copyright (c) 2020-2022 Frameless B.V.
1726
- */
1727
- .utrecht-code {
1728
- /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
1729
- background-color: var(--utrecht-code-background-color);
1730
- color: var(--utrecht-code-color);
1731
- font-family: var(--utrecht-code-font-family, monospace), monospace;
1732
- font-size: var(--utrecht-code-font-size);
1733
- font-variant-ligatures: none;
1734
- line-height: var(--utrecht-code-line-height);
1901
+ .utrecht-button--subtle.utrecht-button--danger {
1902
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
1903
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
1904
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
1905
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
1906
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
1907
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
1908
+ --_utrecht-button-hint-disabled-background-color: var(
1909
+ --utrecht-button-subtle-danger-disabled-background-color
1910
+ );
1911
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
1912
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
1913
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
1914
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
1915
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
1916
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
1917
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
1918
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
1919
+ --_utrecht-button-hint-pressed-background-color: var(
1920
+ --utrecht-button-subtle-danger-pressed-background-color
1921
+ );
1922
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
1923
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
1735
1924
  }
1736
1925
 
1737
- /**
1738
- * @license EUPL-1.2
1739
- * Copyright (c) 2020-2022 Gemeente Utrecht
1740
- * Copyright (c) 2020-2022 Frameless B.V.
1741
- */
1742
- /**
1743
- * @license EUPL-1.2
1744
- * Copyright (c) 2020-2022 Gemeente Utrecht
1745
- * Copyright (c) 2020-2022 Frameless B.V.
1746
- */
1747
- /**
1748
- * @license EUPL-1.2
1749
- * Copyright (c) 2020-2022 Gemeente Utrecht
1750
- * Copyright (c) 2020-2022 Frameless B.V.
1751
- */
1752
- .utrecht-code-block {
1753
- /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
1754
- background-color: var(--utrecht-code-background-color);
1755
- color: var(--utrecht-code-color);
1756
- font-family: var(--utrecht-code-font-family, monospace), monospace;
1757
- font-size: var(--utrecht-code-font-size);
1758
- font-variant-ligatures: none;
1759
- line-height: var(--utrecht-code-line-height);
1760
- --utrecht-code-color: var(--utrecht-code-block-color, inherit);
1761
- --utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
1762
- --utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
1763
- --utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
1764
- --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
1765
- background-color: var(--utrecht-code-block-background-color);
1766
- display: block;
1767
- font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));
1768
- line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
1769
- margin-block-end: var(--utrecht-code-block-margin-block-end);
1770
- margin-block-start: var(--utrecht-code-block-margin-block-start);
1771
- margin-inline-end: var(--utrecht-code-block-margin-inline-end);
1772
- margin-inline-start: var(--utrecht-code-block-margin-inline-start);
1773
- padding-block-end: var(--utrecht-code-block-padding-block-end);
1774
- padding-block-start: var(--utrecht-code-block-padding-block-start);
1775
- padding-inline-end: var(--utrecht-code-block-padding-inline-end);
1776
- padding-inline-start: var(--utrecht-code-block-padding-inline-start);
1777
- white-space: pre;
1926
+ .utrecht-button--subtle.utrecht-button--ready {
1927
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
1928
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
1929
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
1930
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
1931
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
1932
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
1933
+ --_utrecht-button-hint-disabled-background-color: var(
1934
+ --utrecht-button-subtle-ready-disabled-background-color
1935
+ );
1936
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
1937
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
1938
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
1939
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
1940
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
1941
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
1942
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
1943
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
1944
+ --_utrecht-button-hint-pressed-background-color: var(
1945
+ --utrecht-button-subtle-ready-pressed-background-color
1946
+ );
1947
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
1948
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
1778
1949
  }
1779
1950
 
1780
- .utrecht-code-block__content {
1781
- /* reset effect of <code> */
1782
- font-family: inherit;
1783
- font-size: inherit;
1951
+ .utrecht-button--subtle.utrecht-button--warning {
1952
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
1953
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
1954
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
1955
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
1956
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
1957
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
1958
+ --_utrecht-button-hint-disabled-background-color: var(
1959
+ --utrecht-button-subtle-warning-disabled-background-color
1960
+ );
1961
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
1962
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
1963
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
1964
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
1965
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
1966
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
1967
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
1968
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
1969
+ --_utrecht-button-hint-pressed-background-color: var(
1970
+ --utrecht-button-subtle-warning-pressed-background-color
1971
+ );
1972
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
1973
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
1784
1974
  }
1785
1975
 
1786
1976
  /**
@@ -1788,346 +1978,176 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1788
1978
  * Copyright (c) 2021-2022 Gemeente Utrecht
1789
1979
  * Copyright (c) 2021-2022 Frameless B.V.
1790
1980
  */
1791
- /**
1792
- * @license EUPL-1.2
1793
- * Copyright (c) 2021-2022 Gemeente Utrecht
1794
- * Copyright (c) 2021-2022 Frameless B.V.
1795
- */
1796
- .utrecht-color-sample {
1797
- background-color: var(--utrecht-color-sample-background-color, currentColor);
1798
- block-size: var(--utrecht-color-sample-block-size, 2em);
1799
- border-color: var(--utrecht-color-sample-border-color, var(--utrecht-color-sample-default-border-color));
1800
- border-radius: var(--utrecht-color-sample-border-radius, 0);
1801
- border-style: solid;
1802
- border-width: var(--utrecht-color-sample-border-width, 0);
1803
- box-sizing: border-box;
1804
- display: inline-block;
1805
- inline-size: var(--utrecht-color-sample-inline-size, 2em);
1806
- -webkit-print-color-adjust: exact;
1807
- print-color-adjust: exact;
1981
+ .utrecht-calendar {
1982
+ background-color: var(--utrecht-calendar-background-color);
1983
+ inline-size: fit-content;
1808
1984
  }
1809
- @media (forced-colors: active) {
1810
- .utrecht-color-sample {
1811
- forced-color-adjust: none;
1812
- }
1985
+
1986
+ .utrecht-calendar__table {
1987
+ margin-inline: auto;
1988
+ padding-block-end: var(--utrecht-calendar-table-padding-block-end);
1989
+ padding-block-start: var(--utrecht-calendar-table-padding-block-start);
1813
1990
  }
1814
- @media (forced-colors: active) and (prefers-color-scheme: dark) {
1815
- .utrecht-color-sample {
1816
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-dark-border-color, #000);
1817
- }
1991
+
1992
+ .utrecht-calendar__table-weeks-item {
1993
+ inline-size: var(--utrecht-calendar-table-weeks-item-width);
1994
+ line-height: var(--utrecht-calendar-table-weeks-item-line-height, inherit);
1995
+ padding-block-end: var(--utrecht-calendar-table-weeks-item-padding-block-end);
1996
+ padding-block-start: var(--utrecht-calendar-table-weeks-item-padding-block-start);
1818
1997
  }
1819
- @media (forced-colors: active) and (prefers-color-scheme: light) {
1820
- .utrecht-color-sample {
1821
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
1822
- }
1998
+
1999
+ .utrecht-calendar__table-days-item-day {
2000
+ --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-border-color);
2001
+ --utrecht-calendar-button-border-width: var(--utrecht-calendar-table-days-item-day-border-width);
2002
+ --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-color);
2003
+ block-size: var(--utrecht-calendar-table-days-item-day-size);
2004
+ inline-size: var(--utrecht-calendar-table-days-item-day-size);
1823
2005
  }
1824
2006
 
1825
- /**
1826
- * @license EUPL-1.2
1827
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1828
- * Copyright (c) 2021 Gemeente Utrecht
1829
- */
1830
- /**
1831
- * @license EUPL-1.2
1832
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1833
- * Copyright (c) 2021 Gemeente Utrecht
1834
- */
1835
- /**
1836
- * @license EUPL-1.2
1837
- * Copyright (c) 2021 Gemeente Utrecht
1838
- * Copyright (c) 2021 Robbert Broersma
1839
- */
1840
- /* stylelint-disable-next-line block-no-empty */
1841
- /**
1842
- * @license EUPL-1.2
1843
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1844
- * Copyright (c) 2021 Gemeente Utrecht
1845
- */
1846
- /**
1847
- * @license EUPL-1.2
1848
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1849
- * Copyright (c) 2021 Gemeente Utrecht
1850
- */
1851
- /**
1852
- * @license EUPL-1.2
1853
- * Copyright (c) 2021 Gemeente Utrecht
1854
- * Copyright (c) 2021 Robbert Broersma
1855
- */
1856
- /* stylelint-disable-next-line block-no-empty */
1857
- .utrecht-button-link {
1858
- /*
1859
- `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
1860
- The hint color takes priority over the appearance color.
2007
+ .utrecht-calendar__table-days-item-day:hover {
2008
+ --utrecht-calendar-button-hover-background-color: var(--utrecht-calendar-table-days-item-day-hover-background-color);
2009
+ --utrecht-calendar-button-hover-border-color: var(--utrecht-calendar-table-days-item-day-hover-border-color);
2010
+ --utrecht-calendar-button-hover-color: var(--utrecht-calendar-table-days-item-day-hover-color);
2011
+ }
1861
2012
 
1862
- `--_utrecht-button-appearance` is the internal prefix for the appearance
1863
- (primary-action, secondary-action or subtle), it is not an API.
1864
- */
1865
- --_utrecht-button-background-color: var(
1866
- --_utrecht-button-hint-background-color,
1867
- var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
1868
- );
1869
- --_utrecht-button-color: var(
1870
- --_utrecht-button-hint-color,
1871
- var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
1872
- );
1873
- --_utrecht-button-border-color: var(
1874
- --_utrecht-button-hint-border-color,
1875
- var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
1876
- );
1877
- --_utrecht-button-border-bottom-color: var(
1878
- --_utrecht-button-hint-border-bottom-color,
1879
- var(
1880
- --_utrecht-button-hint-border-color,
1881
- var(
1882
- --_utrecht-button-appearance-border-bottom-color,
1883
- var(
1884
- --_utrecht-button-appearance-border-color,
1885
- var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
1886
- )
1887
- )
1888
- )
1889
- );
1890
- --_utrecht-button-disabled-background-color: var(
1891
- --_utrecht-button-hint-disabled-background-color,
1892
- var(
1893
- --_utrecht-button-appearance-disabled-background-color,
1894
- var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
1895
- )
1896
- );
1897
- --_utrecht-button-disabled-border-color: var(
1898
- --_utrecht-button-hint-disabled-border-color,
1899
- var(
1900
- --_utrecht-button-appearance-disabled-border-color,
1901
- var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
1902
- )
1903
- );
1904
- --_utrecht-button-disabled-color: var(
1905
- --_utrecht-button-hint-disabled-color,
1906
- var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
1907
- );
1908
- --_utrecht-button-pressed-background-color: var(
1909
- --_utrecht-button-hint-pressed-background-color,
1910
- var(
1911
- --_utrecht-button-hint-background-color,
1912
- var(
1913
- --_utrecht-button-appearance-pressed-background-color,
1914
- var(
1915
- --_utrecht-button-appearance-background-color,
1916
- var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
1917
- )
1918
- )
1919
- )
1920
- );
1921
- --_utrecht-button-pressed-border-color: var(
1922
- --_utrecht-button-hint-pressed-border-color,
1923
- var(
1924
- --_utrecht-button-hint-border-color,
1925
- var(
1926
- --_utrecht-button-appearance-pressed-border-color,
1927
- var(
1928
- --_utrecht-button-appearance-border-color,
1929
- var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
1930
- )
1931
- )
1932
- )
1933
- );
1934
- --_utrecht-button-pressed-color: var(
1935
- --_utrecht-button-hint-pressed-color,
1936
- var(
1937
- --_utrecht-button-hint-color,
1938
- var(
1939
- --_utrecht-button-appearance-pressed-color,
1940
- var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
1941
- )
1942
- )
1943
- );
1944
- --_utrecht-button-focus-background-color: var(
1945
- --_utrecht-button-hint-focus-background-color,
1946
- var(
1947
- --_utrecht-button-hint-background-color,
1948
- var(
1949
- --_utrecht-button-appearance-focus-background-color,
1950
- var(
1951
- --_utrecht-button-appearance-background-color,
1952
- var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
1953
- )
1954
- )
1955
- )
1956
- );
1957
- --_utrecht-button-focus-border-color: var(
1958
- --_utrecht-button-hint-focus-border-color,
1959
- var(
1960
- --_utrecht-button-hint-border-color,
1961
- var(
1962
- --_utrecht-button-appearance-focus-border-color,
1963
- var(
1964
- --_utrecht-button-appearance-border-color,
1965
- var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
1966
- )
1967
- )
1968
- )
1969
- );
1970
- --_utrecht-button-focus-color: var(
1971
- --_utrecht-button-hint-focus-color,
1972
- var(
1973
- --_utrecht-button-hint-color,
1974
- var(
1975
- --_utrecht-button-appearance-focus-color,
1976
- var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
1977
- )
1978
- )
1979
- );
1980
- --_utrecht-button-hover-background-color: var(
1981
- --_utrecht-button-hint-hover-background-color,
1982
- var(
1983
- --_utrecht-button-hint-background-color,
1984
- var(
1985
- --_utrecht-button-appearance-hover-background-color,
1986
- var(
1987
- --_utrecht-button-appearance-background-color,
1988
- var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
1989
- )
1990
- )
1991
- )
1992
- );
1993
- --_utrecht-button-hover-border-color: var(
1994
- --_utrecht-button-hint-hover-border-color,
1995
- var(
1996
- --_utrecht-button-hint-border-color,
1997
- var(
1998
- --_utrecht-button-appearance-hover-border-color,
1999
- var(
2000
- --_utrecht-button-appearance-border-color,
2001
- var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
2002
- )
2003
- )
2004
- )
2005
- );
2006
- --_utrecht-button-hover-color: var(
2007
- --_utrecht-button-hint-hover-color,
2008
- var(
2009
- --_utrecht-button-hint-color,
2010
- var(
2011
- --_utrecht-button-appearance-hover-color,
2012
- var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
2013
- )
2014
- )
2015
- );
2016
- --_utrecht-button-active-background-color: var(
2017
- --_utrecht-button-hint-active-background-color,
2018
- var(
2019
- --_utrecht-button-hint-background-color,
2020
- var(
2021
- --_utrecht-button-appearance-active-background-color,
2022
- var(
2023
- --_utrecht-button-appearance-background-color,
2024
- var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
2025
- )
2026
- )
2027
- )
2028
- );
2029
- --_utrecht-button-active-border-color: var(
2030
- --_utrecht-button-hint-active-border-color,
2031
- var(
2032
- --_utrecht-button-hint-border-color,
2033
- var(
2034
- --_utrecht-button-appearance-active-border-color,
2035
- var(
2036
- --_utrecht-button-appearance-border-color,
2037
- var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
2038
- )
2039
- )
2040
- )
2013
+ .utrecht-calendar__table-days-item-day:focus {
2014
+ --utrecht-calendar-button-focus-background-color: var(--utrecht-calendar-table-days-item-day-focus-background-color);
2015
+ --utrecht-calendar-button-focus-border-color: var(--utrecht-calendar-table-days-item-day-focus-border-color);
2016
+ --utrecht-calendar-button-focus-color: var(--utrecht-calendar-table-days-item-day-focus-color);
2017
+ }
2018
+
2019
+ .utrecht-calendar__table-days-item-day:active {
2020
+ --utrecht-calendar-button-active-background-color: var(
2021
+ --utrecht-calendar-table-days-item-day-active-background-color
2041
2022
  );
2042
- --_utrecht-button-active-color: var(
2043
- --_utrecht-button-hint-active-color,
2044
- var(
2045
- --_utrecht-button-hint-color,
2046
- var(
2047
- --_utrecht-button-appearance-active-color,
2048
- var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
2049
- )
2050
- )
2023
+ --utrecht-calendar-button-active-border-color: var(--utrecht-calendar-table-days-item-day-active-border-color);
2024
+ --utrecht-calendar-button-active-color: var(--utrecht-calendar-table-days-item-day-active-color);
2025
+ }
2026
+
2027
+ .utrecht-calendar__table-days-item-day:disabled {
2028
+ --utrecht-calendar-button-disabled-background-color: var(
2029
+ --utrecht-calendar-table-days-item-day-disabled-background-color
2051
2030
  );
2052
- --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
2053
- --_utrecht-button-border-block-end-width: var(
2054
- --utrecht-button-border-bottom-width,
2055
- var(--_utrecht-button-border-width, 0)
2031
+ --utrecht-calendar-button-disabled-border-color: var(--utrecht-calendar-table-days-item-day-disabled-border-color);
2032
+ --utrecht-calendar-button-disabled-color: var(--utrecht-calendar-table-days-item-day-disabled-color);
2033
+ }
2034
+
2035
+ .utrecht-calendar__table-days-item-day--out-of-the-month {
2036
+ --utrecht-calendar-button-background-color: var(
2037
+ --utrecht-calendar-table-days-item-day-out-of-the-month-background-color
2056
2038
  );
2057
- --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2058
- align-items: center;
2059
- background-color: var(--_utrecht-button-background-color);
2060
- block-size: fit-content;
2061
- border-block-end-color: var(--_utrecht-button-border-bottom-color);
2062
- border-block-end-width: var(--_utrecht-button-border-block-end-width);
2063
- border-color: var(--_utrecht-button-border-color);
2064
- border-radius: var(--utrecht-button-border-radius);
2065
- border-style: solid;
2066
- border-width: var(--_utrecht-button-border-width);
2067
- box-sizing: border-box;
2068
- color: var(--_utrecht-button-color);
2069
- cursor: var(--utrecht-action-activate-cursor, revert);
2070
- display: inline-flex;
2071
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
2072
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
2073
- font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
2074
- gap: var(--utrecht-button-icon-gap);
2075
- inline-size: var(--utrecht-button-inline-size, auto);
2076
- justify-content: center;
2077
- line-height: var(--utrecht-button-line-height);
2078
- max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
2079
- min-block-size: var(--utrecht-button-min-block-size, 44px);
2080
- min-inline-size: var(--utrecht-button-min-inline-size, 44px);
2081
- padding-block-end: var(--utrecht-button-padding-block-end);
2082
- padding-block-start: var(--utrecht-button-padding-block-start);
2083
- padding-inline-end: var(--utrecht-button-padding-inline-end);
2084
- padding-inline-start: var(--utrecht-button-padding-inline-start);
2085
- scale: 1;
2086
- text-transform: var(--utrecht-button-text-transform);
2087
- -webkit-user-select: none;
2088
- user-select: none;
2089
- cursor: var(--utrecht-action-navigate-cursor, pointer);
2090
- text-decoration: none;
2039
+ --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-border-color);
2040
+ --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-color);
2041
+ }
2042
+
2043
+ .utrecht-calendar__table-days-item-day--is-today {
2044
+ --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-is-today-font-weight);
2045
+ --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-is-today-background-color);
2046
+ --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-is-today-border-color);
2047
+ --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-is-today-color);
2048
+ }
2049
+
2050
+ .utrecht-calendar__table-days-item-day--emphasis {
2051
+ --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-emphasis-font-weight);
2052
+ --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-emphasis-background-color);
2053
+ --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-emphasis-border-color);
2054
+ --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-emphasis-color);
2055
+ }
2056
+
2057
+ .utrecht-calendar__table-days-item-day--selected {
2058
+ --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-selected-font-weight);
2059
+ --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-selected-background-color);
2060
+ --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-selected-border-color);
2061
+ --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-selected-color);
2062
+ }
2063
+
2064
+ .utrecht-calendar__navigation {
2065
+ background-color: var(--utrecht-calendar-navigation-background-color);
2066
+ color: var(--utrecht-calendar-navigation-color);
2067
+ padding-block-end: var(--utrecht-calendar-navigation-padding-block-end);
2068
+ padding-block-start: var(--utrecht-calendar-navigation-padding-block-start);
2069
+ }
2070
+
2071
+ .utrecht-calendar__navigation-label {
2072
+ color: var(--utrecht-calendar-navigation-label-color);
2073
+ font-size: var(--utrecht-calendar-navigation-label-font-size);
2074
+ text-align: center;
2091
2075
  }
2092
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
2093
- .utrecht-button-link {
2094
- --_utrecht-button-disabled-border-color: GrayText;
2095
- --_utrecht-button-disabled-color: GrayText;
2096
- /*
2097
- * `<button>` has these styles by default, but other elements styles as button do not:
2098
- *
2099
- * - `<div role="button">` needs this.
2100
- * - `<a role="button">` needs this.
2101
- */
2102
- background-color: ButtonFace;
2103
- border-color: buttonborder;
2104
- color: ButtonText;
2105
- /* TODO: Find a way to express the `pressed` state */
2106
- }
2076
+
2077
+ .utrecht-calendar__navigation-buttons {
2078
+ align-items: center;
2079
+ display: flex;
2080
+ flex-grow: 1;
2081
+ justify-content: space-between;
2107
2082
  }
2108
2083
 
2109
- .utrecht-button-link--active {
2110
- background-color: var(--_utrecht-button-active-background-color);
2111
- border-color: var(--_utrecht-button-active-border-color);
2112
- color: var(--_utrecht-button-active-color);
2084
+ .utrecht-calendar__button {
2085
+ --utrecht-button-subtle-color: var(--utrecht-calendar-button-color, currentColor);
2086
+ --utrecht-button-subtle-background-color: var(--utrecht-calendar-button-background-color, transparent);
2087
+ --utrecht-button-subtle-border-color: var(--utrecht-calendar-button-border-color, transparent);
2088
+ --utrecht-button-subtle-border-width: var(--utrecht-calendar-button-border-width);
2089
+ --utrecht-button-font-weight: var(--utrecht-calendar-button-font-weight);
2090
+ --utrecht-button-subtle-focus-background-color: var(--utrecht-calendar-button-focus-background-color);
2091
+ --utrecht-button-subtle-focus-border-color: var(--utrecht-calendar-button-focus-border-color);
2092
+ --utrecht-button-subtle-focus-color: var(--utrecht-calendar-button-focus-color);
2093
+ --utrecht-button-subtle-active-background-color: var(--utrecht-calendar-button-active-background-color);
2094
+ --utrecht-button-subtle-active-border-color: var(--utrecht-calendar-button-active-border-color);
2095
+ --utrecht-button-subtle-active-color: var(--utrecht-calendar-button-active-color);
2096
+ --utrecht-button-subtle-hover-background-color: var(--utrecht-calendar-button-hover-background-color);
2097
+ --utrecht-button-subtle-hover-border-color: var(--utrecht-calendar-button-hover-border-color, transparent);
2098
+ --utrecht-button-subtle-hover-color: var(--utrecht-calendar-button-hover-color);
2099
+ --utrecht-button-subtle-disabled-background-color: var(--utrecht-calendar-button-disabled-background-color);
2100
+ --utrecht-button-subtle-disabled-border-color: var(--utrecht-calendar-button-disabled-border-color);
2101
+ --utrecht-button-subtle-disabled-color: var(--utrecht-calendar-button-disabled-color);
2102
+ --utrecht-button-padding-block-end: var(--utrecht-calendar-button-padding-block-end, 0);
2103
+ --utrecht-button-padding-block-start: var(--utrecht-calendar-button-padding-block-start, 0);
2104
+ --utrecht-button-padding-inline-end: var(--utrecht-calendar-button-padding-inline-end, 0);
2105
+ --utrecht-button-padding-inline-start: var(--utrecht-calendar-button-padding-inline-start, 0);
2106
+ cursor: pointer;
2113
2107
  }
2114
2108
 
2115
- .utrecht-button-link--hover {
2116
- background-color: var(--_utrecht-button-hover-background-color);
2117
- border-color: var(--_utrecht-button-hover-border-color);
2118
- color: var(--_utrecht-button-hover-color);
2119
- scale: var(--utrecht-button-hover-scale, 1);
2109
+ .utrecht-calendar__icon {
2110
+ block-size: var(--utrecht-calendar-icon-size);
2111
+ inline-size: var(--utrecht-calendar-icon-size);
2120
2112
  }
2121
2113
 
2122
- .utrecht-button-link--focus {
2123
- background-color: var(--_utrecht-button-focus-background-color);
2124
- border-color: var(--_utrecht-button-focus-border-color);
2125
- color: var(--_utrecht-button-focus-color);
2126
- scale: var(--utrecht-button-focus-scale, 1);
2114
+ /**
2115
+ * @license EUPL-1.2
2116
+ * Copyright (c) 2021 Robbert Broersma
2117
+ */
2118
+ /**
2119
+ * @license EUPL-1.2
2120
+ * Copyright (c) 2021 Gemeente Utrecht
2121
+ * Copyright (c) 2021 Robbert Broersma
2122
+ */
2123
+ /* stylelint-disable-next-line block-no-empty */
2124
+ /**
2125
+ * @license EUPL-1.2
2126
+ * Copyright (c) 2021 Robbert Broersma
2127
+ */
2128
+ /**
2129
+ * @license EUPL-1.2
2130
+ * Copyright (c) 2021 Gemeente Utrecht
2131
+ * Copyright (c) 2021 Robbert Broersma
2132
+ */
2133
+ /* stylelint-disable-next-line block-no-empty */
2134
+ /* stylelint-disable-next-line block-no-empty */
2135
+ .utrecht-checkbox {
2136
+ margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
2137
+ margin-block-start: 0;
2138
+ margin-inline-end: 0;
2139
+ margin-inline-start: 0;
2140
+ cursor: var(--utrecht-action-activate-cursor, revert);
2141
+ -webkit-user-select: none;
2142
+ user-select: none;
2127
2143
  }
2128
2144
 
2129
- .utrecht-button-link--focus-visible {
2130
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
2145
+ /* stylelint-disable-next-line block-no-empty */
2146
+ .utrecht-checkbox--disabled {
2147
+ cursor: var(--utrecht-action-disabled-cursor, revert);
2148
+ }
2149
+
2150
+ .utrecht-checkbox--focus-visible {
2131
2151
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
2132
2152
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2133
2153
  * can combine it with the focus ring box shadow.
@@ -2141,21 +2161,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2141
2161
  outline-width: var(--utrecht-focus-outline-width, revert);
2142
2162
  }
2143
2163
 
2144
- .utrecht-button-link--placeholder {
2145
- background-color: var(--_utrecht-button-disabled-background-color);
2146
- border-color: var(--_utrecht-button-disabled-border-color);
2147
- color: var(--_utrecht-button-disabled-color);
2148
- cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2149
- }
2150
-
2151
- .utrecht-button-link--html-a:focus {
2152
- background-color: var(--_utrecht-button-focus-background-color);
2153
- border-color: var(--_utrecht-button-focus-border-color);
2154
- color: var(--_utrecht-button-focus-color);
2155
- scale: var(--utrecht-button-focus-scale, 1);
2164
+ .utrecht-checkbox--html-input:disabled {
2165
+ cursor: var(--utrecht-action-disabled-cursor, revert);
2156
2166
  }
2157
- .utrecht-button-link--html-a:focus-visible {
2158
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
2167
+ .utrecht-checkbox--html-input:focus {
2159
2168
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
2160
2169
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2161
2170
  * can combine it with the focus ring box shadow.
@@ -2168,163 +2177,120 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2168
2177
  outline-style: var(--utrecht-focus-outline-style, revert);
2169
2178
  outline-width: var(--utrecht-focus-outline-width, revert);
2170
2179
  }
2171
- .utrecht-button-link--html-a:hover {
2172
- background-color: var(--_utrecht-button-hover-background-color);
2173
- border-color: var(--_utrecht-button-hover-border-color);
2174
- color: var(--_utrecht-button-hover-color);
2175
- scale: var(--utrecht-button-hover-scale, 1);
2176
- }
2177
- .utrecht-button-link--html-a:active {
2178
- background-color: var(--_utrecht-button-active-background-color);
2179
- border-color: var(--_utrecht-button-active-border-color);
2180
- color: var(--_utrecht-button-active-color);
2181
- }
2182
-
2183
- .utrecht-button-link--primary-action {
2184
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
2185
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
2186
- --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
2187
- --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
2188
- --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
2189
- --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
2190
- --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
2191
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
2192
- --_utrecht-button-appearance-disabled-background-color: var(
2193
- --utrecht-button-primary-action-disabled-background-color
2194
- );
2195
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
2196
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
2197
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
2198
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
2199
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
2200
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
2201
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
2202
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
2203
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
2204
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
2205
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
2180
+ .utrecht-checkbox--html-input:focus:not(:focus-visible) {
2181
+ /* undo focus ring */
2182
+ box-shadow: none;
2183
+ outline-style: revert;
2206
2184
  }
2207
2185
 
2208
- .utrecht-button-link--secondary-action {
2209
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
2210
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
2211
- --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
2212
- --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
2213
- --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
2214
- --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
2215
- --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
2216
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
2217
- --_utrecht-button-appearance-disabled-background-color: var(
2218
- --utrecht-button-secondary-action-disabled-background-color
2219
- );
2220
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
2221
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
2222
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
2223
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
2224
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
2225
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
2226
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
2227
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
2228
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
2229
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
2230
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
2186
+ /**
2187
+ * @license EUPL-1.2
2188
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2189
+ * Copyright (c) 2020-2022 Frameless B.V.
2190
+ */
2191
+ /**
2192
+ * @license EUPL-1.2
2193
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2194
+ * Copyright (c) 2020-2022 Frameless B.V.
2195
+ */
2196
+ /**
2197
+ * @license EUPL-1.2
2198
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2199
+ * Copyright (c) 2020-2022 Frameless B.V.
2200
+ */
2201
+ .utrecht-code-block {
2202
+ /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
2203
+ /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
2204
+ background-color: var(--utrecht-code-background-color);
2205
+ color: var(--utrecht-code-color);
2206
+ font-family: var(--utrecht-code-font-family, monospace), monospace;
2207
+ font-size: var(--utrecht-code-font-size, inherit);
2208
+ font-variant-ligatures: none;
2209
+ line-height: var(--utrecht-code-line-height);
2210
+ --utrecht-code-color: var(--utrecht-code-block-color, inherit);
2211
+ --utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
2212
+ --utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
2213
+ --utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
2214
+ --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
2215
+ background-color: var(--utrecht-code-block-background-color);
2216
+ display: block;
2217
+ font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size, inherit));
2218
+ line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
2219
+ margin-block-end: var(--utrecht-code-block-margin-block-end);
2220
+ margin-block-start: var(--utrecht-code-block-margin-block-start);
2221
+ margin-inline-end: var(--utrecht-code-block-margin-inline-end);
2222
+ margin-inline-start: var(--utrecht-code-block-margin-inline-start);
2223
+ padding-block-end: var(--utrecht-code-block-padding-block-end);
2224
+ padding-block-start: var(--utrecht-code-block-padding-block-start);
2225
+ padding-inline-end: var(--utrecht-code-block-padding-inline-end);
2226
+ padding-inline-start: var(--utrecht-code-block-padding-inline-start);
2227
+ white-space: pre;
2231
2228
  }
2232
2229
 
2233
- .utrecht-button-link--subtle {
2234
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
2235
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
2236
- --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
2237
- --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
2238
- --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
2239
- --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
2240
- --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
2241
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
2242
- --_utrecht-button-appearance-disabled-background-color: var(
2243
- --utrecht-button-subtle-disabled-background-color
2244
- );
2245
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
2246
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
2247
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
2248
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
2249
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
2250
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
2251
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
2252
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
2253
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
2254
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
2255
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
2230
+ .utrecht-code-block__content {
2231
+ /* reset effect of <code> */
2232
+ font-family: inherit;
2233
+ font-size: inherit;
2256
2234
  }
2257
2235
 
2258
2236
  /**
2259
2237
  * @license EUPL-1.2
2260
- * Copyright (c) 2021 Robbert Broersma
2238
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2239
+ * Copyright (c) 2020-2022 Frameless B.V.
2261
2240
  */
2262
2241
  /**
2263
2242
  * @license EUPL-1.2
2264
- * Copyright (c) 2021 Gemeente Utrecht
2265
- * Copyright (c) 2021 Robbert Broersma
2243
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2244
+ * Copyright (c) 2020-2022 Frameless B.V.
2266
2245
  */
2267
- /* stylelint-disable-next-line block-no-empty */
2246
+ .utrecht-code {
2247
+ /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
2248
+ /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
2249
+ background-color: var(--utrecht-code-background-color);
2250
+ color: var(--utrecht-code-color);
2251
+ font-family: var(--utrecht-code-font-family, monospace), monospace;
2252
+ font-size: var(--utrecht-code-font-size, inherit);
2253
+ font-variant-ligatures: none;
2254
+ line-height: var(--utrecht-code-line-height);
2255
+ }
2256
+
2268
2257
  /**
2269
2258
  * @license EUPL-1.2
2270
- * Copyright (c) 2021 Robbert Broersma
2259
+ * Copyright (c) 2021-2022 Gemeente Utrecht
2260
+ * Copyright (c) 2021-2022 Frameless B.V.
2271
2261
  */
2272
2262
  /**
2273
2263
  * @license EUPL-1.2
2274
- * Copyright (c) 2021 Gemeente Utrecht
2275
- * Copyright (c) 2021 Robbert Broersma
2264
+ * Copyright (c) 2021-2022 Gemeente Utrecht
2265
+ * Copyright (c) 2021-2022 Frameless B.V.
2276
2266
  */
2277
- /* stylelint-disable-next-line block-no-empty */
2278
- /* stylelint-disable-next-line block-no-empty */
2279
- .utrecht-checkbox {
2280
- margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
2281
- margin-block-start: 0;
2282
- margin-inline-end: 0;
2283
- margin-inline-start: 0;
2284
- cursor: var(--utrecht-action-activate-cursor, revert);
2285
- -webkit-user-select: none;
2286
- user-select: none;
2287
- }
2288
-
2289
- /* stylelint-disable-next-line block-no-empty */
2290
- .utrecht-checkbox--disabled {
2291
- cursor: var(--utrecht-action-disabled-cursor, revert);
2292
- }
2293
-
2294
- .utrecht-checkbox--focus-visible {
2295
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2296
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2297
- * can combine it with the focus ring box shadow.
2298
- */
2299
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2300
- var(--utrecht-focus-inverse-outline-color, transparent);
2301
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2302
- outline-color: var(--utrecht-focus-outline-color, revert);
2303
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2304
- outline-style: var(--utrecht-focus-outline-style, revert);
2305
- outline-width: var(--utrecht-focus-outline-width, revert);
2267
+ .utrecht-color-sample {
2268
+ background-color: var(--utrecht-color-sample-background-color, currentColor);
2269
+ block-size: var(--utrecht-color-sample-block-size, 2em);
2270
+ border-color: var(--utrecht-color-sample-border-color, var(--utrecht-color-sample-default-border-color));
2271
+ border-radius: var(--utrecht-color-sample-border-radius, 0);
2272
+ border-style: solid;
2273
+ border-width: var(--utrecht-color-sample-border-width, 0);
2274
+ box-sizing: border-box;
2275
+ display: inline-block;
2276
+ inline-size: var(--utrecht-color-sample-inline-size, 2em);
2277
+ -webkit-print-color-adjust: exact;
2278
+ print-color-adjust: exact;
2306
2279
  }
2307
-
2308
- .utrecht-checkbox--html-input:disabled {
2309
- cursor: var(--utrecht-action-disabled-cursor, revert);
2280
+ @media (forced-colors: active) {
2281
+ .utrecht-color-sample {
2282
+ forced-color-adjust: none;
2283
+ }
2310
2284
  }
2311
- .utrecht-checkbox--html-input:focus {
2312
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2313
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2314
- * can combine it with the focus ring box shadow.
2315
- */
2316
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2317
- var(--utrecht-focus-inverse-outline-color, transparent);
2318
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2319
- outline-color: var(--utrecht-focus-outline-color, revert);
2320
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2321
- outline-style: var(--utrecht-focus-outline-style, revert);
2322
- outline-width: var(--utrecht-focus-outline-width, revert);
2285
+ @media (forced-colors: active) and (prefers-color-scheme: dark) {
2286
+ .utrecht-color-sample {
2287
+ --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-dark-border-color, #000);
2288
+ }
2323
2289
  }
2324
- .utrecht-checkbox--html-input:focus:not(:focus-visible) {
2325
- /* undo focus ring */
2326
- box-shadow: none;
2327
- outline-style: revert;
2290
+ @media (forced-colors: active) and (prefers-color-scheme: light) {
2291
+ .utrecht-color-sample {
2292
+ --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
2293
+ }
2328
2294
  }
2329
2295
 
2330
2296
  /**
@@ -2349,6 +2315,62 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2349
2315
  column-rule-width: var(--utrecht-column-layout-column-rule-width, 0);
2350
2316
  }
2351
2317
 
2318
+ /**
2319
+ * @license EUPL-1.2
2320
+ * Copyright (c) 2023 Frameless B.V.
2321
+ */
2322
+ /**
2323
+ * @license EUPL-1.2
2324
+ * Copyright (c) 2023 Frameless B.V.
2325
+ */
2326
+ /**
2327
+ * Reset `padding` and `border` default styling from [popover] attribute.
2328
+ */
2329
+ .utrecht-combobox {
2330
+ inline-size: 100%;
2331
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
2332
+ position: relative;
2333
+ }
2334
+
2335
+ .utrecht-combobox__popover {
2336
+ border-width: 0;
2337
+ padding-block-end: 0;
2338
+ padding-block-start: 0;
2339
+ padding-inline-end: 0;
2340
+ padding-inline-start: 0;
2341
+ background-color: canvas;
2342
+ block-size: fit-content;
2343
+ color: canvastext;
2344
+ inline-size: fit-content;
2345
+ inset: 0;
2346
+ overflow: auto;
2347
+ position: absolute;
2348
+ z-index: var(--utrecht-combobox-popover-z-index);
2349
+ }
2350
+
2351
+ .utrecht-combobox__popover--block-end {
2352
+ inset-block-start: 100%;
2353
+ }
2354
+
2355
+ .utrecht-combobox__popover--hidden {
2356
+ display: none !important;
2357
+ }
2358
+
2359
+ /**
2360
+ * @license EUPL-1.2
2361
+ * Copyright (c) 2021 Robbert Broersma
2362
+ */
2363
+ /**
2364
+ * @license EUPL-1.2
2365
+ * Copyright (c) 2021 Robbert Broersma
2366
+ */
2367
+ .utrecht-currency-data {
2368
+ /* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
2369
+ /* tabular-nums: vertically align amounts */
2370
+ font-variant-numeric: lining-nums tabular-nums;
2371
+ white-space: nowrap;
2372
+ }
2373
+
2352
2374
  /**
2353
2375
  * @license EUPL-1.2
2354
2376
  * Copyright (c) 2021 Robbert Broersma
@@ -2625,6 +2647,64 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2625
2647
  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
2626
2648
  }
2627
2649
 
2650
+ /**
2651
+ * @license EUPL-1.2
2652
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
2653
+ * Copyright (c) 2021 Gemeente Utrecht
2654
+ */
2655
+ /**
2656
+ * @license EUPL-1.2
2657
+ * Copyright (c) 2021 Gemeente Utrecht
2658
+ * Copyright (c) 2021 Robbert Broersma
2659
+ */
2660
+ .utrecht-data-placeholder {
2661
+ background-color: var(--utrecht-data-placeholder-background-color, currentColor);
2662
+ block-size: 1em;
2663
+ display: inline-block;
2664
+ inline-size: min(100%, var(--utrecht-data-placeholder-max-inline-size));
2665
+ max-inline-size: var(--utrecht-data-placeholder-max-inline-size);
2666
+ min-inline-size: var(--utrecht-data-placeholder-min-inline-size, 10ch);
2667
+ vertical-align: -0.1em;
2668
+ }
2669
+ @media print {
2670
+ .utrecht-data-placeholder {
2671
+ outline-color: currentColor;
2672
+ outline-style: dashed;
2673
+ outline-width: 0.1em;
2674
+ }
2675
+ }
2676
+ @media screen and (prefers-contrast: more) {
2677
+ .utrecht-data-placeholder {
2678
+ background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
2679
+ }
2680
+ }
2681
+ @media screen and (forced-colors: active) {
2682
+ .utrecht-data-placeholder {
2683
+ background-color: GrayText;
2684
+ }
2685
+ }
2686
+
2687
+ .utrecht-data-placeholder--loading {
2688
+ cursor: var(--utrecht-action-busy-cursor, busy);
2689
+ }
2690
+
2691
+ /* class name available only for Storybook */
2692
+ .utrecht-data-placeholder--print {
2693
+ outline-color: currentColor;
2694
+ outline-style: dashed;
2695
+ outline-width: 0.1em;
2696
+ }
2697
+
2698
+ /* class name available only for Storybook */
2699
+ .utrecht-data-placeholder--forced-colors {
2700
+ background-color: GrayText;
2701
+ }
2702
+
2703
+ /* class name available only for Storybook */
2704
+ .utrecht-data-placeholder--high-contrast {
2705
+ cursor: var(--utrecht-action-busy-cursor, busy);
2706
+ }
2707
+
2628
2708
  /**
2629
2709
  * @license EUPL-1.2
2630
2710
  * Copyright (c) 2021 Robbert Broersma
@@ -2821,21 +2901,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2821
2901
  line-height: var(--utrecht-figure-caption-line-height);
2822
2902
  }
2823
2903
 
2824
- /**
2825
- * @license EUPL-1.2
2826
- * Copyright (c) 2020-2022 Gemeente Utrecht
2827
- * Copyright (c) 2020-2022 Frameless B.V.
2828
- */
2829
- /**
2830
- * @license EUPL-1.2
2831
- * Copyright (c) 2020-2022 Gemeente Utrecht
2832
- * Copyright (c) 2020-2022 Frameless B.V.
2833
- */
2834
- .utrecht-form {
2835
- display: block;
2836
- max-inline-size: var(--utrecht-form-max-inline-size);
2837
- }
2838
-
2839
2904
  /**
2840
2905
  * @license EUPL-1.2
2841
2906
  * Copyright (c) 2021 Robbert Broersma
@@ -3111,8 +3176,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3111
3176
  }
3112
3177
 
3113
3178
  .utrecht-form-label--disabled {
3179
+ color: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
3114
3180
  cursor: var(--utrecht-action-disabled-cursor, revert);
3115
- font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
3116
3181
  }
3117
3182
 
3118
3183
  .utrecht-form-label--radio {
@@ -3229,6 +3294,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3229
3294
  inline-size: 100%;
3230
3295
  }
3231
3296
 
3297
+ .utrecht-form-toggle__track--html-label {
3298
+ cursor: inherit;
3299
+ }
3300
+
3232
3301
  .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
3233
3302
  background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
3234
3303
  }
@@ -3281,6 +3350,21 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3281
3350
  outline-style: var(--utrecht-focus-outline-style, revert);
3282
3351
  outline-width: var(--utrecht-focus-outline-width, revert);
3283
3352
  }
3353
+ /**
3354
+ * @license EUPL-1.2
3355
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3356
+ * Copyright (c) 2020-2022 Frameless B.V.
3357
+ */
3358
+ /**
3359
+ * @license EUPL-1.2
3360
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3361
+ * Copyright (c) 2020-2022 Frameless B.V.
3362
+ */
3363
+ .utrecht-form {
3364
+ display: block;
3365
+ max-inline-size: var(--utrecht-form-max-inline-size);
3366
+ }
3367
+
3284
3368
  /**
3285
3369
  * @license EUPL-1.2
3286
3370
  * Copyright (c) 2021 Gemeente Utrecht
@@ -3299,7 +3383,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3299
3383
  */
3300
3384
  .utrecht-heading-1 {
3301
3385
  break-inside: avoid-column;
3302
- page-break-after: avoid;
3303
3386
  page-break-inside: avoid;
3304
3387
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3305
3388
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3333,7 +3416,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3333
3416
  */
3334
3417
  .utrecht-heading-2 {
3335
3418
  break-inside: avoid-column;
3336
- page-break-after: avoid;
3337
3419
  page-break-inside: avoid;
3338
3420
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3339
3421
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3367,7 +3449,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3367
3449
  */
3368
3450
  .utrecht-heading-3 {
3369
3451
  break-inside: avoid-column;
3370
- page-break-after: avoid;
3371
3452
  page-break-inside: avoid;
3372
3453
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3373
3454
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3401,7 +3482,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3401
3482
  */
3402
3483
  .utrecht-heading-4 {
3403
3484
  break-inside: avoid-column;
3404
- page-break-after: avoid;
3405
3485
  page-break-inside: avoid;
3406
3486
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3407
3487
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3435,7 +3515,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3435
3515
  */
3436
3516
  .utrecht-heading-5 {
3437
3517
  break-inside: avoid-column;
3438
- page-break-after: avoid;
3439
3518
  page-break-inside: avoid;
3440
3519
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3441
3520
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3469,7 +3548,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3469
3548
  */
3470
3549
  .utrecht-heading-6 {
3471
3550
  break-inside: avoid-column;
3472
- page-break-after: avoid;
3473
3551
  page-break-inside: avoid;
3474
3552
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3475
3553
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3581,63 +3659,44 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3581
3659
  /* stylelint-disable-next-line property-disallowed-list */
3582
3660
  max-height: 100%;
3583
3661
  /* stylelint-disable-next-line property-disallowed-list */
3584
- max-width: 100%;
3585
- }
3586
-
3587
- .utrecht-img--photo {
3588
- /* stylelint-disable-next-line property-disallowed-list */
3589
- max-height: 100%;
3590
- /* stylelint-disable-next-line property-disallowed-list */
3591
- max-width: 100%;
3592
- }
3593
-
3594
- /**
3595
- * @license EUPL-1.2
3596
- * Copyright (c) 2021 Gemeente Utrecht
3597
- * Copyright (c) 2021 Robbert Broersma
3598
- */
3599
- /* reset before other stylesheets */
3600
- .utrecht-link-list,
3601
- .utrecht-link-list--html-ul {
3602
- margin-block-end: 0;
3603
- margin-block-start: 0;
3604
- margin-inline-end: 0;
3605
- margin-inline-start: 0;
3606
- padding-inline-start: 0;
3607
- }
3608
- .utrecht-link-list > li,
3609
- .utrecht-link-list--html-ul > li {
3610
- list-style: none;
3611
- }
3612
-
3613
- .utrecht-link-list {
3614
- --utrecht-link-text-decoration: none;
3615
- --utrecht-link-hover-text-decoration: underline;
3616
- --utrecht-link-focus-text-decoration: underline;
3617
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
3618
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
3662
+ max-width: 100%;
3619
3663
  }
3620
3664
 
3621
- .utrecht-link-list--distanced {
3622
- --utrecht-space-around: 1;
3665
+ .utrecht-img--photo {
3666
+ /* stylelint-disable-next-line property-disallowed-list */
3667
+ max-height: 100%;
3668
+ /* stylelint-disable-next-line property-disallowed-list */
3669
+ max-width: 100%;
3623
3670
  }
3624
3671
 
3625
- .utrecht-link-list__item {
3626
- --utrecht-icon-size: var(--utrecht-link-list-icon-size);
3627
- --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
3628
- --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
3629
- display: block;
3630
- font-weight: var(--utrecht-link-list-item-font-weight);
3672
+ /**
3673
+ * @license EUPL-1.2
3674
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3675
+ * Copyright (c) 2020-2022 Frameless B.V.
3676
+ */
3677
+ /**
3678
+ * @license EUPL-1.2
3679
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3680
+ * Copyright (c) 2020-2022 Frameless B.V.
3681
+ */
3682
+ /* stylelint-disable-next-line block-no-empty */
3683
+ .utrecht-index-char-nav {
3684
+ --utrecht-button-padding-inline-start: 1ch;
3685
+ --utrecht-button-padding-inline-end: 1ch;
3686
+ display: flex;
3687
+ flex-wrap: wrap;
3688
+ gap: var(--utrecht-index-char-nav-gap);
3689
+ margin-block-end: var(--utrecht-index-char-nav-margin-block-end);
3690
+ margin-block-start: var(--utrecht-index-char-nav-margin-block-start);
3631
3691
  }
3632
3692
 
3633
- .utrecht-link-list__item + .utrecht-link-list__item {
3634
- margin-block-start: var(--utrecht-link-list-item-margin-block-start);
3693
+ .utrecht-index-char-nav__link--current {
3694
+ --utrecht-button-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
3695
+ --utrecht-button-link-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
3635
3696
  }
3636
3697
 
3637
- .utrecht-link-list__link {
3638
- align-items: baseline;
3639
- column-gap: var(--utrecht-link-list-item-column-gap);
3640
- display: inline-flex;
3698
+ .utrecht-index-char-nav__link--disabled {
3699
+ pointer-events: none;
3641
3700
  }
3642
3701
 
3643
3702
  /**
@@ -3844,6 +3903,55 @@ however browsers don't seem to have implemented great looking supixel tweening y
3844
3903
  /* reset <button> styling */
3845
3904
  border-width: 0;
3846
3905
  }
3906
+ /**
3907
+ * @license EUPL-1.2
3908
+ * Copyright (c) 2021 Gemeente Utrecht
3909
+ * Copyright (c) 2021 Robbert Broersma
3910
+ */
3911
+ /* reset before other stylesheets */
3912
+ .utrecht-link-list,
3913
+ .utrecht-link-list--html-ul {
3914
+ margin-block-end: 0;
3915
+ margin-block-start: 0;
3916
+ margin-inline-end: 0;
3917
+ margin-inline-start: 0;
3918
+ padding-inline-start: 0;
3919
+ }
3920
+ .utrecht-link-list > li,
3921
+ .utrecht-link-list--html-ul > li {
3922
+ list-style: none;
3923
+ }
3924
+
3925
+ .utrecht-link-list {
3926
+ --utrecht-link-text-decoration: none;
3927
+ --utrecht-link-hover-text-decoration: underline;
3928
+ --utrecht-link-focus-text-decoration: underline;
3929
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
3930
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
3931
+ }
3932
+
3933
+ .utrecht-link-list--distanced {
3934
+ --utrecht-space-around: 1;
3935
+ }
3936
+
3937
+ .utrecht-link-list__item {
3938
+ --utrecht-icon-size: var(--utrecht-link-list-icon-size);
3939
+ --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
3940
+ --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
3941
+ display: block;
3942
+ font-weight: var(--utrecht-link-list-item-font-weight);
3943
+ }
3944
+
3945
+ .utrecht-link-list__item + .utrecht-link-list__item {
3946
+ margin-block-start: var(--utrecht-link-list-item-margin-block-start);
3947
+ }
3948
+
3949
+ .utrecht-link-list__link {
3950
+ align-items: baseline;
3951
+ column-gap: var(--utrecht-link-list-item-column-gap);
3952
+ display: inline-flex;
3953
+ }
3954
+
3847
3955
  /**
3848
3956
  * @license EUPL-1.2
3849
3957
  * Copyright (c) 2022 The Knights Who Say NIH! B.V.
@@ -3898,27 +4006,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3898
4006
  margin-inline-start: var(--utrecht-link-social-margin-inline-start);
3899
4007
  }
3900
4008
 
3901
- /**
3902
- * @license EUPL-1.2
3903
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
3904
- * Copyright (c) 2021 Gemeente Utrecht
3905
- */
3906
- .utrecht-list-social {
3907
- display: flex;
3908
- margin-block-end: var(--utrecht-list-social-margin-block-end);
3909
- margin-block-start: var(--utrecht-list-social-margin-block-start);
3910
- padding-inline-end: var(--utrecht-list-social-padding-inline-end);
3911
- padding-inline-start: var(--utrecht-list-social-padding-inline-start);
3912
- }
3913
-
3914
- .utrecht-list-social__item {
3915
- list-style-type: none;
3916
- margin-inline-end: var(--utrecht-list-social-item-margin-inline-end);
3917
- }
3918
- .utrecht-list-social__item:last-child {
3919
- margin-inline-end: 0;
3920
- }
3921
-
3922
4009
  /**
3923
4010
  * @license EUPL-1.2
3924
4011
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -4148,22 +4235,258 @@ however browsers don't seem to have implemented great looking supixel tweening y
4148
4235
  text-decoration-line: none;
4149
4236
  }
4150
4237
 
4151
- /**
4152
- * Simulate forced-colors mode.
4153
- */
4154
- .utrecht-link--forced-colors {
4155
- /* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
4156
- * however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
4157
- * That's why we use `Highlight` vs `HighlightText`.
4238
+ /**
4239
+ * Simulate forced-colors mode.
4240
+ */
4241
+ .utrecht-link--forced-colors {
4242
+ /* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
4243
+ * however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
4244
+ * That's why we use `Highlight` vs `HighlightText`.
4245
+ */
4246
+ --utrecht-focus-outline-color: Highlight;
4247
+ --utrecht-focus-inverse-outline-color: HighlightText;
4248
+ --utrecht-link-color: linktext;
4249
+ --utrecht-link-hover-color: linktext;
4250
+ --utrecht-link-focus-color: linktext;
4251
+ --utrecht-link-active-color: activetext;
4252
+ --utrecht-link-visited-color: visitedtext;
4253
+ --utrecht-link-placeholder-color: GrayText;
4254
+ }
4255
+
4256
+ /**
4257
+ * @license EUPL-1.2
4258
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
4259
+ * Copyright (c) 2021 Gemeente Utrecht
4260
+ */
4261
+ .utrecht-list-social {
4262
+ display: flex;
4263
+ margin-block-end: var(--utrecht-list-social-margin-block-end);
4264
+ margin-block-start: var(--utrecht-list-social-margin-block-start);
4265
+ padding-inline-end: var(--utrecht-list-social-padding-inline-end);
4266
+ padding-inline-start: var(--utrecht-list-social-padding-inline-start);
4267
+ }
4268
+
4269
+ .utrecht-list-social__item {
4270
+ list-style-type: none;
4271
+ margin-inline-end: var(--utrecht-list-social-item-margin-inline-end);
4272
+ }
4273
+ .utrecht-list-social__item:last-child {
4274
+ margin-inline-end: 0;
4275
+ }
4276
+
4277
+ /**
4278
+ * @license EUPL-1.2
4279
+ * Copyright (c) 2023 Frameless B.V.
4280
+ */
4281
+ /**
4282
+ * @license EUPL-1.2
4283
+ * Copyright (c) 2023 Frameless B.V.
4284
+ */
4285
+ /**
4286
+ * @license EUPL-1.2
4287
+ * Copyright (c) 2021 Gemeente Utrecht
4288
+ * Copyright (c) 2021 Robbert Broersma
4289
+ */
4290
+ /* stylelint-disable-next-line block-no-empty */
4291
+ /* order is after default option styling */
4292
+ .utrecht-listbox {
4293
+ --utrecht-listbox-max-block-size: 300px;
4294
+ background-color: var(--utrecht-listbox-background-color);
4295
+ border-color: var(--utrecht-listbox-border-color);
4296
+ border-radius: var(--utrecht-listbox-border-radius);
4297
+ border-style: solid;
4298
+ border-width: var(--utrecht-listbox-border-width);
4299
+ box-sizing: border-box;
4300
+ cursor: default;
4301
+ display: flex;
4302
+ flex-direction: column;
4303
+ inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-input-max-inline-size));
4304
+ max-block-size: var(--utrecht-listbox-max-block-size);
4305
+ min-block-size: 1em;
4306
+ overflow-block: auto;
4307
+ overflow-y: auto;
4308
+ padding-block-end: var(--utrecht-listbox-padding-block-end);
4309
+ padding-block-start: var(--utrecht-listbox-padding-block-start);
4310
+ padding-inline-end: var(--utrecht-listbox-padding-inline-end);
4311
+ padding-inline-start: var(--utrecht-listbox-padding-inline-start);
4312
+ -webkit-user-select: none;
4313
+ user-select: none;
4314
+ }
4315
+ @media (forced-colors: active) {
4316
+ .utrecht-listbox {
4317
+ /* Use inversed disabled colors for selected options */
4318
+ --utrecht-listbox-option-selected-background-color: Highlight;
4319
+ --utrecht-listbox-option-selected-color: HighlightText;
4320
+ --utrecht-listbox-option-disabled-background-color: field;
4321
+ --utrecht-listbox-option-disabled-color: GrayText;
4322
+ background-color: field;
4323
+ color: fieldtext;
4324
+ }
4325
+ }
4326
+
4327
+ .utrecht-listbox--focus {
4328
+ /* TODO: Implement CSS of focus listbox */
4329
+ }
4330
+
4331
+ .utrecht-listbox--focus-visible {
4332
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
4333
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4334
+ * can combine it with the focus ring box shadow.
4335
+ */
4336
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4337
+ var(--utrecht-focus-inverse-outline-color, transparent);
4338
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
4339
+ outline-color: var(--utrecht-focus-outline-color, revert);
4340
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
4341
+ outline-style: var(--utrecht-focus-outline-style, revert);
4342
+ outline-width: var(--utrecht-focus-outline-width, revert);
4343
+ }
4344
+
4345
+ .utrecht-listbox--invalid {
4346
+ /* TODO: Implement CSS of invalid listbox */
4347
+ }
4348
+
4349
+ .utrecht-listbox--read-only {
4350
+ /* TODO: Implement CSS of read-only listbox */
4351
+ }
4352
+
4353
+ .utrecht-listbox__list {
4354
+ margin-block-end: 0;
4355
+ margin-block-start: 0;
4356
+ margin-inline-end: 0;
4357
+ margin-inline-start: 0;
4358
+ padding-inline-start: 0;
4359
+ }
4360
+
4361
+ .utrecht-listbox__group {
4362
+ margin-block-end: 0;
4363
+ margin-block-start: 0;
4364
+ margin-inline-end: 0;
4365
+ margin-inline-start: 0;
4366
+ padding-inline-start: 0;
4367
+ margin-block-end: var(--utrecht-listbox-option-group-margin-block-end);
4368
+ }
4369
+
4370
+ .utrecht-listbox__group-label {
4371
+ color: var(--utrecht-listbox-option-group-label-color);
4372
+ font-size: var(--utrecht-listbox-option-group-label-font-size);
4373
+ font-weight: var(--utrecht-listbox-option-group-label-font-weight);
4374
+ line-height: var(--utrecht-listbox-option-group-label-line-height);
4375
+ margin-inline-start: var(--utrecht-listbox-option-group-label-margin-inline-start);
4376
+ }
4377
+ @media (forced-colors: active) {
4378
+ .utrecht-listbox__group-label {
4379
+ background-color: field;
4380
+ color: fieldtext;
4381
+ }
4382
+ }
4383
+
4384
+ .utrecht-listbox__option {
4385
+ list-style: none;
4386
+ --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
4387
+ align-items: center;
4388
+ background-color: var(--utrecht-listbox-option-background-color);
4389
+ box-sizing: border-box;
4390
+ color: var(--utrecht-listbox-option-color);
4391
+ display: flex;
4392
+ min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
4393
+ padding-block-end: var(--utrecht-listbox-option-padding-block-end);
4394
+ padding-block-start: var(--utrecht-listbox-option-padding-block-start);
4395
+ padding-inline-end: var(--utrecht-listbox-option-padding-inline-end);
4396
+ padding-inline-start: var(--utrecht-listbox-option-padding-inline-start);
4397
+ }
4398
+ @media (forced-colors: active) {
4399
+ .utrecht-listbox__option {
4400
+ /* Fix rendering glitch in Google Chrome, where the text became black on a black background */
4401
+ forced-color-adjust: none;
4402
+ }
4403
+ }
4404
+
4405
+ .utrecht-listbox__option--disabled {
4406
+ background-color: var(--utrecht-listbox-option-disabled-background-color);
4407
+ color: var(--utrecht-listbox-option-disabled-color);
4408
+ }
4409
+
4410
+ .utrecht-listbox__option--hover {
4411
+ background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
4412
+ color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
4413
+ }
4414
+
4415
+ .utrecht-listbox__option--focus {
4416
+ background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
4417
+ color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
4418
+ }
4419
+
4420
+ .utrecht-listbox__option--focus-visible {
4421
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
4422
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4423
+ * can combine it with the focus ring box shadow.
4424
+ */
4425
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4426
+ var(--utrecht-focus-inverse-outline-color, transparent);
4427
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
4428
+ outline-color: var(--utrecht-focus-outline-color, revert);
4429
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
4430
+ outline-style: var(--utrecht-focus-outline-style, revert);
4431
+ outline-width: var(--utrecht-focus-outline-width, revert);
4432
+ /* ensure the focus outline is rendered inside the `overflow` container */
4433
+ --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
4434
+ }
4435
+
4436
+ .utrecht-listbox__option--active {
4437
+ background-color: var(--utrecht-listbox-option-is-active-background-color);
4438
+ color: var(--utrecht-listbox-option-is-active-color);
4439
+ font-weight: var(--utrecht-listbox-option-is-active-font-weight);
4440
+ }
4441
+
4442
+ .utrecht-listbox__option--selected {
4443
+ background-color: var(--utrecht-listbox-option-selected-background-color);
4444
+ color: var(--utrecht-listbox-option-selected-color);
4445
+ }
4446
+
4447
+ .utrecht-listbox__option--html-li {
4448
+ list-style: none;
4449
+ }
4450
+ .utrecht-listbox__option--html-li:hover {
4451
+ background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
4452
+ color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
4453
+ }
4454
+ .utrecht-listbox__option--html-li:focus {
4455
+ background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
4456
+ color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
4457
+ }
4458
+
4459
+ .utrecht-listbox--disabled {
4460
+ /* TODO: Implement CSS of disabled listbox */
4461
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
4462
+ }
4463
+ @media (forced-colors: active) {
4464
+ .utrecht-listbox--disabled {
4465
+ /* Use inversed disabled colors for selected options */
4466
+ --utrecht-listbox-option-selected-background-color: GrayText;
4467
+ --utrecht-listbox-option-selected-color: field;
4468
+ --utrecht-listbox-option-background-color: field;
4469
+ --utrecht-listbox-option-color: GrayText;
4470
+ --utrecht-listbox-background-color: field;
4471
+ --utrecht-listbox-color: GrayText;
4472
+ }
4473
+ }
4474
+
4475
+ .utrecht-listbox--html-div:focus {
4476
+ /* TODO: Implement CSS of focus listbox */
4477
+ }
4478
+ .utrecht-listbox--html-div:focus-visible {
4479
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
4480
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4481
+ * can combine it with the focus ring box shadow.
4158
4482
  */
4159
- --utrecht-focus-outline-color: Highlight;
4160
- --utrecht-focus-inverse-outline-color: HighlightText;
4161
- --utrecht-link-color: linktext;
4162
- --utrecht-link-hover-color: linktext;
4163
- --utrecht-link-focus-color: linktext;
4164
- --utrecht-link-active-color: activetext;
4165
- --utrecht-link-visited-color: visitedtext;
4166
- --utrecht-link-placeholder-color: GrayText;
4483
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4484
+ var(--utrecht-focus-inverse-outline-color, transparent);
4485
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
4486
+ outline-color: var(--utrecht-focus-outline-color, revert);
4487
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
4488
+ outline-style: var(--utrecht-focus-outline-style, revert);
4489
+ outline-width: var(--utrecht-focus-outline-width, revert);
4167
4490
  }
4168
4491
 
4169
4492
  /**
@@ -4180,6 +4503,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
4180
4503
  gap: var(--utrecht-space-inline-sm);
4181
4504
  }
4182
4505
 
4506
+ /**
4507
+ * @license EUPL-1.2
4508
+ * Copyright (c) 2021 Gemeente Utrecht
4509
+ * Copyright (c) 2021 Robbert Broersma
4510
+ */
4511
+ /* stylelint-disable-next-line block-no-empty */
4512
+ .utrecht-logo-image__decoration-1 {
4513
+ fill: var(--utrecht-logo-decoration-1-color, #fff);
4514
+ }
4515
+
4516
+ .utrecht-logo-image__decoration-2 {
4517
+ fill: var(--utrecht-logo-decoration-2-color, #c00);
4518
+ }
4519
+
4520
+ .utrecht-logo-image__decoration-3 {
4521
+ fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
4522
+ }
4523
+
4183
4524
  /**
4184
4525
  * @license EUPL-1.2
4185
4526
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4205,6 +4546,32 @@ however browsers don't seem to have implemented great looking supixel tweening y
4205
4546
  inline-size: auto;
4206
4547
  }
4207
4548
 
4549
+ /**
4550
+ * @license EUPL-1.2
4551
+ * Copyright (c) 2022 Gemeente Utrecht
4552
+ * Copyright (c) 2022 Robbert Broersma
4553
+ */
4554
+ /**
4555
+ * @license EUPL-1.2
4556
+ * Copyright (c) 2022 Gemeente Utrecht
4557
+ * Copyright (c) 2022 Robbert Broersma
4558
+ */
4559
+ .utrecht-map-marker {
4560
+ --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
4561
+ align-items: center;
4562
+ background-color: var(--utrecht-map-marker-background-color);
4563
+ block-size: var(--utrecht-map-marker-size);
4564
+ border-color: var(--utrecht-map-marker-border-color);
4565
+ border-radius: 50%;
4566
+ border-style: solid;
4567
+ border-width: var(--utrecht-map-marker-border-width);
4568
+ box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
4569
+ color: var(--utrecht-map-marker-color);
4570
+ display: flex;
4571
+ inline-size: var(--utrecht-map-marker-size);
4572
+ justify-content: center;
4573
+ }
4574
+
4208
4575
  /**
4209
4576
  * @license EUPL-1.2
4210
4577
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4282,32 +4649,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
4282
4649
  padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
4283
4650
  }
4284
4651
 
4285
- /**
4286
- * @license EUPL-1.2
4287
- * Copyright (c) 2022 Gemeente Utrecht
4288
- * Copyright (c) 2022 Robbert Broersma
4289
- */
4290
- /**
4291
- * @license EUPL-1.2
4292
- * Copyright (c) 2022 Gemeente Utrecht
4293
- * Copyright (c) 2022 Robbert Broersma
4294
- */
4295
- .utrecht-map-marker {
4296
- --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
4297
- align-items: center;
4298
- background-color: var(--utrecht-map-marker-background-color);
4299
- block-size: var(--utrecht-map-marker-size);
4300
- border-color: var(--utrecht-map-marker-border-color);
4301
- border-radius: 50%;
4302
- border-style: solid;
4303
- border-width: var(--utrecht-map-marker-border-width);
4304
- box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
4305
- color: var(--utrecht-map-marker-color);
4306
- display: flex;
4307
- inline-size: var(--utrecht-map-marker-size);
4308
- justify-content: center;
4309
- }
4310
-
4311
4652
  /**
4312
4653
  * @license EUPL-1.2
4313
4654
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -4431,6 +4772,86 @@ however browsers don't seem to have implemented great looking supixel tweening y
4431
4772
  margin-block-start: 0;
4432
4773
  }
4433
4774
 
4775
+ /**
4776
+ * @license EUPL-1.2
4777
+ * Copyright (c) 2021 Gemeente Utrecht
4778
+ * Copyright (c) 2021 Robbert Broersma
4779
+ */
4780
+ .utrecht-nav-bar {
4781
+ background-color: var(--utrecht-nav-bar-background-color);
4782
+ color: var(--utrecht-nav-bar-color);
4783
+ display: flex;
4784
+ justify-content: center;
4785
+ }
4786
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
4787
+ .utrecht-nav-bar {
4788
+ border-block-end-color: currentColor;
4789
+ border-block-end-style: solid;
4790
+ border-block-end-width: 1px;
4791
+ /* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
4792
+ border-block-start-color: currentColor;
4793
+ border-block-start-style: solid;
4794
+ border-block-start-width: 1px;
4795
+ padding-block-end: calc(var(--utrecht-focus-outline-width) * 2);
4796
+ padding-block-start: calc(var(--utrecht-focus-outline-width) * 2);
4797
+ }
4798
+ }
4799
+
4800
+ .utrecht-nav-bar__content {
4801
+ align-items: stretch;
4802
+ display: flex;
4803
+ flex-direction: row;
4804
+ flex-wrap: wrap;
4805
+ inline-size: 100%;
4806
+ justify-content: space-between;
4807
+ /* Wrap content to accomodate:
4808
+ * - 400% zoom
4809
+ * - longer text due to automatic translation
4810
+ * - longer text due to editorial content requirements
4811
+ */
4812
+ max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
4813
+ }
4814
+
4815
+ /**
4816
+ * @license EUPL-1.2
4817
+ * Copyright (c) 2021 Gemeente Utrecht
4818
+ * Copyright (c) 2021 Robbert Broersma
4819
+ */
4820
+ .utrecht-nav-list {
4821
+ margin-block-end: 0;
4822
+ margin-block-start: 0;
4823
+ margin-inline-end: 0;
4824
+ margin-inline-start: 0;
4825
+ padding-inline-start: 0;
4826
+ align-items: stretch;
4827
+ display: flex;
4828
+ flex-direction: row;
4829
+ flex-wrap: wrap;
4830
+ inline-size: 100%;
4831
+ justify-content: start;
4832
+ }
4833
+
4834
+ .utrecht-nav-list--center > * {
4835
+ flex: 1 1 0;
4836
+ justify-content: center;
4837
+ }
4838
+
4839
+ .utrecht-nav-list__item {
4840
+ list-style: none;
4841
+ display: inline-flex;
4842
+ }
4843
+
4844
+ /* Style for the navigation links */
4845
+ .utrecht-nav-list__link {
4846
+ font-weight: var(--utrecht-nav-list-link-font-weight);
4847
+ max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
4848
+ padding-block-end: var(--utrecht-nav-bar-link-padding-block-end);
4849
+ padding-block-start: var(--utrecht-nav-bar-link-padding-block-start);
4850
+ padding-inline-end: var(--utrecht-nav-bar-link-padding-inline-end);
4851
+ padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
4852
+ text-decoration: none;
4853
+ }
4854
+
4434
4855
  /**
4435
4856
  * @license EUPL-1.2
4436
4857
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -4906,27 +5327,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
4906
5327
  * @license EUPL-1.2
4907
5328
  * Copyright (c) 2021 Robbert Broersma
4908
5329
  */
4909
- .utrecht-pagination__page-link:focus,
4910
- .utrecht-pagination__relative-link:focus {
4911
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
4912
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4913
- * can combine it with the focus ring box shadow.
4914
- */
4915
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4916
- var(--utrecht-focus-inverse-outline-color, transparent);
4917
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
4918
- outline-color: var(--utrecht-focus-outline-color, revert);
4919
- outline-offset: var(--utrecht-focus-outline-offset, revert);
4920
- outline-style: var(--utrecht-focus-outline-style, revert);
4921
- outline-width: var(--utrecht-focus-outline-width, revert);
4922
- }
4923
-
4924
- .utrecht-pagination__page-link:focus:not(:focus-visible),
4925
- .utrecht-pagination__relative-link:focus:not(:focus-visible) {
4926
- /* undo focus ring */
4927
- box-shadow: none;
4928
- outline-style: revert;
4929
- }
4930
5330
 
4931
5331
  .utrecht-pagination {
4932
5332
  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
@@ -5031,64 +5431,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5031
5431
  outline-style: revert;
5032
5432
  }
5033
5433
 
5034
- /**
5035
- * @license EUPL-1.2
5036
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
5037
- * Copyright (c) 2021 Gemeente Utrecht
5038
- */
5039
- /**
5040
- * @license EUPL-1.2
5041
- * Copyright (c) 2021 Gemeente Utrecht
5042
- * Copyright (c) 2021 Robbert Broersma
5043
- */
5044
- .utrecht-data-placeholder {
5045
- background-color: var(--utrecht-data-placeholder-background-color, currentColor);
5046
- block-size: 1em;
5047
- display: inline-block;
5048
- inline-size: min(100%, var(--utrecht-data-placeholder-max-inline-size));
5049
- max-inline-size: var(--utrecht-data-placeholder-max-inline-size);
5050
- min-inline-size: var(--utrecht-data-placeholder-min-inline-size, 10ch);
5051
- vertical-align: -0.1em;
5052
- }
5053
- @media print {
5054
- .utrecht-data-placeholder {
5055
- outline-color: currentColor;
5056
- outline-style: dashed;
5057
- outline-width: 0.1em;
5058
- }
5059
- }
5060
- @media screen and (prefers-contrast: more) {
5061
- .utrecht-data-placeholder {
5062
- background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
5063
- }
5064
- }
5065
- @media screen and (forced-colors: active) {
5066
- .utrecht-data-placeholder {
5067
- background-color: GrayText;
5068
- }
5069
- }
5070
-
5071
- .utrecht-data-placeholder--loading {
5072
- cursor: var(--utrecht-action-busy-cursor, busy);
5073
- }
5074
-
5075
- /* class name available only for Storybook */
5076
- .utrecht-data-placeholder--print {
5077
- outline-color: currentColor;
5078
- outline-style: dashed;
5079
- outline-width: 0.1em;
5080
- }
5081
-
5082
- /* class name available only for Storybook */
5083
- .utrecht-data-placeholder--forced-colors {
5084
- background-color: GrayText;
5085
- }
5086
-
5087
- /* class name available only for Storybook */
5088
- .utrecht-data-placeholder--high-contrast {
5089
- cursor: var(--utrecht-action-busy-cursor, busy);
5090
- }
5091
-
5092
5434
  /**
5093
5435
  * @license EUPL-1.2
5094
5436
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -5158,6 +5500,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
5158
5500
  --utrecht-space-around: 1;
5159
5501
  }
5160
5502
 
5503
+ /**
5504
+ * @license EUPL-1.2
5505
+ * Copyright (c) 2020-2022 Gemeente Utrecht
5506
+ * Copyright (c) 2020-2022 Frameless B.V.
5507
+ */
5508
+ /**
5509
+ * @license EUPL-1.2
5510
+ * Copyright (c) 2020-2022 Gemeente Utrecht
5511
+ * Copyright (c) 2020-2022 Frameless B.V.
5512
+ */
5513
+ .utrecht-preserve-data {
5514
+ unicode-bidi: isolate;
5515
+ /* stylelint-disable-next-line property-no-unknown */
5516
+ white-space-collapse: preserve-spaces;
5517
+ }
5518
+
5161
5519
  /**
5162
5520
  * @license EUPL-1.2
5163
5521
  * Copyright (c) 2021 Robbert Broersma
@@ -5595,6 +5953,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
5595
5953
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
5596
5954
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
5597
5955
  inline-size: 100%;
5956
+ min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
5957
+ min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
5598
5958
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
5599
5959
  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
5600
5960
  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
@@ -5873,6 +6233,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
5873
6233
  */
5874
6234
  /* stylelint-disable-next-line block-no-empty */
5875
6235
  /* stylelint-disable-next-line block-no-empty */
6236
+ .utrecht-table-container--overflow-inline {
6237
+ background-attachment: local, local, scroll, scroll;
6238
+ background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
6239
+ background-position: left center, right center, left center, right center;
6240
+ background-repeat: no-repeat;
6241
+ background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
6242
+ overflow: auto;
6243
+ }
6244
+
5876
6245
  .utrecht-table {
5877
6246
  /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
5878
6247
  * Therefore we need to use `border-collapse: separate` instead.
@@ -6222,7 +6591,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
6222
6591
  inline-size: 100%;
6223
6592
  line-height: var(--utrecht-textarea-line-height, initial);
6224
6593
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
6225
- min-block-size: var(--utrecht-textarea-min-block-size);
6594
+ min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
6595
+ min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
6226
6596
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
6227
6597
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
6228
6598
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -6369,6 +6739,28 @@ however browsers don't seem to have implemented great looking supixel tweening y
6369
6739
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
6370
6740
  /* stylelint-disable order/properties-alphabetical-order */
6371
6741
  .utrecht-textbox {
6742
+ /* The average character inline-size is an approximation, with a default that works for Dutch text.
6743
+ * The average might need to be configured specifically, for other scripts (CJK characters)
6744
+ * and very wide or very narrow fonts.
6745
+ * For monospace fonts it can be set to `1ch`.
6746
+ */
6747
+ --_utrecht-textbox-value-char: 0.667em + 0.334ch;
6748
+ /* Because this element uses `border-box` box-sizing, we need to manually add up the
6749
+ * border width, padding width and the content width.
6750
+ *
6751
+ * Browsers and browser addons can add buttons inside the content box, for example
6752
+ * for autocomplete. To avoid overlap between the UI and the text, we reserve
6753
+ * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
6754
+ *
6755
+ * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
6756
+ */
6757
+ --_utrecht-textbox-max-inline-size: calc(
6758
+ calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
6759
+ var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
6760
+ var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
6761
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
6762
+ var(--utrecht-textbox-autocomplete-ui-size, 44px)
6763
+ );
6372
6764
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
6373
6765
  block-size: initial; /* harden */
6374
6766
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
@@ -6383,7 +6775,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
6383
6775
  font-weight: initial; /* harden */
6384
6776
  inline-size: 100%;
6385
6777
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
6386
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
6778
+ min-block-size: var(--utrecht-pointer-target-min-size, 44px);
6779
+ min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
6780
+ max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
6387
6781
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
6388
6782
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
6389
6783
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -6406,16 +6800,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
6406
6800
  }
6407
6801
 
6408
6802
  .utrecht-textbox--disabled {
6409
- 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))));
6410
- 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))));
6411
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6803
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
6804
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
6805
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6412
6806
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6413
6807
  }
6414
6808
 
6415
6809
  .utrecht-textbox--focus {
6416
- 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))));
6417
- 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))));
6418
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6810
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
6811
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
6812
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6419
6813
  }
6420
6814
 
6421
6815
  .utrecht-textbox--focus-visible {
@@ -6454,6 +6848,53 @@ however browsers don't seem to have implemented great looking supixel tweening y
6454
6848
  font-variant-numeric: slashed-zero;
6455
6849
  }
6456
6850
 
6851
+ .utrecht-textbox--postal-code-nl-size {
6852
+ /* Dutch postal code: 4 numbers, 1 space and 2 letters */
6853
+ --utrecht-textbox-value-max-length: 7;
6854
+ }
6855
+
6856
+ .utrecht-textbox--house-number-size {
6857
+ /* Dutch house number is 99999 at most: 5 numbers */
6858
+ --utrecht-textbox-value-max-length: 5;
6859
+ }
6860
+
6861
+ .utrecht-textbox--house-letter-size {
6862
+ /* Dutch house letter is 1 letter */
6863
+ --utrecht-textbox-value-max-length: 1;
6864
+ }
6865
+
6866
+ .utrecht-textbox--house-addition-size {
6867
+ /* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
6868
+ --utrecht-textbox-value-max-length: 4;
6869
+ }
6870
+
6871
+ .utrecht-textbox--voorvoegsel-size {
6872
+ /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
6873
+ * of all allowed values. The longest value is 10 characters.
6874
+ * The class name is in Dutch because it is a Dutch concept. */
6875
+ --utrecht-textbox-value-max-length: 10;
6876
+ }
6877
+
6878
+ .utrecht-textbox--tel-size {
6879
+ /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
6880
+ --utrecht-textbox-value-max-length: 19;
6881
+ }
6882
+
6883
+ .utrecht-textbox--tel-nl-size {
6884
+ /* Dutch telephone number: 10 number, typically with at most 3 spaces */
6885
+ --utrecht-textbox-value-max-length: 13;
6886
+ }
6887
+
6888
+ .utrecht-textbox--iban-size {
6889
+ /* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
6890
+ --utrecht-textbox-value-max-length: 41;
6891
+ }
6892
+
6893
+ .utrecht-textbox--iban-nl-size {
6894
+ /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
6895
+ --utrecht-textbox-value-max-length: 22;
6896
+ }
6897
+
6457
6898
  /**
6458
6899
  * This class name is experimental.
6459
6900
  */
@@ -6485,9 +6926,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
6485
6926
  */
6486
6927
  }
6487
6928
  .utrecht-textbox--html-input:focus {
6488
- 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))));
6489
- 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))));
6490
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6929
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
6930
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
6931
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6491
6932
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
6492
6933
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
6493
6934
  * can combine it with the focus ring box shadow.
@@ -6525,9 +6966,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
6525
6966
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6526
6967
  }
6527
6968
  .utrecht-textbox--html-input:disabled {
6528
- 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))));
6529
- 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))));
6530
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6969
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
6970
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
6971
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
6531
6972
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6532
6973
  }
6533
6974
  .utrecht-textbox--html-input::placeholder {
@@ -6734,4 +7175,4 @@ however browsers don't seem to have implemented great looking supixel tweening y
6734
7175
  hyphens: none;
6735
7176
  overflow-wrap: anywhere;
6736
7177
  page-break-inside: avoid;
6737
- }
7178
+ }