@entur/form 8.2.6 → 8.2.7

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 (2) hide show
  1. package/dist/styles.css +394 -394
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,5 +1,226 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-feedback-text {
4
+ display: flex;
5
+ align-items: center;
6
+ margin-top: 0.25rem;
7
+ }
8
+ .eds-feedback-text--info, .eds-feedback-text--information {
9
+ padding-left: calc(1rem + 0.125rem);
10
+ }
11
+ .eds-feedback-text__text {
12
+ color: var(--components-form-feedbacktext-information-standard-text);
13
+ }
14
+ .eds-contrast .eds-feedback-text__text {
15
+ color: var(--components-form-feedbacktext-information-contrast-text);
16
+ }
17
+
18
+ .eds-feedback-text__icon {
19
+ font-size: 1.5rem;
20
+ min-height: 1.5rem;
21
+ min-width: 1.5rem;
22
+ padding-right: 0.5rem;
23
+ position: relative;
24
+ top: -0.1rem;
25
+ }
26
+ .eds-feedback-text__icon--success {
27
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
28
+ }
29
+ .eds-feedback-text__icon--success circle {
30
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
31
+ }
32
+ .eds-contrast .eds-feedback-text__icon--success {
33
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
34
+ }
35
+ .eds-contrast .eds-feedback-text__icon--success circle {
36
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
37
+ }
38
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
39
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
40
+ }
41
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
42
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
43
+ }
44
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
45
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
46
+ }
47
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
48
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
49
+ }
50
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
51
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
52
+ }
53
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
54
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
55
+ }
56
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
57
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
58
+ }
59
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
61
+ }
62
+ .eds-feedback-text__icon--warning {
63
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
64
+ }
65
+ .eds-feedback-text__icon--warning .svg-exclamation {
66
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
67
+ }
68
+ .eds-contrast .eds-feedback-text__icon--warning {
69
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
70
+ }
71
+ .eds-contrast .eds-feedback-text__icon--warning circle {
72
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
73
+ }
74
+ /* DO NOT CHANGE!*/
75
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
76
+ .eds-checkbox__container {
77
+ display: flex;
78
+ align-items: center;
79
+ position: relative;
80
+ -webkit-appearance: none;
81
+ -moz-appearance: none;
82
+ appearance: none;
83
+ cursor: pointer;
84
+ -webkit-user-select: none;
85
+ -moz-user-select: none;
86
+ user-select: none;
87
+ width: -moz-fit-content;
88
+ width: fit-content;
89
+ margin: 0.5rem 0;
90
+ }
91
+ .eds-checkbox__container--reduced-click-area {
92
+ height: -moz-fit-content;
93
+ height: fit-content;
94
+ }
95
+ .eds-checkbox__container input {
96
+ position: absolute;
97
+ opacity: 0;
98
+ height: 0;
99
+ width: 0;
100
+ }
101
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
102
+ background-color: var(--components-form-checkbox-standard-fill-selected);
103
+ }
104
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
105
+ visibility: visible;
106
+ }
107
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
108
+ stroke: var(--components-form-checkbox-standard-icon);
109
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
110
+ }
111
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
112
+ fill: var(--components-form-checkbox-standard-icon);
113
+ }
114
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
115
+ opacity: 0.5;
116
+ }
117
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
118
+ opacity: 0.5;
119
+ }
120
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
121
+ opacity: 0.5;
122
+ }
123
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
124
+ opacity: 0.5;
125
+ }
126
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
127
+ opacity: 0.5;
128
+ }
129
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
130
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
131
+ }
132
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
133
+ stroke: var(--components-form-checkbox-contrast-icon);
134
+ }
135
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
136
+ fill: var(--components-form-checkbox-contrast-icon);
137
+ }
138
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
139
+ border-color: var(--components-form-checkbox-standard-border);
140
+ background-color: var(--components-form-checkbox-standard-fill-hover);
141
+ }
142
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
143
+ border-color: var(--components-form-checkbox-contrast-border);
144
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
145
+ }
146
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
147
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
148
+ border-color: transparent;
149
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
150
+ }
151
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
152
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
153
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
154
+ }
155
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
156
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
157
+ background-color: var(--components-form-checkbox-standard-fill-selected);
158
+ }
159
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
160
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
161
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
162
+ }
163
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
164
+ outline: 2px solid #181c56;
165
+ outline-color: var(--basecolors-stroke-focus-standard);
166
+ outline-offset: 0.125rem;
167
+ }
168
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
169
+ outline-color: var(--basecolors-stroke-focus-contrast);
170
+ }
171
+ .eds-checkbox--disabled {
172
+ pointer-events: none;
173
+ }
174
+ .eds-checkbox--disabled .eds-checkbox__label {
175
+ opacity: 0.5;
176
+ }
177
+ .eds-checkbox--disabled .eds-checkbox__icon {
178
+ opacity: 0.5;
179
+ }
180
+ .eds-checkbox__icon {
181
+ box-sizing: border-box;
182
+ display: inline-flex;
183
+ justify-content: center;
184
+ align-items: center;
185
+ position: relative;
186
+ margin-right: 1rem;
187
+ height: 1.25rem;
188
+ width: 1.25rem;
189
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
190
+ border-radius: 0.125rem;
191
+ background-color: transparent;
192
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
193
+ }
194
+ .eds-checkbox__icon--reduced-click-area {
195
+ margin-right: 0;
196
+ }
197
+ .eds-contrast .eds-checkbox__icon {
198
+ border-color: var(--components-form-checkbox-contrast-border);
199
+ }
200
+ .eds-checkbox__icon .eds-checkbox-icon {
201
+ height: 1rem;
202
+ width: 1rem;
203
+ visibility: hidden;
204
+ }
205
+ .eds-checkbox__icon .eds-checkbox-icon path {
206
+ transform-origin: 50% 50%;
207
+ stroke-dasharray: 48;
208
+ stroke-dashoffset: 48;
209
+ stroke-width: 0.375rem;
210
+ }
211
+
212
+ @keyframes stroke {
213
+ 100% {
214
+ stroke-dashoffset: 0;
215
+ }
216
+ }
217
+ .eds-fieldset {
218
+ margin: 0;
219
+ padding: 0;
220
+ border: 0;
221
+ }
222
+ /* DO NOT CHANGE!*/
223
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
224
  .eds-form-control__field-and-feedback-text {
4
225
  display: flex;
5
226
  flex-direction: column;
@@ -206,110 +427,17 @@
206
427
  margin-right: 0;
207
428
  margin-left: 0.75rem;
208
429
  }
