@entur/form 8.3.2-beta.4 → 8.3.2-beta.6

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 +367 -367
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -281,6 +281,99 @@
281
281
  .eds-contrast .eds-feedback-text__icon--warning circle {
282
282
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
283
283
  }
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
+ }
284
377
  /* DO NOT CHANGE!*/
285
378
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
286
379
  .eds-checkbox__container {
@@ -473,210 +566,153 @@
473
566
  stroke-dashoffset: 0;
474
567
  }
475
568
  }
476
- .eds-fieldset {
477
- margin: 0;
478
- padding: 0;
479
- border: 0;
480
- }
481
569
  /* DO NOT CHANGE!*/
482
570
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-form-component--radio__container {
484
- display: flex;
485
- justify-content: center;
486
- align-items: center;
487
- position: relative;
488
- cursor: pointer;
489
- height: 2rem;
490
- width: -moz-fit-content;
491
- width: fit-content;
492
- -webkit-user-select: none;
493
- -moz-user-select: none;
494
- user-select: none;
495
- }
496
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
497
- background-color: var(--components-form-radio-standard-fill-hover);
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;
498
575
  }
499
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
500
- background-color: var(--components-form-radio-contrast-fill-hover);
576
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
577
+ outline-color: var(--basecolors-stroke-focus-contrast);
501
578
  }
502
- .eds-form-component--radio__container input {
579
+ .eds-input-panel > input {
503
580
  position: absolute;
504
581
  opacity: 0;
505
582
  cursor: pointer;
506
583
  height: 0;
507
584
  width: 0;
508
585
  }
509
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
510
- height: 0.625rem;
511
- width: 0.625rem;
512
- }
513
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
514
- outline: 2px solid #181c56;
515
- outline-color: var(--basecolors-stroke-focus-standard);
516
- outline-offset: 0.125rem;
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);
517
589
  }
518
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
519
- outline-color: var(--basecolors-stroke-focus-contrast);
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);
520
593
  }
521
- .eds-form-component--radio__container:has(input:disabled) {
522
- cursor: not-allowed;
594
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
595
+ width: 0.75rem;
596
+ height: 0.75rem;
523
597
  }
524
- .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
525
- cursor: default;
526
- -webkit-user-select: text;
527
- -moz-user-select: text;
528
- user-select: text;
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);
529
600
  }
530
- .eds-form-component--radio__container .eds-form-component--radio__radio {
531
- position: relative;
532
- height: 1.25rem;
533
- width: 1.25rem;
534
- margin-right: 1rem;
535
- background-color: var(--components-form-radio-standard-fill-default);
536
- border: 0.125rem solid var(--components-form-radio-standard-border);
537
- border-radius: 50%;
538
- display: flex;
539
- align-items: center;
540
- justify-content: center;
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 */
541
605
  }
542
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
543
- background-color: var(--components-form-radio-contrast-fill-default);
544
- border-color: var(--components-form-radio-contrast-border);
606
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
607
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
545
608
  }
546
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
547
- background: var(--components-form-radio-contrast-fill-disabled);
548
- border-color: var(--components-form-radio-contrast-text-disabled);
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);
549
612
  }
550
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
551
- border-color: var(--components-form-radio-contrast-text-disabled);
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);
552
616
  }
553
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
554
- background: var(--components-form-radio-contrast-fill-disabled);
555
- border-color: var(--components-form-radio-contrast-text-disabled);
617
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
618
+ border-color: transparent;
556
619
  }
557
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
558
- color: var(--components-form-radio-contrast-text-disabled);
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);
559
622
  }
560
- .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 {
561
- background-color: var(--components-form-radio-standard-icon-disabled);
562
- border-color: var(--components-form-radio-contrast-text-disabled);
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;
634
+ -webkit-user-select: none;
635
+ -moz-user-select: none;
636
+ user-select: none;
637
+ width: -moz-fit-content;
638
+ width: fit-content;
639
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
563
640
  }
564
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
565
- background-color: var(--components-form-radio-standard-icon-disabled);
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);
566
645
  }
