@utrecht/web-component-library-stencil 1.0.0-alpha.363 → 1.0.0-alpha.365

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 (45) hide show
  1. package/dist/cjs/utrecht-checkbox.cjs.entry.js +1 -1
  2. package/dist/cjs/utrecht-custom-checkbox.cjs.entry.js +1 -1
  3. package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js +1 -1
  4. package/dist/cjs/utrecht-form-field-description.cjs.entry.js +1 -1
  5. package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js +1 -1
  6. package/dist/cjs/utrecht-form-field-textbox.cjs.entry.js +3 -3
  7. package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
  8. package/dist/collection/checkbox/index.css +3 -2
  9. package/dist/collection/custom-checkbox/index.css +22 -2
  10. package/dist/collection/form-field-checkbox/index.css +92 -9
  11. package/dist/collection/form-field-description/index.css +4 -0
  12. package/dist/collection/form-field-textarea/index.css +91 -1
  13. package/dist/collection/form-field-textbox/index.css +3 -9
  14. package/dist/collection/form-field-textbox/index.stencil.js +3 -3
  15. package/dist/collection/html-content/index.css +21 -2
  16. package/dist/components/utrecht-checkbox.js +1 -1
  17. package/dist/components/utrecht-custom-checkbox.js +1 -1
  18. package/dist/components/utrecht-form-field-checkbox.js +1 -1
  19. package/dist/components/utrecht-form-field-description.js +1 -1
  20. package/dist/components/utrecht-form-field-textarea.js +1 -1
  21. package/dist/components/utrecht-form-field-textbox.js +3 -3
  22. package/dist/components/utrecht-html-content.js +1 -1
  23. package/dist/esm/utrecht-checkbox.entry.js +1 -1
  24. package/dist/esm/utrecht-custom-checkbox.entry.js +1 -1
  25. package/dist/esm/utrecht-form-field-checkbox.entry.js +1 -1
  26. package/dist/esm/utrecht-form-field-description.entry.js +1 -1
  27. package/dist/esm/utrecht-form-field-textarea.entry.js +1 -1
  28. package/dist/esm/utrecht-form-field-textbox.entry.js +3 -3
  29. package/dist/esm/utrecht-html-content.entry.js +1 -1
  30. package/dist/utrecht/p-1756e449.entry.js +1 -0
  31. package/dist/utrecht/p-3642d84d.entry.js +1 -0
  32. package/dist/utrecht/p-70d62149.entry.js +1 -0
  33. package/dist/utrecht/p-7201f969.entry.js +1 -0
  34. package/dist/utrecht/p-7aa78491.entry.js +1 -0
  35. package/dist/utrecht/p-a249efe3.entry.js +1 -0
  36. package/dist/utrecht/p-b21d4628.entry.js +1 -0
  37. package/dist/utrecht/utrecht.esm.js +1 -1
  38. package/package.json +4 -4
  39. package/dist/utrecht/p-0da8ffaa.entry.js +0 -1
  40. package/dist/utrecht/p-0f5932b1.entry.js +0 -1
  41. package/dist/utrecht/p-26d4825c.entry.js +0 -1
  42. package/dist/utrecht/p-713477c6.entry.js +0 -1
  43. package/dist/utrecht/p-9a41dbb0.entry.js +0 -1
  44. package/dist/utrecht/p-b3c38f57.entry.js +0 -1
  45. package/dist/utrecht/p-bcaee28d.entry.js +0 -1
package/dist/collection/custom-checkbox/index.css CHANGED
@@ -16,6 +16,7 @@
16
16
  * Copyright (c) 2021 Robbert Broersma
17
17
  */
18
18
  /* stylelint-disable-next-line block-no-empty */
