@entur/form 8.1.0-beta.1 → 8.1.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 (2) hide show
  1. package/dist/styles.css +375 -375
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,160 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-checkbox__container {
4
- display: flex;
5
- align-items: center;
6
- position: relative;
7
- -webkit-appearance: none;
8
- -moz-appearance: none;
9
- appearance: none;
10
- cursor: pointer;
11
- -webkit-user-select: none;
12
- -moz-user-select: none;
13
- user-select: none;
14
- width: -moz-fit-content;
15
- width: fit-content;
16
- margin: 0.5rem 0;
17
- }
18
- .eds-checkbox__container--reduced-click-area {
19
- height: -moz-fit-content;
20
- height: fit-content;
21
- }
22
- .eds-checkbox__container input {
23
- position: absolute;
24
- opacity: 0;
25
- height: 0;
26
- width: 0;
27
- }
28
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
29
- background-color: var(--components-form-checkbox-standard-fill-selected);
30
- }
31
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
32
- visibility: visible;
33
- }
34
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
35
- stroke: var(--components-form-checkbox-standard-icon);
36
- animation: stroke ease-in-out 0.2s 0.1s forwards;
37
- }
38
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
39
- fill: var(--components-form-checkbox-standard-icon);
40
- }
41
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
- opacity: 0.5;
43
- }
44
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
45
- opacity: 0.5;
46
- }
47
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
48
- opacity: 0.5;
49
- }
50
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
51
- opacity: 0.5;
52
- }
53
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
54
- opacity: 0.5;
55
- }
56
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
57
- background-color: var(--components-form-checkbox-contrast-fill-selected);
58
- }
59
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
60
- stroke: var(--components-form-checkbox-contrast-icon);
61
- }
62
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
63
- fill: var(--components-form-checkbox-contrast-icon);
64
- }
65
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
66
- border-color: var(--components-form-checkbox-standard-border);
67
- background-color: var(--components-form-checkbox-standard-fill-hover);
68
- }
69
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
70
- border-color: var(--components-form-checkbox-contrast-border);
71
- background-color: var(--components-form-checkbox-contrast-fill-hover);
72
- }
73
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
74
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
75
- border-color: transparent;
76
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
77
- }
78
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
79
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
80
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
81
- }
82
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
83
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
84
- background-color: var(--components-form-checkbox-standard-fill-selected);
85
- }
86
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
87
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
88
- background-color: var(--components-form-checkbox-contrast-fill-selected);
89
- }
90
- .eds-checkbox__container:focus + .eds-checkbox__icon,
91
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
92
- outline: 2px solid #181c56;
93
- outline-color: var(--basecolors-stroke-focus-standard);
94
- outline-offset: 0.125rem;
95
- }
96
- .eds-checkbox__container:focus + .eds-checkbox__icon,
97
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
98
- outline: 2px solid #181c56;
99
- outline-color: var(--basecolors-stroke-focus-standard);
100
- outline-offset: 0.125rem;
101
- }
102
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
103
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
104
- outline-color: var(--basecolors-stroke-focus-contrast);
105
- }
106
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
107
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
108
- outline-color: var(--basecolors-stroke-focus-contrast);
109
- }
110
- .eds-checkbox--disabled {
111
- pointer-events: none;
112
- }
113
- .eds-checkbox--disabled .eds-checkbox__label {
114
- opacity: 0.5;
115
- }
116
- .eds-checkbox--disabled .eds-checkbox__icon {
117
- opacity: 0.5;
118
- }
119
- .eds-checkbox__icon {
120
- box-sizing: border-box;
121
- display: inline-flex;
122
- justify-content: center;
123
- align-items: center;
124
- position: relative;
125
- margin-right: 1rem;
126
- height: 1.25rem;
127
- width: 1.25rem;
128
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
129
- border-radius: 0.125rem;
130
- background-color: transparent;
131
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
132
- }
133
- .eds-checkbox__icon--reduced-click-area {
134
- margin-right: 0;
135
- }
136
- .eds-contrast .eds-checkbox__icon {
137
- border-color: var(--components-form-checkbox-contrast-border);
138
- }
139
- .eds-checkbox__icon .eds-checkbox-icon {
140
- height: 1rem;
141
- width: 1rem;
142
- visibility: hidden;
143
- }
144
- .eds-checkbox__icon .eds-checkbox-icon path {
145
- transform-origin: 50% 50%;
146
- stroke-dasharray: 48;
147
- stroke-dashoffset: 48;
148
- stroke-width: 0.375rem;
149
- }
150
-
151
- @keyframes stroke {
152
- 100% {
153
- stroke-dashoffset: 0;
154
- }
155
- }
156
- /* DO NOT CHANGE!*/
157
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
158
3
  .eds-form-control__field-and-feedback-text {
159
4
  display: flex;
160
5
  flex-direction: column;
@@ -362,6 +207,11 @@
362
207
  margin-right: 0;
363
208
  margin-left: 0.75rem;
364
209
  }
