@entur/form 8.3.2-beta.6 → 8.3.2-beta.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 +471 -471
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -208,6 +208,11 @@
208
208
  margin-right: 0;
209
209
  margin-left: 0.75rem;
210
210
  }
211
+ .eds-fieldset {
212
+ margin: 0;
213
+ padding: 0;
214
+ border: 0;
215
+ }
211
216
  /* DO NOT CHANGE!*/
212
217
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
218
  .eds-feedback-text {
@@ -281,99 +286,6 @@
281
286
  .eds-contrast .eds-feedback-text__icon--warning circle {
282
287
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
283
288
  }
284
- .eds-fieldset {
285
- margin: 0;
286
- padding: 0;
287
- border: 0;
288
- }
289
- /* DO NOT CHANGE!*/
290
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
291
- .eds-input-group {
292
- color: inherit;
293
- display: block;
294
- position: relative;
295
- }
296
- .eds-input-group__label {
297
- color: var(--components-form-baseform-standard-text-label);
298
- display: flex;
299
- font-size: 1rem;
300
- position: absolute;
301
- line-height: 1rem;
302
- height: 3rem;
303
- padding-left: 0;
304
- top: 1rem;
305
- 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;
306
- -webkit-user-select: none;
307
- -moz-user-select: none;
308
- user-select: none;
309
- pointer-events: none;
310
- }
311
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
312
- top: 0.375rem;
313
- font-size: 0.75rem;
314
- line-height: 0.75rem;
315
- height: 10px;
316
- padding: 0;
317
- }
318
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
319
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
320
- background: var(--textarea-label-background);
321
- width: calc(100% - 1rem - 1rem - 4px);
322
- }
323
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
324
- top: 0.5rem;
325
- font-size: 0.875rem;
326
- line-height: 1rem;
327
- padding: 0;
328
- }
329
- .eds-form-control-wrapper--size-large .eds-input-group__label {
330
- top: 0.75rem;
331
- font-size: 1.5rem;
332
- line-height: 2.25rem;
333
- }
334
- .eds-input-group__label--filled {
335
- top: 0.375rem;
336
- font-size: 0.75rem;
337
- line-height: 0.75rem;
338
- height: 10px;
339
- padding: 0;
340
- }
341
- .eds-textarea__label .eds-input-group__label--filled {
342
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
343
- background: var(--textarea-label-background);
344
- width: calc(100% - 1rem - 1rem - 4px);
345
- }
346
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
347
- top: 0.5rem;
348
- font-size: 0.875rem;
349
- line-height: 1rem;
350
- padding: 0;
351
- }
352
-
353
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
354
- top: 0.375rem;
355
- font-size: 0.75rem;
356
- line-height: 0.75rem;
357
- height: 10px;
358
- padding: 0;
359
- }
360
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
361
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
362
- background: var(--textarea-label-background);
363
- width: calc(100% - 1rem - 1rem - 4px);
364
- }
365
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
366
- top: 0.5rem;
367
- font-size: 0.875rem;
368
- line-height: 1rem;
369
- padding: 0;
370
- }
371
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
372
- top: 1rem;
373
- font-size: 1rem;
374
- height: 3rem;
375
- line-height: 1rem;
376
- }
377
289
  /* DO NOT CHANGE!*/
378
290
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
379
291
  .eds-checkbox__container {
@@ -568,151 +480,322 @@
568
480
  }
569
481
  /* DO NOT CHANGE!*/
570
482
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
571
- .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
572
- outline: 2px solid #181c56;
573
- outline-color: var(--basecolors-stroke-focus-standard);
574
- outline-offset: 0.125rem;
575
- }
576
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
577
- outline-color: var(--basecolors-stroke-focus-contrast);
483
+ .eds-input-group {
484
+ color: inherit;
485
+ display: block;
486
+ position: relative;
578
487
  }
579
- .eds-input-panel > input {
488
+ .eds-input-group__label {
489
+ color: var(--components-form-baseform-standard-text-label);
490
+ display: flex;
491
+ font-size: 1rem;
580
492
  position: absolute;
581
- opacity: 0;
582
- cursor: pointer;
583
- height: 0;
584
- width: 0;
493
+ line-height: 1rem;
494
+ height: 3rem;
495
+ padding-left: 0;
496
+ top: 1rem;
497
+ 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;
498
+ -webkit-user-select: none;
499
+ -moz-user-select: none;
500
+ user-select: none;
501
+ pointer-events: none;
585
502
  }
586
- .eds-input-panel > input:checked + .eds-input-panel__container {
587
- border-color: var(--components-form-basepanel-standard-border-selected);
588
- background: var(--components-form-basepanel-standard-fill-selected);
503
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
504
+ top: 0.375rem;
505
+ font-size: 0.75rem;
506
+ line-height: 0.75rem;
507
+ height: 10px;
508
+ padding: 0;
589
509
  }
590
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
591
- border-color: var(--components-form-basepanel-contrast-border-selected);
592
- background: var(--components-form-basepanel-contrast-fill-selected);
510
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
511
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
512
+ background: var(--textarea-label-background);
513
+ width: calc(100% - 1rem - 1rem - 4px);
593
514
  }