19
+ .utrecht-checkbox--custom,
19
20
  .utrecht-custom-checkbox {
20
21
  -webkit-appearance: none;
21
22
  -moz-appearance: none;
@@ -26,7 +27,7 @@
26
27
  border-color: var(--utrecht-custom-checkbox-border-color);
27
28
  border-style: solid;
28
29
  border-width: var(--utrecht-custom-checkbox-border-width);
29
- cursor: var(--utrecht-action-activate-cursor);
30
+ cursor: var(--utrecht-action-activate-cursor, revert);
30
31
  height: var(--utrecht-custom-checkbox-size);
31
32
  margin-block-start: var(--utrecht-custom-checkbox-margin-block-start);
32
33
  -webkit-print-color-adjust: exact;
@@ -35,6 +36,7 @@
35
36
  width: var(--utrecht-custom-checkbox-size);
36
37
  }
37
38
 
39
+ .utrecht-checkbox--custom.utrecht-checkbox--checked,
38
40
  .utrecht-custom-checkbox--checked {
39
41
  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
40
42
  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 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -42,19 +44,23 @@
42
44
  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
43
45
  }
44
46
 
47
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled,
45
48
  .utrecht-custom-checkbox--disabled {
46
49
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
47
50
  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
48
51
  cursor: var(--utrecht-action-disabled-cursor);
49
52
  }
53
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
50
54
  .utrecht-custom-checkbox--disabled:checked {
51
55
  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
52
56
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
53
57
  }
58
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
54
59
  .utrecht-custom-checkbox--disabled:active {
55
60
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
56
61
  }
57
62
 
63
+ .utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
58
64
  .utrecht-custom-checkbox--indeterminate {
59
65
  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
60
66
  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");
@@ -63,11 +69,13 @@
63
69
  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
64
70
  }
65
71
 
72
+ .utrecht-checkbox--custom.utrecht-checkbox--invalid,
66
73
  .utrecht-custom-checkbox--invalid {
67
74
  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
68
75
  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
69
76
  }
70
77
 
78
+ .utrecht-checkbox--custom.utrecht-checkbox--active,
71
79
  .utrecht-custom-checkbox--active {
72
80
  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
73
81
  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 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -76,6 +84,7 @@
76
84
  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
77
85
  }
78
86
 
87
+ .utrecht-checkbox--custom.utrecht-checkbox--focus,
79
88
  .utrecht-custom-checkbox--focus {
80
89
  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
81
90
  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 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -83,6 +92,7 @@
83
92
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
84
93
  }
85
94
 
95
+ .utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
86
96
  .utrecht-custom-checkbox--focus-visible {
87
97
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
88
98
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -91,24 +101,29 @@
91
101
  outline-width: var(--utrecht-focus-outline-width, 0);
92
102
  }
93
103
 
104
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
94
105
  .utrecht-custom-checkbox--html-input:disabled {
95
106
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
96
107
  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
97
108
  cursor: var(--utrecht-action-disabled-cursor);
98
109
  }
110
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
99
111
  .utrecht-custom-checkbox--html-input:disabled:checked {
100
112
  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
101
113
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
102
114
  }
115
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
103
116
  .utrecht-custom-checkbox--html-input:disabled:active {
104
117
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
105
118
  }
119
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
106
120
  .utrecht-custom-checkbox--html-input:focus {
107
121
  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
108
122
  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 10 3 3 6-6'/%3e%3c/svg%3e");
109
123
  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
110
124
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
111
125
  }
126
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
112
127
  .utrecht-custom-checkbox--html-input:focus-visible {
113
128
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
114
129
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -116,10 +131,13 @@
116
131
  outline-style: var(--utrecht-focus-outline-style, solid);
117
132
  outline-width: var(--utrecht-focus-outline-width, 0);
118
133
  }
