@entur/form 8.1.10 → 8.2.0-beta.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 +139 -135
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -87,14 +87,12 @@
87
87
  .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
88
88
  background-color: var(--components-form-checkbox-contrast-fill-selected);
89
89
  }
90
- .eds-checkbox__container:focus + .eds-checkbox__icon,
91
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
90
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
92
91
  outline: 2px solid #181c56;
93
92
  outline-color: var(--basecolors-stroke-focus-standard);
94
93
  outline-offset: 0.125rem;
95
94
  }
96
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
97
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
95
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
98
96
  outline-color: var(--basecolors-stroke-focus-contrast);
99
97
  }
100
98
  .eds-checkbox--disabled {
@@ -170,17 +168,19 @@
170
168
  color: var(--components-form-baseform-standard-text-content);
171
169
  transition: border-color 0.1s ease-in-out;
172
170
  }
173
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
171
+ .eds-form-control-wrapper:hover {
174
172
  border-color: var(--components-form-baseform-standard-border-interactive);
175
173
  }
176
174
  .eds-contrast .eds-form-control-wrapper:hover {
177
175
  border-color: var(--components-form-baseform-contrast-border-interactive);
178
176
  }
179
177
  .eds-form-control-wrapper:focus-within {
180
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
178
+ border-color: var(--components-form-baseform-standard-border-interactive);
179
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
181
180
  }
182
181
  .eds-contrast .eds-form-control-wrapper:focus-within {
183
- outline: var(--components-form-baseform-contrast-border-interactive);
182
+ border-color: var(--components-form-baseform-contrast-border-interactive);
183
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
184
184
  }
185
185
  .eds-form-control-wrapper ::-moz-placeholder {
186
186
  color: var(--components-form-baseform-standard-text-label);
@@ -245,24 +245,28 @@
245
245
  }
246
246
  .eds-form-control-wrapper--success:focus-within {
247
247
  border-color: var(--components-form-baseform-standard-border-success);
248
+ outline-color: var(--components-form-baseform-standard-border-success);
248
249
  }
249
250
  .eds-contrast .eds-form-control-wrapper--success {
250
251
  border-color: var(--components-form-baseform-standard-border-success);
251
252
  }
252
253
  .eds-contrast .eds-form-control-wrapper--success:focus-within {
253
254
  border-color: var(--components-form-baseform-contrast-border-success);
255
+ outline-color: var(--components-form-baseform-contrast-border-success);
254
256
  }
255
257
  .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
256
258
  border-color: var(--components-form-baseform-standard-border-negative);
257
259
  }
258
260
  .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
259
261
  border-color: var(--components-form-baseform-standard-border-negative);
262
+ outline-color: var(--components-form-baseform-standard-border-negative);
260
263
  }
261
264
  .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
262
265
  border-color: var(--components-form-baseform-contrast-border-negative);
263
266
  }
264
267
  .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
265
268
  border-color: var(--components-form-baseform-contrast-border-negative);
269
+ outline-color: var(--components-form-baseform-contrast-border-negative);
266
270
  }
267
271
  .eds-contrast .eds-form-control .eds-tooltip {
268
272
  background: var(--components-tooltip-tooltip-standard-fill);
@@ -411,125 +415,6 @@
411
415
  }
412
416
  /* DO NOT CHANGE!*/
