@utrecht/component-library-css 1.0.0-alpha.92 → 1.0.0-alpha.96

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 (7) hide show
  1. package/dist/bem.css +182 -1
  2. package/dist/html.css +91 -2
  3. package/dist/index.css +295 -7
  4. package/dist/root-theme.css +22 -4
  5. package/package.json +3 -3
  6. package/src/bem.scss +2 -0
  7. package/src/html.scss +1 -0
package/dist/bem.css CHANGED
@@ -43,6 +43,7 @@
43
43
  /* no inheritance */
44
44
  font-weight: var(--utrecht-badge-font-weight, bold);
45
45
  /* no inheritance */
46
+ line-height: var(--utrecht-badge-line-height);
46
47
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
47
48
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
48
49
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -70,6 +71,7 @@
70
71
  /* no inheritance */
71
72
  font-weight: var(--utrecht-badge-font-weight, bold);
72
73
  /* no inheritance */
74
+ line-height: var(--utrecht-badge-line-height);
73
75
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
74
76
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
75
77
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -115,6 +117,7 @@
115
117
  /* no inheritance */
116
118
  font-weight: var(--utrecht-badge-font-weight, bold);
117
119
  /* no inheritance */
120
+ line-height: var(--utrecht-badge-line-height);
118
121
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
119
122
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
120
123
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -147,6 +150,7 @@
147
150
  /* no inheritance */
148
151
  font-weight: var(--utrecht-badge-font-weight, bold);
149
152
  /* no inheritance */
153
+ line-height: var(--utrecht-badge-line-height);
150
154
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
151
155
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
152
156
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -347,11 +351,13 @@ ol.utrecht-breadcrumb__list {
347
351
  font-weight: var(--utrecht-button-font-weight);
348
352
  inline-size: var(--utrecht-button-inline-size, auto);
349
353
  letter-spacing: var(--utrecht-button-letter-spacing);
354
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
350
355
  padding-block-end: var(--utrecht-button-padding-block-end);
351
356
  padding-block-start: var(--utrecht-button-padding-block-start);
352
357
  padding-inline-end: var(--utrecht-button-padding-inline-end);
353
358
  padding-inline-start: var(--utrecht-button-padding-inline-start);
354
359
  text-transform: var(--utrecht-button-text-transform);
360
+ user-select: none;
355
361
  }
356
362
 
