@utrecht/component-library-css 1.0.0-alpha.550 → 1.0.0-alpha.551

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 (3) hide show
  1. package/dist/html.css +6 -7
  2. package/dist/index.css +12 -9
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -849,7 +849,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
849
849
  line-height: var(--utrecht-form-fieldset-legend-line-height);
850
850
  page-break-after: avoid;
851
851
  page-break-inside: avoid;
852
- text-transform: var(--utrecht-form-fieldset-legend-text-transform);
853
852
  display: table;
854
853
  inline-size: 100%;
855
854
  padding-inline-end: 0;
@@ -904,7 +903,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
904
903
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
905
904
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
906
905
  page-break-after: avoid;
907
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
908
906
  --utrecht-space-around: 1;
909
907
  }
910
908
  .utrecht-html h2 {
@@ -919,7 +917,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
919
917
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
920
918
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
921
919
  page-break-after: avoid;
922
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
923
920
  --utrecht-space-around: 1;
924
921
  }
925
922
  .utrecht-html h3 {
@@ -934,7 +931,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
934
931
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
935
932
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
936
933
  page-break-after: avoid;
937
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
938
934
  --utrecht-space-around: 1;
939
935
  }
940
936
  .utrecht-html h4 {
@@ -949,7 +945,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
949
945
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
950
946
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
951
947
  page-break-after: avoid;
952
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
953
948
  --utrecht-space-around: 1;
954
949
  }
955
950
  .utrecht-html h5 {
@@ -964,7 +959,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
964
959
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
965
960
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
966
961
  page-break-after: avoid;
967
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
968
962
  --utrecht-space-around: 1;
969
963
  }
970
964
  .utrecht-html h6 {
@@ -979,7 +973,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
979
973
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
980
974
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
981
975
  page-break-after: avoid;
982
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
983
976
  --utrecht-space-around: 1;
984
977
  }
985
978
  .utrecht-html hgroup {
@@ -1120,6 +1113,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
1120
1113
  display: contents;
1121
1114
  }
