@utrecht/component-library-css 3.1.0 → 4.0.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 (9) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/html.css +1 -7
  3. package/dist/html.js +1 -0
  4. package/dist/index.css +1652 -1391
  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
package/dist/index.css CHANGED
@@ -118,76 +118,6 @@
118
118
  --utrecht-space-around: 0;
119
119
  }
120
120
 
121
- /**
122
- * @license EUPL-1.2
123
- * Copyright (c) 2020-2022 Gemeente Utrecht
124
- * Copyright (c) 2020-2022 Frameless B.V.
125
- */
126
- /**
127
- * @license EUPL-1.2
128
- * Copyright (c) 2020-2022 Gemeente Utrecht
129
- * Copyright (c) 2020-2022 Frameless B.V.
130
- */
131
- .utrecht-alert {
132
- background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
133
- border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
134
- border-radius: var(--utrecht-alert-border-radius, 0);
135
- border-style: solid;
136
- border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
137
- color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
138
- display: grid;
139
- gap: var(--utrecht-alert-icon-gap);
140
- grid-template-areas: "icon message";
141
- grid-template-columns: 0fr 100fr;
142
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
143
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
144
- padding-block-end: var(--utrecht-alert-padding-block-end);
145
- padding-block-start: var(--utrecht-alert-padding-block-start);
146
- padding-inline-end: var(--utrecht-alert-padding-inline-end);
147
- padding-inline-start: var(--utrecht-alert-padding-inline-start);
148
- }
149
-
150
- .utrecht-alert__icon {
151
- --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
152
- grid-area: icon;
153
- }
154
-
155
- .utrecht-alert__message {
156
- grid-area: message;
157
- }
158
-
159
- .utrecht-alert--info {
160
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
161
- --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
162
- --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
163
- --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
164
- --_utrecht-alert-color: var(--utrecht-alert-info-color);
165
- }
166
-
167
- .utrecht-alert--ok {
168
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
169
- --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
170
- --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
171
- --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
172
- --_utrecht-alert-color: var(--utrecht-alert-ok-color);
173
- }
174
-
175
- .utrecht-alert--warning {
176
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
177
- --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
178
- --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
179
- --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
180
- --_utrecht-alert-color: var(--utrecht-alert-warning-color);
181
- }
182
-
183
- .utrecht-alert--error {
184
- --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
185
- --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
186
- --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
187
- --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
188
- --_utrecht-alert-color: var(--utrecht-alert-error-color);
189
- }
190
-
191
121
  /**
192
122
  * @license EUPL-1.2
193
123
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -221,7 +151,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
221
151
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
222
152
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
223
153
  border-radius: var(--utrecht-alert-border-radius, 0);
224
- border-style: solid;
225
154
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
226
155
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
227
156
  display: grid;
@@ -257,14 +186,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
257
186
  -webkit-user-select: none;
258
187
  user-select: none;
259
188
  }
260
- @keyframes utrecht-backdrop-fade-in {
261
- from {
262
- opacity: 0%;
263
- }
264
- to {
265
- opacity: var(--_utrecht-backdrop-opacity);
266
- }
267
- }
268
189
  @media (prefers-reduced-motion: reduce) {
269
190
  .utrecht-alert-dialog::backdrop {
270
191
  --_utrecht-backdrop-fade-in-animation-duration: 0;
@@ -319,24 +240,64 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
319
240
  * Copyright (c) 2020-2022 Gemeente Utrecht
320
241
  * Copyright (c) 2020-2022 Frameless B.V.
321
242
  */
322
- /* stylelint-disable-next-line block-no-empty */
323
- .utrecht-index-char-nav {
324
- --utrecht-button-padding-inline-start: 1ch;
325
- --utrecht-button-padding-inline-end: 1ch;
326
- display: flex;
327
- flex-wrap: wrap;
328
- gap: var(--utrecht-index-char-nav-gap);
329
- margin-block-end: var(--utrecht-index-char-nav-margin-block-end);
330
- 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);
331
260
  }
332
261
 
333
- .utrecht-index-char-nav__link--current {
334
- --utrecht-button-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
335
- --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;
336
265
  }
337
266
 
338
- .utrecht-index-char-nav__link--disabled {
339
- 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);
340
301
  }
341
302
 
342
303
  /**
@@ -372,6 +333,58 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
372
333
  max-inline-size: var(--utrecht-article-max-inline-size);
373
334
  }
374
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
+
375
388
  /**
376
389
  * @license EUPL-1.2
377
390
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -593,86 +606,26 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
593
606
 
594
607
  /**
595
608
  * @license EUPL-1.2
596
- * Copyright (c) 2020-2022 Gemeente Utrecht
597
- * Copyright (c) 2020-2022 Frameless B.V.
609
+ * Copyright (c) 2021 Robbert Broersma
598
610
  */
599
611
  /**
600
612
  * @license EUPL-1.2
601
- * Copyright (c) 2020-2022 Gemeente Utrecht
602
- * Copyright (c) 2020-2022 Frameless B.V.
613
+ * Copyright (c) 2021 Robbert Broersma
603
614
  */
604
- .utrecht-backdrop {
605
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
606
- --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
607
- animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
608
- animation-name: utrecht-backdrop-fade-in;
609
- animation-timing-function: ease-in-out;
610
- background-color: var(--utrecht-backdrop-background-color);
611
- color: var(--utrecht-backdrop-color);
612
- opacity: var(--_utrecht-backdrop-opacity);
613
- -webkit-user-select: none;
614
- user-select: none;
615
- display: block;
616
- inset-block-end: 0;
617
- inset-block-start: 0;
618
- inset-inline-end: 0;
619
- inset-inline-start: 0;
620
- position: absolute;
621
- z-index: var(--utrecht-backdrop-z-index);
622
- }
623
- @keyframes utrecht-backdrop-fade-in {
624
- from {
625
- opacity: 0%;
626
- }
627
- to {
628
- opacity: var(--_utrecht-backdrop-opacity);
629
- }
630
- }
631
- @media (prefers-reduced-motion: reduce) {
632
- .utrecht-backdrop {
633
- --_utrecht-backdrop-fade-in-animation-duration: 0;
634
- }
635
- }
636
- @media (prefers-reduced-transparency: reduce) {
637
- .utrecht-backdrop {
638
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
639
- }
640
- }
641
-
642
- .utrecht-backdrop--reduced-motion {
643
- --_utrecht-backdrop-fade-in-animation-duration: 0;
644
- }
645
-
646
- .utrecht-backdrop--reduced-transparency {
647
- --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
648
- }
649
-
650
- .utrecht-backdrop--viewport {
651
- position: fixed;
652
- }
653
-
654
- /**
655
- * @license EUPL-1.2
656
- * Copyright (c) 2021 Robbert Broersma
657
- */
658
- /**
659
- * @license EUPL-1.2
660
- * Copyright (c) 2021 Robbert Broersma
661
- */
662
- .utrecht-blockquote {
663
- background-color: var(--utrecht-blockquote-background-color);
664
- color: var(--utrecht-blockquote-color);
665
- font-family: var(--utrecht-document-font-family);
666
- font-size: var(--utrecht-blockquote-font-size);
667
- font-style: var(--utrecht-blockquote-font-style);
668
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
669
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
670
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
671
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
672
- padding-block-end: var(--utrecht-blockquote-padding-block-end);
673
- padding-block-start: var(--utrecht-blockquote-padding-block-start);
674
- padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
675
- 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);
676
629
  }
677
630
 
678
631
  .utrecht-blockquote__attribution {
@@ -868,6 +821,48 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
868
821
  margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
869
822
  }
870
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
+ */
871
866
  /**
872
867
  * @license EUPL-1.2
873
868
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -884,13 +879,18 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
884
879
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
885
880
  * Copyright (c) 2021 Gemeente Utrecht
886
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
+ */
887
887
  /**
888
888
  * @license EUPL-1.2
889
889
  * Copyright (c) 2021 Gemeente Utrecht
890
890
  * Copyright (c) 2021 Robbert Broersma
891
891
  */
892
892
  /* stylelint-disable-next-line block-no-empty */
893
- .utrecht-button {
893
+ .utrecht-button-link {
894
894
  /*
895
895
  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
896
896
  The hint color takes priority over the appearance color.
@@ -1122,9 +1122,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1122
1122
  text-transform: var(--utrecht-button-text-transform);
1123
1123
  -webkit-user-select: none;
1124
1124
  user-select: none;
1125
+ cursor: var(--utrecht-action-navigate-cursor, pointer);
1126
+ text-decoration: none;
1125
1127
  }
1126
1128
  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
1127
- .utrecht-button {
1129
+ .utrecht-button-link {
1128
1130
  --_utrecht-button-disabled-border-color: GrayText;
1129
1131
  --_utrecht-button-disabled-color: GrayText;
1130
1132
  /*
@@ -1140,61 +1142,28 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1140
1142
  }
1141
1143
  }
1142
1144
 
1143
- .utrecht-button--distanced {
1144
- margin-block-end: var(--utrecht-button-margin-block-end);
1145
- margin-block-start: var(--utrecht-button-margin-block-start);
1146
- margin-inline-end: var(--utrecht-button-margin-inline-end);
1147
- margin-inline-start: var(--utrecht-button-margin-inline-start);
1148
- }
1149
-
1150
- .utrecht-button--submit {
1151
- /* lower priority specificty than busy and disabled cursor */
1152
- cursor: var(--utrecht-action-submit-cursor, revert);
1153
- }
1154
-
1155
- .utrecht-button--busy {
1156
- cursor: var(--utrecht-action-busy-cursor, wait);
1157
- }
1158
-
1159
- .utrecht-button--pressed {
1160
- background-color: var(--_utrecht-button-pressed-background-color);
1161
- border-color: var(--_utrecht-button-pressed-border-color);
1162
- color: var(--_utrecht-button-pressed-color);
1163
- }
1164
-
1165
- .utrecht-button:disabled,
1166
- .utrecht-button--disabled {
1167
- background-color: var(--_utrecht-button-disabled-background-color);
1168
- border-color: var(--_utrecht-button-disabled-border-color);
1169
- color: var(--_utrecht-button-disabled-color);
1170
- 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);
1171
1149
  }
1172
1150
 