357
363
  .utrecht-button--distanced {
@@ -561,6 +567,7 @@ ol.utrecht-breadcrumb__list {
561
567
  }
562
568
 
563
569
  .utrecht-form-label--disabled {
570
+ cursor: var(--utrecht-action-disabled-cursor);
564
571
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
565
572
  }
566
573
 
@@ -569,6 +576,110 @@ ol.utrecht-breadcrumb__list {
569
576
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
570
577
  }
571
578
 
579
+ /**
580
+ * @license EUPL-1.2
581
+ * Copyright (c) 2021 Robbert Broersma
582
+ */
583
+ .utrecht-form-toggle {
584
+ align-items: center;
585
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
586
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
587
+ border-style: var(--utrecht-form-toggle-border-style, solid);
588
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
589
+ color: var(--utrecht-form-toggle-color);
590
+ display: flex;
591
+ height: var(--utrecht-form-toggle-height, 2em);
592
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
593
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
594
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
595
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
596
+ position: relative;
597
+ user-select: none;
598
+ width: var(--utrecht-form-toggle-width, 6em);
599
+ }
600
+
601
+ .utrecht-form-toggle--focus {
602
+ border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
603
+ border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
604
+ border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
605
+ }
606
+
607
+ .utrecht-form-toggle--hover {
608
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
609
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
610
+ }
611
+
612
+ .utrecht-form-toggle--disabled {
613
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
614
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
615
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
616
+ cursor: var(--utrecht-action-disabled-cursor);
617
+ }
618
+
619
+ .utrecht-form-toggle__thumb {
620
+ /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
621
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
622
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
623
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
624
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
625
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
626
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
627
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
628
+ z-index: 20;
629
+ }
630
+
631
+ .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
632
+ margin-inline-start: auto;
633
+ }
634
+
635
+ .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
636
+ margin-inline-end: auto;
637
+ }
638
+
639
+ .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
640
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
641
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
642
+ }
643
+
644
+ .utrecht-form-toggle__track {
645
+ align-items: center;
646
+ background-color: var(--utrecht-form-toggle-accent-color);
647
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
648
+ display: flex;
649
+ height: 100%;
650
+ width: 100%;
651
+ }
652
+
653
+ .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
654
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
655
+ }
656
+
657
+ .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
658
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
659
+ color: var(--utrecht-form-toggle-disabled-color, black);
660
+ }
661
+
662
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
663
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
664
+ border: 0 !important;
665
+ clip: rect(1px, 1px, 1px, 1px) !important;
666
+ -webkit-clip-path: inset(50%) !important;
667
+ clip-path: inset(50%) !important;
668
+ height: 1px !important;
669
+ /* stylelint-disable-next-line property-disallowed-list */
670
+ margin: -1px !important;
671
+ overflow: hidden !important;
672
+ /* stylelint-disable-next-line property-disallowed-list */
673
+ padding: 0 !important;
674
+ position: absolute !important;
675
+ white-space: nowrap !important;
676
+ width: 1px !important;
677
+ }
678
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
679
+ outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
680
+ outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
681
+ outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
682
+ }
572
683
  /**
573
684
  * @license EUPL-1.2
574
685
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1291,6 +1402,7 @@ ol.utrecht-breadcrumb__list {
1291
1402
  }
1292
1403
 
1293
1404
  .utrecht-paragraph--lead {
1405
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1294
1406
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1295
1407
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1296
1408
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1348,6 +1460,67 @@ ol.utrecht-breadcrumb__list {
1348
1460
  background-size: var(--utrecht-search-bar-textbox-background-size);
1349
1461
  }
1350
1462
 
1463
+ /**
1464
+ * @license EUPL-1.2
1465
+ * Copyright (c) 2021 Robbert Broersma
1466
+ */
1467
+ .utrecht-select {
1468
+ -moz-appearance: none;
1469
+ -webkit-appearance: none;
1470
+ appearance: none;
1471
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1472
+ background-image: var(--utrecht-select-background-image);
1473
+ background-position: 100%;
1474
+ background-repeat: no-repeat;
1475
+ background-size: 1.4em;
1476
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1477
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1478
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1479
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1480
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1481
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1482
+ border-style: solid;
1483
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1484
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1485
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1486
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1487
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1488
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1489
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1490
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1491
+ width: 100%;
1492
+ }
1493
+
1494
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled {
1495
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1496
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1497
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1498
+ cursor: var(--utrecht-action-disabled-cursor);
1499
+ }
1500
+
1501
+ .utrecht-select--focus, .utrecht-select--html-select:focus {
1502
+ background-color: var(--utrecht-focus-background-color);
1503
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1504
+ color: var(--utrecht-focus-color, inherit);
1505
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1506
+ outline-offset: 0;
1507
+ outline-style: var(--utrecht-focus-outline-style, solid);
1508
+ outline-width: var(--utrecht-focus-outline-width, 0);
1509
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1510
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1511
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1512
+ }
1513
+
1514
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-select--html-select[aria-invalid=true] {
1515
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1516
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1517
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1518
+ }
1519
+
1520
+ /* stylelint-disable-next-line block-no-empty */
1521
+ .utrecht-select--html-select {
1522
+ /* <select> does not support :read-only */
1523
+ }
1351
1524
  /**
1352
1525
  * @license EUPL-1.2
1353
1526
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1357,7 +1530,7 @@ ol.utrecht-breadcrumb__list {
1357
1530
  .utrecht-separator {
1358
1531
  border-color: var(--utrecht-separator-color);
1359
1532
  border-style: solid;
1360
- border-width: 0 0 var(--utrecht-separator-width) 0;
1533
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1361
1534
  }
1362
1535
 
1363
1536
  .utrecht-separator--distanced {
@@ -1468,10 +1641,12 @@ ol.utrecht-breadcrumb__list {
1468
1641
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1469
1642
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1470
1643
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1644
+ min-block-size: var(--utrecht-textarea-min-block-size);
1471
1645
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1472
1646
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1473
1647
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1474
1648
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1649
+ resize: vertical;
1475
1650
  width: 100%;
1476
1651
  }
1477
1652
 
@@ -1496,6 +1671,9 @@ ol.utrecht-breadcrumb__list {
1496
1671
  outline-offset: 0;
1497
1672
  outline-style: var(--utrecht-focus-outline-style, solid);
1498
1673
  outline-width: var(--utrecht-focus-outline-width, 0);
1674
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1675
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1676
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1499
1677
  }
1500
1678
 
1501
1679
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only {
@@ -1552,6 +1730,9 @@ ol.utrecht-breadcrumb__list {
1552
1730
  outline-offset: 0;
1553
1731
  outline-style: var(--utrecht-focus-outline-style, solid);
1554
1732
  outline-width: var(--utrecht-focus-outline-width, 0);
1733
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1734
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1735
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1555
1736
  }
1556
1737
 
1557
1738
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
package/dist/html.css CHANGED
@@ -78,11 +78,13 @@
78
78
  font-weight: var(--utrecht-button-font-weight);
79
79
  inline-size: var(--utrecht-button-inline-size, auto);
80
80
  letter-spacing: var(--utrecht-button-letter-spacing);
81
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
81
82
  padding-block-end: var(--utrecht-button-padding-block-end);
82
83
  padding-block-start: var(--utrecht-button-padding-block-start);
83
84
  padding-inline-end: var(--utrecht-button-padding-inline-end);
84
85
  padding-inline-start: var(--utrecht-button-padding-inline-start);
85
86
  text-transform: var(--utrecht-button-text-transform);
87
+ user-select: none;
86
88
  }
87
89
 
88
90
  .utrecht-button--distanced, .utrecht-html button {
@@ -238,6 +240,7 @@
238
240
  }
239
241
 
240
242
  .utrecht-form-label--disabled {
243
+ cursor: var(--utrecht-action-disabled-cursor);
241
244
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
242
245
  }
243
246
 
@@ -487,11 +490,13 @@
487
490
  font-weight: var(--utrecht-button-font-weight);
488
491
  inline-size: var(--utrecht-button-inline-size, auto);
489
492
  letter-spacing: var(--utrecht-button-letter-spacing);
493
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
490
494
  padding-block-end: var(--utrecht-button-padding-block-end);
491
495
  padding-block-start: var(--utrecht-button-padding-block-start);
492
496
  padding-inline-end: var(--utrecht-button-padding-inline-end);
493
497
  padding-inline-start: var(--utrecht-button-padding-inline-start);
494
498
  text-transform: var(--utrecht-button-text-transform);
499
+ user-select: none;
495
500
  }
496
501
 
497
502
  .utrecht-button--distanced, .utrecht-html button {
@@ -647,6 +652,7 @@
647
652
  }
648
653
 
649
654
  .utrecht-form-label--disabled {
655
+ cursor: var(--utrecht-action-disabled-cursor);
650
656
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
651
657
  }
652
658
 
@@ -915,6 +921,7 @@
915
921
  }
916
922
 
917
923
  .utrecht-paragraph--lead, .utrecht-html p.lead {
924
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
918
925
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
919
926
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
920
927
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -960,7 +967,7 @@
960
967
  .utrecht-separator, .utrecht-html hr {
961
968
  border-color: var(--utrecht-separator-color);
962
969
  border-style: solid;
963
- border-width: 0 0 var(--utrecht-separator-width) 0;
970
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
964
971
  }
965
972
 
966
973
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1084,10 +1091,12 @@
1084
1091
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1085
1092
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1086
1093
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1094
+ min-block-size: var(--utrecht-textarea-min-block-size);
1087
1095
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1088
1096
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1089
1097
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1090
1098
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1099
+ resize: vertical;
1091
1100
  width: 100%;
1092
1101
  }
1093
1102
 
@@ -1112,6 +1121,9 @@
1112
1121
  outline-offset: 0;
1113
1122
  outline-style: var(--utrecht-focus-outline-style, solid);
1114
1123
  outline-width: var(--utrecht-focus-outline-width, 0);
1124
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1125
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1126
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1115
1127
  }
1116
1128
 
1117
1129
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1207,6 +1219,9 @@
1207
1219
  outline-offset: 0;
1208
1220
  outline-style: var(--utrecht-focus-outline-style, solid);
1209
1221
  outline-width: var(--utrecht-focus-outline-width, 0);
1222
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1223
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1224
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1210
1225
  }
1211
1226
 
1212
1227
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -1371,6 +1386,7 @@
1371
1386
  }
1372
1387
 
1373
1388
  .utrecht-paragraph--lead, .utrecht-html p.lead {
1389
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1374
1390
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1375
1391
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1376
1392
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1403,6 +1419,71 @@
1403
1419
  cursor: var(--utrecht-action-disabled-cursor);
1404
1420
  }
1405
1421
 
1422
+ /**
1423
+ * @license EUPL-1.2
1424
+ * Copyright (c) 2021 Robbert Broersma
1425
+ */
1426
+ /**
1427
+ * @license EUPL-1.2
1428
+ * Copyright (c) 2021 Robbert Broersma
1429
+ */
1430
+ .utrecht-select, .utrecht-html select {
1431
+ -moz-appearance: none;
1432
+ -webkit-appearance: none;
1433
+ appearance: none;
1434
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1435
+ background-image: var(--utrecht-select-background-image);
1436
+ background-position: 100%;
1437
+ background-repeat: no-repeat;
1438
+ background-size: 1.4em;
1439
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1440
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1441
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1442
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1443
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1444
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1445
+ border-style: solid;
1446
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1447
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1448
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1449
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1450
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1451
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1452
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1453
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1454
+ width: 100%;
1455
+ }
1456
+
1457
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
1458
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1459
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1460
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1461
+ cursor: var(--utrecht-action-disabled-cursor);
1462
+ }
1463
+
1464
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
1465
+ background-color: var(--utrecht-focus-background-color);
1466
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1467
+ color: var(--utrecht-focus-color, inherit);
1468
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1469
+ outline-offset: 0;
1470
+ outline-style: var(--utrecht-focus-outline-style, solid);
1471
+ outline-width: var(--utrecht-focus-outline-width, 0);
1472
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1473
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1474
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1475
+ }
1476
+
1477
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
1478
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1479
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1480
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1481
+ }
1482
+
1483
+ /* stylelint-disable-next-line block-no-empty */
1484
+ .utrecht-select--html-select, .utrecht-html select {
1485
+ /* <select> does not support :read-only */
1486
+ }
1406
1487
  /**
1407
1488
  * @license EUPL-1.2
1408
1489
  * Copyright (c) 2021 Robbert Broersma
@@ -1416,7 +1497,7 @@
1416
1497
  .utrecht-separator, .utrecht-html hr {
1417
1498
  border-color: var(--utrecht-separator-color);
1418
1499
  border-style: solid;
1419
- border-width: 0 0 var(--utrecht-separator-width) 0;
1500
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1420
1501
  }
1421
1502
 
1422
1503
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1540,10 +1621,12 @@
1540
1621
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1541
1622
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1542
1623
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1624
+ min-block-size: var(--utrecht-textarea-min-block-size);
1543
1625
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1544
1626
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1545
1627
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1546
1628
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1629
+ resize: vertical;
1547
1630
  width: 100%;
1548
1631
  }
1549
1632
 
@@ -1568,6 +1651,9 @@
1568
1651
  outline-offset: 0;
1569
1652
  outline-style: var(--utrecht-focus-outline-style, solid);
1570
1653
  outline-width: var(--utrecht-focus-outline-width, 0);
1654
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1655
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1656
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1571
1657
  }
1572
1658
 
1573
1659
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1663,6 +1749,9 @@
1663
1749
  outline-offset: 0;
1664
1750
  outline-style: var(--utrecht-focus-outline-style, solid);
1665
1751
  outline-width: var(--utrecht-focus-outline-width, 0);
1752
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1753
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1754
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1666
1755
  }
1667
1756
 
1668
1757
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
package/dist/index.css CHANGED
@@ -52,6 +52,7 @@
52
52
  /* no inheritance */
