@entur/form 8.3.2-beta.7 → 8.3.2-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +394 -394
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -208,10 +208,93 @@
208
208
  margin-right: 0;
209
209
  margin-left: 0.75rem;
210
210
  }
211
- .eds-fieldset {
212
- margin: 0;
211
+ /* DO NOT CHANGE!*/
212
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
+ .eds-input-group {
214
+ color: inherit;
215
+ display: block;
216
+ position: relative;
217
+ }
218
+ .eds-input-group__label {
219
+ color: var(--components-form-baseform-standard-text-label);
220
+ display: flex;
221
+ font-size: 1rem;
222
+ position: absolute;
223
+ line-height: 1rem;
224
+ height: 3rem;
225
+ padding-left: 0;
226
+ top: 1rem;
227
+ 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;
228
+ -webkit-user-select: none;
229
+ -moz-user-select: none;
230
+ user-select: none;
231
+ pointer-events: none;
232
+ }
233
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
234
+ top: 0.375rem;
235
+ font-size: 0.75rem;
236
+ line-height: 0.75rem;
237
+ height: 10px;
238
+ padding: 0;
239
+ }
240
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
241
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
242
+ background: var(--textarea-label-background);
243
+ width: calc(100% - 1rem - 1rem - 4px);
244
+ }
245
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
246
+ top: 0.5rem;
247
+ font-size: 0.875rem;
248
+ line-height: 1rem;
249
+ padding: 0;
250
+ }
251
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
252
+ top: 0.75rem;
253
+ font-size: 1.5rem;
254
+ line-height: 2.25rem;
255
+ }
256
+ .eds-input-group__label--filled {
257
+ top: 0.375rem;
258
+ font-size: 0.75rem;
259
+ line-height: 0.75rem;
260
+ height: 10px;
261
+ padding: 0;
262
+ }
263
+ .eds-textarea__label .eds-input-group__label--filled {
264
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
265
+ background: var(--textarea-label-background);
266
+ width: calc(100% - 1rem - 1rem - 4px);
267
+ }
268
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
269
+ top: 0.5rem;
270
+ font-size: 0.875rem;
271
+ line-height: 1rem;
213
272
  padding: 0;
214
- border: 0;
273
+ }
274
+
275
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
276
+ top: 0.375rem;
277
+ font-size: 0.75rem;
278
+ line-height: 0.75rem;
279
+ height: 10px;
280
+ padding: 0;
281
+ }
282
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
283
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
284
+ background: var(--textarea-label-background);
285
+ width: calc(100% - 1rem - 1rem - 4px);
286
+ }
287
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
288
+ top: 0.5rem;
289
+ font-size: 0.875rem;
290
+ line-height: 1rem;
291
+ padding: 0;
292
+ }
293
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
294
+ top: 1rem;
295
+ font-size: 1rem;
296
+ height: 3rem;
297
+ line-height: 1rem;
215
298
  }
216
299
  /* DO NOT CHANGE!*/
217
300
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -286,6 +369,123 @@
286
369
  .eds-contrast .eds-feedback-text__icon--warning circle {
287
370
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
288
371
  }