413
417
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
414
- .eds-switch {
415
- cursor: pointer;
416
- -webkit-user-select: none;
417
- -moz-user-select: none;
418
- user-select: none;
419
- padding: 0.5rem 0;
420
- width: -moz-fit-content;
421
- width: fit-content;
422
- }
423
- .eds-switch input {
424
- opacity: 0;
425
- pointer-events: none;
426
- position: absolute;
427
- }
428
- .eds-switch--right {
429
- display: flex;
430
- flex-direction: row;
431
- align-items: center;
432
- }
433
- .eds-switch--bottom {
434
- display: flex;
435
- flex-direction: column;
436
- align-items: center;
437
- }
438
- .eds-switch__circle {
439
- border-radius: 50%;
440
- height: 1.25rem;
441
- width: 1.25rem;
442
- content: "";
443
- display: flex;
444
- align-items: center;
445
- justify-content: center;
446
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
447
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
448
- background-color: var(--components-form-switch-standard-switch);
449
- top: 0.125rem;
450
- left: 0.125rem;
451
- position: relative;
452
- }
453
- .eds-switch__switch--large .eds-switch__circle {
454
- height: 1.75rem;
455
- width: 1.75rem;
456
- }
457
- .eds-contrast .eds-switch__circle {
458
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
459
- }
460
- .eds-switch__switch {
461
- position: relative;
462
- background-color: var(--components-form-switch-standard-fill-false);
463
- content: "";
464
- display: block;
465
- transition: background-color 0.1s ease-in-out;
466
- height: 1.5rem;
467
- width: 3rem;
468
- border-radius: 1.5rem;
469
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
470
- }
471
- .eds-contrast .eds-switch__switch {
472
- background-color: var(--components-form-switch-contrast-fill-false);
473
- }
474
- .eds-switch--right .eds-switch__switch {
475
- margin-right: 0.75rem;
476
- }
477
- .eds-switch__switch svg g,
478
- .eds-switch__switch path {
479
- fill: var(--components-form-switch-standard-icon-false);
480
- transition: fill ease-in-out 0.1s;
481
- }
482
- .eds-contrast .eds-switch__switch svg g,
483
- .eds-contrast .eds-switch__switch path {
484
- fill: var(--components-form-switch-contrast-icon-false);
485
- }
486
- :checked + .eds-switch__switch {
487
- background-color: var(--eds-switch-color);
488
- }
489
- :checked + .eds-switch__switch .eds-switch__circle {
490
- left: 1.625rem;
491
- }
492
- :checked + .eds-switch__switch .eds-switch__circle svg g,
493
- :checked + .eds-switch__switch .eds-switch__circle path {
494
- fill: var(--eds-switch-color);
495
- }
496
- .eds-contrast :checked + .eds-switch__switch {
497
- background-color: var(--eds-switch-contrast-color);
498
- }
499
- :focus + .eds-switch__switch {
500
- outline: 2px solid #181c56;
501
- outline-color: var(--basecolors-stroke-focus-standard);
502
- outline-offset: 0.125rem;
503
- }
504
- .eds-contrast :focus + .eds-switch__switch {
505
- outline-color: var(--basecolors-stroke-focus-contrast);
506
- }
507
- .eds-switch__switch--large {
508
- width: 3.75rem;
509
- height: 2rem;
510
- border-radius: 3.75rem;
511
- }
512
- :checked + .eds-switch__switch--large .eds-switch__circle {
513
- left: 1.875rem;
514
- }
515
- .eds-switch__switch--large svg {
516
- position: relative;
517
- right: 0.05rem;
518
- }
519
- .eds-switch__label--large--right {
520
- font-size: 1rem;
521
- }
522
- .eds-switch__label--large--bottom {
523
- font-size: 0.875rem;
524
- }
525
- .eds-switch__label--medium--right {
526
- font-size: 0.875rem;
527
- }
528
- .eds-switch__label--medium--bottom {
529
- font-size: 0.75rem;
530
- }
531
- /* DO NOT CHANGE!*/
532
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
533
418
  .eds-input-group {
534
419
  color: inherit;
535
420
  display: block;
@@ -776,6 +661,125 @@
776
661
  }
777
662
  /* DO NOT CHANGE!*/
778
663
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
664
+ .eds-switch {
665
+ cursor: pointer;
666
+ -webkit-user-select: none;
667
+ -moz-user-select: none;
668
+ user-select: none;
669
+ padding: 0.5rem 0;
670
+ width: -moz-fit-content;
671
+ width: fit-content;
672
+ }
673
+ .eds-switch input {
674
+ opacity: 0;
675
+ pointer-events: none;
676
+ position: absolute;
677
+ }
678
+ .eds-switch--right {
679
+ display: flex;
680
+ flex-direction: row;
681
+ align-items: center;
682
+ }
683
+ .eds-switch--bottom {
684
+ display: flex;
685
+ flex-direction: column;
686
+ align-items: center;
687
+ }
688
+ .eds-switch__circle {
689
+ border-radius: 50%;
690
+ height: 1.25rem;
691
+ width: 1.25rem;
692
+ content: "";
693
+ display: flex;
694
+ align-items: center;
695
+ justify-content: center;
696
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
697
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
698
+ background-color: var(--components-form-switch-standard-switch);
699
+ top: 0.125rem;
700
+ left: 0.125rem;
701
+ position: relative;
702
+ }
703
+ .eds-switch__switch--large .eds-switch__circle {
704
+ height: 1.75rem;
705
+ width: 1.75rem;
706
+ }
707
+ .eds-contrast .eds-switch__circle {
708
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
709
+ }
710
+ .eds-switch__switch {
711
+ position: relative;
712
+ background-color: var(--components-form-switch-standard-fill-false);
713
+ content: "";
714
+ display: block;
715
+ transition: background-color 0.1s ease-in-out;
716
+ height: 1.5rem;
717
+ width: 3rem;
718
+ border-radius: 1.5rem;
719
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
720
+ }
721
+ .eds-contrast .eds-switch__switch {
722
+ background-color: var(--components-form-switch-contrast-fill-false);
723
+ }
724
+ .eds-switch--right .eds-switch__switch {
725
+ margin-right: 0.75rem;
726
+ }
727
+ .eds-switch__switch svg g,
728
+ .eds-switch__switch path {
729
+ fill: var(--components-form-switch-standard-icon-false);
730
+ transition: fill ease-in-out 0.1s;
731
+ }
732
+ .eds-contrast .eds-switch__switch svg g,
733
+ .eds-contrast .eds-switch__switch path {
734
+ fill: var(--components-form-switch-contrast-icon-false);
735
+ }
736
+ :checked + .eds-switch__switch {
737
+ background-color: var(--eds-switch-color);
738
+ }
739
+ :checked + .eds-switch__switch .eds-switch__circle {
740
+ left: 1.625rem;
741
+ }
742
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
743
+ :checked + .eds-switch__switch .eds-switch__circle path {
744
+ fill: var(--eds-switch-color);
745
+ }
746
+ .eds-contrast :checked + .eds-switch__switch {
747
+ background-color: var(--eds-switch-contrast-color);
748
+ }
749
+ :focus-visible + .eds-switch__switch {
750
+ outline: 2px solid #181c56;
751
+ outline-color: var(--basecolors-stroke-focus-standard);
752
+ outline-offset: 0.125rem;
753
+ }
754
+ .eds-contrast :focus-visible + .eds-switch__switch {
755
+ outline-color: var(--basecolors-stroke-focus-contrast);
756
+ }
757
+ .eds-switch__switch--large {
758
+ width: 3.75rem;
759
+ height: 2rem;
760
+ border-radius: 3.75rem;
761
+ }
762
+ :checked + .eds-switch__switch--large .eds-switch__circle {
763
+ left: 1.875rem;
764
+ }
765
+ .eds-switch__switch--large svg {
766
+ position: relative;
767
+ right: 0.05rem;
768
+ }
769
+ .eds-switch__label--large--right {
770
+ font-size: 1rem;
771
+ }
772
+ .eds-switch__label--large--bottom {
773
+ font-size: 0.875rem;
774
+ }
775
+ .eds-switch__label--medium--right {
776
+ font-size: 0.875rem;
777
+ }
778
+ .eds-switch__label--medium--bottom {
779
+ font-size: 0.75rem;
780
+ }
781
+ /* DO NOT CHANGE!*/
782
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
779
783
  .eds-form-component--radio__container {
780
784
  display: flex;
781
785
  justify-content: center;
@@ -806,12 +810,12 @@
806
810
  height: 0.625rem;
807
811
  width: 0.625rem;
808
812
  }