210
+ .eds-fieldset {
211
+ margin: 0;
212
+ padding: 0;
213
+ border: 0;
214
+ }
365
215
  /* DO NOT CHANGE!*/
366
216
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
367
217
  .eds-feedback-text {
@@ -437,6 +287,161 @@
437
287
  }
438
288
  /* DO NOT CHANGE!*/
439
289
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
290
+ .eds-checkbox__container {
291
+ display: flex;
292
+ align-items: center;
293
+ position: relative;
294
+ -webkit-appearance: none;
295
+ -moz-appearance: none;
296
+ appearance: none;
297
+ cursor: pointer;
298
+ -webkit-user-select: none;
299
+ -moz-user-select: none;
300
+ user-select: none;
301
+ width: -moz-fit-content;
302
+ width: fit-content;
303
+ margin: 0.5rem 0;
304
+ }
305
+ .eds-checkbox__container--reduced-click-area {
306
+ height: -moz-fit-content;
307
+ height: fit-content;
308
+ }
309
+ .eds-checkbox__container input {
310
+ position: absolute;
311
+ opacity: 0;
312
+ height: 0;
313
+ width: 0;
314
+ }
315
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
316
+ background-color: var(--components-form-checkbox-standard-fill-selected);
317
+ }
318
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
319
+ visibility: visible;
320
+ }
321
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
322
+ stroke: var(--components-form-checkbox-standard-icon);
323
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
324
+ }
325
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
326
+ fill: var(--components-form-checkbox-standard-icon);
327
+ }
328
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
329
+ opacity: 0.5;
330
+ }
331
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
332
+ opacity: 0.5;
333
+ }
334
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
335
+ opacity: 0.5;
336
+ }
337
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
338
+ opacity: 0.5;
339
+ }
340
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
341
+ opacity: 0.5;
342
+ }
343
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
344
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
345
+ }
346
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
347
+ stroke: var(--components-form-checkbox-contrast-icon);
348
+ }
349
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
350
+ fill: var(--components-form-checkbox-contrast-icon);
351
+ }
352
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
353
+ border-color: var(--components-form-checkbox-standard-border);
354
+ background-color: var(--components-form-checkbox-standard-fill-hover);
355
+ }
356
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
357
+ border-color: var(--components-form-checkbox-contrast-border);
358
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
359
+ }
360
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
361
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
362
+ border-color: transparent;
363
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
364
+ }
365
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
366
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
367
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
368
+ }
369
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
370
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
371
+ background-color: var(--components-form-checkbox-standard-fill-selected);
372
+ }
373
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
374
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
375
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
376
+ }
377
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
378
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
379
+ outline: 2px solid #181c56;
380
+ outline-color: var(--basecolors-stroke-focus-standard);
381
+ outline-offset: 0.125rem;
382
+ }
383
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
384
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
385
+ outline: 2px solid #181c56;
386
+ outline-color: var(--basecolors-stroke-focus-standard);
387
+ outline-offset: 0.125rem;
388
+ }
389
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
390
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
391
+ outline-color: var(--basecolors-stroke-focus-contrast);
392
+ }
393
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
394
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
395
+ outline-color: var(--basecolors-stroke-focus-contrast);
396
+ }
397
+ .eds-checkbox--disabled {
398
+ pointer-events: none;
399
+ }
400
+ .eds-checkbox--disabled .eds-checkbox__label {
401
+ opacity: 0.5;
402
+ }
403
+ .eds-checkbox--disabled .eds-checkbox__icon {
404
+ opacity: 0.5;
405
+ }
406
+ .eds-checkbox__icon {
407
+ box-sizing: border-box;
408
+ display: inline-flex;
409
+ justify-content: center;
410
+ align-items: center;
411
+ position: relative;
412
+ margin-right: 1rem;
413
+ height: 1.25rem;
414
+ width: 1.25rem;
415
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
416
+ border-radius: 0.125rem;
417
+ background-color: transparent;
418
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
419
+ }
420
+ .eds-checkbox__icon--reduced-click-area {
421
+ margin-right: 0;
422
+ }
423
+ .eds-contrast .eds-checkbox__icon {
424
+ border-color: var(--components-form-checkbox-contrast-border);
425
+ }
426
+ .eds-checkbox__icon .eds-checkbox-icon {
427
+ height: 1rem;
428
+ width: 1rem;
429
+ visibility: hidden;
430
+ }
431
+ .eds-checkbox__icon .eds-checkbox-icon path {
432
+ transform-origin: 50% 50%;
433
+ stroke-dasharray: 48;
434
+ stroke-dashoffset: 48;
435
+ stroke-width: 0.375rem;
436
+ }
437
+
438
+ @keyframes stroke {
439
+ 100% {
440
+ stroke-dashoffset: 0;
441
+ }
442
+ }
443
+ /* DO NOT CHANGE!*/
444
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
440
445
  .eds-form-component--radio__container {
441
446
  display: flex;
442
447
  justify-content: center;
@@ -517,112 +522,6 @@
517
522
  .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
518
523
  background-color: var(--components-form-radio-contrast-icon);
519
524
  }