1173
- .utrecht-button--focus-visible {
1174
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1175
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
1176
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1177
- * can combine it with the focus ring box shadow.
1178
- */
1179
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1180
- var(--utrecht-focus-inverse-outline-color, transparent);
1181
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
1182
- outline-color: var(--utrecht-focus-outline-color, revert);
1183
- outline-offset: var(--utrecht-focus-outline-offset, revert);
1184
- outline-style: var(--utrecht-focus-outline-style, revert);
1185
- 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);
1186
1156
  }
1187
1157
 
1188
- .utrecht-button--focus:not(.utrecht-button--disabled) {
1158
+ .utrecht-button-link--focus {
1189
1159
  background-color: var(--_utrecht-button-focus-background-color);
1190
1160
  border-color: var(--_utrecht-button-focus-border-color);
1191
1161
  color: var(--_utrecht-button-focus-color);
1192
1162
  scale: var(--utrecht-button-focus-scale, 1);
1193
1163
  }
1194
1164
 
1195
- .utrecht-button:focus {
1196
- /* Show focus ring even for disabled :focus-visible buttons. *
1197
- /* For example: <button disabled tabindex="0"> */
1165
+ .utrecht-button-link--focus-visible {
1166
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1198
1167
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1199
1168
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1200
1169
  * can combine it with the focus ring box shadow.
@@ -1208,11 +1177,20 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1208
1177
  outline-width: var(--utrecht-focus-outline-width, revert);
1209
1178
  }
1210
1179
 
1211
- .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 {
1212
1188
  background-color: var(--_utrecht-button-focus-background-color);
1213
1189
  border-color: var(--_utrecht-button-focus-border-color);
1214
1190
  color: var(--_utrecht-button-focus-color);
1215
1191
  scale: var(--utrecht-button-focus-scale, 1);
1192
+ }
1193
+ .utrecht-button-link--html-a:focus-visible {
1216
1194
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1217
1195
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
1218
1196
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
@@ -1226,31 +1204,19 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1226
1204
  outline-style: var(--utrecht-focus-outline-style, revert);
1227
1205
  outline-width: var(--utrecht-focus-outline-width, revert);
1228
1206
  }
1229
-
1230
- /* override the `:focus` selector above */
1231
- /* stylelint-disable-next-line no-descending-specificity */
1232
- .utrecht-button:focus:not(:focus-visible) {
1233
- /* undo focus ring */
1234
- box-shadow: none;
1235
- outline-style: revert;
1236
- }
1237
-
1238
- .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
1239
- .utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
1207
+ .utrecht-button-link--html-a:hover {
1240
1208
  background-color: var(--_utrecht-button-hover-background-color);
1241
1209
  border-color: var(--_utrecht-button-hover-border-color);
1242
1210
  color: var(--_utrecht-button-hover-color);
1243
1211
  scale: var(--utrecht-button-hover-scale, 1);
1244
1212
  }
1245
-
1246
- .utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
1247
- .utrecht-button--active {
1213
+ .utrecht-button-link--html-a:active {
1248
1214
  background-color: var(--_utrecht-button-active-background-color);
1249
1215
  border-color: var(--_utrecht-button-active-border-color);
1250
1216
  color: var(--_utrecht-button-active-color);
1251
1217
  }
1252
1218
 
1253
- .utrecht-button--primary-action {
1219
+ .utrecht-button-link--primary-action {
1254
1220
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
1255
1221
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
1256
1222
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
@@ -1275,7 +1241,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1275
1241
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
1276
1242
  }
1277
1243
 
1278
- .utrecht-button--secondary-action {
1244
+ .utrecht-button-link--secondary-action {
1279
1245
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
1280
1246
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
1281
1247
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
@@ -1300,7 +1266,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1300
1266
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
1301
1267
  }
1302
1268
 
1303
- .utrecht-button--subtle {
1269
+ .utrecht-button-link--subtle {
1304
1270
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
1305
1271
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
1306
1272
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
@@ -1325,947 +1291,824 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1325
1291
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
1326
1292
  }
1327
1293
 
1328
- .utrecht-button--primary-action.utrecht-button--danger {
1329
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
1330
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
1331
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
1332
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
1333
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
1334
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
1335
- --_utrecht-button-hint-disabled-background-color: var(
1336
- --utrecht-button-primary-action-danger-disabled-background-color
1337
- );
1338
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
1339
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
1340
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
1341
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
1342
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
1343
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
1344
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
1345
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
1346
- --_utrecht-button-hint-pressed-background-color: var(
1347
- --utrecht-button-primary-action-danger-pressed-background-color
1348
- );
1349
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
1350
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
1351
- }
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.
1352
1320
 
1353
- .utrecht-button--primary-action.utrecht-button--ready {
1354
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
1355
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
1356
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
1357
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
1358
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
1359
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
1360
- --_utrecht-button-hint-disabled-background-color: var(
1361
- --utrecht-button-primary-action-ready-disabled-background-color
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))
1362
1327
  );
1363
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
1364
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
1365
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
1366
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
1367
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
1368
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
1369
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
1370
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
1371
- --_utrecht-button-hint-pressed-background-color: var(
1372
- --utrecht-button-primary-action-ready-pressed-background-color
1328
+ --_utrecht-button-color: var(
1329
+ --_utrecht-button-hint-color,
1330
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
1373
1331
  );
1374
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
1375
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
1376
- }
1377
-
1378
- .utrecht-button--primary-action.utrecht-button--warning {
1379
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
1380
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
1381
- --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
1382
- --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
1383
- --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
1384
- --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
1385
- --_utrecht-button-hint-disabled-background-color: var(
1386
- --utrecht-button-primary-action-warning-disabled-background-color
1387
- );
1388
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
1389
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
1390
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
1391
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
1392
- --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
1393
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
1394
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
1395
- --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
1396
- --_utrecht-button-hint-pressed-background-color: var(
1397
- --utrecht-button-primary-action-warning-pressed-background-color
1398
- );
1399
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
1400
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
1401
- }
1402
-
1403
- .utrecht-button--secondary-action.utrecht-button--danger {
1404
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
1405
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
1406
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
1407
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
1408
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
1409
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
1410
- --_utrecht-button-hint-disabled-background-color: var(
1411
- --utrecht-button-secondary-action-danger-disabled-background-color
1412
- );
1413
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
1414
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
1415
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
1416
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
1417
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
1418
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
1419
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
1420
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
1421
- --_utrecht-button-hint-pressed-background-color: var(
1422
- --utrecht-button-secondary-action-danger-pressed-background-color
1423
- );
1424
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
1425
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
1426
- }
1427
-
1428
- .utrecht-button--secondary-action.utrecht-button--ready {
1429
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
1430
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
1431
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
1432
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
1433
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
1434
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
1435
- --_utrecht-button-hint-disabled-background-color: var(
1436
- --utrecht-button-secondary-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))
1437
1335
  );
1438
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
1439
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
1440
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
1441
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
1442
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
1443
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
1444
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
1445
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
1446
- --_utrecht-button-hint-pressed-background-color: var(
1447
- --utrecht-button-secondary-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
+ )
1448
1348
  );
1449
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
1450
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
1451
- }
1452
-
1453
- .utrecht-button--secondary-action.utrecht-button--warning {
1454
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
1455
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
1456
- --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
1457
- --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
1458
- --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
1459
- --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
1460
- --_utrecht-button-hint-disabled-background-color: var(
1461
- --utrecht-button-secondary-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
+ )
1462
1355
  );
1463
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
1464
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
1465
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
1466
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
1467
- --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
1468
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
1469
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
1470
- --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
1471
- --_utrecht-button-hint-pressed-background-color: var(
1472
- --utrecht-button-secondary-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
+ )
1473
1362
  );
1474
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
1475
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
1476
- }
1477
-
1478
- .utrecht-button--subtle.utrecht-button--danger {
1479
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
1480
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
1481
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
1482
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
1483
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
1484
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
1485
- --_utrecht-button-hint-disabled-background-color: var(
1486
- --utrecht-button-subtle-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)))
1487
1366
  );
1488
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
1489
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
1490
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
1491
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
1492
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
1493
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
1494
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
1495
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
1496
- --_utrecht-button-hint-pressed-background-color: var(
1497
- --utrecht-button-subtle-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
+ )
1498
1379
  );
1499
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
1500
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
1501
- }
1502
-
1503
- .utrecht-button--subtle.utrecht-button--ready {
1504
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
1505
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
1506
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
1507
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
1508
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
1509
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
1510
- --_utrecht-button-hint-disabled-background-color: var(
1511
- --utrecht-button-subtle-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
+ )
1512
1392
  );
1513
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
1514
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
1515
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
1516
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
1517
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
1518
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
1519
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
1520
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
1521
- --_utrecht-button-hint-pressed-background-color: var(
1522
- --utrecht-button-subtle-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
+ )
1523
1402
  );
1524
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
1525
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
1526
- }
1527
-
1528
- .utrecht-button--subtle.utrecht-button--warning {
1529
- --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
1530
- --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
1531
- --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
1532
- --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
1533
- --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
1534
- --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
1535
- --_utrecht-button-hint-disabled-background-color: var(
1536
- --utrecht-button-subtle-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
+ )
1537
1415
  );
1538
- --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
1539
- --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
1540
- --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
1541
- --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
1542
- --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
1543
- --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
1544
- --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
1545
- --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
1546
- --_utrecht-button-hint-pressed-background-color: var(
1547
- --utrecht-button-subtle-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
+ )
1548
1428
  );