372
+ .eds-fieldset {
373
+ margin: 0;
374
+ padding: 0;
375
+ border: 0;
376
+ }
377
+ /* DO NOT CHANGE!*/
378
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
379
+ .eds-form-component--radio__container {
380
+ display: flex;
381
+ justify-content: center;
382
+ align-items: center;
383
+ position: relative;
384
+ cursor: pointer;
385
+ height: 2rem;
386
+ width: -moz-fit-content;
387
+ width: fit-content;
388
+ -webkit-user-select: none;
389
+ -moz-user-select: none;
390
+ user-select: none;
391
+ }
392
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
393
+ background-color: var(--components-form-radio-standard-fill-hover);
394
+ }
395
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
396
+ background-color: var(--components-form-radio-contrast-fill-hover);
397
+ }
398
+ .eds-form-component--radio__container input {
399
+ position: absolute;
400
+ opacity: 0;
401
+ cursor: pointer;
402
+ height: 0;
403
+ width: 0;
404
+ }
405
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
406
+ height: 0.625rem;
407
+ width: 0.625rem;
408
+ }
409
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
410
+ outline: 2px solid #181c56;
411
+ outline-color: var(--basecolors-stroke-focus-standard);
412
+ outline-offset: 0.125rem;
413
+ }
414
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
415
+ outline-color: var(--basecolors-stroke-focus-contrast);
416
+ }
417
+ .eds-form-component--radio__container:has(input:disabled) {
418
+ cursor: not-allowed;
419
+ }
420
+ .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
421
+ cursor: default;
422
+ -webkit-user-select: text;
423
+ -moz-user-select: text;
424
+ user-select: text;
425
+ }
426
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
427
+ position: relative;
428
+ height: 1.25rem;
429
+ width: 1.25rem;
430
+ margin-right: 1rem;
431
+ background-color: var(--components-form-radio-standard-fill-default);
432
+ border: 0.125rem solid var(--components-form-radio-standard-border);
433
+ border-radius: 50%;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ }
438
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
439
+ background-color: var(--components-form-radio-contrast-fill-default);
440
+ border-color: var(--components-form-radio-contrast-border);
441
+ }
442
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
443
+ background: var(--components-form-radio-contrast-fill-disabled);
444
+ border-color: var(--components-form-radio-contrast-text-disabled);
445
+ }
446
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
447
+ border-color: var(--components-form-radio-contrast-text-disabled);
448
+ }
449
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
450
+ background: var(--components-form-radio-contrast-fill-disabled);
451
+ border-color: var(--components-form-radio-contrast-text-disabled);
452
+ }
453
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
454
+ color: var(--components-form-radio-contrast-text-disabled);
455
+ }
456
+ .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 {
457
+ background-color: var(--components-form-radio-standard-icon-disabled);
458
+ border-color: var(--components-form-radio-contrast-text-disabled);
459
+ }
460
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
461
+ background-color: var(--components-form-radio-standard-icon-disabled);
462
+ }
463
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
464
+ background-color: var(--components-form-radio-contrast-icon-disabled);
465
+ }
466
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
467
+ background: var(--components-form-radio-standard-fill-disabled);
468
+ border-color: var(--components-form-radio-standard-border-readonly);
469
+ }
470
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
471
+ background: var(--components-form-radio-contrast-fill-disabled);
472
+ border-color: var(--components-form-radio-contrast-border-readonly);
473
+ }
474
+ .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 {
475
+ background-color: var(--components-form-radio-standard-icon);
476
+ border-color: var(--components-form-radio-standard-border-readonly);
477
+ }
478
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
479
+ display: block;
480
+ width: 0;
481
+ height: 0;
482
+ border-radius: 50%;
483
+ background-color: var(--components-form-radio-standard-fill-selected);
484
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
485
+ }
486
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
487
+ background-color: var(--components-form-radio-contrast-icon);
488
+ }
289
489
  /* DO NOT CHANGE!*/
290
490
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
291
491
  .eds-checkbox__container {
@@ -379,423 +579,104 @@
379
579
  background-color: var(--components-form-checkbox-standard-fill-selectedhover);
380
580
  }
381
581
  .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