594
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
595
- width: 0.75rem;
596
- height: 0.75rem;
515
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
516
+ top: 0.5rem;
517
+ font-size: 0.875rem;
518
+ line-height: 1rem;
519
+ padding: 0;
597
520
  }
598
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
599
- background-color: var(--components-form-radio-contrast-icon);
521
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
522
+ top: 0.75rem;
523
+ font-size: 1.5rem;
524
+ line-height: 2.25rem;
600
525
  }
601
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
602
- background-color: var(--components-form-basepanel-standard-fill-hover);
603
- /* The following styling is needed to sync the inner checkbox/radiobutton's
604
- hover state styling with the inputPanel container */
526
+ .eds-input-group__label--filled {
527
+ top: 0.375rem;
528
+ font-size: 0.75rem;
529
+ line-height: 0.75rem;
530
+ height: 10px;
531
+ padding: 0;
605
532
  }
606
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
607
- background-color: var(--components-form-basepanel-contrast-fill-hover);
533
+ .eds-textarea__label .eds-input-group__label--filled {
534
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
535
+ background: var(--textarea-label-background);
536
+ width: calc(100% - 1rem - 1rem - 4px);
608
537
  }
609
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
610
- background-color: var(--components-form-basepanel-standard-fill-hover);
611
- border-color: var(--components-form-basepanel-standard-border-selected);
538
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
539
+ top: 0.5rem;
540
+ font-size: 0.875rem;
541
+ line-height: 1rem;
542
+ padding: 0;
612
543
  }
613
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
614
- background-color: var(--components-form-basepanel-contrast-fill-hover);
615
- border-color: var(--components-form-basepanel-contrast-border-selected);
544
+
545
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
546
+ top: 0.375rem;
547
+ font-size: 0.75rem;
548
+ line-height: 0.75rem;
549
+ height: 10px;
550
+ padding: 0;
616
551
  }
617
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
618
- border-color: transparent;
552
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
553
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
554
+ background: var(--textarea-label-background);
555
+ width: calc(100% - 1rem - 1rem - 4px);
619
556
  }
620
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
621
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
557
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
558
+ top: 0.5rem;
559
+ font-size: 0.875rem;
560
+ line-height: 1rem;
561
+ padding: 0;
622
562
  }
623
- .eds-input-panel__container {
624
- background: var(--components-form-basepanel-standard-fill-default);
625
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
626
- color: var(--components-form-basepanel-standard-text-accent);
627
- border-radius: 0.25rem;
628
- display: flex;
629
- flex-direction: column;
630
- justify-content: flex-start;
631
- min-width: 20rem;
632
- position: relative;
633
- padding: 1rem;
563
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
564
+ top: 1rem;
565
+ font-size: 1rem;
566
+ height: 3rem;
567
+ line-height: 1rem;
568
+ }
569
+ /* DO NOT CHANGE!*/
570
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
571
+ .eds-switch {
572
+ cursor: pointer;
634
573
  -webkit-user-select: none;
635
574
  -moz-user-select: none;
636
575
  user-select: none;
576
+ padding: 0.5rem 0;
637
577
  width: -moz-fit-content;
638
578
  width: fit-content;
639
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
640
- }
641
- .eds-contrast .eds-input-panel__container {
642
- background-color: var(--components-form-basepanel-contrast-fill-default);
643
- border-color: var(--components-form-basepanel-contrast-border-default);
644
- color: var(--components-form-basepanel-contrast-text-accent);
645
579
  }