53
53
  font-weight: var(--utrecht-badge-font-weight, bold);
54
54
  /* no inheritance */
55
+ line-height: var(--utrecht-badge-line-height);
55
56
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
56
57
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
57
58
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -79,6 +80,7 @@
79
80
  /* no inheritance */
80
81
  font-weight: var(--utrecht-badge-font-weight, bold);
81
82
  /* no inheritance */
83
+ line-height: var(--utrecht-badge-line-height);
82
84
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
83
85
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
84
86
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -124,6 +126,7 @@
124
126
  /* no inheritance */
125
127
  font-weight: var(--utrecht-badge-font-weight, bold);
126
128
  /* no inheritance */
129
+ line-height: var(--utrecht-badge-line-height);
127
130
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
128
131
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
129
132
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -156,6 +159,7 @@
156
159
  /* no inheritance */
157
160
  font-weight: var(--utrecht-badge-font-weight, bold);
158
161
  /* no inheritance */
162
+ line-height: var(--utrecht-badge-line-height);
159
163
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
160
164
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
161
165
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
@@ -356,11 +360,13 @@ ol.utrecht-breadcrumb__list {
356
360
  font-weight: var(--utrecht-button-font-weight);
357
361
  inline-size: var(--utrecht-button-inline-size, auto);
358
362
  letter-spacing: var(--utrecht-button-letter-spacing);
363
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
359
364
  padding-block-end: var(--utrecht-button-padding-block-end);
360
365
  padding-block-start: var(--utrecht-button-padding-block-start);
361
366
  padding-inline-end: var(--utrecht-button-padding-inline-end);
362
367
  padding-inline-start: var(--utrecht-button-padding-inline-start);
363
368
  text-transform: var(--utrecht-button-text-transform);
369
+ user-select: none;
364
370
  }
