@nl-rvo/css-form-field 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/form-field.css +1 -0
  2. package/dist/form-field.css.map +1 -0
  3. package/package.json +15 -19
  4. package/src/form-field.scss +47 -0
  5. package/CHANGELOG.md +0 -49
  6. package/README.md +0 -0
  7. package/design-tokens.json +0 -92
  8. package/dist/index.css +0 -366
  9. package/dist/index.min.css +0 -1
  10. package/dist/index.mjs +0 -1
  11. package/dist/index.mjs.d.ts +0 -2
  12. package/src/index.scss +0 -23
package/dist/form-field.css ADDED
@@ -0,0 +1 @@
1
+ .rvo-form-field{display:flex;flex-direction:column;align-items:stretch;gap:var(--rvo-space-sm);clear:both}.rvo-form-field__label{display:flex;flex-direction:column;align-items:stretch;gap:var(--rvo-space-2xs)}.rvo-form-field__label .rvo-label{color:var(--rvo-label-color, var(--utrecht-document-color));font-size:var(--rvo-label-font-size);font-weight:var(--rvo-label-font-weight)}.rvo-form-field__label .rvo-label--sm{font-size:var(--rvo-label-sm-font-size);font-weight:var(--rvo-label-sm-font-weight)}.rvo-form-field__label .rvo-label--has-after-field::after{font-size:var(--rvo-label-after-field-font-size);font-weight:var(--rvo-label-after-field-font-weight);margin-inline-start:var(--rvo-space-2xs)}.rvo-form-field__label .rvo-label--optional::after{content:var(--rvo-label-optional-content)}.rvo-form-field__label .rvo-label--required::after{content:var(--rvo-label-required-content)}.rvo-form-field__label-text{font-weight:var(--utrecht-form-label-font-weight)}/*# sourceMappingURL=form-field.css.map */
package/dist/form-field.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/form-field.scss"],"names":[],"mappings":"AAIA,gBACE,aACA,sBACA,oBACA,wBACA,WAGF,uBACE,aACA,sBACA,oBACA,yBAEA,kCACE,4DACA,qCACA,yCAEA,sCACE,wCACA,4CAGF,0DACE,iDACA,qDACA,yCAGF,mDACE,0CAGF,mDACE,0CAKN,4BACE","file":"form-field.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.0",
2
+ "version": "1.8.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-form-field",
@@ -9,30 +9,26 @@
9
9
  "css",
10
10
  "form-field"
11
11
  ],
12
- "files": [
13
- "src/index.scss",
14
- "dist/",
15
- "design-tokens.json",
16
- "*.md"
17
- ],
18
- "main": "dist/index.css",
19
- "publishConfig": {
20
- "access": "public"
21
- },
22
12
  "repository": {
23
13
  "type": "git+ssh",
24
14
  "url": "git@github.com:nl-design-system/rvo.git",
25
- "directory": "components/form-field"
15
+ "directory": "components/form-field/style"
26
16
  },