646
- .eds-input-panel__container:hover {
647
- background-color: var(--components-form-basepanel-standard-fill-hover);
648
- /* The following styling is needed to sync the inner checkbox/radiobutton's
649
- hover state styling with the inputPanel container */
580
+ .eds-switch input {
581
+ opacity: 0;
582
+ pointer-events: none;
583
+ position: absolute;
650
584
  }
651
- .eds-contrast .eds-input-panel__container:hover {
652
- background-color: var(--components-form-basepanel-contrast-fill-hover);
585
+ .eds-switch--right {
586
+ display: flex;
587
+ flex-direction: row;
588
+ align-items: center;
653
589
  }
654
- .eds-input-panel__container:hover .eds-checkbox__icon,
655
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
656
- background-color: var(--components-form-basepanel-standard-fill-hover);
657
- border-color: var(--components-form-basepanel-standard-border-selected);
590
+ .eds-switch--bottom {
591
+ display: flex;
592
+ flex-direction: column;
593
+ align-items: center;
658
594
  }
659
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
660
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
661
- background-color: var(--components-form-basepanel-contrast-fill-hover);
662
- border-color: var(--components-form-basepanel-contrast-border-selected);
595
+ .eds-switch__circle {
596
+ border-radius: 50%;
597
+ height: 1.25rem;
598
+ width: 1.25rem;
599
+ content: "";
600
+ display: flex;
601
+ align-items: center;
602
+ justify-content: center;
603
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
604
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
605
+ background-color: var(--components-form-switch-standard-switch);
606
+ top: 0.125rem;
607
+ left: 0.125rem;
608
+ position: relative;
663
609
  }
664
- input:disabled + .eds-input-panel__container {
665
- background: var(--components-form-basepanel-standard-fill-disabled);
666
- border-color: var(--components-form-basepanel-standard-border-disabled);
667
- color: var(--components-form-basepanel-standard-text-disabled);
668
- cursor: not-allowed;
610
+ .eds-switch__switch--large .eds-switch__circle {
611
+ height: 1.75rem;
612
+ width: 1.75rem;
669
613
  }
670
- .eds-contrast input:disabled + .eds-input-panel__container {
671
- background: var(--components-form-basepanel-contrast-fill-disabled);
672
- border-style: dashed;
673
- border-color: var(--components-form-basepanel-contrast-border-disabled);
674
- color: var(--components-form-basepanel-contrast-text-disabled);
614
+ .eds-contrast .eds-switch__circle {
615
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
675
616
  }
676
- .eds-input-panel__container .eds-checkbox__icon,
677
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
678
- .eds-input-panel__container .eds-form-component--radio__radio {
679
- width: 1.5rem;
617
+ .eds-switch__switch {
618
+ position: relative;
619
+ background-color: var(--components-form-switch-standard-fill-false);
620
+ content: "";
621
+ display: block;
622
+ transition: background-color 0.1s ease-in-out;
680
623
  height: 1.5rem;
681
- margin-right: 0;
624
+ width: 3rem;
625
+ border-radius: 1.5rem;
626
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
682
627
  }
683
- .eds-input-panel--medium .eds-input-panel__title {
628
+ .eds-contrast .eds-switch__switch {
629
+ background-color: var(--components-form-switch-contrast-fill-false);
630
+ }
631
+ .eds-switch--right .eds-switch__switch {
632
+ margin-right: 0.75rem;
633
+ }
634
+ .eds-switch__switch svg g,
635
+ .eds-switch__switch path {
636
+ fill: var(--components-form-switch-standard-icon-false);
637
+ transition: fill ease-in-out 0.1s;
638
+ }
639
+ .eds-contrast .eds-switch__switch svg g,
640
+ .eds-contrast .eds-switch__switch path {
641
+ fill: var(--components-form-switch-contrast-icon-false);
642
+ }
643
+ :checked + .eds-switch__switch {
644
+ background-color: var(--eds-switch-color);
645
+ }
646
+ :checked + .eds-switch__switch .eds-switch__circle {
647
+ left: 1.625rem;
648
+ }
649
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
650
+ :checked + .eds-switch__switch .eds-switch__circle path {
651
+ fill: var(--eds-switch-color);
652
+ }
653
+ .eds-contrast :checked + .eds-switch__switch {
654
+ background-color: var(--eds-switch-contrast-color);
655
+ }
656
+ :focus-visible + .eds-switch__switch {
657
+ outline: 2px solid #181c56;
658
+ outline-color: var(--basecolors-stroke-focus-standard);
659
+ outline-offset: 0.125rem;
660
+ }
661
+ .eds-contrast :focus-visible + .eds-switch__switch {
662
+ outline-color: var(--basecolors-stroke-focus-contrast);
663
+ }
664
+ .eds-switch__switch--large {
665
+ width: 3.75rem;
666
+ height: 2rem;
667
+ border-radius: 3.75rem;
668
+ }
669
+ :checked + .eds-switch__switch--large .eds-switch__circle {
670
+ left: 1.875rem;
671
+ }
672
+ .eds-switch__switch--large svg {
673
+ position: relative;
674
+ right: 0.05rem;
675
+ }
676
+ .eds-switch__label--large--right {
684
677
  font-size: 1rem;
685
- font-weight: 500;
686
678
  }
687
- .eds-input-panel--medium.eds-input-panel__container {
688
- padding-bottom: 1rem;
689
- min-height: 3.75rem;
679
+ .eds-switch__label--large--bottom {
680
+ font-size: 0.875rem;
690
681
  }
691
- .eds-input-panel--large.eds-input-panel__container {
692
- min-height: 6rem;
682
+ .eds-switch__label--medium--right {
683
+ font-size: 0.875rem;
693
684
  }
694
- .eds-input-panel--large .eds-input-panel__title {
695
- font-size: 1.25rem;
696
- font-weight: 500;
697
- line-height: 1.875rem;
685
+ .eds-switch__label--medium--bottom {
686
+ font-size: 0.75rem;
698
687
  }
699
- .eds-input-panel__title-wrapper {
688
+ /* DO NOT CHANGE!*/
689
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
690
+ .eds-form-component--radio__container {
700
691
  display: flex;
701
- justify-content: space-between;
692
+ justify-content: center;
702
693
  align-items: center;
694
+ position: relative;
695
+ cursor: pointer;
696
+ height: 2rem;
697
+ width: -moz-fit-content;
698
+ width: fit-content;
699
+ -webkit-user-select: none;
700
+ -moz-user-select: none;
701
+ user-select: none;
703
702
  }
704
- .eds-input-panel__secondary-label-and-icon-wrapper {
703
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
704
+ background-color: var(--components-form-radio-standard-fill-hover);
705
+ }
706
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
707
+ background-color: var(--components-form-radio-contrast-fill-hover);
708
+ }
709
+ .eds-form-component--radio__container input {
710
+ position: absolute;
711
+ opacity: 0;
712
+ cursor: pointer;
713
+ height: 0;
714
+ width: 0;
715
+ }
716
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
717
+ height: 0.625rem;
718
+ width: 0.625rem;
719
+ }
720
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
721
+ outline: 2px solid #181c56;
722
+ outline-color: var(--basecolors-stroke-focus-standard);
723
+ outline-offset: 0.125rem;
724
+ }
725
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
726
+ outline-color: var(--basecolors-stroke-focus-contrast);
727
+ }
728
+ .eds-form-component--radio__container:has(input:disabled) {
729
+ cursor: not-allowed;
730
+ }
731
+ .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
732
+ cursor: default;
733
+ -webkit-user-select: text;
734
+ -moz-user-select: text;
735
+ user-select: text;
736
+ }
737
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
738
+ position: relative;
739
+ height: 1.25rem;
740
+ width: 1.25rem;
741
+ margin-right: 1rem;
742
+ background-color: var(--components-form-radio-standard-fill-default);
743
+ border: 0.125rem solid var(--components-form-radio-standard-border);
744
+ border-radius: 50%;
705
745
  display: flex;
706
- justify-content: center;
707
746
  align-items: center;
708
- gap: 0.75rem;
747
+ justify-content: center;
709
748
  }
710
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
711
- margin: 0;
749
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
750
+ background-color: var(--components-form-radio-contrast-fill-default);
751
+ border-color: var(--components-form-radio-contrast-border);
712
752
  }
713
- .eds-input-panel__additional-content {
714
- margin-top: 0.25rem;
715
- word-wrap: break-word;
753
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
754
+ background: var(--components-form-radio-contrast-fill-disabled);
755
+ border-color: var(--components-form-radio-contrast-text-disabled);
756
+ }
757
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
758
+ border-color: var(--components-form-radio-contrast-text-disabled);
759
+ }
760
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
761
+ background: var(--components-form-radio-contrast-fill-disabled);
762
+ border-color: var(--components-form-radio-contrast-text-disabled);
763
+ }
764
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
765
+ color: var(--components-form-radio-contrast-text-disabled);
766
+ }
767
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
768
+ background-color: var(--components-form-radio-standard-icon-disabled);
769
+ border-color: var(--components-form-radio-contrast-text-disabled);
770
+ }
771
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
772
+ background-color: var(--components-form-radio-standard-icon-disabled);
773
+ }
774
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
775
+ background-color: var(--components-form-radio-contrast-icon-disabled);
776
+ }
777
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
778
+ background: var(--components-form-radio-standard-fill-disabled);
779
+ border-color: var(--components-form-radio-standard-border-readonly);
780
+ }
781
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
782
+ background: var(--components-form-radio-contrast-fill-disabled);
783
+ border-color: var(--components-form-radio-contrast-border-readonly);
784
+ }
785
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
786
+ background-color: var(--components-form-radio-standard-icon);
787
+ border-color: var(--components-form-radio-standard-border-readonly);
788
+ }
789
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
790
+ display: block;
791
+ width: 0;
792
+ height: 0;
793
+ border-radius: 50%;
794
+ background-color: var(--components-form-radio-standard-fill-selected);
795
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
796
+ }
797
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
798
+ background-color: var(--components-form-radio-contrast-icon);
716
799
  }