1549
- --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
1550
- --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
1551
- }
1552
-
1553
- /**
1554
- * @license EUPL-1.2
1555
- * Copyright (c) 2022 Frameless B.V.
1556
- */
1557
- /**
1558
- * @license EUPL-1.2
1559
- * Copyright (c) 2022 Frameless B.V.
1560
- */
1561
- .utrecht-button-group {
1562
- align-items: baseline;
1563
- background-color: var(--utrecht-button-group-background-color);
1564
- display: flex;
1565
- flex-wrap: wrap;
1566
- gap: var(--utrecht-button-group-inline-gap, 1em);
1567
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
1568
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
1569
- min-block-size: var(--utrecht-button-block-size);
1570
- padding-block-end: var(--utrecht-button-group-padding-block-end);
1571
- padding-block-start: var(--utrecht-button-group-padding-block-start);
1572
- }
1573
-
1574
- .utrecht-button-group--distanced {
1575
- --utrecht-space-around: 1;
1576
- }
1577
-
1578
- .utrecht-button-group__link-button--row,
1579
- .utrecht-button-group--row .utrecht-link-button,
1580
- .utrecht-button-group:not(.utrecht-button-group--column) .utrecht-link-button {
1581
- --utrecht-button-padding-inline-end: 0;
1582
- --utrecht-button-padding-inline-start: 0;
1583
- }
1584
-
1585
- .utrecht-button-group--column {
1586
- flex-direction: column;
1587
- gap: var(--utrecht-button-group-block-gap, 1em);
1588
- }
1589
-
1590
- /**
1591
- * @license EUPL-1.2
1592
- * Copyright (c) 2021-2022 Gemeente Utrecht
1593
- * Copyright (c) 2021-2022 Frameless B.V.
1594
- */
1595
- .utrecht-calendar {
1596
- background-color: var(--utrecht-calendar-background-color);
1597
- inline-size: fit-content;
1598
- }
1599
-
1600
- .utrecht-calendar__table {
1601
- margin-inline: auto;
1602
- padding-block-end: var(--utrecht-calendar-table-padding-block-end);
1603
- padding-block-start: var(--utrecht-calendar-table-padding-block-start);
1604
- }
1605
-
1606
- .utrecht-calendar__table-weeks-item {
1607
- inline-size: var(--utrecht-calendar-table-weeks-item-width);
1608
- line-height: var(--utrecht-calendar-table-weeks-item-line-height, inherit);
1609
- padding-block-end: var(--utrecht-calendar-table-weeks-item-padding-block-end);
1610
- padding-block-start: var(--utrecht-calendar-table-weeks-item-padding-block-start);
1611
- }
1612
-
1613
- .utrecht-calendar__table-days-item-day {
1614
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-border-color);
1615
- --utrecht-calendar-button-border-width: var(--utrecht-calendar-table-days-item-day-border-width);
1616
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-color);
1617
- block-size: var(--utrecht-calendar-table-days-item-day-size);
1618
- inline-size: var(--utrecht-calendar-table-days-item-day-size);
1619
- }
1620
-
1621
- .utrecht-calendar__table-days-item-day:hover {
1622
- --utrecht-calendar-button-hover-background-color: var(--utrecht-calendar-table-days-item-day-hover-background-color);
1623
- --utrecht-calendar-button-hover-border-color: var(--utrecht-calendar-table-days-item-day-hover-border-color);
1624
- --utrecht-calendar-button-hover-color: var(--utrecht-calendar-table-days-item-day-hover-color);
1625
- }
1626
-
1627
- .utrecht-calendar__table-days-item-day:focus {
1628
- --utrecht-calendar-button-focus-background-color: var(--utrecht-calendar-table-days-item-day-focus-background-color);
1629
- --utrecht-calendar-button-focus-border-color: var(--utrecht-calendar-table-days-item-day-focus-border-color);
1630
- --utrecht-calendar-button-focus-color: var(--utrecht-calendar-table-days-item-day-focus-color);
1631
- }
1632
-
1633
- .utrecht-calendar__table-days-item-day:active {
1634
- --utrecht-calendar-button-active-background-color: var(
1635
- --utrecht-calendar-table-days-item-day-active-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
+ )
1636
1438
  );
1637
- --utrecht-calendar-button-active-border-color: var(--utrecht-calendar-table-days-item-day-active-border-color);
1638
- --utrecht-calendar-button-active-color: var(--utrecht-calendar-table-days-item-day-active-color);
1639
- }
1640
-
1641
- .utrecht-calendar__table-days-item-day:disabled {
1642
- --utrecht-calendar-button-disabled-background-color: var(
1643
- --utrecht-calendar-table-days-item-day-disabled-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
+ )
1644
1451
  );
1645
- --utrecht-calendar-button-disabled-border-color: var(--utrecht-calendar-table-days-item-day-disabled-border-color);
1646
- --utrecht-calendar-button-disabled-color: var(--utrecht-calendar-table-days-item-day-disabled-color);
1647
- }
1648
-
1649
- .utrecht-calendar__table-days-item-day--out-of-the-month {
1650
- --utrecht-calendar-button-background-color: var(
1651
- --utrecht-calendar-table-days-item-day-out-of-the-month-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
+ )
1652
1464
  );
1653
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-border-color);
1654
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-out-of-the-month-color);
1655
- }
1656
-
1657
- .utrecht-calendar__table-days-item-day--is-today {
1658
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-is-today-font-weight);
1659
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-is-today-background-color);
1660
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-is-today-border-color);
1661
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-is-today-color);
1662
- }
1663
-
1664
- .utrecht-calendar__table-days-item-day--emphasis {
1665
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-emphasis-font-weight);
1666
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-emphasis-background-color);
1667
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-emphasis-border-color);
1668
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-emphasis-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
+ )
1474
+ );
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
+ )
1487
+ );
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
+ )
1500
+ );
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;
1669
1548
  }
1670
-
1671
- .utrecht-calendar__table-days-item-day--selected {
1672
- --utrecht-calendar-button-font-weight: var(--utrecht-calendar-table-days-item-day-selected-font-weight);
1673
- --utrecht-calendar-button-background-color: var(--utrecht-calendar-table-days-item-day-selected-background-color);
1674
- --utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-selected-border-color);
1675
- --utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-selected-color);
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
+ }
1676
1564
  }
1677
1565
 
1678
- .utrecht-calendar__navigation {
1679
- background-color: var(--utrecht-calendar-navigation-background-color);
1680
- color: var(--utrecht-calendar-navigation-color);
1681
- padding-block-end: var(--utrecht-calendar-navigation-padding-block-end);
1682
- padding-block-start: var(--utrecht-calendar-navigation-padding-block-start);
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);
1683
1571
  }
1684
1572
 
1685
- .utrecht-calendar__navigation-label {
1686
- color: var(--utrecht-calendar-navigation-label-color);
1687
- font-size: var(--utrecht-calendar-navigation-label-font-size);
1688
- text-align: center;
1573
+ .utrecht-button--submit {
1574
+ /* lower priority specificty than busy and disabled cursor */
1575
+ cursor: var(--utrecht-action-submit-cursor, revert);
1689
1576
  }
1690
1577
 
1691
- .utrecht-calendar__navigation-buttons {
1692
- align-items: center;
1693
- display: flex;
1694
- flex-grow: 1;
1695
- justify-content: space-between;
1578
+ .utrecht-button--busy {
1579
+ cursor: var(--utrecht-action-busy-cursor, wait);
1696
1580
  }
1697
1581
 
1698
- .utrecht-calendar__button {
1699
- --utrecht-button-subtle-color: var(--utrecht-calendar-button-color, currentColor);
1700
- --utrecht-button-subtle-background-color: var(--utrecht-calendar-button-background-color, transparent);
1701
- --utrecht-button-subtle-border-color: var(--utrecht-calendar-button-border-color, transparent);
1702
- --utrecht-button-subtle-border-width: var(--utrecht-calendar-button-border-width);
1703
- --utrecht-button-font-weight: var(--utrecht-calendar-button-font-weight);
1704
- --utrecht-button-subtle-focus-background-color: var(--utrecht-calendar-button-focus-background-color);
1705
- --utrecht-button-subtle-focus-border-color: var(--utrecht-calendar-button-focus-border-color);
1706
- --utrecht-button-subtle-focus-color: var(--utrecht-calendar-button-focus-color);
1707
- --utrecht-button-subtle-active-background-color: var(--utrecht-calendar-button-active-background-color);
1708
- --utrecht-button-subtle-active-border-color: var(--utrecht-calendar-button-active-border-color);
1709
- --utrecht-button-subtle-active-color: var(--utrecht-calendar-button-active-color);
1710
- --utrecht-button-subtle-hover-background-color: var(--utrecht-calendar-button-hover-background-color);
1711
- --utrecht-button-subtle-hover-border-color: var(--utrecht-calendar-button-hover-border-color, transparent);
1712
- --utrecht-button-subtle-hover-color: var(--utrecht-calendar-button-hover-color);
1713
- --utrecht-button-subtle-disabled-background-color: var(--utrecht-calendar-button-disabled-background-color);
1714
- --utrecht-button-subtle-disabled-border-color: var(--utrecht-calendar-button-disabled-border-color);
1715
- --utrecht-button-subtle-disabled-color: var(--utrecht-calendar-button-disabled-color);
1716
- --utrecht-button-padding-block-end: var(--utrecht-calendar-button-padding-block-end, 0);
1717
- --utrecht-button-padding-block-start: var(--utrecht-calendar-button-padding-block-start, 0);
1718
- --utrecht-button-padding-inline-end: var(--utrecht-calendar-button-padding-inline-end, 0);
1719
- --utrecht-button-padding-inline-start: var(--utrecht-calendar-button-padding-inline-start, 0);
1720
- cursor: pointer;
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);
1721
1586
  }
1722
1587
 
1723
- .utrecht-calendar__icon {
1724
- block-size: var(--utrecht-calendar-icon-size);
1725
- inline-size: var(--utrecht-calendar-icon-size);
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);
1726
1594
  }
1727
1595
 
1728
- /**
1729
- * @license EUPL-1.2
1730
- * Copyright (c) 2020-2022 Gemeente Utrecht
1731
- * Copyright (c) 2020-2022 Frameless B.V.
1732
- */
1733
- /**
1734
- * @license EUPL-1.2
1735
- * Copyright (c) 2020-2022 Gemeente Utrecht
1736
- * Copyright (c) 2020-2022 Frameless B.V.
1737
- */
1738
- .utrecht-code {
1739
- /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
1740
- /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
1741
- background-color: var(--utrecht-code-background-color);
1742
- color: var(--utrecht-code-color);
1743
- font-family: var(--utrecht-code-font-family, monospace), monospace;
1744
- font-size: var(--utrecht-code-font-size, inherit);
1745
- font-variant-ligatures: none;
1746
- line-height: var(--utrecht-code-line-height);
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);
1747
1609
  }
1748
1610
 