520
- .eds-fieldset {
521
- margin: 0;
522
- padding: 0;
523
- border: 0;
524
- }
525
- /* DO NOT CHANGE!*/
526
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
527
- .eds-input-group {
528
- color: inherit;
529
- display: block;
530
- position: relative;
531
- }
532
- .eds-input-group__label {
533
- color: var(--components-form-baseform-standard-text-label);
534
- display: flex;
535
- font-size: 1rem;
536
- position: absolute;
537
- line-height: 1rem;
538
- height: 3rem;
539
- padding-left: 0;
540
- top: 1rem;
541
- 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;
542
- -webkit-user-select: none;
543
- -moz-user-select: none;
544
- user-select: none;
545
- pointer-events: none;
546
- }
547
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
548
- top: 0.375rem;
549
- font-size: 0.75rem;
550
- line-height: 0.75rem;
551
- height: 10px;
552
- padding: 0;
553
- }
554
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
555
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
556
- background: var(--textarea-label-background);
557
- width: calc(100% - 1rem - 1rem - 4px);
558
- }
559
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
560
- top: 0.5rem;
561
- font-size: 0.875rem;
562
- line-height: 1rem;
563
- padding: 0;
564
- }
565
- .eds-form-control-wrapper--size-large .eds-input-group__label {
566
- top: 0.75rem;
567
- font-size: 1.5rem;
568
- line-height: 2.25rem;
569
- }
570
- .eds-input-group__label--filled {
571
- top: 0.375rem;
572
- font-size: 0.75rem;
573
- line-height: 0.75rem;
574
- height: 10px;
575
- padding: 0;
576
- }
577
- .eds-textarea__label .eds-input-group__label--filled {
578
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
579
- background: var(--textarea-label-background);
580
- width: calc(100% - 1rem - 1rem - 4px);
581
- }
582
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
583
- top: 0.5rem;
584
- font-size: 0.875rem;
585
- line-height: 1rem;
586
- padding: 0;
587
- }
588
-
589
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
590
- top: 0.375rem;
591
- font-size: 0.75rem;
592
- line-height: 0.75rem;
593
- height: 10px;
594
- padding: 0;
595
- }
596
-
597
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
598
- top: 0.375rem;
599
- font-size: 0.75rem;
600
- line-height: 0.75rem;
601
- height: 10px;
602
- padding: 0;
603
- }
604
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
605
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
606
- background: var(--textarea-label-background);
607
- width: calc(100% - 1rem - 1rem - 4px);
608
- }
609
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
610
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
611
- background: var(--textarea-label-background);
612
- width: calc(100% - 1rem - 1rem - 4px);
613
- }
614
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
615
- top: 0.5rem;
616
- font-size: 0.875rem;
617
- line-height: 1rem;
618
- padding: 0;
619
- }
620
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
621
- top: 0.5rem;
622
- font-size: 0.875rem;
623
- line-height: 1rem;
624
- padding: 0;
625
- }
626
525
  /* DO NOT CHANGE!*/