365
371
 
366
372
  .utrecht-button--distanced, .utrecht-html button {
@@ -570,6 +576,7 @@ ol.utrecht-breadcrumb__list {
570
576
  }
571
577
 
572
578
  .utrecht-form-label--disabled {
579
+ cursor: var(--utrecht-action-disabled-cursor);
573
580
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
574
581
  }
575
582
 
@@ -578,6 +585,110 @@ ol.utrecht-breadcrumb__list {
578
585
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
579
586
  }
580
587
 
588
+ /**
589
+ * @license EUPL-1.2
590
+ * Copyright (c) 2021 Robbert Broersma
591
+ */
592
+ .utrecht-form-toggle {
593
+ align-items: center;
594
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
595
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
596
+ border-style: var(--utrecht-form-toggle-border-style, solid);
597
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
598
+ color: var(--utrecht-form-toggle-color);
599
+ display: flex;
600
+ height: var(--utrecht-form-toggle-height, 2em);
601
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
602
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
603
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
604
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
605
+ position: relative;
606
+ user-select: none;
607
+ width: var(--utrecht-form-toggle-width, 6em);
608
+ }
609
+
610
+ .utrecht-form-toggle--focus {
611
+ border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
612
+ border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
613
+ border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
614
+ }
615
+
616
+ .utrecht-form-toggle--hover {
617
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
618
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
619
+ }
620
+
621
+ .utrecht-form-toggle--disabled {
622
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
623
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
624
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
625
+ cursor: var(--utrecht-action-disabled-cursor);
626
+ }
627
+
628
+ .utrecht-form-toggle__thumb {
629
+ /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
630
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
631
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
632
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
633
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
634
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
635
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
636
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
637
+ z-index: 20;
638
+ }
639
+
640
+ .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
641
+ margin-inline-start: auto;
642
+ }
643
+
644
+ .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
645
+ margin-inline-end: auto;
646
+ }
647
+
648
+ .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
649
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
650
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
651
+ }
652
+
653
+ .utrecht-form-toggle__track {
654
+ align-items: center;
655
+ background-color: var(--utrecht-form-toggle-accent-color);
656
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
657
+ display: flex;
658
+ height: 100%;
659
+ width: 100%;
660
+ }
661
+
662
+ .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
663
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
664
+ }
665
+
666
+ .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
667
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
668
+ color: var(--utrecht-form-toggle-disabled-color, black);
669
+ }
670
+
671
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
672
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
673
+ border: 0 !important;
674
+ clip: rect(1px, 1px, 1px, 1px) !important;
675
+ -webkit-clip-path: inset(50%) !important;
676
+ clip-path: inset(50%) !important;
677
+ height: 1px !important;
678
+ /* stylelint-disable-next-line property-disallowed-list */
679
+ margin: -1px !important;
680
+ overflow: hidden !important;
681
+ /* stylelint-disable-next-line property-disallowed-list */
682
+ padding: 0 !important;
683
+ position: absolute !important;
684
+ white-space: nowrap !important;
685
+ width: 1px !important;
686
+ }
687
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
688
+ outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
689
+ outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
690
+ outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
691
+ }
581
692
  /**
582
693
  * @license EUPL-1.2
583
694
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1304,6 +1415,7 @@ ol.utrecht-breadcrumb__list {
1304
1415
  }
1305
1416
 
1306
1417
  .utrecht-paragraph--lead, .utrecht-html p.lead {
1418
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1307
1419
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1308
1420
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1309
1421
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1361,6 +1473,67 @@ ol.utrecht-breadcrumb__list {
1361
1473
  background-size: var(--utrecht-search-bar-textbox-background-size);
1362
1474
  }
1363
1475
 
1476
+ /**
1477
+ * @license EUPL-1.2
1478
+ * Copyright (c) 2021 Robbert Broersma
1479
+ */
1480
+ .utrecht-select, .utrecht-html select {
1481
+ -moz-appearance: none;
1482
+ -webkit-appearance: none;
1483
+ appearance: none;
1484
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1485
+ background-image: var(--utrecht-select-background-image);
1486
+ background-position: 100%;
1487
+ background-repeat: no-repeat;
1488
+ background-size: 1.4em;
1489
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1490
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1491
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1492
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1493
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1494
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1495
+ border-style: solid;
1496
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1497
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1498
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1499
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1500
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1501
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1502
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1503
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1504
+ width: 100%;
1505
+ }
1506
+
1507
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
1508
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1509
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1510
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1511
+ cursor: var(--utrecht-action-disabled-cursor);
1512
+ }
1513
+
1514
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
1515
+ background-color: var(--utrecht-focus-background-color);
1516
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1517
+ color: var(--utrecht-focus-color, inherit);
1518
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1519
+ outline-offset: 0;
1520
+ outline-style: var(--utrecht-focus-outline-style, solid);
1521
+ outline-width: var(--utrecht-focus-outline-width, 0);
1522
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1523
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1524
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1525
+ }
1526
+
1527
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
1528
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1529
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1530
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1531
+ }
1532
+
1533
+ /* stylelint-disable-next-line block-no-empty */
1534
+ .utrecht-select--html-select, .utrecht-html select {
1535
+ /* <select> does not support :read-only */
1536
+ }
1364
1537
  /**
1365
1538
  * @license EUPL-1.2
1366
1539
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1370,7 +1543,7 @@ ol.utrecht-breadcrumb__list {
1370
1543
  .utrecht-separator, .utrecht-html hr {
1371
1544
  border-color: var(--utrecht-separator-color);
1372
1545
  border-style: solid;
1373
- border-width: 0 0 var(--utrecht-separator-width) 0;
1546
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1374
1547
  }
1375
1548
 
1376
1549
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1485,10 +1658,12 @@ ol.utrecht-breadcrumb__list {
1485
1658
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1486
1659
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1487
1660
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1661
+ min-block-size: var(--utrecht-textarea-min-block-size);
1488
1662
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1489
1663
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1490
1664
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1491
1665
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1666
+ resize: vertical;
1492
1667
  width: 100%;
1493
1668
  }
1494
1669
 
@@ -1513,6 +1688,9 @@ ol.utrecht-breadcrumb__list {
1513
1688
  outline-offset: 0;
1514
1689
  outline-style: var(--utrecht-focus-outline-style, solid);
1515
1690
  outline-width: var(--utrecht-focus-outline-width, 0);
1691
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1692
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1693
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1516
1694
  }
1517
1695
 
1518
1696
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1604,6 +1782,9 @@ ol.utrecht-breadcrumb__list {
1604
1782
  outline-offset: 0;
1605
1783
  outline-style: var(--utrecht-focus-outline-style, solid);
1606
1784
  outline-width: var(--utrecht-focus-outline-width, 0);
1785
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1786
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1787
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1607
1788
  }
1608
1789
 
1609
1790
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -1745,11 +1926,13 @@ ol.utrecht-breadcrumb__list {
1745
1926
  font-weight: var(--utrecht-button-font-weight);
1746
1927
  inline-size: var(--utrecht-button-inline-size, auto);
1747
1928
  letter-spacing: var(--utrecht-button-letter-spacing);
1929
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
1748
1930
  padding-block-end: var(--utrecht-button-padding-block-end);
1749
1931
  padding-block-start: var(--utrecht-button-padding-block-start);
1750
1932
  padding-inline-end: var(--utrecht-button-padding-inline-end);
1751
1933
  padding-inline-start: var(--utrecht-button-padding-inline-start);
1752
1934
  text-transform: var(--utrecht-button-text-transform);
1935
+ user-select: none;
1753
1936
  }
1754
1937
 
1755
1938
  .utrecht-button--distanced, .utrecht-html button {
@@ -1905,6 +2088,7 @@ ol.utrecht-breadcrumb__list {
1905
2088
  }
1906
2089
 
1907
2090
  .utrecht-form-label--disabled {
2091
+ cursor: var(--utrecht-action-disabled-cursor);
1908
2092
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
1909
2093
  }
1910
2094
 
@@ -2154,11 +2338,13 @@ ol.utrecht-breadcrumb__list {
2154
2338
  font-weight: var(--utrecht-button-font-weight);
2155
2339
  inline-size: var(--utrecht-button-inline-size, auto);
2156
2340
  letter-spacing: var(--utrecht-button-letter-spacing);
2341
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
2157
2342
  padding-block-end: var(--utrecht-button-padding-block-end);
2158
2343
  padding-block-start: var(--utrecht-button-padding-block-start);
2159
2344
  padding-inline-end: var(--utrecht-button-padding-inline-end);
2160
2345
  padding-inline-start: var(--utrecht-button-padding-inline-start);
2161
2346
  text-transform: var(--utrecht-button-text-transform);
2347
+ user-select: none;
2162
2348
  }
2163
2349
 
2164
2350
  .utrecht-button--distanced, .utrecht-html button {
@@ -2314,6 +2500,7 @@ ol.utrecht-breadcrumb__list {
2314
2500
  }
2315
2501
 
2316
2502
  .utrecht-form-label--disabled {
2503
+ cursor: var(--utrecht-action-disabled-cursor);
2317
2504
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
2318
2505
  }
2319
2506
 
@@ -2582,6 +2769,7 @@ ol.utrecht-breadcrumb__list {
2582
2769
  }
2583
2770
 
2584
2771
  .utrecht-paragraph--lead, .utrecht-html p.lead {
2772
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
2585
2773
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
2586
2774
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
2587
2775
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -2627,7 +2815,7 @@ ol.utrecht-breadcrumb__list {
2627
2815
  .utrecht-separator, .utrecht-html hr {
2628
2816
  border-color: var(--utrecht-separator-color);
2629
2817
  border-style: solid;
2630
- border-width: 0 0 var(--utrecht-separator-width) 0;
2818
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
2631
2819
  }
2632
2820
 
2633
2821
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -2751,10 +2939,12 @@ ol.utrecht-breadcrumb__list {
2751
2939
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
2752
2940
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
2753
2941
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
2942
+ min-block-size: var(--utrecht-textarea-min-block-size);
2754
2943
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
2755
2944
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
2756
2945
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
2757
2946
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
2947
+ resize: vertical;
2758
2948
  width: 100%;
2759
2949
  }
2760
2950
 
@@ -2779,6 +2969,9 @@ ol.utrecht-breadcrumb__list {
2779
2969
  outline-offset: 0;
2780
2970
  outline-style: var(--utrecht-focus-outline-style, solid);
2781
2971
  outline-width: var(--utrecht-focus-outline-width, 0);
2972
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
2973
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
2974
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2782
2975
  }
2783
2976
 
2784
2977
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -2874,6 +3067,9 @@ ol.utrecht-breadcrumb__list {
2874
3067
  outline-offset: 0;
2875
3068
  outline-style: var(--utrecht-focus-outline-style, solid);
2876
3069
  outline-width: var(--utrecht-focus-outline-width, 0);
3070
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3071
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3072
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2877
3073
  }
2878
3074
 
2879
3075
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -3038,6 +3234,7 @@ ol.utrecht-breadcrumb__list {
3038
3234
  }
3039
3235
 
3040
3236
  .utrecht-paragraph--lead, .utrecht-html p.lead {
3237
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
3041
3238
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
3042
3239
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
3043
3240
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -3070,6 +3267,71 @@ ol.utrecht-breadcrumb__list {
3070
3267
  cursor: var(--utrecht-action-disabled-cursor);
3071
3268
  }
3072
3269
 
3270
+ /**
3271
+ * @license EUPL-1.2
3272
+ * Copyright (c) 2021 Robbert Broersma
3273
+ */
3274
+ /**
3275
+ * @license EUPL-1.2
3276
+ * Copyright (c) 2021 Robbert Broersma
3277
+ */
3278
+ .utrecht-select, .utrecht-html select {
3279
+ -moz-appearance: none;
3280
+ -webkit-appearance: none;
3281
+ appearance: none;
3282
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
3283
+ background-image: var(--utrecht-select-background-image);
3284
+ background-position: 100%;
3285
+ background-repeat: no-repeat;
3286
+ background-size: 1.4em;
3287
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
3288
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3289
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
3290
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3291
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3292
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
3293
+ border-style: solid;
3294
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
3295
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
3296
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
3297
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
3298
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
3299
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
3300
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
3301
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
3302
+ width: 100%;
3303
+ }
3304
+
3305
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
3306
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3307
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3308
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
3309
+ cursor: var(--utrecht-action-disabled-cursor);
3310
+ }
3311
+
3312
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
3313
+ background-color: var(--utrecht-focus-background-color);
3314
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3315
+ color: var(--utrecht-focus-color, inherit);
3316
+ outline-color: var(--utrecht-focus-outline-color, transparent);
3317
+ outline-offset: 0;
3318
+ outline-style: var(--utrecht-focus-outline-style, solid);
3319
+ outline-width: var(--utrecht-focus-outline-width, 0);
3320
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3321
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3322
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
3323
+ }
3324
+
3325
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
3326
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3327
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3328
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
3329
+ }
3330
+
3331
+ /* stylelint-disable-next-line block-no-empty */
3332
+ .utrecht-select--html-select, .utrecht-html select {
3333
+ /* <select> does not support :read-only */
3334
+ }
3073
3335
  /**
3074
3336
  * @license EUPL-1.2
3075
3337
  * Copyright (c) 2021 Robbert Broersma
@@ -3083,7 +3345,7 @@ ol.utrecht-breadcrumb__list {
3083
3345
  .utrecht-separator, .utrecht-html hr {
3084
3346
  border-color: var(--utrecht-separator-color);
3085
3347
  border-style: solid;
3086
- border-width: 0 0 var(--utrecht-separator-width) 0;
3348
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
3087
3349
  }
3088
3350
 
3089
3351
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -3207,10 +3469,12 @@ ol.utrecht-breadcrumb__list {
3207
3469
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
3208
3470
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
3209
3471
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
3472
+ min-block-size: var(--utrecht-textarea-min-block-size);
3210
3473
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
3211
3474
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
3212
3475
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
3213
3476
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
3477
+ resize: vertical;
3214
3478
  width: 100%;
3215
3479
  }
3216
3480
 
@@ -3235,6 +3499,9 @@ ol.utrecht-breadcrumb__list {
3235
3499
  outline-offset: 0;
3236
3500
  outline-style: var(--utrecht-focus-outline-style, solid);
3237
3501
  outline-width: var(--utrecht-focus-outline-width, 0);
3502
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3503
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3504
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
3238
3505
  }
3239
3506
 
3240
3507
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -3330,6 +3597,9 @@ ol.utrecht-breadcrumb__list {
3330
3597
  outline-offset: 0;
3331
3598
  outline-style: var(--utrecht-focus-outline-style, solid);
3332
3599
  outline-width: var(--utrecht-focus-outline-width, 0);
3600
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3601
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3602
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
3333
3603
  }
3334
3604
 
3335
3605
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -3403,7 +3673,7 @@ ol.utrecht-breadcrumb__list {
3403
3673
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
3404
3674
  /**
3405
3675
  * Do not edit directly
3406
- * Generated on Fri, 24 Sep 2021 10:05:08 GMT
3676
+ * Generated on Sun, 26 Sep 2021 13:48:09 GMT
3407
3677
  */