27
- "devDependencies": {
28
- "@nl-rvo/build-utils-css": "0.1.0"
17
+ "files": [
18
+ "src/",
19
+ "dist/"
20
+ ],
21
+ "exports": {
22
+ ".": "./dist/form-field.css",
23
+ "./dist/*": "./dist/*"
29
24
  },
30
- "dependencies": {
31
- "@utrecht/form-field-css": "2.0.1",
32
- "@utrecht/form-field-description-css": "2.0.1"
25
+ "publishConfig": {
26
+ "access": "public",
27
+ "provenance": true
33
28
  },
34
29
  "scripts": {
35
- "build": "build-css-package",
36
- "clean": "rimraf dist"
30
+ "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
31
+ "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
32
+ "clean": "rimraf ./dist/"
37
33
  }
38
34
  }
package/src/form-field.scss ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * @license CC0-1.0
3
+ * Copyright (c) 2021 Community for NL Design System
4
+ */
5
+ .rvo-form-field {
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: stretch;
9
+ gap: var(--rvo-space-sm);
10
+ clear: both;
11
+ }
12
+
13
+ .rvo-form-field__label {
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: stretch;
17
+ gap: var(--rvo-space-2xs);
18
+
19
+ .rvo-label {
20
+ color: var(--rvo-label-color, var(--utrecht-document-color));
21
+ font-size: var(--rvo-label-font-size);
22
+ font-weight: var(--rvo-label-font-weight);
23
+
24
+ &--sm {
25
+ font-size: var(--rvo-label-sm-font-size);
26
+ font-weight: var(--rvo-label-sm-font-weight);
27
+ }
28
+
29
+ &--has-after-field::after {
30
+ font-size: var(--rvo-label-after-field-font-size);
31
+ font-weight: var(--rvo-label-after-field-font-weight);
32
+ margin-inline-start: var(--rvo-space-2xs);
33
+ }
34
+
35
+ &--optional::after {
36
+ content: var(--rvo-label-optional-content);
37
+ }
38
+
39
+ &--required::after {
40
+ content: var(--rvo-label-required-content);
41
+ }
42
+ }
43
+ }
44
+
45
+ .rvo-form-field__label-text {
46
+ font-weight: var(--utrecht-form-label-font-weight);
47
+ }
package/CHANGELOG.md DELETED
@@ -1,49 +0,0 @@
1
- # `@nl-rvo/css-form-field`
2
-
3
- ## 1.7.0
4
-
5
- ### Minor Changes
6
-
7
- - 8c0a7f8: Update related utrecht css packages.
8
-
9
- ## 1.6.0
10
-
11
- ### Minor Changes
12
-
13
- - fa36e07: Project structure updates
14
-
15
- - Moved all Storybook stories to the /stories directory.
16
- - Moved all documentation files to the /docs directory.
17
- - Removed React components from library-component-react and moved them into this package.
18
- - Update all .stories imports to the right react package "component-library-react"
19
- - Fix all Redundant / PascalCase lint warnings for .stories files.
20
-
21
- ## 1.5.0
22
-
23
- ### Minor Changes
24
-
25
- - 5442d67: Removed third party component imports and updated CSS to be inline with the original designs
26
-
27
- ## 1.4.0
28
-
29
- ### Minor Changes
30
-
31
- - cde2fed: Update Label component with new parameters and updated required text
32
-
33
- ## 1.3.0
34
-
35
- ### Minor Changes
36
-
37
- - ca618f4: The fieldId prop is no longer mandatory and the for attribute is now derived from the id prop instead.
38
-
39
- ## 1.2.0
40
-
41
- ### Minor Changes
42
-
43
- - 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
44
-
45
- ## 1.0.0
46
-
47
- ### Major Changes
48
-
49
- - daa0537: Create npm package for each component.
package/README.md DELETED
File without changes
package/design-tokens.json DELETED
@@ -1,92 +0,0 @@
1
- {
2
- "rvo": {
3
- "form-field": {
4
- "margin-block-end": {
5
- "css": {
6
- "syntax": "<length>",
7
- "inherits": true
8
- }
9
- },
10
- "margin-block-start": {
11
- "css": {
12
- "syntax": "<length>",
13
- "inherits": true
14
- }
15
- },
16
- "label": {
17
- "margin-block-end": {
18
- "css": {
19
- "syntax": "<length>",
20
- "inherits": true
21
- }
22
- },
23
- "margin-block-start": {
24
- "css": {
25
- "syntax": "<length>",
26
- "inherits": true
27
- }
28
- },
29
- "font-weight": {
30
- "css": {
31
- "syntax": "<number>",
32
- "inherits": true
33
- }
34
- }
35
- },
36
- "helper-text": {
37
- "line-height": {
38
- "css": {
39
- "syntax": "<length>",
40
- "inherits": true
41
- }
42
- },
43
- "padding-block-end": {
44
- "css": {
45
- "syntax": "<length>",
46
- "inherits": true
47
- }
48
- },
49
- "padding-block-start": {
50
- "css": {
51
- "syntax": "<length>",
52
- "inherits": true
53
- }
54
- },
55
- "gap": {
56
- "css": {
57
- "syntax": "<length>",
58
- "inherits": true
59
- }
60
- },
61
- "warning": {
62
- "color": {
63
- "css": {
64
- "syntax": "<color>",
65
- "inherits": true
66
- }
67
- },
68
- "font-weight": {
69
- "css": {
70
- "syntax": "<number>",
71
- "inherits": true
72
- }
73
- }
74
- },
75
- "error": {
76
- "color": {
77
- "css": {
78
- "syntax": "<color>",
79
- "inherits": true
80
- }
81
- },
82
- "font-weight": {
83
- "css": {
84
- "syntax": "<number>",
85
- "inherits": true
86
- }
87
- }
88
- }
89
- }
90
- }
91
- }
92
- }
package/dist/index.css DELETED
@@ -1,366 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2020-2024 Frameless B.V.
4
- * Copyright (c) 2021-2024 Gemeente Utrecht
5
- */
6
-
7
- /**
8
- * @license CC0-1.0
9
- * Copyright (c) 2021 Community for NL Design System
10
- */
11
-
12
- .utrecht-form-field {
13
- break-inside: avoid;
14
- font-family: var(--utrecht-document-font-family, inherit);
15
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
16
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
17
- page-break-inside: avoid;
18
- }
19
-
20
- .utrecht-form-field--distanced {
21
- --utrecht-space-around: 1;
22
- }
23
-
24
- .utrecht-form-field--invalid {
25
- border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
26
- border-inline-start-style: solid;
27
- border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
28
- padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
29
- }
30
-
31
- .utrecht-form-field--checkbox {
32
- display: grid;
33
- gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
34
- grid-template-areas: "input label" "input description" "input error-message";
35
- grid-template-columns: var(--utrecht-checkbox-size) 100fr;
36
- }
37
-
38
- .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
39
- margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
40
- }
41
-
42
- .utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
43
- margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
44
- }
45
-
46
- .utrecht-form-field--radio {
47
- display: grid;
48
- gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
49
- grid-template-areas: "input label" "input description" "input error-message";
50
- grid-template-columns: var(--utrecht-radio-button-size) 100fr;
51
- }
52
-
53
- .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
54
- margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
55
- }
56
-
57
- .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
58
- margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
59
- }
60
-
61
- .utrecht-form-field__input {
62
- margin-block-end: 0;
63
- margin-block-start: 0;
64
- grid-area: input;
65
- order: 5;
66
- }
67
-
68
- .utrecht-form-field__label {
69
- grid-area: label;
70
- margin-block-end: var(--utrecht-form-field-label-margin-block-end);
71
- margin-block-start: 0;
72
- order: 1;
73
- }
74
-
75
- .utrecht-form-field .utrecht-form-field-description {
76
- grid-area: description;
77
- margin-block-end: var(--utrecht-form-field-description-margin-block-end);
78
- margin-block-start: var(--utrecht-form-field-description-margin-block-start);
79
- order: 2;
80
- }
81
-
82
- .utrecht-form-field .utrecht-form-field-description--invalid {
83
- grid-area: error-message;
84
- order: 3;
85
- }
86
-
87
- .utrecht-form-field__description {
88
- grid-area: description;
89
- margin-block-end: var(--utrecht-form-field-description-margin-block-end);
90
- margin-block-start: var(--utrecht-form-field-description-margin-block-start);
91
- order: 2;
92
- }
93
-
94
- .utrecht-form-field__description--before {
95
- grid-area: description-before;
96
- order: 4;
97
- }
98
-
99
- .utrecht-form-field__error-message {
100
- grid-area: error-message;
101
- order: 3;
102
- }
103
- .utrecht-form-field-description {
104
- --utrecht-document-color: currentColor;
105
- color: var(--utrecht-form-field-description-color);
106
- font-family: var(--utrecht-document-font-family, inherit);
107
- font-size: var(--utrecht-form-field-description-font-size, inherit);
108
- font-style: var(--utrecht-form-field-description-font-style);
109
- line-height: var(--utrecht-form-field-description-line-height);
110
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
111
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
112
- }
113
-
114
- .utrecht-form-field-description > * {
115
- --utrecht-space-around: 1;
116
- }
117
-
118
- .utrecht-form-field-description--distanced {
119
- --utrecht-space-around: 1;
120
- }
121
-
122
- .utrecht-form-field-description--invalid {
123
- color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)));
124
- }
125
-
126
- .utrecht-form-field-description--valid {
127
- color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)));
128
- }
129
-
130
- .utrecht-form-field-description--warning {
131
- color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
132
- }
133
- .rvo-layout-column, .rvo-form-field, .rvo-form-field__label {
134
- align-items: stretch;
135
- display: flex;
136
- flex-direction: column;
137
- }
138
-
139
- .rvo-layout-column-inline {
140
- align-items: stretch;
141
- display: inline-flex;
142
- flex-direction: column;
143
- }
144
-
145
- .rvo-layout-row {
146
- align-items: center;
147
- display: flex;
148
- flex-direction: row;
149
- }
150
-
151
- .rvo-layout-row-inline {
152
- align-items: stretch;
153
- display: inline-flex;
154
- flex-direction: row;
155
- }
156
-
157
- .rvo-layout-align-items-start {
158
- align-items: flex-start;
159
- }
160
-
161
- .rvo-layout-align-items-center {
162
- align-items: center;
163
- }
164
-
165
- .rvo-layout-align-items-end {
166
- align-items: flex-end;
167
- }
168
-
169
- .rvo-layout-align-content-start {
170
- align-content: flex-start;
171
- }
172
-
173
- .rvo-layout-align-content-center {
174
- align-content: center;
175
- }
176
-
177
- .rvo-layout-align-content-end {
178
- align-content: flex-end;
179
- }
180
-
181
- .rvo-layout-align-content-space-between {
182
- align-content: space-between;
183
- }
184
-
185
- .rvo-layout-justify-content-start {
186
- justify-content: flex-start;
187
- }
188
-
189
- .rvo-layout-justify-content-center {
190
- justify-content: center;
191
- }
192
-
193
- .rvo-layout-justify-content-end {
194
- justify-content: flex-end;
195
- }
196
-
197
- .rvo-layout-justify-content-space-between {
198
- justify-content: space-between;
199
- }
200
-
201
- .rvo-layout-justify-items-start {
202
- justify-items: flex-start;
203
- }
204
-
205
- .rvo-layout-justify-items-center {
206
- justify-items: center;
207
- }
208
-
209
- .rvo-layout-justify-items-end {
210
- justify-items: flex-end;
211
- }
212
-
213
- .rvo-layout--wrap {
214
- flex-wrap: wrap;
215
- }
216
-
217
- .rvo-layout-gap--0 {
218
- gap: 0;
219
- }
220
-
221
- .rvo-layout-gap--3xs {
222
- gap: var(--rvo-space-3xs);
223
- }
224
-
225
- .rvo-layout-gap--2xs, .rvo-form-field__label {
226
- gap: var(--rvo-space-2xs);
227
- }
228
-
229
- .rvo-layout-gap--xs {
230
- gap: var(--rvo-space-xs);
231
- }
232
-
233
- .rvo-layout-gap--sm, .rvo-form-field {
234
- gap: var(--rvo-space-sm);
235
- }
236
-
237
- .rvo-layout-gap--md {
238
- gap: var(--rvo-space-md);
239
- }
240
-
241
- .rvo-layout-gap--lg {
242
- gap: var(--rvo-space-lg);
243
- }
244
-
245
- .rvo-layout-gap--xl {
246
- gap: var(--rvo-space-xl);
247
- }
248
-
249
- .rvo-layout-gap--2xl {
250
- gap: var(--rvo-space-2xl);
251
- }
252
-
253
- .rvo-layout-gap--3xl {
254
- gap: var(--rvo-space-3xl);
255
- }
256
-
257
- .rvo-layout-gap--4xl {
258
- gap: var(--rvo-space-4xl);
259
- }
260
-
261
- .rvo-layout-gap--5xl {
262
- gap: var(--rvo-space-5xl);
263
- }
264
-
265
- .rvo-layout-margin-horizontal--0 {
266
- margin-inline: 0;
267
- }
268
-
269
- .rvo-layout-margin-vertical--0 {
270
- margin-block: 0;
271
- }
272
-
273
- .rvo-layout-margin-horizontal--3xs {
274
- margin-inline: var(--rvo-space-3xs);
275
- }
276
-
277
- .rvo-layout-margin-vertical--3xs {
278
- margin-block: var(--rvo-space-3xs);
279
- }
280
-
281
- .rvo-layout-margin-horizontal--2xs {
282
- margin-inline: var(--rvo-space-2xs);
283
- }
284
-
285
- .rvo-layout-margin-vertical--2xs {
286
- margin-block: var(--rvo-space-2xs);
287
- }
288
-
289
- .rvo-layout-margin-horizontal--xs {
290
- margin-inline: var(--rvo-space-xs);
291
- }
292
-
293
- .rvo-layout-margin-vertical--xs {
294
- margin-block: var(--rvo-space-xs);
295
- }
296
-
297
- .rvo-layout-margin-horizontal--sm {
298
- margin-inline: var(--rvo-space-sm);
299
- }
300
-
301
- .rvo-layout-margin-vertical--sm {
302
- margin-block: var(--rvo-space-sm);
303
- }
304
-
305
- .rvo-layout-margin-horizontal--md {
306
- margin-inline: var(--rvo-space-md);
307
- }
308
-
309
- .rvo-layout-margin-vertical--md {
310
- margin-block: var(--rvo-space-md);
311
- }
312
-
313
- .rvo-layout-margin-horizontal--lg {
314
- margin-inline: var(--rvo-space-lg);
315
- }
316
-
317
- .rvo-layout-margin-vertical--lg {
318
- margin-block: var(--rvo-space-lg);
319
- }
320
-
321
- .rvo-layout-margin-horizontal--xl {
322
- margin-inline: var(--rvo-space-xl);
323
- }
324
-
325
- .rvo-layout-margin-vertical--xl {
326
- margin-block: var(--rvo-space-xl);
327
- }
328
-
329
- .rvo-layout-margin-horizontal--2xl {
330
- margin-inline: var(--rvo-space-2xl);
331
- }
332
-
333
- .rvo-layout-margin-vertical--2xl {
334
- margin-block: var(--rvo-space-2xl);
335
- }
336
-
337
- .rvo-layout-margin-horizontal--3xl {
338
- margin-inline: var(--rvo-space-3xl);
339
- }
340
-
341
- .rvo-layout-margin-vertical--3xl {
342
- margin-block: var(--rvo-space-3xl);
343
- }
344
-
345
- .rvo-layout-margin-horizontal--4xl {
346
- margin-inline: var(--rvo-space-4xl);
347
- }
348
-
349
- .rvo-layout-margin-vertical--4xl {
350
- margin-block: var(--rvo-space-4xl);
351
- }
352
-
353
- .rvo-layout-margin-horizontal--5xl {
354
- margin-inline: var(--rvo-space-5xl);
355
- }
356
-
357
- .rvo-layout-margin-vertical--5xl {
358
- margin-block: var(--rvo-space-5xl);
359
- }
360
- .rvo-form-field {
361
- clear: both;
362
- }
363
-
364
- .rvo-form-field__label-text {
365
- font-weight: var(--utrecht-form-label-font-weight);
366
- }
package/dist/index.min.css DELETED
@@ -1 +0,0 @@
1
- .utrecht-form-field{break-inside:avoid;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));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,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--distanced,.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color,var(--utrecht-feedback-invalid-color,var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color,var(--utrecht-feedback-valid-color,var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color,var(--utrecht-feedback-warning-color))}.rvo-form-field,.rvo-form-field__label,.rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-form-field__label,.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-form-field,.rvo-layout-gap--sm{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-form-field{clear:both}.rvo-form-field__label-text{font-weight:var(--utrecht-form-label-font-weight)}
package/dist/index.mjs DELETED
@@ -1 +0,0 @@
1
- export default ".utrecht-form-field{break-inside:avoid;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));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,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--distanced,.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color,var(--utrecht-feedback-invalid-color,var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color,var(--utrecht-feedback-valid-color,var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color,var(--utrecht-feedback-warning-color))}.rvo-form-field,.rvo-form-field__label,.rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-form-field__label,.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-form-field,.rvo-layout-gap--sm{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-form-field{clear:both}.rvo-form-field__label-text{font-weight:var(--utrecht-form-label-font-weight)}";
package/dist/index.mjs.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;
package/src/index.scss DELETED
@@ -1,23 +0,0 @@
1
- /**
2
- * @license CC0-1.0
3
- * Copyright (c) 2021 Community for NL Design System
4
- */
5
- @use "~@utrecht/form-field-css/dist/index.css" as *;
6
- @use "~@utrecht/form-field-description-css/dist/index.css" as *;
7
- @use "../../layout-flow/src" as *;
8
-
9
- .rvo-form-field {
10
- clear: both;
11
-
12
- @extend .rvo-layout-column;
13
- @extend .rvo-layout-gap--sm;
14
- }
15
-
16
- .rvo-form-field__label {
17
- @extend .rvo-layout-column;
18
- @extend .rvo-layout-gap--2xs;
19
- }
20
-
21
- .rvo-form-field__label-text {
22
- font-weight: var(--utrecht-form-label-font-weight);
23
- }