627
526
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
628
527
  .eds-switch {
@@ -700,47 +599,148 @@
700
599
  :checked + .eds-switch__switch {
701
600
  background-color: var(--eds-switch-color);
702
601
  }
703
- :checked + .eds-switch__switch .eds-switch__circle {
704
- left: 1.625rem;
602
+ :checked + .eds-switch__switch .eds-switch__circle {
603
+ left: 1.625rem;
604
+ }
605
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
606
+ :checked + .eds-switch__switch .eds-switch__circle path {
607
+ fill: var(--eds-switch-color);
608
+ }
609
+ .eds-contrast :checked + .eds-switch__switch {
610
+ background-color: var(--eds-switch-contrast-color);
611
+ }
612
+ :focus + .eds-switch__switch {
613
+ outline: 2px solid #181c56;
614
+ outline-color: var(--basecolors-stroke-focus-standard);
615
+ outline-offset: 0.125rem;
616
+ }
617
+ .eds-contrast :focus + .eds-switch__switch {
618
+ outline-color: var(--basecolors-stroke-focus-contrast);
619
+ }
620
+ .eds-switch__switch--large {
621
+ width: 3.75rem;
622
+ height: 2rem;
623
+ border-radius: 3.75rem;
624
+ }
625
+ :checked + .eds-switch__switch--large .eds-switch__circle {
626
+ left: 1.875rem;
627
+ }
628
+ .eds-switch__switch--large svg {
629
+ position: relative;
630
+ right: 0.05rem;
631
+ }
632
+ .eds-switch__label--large--right {
633
+ font-size: 1rem;
634
+ }
635
+ .eds-switch__label--large--bottom {
636
+ font-size: 0.875rem;
637
+ }
638
+ .eds-switch__label--medium--right {
639
+ font-size: 0.875rem;
640
+ }
641
+ .eds-switch__label--medium--bottom {
642
+ font-size: 0.75rem;
643
+ }
644
+ /* DO NOT CHANGE!*/
645
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
646
+ .eds-input-group {
647
+ color: inherit;
648
+ display: block;
649
+ position: relative;
650
+ }
651
+ .eds-input-group__label {
652
+ color: var(--components-form-baseform-standard-text-label);
653
+ display: flex;
654
+ font-size: 1rem;
655
+ position: absolute;
656
+ line-height: 1rem;
657
+ height: 3rem;
658
+ padding-left: 0;
659
+ top: 1rem;
660
+ 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;
661
+ -webkit-user-select: none;
662
+ -moz-user-select: none;
663
+ user-select: none;
664
+ pointer-events: none;
665
+ }
666
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
667
+ top: 0.375rem;
668
+ font-size: 0.75rem;
669
+ line-height: 0.75rem;
670
+ height: 10px;
671
+ padding: 0;
672
+ }
673
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
674
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
675
+ background: var(--textarea-label-background);
676
+ width: calc(100% - 1rem - 1rem - 4px);
677
+ }
678
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
679
+ top: 0.5rem;
680
+ font-size: 0.875rem;
681
+ line-height: 1rem;
682
+ padding: 0;
705
683
  }
706
- :checked + .eds-switch__switch .eds-switch__circle svg g,
707
- :checked + .eds-switch__switch .eds-switch__circle path {
708
- fill: var(--eds-switch-color);
684
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
685
+ top: 0.75rem;
686
+ font-size: 1.5rem;
687
+ line-height: 2.25rem;
709
688
  }