1749
- /**
1750
- * @license EUPL-1.2
1751
- * Copyright (c) 2020-2022 Gemeente Utrecht
1752
- * Copyright (c) 2020-2022 Frameless B.V.
1753
- */
1754
- /**
1755
- * @license EUPL-1.2
1756
- * Copyright (c) 2020-2022 Gemeente Utrecht
1757
- * Copyright (c) 2020-2022 Frameless B.V.
1758
- */
1759
- /**
1760
- * @license EUPL-1.2
1761
- * Copyright (c) 2020-2022 Gemeente Utrecht
1762
- * Copyright (c) 2020-2022 Frameless B.V.
1763
- */
1764
- .utrecht-code-block {
1765
- /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
1766
- /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
1767
- background-color: var(--utrecht-code-background-color);
1768
- color: var(--utrecht-code-color);
1769
- font-family: var(--utrecht-code-font-family, monospace), monospace;
1770
- font-size: var(--utrecht-code-font-size, inherit);
1771
- font-variant-ligatures: none;
1772
- line-height: var(--utrecht-code-line-height);
1773
- --utrecht-code-color: var(--utrecht-code-block-color, inherit);
1774
- --utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
1775
- --utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
1776
- --utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
1777
- --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
1778
- background-color: var(--utrecht-code-block-background-color);
1779
- display: block;
1780
- font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size, inherit));
1781
- line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
1782
- margin-block-end: var(--utrecht-code-block-margin-block-end);
1783
- margin-block-start: var(--utrecht-code-block-margin-block-start);
1784
- margin-inline-end: var(--utrecht-code-block-margin-inline-end);
1785
- margin-inline-start: var(--utrecht-code-block-margin-inline-start);
1786
- padding-block-end: var(--utrecht-code-block-padding-block-end);
1787
- padding-block-start: var(--utrecht-code-block-padding-block-start);
1788
- padding-inline-end: var(--utrecht-code-block-padding-inline-end);
1789
- padding-inline-start: var(--utrecht-code-block-padding-inline-start);
1790
- white-space: pre;
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);
1791
1616
  }
1792
1617
 
1793
- .utrecht-code-block__content {
1794
- /* reset effect of <code> */
1795
- font-family: inherit;
1796
- font-size: inherit;
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);
1797
1632
  }
1798
1633
 
1799
- /**
1800
- * @license EUPL-1.2
1801
- * Copyright (c) 2021-2022 Gemeente Utrecht
1802
- * Copyright (c) 2021-2022 Frameless B.V.
1803
- */
1804
- /**
1805
- * @license EUPL-1.2
1806
- * Copyright (c) 2021-2022 Gemeente Utrecht
1807
- * Copyright (c) 2021-2022 Frameless B.V.
1808
- */
1809
- .utrecht-color-sample {
1810
- background-color: var(--utrecht-color-sample-background-color, currentColor);
1811
- block-size: var(--utrecht-color-sample-block-size, 2em);
1812
- border-color: var(--utrecht-color-sample-border-color, var(--utrecht-color-sample-default-border-color));
1813
- border-radius: var(--utrecht-color-sample-border-radius, 0);
1814
- border-style: solid;
1815
- border-width: var(--utrecht-color-sample-border-width, 0);
1816
- box-sizing: border-box;
1817
- display: inline-block;
1818
- inline-size: var(--utrecht-color-sample-inline-size, 2em);
1819
- -webkit-print-color-adjust: exact;
1820
- print-color-adjust: exact;
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);
1821
1651
  }
1822
- @media (forced-colors: active) {
1823
- .utrecht-color-sample {
1824
- forced-color-adjust: none;
1825
- }
1652
+
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;
1826
1659
  }
1827
- @media (forced-colors: active) and (prefers-color-scheme: dark) {
1828
- .utrecht-color-sample {
1829
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-dark-border-color, #000);
1830
- }
1660
+
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);
1831
1667
  }
1832
- @media (forced-colors: active) and (prefers-color-scheme: light) {
1833
- .utrecht-color-sample {
1834
- --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
1835
- }
1668
+
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);
1836
1674
  }
1837
1675
 
1838
- /**
1839
- * @license EUPL-1.2
1840
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1841
- * Copyright (c) 2021 Gemeente Utrecht
1842
- */
1843
- /**
1844
- * @license EUPL-1.2
1845
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1846
- * Copyright (c) 2021 Gemeente Utrecht
1847
- */
1848
- /**
1849
- * @license EUPL-1.2
1850
- * Copyright (c) 2021 Gemeente Utrecht
1851
- * Copyright (c) 2021 Robbert Broersma
1852
- */
1853
- /* stylelint-disable-next-line block-no-empty */
1854
- /**
1855
- * @license EUPL-1.2
1856
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1857
- * Copyright (c) 2021 Gemeente Utrecht
1858
- */
1859
- /**
1860
- * @license EUPL-1.2
1861
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1862
- * Copyright (c) 2021 Gemeente Utrecht
1863
- */
1864
- /**
1865
- * @license EUPL-1.2
1866
- * Copyright (c) 2021 Gemeente Utrecht
1867
- * Copyright (c) 2021 Robbert Broersma
1868
- */
1869
- /* stylelint-disable-next-line block-no-empty */
1870
- .utrecht-button-link {
1871
- /*
1872
- `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
1873
- The hint color takes priority over the appearance color.
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
1687
+ );
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);
1699
+ }
1874
1700
 
1875
- `--_utrecht-button-appearance` is the internal prefix for the appearance
1876
- (primary-action, secondary-action or subtle), it is not an API.
1877
- */
1878
- --_utrecht-button-background-color: var(
1879
- --_utrecht-button-hint-background-color,
1880
- var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-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
1881
1712
  );
1882
- --_utrecht-button-color: var(
1883
- --_utrecht-button-hint-color,
1884
- var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
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);
1724
+ }
1725
+
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
1885
1737
  );
1886
- --_utrecht-button-border-color: var(
1887
- --_utrecht-button-hint-border-color,
1888
- var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
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);
1749
+ }
1750
+
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
1889
1760
  );
1890
- --_utrecht-button-border-bottom-color: var(
1891
- --_utrecht-button-hint-border-bottom-color,
1892
- var(
1893
- --_utrecht-button-hint-border-color,
1894
- var(
1895
- --_utrecht-button-appearance-border-bottom-color,
1896
- var(
1897
- --_utrecht-button-appearance-border-color,
1898
- var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
1899
- )
1900
- )
1901
- )
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
1902
1771
  );
1903
- --_utrecht-button-disabled-background-color: var(
1904
- --_utrecht-button-hint-disabled-background-color,
1905
- var(
1906
- --_utrecht-button-appearance-disabled-background-color,
1907
- var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
1908
- )
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);
1774
+ }
1775
+
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
1909
1785
  );
1910
- --_utrecht-button-disabled-border-color: var(
1911
- --_utrecht-button-hint-disabled-border-color,
1912
- var(
1913
- --_utrecht-button-appearance-disabled-border-color,
1914
- var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
1915
- )
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
1916
1796
  );
1917
- --_utrecht-button-disabled-color: var(
1918
- --_utrecht-button-hint-disabled-color,
1919
- var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
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);
1799
+ }
1800
+
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
1920
1810
  );
1921
- --_utrecht-button-pressed-background-color: var(
1922
- --_utrecht-button-hint-pressed-background-color,
1923
- var(
1924
- --_utrecht-button-hint-background-color,
1925
- var(
1926
- --_utrecht-button-appearance-pressed-background-color,
1927
- var(
1928
- --_utrecht-button-appearance-background-color,
1929
- var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
1930
- )
1931
- )
1932
- )
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
1933
1821
  );
1934
- --_utrecht-button-pressed-border-color: var(
1935
- --_utrecht-button-hint-pressed-border-color,
1936
- var(
1937
- --_utrecht-button-hint-border-color,
1938
- var(
1939
- --_utrecht-button-appearance-pressed-border-color,
1940
- var(
1941
- --_utrecht-button-appearance-border-color,
1942
- var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
1943
- )
1944
- )
1945
- )
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);
1824
+ }
1825
+
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
1946
1835
  );
1947
- --_utrecht-button-pressed-color: var(
1948
- --_utrecht-button-hint-pressed-color,
1949
- var(
1950
- --_utrecht-button-hint-color,
1951
- var(
1952
- --_utrecht-button-appearance-pressed-color,
1953
- var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
1954
- )
1955
- )
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
1956
1846
  );
1957
- --_utrecht-button-focus-background-color: var(
1958
- --_utrecht-button-hint-focus-background-color,
1959
- var(
1960
- --_utrecht-button-hint-background-color,
1961
- var(
1962
- --_utrecht-button-appearance-focus-background-color,
1963
- var(
1964
- --_utrecht-button-appearance-background-color,
1965
- var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
1966
- )
1967
- )
1968
- )
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);
1849
+ }
1850
+
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
1969
1860
  );
1970
- --_utrecht-button-focus-border-color: var(
1971
- --_utrecht-button-hint-focus-border-color,
1972
- var(
1973
- --_utrecht-button-hint-border-color,
1974
- var(
1975
- --_utrecht-button-appearance-focus-border-color,
1976
- var(
1977
- --_utrecht-button-appearance-border-color,
1978
- var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
1979
- )
1980
- )
1981
- )
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
1982
1871
  );
1983
- --_utrecht-button-focus-color: var(
1984
- --_utrecht-button-hint-focus-color,
1985
- var(
1986
- --_utrecht-button-hint-color,
1987
- var(
1988
- --_utrecht-button-appearance-focus-color,
1989
- var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
1990
- )
1991
- )
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);
1874
+ }
1875
+
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
1992
1885
  );
1993
- --_utrecht-button-hover-background-color: var(
1994
- --_utrecht-button-hint-hover-background-color,
1995
- var(
1996
- --_utrecht-button-hint-background-color,
1997
- var(
1998
- --_utrecht-button-appearance-hover-background-color,
1999
- var(
2000
- --_utrecht-button-appearance-background-color,
2001
- var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
2002
- )
2003
- )
2004
- )
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
2005
1896
  );
2006
- --_utrecht-button-hover-border-color: var(
2007
- --_utrecht-button-hint-hover-border-color,
2008
- var(
2009
- --_utrecht-button-hint-border-color,
2010
- var(
2011
- --_utrecht-button-appearance-hover-border-color,
2012
- var(
2013
- --_utrecht-button-appearance-border-color,
2014
- var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
2015
- )
2016
- )
2017
- )
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);
1899
+ }
1900
+
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
2018
1910
  );
2019
- --_utrecht-button-hover-color: var(
2020
- --_utrecht-button-hint-hover-color,
2021
- var(
2022
- --_utrecht-button-hint-color,
2023
- var(
2024
- --_utrecht-button-appearance-hover-color,
2025
- var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
2026
- )
2027
- )
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
2028
1921
  );