1122
1115
  .utrecht-html input[type=radio i] {
1116
+ /*
1117
+ * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
1118
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
1119
+ */
1123
1120
  /*
1124
1121
  * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
1125
1122
  * With a 0% gradient, the circle will have jagged edges.
@@ -1161,6 +1158,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1161
1158
  cursor: var(--utrecht-action-activate-cursor);
1162
1159
  inline-size: var(--utrecht-radio-button-size, 1em);
1163
1160
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1161
+ min-block-size: 24px;
1162
+ min-inline-size: 24px;
1164
1163
  -webkit-print-color-adjust: exact;
1165
1164
  print-color-adjust: exact;
1166
1165
  -webkit-user-select: none;
package/dist/index.css CHANGED
@@ -2291,6 +2291,10 @@ ol.utrecht-breadcrumb__list {
2291
2291
  /* stylelint-disable-next-line block-no-empty */
2292
2292
  .utrecht-checkbox--custom,
2293
2293
  .utrecht-custom-checkbox {
2294
+ /*
2295
+ * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
2296
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
2297
+ */
2294
2298
  -webkit-appearance: none;
2295
2299
  -moz-appearance: none;
2296
2300
  appearance: none;
@@ -2304,6 +2308,8 @@ ol.utrecht-breadcrumb__list {
2304
2308
  cursor: var(--utrecht-action-activate-cursor, revert);
2305
2309
  inline-size: var(--utrecht-checkbox-size, 1em);
2306
2310
  margin-block-start: var(--utrecht-checkbox-margin-block-start);
2311
+ min-block-size: 24px;
2312
+ min-inline-size: 24px;
2307
2313
  -webkit-print-color-adjust: exact;
2308
2314
  print-color-adjust: exact;
2309
2315
  vertical-align: top;
@@ -2803,7 +2809,6 @@ ol.utrecht-breadcrumb__list {
2803
2809
  line-height: var(--utrecht-form-fieldset-legend-line-height);
2804
2810
  page-break-after: avoid;
2805
2811
  page-break-inside: avoid;
2806
- text-transform: var(--utrecht-form-fieldset-legend-text-transform);
2807
2812
  }
2808
2813
 
2809
2814
  .utrecht-form-fieldset__legend--disabled {
@@ -3045,7 +3050,6 @@ ol.utrecht-breadcrumb__list {
3045
3050
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
3046
3051
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
3047
3052
  page-break-after: avoid;
3048
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
3049
3053
  }
3050
3054
 
3051
3055
  .utrecht-heading-1--distanced {
@@ -3080,7 +3084,6 @@ ol.utrecht-breadcrumb__list {
3080
3084
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
3081
3085
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
3082
3086
  page-break-after: avoid;
3083
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
3084
3087
  }
3085
3088
 
3086
3089
  .utrecht-heading-2--distanced {
@@ -3115,7 +3118,6 @@ ol.utrecht-breadcrumb__list {
3115
3118
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
3116
3119
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
3117
3120
  page-break-after: avoid;
3118
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
3119
3121
  }
3120
3122
 
3121
3123
  .utrecht-heading-3--distanced {
@@ -3150,7 +3152,6 @@ ol.utrecht-breadcrumb__list {
3150
3152
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
3151
3153
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
3152
3154
  page-break-after: avoid;
3153
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
3154
3155
  }
3155
3156
 
3156
3157
  .utrecht-heading-4--distanced {
@@ -3185,7 +3186,6 @@ ol.utrecht-breadcrumb__list {
3185
3186
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
3186
3187
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
3187
3188
  page-break-after: avoid;
3188
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
3189
3189
  }
3190
3190
 
3191
3191
  .utrecht-heading-5--distanced {
@@ -3220,7 +3220,6 @@ ol.utrecht-breadcrumb__list {
3220
3220
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
3221
3221
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
3222
3222
  page-break-after: avoid;
3223
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
3224
3223
  }
3225
3224
 
3226
3225
  .utrecht-heading-6--distanced {
@@ -4753,7 +4752,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
4753
4752
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-end, 0));
4754
4753
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-start, 0));
4755
4754
  order: var(--utrecht-pre-heading-order, 0);
4756
- text-transform: var(--utrecht-pre-heading-text-transform, inherit);
4757
4755
  }
4758
4756
 
4759
4757
  .utrecht-pre-heading--distanced {
@@ -4776,6 +4774,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
4776
4774
  /* stylelint-disable-next-line block-no-empty */
4777
4775
  /* stylelint-disable-next-line block-no-empty */
4778
4776
  .utrecht-radio-button {
4777
+ /*
4778
+ * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
4779
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
4780
+ */
4779
4781
  /*
4780
4782
  * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
4781
4783
  * With a 0% gradient, the circle will have jagged edges.
@@ -4817,6 +4819,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
4817
4819
  cursor: var(--utrecht-action-activate-cursor);
4818
4820
  inline-size: var(--utrecht-radio-button-size, 1em);
4819
4821
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
4822
+ min-block-size: 24px;
4823
+ min-inline-size: 24px;
4820
4824
  -webkit-print-color-adjust: exact;
4821
4825
  print-color-adjust: exact;
4822
4826
  -webkit-user-select: none;
@@ -5099,7 +5103,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
5099
5103
  --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
5100
5104
  --utrecht-button-primary-action-color: var(--utrecht-search-bar-button-color);
5101
5105
  --utrecht-button-primary-action-hover-background-color: var(--utrecht-search-bar-button-hover-background-color);
5102
- --utrecht-button-text-transform: var(--utrecht-search-bar-button-text-transform);
5103
5106
  --utrecht-textbox-border-color: var(--utrecht-search-bar-input-border-color);
5104
5107
  --utrecht-textbox-padding-inline-start: var(--utrecht-search-bar-input-padding-inline-start);
5105
5108
  --utrecht-textbox-border-bottom-width: var(--utrecht-search-bar-input-border-bottom-width);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.550",
2
+ "version": "1.0.0-alpha.551",
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",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "d988dd782ac4d91d507bae7a08ac2d7dc65014d7"
29
+ "gitHead": "e60a8e1eec8698cd857dd4cf4d44444757e02deb"
30
30
  }