710
- .eds-contrast :checked + .eds-switch__switch {
711
- background-color: var(--eds-switch-contrast-color);
689
+ .eds-input-group__label--filled {
690
+ top: 0.375rem;
691
+ font-size: 0.75rem;
692
+ line-height: 0.75rem;
693
+ height: 10px;
694
+ padding: 0;
712
695
  }
713
- :focus + .eds-switch__switch {
714
- outline: 2px solid #181c56;
715
- outline-color: var(--basecolors-stroke-focus-standard);
716
- outline-offset: 0.125rem;
696
+ .eds-textarea__label .eds-input-group__label--filled {
697
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
698
+ background: var(--textarea-label-background);
699
+ width: calc(100% - 1rem - 1rem - 4px);
717
700
  }
718
- .eds-contrast :focus + .eds-switch__switch {
719
- outline-color: var(--basecolors-stroke-focus-contrast);
701
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
702
+ top: 0.5rem;
703
+ font-size: 0.875rem;
704
+ line-height: 1rem;
705
+ padding: 0;
720
706
  }
721
- .eds-switch__switch--large {
722
- width: 3.75rem;
723
- height: 2rem;
724
- border-radius: 3.75rem;
707
+
708
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
709
+ top: 0.375rem;
710
+ font-size: 0.75rem;
711
+ line-height: 0.75rem;
712
+ height: 10px;
713
+ padding: 0;
725
714
  }
726
- :checked + .eds-switch__switch--large .eds-switch__circle {
727
- left: 1.875rem;
715
+
716
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
717
+ top: 0.375rem;
718
+ font-size: 0.75rem;
719
+ line-height: 0.75rem;
720
+ height: 10px;
721
+ padding: 0;
728
722
  }
729
- .eds-switch__switch--large svg {
730
- position: relative;
731
- right: 0.05rem;
723
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
724
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
725
+ background: var(--textarea-label-background);
726
+ width: calc(100% - 1rem - 1rem - 4px);
732
727
  }
733
- .eds-switch__label--large--right {
734
- font-size: 1rem;
728
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
729
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
730
+ background: var(--textarea-label-background);
731
+ width: calc(100% - 1rem - 1rem - 4px);
735
732
  }
736
- .eds-switch__label--large--bottom {
733
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
734
+ top: 0.5rem;
737
735
  font-size: 0.875rem;
736
+ line-height: 1rem;
737
+ padding: 0;
738
738
  }
739
- .eds-switch__label--medium--right {
739
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
740
+ top: 0.5rem;
740
741
  font-size: 0.875rem;
741
- }
742
- .eds-switch__label--medium--bottom {
743
- font-size: 0.75rem;
742
+ line-height: 1rem;
743
+ padding: 0;
744
744
  }
745
745
  /* DO NOT CHANGE!*/
746
746
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -954,14 +954,85 @@ textarea.eds-form-control.eds-textarea {
954
954
  }
955
955
  /* DO NOT CHANGE!*/
956
956
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
- .eds-segmented-control {
958
- margin-top: 0.25rem;
959
- display: flex;
960
- background: var(--components-form-segmentedcontrol-standard-background);
961
- border-radius: 0.5rem;
957
+ .eds-segmented-choice {
958
+ display: block;
959
+ flex: 1 1 0px;
962
960
  }
963
- .eds-contrast .eds-segmented-control {
964
- background: var(--components-form-segmentedcontrol-contrast-background);
961
+ .eds-segmented-choice .eds-base-segmented {
962
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
963
+ background-color: var(--background-color);
964
+ border-radius: 0.25rem;
965
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
966
+ cursor: pointer;
967
+ font-size: 0.875rem;
968
+ height: 1.5rem;
969
+ line-height: 1.25rem;
970
+ margin: 0.25rem;
971
+ outline-color: transparent;
972
+ padding: calc(0.25rem/ 2) 0.75rem;
973
+ text-align: center;
974
+ -webkit-user-select: none;
975
+ -moz-user-select: none;
976
+ user-select: none;
977
+ }
978
+ .eds-segmented-choice .eds-base-segmented--large {
979
+ font-size: 1rem;
980
+ height: 2.5rem;
981
+ line-height: 1.5rem;
982
+ padding: 0.5rem 0.75rem;
983
+ }
984
+ .eds-contrast .eds-segmented-choice .eds-base-segmented {
985
+ --background-color: var(--components-form-segmentedcontrol-contrast-background);
986
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
987
+ }
988
+ .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
989
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
990
+ }
991
+ .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
992
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
993
+ }
994
+ .eds-segmented-choice:hover input:checked + .eds-base-segmented {
995
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
996
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
997
+ }
998
+ .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
999
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1000
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1001
+ }
1002
+ .eds-segmented-choice input {
1003
+ -webkit-appearance: none;
1004
+ -moz-appearance: none;
1005
+ appearance: none;
1006
+ position: absolute;
1007
+ opacity: 0;
1008
+ height: 0;
1009
+ width: 0;
1010
+ }
1011
+ .eds-segmented-choice input:checked + .eds-base-segmented {
1012
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1013
+ color: var(--components-form-segmentedcontrol-standard-text-selected);
1014
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1015
+ }
1016
+ .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1017
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1018
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1019
+ color: var(--components-form-segmentedcontrol-contrast-text-selected);
1020
+ }
1021
+ .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1022
+ outline: 2px solid #181c56;
1023
+ outline-color: var(--basecolors-stroke-focus-standard);
1024
+ outline-offset: 0.125rem;
1025
+ }
1026
+ .eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1027
+ outline-color: var(--basecolors-stroke-focus-contrast);
1028
+ }
1029
+ .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1030
+ outline: 2px solid #181c56;
1031
+ outline-color: var(--basecolors-stroke-focus-standard);
1032
+ outline-offset: 0.125rem;
1033
+ }
1034
+ .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1035
+ outline-color: var(--basecolors-stroke-focus-contrast);
965
1036
  }