382
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
383
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
384
- }
385
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
386
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
387
- background-color: var(--components-form-checkbox-standard-fill-selected);
388
- }
389
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
390
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
391
- background-color: var(--components-form-checkbox-contrast-fill-selected);
392
- }
393
- .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
394
- outline: 2px solid #181c56;
395
- outline-color: var(--basecolors-stroke-focus-standard);
396
- outline-offset: 0.125rem;
397
- }
398
- .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
399
- outline-color: var(--basecolors-stroke-focus-contrast);
400
- }
401
- .eds-checkbox--disabled {
402
- cursor: not-allowed;
403
- }
404
- .eds-checkbox--disabled input {
405
- pointer-events: none;
406
- }
407
- .eds-checkbox--disabled .eds-checkbox__label {
408
- opacity: 0.5;
409
- }
410
- .eds-checkbox--disabled .eds-checkbox__icon {
411
- border-color: var(--components-form-checkbox-standard-icon-disabled);
412
- }
413
- .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
414
- border-color: var(--components-form-checkbox-contrast-icon-disabled);
415
- }
416
- .eds-checkbox--readonly {
417
- cursor: default;
418
- pointer-events: auto;
419
- -webkit-user-select: text;
420
- -moz-user-select: text;
421
- user-select: text;
422
- }
423
- .eds-checkbox--readonly input {
424
- pointer-events: auto;
425
- -webkit-user-select: text;
426
- -moz-user-select: text;
427
- user-select: text;
428
- }
429
- .eds-checkbox--readonly .eds-checkbox__icon {
430
- border-color: var(--components-form-checkbox-standard-border-readonly);
431
- }
432
- .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
433
- border-color: var(--components-form-checkbox-contrast-border-readonly);
434
- }
435
- .eds-checkbox__icon {
436
- box-sizing: border-box;
437
- display: inline-flex;
438
- justify-content: center;
439
- align-items: center;
440
- position: relative;
441
- margin-right: 1rem;
442
- height: 1.25rem;
443
- width: 1.25rem;
444
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
445
- border-radius: 0.125rem;
446
- background-color: transparent;
447
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
448
- }
449
- .eds-checkbox__icon--reduced-click-area {
450
- margin-right: 0;
451
- }
452
- .eds-contrast .eds-checkbox__icon {
453
- border-color: var(--components-form-checkbox-contrast-border);
454
- }
455
- .eds-checkbox__icon .eds-checkbox-icon {
456
- height: 1rem;
457
- width: 1rem;
458
- visibility: hidden;
459
- }
460
- .eds-checkbox__icon .eds-checkbox-icon path {
461
- transform-origin: 50% 50%;
462
- stroke-dasharray: 48;
463
- stroke-dashoffset: 48;
464
- stroke-width: 0.375rem;
465
- }
466
- .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
467
- animation: none !important;
468
- transition: none !important;
469
- stroke-dasharray: 48;
470
- stroke-dashoffset: 0;
471
- }
472
- .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
473
- transition: none !important;
474
- }
475
-
476
- @keyframes stroke {
477
- 100% {
478
- stroke-dashoffset: 0;
479
- }
480
- }
481
- /* DO NOT CHANGE!*/
482
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-input-group {
484
- color: inherit;
485
- display: block;
486
- position: relative;
487
- }
488
- .eds-input-group__label {
489
- color: var(--components-form-baseform-standard-text-label);
490
- display: flex;
491
- font-size: 1rem;
492
- position: absolute;
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;
502
- }
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;
509
- }
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);
514
- }
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;
520
- }
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;
525
- }
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;
532
- }
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);
537
- }
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;
543
- }
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;
551
- }
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);
556
- }
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;
562
- }
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;
573
- -webkit-user-select: none;
574
- -moz-user-select: none;
575
- user-select: none;
576
- padding: 0.5rem 0;
577
- width: -moz-fit-content;
578
- width: fit-content;
579
- }
580
- .eds-switch input {
581
- opacity: 0;
582
- pointer-events: none;
583
- position: absolute;
584
- }
585
- .eds-switch--right {
586
- display: flex;
587
- flex-direction: row;
588
- align-items: center;
589
- }
590
- .eds-switch--bottom {
591
- display: flex;
592
- flex-direction: column;
593
- align-items: center;
594
- }
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;
609
- }
610
- .eds-switch__switch--large .eds-switch__circle {
611
- height: 1.75rem;
612
- width: 1.75rem;
613
- }
614
- .eds-contrast .eds-switch__circle {
615
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
616
- }
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;
623
- height: 1.5rem;
624
- width: 3rem;
625
- border-radius: 1.5rem;
626
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
627
- }
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 {
677
- font-size: 1rem;
678
- }
679
- .eds-switch__label--large--bottom {
680
- font-size: 0.875rem;
681
- }
682
- .eds-switch__label--medium--right {
683
- font-size: 0.875rem;
684
- }
685
- .eds-switch__label--medium--bottom {
686
- font-size: 0.75rem;
687
- }
688
- /* DO NOT CHANGE!*/
689
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
690
- .eds-form-component--radio__container {
691
- display: flex;
692
- justify-content: center;
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;
702
- }
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);
582
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
583
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
708
584
  }