567
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
568
- background-color: var(--components-form-radio-contrast-icon-disabled);
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 */
569
650
  }
570
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
571
- background: var(--components-form-radio-standard-fill-disabled);
572
- border-color: var(--components-form-radio-standard-border-readonly);
651
+ .eds-contrast .eds-input-panel__container:hover {
652
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
573
653
  }
574
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
575
- background: var(--components-form-radio-contrast-fill-disabled);
576
- border-color: var(--components-form-radio-contrast-border-readonly);
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);
577
658
  }
578
- .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 {
579
- background-color: var(--components-form-radio-standard-icon);
580
- border-color: var(--components-form-radio-standard-border-readonly);
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);
581
663
  }
582
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
583
- display: block;
584
- width: 0;
585
- height: 0;
586
- border-radius: 50%;
587
- background-color: var(--components-form-radio-standard-fill-selected);
588
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
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;
589
669
  }
590
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
591
- background-color: var(--components-form-radio-contrast-icon);
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);
592
675
  }
593
- /* DO NOT CHANGE!*/
594
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
595
- .eds-input-group {
596
- color: inherit;
597
- display: block;
598
- position: relative;
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;
680
+ height: 1.5rem;
681
+ margin-right: 0;
599
682
  }
600
- .eds-input-group__label {
601
- color: var(--components-form-baseform-standard-text-label);
602
- display: flex;
683
+ .eds-input-panel--medium .eds-input-panel__title {
603
684
  font-size: 1rem;
604
- position: absolute;
605
- line-height: 1rem;
606
- height: 3rem;
607
- padding-left: 0;
608
- top: 1rem;
609
- 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;
610
- -webkit-user-select: none;
611
- -moz-user-select: none;
612
- user-select: none;
613
- pointer-events: none;
614
- }
615
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
616
- top: 0.375rem;
617
- font-size: 0.75rem;
618
- line-height: 0.75rem;
619
- height: 10px;
620
- padding: 0;
621
- }
622
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
623
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
624
- background: var(--textarea-label-background);
625
- width: calc(100% - 1rem - 1rem - 4px);
626
- }
627
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
628
- top: 0.5rem;
629
- font-size: 0.875rem;
630
- line-height: 1rem;
631
- padding: 0;
632
- }
633
- .eds-form-control-wrapper--size-large .eds-input-group__label {
634
- top: 0.75rem;
635
- font-size: 1.5rem;
636
- line-height: 2.25rem;
685
+ font-weight: 500;
637
686
  }
638
- .eds-input-group__label--filled {
639
- top: 0.375rem;
640
- font-size: 0.75rem;
641
- line-height: 0.75rem;
642
- height: 10px;
643
- padding: 0;
687
+ .eds-input-panel--medium.eds-input-panel__container {
688
+ padding-bottom: 1rem;
689
+ min-height: 3.75rem;
644
690
  }
645
- .eds-textarea__label .eds-input-group__label--filled {
646
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
647
- background: var(--textarea-label-background);
648
- width: calc(100% - 1rem - 1rem - 4px);
691
+ .eds-input-panel--large.eds-input-panel__container {
692
+ min-height: 6rem;
649
693
  }
650
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
651
- top: 0.5rem;
652
- font-size: 0.875rem;
653
- line-height: 1rem;
654
- padding: 0;
694
+ .eds-input-panel--large .eds-input-panel__title {
695
+ font-size: 1.25rem;
696
+ font-weight: 500;
697
+ line-height: 1.875rem;
655
698
  }
656
-
657
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
658
- top: 0.375rem;
659
- font-size: 0.75rem;
660
- line-height: 0.75rem;
661
- height: 10px;
662
- padding: 0;
699
+ .eds-input-panel__title-wrapper {
700
+ display: flex;
701
+ justify-content: space-between;
702
+ align-items: center;
663
703
  }
664
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
665
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
666
- background: var(--textarea-label-background);
667
- width: calc(100% - 1rem - 1rem - 4px);
704
+ .eds-input-panel__secondary-label-and-icon-wrapper {
705
+ display: flex;
706
+ justify-content: center;
707
+ align-items: center;
708
+ gap: 0.75rem;
668
709
  }
669
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
670
- top: 0.5rem;
671
- font-size: 0.875rem;
672
- line-height: 1rem;
673
- padding: 0;
710
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
711
+ margin: 0;
674
712
  }
675
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
676
- top: 1rem;
677
- font-size: 1rem;
678
- height: 3rem;
679
- line-height: 1rem;
713
+ .eds-input-panel__additional-content {
714
+ margin-top: 0.25rem;
715
+ word-wrap: break-word;
680
716
  }
681
717
  /* DO NOT CHANGE!*/
682
718
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -846,151 +882,115 @@
846
882
  }