119
- .utrecht-custom-checkbox--html-input:invalid, .utrecht-custom-checkbox--html-input[aria-invalid=true] {
134
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
135
+ .utrecht-custom-checkbox--html-input:invalid,
136
+ .utrecht-custom-checkbox--html-input[aria-invalid=true] {
120
137
  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
121
138
  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
122
139
  }
140
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
123
141
  .utrecht-custom-checkbox--html-input:active {
124
142
  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
125
143
  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 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -127,12 +145,14 @@
127
145
  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
128
146
  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
129
147
  }
148
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
130
149
  .utrecht-custom-checkbox--html-input:checked {
131
150
  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
132
151
  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 10 3 3 6-6'/%3e%3c/svg%3e");
133
152
  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
134
153
  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
135
154
  }
155
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
136
156
  .utrecht-custom-checkbox--html-input:indeterminate {
137
157
  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
138
158
  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");
package/dist/collection/form-field-checkbox/index.css CHANGED
@@ -10,10 +10,7 @@
10
10
  * @license EUPL-1.2
11
11
  * Copyright (c) 2021 Robbert Broersma
12
12
  */
13
- /**
14
- * @license EUPL-1.2
15
- * Copyright (c) 2021 Robbert Broersma
16
- */
13
+ /* stylelint-disable-next-line block-no-empty */
17
14
  .utrecht-form-field {
18
15
  font-family: var(--utrecht-document-font-family, inherit);
19
16
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
@@ -26,8 +23,91 @@
26
23
  --utrecht-space-around: 1;
27
24
  }
28
25
 
29
- .utrecht-form-field__label--checkbox {
30
- margin-inline-start: 1ch;
26
+ .utrecht-form-field--invalid {
27
+ border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
28
+ border-inline-start-style: solid;
29
+ border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
30
+ padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
31
+ }
32
+
33
+ .utrecht-form-field--checkbox {
34
+ display: grid;
35
+ gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
36
+ grid-template-areas: "input label" "input description" "input description-invalid";
37
+ grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
38
+ /*
39
+ .utrecht-form-field__label .utrecht-form-field__input {
40
+ margin-inline-start: calc(
41
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
42
+ );
43
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
44
+ }
45
+ */
46
+ }
47
+ .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
48
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
49
+ }
50
+ .utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
51
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
52
+ }
53
+
54
+ .utrecht-form-field--radio {
55
+ display: grid;
56
+ gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
57
+ grid-template-areas: "input label" "input description" "input description-invalid";
58
+ grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
59
+ /*
60
+ .utrecht-form-field__label .utrecht-form-field__input {
61
+ margin-inline-start: calc(
62
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
63
+ );
64
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
65
+ }
66
+ */
67
+ }
68
+ .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
69
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
70
+ }
71
+ .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
72
+ margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
73
+ }
74
+
75
+ .utrecht-form-field__input {
76
+ grid-area: input;
77
+ order: 5;
78
+ }
79
+
80
+ .utrecht-form-field__label {
81
+ /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
82
+ and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
83
+ grid-area: label;
84
+ margin-block-end: var(--utrecht-form-field-label-margin-block-end);
85
+ margin-block-start: 0;
86
+ order: 1;
87
+ }
88
+
89
+ .utrecht-form-field .utrecht-form-field-description {
90
+ grid-area: description;
91
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
92
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
93
+ order: 2;
94
+ }
95
+
96
+ .utrecht-form-field .utrecht-form-field-description--invalid {
97
+ grid-area: description-invalid;
98
+ order: 3;
99
+ }
100
+
101
+ .utrecht-form-field__description {
102
+ grid-area: description;
103
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
104
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
105
+ order: 2;
106
+ }
107
+
108
+ .utrecht-form-field__description--before {
109
+ grid-area: description-before;
110
+ order: 4;
31
111
  }
32
112
 
33
113
  /**
@@ -46,6 +126,7 @@
46
126
 
47
127
  .utrecht-form-label--checkbox {
48
128
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
129
+ cursor: var(--utrecht-action-activate-cursor, revert);
49
130
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
50
131
  }
51
132
 
@@ -54,12 +135,13 @@
54
135
  }
55
136
 
56
137
  .utrecht-form-label--disabled {
57
- cursor: var(--utrecht-action-disabled-cursor);
138
+ cursor: var(--utrecht-action-disabled-cursor, revert);
58
139
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
59
140
  }
60
141
 
61
142
  .utrecht-form-label--radio {
62
143
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
144
+ cursor: var(--utrecht-action-activate-cursor, revert);
63
145
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
64
146
  }
65
147
 
@@ -90,11 +172,12 @@
90
172
  margin-block-start: 0;
91
173
  margin-inline-end: 0;
92
174
  margin-inline-start: 0;
175
+ cursor: var(--utrecht-action-activate-cursor, revert);
93
176
  }
94
177
 
95
178
  /* stylelint-disable-next-line block-no-empty */