2029
- --_utrecht-button-active-background-color: var(
2030
- --_utrecht-button-hint-active-background-color,
2031
- var(
2032
- --_utrecht-button-hint-background-color,
2033
- var(
2034
- --_utrecht-button-appearance-active-background-color,
2035
- var(
2036
- --_utrecht-button-appearance-background-color,
2037
- var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
2038
- )
2039
- )
2040
- )
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);
1924
+ }
1925
+
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
2041
1935
  );
2042
- --_utrecht-button-active-border-color: var(
2043
- --_utrecht-button-hint-active-border-color,
2044
- var(
2045
- --_utrecht-button-hint-border-color,
2046
- var(
2047
- --_utrecht-button-appearance-active-border-color,
2048
- var(
2049
- --_utrecht-button-appearance-border-color,
2050
- var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
2051
- )
2052
- )
2053
- )
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
2054
1946
  );
2055
- --_utrecht-button-active-color: var(
2056
- --_utrecht-button-hint-active-color,
2057
- var(
2058
- --_utrecht-button-hint-color,
2059
- var(
2060
- --_utrecht-button-appearance-active-color,
2061
- var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
2062
- )
2063
- )
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);
1949
+ }
1950
+
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
2064
1960
  );
2065
- --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
2066
- --_utrecht-button-border-block-end-width: var(
2067
- --utrecht-button-border-bottom-width,
2068
- var(--_utrecht-button-border-width, 0)
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
2069
1971
  );
2070
- --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2071
- align-items: center;
2072
- background-color: var(--_utrecht-button-background-color);
2073
- block-size: fit-content;
2074
- border-block-end-color: var(--_utrecht-button-border-bottom-color);
2075
- border-block-end-width: var(--_utrecht-button-border-block-end-width);
2076
- border-color: var(--_utrecht-button-border-color);
2077
- border-radius: var(--utrecht-button-border-radius);
2078
- border-style: solid;
2079
- border-width: var(--_utrecht-button-border-width);
2080
- box-sizing: border-box;
2081
- color: var(--_utrecht-button-color);
2082
- cursor: var(--utrecht-action-activate-cursor, revert);
2083
- display: inline-flex;
2084
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
2085
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
2086
- font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
2087
- gap: var(--utrecht-button-icon-gap);
2088
- inline-size: var(--utrecht-button-inline-size, auto);
2089
- justify-content: center;
2090
- line-height: var(--utrecht-button-line-height);
2091
- max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
2092
- min-block-size: var(--utrecht-button-min-block-size, 44px);
2093
- min-inline-size: var(--utrecht-button-min-inline-size, 44px);
2094
- padding-block-end: var(--utrecht-button-padding-block-end);
2095
- padding-block-start: var(--utrecht-button-padding-block-start);
2096
- padding-inline-end: var(--utrecht-button-padding-inline-end);
2097
- padding-inline-start: var(--utrecht-button-padding-inline-start);
2098
- scale: 1;
2099
- text-transform: var(--utrecht-button-text-transform);
2100
- -webkit-user-select: none;
2101
- user-select: none;
2102
- cursor: var(--utrecht-action-navigate-cursor, pointer);
2103
- text-decoration: none;
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);
2104
1974
  }
2105
- @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
2106
- .utrecht-button-link {
2107
- --_utrecht-button-disabled-border-color: GrayText;
2108
- --_utrecht-button-disabled-color: GrayText;
2109
- /*
2110
- * `<button>` has these styles by default, but other elements styles as button do not:
2111
- *
2112
- * - `<div role="button">` needs this.
2113
- * - `<a role="button">` needs this.
2114
- */
2115
- background-color: ButtonFace;
2116
- border-color: buttonborder;
2117
- color: ButtonText;
2118
- /* TODO: Find a way to express the `pressed` state */
2119
- }
1975
+
1976
+ /**
1977
+ * @license EUPL-1.2
1978
+ * Copyright (c) 2021-2022 Gemeente Utrecht
1979
+ * Copyright (c) 2021-2022 Frameless B.V.
1980
+ */
1981
+ .utrecht-calendar {
1982
+ background-color: var(--utrecht-calendar-background-color);
1983
+ inline-size: fit-content;
2120
1984
  }
2121
1985
 
2122
- .utrecht-button-link--active {
2123
- background-color: var(--_utrecht-button-active-background-color);
2124
- border-color: var(--_utrecht-button-active-border-color);
2125
- color: var(--_utrecht-button-active-color);
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);
2126
1990
  }
2127
1991
 
2128
- .utrecht-button-link--hover {
2129
- background-color: var(--_utrecht-button-hover-background-color);
2130
- border-color: var(--_utrecht-button-hover-border-color);
2131
- color: var(--_utrecht-button-hover-color);
2132
- scale: var(--utrecht-button-hover-scale, 1);
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);
2133
1997
  }
2134
1998
 
2135
- .utrecht-button-link--focus {
2136
- background-color: var(--_utrecht-button-focus-background-color);
2137
- border-color: var(--_utrecht-button-focus-border-color);
2138
- color: var(--_utrecht-button-focus-color);
2139
- scale: var(--utrecht-button-focus-scale, 1);
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);
2140
2005
  }
2141
2006
 
2142
- .utrecht-button-link--focus-visible {
2143
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
2144
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2145
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2146
- * can combine it with the focus ring box shadow.
2147
- */
2148
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2149
- var(--utrecht-focus-inverse-outline-color, transparent);
2150
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2151
- outline-color: var(--utrecht-focus-outline-color, revert);
2152
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2153
- outline-style: var(--utrecht-focus-outline-style, revert);
2154
- outline-width: var(--utrecht-focus-outline-width, revert);
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);
2155
2011
  }
2156
2012
 
2157
- .utrecht-button-link--placeholder {
2158
- background-color: var(--_utrecht-button-disabled-background-color);
2159
- border-color: var(--_utrecht-button-disabled-border-color);
2160
- color: var(--_utrecht-button-disabled-color);
2161
- cursor: var(--utrecht-action-disabled-cursor, not-allowed);
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
2022
+ );
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
2030
+ );
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
2038
+ );
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);
2162
2048
  }
2163
2049
 
2164
- .utrecht-button-link--html-a:focus {
2165
- background-color: var(--_utrecht-button-focus-background-color);
2166
- border-color: var(--_utrecht-button-focus-border-color);
2167
- color: var(--_utrecht-button-focus-color);
2168
- scale: var(--utrecht-button-focus-scale, 1);
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);
2169
2055
  }
2170
- .utrecht-button-link--html-a:focus-visible {
2171
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
2172
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
2173
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
2174
- * can combine it with the focus ring box shadow.
2175
- */
2176
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2177
- var(--utrecht-focus-inverse-outline-color, transparent);
2178
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
2179
- outline-color: var(--utrecht-focus-outline-color, revert);
2180
- outline-offset: var(--utrecht-focus-outline-offset, revert);
2181
- outline-style: var(--utrecht-focus-outline-style, revert);
2182
- outline-width: var(--utrecht-focus-outline-width, revert);
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);
2183
2062
  }
2184
- .utrecht-button-link--html-a:hover {
2185
- background-color: var(--_utrecht-button-hover-background-color);
2186
- border-color: var(--_utrecht-button-hover-border-color);
2187
- color: var(--_utrecht-button-hover-color);
2188
- scale: var(--utrecht-button-hover-scale, 1);
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);
2189
2069
  }
2190
- .utrecht-button-link--html-a:active {
2191
- background-color: var(--_utrecht-button-active-background-color);
2192
- border-color: var(--_utrecht-button-active-border-color);
2193
- color: var(--_utrecht-button-active-color);
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;
2194
2075
  }
2195
2076
 
2196
- .utrecht-button-link--primary-action {
2197
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
2198
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
2199
- --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
2200
- --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
2201
- --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
2202
- --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
2203
- --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
2204
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
2205
- --_utrecht-button-appearance-disabled-background-color: var(
2206
- --utrecht-button-primary-action-disabled-background-color
2207
- );
2208
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
2209
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
2210
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
2211
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
2212
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
2213
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
2214
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
2215
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
2216
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
2217
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
2218
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
2077
+ .utrecht-calendar__navigation-buttons {
2078
+ align-items: center;
2079
+ display: flex;
2080
+ flex-grow: 1;
2081
+ justify-content: space-between;
2219
2082
  }
2220
2083
 
2221
- .utrecht-button-link--secondary-action {
2222
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
2223
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
2224
- --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
2225
- --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
2226
- --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
2227
- --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
2228
- --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
2229
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
2230
- --_utrecht-button-appearance-disabled-background-color: var(
2231
- --utrecht-button-secondary-action-disabled-background-color
2232
- );
2233
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
2234
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
2235
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
2236
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
2237
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
2238
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
2239
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
2240
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
2241
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
2242
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
2243
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-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;
2244
2107
  }
2245
2108
 
2246
- .utrecht-button-link--subtle {
2247
- --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
2248
- --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
2249
- --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
2250
- --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
2251
- --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
2252
- --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
2253
- --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
2254
- --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
2255
- --_utrecht-button-appearance-disabled-background-color: var(
2256
- --utrecht-button-subtle-disabled-background-color
2257
- );
2258
- --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
2259
- --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
2260
- --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
2261
- --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
2262
- --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
2263
- --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
2264
- --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
2265
- --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
2266
- --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
2267
- --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
2268
- --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
2109
+ .utrecht-calendar__icon {
2110
+ block-size: var(--utrecht-calendar-icon-size);
2111
+ inline-size: var(--utrecht-calendar-icon-size);
2269
2112
  }
2270
2113
 
2271
2114
  /**
@@ -2334,10 +2177,120 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2334
2177
  outline-style: var(--utrecht-focus-outline-style, revert);
2335
2178
  outline-width: var(--utrecht-focus-outline-width, revert);
2336
2179
  }
2337
- .utrecht-checkbox--html-input:focus:not(:focus-visible) {
2338
- /* undo focus ring */
2339
- box-shadow: none;
2340
- outline-style: revert;
2180
+ .utrecht-checkbox--html-input:focus:not(:focus-visible) {
2181
+ /* undo focus ring */
2182
+ box-shadow: none;
2183
+ outline-style: revert;
2184
+ }
2185
+
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;
2228
+ }
2229
+
2230
+ .utrecht-code-block__content {
2231
+ /* reset effect of <code> */
2232
+ font-family: inherit;
2233
+ font-size: inherit;
2234
+ }
2235
+
2236
+ /**
2237
+ * @license EUPL-1.2
2238
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2239
+ * Copyright (c) 2020-2022 Frameless B.V.
2240
+ */
2241
+ /**
2242
+ * @license EUPL-1.2
2243
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2244
+ * Copyright (c) 2020-2022 Frameless B.V.
2245
+ */
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
+
2257
+ /**
2258
+ * @license EUPL-1.2
2259
+ * Copyright (c) 2021-2022 Gemeente Utrecht
2260
+ * Copyright (c) 2021-2022 Frameless B.V.
2261
+ */
2262
+ /**
2263
+ * @license EUPL-1.2
2264
+ * Copyright (c) 2021-2022 Gemeente Utrecht
2265
+ * Copyright (c) 2021-2022 Frameless B.V.
2266
+ */
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;
2279
+ }
2280
+ @media (forced-colors: active) {
2281
+ .utrecht-color-sample {
2282
+ forced-color-adjust: none;
2283
+ }
2284
+ }
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
+ }
2289
+ }
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
+ }
2341
2294
  }