717
800
  /* DO NOT CHANGE!*/
718
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -882,234 +965,151 @@ input:disabled + .eds-input-panel__container {
882
965
  }
883
966
  /* DO NOT CHANGE!*/
884
967
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
885
- .eds-form-component--radio__container {
886
- display: flex;
887
- justify-content: center;
888
- align-items: center;
889
- position: relative;
890
- cursor: pointer;
891
- height: 2rem;
892
- width: -moz-fit-content;
893
- width: fit-content;
894
- -webkit-user-select: none;
895
- -moz-user-select: none;
896
- user-select: none;
897
- }
898
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
899
- background-color: var(--components-form-radio-standard-fill-hover);
968
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
969
+ outline: 2px solid #181c56;
970
+ outline-color: var(--basecolors-stroke-focus-standard);
971
+ outline-offset: 0.125rem;
900
972
  }
901
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
902
- background-color: var(--components-form-radio-contrast-fill-hover);
973
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
974
+ outline-color: var(--basecolors-stroke-focus-contrast);
903
975
  }
904
- .eds-form-component--radio__container input {
976
+ .eds-input-panel > input {
905
977
  position: absolute;
906
978
  opacity: 0;
907
979
  cursor: pointer;
908
980
  height: 0;
909
981
  width: 0;
910
982
  }
911
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
912
- height: 0.625rem;
913
- width: 0.625rem;
914
- }
915
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
916
- outline: 2px solid #181c56;
917
- outline-color: var(--basecolors-stroke-focus-standard);
918
- outline-offset: 0.125rem;
919
- }
920
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
921
- outline-color: var(--basecolors-stroke-focus-contrast);
922
- }
923
- .eds-form-component--radio__container:has(input:disabled) {
924
- cursor: not-allowed;
925
- }
926
- .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
927
- cursor: default;
928
- -webkit-user-select: text;
929
- -moz-user-select: text;
930
- user-select: text;
931
- }
932
- .eds-form-component--radio__container .eds-form-component--radio__radio {
933
- position: relative;
934
- height: 1.25rem;
935
- width: 1.25rem;
936
- margin-right: 1rem;
937
- background-color: var(--components-form-radio-standard-fill-default);
938
- border: 0.125rem solid var(--components-form-radio-standard-border);
939
- border-radius: 50%;
940
- display: flex;
941
- align-items: center;
942
- justify-content: center;
943
- }
944
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
945
- background-color: var(--components-form-radio-contrast-fill-default);
946
- border-color: var(--components-form-radio-contrast-border);
947
- }
948
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
949
- background: var(--components-form-radio-contrast-fill-disabled);
950
- border-color: var(--components-form-radio-contrast-text-disabled);
951
- }
952
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
953
- border-color: var(--components-form-radio-contrast-text-disabled);
954
- }
955
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
956
- background: var(--components-form-radio-contrast-fill-disabled);
957
- border-color: var(--components-form-radio-contrast-text-disabled);
983
+ .eds-input-panel > input:checked + .eds-input-panel__container {
984
+ border-color: var(--components-form-basepanel-standard-border-selected);
985
+ background: var(--components-form-basepanel-standard-fill-selected);
958
986
  }