96
179
  .utrecht-checkbox--disabled {
97
- cursor: var(--utrecht-action-disabled-cursor);
180
+ cursor: var(--utrecht-action-disabled-cursor, revert);
98
181
  }
99
182
 
100
183
  .utrecht-checkbox--focus-visible {
@@ -106,7 +189,7 @@
106
189
  }
107
190
 
108
191
  .utrecht-checkbox--html-input:disabled {
109
- cursor: var(--utrecht-action-disabled-cursor);
192
+ cursor: var(--utrecht-action-disabled-cursor, revert);
110
193
  }
111
194
  .utrecht-checkbox--html-input:focus {
112
195
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
package/dist/collection/form-field-description/index.css CHANGED
@@ -11,6 +11,7 @@
11
11
  * Copyright (c) 2021 Robbert Broersma
12
12
  */
13
13
  .utrecht-form-field-description {
14
+ --utrecht-document-color: currentColor;
14
15
  color: var(--utrecht-form-field-description-color);
15
16
  font-family: var(--utrecht-document-font-family, inherit);
16
17
  font-size: var(--utrecht-form-field-description-font-size, inherit);
@@ -18,6 +19,9 @@
18
19
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
19
20
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
20
21
  }
22
+ .utrecht-form-field-description > * {
23
+ --utrecht-space-around: 1;
24
+ }
21
25
 
22
26
  .utrecht-form-field-description--distanced {
23
27
  --utrecht-space-around: 1;
package/dist/collection/form-field-textarea/index.css CHANGED
@@ -18,6 +18,7 @@
18
18
 
19
19
  .utrecht-form-label--checkbox {
20
20
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
21
+ cursor: var(--utrecht-action-activate-cursor, revert);
21
22
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
22
23
  }
23
24
 
@@ -26,12 +27,13 @@
26
27
  }
27
28
 
28
29
  .utrecht-form-label--disabled {
29
- cursor: var(--utrecht-action-disabled-cursor);
30
+ cursor: var(--utrecht-action-disabled-cursor, revert);
30
31
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
31
32
  }
32
33
 
33
34
  .utrecht-form-label--radio {
34
35
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
36
+ cursor: var(--utrecht-action-activate-cursor, revert);
35
37
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
36
38
  }
37
39
 
@@ -43,6 +45,7 @@
43
45
  * @license EUPL-1.2
44
46
  * Copyright (c) 2021 Robbert Broersma
45
47
  */
48
+ /* stylelint-disable-next-line block-no-empty */
46
49
  .utrecht-form-field {
47
50
  font-family: var(--utrecht-document-font-family, inherit);
48
51
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
@@ -55,6 +58,93 @@
55
58
  --utrecht-space-around: 1;
56
59
  }
57
60
 
61
+ .utrecht-form-field--invalid {
62
+ border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
63
+ border-inline-start-style: solid;
64
+ border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
65
+ padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
66
+ }
67
+
68
+ .utrecht-form-field--checkbox {
69
+ display: grid;
70
+ gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
71
+ grid-template-areas: "input label" "input description" "input description-invalid";
72
+ grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
73
+ /*
74
+ .utrecht-form-field__label .utrecht-form-field__input {
75
+ margin-inline-start: calc(
76
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
77
+ );
78
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
79
+ }
80
+ */
81
+ }
82
+ .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
83
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
84
+ }
85
+ .utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
86
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
87
+ }
88
+
89
+ .utrecht-form-field--radio {
90
+ display: grid;
91
+ gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
92
+ grid-template-areas: "input label" "input description" "input description-invalid";
93
+ grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
94
+ /*
95
+ .utrecht-form-field__label .utrecht-form-field__input {
96
+ margin-inline-start: calc(
97
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
98
+ );
99
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
100
+ }
101
+ */
102
+ }
103
+ .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
104
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
105
+ }
106
+ .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
107
+ margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
108
+ }
109
+
110
+ .utrecht-form-field__input {
111
+ grid-area: input;
112
+ order: 5;
113
+ }
114
+
115
+ .utrecht-form-field__label {
116
+ /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
117
+ and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
118
+ grid-area: label;
119
+ margin-block-end: var(--utrecht-form-field-label-margin-block-end);
120
+ margin-block-start: 0;
121
+ order: 1;
122
+ }
123
+
124
+ .utrecht-form-field .utrecht-form-field-description {
125
+ grid-area: description;
126
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
127
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
128
+ order: 2;
129
+ }
130
+
131
+ .utrecht-form-field .utrecht-form-field-description--invalid {
132
+ grid-area: description-invalid;
133
+ order: 3;
134
+ }
135
+
136
+ .utrecht-form-field__description {
137
+ grid-area: description;
138
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
139
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
140
+ order: 2;
141
+ }
142
+
143
+ .utrecht-form-field__description--before {
144
+ grid-area: description-before;
145
+ order: 4;
146
+ }
147
+
58
148
  /**
59
149
  * @license EUPL-1.2
60
150
  * Copyright (c) 2021 Robbert Broersma
package/dist/collection/form-field-textbox/index.css CHANGED
@@ -2,14 +2,6 @@
2
2
  * @license EUPL-1.2
3
3
  * Copyright (c) 2021 Robbert Broersma
4
4
  */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Robbert Broersma