709
- .eds-form-component--radio__container input {
710
- position: absolute;
711
- opacity: 0;
712
- cursor: pointer;
713
- height: 0;
714
- width: 0;
585
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
586
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
587
+ background-color: var(--components-form-checkbox-standard-fill-selected);
715
588
  }
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;
589
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
590
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
591
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
719
592
  }
720
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
593
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
721
594
  outline: 2px solid #181c56;
722
595
  outline-color: var(--basecolors-stroke-focus-standard);
723
596
  outline-offset: 0.125rem;
724
597
  }
725
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
598
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
726
599
  outline-color: var(--basecolors-stroke-focus-contrast);
727
600
  }
728
- .eds-form-component--radio__container:has(input:disabled) {
601
+ .eds-checkbox--disabled {
729
602
  cursor: not-allowed;
730
603
  }
731
- .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
604
+ .eds-checkbox--disabled input {
605
+ pointer-events: none;
606
+ }
607
+ .eds-checkbox--disabled .eds-checkbox__label {
608
+ opacity: 0.5;
609
+ }
610
+ .eds-checkbox--disabled .eds-checkbox__icon {
611
+ border-color: var(--components-form-checkbox-standard-icon-disabled);
612
+ }
613
+ .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
614
+ border-color: var(--components-form-checkbox-contrast-icon-disabled);
615
+ }
616
+ .eds-checkbox--readonly {
732
617
  cursor: default;
618
+ pointer-events: auto;
733
619
  -webkit-user-select: text;
734
620
  -moz-user-select: text;
735
621
  user-select: text;
736
622
  }
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%;
745
- display: flex;
746
- align-items: center;
747
- justify-content: center;
748
- }
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);
752
- }
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);
623
+ .eds-checkbox--readonly input {
624
+ pointer-events: auto;
625
+ -webkit-user-select: text;
626
+ -moz-user-select: text;
627
+ user-select: text;
759
628
  }
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);
629
+ .eds-checkbox--readonly .eds-checkbox__icon {
630
+ border-color: var(--components-form-checkbox-standard-border-readonly);
763
631
  }
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);
632
+ .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
633
+ border-color: var(--components-form-checkbox-contrast-border-readonly);
766
634
  }
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);
635
+ .eds-checkbox__icon {
636
+ box-sizing: border-box;
637
+ display: inline-flex;
638
+ justify-content: center;
639
+ align-items: center;
640
+ position: relative;
641
+ margin-right: 1rem;
642
+ height: 1.25rem;
643
+ width: 1.25rem;
644
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
645
+ border-radius: 0.125rem;
646
+ background-color: transparent;
647
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
770
648
  }
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);
649
+ .eds-checkbox__icon--reduced-click-area {
650
+ margin-right: 0;
773
651
  }
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);
652
+ .eds-contrast .eds-checkbox__icon {
653
+ border-color: var(--components-form-checkbox-contrast-border);
776
654
  }
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);
655
+ .eds-checkbox__icon .eds-checkbox-icon {
656
+ height: 1rem;
657
+ width: 1rem;
658
+ visibility: hidden;
780
659
  }
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);
660
+ .eds-checkbox__icon .eds-checkbox-icon path {
661
+ transform-origin: 50% 50%;
662
+ stroke-dasharray: 48;
663
+ stroke-dashoffset: 48;
664
+ stroke-width: 0.375rem;
784
665
  }
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);
666
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
667
+ animation: none !important;
668
+ transition: none !important;
669
+ stroke-dasharray: 48;
670
+ stroke-dashoffset: 0;
788
671
  }
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;
672
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
673
+ transition: none !important;
796
674
  }
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);
675
+
676
+ @keyframes stroke {
677
+ 100% {
678
+ stroke-dashoffset: 0;
679
+ }
799
680
  }