959
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
960
- color: var(--components-form-radio-contrast-text-disabled);
987
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
988
+ border-color: var(--components-form-basepanel-contrast-border-selected);
989
+ background: var(--components-form-basepanel-contrast-fill-selected);
961
990
  }
962
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
963
- background-color: var(--components-form-radio-standard-icon-disabled);
964
- border-color: var(--components-form-radio-contrast-text-disabled);
991
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
992
+ width: 0.75rem;
993
+ height: 0.75rem;
965
994
  }
966
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
967
- background-color: var(--components-form-radio-standard-icon-disabled);
995
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
996
+ background-color: var(--components-form-radio-contrast-icon);
968
997
  }
969
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
970
- background-color: var(--components-form-radio-contrast-icon-disabled);
998
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
999
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1000
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
1001
+ hover state styling with the inputPanel container */
971
1002
  }
972
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
973
- background: var(--components-form-radio-standard-fill-disabled);
974
- border-color: var(--components-form-radio-standard-border-readonly);
1003
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
1004
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
975
1005
  }
976
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
977
- background: var(--components-form-radio-contrast-fill-disabled);
978
- border-color: var(--components-form-radio-contrast-border-readonly);
1006
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1007
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1008
+ border-color: var(--components-form-basepanel-standard-border-selected);
979
1009
  }
980
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
981
- background-color: var(--components-form-radio-standard-icon);
982
- border-color: var(--components-form-radio-standard-border-readonly);
1010
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1011
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1012
+ border-color: var(--components-form-basepanel-contrast-border-selected);
983
1013
  }
984
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
985
- display: block;
986
- width: 0;
987
- height: 0;
988
- border-radius: 50%;
989
- background-color: var(--components-form-radio-standard-fill-selected);
990
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
1014
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1015
+ border-color: transparent;
991
1016
  }