847
883
  /* DO NOT CHANGE!*/
848
884
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
849
- .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
850
- outline: 2px solid #181c56;
851
- outline-color: var(--basecolors-stroke-focus-standard);
852
- outline-offset: 0.125rem;
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;
853
897
  }
854
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
855
- outline-color: var(--basecolors-stroke-focus-contrast);
898
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
899
+ background-color: var(--components-form-radio-standard-fill-hover);
856
900
  }
857
- .eds-input-panel > input {
901
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
902
+ background-color: var(--components-form-radio-contrast-fill-hover);
903
+ }
904
+ .eds-form-component--radio__container input {
858
905
  position: absolute;
859
906
  opacity: 0;
860
907
  cursor: pointer;
861
908
  height: 0;
862
909
  width: 0;
863
910
  }
864
- .eds-input-panel > input:checked + .eds-input-panel__container {
865
- border-color: var(--components-form-basepanel-standard-border-selected);
866
- background: var(--components-form-basepanel-standard-fill-selected);
867
- }
868
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
869
- border-color: var(--components-form-basepanel-contrast-border-selected);
870
- background: var(--components-form-basepanel-contrast-fill-selected);
871
- }
872
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
873
- width: 0.75rem;
874
- height: 0.75rem;
875
- }
876
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
877
- background-color: var(--components-form-radio-contrast-icon);
878
- }
879
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
880
- background-color: var(--components-form-basepanel-standard-fill-hover);
881
- /* The following styling is needed to sync the inner checkbox/radiobutton's
882
- hover state styling with the inputPanel container */
883
- }
884
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
885
- background-color: var(--components-form-basepanel-contrast-fill-hover);
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;
886
914
  }
887
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
888
- background-color: var(--components-form-basepanel-standard-fill-hover);
889
- border-color: var(--components-form-basepanel-standard-border-selected);
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;
890
919
  }
891
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
892
- background-color: var(--components-form-basepanel-contrast-fill-hover);
893
- border-color: var(--components-form-basepanel-contrast-border-selected);
920
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
921
+ outline-color: var(--basecolors-stroke-focus-contrast);
894
922
  }
895
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
896
- border-color: transparent;
923
+ .eds-form-component--radio__container:has(input:disabled) {
924
+ cursor: not-allowed;
897
925
  }
898
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
899
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
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;
900
931
  }
901
- .eds-input-panel__container {
902
- background: var(--components-form-basepanel-standard-fill-default);
903
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
904
- color: var(--components-form-basepanel-standard-text-accent);
905
- border-radius: 0.25rem;
906
- display: flex;
907
- flex-direction: column;
908
- justify-content: flex-start;
909
- min-width: 20rem;
932
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
910
933
  position: relative;
911
- padding: 1rem;
912
- -webkit-user-select: none;
913
- -moz-user-select: none;
914
- user-select: none;
915
- width: -moz-fit-content;
916
- width: fit-content;
917
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
918
- }
919
- .eds-contrast .eds-input-panel__container {
920
- background-color: var(--components-form-basepanel-contrast-fill-default);
921
- border-color: var(--components-form-basepanel-contrast-border-default);
922
- color: var(--components-form-basepanel-contrast-text-accent);
923
- }
924
- .eds-input-panel__container:hover {
925
- background-color: var(--components-form-basepanel-standard-fill-hover);
926
- /* The following styling is needed to sync the inner checkbox/radiobutton's
927
- hover state styling with the inputPanel container */
928
- }
929
- .eds-contrast .eds-input-panel__container:hover {
930
- background-color: var(--components-form-basepanel-contrast-fill-hover);
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;
931
943
  }