800
681
  /* DO NOT CHANGE!*/
801
682
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1113,6 +994,125 @@ input:disabled + .eds-input-panel__container {
1113
994
  }
1114
995
  /* DO NOT CHANGE!*/
1115
996
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
997
+ .eds-switch {
998
+ cursor: pointer;
999
+ -webkit-user-select: none;
1000
+ -moz-user-select: none;
1001
+ user-select: none;
1002
+ padding: 0.5rem 0;
1003
+ width: -moz-fit-content;
1004
+ width: fit-content;
1005
+ }
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;
1064
+ }
1065
+ .eds-contrast .eds-switch__switch svg g,
1066
+ .eds-contrast .eds-switch__switch path {
1067
+ fill: var(--components-form-switch-contrast-icon-false);
1068
+ }
1069
+ :checked + .eds-switch__switch {
1070
+ background-color: var(--eds-switch-color);
1071
+ }
1072
+ :checked + .eds-switch__switch .eds-switch__circle {
1073
+ left: 1.625rem;
1074
+ }
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);
1078
+ }
1079
+ .eds-contrast :checked + .eds-switch__switch {
1080
+ background-color: var(--eds-switch-contrast-color);
1081
+ }
1082
+ :focus-visible + .eds-switch__switch {
1083
+ outline: 2px solid #181c56;
1084
+ outline-color: var(--basecolors-stroke-focus-standard);
1085
+ outline-offset: 0.125rem;
1086
+ }
1087
+ .eds-contrast :focus-visible + .eds-switch__switch {
1088
+ outline-color: var(--basecolors-stroke-focus-contrast);
1089
+ }
1090
+ .eds-switch__switch--large {
1091
+ width: 3.75rem;
1092
+ height: 2rem;
1093
+ border-radius: 3.75rem;
1094
+ }
1095
+ :checked + .eds-switch__switch--large .eds-switch__circle {
1096
+ left: 1.875rem;
1097
+ }
1098
+ .eds-switch__switch--large svg {
1099
+ position: relative;
1100
+ right: 0.05rem;
1101
+ }
1102
+ .eds-switch__label--large--right {
1103
+ font-size: 1rem;
1104
+ }
1105
+ .eds-switch__label--large--bottom {
1106
+ font-size: 0.875rem;
1107
+ }
1108
+ .eds-switch__label--medium--right {
1109
+ font-size: 0.875rem;
1110
+ }
1111
+ .eds-switch__label--medium--bottom {
1112
+ font-size: 0.75rem;
1113
+ }
1114
+ /* DO NOT CHANGE!*/
1115
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1116
1116
  .eds-textfield__clear-button {
1117
1117
  background: none;
1118
1118
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.3.2-beta.7",
3
+ "version": "8.3.2-beta.9",
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.7",
30
+ "@entur/button": "^3.3.13-beta.9",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.7",
34
- "@entur/typography": "^1.10.0-beta.7",
33
+ "@entur/tooltip": "^5.2.13-beta.9",
34
+ "@entur/typography": "^1.10.0-beta.9",
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": "26b5f016229bb0115d5f31ce51e15eafd015a870"
41
+ "gitHead": "6f685d2e4ac13bdaf9c6480f9e7922c9d8f4619c"
42
42
  }