992
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
993
- background-color: var(--components-form-radio-contrast-icon);
1017
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1018
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
994
1019
  }
995
- /* DO NOT CHANGE!*/
996
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
997
- .eds-switch {
998
- cursor: pointer;
1020
+ .eds-input-panel__container {
1021
+ background: var(--components-form-basepanel-standard-fill-default);
1022
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
1023
+ color: var(--components-form-basepanel-standard-text-accent);
1024
+ border-radius: 0.25rem;
1025
+ display: flex;
1026
+ flex-direction: column;
1027
+ justify-content: flex-start;
1028
+ min-width: 20rem;
1029
+ position: relative;
1030
+ padding: 1rem;
999
1031
  -webkit-user-select: none;
1000
1032
  -moz-user-select: none;
1001
1033
  user-select: none;
1002
- padding: 0.5rem 0;
1003
1034
  width: -moz-fit-content;
1004
1035
  width: fit-content;
1036
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
1005
1037
  }
1006
- .eds-switch input {
1007
- opacity: 0;
1008
- pointer-events: none;
1009
- position: absolute;
1010
- }
1011
- .eds-switch--right {
1012
- display: flex;
1013
- flex-direction: row;
1014
- align-items: center;
1015
- }
1016
- .eds-switch--bottom {
1017
- display: flex;
1018
- flex-direction: column;
1019
- align-items: center;
1020
- }
1021
- .eds-switch__circle {
1022
- border-radius: 50%;
1023
- height: 1.25rem;
1024
- width: 1.25rem;
1025
- content: "";
1026
- display: flex;
1027
- align-items: center;
1028
- justify-content: center;
1029
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
1030
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1031
- background-color: var(--components-form-switch-standard-switch);
1032
- top: 0.125rem;
1033
- left: 0.125rem;
1034
- position: relative;
1035
- }
1036
- .eds-switch__switch--large .eds-switch__circle {
1037
- height: 1.75rem;
1038
- width: 1.75rem;
1039
- }
1040
- .eds-contrast .eds-switch__circle {
1041
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
1042
- }
1043
- .eds-switch__switch {
1044
- position: relative;
1045
- background-color: var(--components-form-switch-standard-fill-false);
1046
- content: "";
1047
- display: block;
1048
- transition: background-color 0.1s ease-in-out;
1049
- height: 1.5rem;
1050
- width: 3rem;
1051
- border-radius: 1.5rem;
1052
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
1053
- }
1054
- .eds-contrast .eds-switch__switch {
1055
- background-color: var(--components-form-switch-contrast-fill-false);
1056
- }
1057
- .eds-switch--right .eds-switch__switch {
1058
- margin-right: 0.75rem;
1059
- }
1060
- .eds-switch__switch svg g,
1061
- .eds-switch__switch path {
1062
- fill: var(--components-form-switch-standard-icon-false);
1063
- transition: fill ease-in-out 0.1s;
1038
+ .eds-contrast .eds-input-panel__container {
1039
+ background-color: var(--components-form-basepanel-contrast-fill-default);
1040
+ border-color: var(--components-form-basepanel-contrast-border-default);
1041
+ color: var(--components-form-basepanel-contrast-text-accent);
1064
1042
  }
1065
- .eds-contrast .eds-switch__switch svg g,
1066
- .eds-contrast .eds-switch__switch path {
1067
- fill: var(--components-form-switch-contrast-icon-false);
1043
+ .eds-input-panel__container:hover {
1044
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1045
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
1046
+ hover state styling with the inputPanel container */
1068
1047
  }
1069
- :checked + .eds-switch__switch {
1070
- background-color: var(--eds-switch-color);
1048
+ .eds-contrast .eds-input-panel__container:hover {
1049
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1071
1050
  }
1072
- :checked + .eds-switch__switch .eds-switch__circle {
1073
- left: 1.625rem;
1051
+ .eds-input-panel__container:hover .eds-checkbox__icon,
1052
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
1053
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1054
+ border-color: var(--components-form-basepanel-standard-border-selected);
1074
1055
  }
1075
- :checked + .eds-switch__switch .eds-switch__circle svg g,
1076
- :checked + .eds-switch__switch .eds-switch__circle path {
1077
- fill: var(--eds-switch-color);
1056
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
1057
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
1058
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1059
+ border-color: var(--components-form-basepanel-contrast-border-selected);
1078
1060
  }
1079
- .eds-contrast :checked + .eds-switch__switch {
1080
- background-color: var(--eds-switch-contrast-color);
1061
+ input:disabled + .eds-input-panel__container {
1062
+ background: var(--components-form-basepanel-standard-fill-disabled);
1063
+ border-color: var(--components-form-basepanel-standard-border-disabled);
1064
+ color: var(--components-form-basepanel-standard-text-disabled);
1065
+ cursor: not-allowed;
1081
1066
  }
1082
- :focus-visible + .eds-switch__switch {
1083
- outline: 2px solid #181c56;
1084
- outline-color: var(--basecolors-stroke-focus-standard);
1085
- outline-offset: 0.125rem;
1067
+ .eds-contrast input:disabled + .eds-input-panel__container {
1068
+ background: var(--components-form-basepanel-contrast-fill-disabled);
1069
+ border-style: dashed;
1070
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
1071
+ color: var(--components-form-basepanel-contrast-text-disabled);
1086
1072
  }
1087
- .eds-contrast :focus-visible + .eds-switch__switch {
1088
- outline-color: var(--basecolors-stroke-focus-contrast);
1073
+ .eds-input-panel__container .eds-checkbox__icon,
1074
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
1075
+ .eds-input-panel__container .eds-form-component--radio__radio {
1076
+ width: 1.5rem;
1077
+ height: 1.5rem;
1078
+ margin-right: 0;
1089
1079
  }
1090
- .eds-switch__switch--large {
1091
- width: 3.75rem;
1092
- height: 2rem;
1093
- border-radius: 3.75rem;
1080
+ .eds-input-panel--medium .eds-input-panel__title {
1081
+ font-size: 1rem;
1082
+ font-weight: 500;
1094
1083
  }
1095
- :checked + .eds-switch__switch--large .eds-switch__circle {
1096
- left: 1.875rem;
1084
+ .eds-input-panel--medium.eds-input-panel__container {
1085
+ padding-bottom: 1rem;
1086
+ min-height: 3.75rem;
1097
1087
  }
1098
- .eds-switch__switch--large svg {
1099
- position: relative;
1100
- right: 0.05rem;
1088
+ .eds-input-panel--large.eds-input-panel__container {
1089
+ min-height: 6rem;
1101
1090
  }
1102
- .eds-switch__label--large--right {
1103
- font-size: 1rem;
1091
+ .eds-input-panel--large .eds-input-panel__title {
1092
+ font-size: 1.25rem;
1093
+ font-weight: 500;
1094
+ line-height: 1.875rem;
1104
1095
  }
1105
- .eds-switch__label--large--bottom {
1106
- font-size: 0.875rem;
1096
+ .eds-input-panel__title-wrapper {
1097
+ display: flex;
1098
+ justify-content: space-between;
1099
+ align-items: center;
1107
1100
  }
1108
- .eds-switch__label--medium--right {
1109
- font-size: 0.875rem;
1101
+ .eds-input-panel__secondary-label-and-icon-wrapper {
1102
+ display: flex;
1103
+ justify-content: center;
1104
+ align-items: center;
1105
+ gap: 0.75rem;
1110
1106
  }
1111
- .eds-switch__label--medium--bottom {
1112
- font-size: 0.75rem;
1107
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1108
+ margin: 0;
1109
+ }
1110
+ .eds-input-panel__additional-content {
1111
+ margin-top: 0.25rem;
1112
+ word-wrap: break-word;
1113
1113
  }
1114
1114
  /* DO NOT CHANGE!*/
1115
1115
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1155,6 +1155,88 @@ input:disabled + .eds-input-panel__container {
1155
1155
  }
1156
1156
  /* DO NOT CHANGE!*/
1157
1157
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1158
+ .eds-segmented-choice {
1159
+ display: block;
1160
+ flex: 1 1 0px;
1161
+ }
1162
+ .eds-segmented-choice .eds-base-segmented {
1163
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1164
+ background-color: var(--background-color);
1165
+ border-radius: 0.25rem;
1166
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1167
+ cursor: pointer;
1168
+ font-size: 0.875rem;
1169
+ height: 1.5rem;
1170
+ line-height: 1.25rem;
1171
+ margin: 0.25rem;
1172
+ outline-color: transparent;
1173
+ padding: calc(0.25rem / 2) 0.75rem;
1174
+ text-align: center;
1175
+ -webkit-user-select: none;
1176
+ -moz-user-select: none;
1177
+ user-select: none;
1178
+ }
1179
+ .eds-segmented-choice .eds-base-segmented--large {
1180
+ font-size: 1rem;
1181
+ height: 2.5rem;
1182
+ line-height: 1.5rem;
1183
+ padding: 0.5rem 0.75rem;
1184
+ }
1185
+ .eds-contrast .eds-segmented-choice .eds-base-segmented {
1186
+ --background-color: var(--components-form-segmentedcontrol-contrast-background);
1187
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1188
+ }
1189
+ .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1190
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1191
+ }
1192
+ .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1193
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1194
+ }
1195
+ .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1196
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1197
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1198
+ }
1199
+ .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1200
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1201
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1202
+ }
1203
+ .eds-segmented-choice input {
1204
+ -webkit-appearance: none;
1205
+ -moz-appearance: none;
1206
+ appearance: none;
1207
+ position: absolute;
1208
+ opacity: 0;
1209
+ height: 0;
1210
+ width: 0;
1211
+ }
1212
+ .eds-segmented-choice input:checked + .eds-base-segmented {
1213
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1214
+ color: var(--components-form-segmentedcontrol-standard-text-selected);
1215
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1216
+ }
1217
+ .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1218
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1219
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1220
+ color: var(--components-form-segmentedcontrol-contrast-text-selected);
1221
+ }
1222
+ .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1223
+ outline: 2px solid #181c56;
1224
+ outline-color: var(--basecolors-stroke-focus-standard);
1225
+ outline-offset: 0.125rem;
1226
+ }
1227
+ .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1228
+ outline-color: var(--basecolors-stroke-focus-contrast);
1229
+ }
1230
+ .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1231
+ outline: 2px solid #181c56;
1232
+ outline-color: var(--basecolors-stroke-focus-standard);
1233
+ outline-offset: 0.125rem;
1234
+ }
1235
+ .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1236
+ outline-color: var(--basecolors-stroke-focus-contrast);
1237
+ }
1238
+ /* DO NOT CHANGE!*/
1239
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1158
1240
  .eds-segmented-control {
1159
1241
  margin-top: 0.25rem;
1160
1242
  display: flex;
@@ -1763,85 +1845,3 @@ input:disabled + .eds-input-panel__container {
1763
1845
  :root {
1764
1846
  --eds-form: 1;
1765
1847
  }
1766
- /* DO NOT CHANGE!*/
1767
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1768
- .eds-segmented-choice {
1769
- display: block;
1770
- flex: 1 1 0px;
1771
- }
1772
- .eds-segmented-choice .eds-base-segmented {
1773
- --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1774
- background-color: var(--background-color);
1775
- border-radius: 0.25rem;
1776
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1777
- cursor: pointer;
1778
- font-size: 0.875rem;
1779
- height: 1.5rem;
1780
- line-height: 1.25rem;
1781
- margin: 0.25rem;
1782
- outline-color: transparent;
1783
- padding: calc(0.25rem / 2) 0.75rem;
1784
- text-align: center;
1785
- -webkit-user-select: none;
1786
- -moz-user-select: none;
1787
- user-select: none;
1788
- }
1789
- .eds-segmented-choice .eds-base-segmented--large {
1790
- font-size: 1rem;
1791
- height: 2.5rem;
1792
- line-height: 1.5rem;
1793
- padding: 0.5rem 0.75rem;
1794
- }
1795
- .eds-contrast .eds-segmented-choice .eds-base-segmented {
1796
- --background-color: var(--components-form-segmentedcontrol-contrast-background);
1797
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1798
- }
1799
- .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1800
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1801
- }
1802
- .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1803
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1804
- }
1805
- .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1806
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1807
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1808
- }
1809
- .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1810
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1811
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1812
- }
1813
- .eds-segmented-choice input {
1814
- -webkit-appearance: none;
1815
- -moz-appearance: none;
1816
- appearance: none;
1817
- position: absolute;
1818
- opacity: 0;
1819
- height: 0;
1820
- width: 0;
1821
- }
1822
- .eds-segmented-choice input:checked + .eds-base-segmented {
1823
- --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1824
- color: var(--components-form-segmentedcontrol-standard-text-selected);
1825
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1826
- }
1827
- .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1828
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1829
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1830
- color: var(--components-form-segmentedcontrol-contrast-text-selected);
1831
- }
1832
- .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1833
- outline: 2px solid #181c56;
1834
- outline-color: var(--basecolors-stroke-focus-standard);
1835
- outline-offset: 0.125rem;
1836
- }
1837
- .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1838
- outline-color: var(--basecolors-stroke-focus-contrast);
1839
- }
1840
- .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1841
- outline: 2px solid #181c56;
1842
- outline-color: var(--basecolors-stroke-focus-standard);
1843
- outline-offset: 0.125rem;
1844
- }
1845
- .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1846
- outline-color: var(--basecolors-stroke-focus-contrast);
1847
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.3.2-beta.6",
3
+ "version": "8.3.2-beta.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.13-beta.6",
30
+ "@entur/button": "^3.3.13-beta.7",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.6",
34
- "@entur/typography": "^1.10.0-beta.6",
33
+ "@entur/tooltip": "^5.2.13-beta.7",
34
+ "@entur/typography": "^1.10.0-beta.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": "42c5a2e7657f2b5ca17328fcf55873b19e23f94a"
41
+ "gitHead": "26b5f016229bb0115d5f31ce51e15eafd015a870"
42
42
  }