209
- .eds-fieldset {
210
- margin: 0;
211
- padding: 0;
212
- border: 0;
213
- }
214
430
  /* DO NOT CHANGE!*/
215
431
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
216
- .eds-input-group {
217
- color: inherit;
218
- display: block;
219
- position: relative;
220
- }
221
- .eds-input-group__label {
222
- color: var(--components-form-baseform-standard-text-label);
432
+ .eds-form-component--radio__container {
223
433
  display: flex;
224
- font-size: 1rem;
225
- position: absolute;
226
- line-height: 1rem;
227
- height: 3rem;
228
- padding-left: 0;
229
- top: 1rem;
230
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
231
- -webkit-user-select: none;
232
- -moz-user-select: none;
233
- user-select: none;
234
- pointer-events: none;
235
- }
236
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
237
- top: 0.375rem;
238
- font-size: 0.75rem;
239
- line-height: 0.75rem;
240
- height: 10px;
241
- padding: 0;
242
- }
243
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
244
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
245
- background: var(--textarea-label-background);
246
- width: calc(100% - 1rem - 1rem - 4px);
247
- }
248
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
249
- top: 0.5rem;
250
- font-size: 0.875rem;
251
- line-height: 1rem;
252
- padding: 0;
253
- }
254
- .eds-form-control-wrapper--size-large .eds-input-group__label {
255
- top: 0.75rem;
256
- font-size: 1.5rem;
257
- line-height: 2.25rem;
258
- }
259
- .eds-input-group__label--filled {
260
- top: 0.375rem;
261
- font-size: 0.75rem;
262
- line-height: 0.75rem;
263
- height: 10px;
264
- padding: 0;
265
- }
266
- .eds-textarea__label .eds-input-group__label--filled {
267
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
268
- background: var(--textarea-label-background);
269
- width: calc(100% - 1rem - 1rem - 4px);
270
- }
271
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
272
- top: 0.5rem;
273
- font-size: 0.875rem;
274
- line-height: 1rem;
275
- padding: 0;
276
- }
277
-
278
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
279
- top: 0.375rem;
280
- font-size: 0.75rem;
281
- line-height: 0.75rem;
282
- height: 10px;
283
- padding: 0;
284
- }
285
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
286
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
287
- background: var(--textarea-label-background);
288
- width: calc(100% - 1rem - 1rem - 4px);
289
- }
290
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
291
- top: 0.5rem;
292
- font-size: 0.875rem;
293
- line-height: 1rem;
294
- padding: 0;
295
- }
296
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
297
- top: 1rem;
298
- font-size: 1rem;
299
- height: 3rem;
300
- line-height: 1rem;
301
- }
302
- /* DO NOT CHANGE!*/
303
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
304
- .eds-form-component--radio__container {
305
- display: flex;
306
- justify-content: center;
307
- align-items: center;
308
- position: relative;
309
- cursor: pointer;
310
- height: 2rem;
311
- width: -moz-fit-content;
312
- width: fit-content;
434
+ justify-content: center;
435
+ align-items: center;
436
+ position: relative;
437
+ cursor: pointer;
438
+ height: 2rem;
439
+ width: -moz-fit-content;
440
+ width: fit-content;
313
441
  -webkit-user-select: none;
314
442
  -moz-user-select: none;
315
443
  user-select: none;
@@ -383,219 +511,210 @@
383
511
  }