3408
3678
  :root {
3409
3679
  --utrecht-searchbar-hover-transform: 1;
@@ -3459,8 +3729,10 @@ ol.utrecht-breadcrumb__list {
3459
3729
  /* basis geel #ffcc00 */
3460
3730
  --utrecht-color-yellow-40: hsl(48 100% 40%);
3461
3731
  /* donker geel */
3732
+ --utrecht-color-grey-95: hsl(0 0% 95%);
3733
+ /* grijs variant voor achtergrond accordion #f2f2f2 */
3462
3734
  --utrecht-color-grey-90: hsl(0 0% 90%);
3463
- /* grijs variant voor achtergrond templates #f2f2f2 */
3735
+ /* grijs variant voor achtergrond templates #e6e6e6 */
3464
3736
  --utrecht-color-grey-80: hsl(0 0% 80%);
3465
3737
  /* grijs variant voor achtergrond content #e5e5e5 */
3466
3738
  --utrecht-color-grey-40: hsl(0 0% 40%);
@@ -3480,7 +3752,7 @@ ol.utrecht-breadcrumb__list {
3480
3752
  --utrecht-color-blue-35: hsl(211 60% 35%);
3481
3753
  /* basis link en knoppen CTA donkerblauw */
3482
3754
  --utrecht-color-blue-30: hsl(211 60% 30%);
3483
- /* basis link en knoppen CTA donkerblauw */
3755
+ /* Deze kleur gebruiken we niet */
3484
3756
  --utrecht-color-blue-20: hsl(211 60% 20%);
3485
3757
  /* basis donkerblauw (OS focus) */
3486
3758
  --utrecht-color-red-40: hsl(0 100% 40%);
@@ -3608,7 +3880,7 @@ ol.utrecht-breadcrumb__list {
3608
3880
  /* Extra Small 2 */
3609
3881
  --utrecht-space-block-3xs: 2px;
3610
3882
  /* Extra Small 3 */
3611
- --utrecht-separator-width: 8px;
3883
+ --utrecht-separator-block-size: 8px;
3612
3884
  --utrecht-select-border-block-end-width: 3px;
3613
3885
  --utrecht-pre-heading-text-transform: uppercase;
3614
3886
  --utrecht-paragraph-line-height: 1.4;
@@ -3711,6 +3983,11 @@ ol.utrecht-breadcrumb__list {
3711
3983
  --utrecht-form-fieldset-legend-line-height: 1.4;
3712
3984
  --utrecht-form-fieldset-legend-font-size: 1rem;
3713
3985
  --utrecht-document-line-height: 1.4;
3986
+ --utrecht-custom-checkbox-focus-border-width: 3px;
3987
+ --utrecht-custom-checkbox-icon-size: 16px;
3988
+ --utrecht-custom-checkbox-size: 24px;
3989
+ --utrecht-custom-checkbox-border-width: 2px;
3990
+ --utrecht-custom-checkbox-border-radius: 2px;
3714
3991
  --utrecht-action-submit-cursor: pointer;
3715
3992
  --utrecht-action-disabled-cursor: not-allowed;
3716
3993
  --utrecht-action-busy-cursor: wait;
@@ -3873,6 +4150,13 @@ ol.utrecht-breadcrumb__list {
3873
4150
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
3874
4151
  --utrecht-document-color: var(--utrecht-color-black);
3875
4152
  --utrecht-document-background-color: var(--utrecht-color-white);
4153
+ --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
4154
+ --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-color-red-40);
4155
+ --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
4156
+ --utrecht-custom-checkbox-checked-background-color: var(--utrecht-color-blue-40);
4157
+ --utrecht-custom-checkbox-disabled-background-color: var(--utrecht-color-white);
4158
+ --utrecht-custom-checkbox-disabled-border-width: var(--utrecht-color-grey-40);
4159
+ --utrecht-custom-checkbox-disabled-border-color: var(--utrecht-color-grey-30);
3876
4160
  --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
3877
4161
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
3878
4162
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
@@ -3940,6 +4224,9 @@ ol.utrecht-breadcrumb__list {
3940
4224
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
3941
4225
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
3942
4226
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
4227
+ --utrecht-custom-checkbox-color: var(--utrecht-form-input-color);
4228
+ --utrecht-custom-checkbox-border-color: var(--utrecht-form-input-border-color);
4229
+ --utrecht-custom-checkbox-background-color: var(--utrecht-form-input-background-color);
3943
4230
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
3944
4231
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
3945
4232
  --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
@@ -3963,6 +4250,7 @@ ol.utrecht-breadcrumb__list {
3963
4250
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
3964
4251
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
3965
4252
  --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
4253
+ --utrecht-custom-checkbox-invalid-border-color: var(--utrecht-form-input-invalid-border-color);
3966
4254
  }
3967
4255
 
3968
4256
  .utrecht-page-footer {
package/dist/root-theme.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Fri, 24 Sep 2021 10:05:08 GMT
8
+ * Generated on Sun, 26 Sep 2021 13:48:09 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-searchbar-hover-transform: 1;
@@ -61,8 +61,10 @@
61
61
  /* basis geel #ffcc00 */
62
62
  --utrecht-color-yellow-40: hsl(48 100% 40%);
63
63
  /* donker geel */
64
+ --utrecht-color-grey-95: hsl(0 0% 95%);
65
+ /* grijs variant voor achtergrond accordion #f2f2f2 */
64
66
  --utrecht-color-grey-90: hsl(0 0% 90%);
65
- /* grijs variant voor achtergrond templates #f2f2f2 */
67
+ /* grijs variant voor achtergrond templates #e6e6e6 */
66
68
  --utrecht-color-grey-80: hsl(0 0% 80%);
67
69
  /* grijs variant voor achtergrond content #e5e5e5 */
68
70
  --utrecht-color-grey-40: hsl(0 0% 40%);
@@ -82,7 +84,7 @@
82
84
  --utrecht-color-blue-35: hsl(211 60% 35%);
83
85
  /* basis link en knoppen CTA donkerblauw */
84
86
  --utrecht-color-blue-30: hsl(211 60% 30%);
85
- /* basis link en knoppen CTA donkerblauw */
87
+ /* Deze kleur gebruiken we niet */
86
88
  --utrecht-color-blue-20: hsl(211 60% 20%);
87
89
  /* basis donkerblauw (OS focus) */
88
90
  --utrecht-color-red-40: hsl(0 100% 40%);
@@ -210,7 +212,7 @@
210
212
  /* Extra Small 2 */
211
213
  --utrecht-space-block-3xs: 2px;
212
214
  /* Extra Small 3 */
213
- --utrecht-separator-width: 8px;
215
+ --utrecht-separator-block-size: 8px;
214
216
  --utrecht-select-border-block-end-width: 3px;
215
217
  --utrecht-pre-heading-text-transform: uppercase;
216
218
  --utrecht-paragraph-line-height: 1.4;
@@ -313,6 +315,11 @@
313
315
  --utrecht-form-fieldset-legend-line-height: 1.4;
314
316
  --utrecht-form-fieldset-legend-font-size: 1rem;
315
317
  --utrecht-document-line-height: 1.4;
318
+ --utrecht-custom-checkbox-focus-border-width: 3px;
319
+ --utrecht-custom-checkbox-icon-size: 16px;
320
+ --utrecht-custom-checkbox-size: 24px;
321
+ --utrecht-custom-checkbox-border-width: 2px;
322
+ --utrecht-custom-checkbox-border-radius: 2px;
316
323
  --utrecht-action-submit-cursor: pointer;
317
324
  --utrecht-action-disabled-cursor: not-allowed;
318
325
  --utrecht-action-busy-cursor: wait;
@@ -475,6 +482,13 @@
475
482
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
476
483
  --utrecht-document-color: var(--utrecht-color-black);
477
484
  --utrecht-document-background-color: var(--utrecht-color-white);
485
+ --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
486
+ --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-color-red-40);
487
+ --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
488
+ --utrecht-custom-checkbox-checked-background-color: var(--utrecht-color-blue-40);
489
+ --utrecht-custom-checkbox-disabled-background-color: var(--utrecht-color-white);
490
+ --utrecht-custom-checkbox-disabled-border-width: var(--utrecht-color-grey-40);
491
+ --utrecht-custom-checkbox-disabled-border-color: var(--utrecht-color-grey-30);
478
492
  --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
479
493
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
480
494
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
@@ -542,6 +556,9 @@
542
556
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
543
557
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
544
558
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
559
+ --utrecht-custom-checkbox-color: var(--utrecht-form-input-color);
560
+ --utrecht-custom-checkbox-border-color: var(--utrecht-form-input-border-color);
561
+ --utrecht-custom-checkbox-background-color: var(--utrecht-form-input-background-color);
545
562
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
546
563
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
547
564
  --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
@@ -565,6 +582,7 @@
565
582
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
566
583
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
567
584
  --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
585
+ --utrecht-custom-checkbox-invalid-border-color: var(--utrecht-form-input-invalid-border-color);
568
586
  }
569
587
 
570
588
  .utrecht-page-footer {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.92",
2
+ "version": "1.0.0-alpha.96",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.85",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.89",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.41.1"
@@ -26,5 +26,5 @@
26
26
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
27
27
  "clean": "rimraf dist/"
28
28
  },
29
- "gitHead": "ffe4d8a94f4e1efc277e7732dd3693edfd167fea"
29
+ "gitHead": "7159835f38d0251f7408662231ed50bcfb784033"
30
30
  }
package/src/bem.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  @import "../../../components/form-field-radio-group/bem";
35
35
  @import "../../../components/form-fieldset/bem";
36
36
  @import "../../../components/form-label/bem";
37
+ @import "../../../components/form-toggle/bem";
37
38
  @import "../../../components/heading-1/bem";
38
39
  @import "../../../components/heading-2/bem";
39
40
  @import "../../../components/heading-3/bem";
@@ -51,6 +52,7 @@
51
52
  @import "../../../components/paragraph/bem";
52
53
  @import "../../../components/radio-button/bem";
53
54
  @import "../../../components/search-bar/bem";
55
+ @import "../../../components/select/bem";
54
56
  @import "../../../components/separator/bem";
55
57
  @import "../../../components/table/bem";
56
58
  @import "../../../components/textarea/bem";
package/src/html.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  @import "../../../components/ordered-list/html";
25
25
  @import "../../../components/paragraph/html";
26
26
  @import "../../../components/radio-button/html";
27
+ @import "../../../components/select/html";
27
28
  @import "../../../components/separator/html";
28
29
  @import "../../../components/table/html";
29
30
  @import "../../../components/textarea/html";