809
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
813
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
810
814
  outline: 2px solid #181c56;
811
815
  outline-color: var(--basecolors-stroke-focus-standard);
812
816
  outline-offset: 0.125rem;
813
817
  }
814
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
818
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
815
819
  outline-color: var(--basecolors-stroke-focus-contrast);
816
820
  }
817
821
  .eds-form-component--radio__container .eds-form-component--radio__radio {
@@ -858,12 +862,12 @@
858
862
  }
859
863
  /* DO NOT CHANGE!*/
860
864
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
861
- .eds-input-panel:focus-within .eds-input-panel__container {
865
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
862
866
  outline: 2px solid #181c56;
863
867
  outline-color: var(--basecolors-stroke-focus-standard);
864
868
  outline-offset: 0.125rem;
865
869
  }
866
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
870
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
867
871
  outline-color: var(--basecolors-stroke-focus-contrast);
868
872
  }
869
873
  .eds-input-panel > input {
@@ -1022,7 +1026,7 @@ input:disabled + .eds-input-panel__container {
1022
1026
  .eds-textfield__clear-button:hover {
1023
1027
  background: var(--components-form-basepanel-standard-fill-hover);
1024
1028
  }
1025
- .eds-textfield__clear-button:focus {
1029
+ .eds-textfield__clear-button:focus-visible {
1026
1030
  outline: 2px solid #181c56;
1027
1031
  outline-color: var(--basecolors-stroke-focus-standard);
1028
1032
  outline-offset: 0.125rem;
@@ -1112,20 +1116,20 @@ input:disabled + .eds-input-panel__container {
1112
1116
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1113
1117
  color: var(--components-form-segmentedcontrol-contrast-text-selected);
1114
1118
  }
1115
- .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1119
+ .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1116
1120
  outline: 2px solid #181c56;
1117
1121
  outline-color: var(--basecolors-stroke-focus-standard);
1118
1122
  outline-offset: 0.125rem;
1119
1123
  }
1120
- .eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
1124
+ .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1121
1125
  outline-color: var(--basecolors-stroke-focus-contrast);
1122
1126
  }
1123
- .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1127
+ .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1124
1128
  outline: 2px solid #181c56;
1125
1129
  outline-color: var(--basecolors-stroke-focus-standard);
1126
1130
  outline-offset: 0.125rem;
1127
1131
  }
1128
- .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1132
+ .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1129
1133
  outline-color: var(--basecolors-stroke-focus-contrast);
1130
1134
  }
1131
1135
  /* DO NOT CHANGE!*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.1.10",
3
+ "version": "8.2.0-beta.0",
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.2.38",
30
+ "@entur/button": "^3.3.0-beta.0",
31
31
  "@entur/icons": "^7.6.0",
32
32
  "@entur/tokens": "^3.17.5",
33
- "@entur/tooltip": "^5.1.6",
34
- "@entur/typography": "^1.8.51",
33
+ "@entur/tooltip": "^5.2.0-beta.0",
34
+ "@entur/typography": "^1.9.0-beta.0",
35
35
  "@entur/utils": "^0.12.2",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "1a989376d61ab59a8c554a9cab733039aef8b2eb"
41
+ "gitHead": "6ee621529704e08c9814cda206da98c37a9f0689"
42
42
  }