384
512
  /* DO NOT CHANGE!*/
385
513
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
386
- .eds-feedback-text {
387
- display: flex;
388
- align-items: center;
389
- margin-top: 0.25rem;
390
- }
391
- .eds-feedback-text--info, .eds-feedback-text--information {
392
- padding-left: calc(1rem + 0.125rem);
393
- }
394
- .eds-feedback-text__text {
395
- color: var(--components-form-feedbacktext-information-standard-text);
396
- }
397
- .eds-contrast .eds-feedback-text__text {
398
- color: var(--components-form-feedbacktext-information-contrast-text);
399
- }
400
-
401
- .eds-feedback-text__icon {
402
- font-size: 1.5rem;
403
- min-height: 1.5rem;
404
- min-width: 1.5rem;
405
- padding-right: 0.5rem;
406
- position: relative;
407
- top: -0.1rem;
408
- }
409
- .eds-feedback-text__icon--success {
410
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
411
- }
412
- .eds-feedback-text__icon--success circle {
413
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
414
- }
415
- .eds-contrast .eds-feedback-text__icon--success {
416
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
417
- }
418
- .eds-contrast .eds-feedback-text__icon--success circle {
419
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
420
- }
421
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
422
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
423
- }
424
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
425
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
426
- }
427
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
428
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
429
- }
430
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
431
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
432
- }
433
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
434
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
435
- }
436
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
437
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
438
- }
439
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
440
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
441
- }
442
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
443
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
444
- }
445
- .eds-feedback-text__icon--warning {
446
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
447
- }
448
- .eds-feedback-text__icon--warning .svg-exclamation {
449
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
450
- }
451
- .eds-contrast .eds-feedback-text__icon--warning {
452
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
453
- }
454
- .eds-contrast .eds-feedback-text__icon--warning circle {
455
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
456
- }
457
- /* DO NOT CHANGE!*/
458
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
459
- .eds-checkbox__container {
460
- display: flex;
461
- align-items: center;
462
- position: relative;
463
- -webkit-appearance: none;
464
- -moz-appearance: none;
465
- appearance: none;
514
+ .eds-switch {
466
515
  cursor: pointer;
467
516
  -webkit-user-select: none;
468
517
  -moz-user-select: none;
469
518
  user-select: none;
519
+ padding: 0.5rem 0;
470
520
  width: -moz-fit-content;
471
521
  width: fit-content;
472
- margin: 0.5rem 0;
473
- }
474
- .eds-checkbox__container--reduced-click-area {
475
- height: -moz-fit-content;
476
- height: fit-content;
477
522
  }
478
- .eds-checkbox__container input {
479
- position: absolute;
523
+ .eds-switch input {
480
524
  opacity: 0;
481
- height: 0;
482
- width: 0;
525
+ pointer-events: none;
526
+ position: absolute;
483
527
  }
484
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
485
- background-color: var(--components-form-checkbox-standard-fill-selected);
528
+ .eds-switch--right {
529
+ display: flex;
530
+ flex-direction: row;
531
+ align-items: center;
486
532
  }
487
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
488
- visibility: visible;
533
+ .eds-switch--bottom {
534
+ display: flex;
535
+ flex-direction: column;
536
+ align-items: center;
489
537
  }
490
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
491
- stroke: var(--components-form-checkbox-standard-icon);
492
- animation: stroke ease-in-out 0.2s 0.1s forwards;
538
+ .eds-switch__circle {
539
+ border-radius: 50%;
540
+ height: 1.25rem;
541
+ width: 1.25rem;
542
+ content: "";
543
+ display: flex;
544
+ align-items: center;
545
+ justify-content: center;
546
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
547
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
548
+ background-color: var(--components-form-switch-standard-switch);
549
+ top: 0.125rem;
550
+ left: 0.125rem;
551
+ position: relative;
493
552
  }
494
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
495
- fill: var(--components-form-checkbox-standard-icon);
553
+ .eds-switch__switch--large .eds-switch__circle {
554
+ height: 1.75rem;
555
+ width: 1.75rem;
496
556
  }
497
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
498
- opacity: 0.5;
557
+ .eds-contrast .eds-switch__circle {
558
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
499
559
  }
500
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
501
- opacity: 0.5;
560
+ .eds-switch__switch {
561
+ position: relative;
562
+ background-color: var(--components-form-switch-standard-fill-false);
563
+ content: "";
564
+ display: block;
565
+ transition: background-color 0.1s ease-in-out;
566
+ height: 1.5rem;
567
+ width: 3rem;
568
+ border-radius: 1.5rem;
569
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
502
570
  }
503
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
504
- opacity: 0.5;
571
+ .eds-contrast .eds-switch__switch {
572
+ background-color: var(--components-form-switch-contrast-fill-false);
505
573
  }
506
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
507
- opacity: 0.5;
574
+ .eds-switch--right .eds-switch__switch {
575
+ margin-right: 0.75rem;
508
576
  }
509
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
510
- opacity: 0.5;
577
+ .eds-switch__switch svg g,
578
+ .eds-switch__switch path {
579
+ fill: var(--components-form-switch-standard-icon-false);
580
+ transition: fill ease-in-out 0.1s;
511
581
  }
512
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
513
- background-color: var(--components-form-checkbox-contrast-fill-selected);
582
+ .eds-contrast .eds-switch__switch svg g,
583
+ .eds-contrast .eds-switch__switch path {
584
+ fill: var(--components-form-switch-contrast-icon-false);
514
585
  }
515
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
516
- stroke: var(--components-form-checkbox-contrast-icon);
586
+ :checked + .eds-switch__switch {
587
+ background-color: var(--eds-switch-color);
517
588
  }
518
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
519
- fill: var(--components-form-checkbox-contrast-icon);
589
+ :checked + .eds-switch__switch .eds-switch__circle {
590
+ left: 1.625rem;
520
591
  }
521
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
522
- border-color: var(--components-form-checkbox-standard-border);
523
- background-color: var(--components-form-checkbox-standard-fill-hover);
592
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
593
+ :checked + .eds-switch__switch .eds-switch__circle path {
594
+ fill: var(--eds-switch-color);
524
595
  }
525
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
526
- border-color: var(--components-form-checkbox-contrast-border);
527
- background-color: var(--components-form-checkbox-contrast-fill-hover);
596
+ .eds-contrast :checked + .eds-switch__switch {
597
+ background-color: var(--eds-switch-contrast-color);
528
598
  }
529
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
530
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
531
- border-color: transparent;
532
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
599
+ :focus-visible + .eds-switch__switch {
600
+ outline: 2px solid #181c56;
601
+ outline-color: var(--basecolors-stroke-focus-standard);
602
+ outline-offset: 0.125rem;
603
+ }
604
+ .eds-contrast :focus-visible + .eds-switch__switch {
605
+ outline-color: var(--basecolors-stroke-focus-contrast);
606
+ }
607
+ .eds-switch__switch--large {
608
+ width: 3.75rem;
609
+ height: 2rem;
610
+ border-radius: 3.75rem;
611
+ }
612
+ :checked + .eds-switch__switch--large .eds-switch__circle {
613
+ left: 1.875rem;
614
+ }
615
+ .eds-switch__switch--large svg {
616
+ position: relative;
617
+ right: 0.05rem;
533
618
  }
534
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
535
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
536
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
619
+ .eds-switch__label--large--right {
620
+ font-size: 1rem;
537
621
  }
538
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
539
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
540
- background-color: var(--components-form-checkbox-standard-fill-selected);
622
+ .eds-switch__label--large--bottom {
623
+ font-size: 0.875rem;
541
624
  }
542
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
543
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
544
- background-color: var(--components-form-checkbox-contrast-fill-selected);
625
+ .eds-switch__label--medium--right {
626
+ font-size: 0.875rem;
545
627
  }
546
- .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
547
- outline: 2px solid #181c56;
548
- outline-color: var(--basecolors-stroke-focus-standard);
549
- outline-offset: 0.125rem;
628
+ .eds-switch__label--medium--bottom {
629
+ font-size: 0.75rem;
550
630
  }
551
- .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
552
- outline-color: var(--basecolors-stroke-focus-contrast);
631
+ /* DO NOT CHANGE!*/
632
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
633
+ .eds-input-group {
634
+ color: inherit;
635
+ display: block;
636
+ position: relative;
553
637
  }
554
- .eds-checkbox--disabled {
638
+ .eds-input-group__label {
639
+ color: var(--components-form-baseform-standard-text-label);
640
+ display: flex;
641
+ font-size: 1rem;
642
+ position: absolute;
643
+ line-height: 1rem;
644
+ height: 3rem;
645
+ padding-left: 0;
646
+ top: 1rem;
647
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
648
+ -webkit-user-select: none;
649
+ -moz-user-select: none;
650
+ user-select: none;
555
651
  pointer-events: none;
556
652
  }
557
- .eds-checkbox--disabled .eds-checkbox__label {
558
- opacity: 0.5;
653
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
654
+ top: 0.375rem;
655
+ font-size: 0.75rem;
656
+ line-height: 0.75rem;
657
+ height: 10px;
658
+ padding: 0;
559
659
  }
560
- .eds-checkbox--disabled .eds-checkbox__icon {
561
- opacity: 0.5;
660
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
661
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
662
+ background: var(--textarea-label-background);
663
+ width: calc(100% - 1rem - 1rem - 4px);
562
664
  }
563
- .eds-checkbox__icon {
564
- box-sizing: border-box;
565
- display: inline-flex;
566
- justify-content: center;
567
- align-items: center;
568
- position: relative;
569
- margin-right: 1rem;
570
- height: 1.25rem;
571
- width: 1.25rem;
572
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
573
- border-radius: 0.125rem;
574
- background-color: transparent;
575
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
665
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
666
+ top: 0.5rem;
667
+ font-size: 0.875rem;
668
+ line-height: 1rem;
669
+ padding: 0;
576
670
  }
577
- .eds-checkbox__icon--reduced-click-area {
578
- margin-right: 0;
671
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
672
+ top: 0.75rem;
673
+ font-size: 1.5rem;
674
+ line-height: 2.25rem;
579
675
  }
580
- .eds-contrast .eds-checkbox__icon {
581
- border-color: var(--components-form-checkbox-contrast-border);
676
+ .eds-input-group__label--filled {
677
+ top: 0.375rem;
678
+ font-size: 0.75rem;
679
+ line-height: 0.75rem;
680
+ height: 10px;
681
+ padding: 0;
582
682
  }
583
- .eds-checkbox__icon .eds-checkbox-icon {
584
- height: 1rem;
585
- width: 1rem;
586
- visibility: hidden;
683
+ .eds-textarea__label .eds-input-group__label--filled {
684
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
685
+ background: var(--textarea-label-background);
686
+ width: calc(100% - 1rem - 1rem - 4px);
587
687
  }
588
- .eds-checkbox__icon .eds-checkbox-icon path {
589
- transform-origin: 50% 50%;
590
- stroke-dasharray: 48;
591
- stroke-dashoffset: 48;
592
- stroke-width: 0.375rem;
688
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
689
+ top: 0.5rem;
690
+ font-size: 0.875rem;
691
+ line-height: 1rem;
692
+ padding: 0;
593
693
  }
594
694
 
595
- @keyframes stroke {
596
- 100% {
597
- stroke-dashoffset: 0;
598
- }
695
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
696
+ top: 0.375rem;
697
+ font-size: 0.75rem;
698
+ line-height: 0.75rem;
699
+ height: 10px;
700
+ padding: 0;
701
+ }
702
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
703
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
704
+ background: var(--textarea-label-background);
705
+ width: calc(100% - 1rem - 1rem - 4px);
706
+ }
707
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
708
+ top: 0.5rem;
709
+ font-size: 0.875rem;
710
+ line-height: 1rem;
711
+ padding: 0;
712
+ }
713
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
714
+ top: 1rem;
715
+ font-size: 1rem;
716
+ height: 3rem;
717
+ line-height: 1rem;
599
718
  }
600
719
  /* DO NOT CHANGE!*/
601
720
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -765,125 +884,6 @@
765
884
  }
766
885
  /* DO NOT CHANGE!*/
767
886
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
768
- .eds-switch {
769
- cursor: pointer;
770
- -webkit-user-select: none;
771
- -moz-user-select: none;
772
- user-select: none;
773
- padding: 0.5rem 0;
774
- width: -moz-fit-content;
775
- width: fit-content;
776
- }
777
- .eds-switch input {
778
- opacity: 0;
779
- pointer-events: none;
780
- position: absolute;
781
- }
782
- .eds-switch--right {
783
- display: flex;
784
- flex-direction: row;
785
- align-items: center;
786
- }
787
- .eds-switch--bottom {
788
- display: flex;
789
- flex-direction: column;
790
- align-items: center;
791
- }
792
- .eds-switch__circle {
793
- border-radius: 50%;
794
- height: 1.25rem;
795
- width: 1.25rem;
796
- content: "";
797
- display: flex;
798
- align-items: center;
799
- justify-content: center;
800
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
801
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
802
- background-color: var(--components-form-switch-standard-switch);
803
- top: 0.125rem;
804
- left: 0.125rem;
805
- position: relative;
806
- }
807
- .eds-switch__switch--large .eds-switch__circle {
808
- height: 1.75rem;
809
- width: 1.75rem;
810
- }
811
- .eds-contrast .eds-switch__circle {
812
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
813
- }
814
- .eds-switch__switch {
815
- position: relative;
816
- background-color: var(--components-form-switch-standard-fill-false);
817
- content: "";
818
- display: block;
819
- transition: background-color 0.1s ease-in-out;
820
- height: 1.5rem;
821
- width: 3rem;
822
- border-radius: 1.5rem;
823
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
824
- }
825
- .eds-contrast .eds-switch__switch {
826
- background-color: var(--components-form-switch-contrast-fill-false);
827
- }
828
- .eds-switch--right .eds-switch__switch {
829
- margin-right: 0.75rem;
830
- }
831
- .eds-switch__switch svg g,
832
- .eds-switch__switch path {
833
- fill: var(--components-form-switch-standard-icon-false);
834
- transition: fill ease-in-out 0.1s;
835
- }
836
- .eds-contrast .eds-switch__switch svg g,
837
- .eds-contrast .eds-switch__switch path {
838
- fill: var(--components-form-switch-contrast-icon-false);
839
- }
840
- :checked + .eds-switch__switch {
841
- background-color: var(--eds-switch-color);
842
- }
843
- :checked + .eds-switch__switch .eds-switch__circle {
844
- left: 1.625rem;
845
- }
846
- :checked + .eds-switch__switch .eds-switch__circle svg g,
847
- :checked + .eds-switch__switch .eds-switch__circle path {
848
- fill: var(--eds-switch-color);
849
- }
850
- .eds-contrast :checked + .eds-switch__switch {
851
- background-color: var(--eds-switch-contrast-color);
852
- }
853
- :focus-visible + .eds-switch__switch {
854
- outline: 2px solid #181c56;
855
- outline-color: var(--basecolors-stroke-focus-standard);
856
- outline-offset: 0.125rem;
857
- }
858
- .eds-contrast :focus-visible + .eds-switch__switch {
859
- outline-color: var(--basecolors-stroke-focus-contrast);
860
- }
861
- .eds-switch__switch--large {
862
- width: 3.75rem;
863
- height: 2rem;
864
- border-radius: 3.75rem;
865
- }
866
- :checked + .eds-switch__switch--large .eds-switch__circle {
867
- left: 1.875rem;
868
- }
869
- .eds-switch__switch--large svg {
870
- position: relative;
871
- right: 0.05rem;
872
- }
873
- .eds-switch__label--large--right {
874
- font-size: 1rem;
875
- }
876
- .eds-switch__label--large--bottom {
877
- font-size: 0.875rem;
878
- }
879
- .eds-switch__label--medium--right {
880
- font-size: 0.875rem;
881
- }
882
- .eds-switch__label--medium--bottom {
883
- font-size: 0.75rem;
884
- }
885
- /* DO NOT CHANGE!*/
886
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
887
887
  .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
888
888
  outline: 2px solid #181c56;
889
889
  outline-color: var(--basecolors-stroke-focus-standard);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.2.6",
3
+ "version": "8.2.7",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.6",
31
- "@entur/icons": "^7.10.0",
30
+ "@entur/button": "^3.3.7",
31
+ "@entur/icons": "^7.11.0",
32
32
  "@entur/tokens": "^3.19.0",
33
- "@entur/tooltip": "^5.2.6",
34
- "@entur/typography": "^1.9.6",
33
+ "@entur/tooltip": "^5.2.7",
34
+ "@entur/typography": "^1.9.7",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "2574ca4c0632d084e2c531ee43e4f066c32c4d89"
41
+ "gitHead": "ccdbbec971e0336510c047873a1e63cc31aa850e"
42
42
  }