932
- .eds-input-panel__container:hover .eds-checkbox__icon,
933
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
934
- background-color: var(--components-form-basepanel-standard-fill-hover);
935
- border-color: var(--components-form-basepanel-standard-border-selected);
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);
936
947
  }
937
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
938
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
939
- background-color: var(--components-form-basepanel-contrast-fill-hover);
940
- border-color: var(--components-form-basepanel-contrast-border-selected);
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);
941
951
  }
942
- input:disabled + .eds-input-panel__container {
943
- background: var(--components-form-basepanel-standard-fill-disabled);
944
- border-color: var(--components-form-basepanel-standard-border-disabled);
945
- color: var(--components-form-basepanel-standard-text-disabled);
946
- cursor: not-allowed;
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);
947
954
  }
948
- .eds-contrast input:disabled + .eds-input-panel__container {
949
- background: var(--components-form-basepanel-contrast-fill-disabled);
950
- border-style: dashed;
951
- border-color: var(--components-form-basepanel-contrast-border-disabled);
952
- color: var(--components-form-basepanel-contrast-text-disabled);
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);
953
958
  }
954
- .eds-input-panel__container .eds-checkbox__icon,
955
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
956
- .eds-input-panel__container .eds-form-component--radio__radio {
957
- width: 1.5rem;
958
- height: 1.5rem;
959
- margin-right: 0;
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);
960
961
  }
961
- .eds-input-panel--medium .eds-input-panel__title {
962
- font-size: 1rem;
963
- font-weight: 500;
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);
964
965
  }
965
- .eds-input-panel--medium.eds-input-panel__container {
966
- padding-bottom: 1rem;
967
- min-height: 3.75rem;
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);
968
968
  }
969
- .eds-input-panel--large.eds-input-panel__container {
970
- min-height: 6rem;
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);
971
971
  }
972
- .eds-input-panel--large .eds-input-panel__title {
973
- font-size: 1.25rem;
974
- font-weight: 500;
975
- line-height: 1.875rem;
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);
976
975
  }
977
- .eds-input-panel__title-wrapper {
978
- display: flex;
979
- justify-content: space-between;
980
- align-items: center;
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);
981
979
  }
982
- .eds-input-panel__secondary-label-and-icon-wrapper {
983
- display: flex;
984
- justify-content: center;
985
- align-items: center;
986
- gap: 0.75rem;
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);
987
983
  }
988
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
989
- margin: 0;
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;
990
991
  }
991
- .eds-input-panel__additional-content {
992
- margin-top: 0.25rem;
993
- word-wrap: break-word;
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);
994
994
  }
995
995
  /* DO NOT CHANGE!*/
996
996
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1155,88 +1155,6 @@ 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. */
1240
1158
  .eds-segmented-control {
1241
1159
  margin-top: 0.25rem;
1242
1160
  display: flex;
@@ -1845,3 +1763,85 @@ input:disabled + .eds-input-panel__container {
1845
1763
  :root {
1846
1764
  --eds-form: 1;
1847
1765
  }
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.4",
3
+ "version": "8.3.2-beta.6",
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.4",
30
+ "@entur/button": "^3.3.13-beta.6",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.4",
34
- "@entur/typography": "^1.10.0-beta.4",
33
+ "@entur/tooltip": "^5.2.13-beta.6",
34
+ "@entur/typography": "^1.10.0-beta.6",
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": "8d064eda2fb3e82dc87f08625f7833f92737f32e"
41
+ "gitHead": "42c5a2e7657f2b5ca17328fcf55873b19e23f94a"
42
42
  }