8
- */
9
- .utrecht-form-field-textbox {
10
- font-family: var(--utrecht-document-font-family, inherit);
11
- }
12
-
13
5
  /**
14
6
  * @license EUPL-1.2
15
7
  * Copyright (c) 2021 Robbert Broersma
@@ -26,6 +18,7 @@
26
18
 
27
19
  .utrecht-form-label--checkbox {
28
20
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
21
+ cursor: var(--utrecht-action-activate-cursor, revert);
29
22
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
30
23
  }
31
24
 
@@ -34,12 +27,13 @@
34
27
  }
35
28
 
36
29
  .utrecht-form-label--disabled {
37
- cursor: var(--utrecht-action-disabled-cursor);
30
+ cursor: var(--utrecht-action-disabled-cursor, revert);
38
31
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
39
32
  }
40
33
 
41
34
  .utrecht-form-label--radio {
42
35
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
36
+ cursor: var(--utrecht-action-activate-cursor, revert);
43
37
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
44
38
  }
45
39
 
package/dist/collection/form-field-textbox/index.stencil.js CHANGED
@@ -20,12 +20,12 @@ export class FormFieldTextbox {
20
20
  }
21
21
  render() {
22
22
  const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
23
- return (h("div", { class: "utrecht-form-field-textbox" },
24
- h("input", { id: "input", class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
23
+ return (h("div", { class: "utrecht-form-field-textbox utrecht-form-field--textbox" },
24
+ h("input", { id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
25
25
  this.value = evt.target.value;
26
26
  this.utrechtInput.emit(evt);
27
27
  } }),
28
- h("label", { class: "utrecht-form-field-textbox__label utrecht-form-label", htmlFor: "input" },
28
+ h("label", { class: "utrecht-form-field__label utrecht-form-label", htmlFor: "input" },
29
29
  h("slot", null))));
30
30
  }
31
31
  static get is() { return "utrecht-form-field-textbox"; }
package/dist/collection/html-content/index.css CHANGED
@@ -84,6 +84,16 @@
84
84
  * @license EUPL-1.2
85
85
  * Copyright (c) 2021 Robbert Broersma
86
86
  */