2342
2295
 
2343
2296
  /**
@@ -2362,6 +2315,62 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2362
2315
  column-rule-width: var(--utrecht-column-layout-column-rule-width, 0);
2363
2316
  }
2364
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
+
2365
2374
  /**
2366
2375
  * @license EUPL-1.2
2367
2376
  * Copyright (c) 2021 Robbert Broersma
@@ -2544,8 +2553,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2544
2553
  border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
2545
2554
  border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
2546
2555
  }
2547
- .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
2548
- .utrecht-custom-checkbox--html-input:indeterminate {
2556
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate, .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate,
2557
+ .utrecht-custom-checkbox--html-input:indeterminate,
2558
+ .utrecht-custom-checkbox--html-input:checked:indeterminate {
2549
2559
  background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
2550
2560
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
2551
2561
  border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
@@ -2638,6 +2648,64 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2638
2648
  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
2639
2649
  }
2640
2650
 
2651
+ /**
2652
+ * @license EUPL-1.2
2653
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
2654
+ * Copyright (c) 2021 Gemeente Utrecht
2655
+ */
2656
+ /**
2657
+ * @license EUPL-1.2
2658
+ * Copyright (c) 2021 Gemeente Utrecht
2659
+ * Copyright (c) 2021 Robbert Broersma
2660
+ */
2661
+ .utrecht-data-placeholder {
2662
+ background-color: var(--utrecht-data-placeholder-background-color, currentColor);
2663
+ block-size: 1em;
2664
+ display: inline-block;
2665
+ inline-size: min(100%, var(--utrecht-data-placeholder-max-inline-size));
2666
+ max-inline-size: var(--utrecht-data-placeholder-max-inline-size);
2667
+ min-inline-size: var(--utrecht-data-placeholder-min-inline-size, 10ch);
2668
+ vertical-align: -0.1em;
2669
+ }
2670
+ @media print {
2671
+ .utrecht-data-placeholder {
2672
+ outline-color: currentColor;
2673
+ outline-style: dashed;
2674
+ outline-width: 0.1em;
2675
+ }
2676
+ }
2677
+ @media screen and (prefers-contrast: more) {
2678
+ .utrecht-data-placeholder {
2679
+ background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
2680
+ }
2681
+ }
2682
+ @media screen and (forced-colors: active) {
2683
+ .utrecht-data-placeholder {
2684
+ background-color: GrayText;
2685
+ }
2686
+ }
2687
+
2688
+ .utrecht-data-placeholder--loading {
2689
+ cursor: var(--utrecht-action-busy-cursor, busy);
2690
+ }
2691
+
2692
+ /* class name available only for Storybook */
2693
+ .utrecht-data-placeholder--print {
2694
+ outline-color: currentColor;
2695
+ outline-style: dashed;
2696
+ outline-width: 0.1em;
2697
+ }
2698
+
2699
+ /* class name available only for Storybook */
2700
+ .utrecht-data-placeholder--forced-colors {
2701
+ background-color: GrayText;
2702
+ }
2703
+
2704
+ /* class name available only for Storybook */
2705
+ .utrecht-data-placeholder--high-contrast {
2706
+ cursor: var(--utrecht-action-busy-cursor, busy);
2707
+ }
2708
+
2641
2709
  /**
2642
2710
  * @license EUPL-1.2
2643
2711
  * Copyright (c) 2021 Robbert Broersma
@@ -2834,21 +2902,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2834
2902
  line-height: var(--utrecht-figure-caption-line-height);
2835
2903
  }
2836
2904
 
2837
- /**
2838
- * @license EUPL-1.2
2839
- * Copyright (c) 2020-2022 Gemeente Utrecht
2840
- * Copyright (c) 2020-2022 Frameless B.V.
2841
- */
2842
- /**
2843
- * @license EUPL-1.2
2844
- * Copyright (c) 2020-2022 Gemeente Utrecht
2845
- * Copyright (c) 2020-2022 Frameless B.V.
2846
- */
2847
- .utrecht-form {
2848
- display: block;
2849
- max-inline-size: var(--utrecht-form-max-inline-size);
2850
- }
2851
-
2852
2905
  /**
2853
2906
  * @license EUPL-1.2
2854
2907
  * Copyright (c) 2021 Robbert Broersma
@@ -3298,6 +3351,21 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3298
3351
  outline-style: var(--utrecht-focus-outline-style, revert);
3299
3352
  outline-width: var(--utrecht-focus-outline-width, revert);
3300
3353
  }
3354
+ /**
3355
+ * @license EUPL-1.2
3356
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3357
+ * Copyright (c) 2020-2022 Frameless B.V.
3358
+ */
3359
+ /**
3360
+ * @license EUPL-1.2
3361
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3362
+ * Copyright (c) 2020-2022 Frameless B.V.
3363
+ */
3364
+ .utrecht-form {
3365
+ display: block;
3366
+ max-inline-size: var(--utrecht-form-max-inline-size);
3367
+ }
3368
+
3301
3369
  /**
3302
3370
  * @license EUPL-1.2
3303
3371
  * Copyright (c) 2021 Gemeente Utrecht
@@ -3316,7 +3384,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3316
3384
  */
3317
3385
  .utrecht-heading-1 {
3318
3386
  break-inside: avoid-column;
3319
- page-break-after: avoid;
3320
3387
  page-break-inside: avoid;
3321
3388
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3322
3389
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3350,7 +3417,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3350
3417
  */
3351
3418
  .utrecht-heading-2 {
3352
3419
  break-inside: avoid-column;
3353
- page-break-after: avoid;
3354
3420
  page-break-inside: avoid;
3355
3421
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3356
3422
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3384,7 +3450,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3384
3450
  */
3385
3451
  .utrecht-heading-3 {
3386
3452
  break-inside: avoid-column;
3387
- page-break-after: avoid;
3388
3453
  page-break-inside: avoid;
3389
3454
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3390
3455
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3418,7 +3483,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3418
3483
  */
3419
3484
  .utrecht-heading-4 {
3420
3485
  break-inside: avoid-column;
3421
- page-break-after: avoid;
3422
3486
  page-break-inside: avoid;
3423
3487
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3424
3488
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3452,7 +3516,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3452
3516
  */
3453
3517
  .utrecht-heading-5 {
3454
3518
  break-inside: avoid-column;
3455
- page-break-after: avoid;
3456
3519
  page-break-inside: avoid;
3457
3520
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3458
3521
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3486,7 +3549,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3486
3549
  */
3487
3550
  .utrecht-heading-6 {
3488
3551
  break-inside: avoid-column;
3489
- page-break-after: avoid;
3490
3552
  page-break-inside: avoid;
3491
3553
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3492
3554
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -3610,51 +3672,32 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
3610
3672
 
3611
3673
  /**
3612
3674
  * @license EUPL-1.2
3613
- * Copyright (c) 2021 Gemeente Utrecht
3614
- * Copyright (c) 2021 Robbert Broersma
3675
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3676
+ * Copyright (c) 2020-2022 Frameless B.V.
3615
3677
  */
3616
- /* reset before other stylesheets */
3617
- .utrecht-link-list,
3618
- .utrecht-link-list--html-ul {
3619
- margin-block-end: 0;
3620
- margin-block-start: 0;
3621
- margin-inline-end: 0;
3622
- margin-inline-start: 0;
3623
- padding-inline-start: 0;
3624
- }
3625
- .utrecht-link-list > li,
3626
- .utrecht-link-list--html-ul > li {
3627
- list-style: none;
3628
- }
3629
-
3630
- .utrecht-link-list {
3631
- --utrecht-link-text-decoration: none;
3632
- --utrecht-link-hover-text-decoration: underline;
3633
- --utrecht-link-focus-text-decoration: underline;
3634
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
3635
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
3636
- }
3637
-
3638
- .utrecht-link-list--distanced {
3639
- --utrecht-space-around: 1;
3640
- }
3641
-
3642
- .utrecht-link-list__item {
3643
- --utrecht-icon-size: var(--utrecht-link-list-icon-size);
3644
- --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
3645
- --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
3646
- display: block;
3647
- font-weight: var(--utrecht-link-list-item-font-weight);
3678
+ /**
3679
+ * @license EUPL-1.2
3680
+ * Copyright (c) 2020-2022 Gemeente Utrecht
3681
+ * Copyright (c) 2020-2022 Frameless B.V.
3682
+ */
3683
+ /* stylelint-disable-next-line block-no-empty */
3684
+ .utrecht-index-char-nav {
3685
+ --utrecht-button-padding-inline-start: 1ch;
3686
+ --utrecht-button-padding-inline-end: 1ch;
3687
+ display: flex;
3688
+ flex-wrap: wrap;
3689
+ gap: var(--utrecht-index-char-nav-gap);
3690
+ margin-block-end: var(--utrecht-index-char-nav-margin-block-end);
3691
+ margin-block-start: var(--utrecht-index-char-nav-margin-block-start);
3648
3692
  }
3649
3693
 
3650
- .utrecht-link-list__item + .utrecht-link-list__item {
3651
- margin-block-start: var(--utrecht-link-list-item-margin-block-start);
3694
+ .utrecht-index-char-nav__link--current {
3695
+ --utrecht-button-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
3696
+ --utrecht-button-link-primary-action-font-weight: var(--utrecht-index-char-nav-link-current-font-weight);
3652
3697
  }
3653
3698
 
3654
- .utrecht-link-list__link {
3655
- align-items: baseline;
3656
- column-gap: var(--utrecht-link-list-item-column-gap);
3657
- display: inline-flex;
3699
+ .utrecht-index-char-nav__link--disabled {
3700
+ pointer-events: none;
3658
3701
  }
3659
3702
 
3660
3703
  /**
@@ -3834,33 +3877,81 @@ however browsers don't seem to have implemented great looking supixel tweening y
3834
3877
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
3835
3878
  }
3836
3879
 
3837
- .utrecht-link-button--inline {
3838
- --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
3839
- min-block-size: auto;
3840
- min-inline-size: auto;
3841
- padding-block-end: 0;
3842
- padding-block-start: 0;
3843
- padding-inline-end: 0;
3844
- padding-inline-start: 0;
3880
+ .utrecht-link-button--inline {
3881
+ --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
3882
+ min-block-size: auto;
3883
+ min-inline-size: auto;
3884
+ padding-block-end: 0;
3885
+ padding-block-start: 0;
3886
+ padding-inline-end: 0;
3887
+ padding-inline-start: 0;
3888
+ }
3889
+
3890
+ .utrecht-link-button--pressed {
3891
+ /* Copy `active` styles for now.
3892
+ Later we can decide to:
3893
+ - merge `active` and `pressed` and name the state `pressed`, or:
3894
+ - merge `active` and `pressed` and name the state `active`, or:
3895
+ - style `pressed` like the link state `current`, or:
3896
+ - add `pressed` design tokens
3897
+ */
3898
+ --_utrecht-link-forced-colors-color: activetext;
3899
+ --_utrecht-link-state-color: var(--utrecht-link-active-color);
3900
+ }
3901
+
3902
+ .utrecht-link-button--html-button {
3903
+ background-color: transparent;
3904
+ /* reset <button> styling */
3905
+ border-width: 0;
3906
+ }
3907
+ /**
3908
+ * @license EUPL-1.2
3909
+ * Copyright (c) 2021 Gemeente Utrecht
3910
+ * Copyright (c) 2021 Robbert Broersma
3911
+ */
3912
+ /**
3913
+ * @license EUPL-1.2
3914
+ * Copyright (c) 2021 Gemeente Utrecht
3915
+ * Copyright (c) 2021 Robbert Broersma
3916
+ */
3917
+ /* reset before other stylesheets */
3918
+ .utrecht-link-list--html-ul {
3919
+ margin-block-end: 0;
3920
+ margin-block-start: 0;
3921
+ margin-inline-end: 0;
3922
+ margin-inline-start: 0;
3923
+ padding-inline-start: 0;
3924
+ }
3925
+ .utrecht-link-list--html-ul > li {
3926
+ list-style: none;
3927
+ }
3928
+
3929
+ .utrecht-link-list {
3930
+ /* TODO: I wish we could make `--utrecht-link-text-decoration` fall back to `var(--utrecht-link-text-decoration)`
3931
+ * when `var(--utrecht-link-list-text-decoration)` is not set.
3932
+ */
3933
+ --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
3934
+ --utrecht-icon-size: var(--utrecht-link-list-icon-size);
3935
+ --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
3936
+ --utrecht-link-text-decoration: var(--utrecht-link-list-link-text-decoration, none);
3937
+ display: flex;
3938
+ flex-direction: column;
3939
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
3940
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
3941
+ row-gap: var(--utrecht-link-list-row-gap);
3942
+ }
3943
+
3944
+ .utrecht-link-list__item {
3945
+ display: block;
3845
3946
  }
3846
3947
 
3847
- .utrecht-link-button--pressed {
3848
- /* Copy `active` styles for now.
3849
- Later we can decide to:
3850
- - merge `active` and `pressed` and name the state `pressed`, or:
3851
- - merge `active` and `pressed` and name the state `active`, or:
3852
- - style `pressed` like the link state `current`, or:
3853
- - add `pressed` design tokens
3854
- */
3855
- --_utrecht-link-forced-colors-color: activetext;
3856
- --_utrecht-link-state-color: var(--utrecht-link-active-color);
3948
+ .utrecht-link-list__link {
3949
+ align-items: baseline;
3950
+ column-gap: var(--utrecht-link-list-link-column-gap);
3951
+ display: inline-flex;
3952
+ font-weight: var(--utrecht-link-list-link-font-weight);
3857
3953
  }
3858
3954
 
3859
- .utrecht-link-button--html-button {
3860
- background-color: transparent;
3861
- /* reset <button> styling */
3862
- border-width: 0;
3863
- }
3864
3955
  /**
3865
3956
  * @license EUPL-1.2
3866
3957
  * Copyright (c) 2022 The Knights Who Say NIH! B.V.
@@ -3915,27 +4006,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3915
4006
  margin-inline-start: var(--utrecht-link-social-margin-inline-start);
3916
4007
  }
3917
4008
 
3918
- /**
3919
- * @license EUPL-1.2
3920
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
3921
- * Copyright (c) 2021 Gemeente Utrecht
3922
- */
3923
- .utrecht-list-social {
3924
- display: flex;
3925
- margin-block-end: var(--utrecht-list-social-margin-block-end);
3926
- margin-block-start: var(--utrecht-list-social-margin-block-start);
3927
- padding-inline-end: var(--utrecht-list-social-padding-inline-end);
3928
- padding-inline-start: var(--utrecht-list-social-padding-inline-start);
3929
- }
3930
-
3931
- .utrecht-list-social__item {
3932
- list-style-type: none;
3933
- margin-inline-end: var(--utrecht-list-social-item-margin-inline-end);
3934
- }
3935
- .utrecht-list-social__item:last-child {
3936
- margin-inline-end: 0;
3937
- }
3938
-
3939
4009
  /**
3940
4010
  * @license EUPL-1.2
3941
4011
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -4070,47 +4140,284 @@ however browsers don't seem to have implemented great looking supixel tweening y
4070
4140
  text-decoration-skip-ink: none;
4071
4141
  }
4072
4142
 
4073
- .utrecht-link--focus {
4074
- --_utrecht-link-state-color: var(--utrecht-link-focus-color);
4075
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
4076
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
4077
- background-color: var(--utrecht-link-focus-background-color, transparent);
4078
- text-decoration-skip: none;
4079
- text-decoration-skip-ink: none;
4143
+ .utrecht-link--focus {
4144
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
4145
+ --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
4146
+ --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
4147
+ background-color: var(--utrecht-link-focus-background-color, transparent);
4148
+ text-decoration-skip: none;
4149
+ text-decoration-skip-ink: none;
4150
+ }
4151
+
4152
+ .utrecht-link--focus-visible {
4153
+ /*
4154
+ * WCAG SC 2.4.12: Focus Not Obscured
4155
+ * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
4156
+ */
4157
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
4158
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4159
+ * can combine it with the focus ring box shadow.
4160
+ */
4161
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4162
+ var(--utrecht-focus-inverse-outline-color, transparent);
4163
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
4164
+ outline-color: var(--utrecht-focus-outline-color, revert);
4165
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
4166
+ outline-style: var(--utrecht-focus-outline-style, revert);
4167
+ outline-width: var(--utrecht-focus-outline-width, revert);
4168
+ z-index: var(--utrecht-stack-focus-z-index, 1);
4169
+ }
4170
+
4171
+ /* `:focus` should only apply to links with `href`, not on disabled links */
4172
+ .utrecht-link--html-span:focus,
4173
+ .utrecht-link--html-a:any-link:focus {
4174
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
4175
+ --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
4176
+ --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
4177
+ background-color: var(--utrecht-link-focus-background-color, transparent);
4178
+ text-decoration-skip: none;
4179
+ text-decoration-skip-ink: none;
4180
+ /*
4181
+ * WCAG SC 2.4.12: Focus Not Obscured
4182
+ * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
4183
+ */
4184
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
4185
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4186
+ * can combine it with the focus ring box shadow.
4187
+ */
4188
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4189
+ var(--utrecht-focus-inverse-outline-color, transparent);
4190
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
4191
+ outline-color: var(--utrecht-focus-outline-color, revert);
4192
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
4193
+ outline-style: var(--utrecht-focus-outline-style, revert);
4194
+ outline-width: var(--utrecht-focus-outline-width, revert);
4195
+ z-index: var(--utrecht-stack-focus-z-index, 1);
4196
+ }
4197
+
4198
+ .utrecht-link--html-span:focus:not(:focus-visible),
4199
+ .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
4200
+ /* undo focus ring */
4201
+ box-shadow: none;
4202
+ outline-style: revert;
4203
+ }
4204
+
4205
+ .utrecht-link--html-span:active,
4206
+ .utrecht-link--html-a:any-link:active,
4207
+ .utrecht-link--active {
4208
+ --_utrecht-link-forced-colors-color: activetext;
4209
+ --_utrecht-link-state-color: var(--utrecht-link-active-color);
4210
+ }
4211
+
4212
+ .utrecht-link--telephone {
4213
+ white-space: nowrap;
4214
+ }
4215
+
4216
+ .utrecht-link--current {
4217
+ cursor: var(--utrecht-action-inert-cursor, normal);
4218
+ font-weight: var(--utrecht-link-current-font-weight);
4219
+ }
4220
+
4221
+ .utrecht-link--box-content:any-link {
4222
+ color: unset;
4223
+ display: inline-block;
4224
+ text-decoration-line: unset;
4225
+ text-decoration-skip-ink: unset;
4226
+ text-decoration-thickness: unset;
4227
+ text-underline-offset: unset;
4228
+ }
4229
+
4230
+ .utrecht-link--placeholder {
4231
+ --_utrecht-link-forced-colors-color: GrayText;
4232
+ --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
4233
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
4234
+ font-weight: var(--utrecht-link-placeholder-font-weight);
4235
+ text-decoration-line: none;
4236
+ }
4237
+
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);
4080
4408
  }
4081
4409
 
4082
- .utrecht-link--focus-visible {
4083
- /*
4084
- * WCAG SC 2.4.12: Focus Not Obscured
4085
- * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
4086
- */
4087
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
4088
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4089
- * can combine it with the focus ring box shadow.
4090
- */
4091
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
4092
- var(--utrecht-focus-inverse-outline-color, transparent);
4093
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
4094
- outline-color: var(--utrecht-focus-outline-color, revert);
4095
- outline-offset: var(--utrecht-focus-outline-offset, revert);
4096
- outline-style: var(--utrecht-focus-outline-style, revert);
4097
- outline-width: var(--utrecht-focus-outline-width, revert);
4098
- z-index: var(--utrecht-stack-focus-z-index, 1);
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));
4099
4413
  }
4100
4414
 
4101
- /* `:focus` should only apply to links with `href`, not on disabled links */
4102
- .utrecht-link--html-span:focus,
4103
- .utrecht-link--html-a:any-link:focus {
4104
- --_utrecht-link-state-color: var(--utrecht-link-focus-color);
4105
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
4106
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
4107
- background-color: var(--utrecht-link-focus-background-color, transparent);
4108
- text-decoration-skip: none;
4109
- text-decoration-skip-ink: none;
4110
- /*
4111
- * WCAG SC 2.4.12: Focus Not Obscured
4112
- * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
4113
- */
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 {
4114
4421
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
4115
4422
  * - Make the `box-shadow` value available, so components that have their own `box-shadow`
4116
4423
  * can combine it with the focus ring box shadow.
@@ -4122,65 +4429,64 @@ however browsers don't seem to have implemented great looking supixel tweening y
4122
4429
  outline-offset: var(--utrecht-focus-outline-offset, revert);
4123
4430
  outline-style: var(--utrecht-focus-outline-style, revert);
4124
4431
  outline-width: var(--utrecht-focus-outline-width, revert);
4125
- z-index: var(--utrecht-stack-focus-z-index, 1);
4432
+ /* ensure the focus outline is rendered inside the `overflow` container */
4433
+ --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
4126
4434
  }
4127
4435
 
4128
- .utrecht-link--html-span:focus:not(:focus-visible),
4129
- .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
4130
- /* undo focus ring */
4131
- box-shadow: none;
4132
- outline-style: revert;
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);
4133
4440
  }
4134
4441
 
4135
- .utrecht-link--html-span:active,
4136
- .utrecht-link--html-a:any-link:active,
4137
- .utrecht-link--active {
4138
- --_utrecht-link-forced-colors-color: activetext;
4139
- --_utrecht-link-state-color: var(--utrecht-link-active-color);
4442
+ .utrecht-listbox__option--selected {
4443
+ background-color: var(--utrecht-listbox-option-selected-background-color);
4444
+ color: var(--utrecht-listbox-option-selected-color);
4140
4445
  }
4141
4446
 
4142
- .utrecht-link--telephone {
4143
- white-space: nowrap;
4447
+ .utrecht-listbox__option--html-li {
4448
+ list-style: none;
4144
4449
  }
4145
-
4146
- .utrecht-link--current {
4147
- cursor: var(--utrecht-action-inert-cursor, normal);
4148
- font-weight: var(--utrecht-link-current-font-weight);
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));
4149
4453
  }
4150
-
4151
- .utrecht-link--box-content:any-link {
4152
- color: unset;
4153
- display: inline-block;
4154
- text-decoration-line: unset;
4155
- text-decoration-skip-ink: unset;
4156
- text-decoration-thickness: unset;
4157
- text-underline-offset: unset;
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));
4158
4457
  }
4159
4458
 
4160
- .utrecht-link--placeholder {
4161
- --_utrecht-link-forced-colors-color: GrayText;
4162
- --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
4459
+ .utrecht-listbox--disabled {
4460
+ /* TODO: Implement CSS of disabled listbox */
4163
4461
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
4164
- font-weight: var(--utrecht-link-placeholder-font-weight);
4165
- text-decoration-line: none;
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
+ }
4166
4473
  }
4167
4474
 
4168
- /**
4169
- * Simulate forced-colors mode.
4170
- */
4171
- .utrecht-link--forced-colors {
4172
- /* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
4173
- * however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
4174
- * That's why we use `Highlight` vs `HighlightText`.
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.
4175
4482
  */
4176
- --utrecht-focus-outline-color: Highlight;
4177
- --utrecht-focus-inverse-outline-color: HighlightText;
4178
- --utrecht-link-color: linktext;
4179
- --utrecht-link-hover-color: linktext;
4180
- --utrecht-link-focus-color: linktext;
4181
- --utrecht-link-active-color: activetext;
4182
- --utrecht-link-visited-color: visitedtext;
4183
- --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);
4184
4490
  }
4185
4491
 
4186
4492
  /**
@@ -4197,6 +4503,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
4197
4503
  gap: var(--utrecht-space-inline-sm);
4198
4504
  }
4199
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
+
4200
4524
  /**
4201
4525
  * @license EUPL-1.2
4202
4526
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4222,6 +4546,32 @@ however browsers don't seem to have implemented great looking supixel tweening y
4222
4546
  inline-size: auto;
4223
4547
  }
4224
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
+
4225
4575
  /**
4226
4576
  * @license EUPL-1.2
4227
4577
  * Copyright (c) 2021 Gemeente Utrecht
@@ -4299,32 +4649,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
4299
4649
  padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
4300
4650
  }
4301
4651
 
4302
- /**
4303
- * @license EUPL-1.2
4304
- * Copyright (c) 2022 Gemeente Utrecht
4305
- * Copyright (c) 2022 Robbert Broersma
4306
- */
4307
- /**
4308
- * @license EUPL-1.2
4309
- * Copyright (c) 2022 Gemeente Utrecht
4310
- * Copyright (c) 2022 Robbert Broersma
4311
- */
4312
- .utrecht-map-marker {
4313
- --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
4314
- align-items: center;
4315
- background-color: var(--utrecht-map-marker-background-color);
4316
- block-size: var(--utrecht-map-marker-size);
4317
- border-color: var(--utrecht-map-marker-border-color);
4318
- border-radius: 50%;
4319
- border-style: solid;
4320
- border-width: var(--utrecht-map-marker-border-width);
4321
- box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
4322
- color: var(--utrecht-map-marker-color);
4323
- display: flex;
4324
- inline-size: var(--utrecht-map-marker-size);
4325
- justify-content: center;
4326
- }
4327
-
4328
4652
  /**
4329
4653
  * @license EUPL-1.2
4330
4654
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -5003,27 +5327,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5003
5327
  * @license EUPL-1.2
5004
5328
  * Copyright (c) 2021 Robbert Broersma
5005
5329
  */
5006
- .utrecht-pagination__page-link:focus,
5007
- .utrecht-pagination__relative-link:focus {
5008
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
5009
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
5010
- * can combine it with the focus ring box shadow.
5011
- */
5012
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
5013
- var(--utrecht-focus-inverse-outline-color, transparent);
5014
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
5015
- outline-color: var(--utrecht-focus-outline-color, revert);
5016
- outline-offset: var(--utrecht-focus-outline-offset, revert);
5017
- outline-style: var(--utrecht-focus-outline-style, revert);
5018
- outline-width: var(--utrecht-focus-outline-width, revert);
5019
- }
5020
-
5021
- .utrecht-pagination__page-link:focus:not(:focus-visible),
5022
- .utrecht-pagination__relative-link:focus:not(:focus-visible) {
5023
- /* undo focus ring */
5024
- box-shadow: none;
5025
- outline-style: revert;
5026
- }
5027
5330
 
5028
5331
  .utrecht-pagination {
5029
5332
  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
@@ -5128,64 +5431,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5128
5431
  outline-style: revert;
5129
5432
  }
5130
5433
 
5131
- /**
5132
- * @license EUPL-1.2
5133
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
5134
- * Copyright (c) 2021 Gemeente Utrecht
5135
- */
5136
- /**
5137
- * @license EUPL-1.2
5138
- * Copyright (c) 2021 Gemeente Utrecht
5139
- * Copyright (c) 2021 Robbert Broersma
5140
- */
5141
- .utrecht-data-placeholder {
5142
- background-color: var(--utrecht-data-placeholder-background-color, currentColor);
5143
- block-size: 1em;
5144
- display: inline-block;
5145
- inline-size: min(100%, var(--utrecht-data-placeholder-max-inline-size));
5146
- max-inline-size: var(--utrecht-data-placeholder-max-inline-size);
5147
- min-inline-size: var(--utrecht-data-placeholder-min-inline-size, 10ch);
5148
- vertical-align: -0.1em;
5149
- }
5150
- @media print {
5151
- .utrecht-data-placeholder {
5152
- outline-color: currentColor;
5153
- outline-style: dashed;
5154
- outline-width: 0.1em;
5155
- }
5156
- }
5157
- @media screen and (prefers-contrast: more) {
5158
- .utrecht-data-placeholder {
5159
- background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
5160
- }
5161
- }
5162
- @media screen and (forced-colors: active) {
5163
- .utrecht-data-placeholder {
5164
- background-color: GrayText;
5165
- }
5166
- }
5167
-
5168
- .utrecht-data-placeholder--loading {
5169
- cursor: var(--utrecht-action-busy-cursor, busy);
5170
- }
5171
-
5172
- /* class name available only for Storybook */
5173
- .utrecht-data-placeholder--print {
5174
- outline-color: currentColor;
5175
- outline-style: dashed;
5176
- outline-width: 0.1em;
5177
- }
5178
-
5179
- /* class name available only for Storybook */
5180
- .utrecht-data-placeholder--forced-colors {
5181
- background-color: GrayText;
5182
- }
5183
-
5184
- /* class name available only for Storybook */
5185
- .utrecht-data-placeholder--high-contrast {
5186
- cursor: var(--utrecht-action-busy-cursor, busy);
5187
- }
5188
-
5189
5434
  /**
5190
5435
  * @license EUPL-1.2
5191
5436
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -5255,6 +5500,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
5255
5500
  --utrecht-space-around: 1;
5256
5501
  }
5257
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
+
5258
5519
  /**
5259
5520
  * @license EUPL-1.2
5260
5521
  * Copyright (c) 2021 Robbert Broersma
@@ -6914,4 +7175,4 @@ however browsers don't seem to have implemented great looking supixel tweening y
6914
7175
  hyphens: none;
6915
7176
  overflow-wrap: anywhere;
6916
7177
  page-break-inside: avoid;
6917
- }
7178
+ }