966
1037
  /* DO NOT CHANGE!*/
967
1038
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1512,83 +1583,12 @@ textarea.eds-form-control.eds-textarea {
1512
1583
  }
1513
1584
  /* DO NOT CHANGE!*/
1514
1585
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1515
- .eds-segmented-choice {
1516
- display: block;
1517
- flex: 1 1 0px;
1518
- }
1519
- .eds-segmented-choice .eds-base-segmented {
1520
- --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1521
- background-color: var(--background-color);
1522
- border-radius: 0.25rem;
1523
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1524
- cursor: pointer;
1525
- font-size: 0.875rem;
1526
- height: 1.5rem;
1527
- line-height: 1.25rem;
1528
- margin: 0.25rem;
1529
- outline-color: transparent;
1530
- padding: calc(0.25rem/ 2) 0.75rem;
1531
- text-align: center;
1532
- -webkit-user-select: none;
1533
- -moz-user-select: none;
1534
- user-select: none;
1535
- }
1536
- .eds-segmented-choice .eds-base-segmented--large {
1537
- font-size: 1rem;
1538
- height: 2.5rem;
1539
- line-height: 1.5rem;
1540
- padding: 0.5rem 0.75rem;
1541
- }
1542
- .eds-contrast .eds-segmented-choice .eds-base-segmented {
1543
- --background-color: var(--components-form-segmentedcontrol-contrast-background);
1544
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1545
- }
1546
- .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1547
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1548
- }
1549
- .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1550
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1551
- }
1552
- .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1553
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1554
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1555
- }
1556
- .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1557
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1558
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1559
- }
1560
- .eds-segmented-choice input {
1561
- -webkit-appearance: none;
1562
- -moz-appearance: none;
1563
- appearance: none;
1564
- position: absolute;
1565
- opacity: 0;
1566
- height: 0;
1567
- width: 0;
1568
- }
1569
- .eds-segmented-choice input:checked + .eds-base-segmented {
1570
- --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1571
- color: var(--components-form-segmentedcontrol-standard-text-selected);
1572
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1573
- }
1574
- .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1575
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1576
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1577
- color: var(--components-form-segmentedcontrol-contrast-text-selected);
1578
- }
1579
- .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1580
- outline: 2px solid #181c56;
1581
- outline-color: var(--basecolors-stroke-focus-standard);
1582
- outline-offset: 0.125rem;
1583
- }
1584
- .eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1585
- outline-color: var(--basecolors-stroke-focus-contrast);
1586
- }
1587
- .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1588
- outline: 2px solid #181c56;
1589
- outline-color: var(--basecolors-stroke-focus-standard);
1590
- outline-offset: 0.125rem;
1586
+ .eds-segmented-control {
1587
+ margin-top: 0.25rem;
1588
+ display: flex;
1589
+ background: var(--components-form-segmentedcontrol-standard-background);
1590
+ border-radius: 0.5rem;
1591
1591
  }
1592
- .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1593
- outline-color: var(--basecolors-stroke-focus-contrast);
1592
+ .eds-contrast .eds-segmented-control {
1593
+ background: var(--components-form-segmentedcontrol-contrast-background);
1594
1594
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.1.0-beta.1",
3
+ "version": "8.1.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^7.2.0",
30
+ "@entur/icons": "^7.3.0",
31
31
  "@entur/tokens": "^3.17.0",
32
- "@entur/tooltip": "^4.0.0-beta.1",
33
- "@entur/typography": "^1.8.44-beta.0",
34
- "@entur/utils": "^0.11.2-beta.0",
32
+ "@entur/tooltip": "^4.0.0",
33
+ "@entur/typography": "^1.8.44",
34
+ "@entur/utils": "^0.11.2",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "bf6f8921dac8b869172f77ab6da76401e40bbc9b"
37
+ "gitHead": "c5713d9ad333e17ca5714d86181baba74c56e0eb"
38
38
  }