87
+ /**
88
+ * @license EUPL-1.2
89
+ * Copyright (c) 2020-2022 Gemeente Utrecht
90
+ * Copyright (c) 2020-2022 Frameless B.V.
91
+ */
92
+ /**
93
+ * @license EUPL-1.2
94
+ * Copyright (c) 2020-2022 Gemeente Utrecht
95
+ * Copyright (c) 2020-2022 Frameless B.V.
96
+ */
87
97
  /**
88
98
  * @license EUPL-1.2
89
99
  * Copyright (c) 2021 Robbert Broersma
@@ -655,9 +665,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
655
665
  margin-block-start: 0;
656
666
  margin-inline-end: 0;
657
667
  margin-inline-start: 0;
668
+ cursor: var(--utrecht-action-activate-cursor, revert);
658
669
  }
659
670
  .utrecht-html input[type=checkbox i]:disabled {
660
- cursor: var(--utrecht-action-disabled-cursor);
671
+ cursor: var(--utrecht-action-disabled-cursor, revert);
661
672
  }
662
673
  .utrecht-html input[type=checkbox i]:focus {
663
674
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
@@ -694,6 +705,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
694
705
  .utrecht-html fieldset {
695
706
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
696
707
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
708
+ all: revert;
697
709
  border: 0;
698
710
  margin-inline-end: 0;
699
711
  margin-inline-start: 0;
@@ -713,6 +725,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
713
725
  font-size: var(--utrecht-figure-caption-font-size);
714
726
  line-height: var(--utrecht-figure-caption-line-height);
715
727
  }
728
+ .utrecht-html form {
729
+ max-inline-size: var(--utrecht-form-max-inline-size);
730
+ }
716
731
  .utrecht-html legend {
717
732
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
718
733
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
@@ -722,6 +737,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
722
737
  page-break-after: avoid;
723
738
  page-break-inside: avoid;
724
739
  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
740
+ display: table;
725
741
  inline-size: 100%;
726
742
  padding-inline-end: 0;
727
743
  padding-inline-start: 0;
@@ -738,10 +754,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
738
754
  }
739
755
  .utrecht-html input[type=checkbox i] ~ label {
740
756
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
757
+ cursor: var(--utrecht-action-activate-cursor, revert);
741
758
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
742
759
  }
743
760
  .utrecht-html input[type=radio i] ~ label {
744
761
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
762
+ cursor: var(--utrecht-action-activate-cursor, revert);
745
763
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
746
764
  }
747
765
  .utrecht-html h1 {
@@ -935,9 +953,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
935
953
  margin-block-start: 0;
936
954
  margin-inline-end: 0;
937
955
  margin-inline-start: 0;
956
+ cursor: var(--utrecht-action-activate-cursor, revert);
938
957
  }
939
958
  .utrecht-html input[type=radio i]:disabled {
940
- cursor: var(--utrecht-action-disabled-cursor);
959
+ cursor: var(--utrecht-action-disabled-cursor, revert);
941
960
  }
942
961
  .utrecht-html input[type=radio i]:focus {
943
962
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
package/dist/components/utrecht-checkbox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/utrecht-custom-checkbox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;border-color:var(--utrecht-custom-checkbox-border-color);border-style:solid;border-width:var(--utrecht-custom-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor);height:var(--utrecht-custom-checkbox-size);margin-block-start:var(--utrecht-custom-checkbox-margin-block-start);-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top;width:var(--utrecht-custom-checkbox-size)}.utrecht-custom-checkbox--checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));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\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));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\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;border-color:var(--utrecht-custom-checkbox-border-color);border-style:solid;border-width:var(--utrecht-custom-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);height:var(--utrecht-custom-checkbox-size);margin-block-start:var(--utrecht-custom-checkbox-margin-block-start);-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top;width:var(--utrecht-custom-checkbox-size)}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));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\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input:focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));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 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));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\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const CustomCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/utrecht-form-field-checkbox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field__label--checkbox{margin-inline-start:1ch}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {