@entur/form 8.1.8 → 8.1.9-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +2 -2
  2. package/dist/Checkbox.d.ts +6 -6
  3. package/dist/Radio.d.ts +1 -1
  4. package/dist/Switch.d.ts +8 -8
  5. package/dist/TextArea.d.ts +8 -8
  6. package/dist/TextField.d.ts +13 -13
  7. package/dist/form.cjs.development.js +16 -24
  8. package/dist/form.cjs.development.js.map +1 -1
  9. package/dist/form.cjs.production.min.js +1 -1
  10. package/dist/form.cjs.production.min.js.map +1 -1
  11. package/dist/form.esm.js +16 -24
  12. package/dist/form.esm.js.map +1 -1
  13. package/dist/styles.css +552 -552
  14. package/package.json +11 -7
package/dist/styles.css CHANGED
@@ -1,3 +1,8 @@
1
+ .eds-fieldset {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ }
1
6
  /* DO NOT CHANGE!*/
2
7
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
8
  .eds-feedback-text {
@@ -71,93 +76,6 @@
71
76
  .eds-contrast .eds-feedback-text__icon--warning circle {
72
77
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
73
78
  }
74
- .eds-fieldset {
75
- margin: 0;
76
- padding: 0;
77
- border: 0;
78
- }
79
- /* DO NOT CHANGE!*/
80
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
81
- .eds-form-component--radio__container {
82
- display: flex;
83
- justify-content: center;
84
- align-items: center;
85
- position: relative;
86
- cursor: pointer;
87
- height: 2rem;
88
- width: -moz-fit-content;
89
- width: fit-content;
90
- -webkit-user-select: none;
91
- -moz-user-select: none;
92
- user-select: none;
93
- }
94
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
95
- background-color: var(--components-form-radio-standard-fill-hover);
96
- }
97
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
98
- background-color: var(--components-form-radio-contrast-fill-hover);
99
- }
100
- .eds-form-component--radio__container input {
101
- position: absolute;
102
- opacity: 0;
103
- cursor: pointer;
104
- height: 0;
105
- width: 0;
106
- }
107
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
108
- height: 0.625rem;
109
- width: 0.625rem;
110
- }
111
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
112
- outline: 2px solid #181c56;
113
- outline-color: var(--basecolors-stroke-focus-standard);
114
- outline-offset: 0.125rem;
115
- }
116
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
117
- outline-color: var(--basecolors-stroke-focus-contrast);
118
- }
119
- .eds-form-component--radio__container .eds-form-component--radio__radio {
120
- position: relative;
121
- height: 1.25rem;
122
- width: 1.25rem;
123
- margin-right: 1rem;
124
- background-color: var(--components-form-radio-standard-fill-default);
125
- border: 0.125rem solid var(--components-form-radio-standard-border);
126
- border-radius: 50%;
127
- display: flex;
128
- align-items: center;
129
- justify-content: center;
130
- }
131
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
132
- background-color: var(--components-form-radio-contrast-fill-default);
133
- border-color: var(--components-form-radio-contrast-border);
134
- }
135
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
136
- background: var(--components-form-baseform-contrast-fill-disabled);
137
- border-color: var(--components-form-baseform-contrast-text-disabled);
138
- cursor: not-allowed;
139
- }
140
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
141
- border-color: var(--components-form-baseform-contrast-text-disabled);
142
- }
143
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
144
- background: var(--components-form-baseform-contrast-fill-disabled);
145
- border-color: var(--components-form-baseform-contrast-text-disabled);
146
- }
147
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
148
- color: var(--components-form-baseform-contrast-text-disabled);
149
- }
150
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
151
- display: block;
152
- width: 0;
153
- height: 0;
154
- border-radius: 50%;
155
- background-color: var(--components-form-radio-standard-fill-selected);
156
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
157
- }
158
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
159
- background-color: var(--components-form-radio-contrast-icon);
160
- }
161
79
  /* DO NOT CHANGE!*/
162
80
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
163
81
  .eds-checkbox__container {
@@ -315,379 +233,313 @@
315
233
  }
316
234
  /* DO NOT CHANGE!*/
317
235
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
- .eds-input-group {
319
- color: inherit;
320
- display: block;
321
- position: relative;
236
+ .eds-form-control__field-and-feedback-text {
237
+ display: flex;
238
+ flex-direction: column;
239
+ height: -moz-fit-content;
240
+ height: fit-content;
241
+ width: 100%;
322
242
  }
323
- .eds-input-group__label {
324
- color: var(--components-form-baseform-standard-text-label);
243
+ .eds-form-control__field-and-feedback-text--has-tooltip {
244
+ padding-right: 2rem;
245
+ }
246
+ .eds-form-control-wrapper {
325
247
  display: flex;
326
- font-size: 1rem;
327
- position: absolute;
328
- line-height: 1rem;
329
- height: 3rem;
330
- padding-left: 0;
331
- top: 1rem;
332
- 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;
333
- -webkit-user-select: none;
334
- -moz-user-select: none;
335
- user-select: none;
336
- pointer-events: none;
248
+ align-items: center;
249
+ position: relative;
250
+ flex: 1;
251
+ min-height: 3rem;
252
+ padding-left: 1rem;
253
+ padding-right: 1rem;
254
+ background-color: var(--components-form-baseform-standard-fill-default);
255
+ border-radius: 0.25rem;
256
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
257
+ box-shadow: 0 0 0 transparent;
258
+ color: var(--components-form-baseform-standard-text-content);
259
+ transition: border-color 0.1s ease-in-out;
337
260
  }
338
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
339
- top: 0.375rem;
340
- font-size: 0.75rem;
341
- line-height: 0.75rem;
342
- height: 10px;
343
- padding: 0;
261
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
262
+ border-color: var(--components-form-baseform-standard-border-interactive);
344
263
  }
345
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
346
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
347
- background: var(--textarea-label-background);
348
- width: calc(100% - 1rem - 1rem - 4px);
264
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
265
+ border-color: var(--components-form-baseform-standard-border-interactive);
349
266
  }
350
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
351
- top: 0.5rem;
352
- font-size: 0.875rem;
353
- line-height: 1rem;
354
- padding: 0;
267
+ .eds-contrast .eds-form-control-wrapper:hover {
268
+ border-color: var(--components-form-baseform-contrast-border-interactive);
355
269
  }
356
- .eds-form-control-wrapper--size-large .eds-input-group__label {
357
- top: 0.75rem;
358
- font-size: 1.5rem;
359
- line-height: 2.25rem;
270
+ .eds-form-control-wrapper[focus-within] {
271
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
360
272
  }
361
- .eds-input-group__label--filled {
362
- top: 0.375rem;
363
- font-size: 0.75rem;
364
- line-height: 0.75rem;
365
- height: 10px;
366
- padding: 0;
273
+ .eds-form-control-wrapper:focus-within {
274
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
367
275
  }
368
- .eds-textarea__label .eds-input-group__label--filled {
369
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
370
- background: var(--textarea-label-background);
371
- width: calc(100% - 1rem - 1rem - 4px);
276
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
277
+ outline: var(--components-form-baseform-contrast-border-interactive);
372
278
  }
373
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
374
- top: 0.5rem;
375
- font-size: 0.875rem;
376
- line-height: 1rem;
377
- padding: 0;
279
+ .eds-contrast .eds-form-control-wrapper:focus-within {
280
+ outline: var(--components-form-baseform-contrast-border-interactive);
378
281
  }
379
-
380
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
381
- top: 0.375rem;
382
- font-size: 0.75rem;
383
- line-height: 0.75rem;
384
- height: 10px;
385
- padding: 0;
282
+ .eds-form-control-wrapper ::-moz-placeholder {
283
+ color: var(--components-form-baseform-standard-text-label);
386
284
  }
387
-
388
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
389
- top: 0.375rem;
390
- font-size: 0.75rem;
391
- line-height: 0.75rem;
392
- height: 10px;
393
- padding: 0;
285
+ .eds-form-control-wrapper ::placeholder {
286
+ color: var(--components-form-baseform-standard-text-label);
394
287
  }
395
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
396
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
397
- background: var(--textarea-label-background);
398
- width: calc(100% - 1rem - 1rem - 4px);
288
+ .eds-form-control-wrapper--disabled {
289
+ border-color: transparent;
290
+ background-color: var(--components-form-baseform-standard-fill-disabled);
291
+ pointer-events: none;
292
+ color: var(--components-form-baseform-standard-text-disabled);
399
293
  }
400
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
401
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
402
- background: var(--textarea-label-background);
403
- width: calc(100% - 1rem - 1rem - 4px);
294
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
295
+ color: var(--components-form-baseform-standard-text-disabled);
404
296
  }
405
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
406
- top: 0.5rem;
407
- font-size: 0.875rem;
408
- line-height: 1rem;
409
- padding: 0;
297
+ .eds-contrast .eds-form-control-wrapper--disabled {
298
+ border-color: transparent;
299
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
300
+ color: var(--components-form-baseform-contrast-text-disabled);
410
301
  }
411
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
412
- top: 0.5rem;
413
- font-size: 0.875rem;
414
- line-height: 1rem;
415
- padding: 0;
302
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
303
+ color: var(--components-form-baseform-contrast-text-disabled);
416
304
  }
417
- /* DO NOT CHANGE!*/
418
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
419
- .eds-switch {
420
- cursor: pointer;
421
- -webkit-user-select: none;
422
- -moz-user-select: none;
423
- user-select: none;
424
- padding: 0.5rem 0;
425
- width: -moz-fit-content;
426
- width: fit-content;
305
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
306
+ display: none;
427
307
  }
428
- .eds-switch input {
429
- opacity: 0;
308
+ .eds-form-control-wrapper--readonly {
309
+ border-color: transparent;
430
310
  pointer-events: none;
431
- position: absolute;
311
+ cursor: default;
312
+ background: var(--components-form-baseform-standard-fill-readonly);
313
+ border: var(--components-form-baseform-standard-fill-readonly);
432
314
  }
433
- .eds-switch--right {
434
- display: flex;
435
- flex-direction: row;
436
- align-items: center;
315
+ .eds-contrast .eds-form-control-wrapper--readonly {
316
+ background: var(--components-form-baseform-contrast-fill-readonly);
317
+ color: var(--components-form-baseform-contrast-text-description);
318
+ border: var(--components-form-baseform-contrast-fill-readonly);
437
319
  }
438
- .eds-switch--bottom {
439
- display: flex;
440
- flex-direction: column;
441
- align-items: center;
320
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
321
+ color: var(--components-form-baseform-contrast-text-description);
442
322
  }
443
- .eds-switch__circle {
444
- border-radius: 50%;
445
- height: 1.25rem;
446
- width: 1.25rem;
447
- content: "";
448
- display: flex;
449
- align-items: center;
450
- justify-content: center;
451
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
452
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
453
- background-color: var(--components-form-switch-standard-switch);
454
- top: 0.125rem;
455
- left: 0.125rem;
456
- position: relative;
323
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
324
+ display: none;
457
325
  }
458
- .eds-switch__switch--large .eds-switch__circle {
459
- height: 1.75rem;
460
- width: 1.75rem;
326
+ .eds-form-control-wrapper--size-medium .eds-form-control,
327
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
328
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
329
+ font-size: 1rem;
330
+ line-height: 1rem;
461
331
  }
462
- .eds-contrast .eds-switch__circle {
463
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
332
+ .eds-form-control-wrapper--size-large {
333
+ min-height: 4rem;
464
334
  }
465
- .eds-switch__switch {
466
- position: relative;
467
- background-color: var(--components-form-switch-standard-fill-false);
468
- content: "";
469
- display: block;
470
- transition: background-color 0.1s ease-in-out;
471
- height: 1.5rem;
472
- width: 3rem;
473
- border-radius: 1.5rem;
474
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
335
+ .eds-form-control-wrapper--size-large .eds-form-control,
336
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
337
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
338
+ font-size: 1.5rem;
475
339
  }
476
- .eds-contrast .eds-switch__switch {
477
- background-color: var(--components-form-switch-contrast-fill-false);
340
+ .eds-form-control-wrapper--success {
341
+ border-color: var(--components-form-baseform-standard-border-success);
478
342
  }
479
- .eds-switch--right .eds-switch__switch {
480
- margin-right: 0.75rem;
343
+ .eds-form-control-wrapper--success[focus-within] {
344
+ border-color: var(--components-form-baseform-standard-border-success);
481
345
  }
482
- .eds-switch__switch svg g,
483
- .eds-switch__switch path {
484
- fill: var(--components-form-switch-standard-icon-false);
485
- transition: fill ease-in-out 0.1s;
346
+ .eds-form-control-wrapper--success:focus-within {
347
+ border-color: var(--components-form-baseform-standard-border-success);
486
348
  }
487
- .eds-contrast .eds-switch__switch svg g,
488
- .eds-contrast .eds-switch__switch path {
489
- fill: var(--components-form-switch-contrast-icon-false);
349
+ .eds-contrast .eds-form-control-wrapper--success {
350
+ border-color: var(--components-form-baseform-standard-border-success);
490
351
  }
491
- :checked + .eds-switch__switch {
492
- background-color: var(--eds-switch-color);
352
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
353
+ border-color: var(--components-form-baseform-contrast-border-success);
493
354
  }
494
- :checked + .eds-switch__switch .eds-switch__circle {
495
- left: 1.625rem;
355
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
356
+ border-color: var(--components-form-baseform-contrast-border-success);
496
357
  }
497
- :checked + .eds-switch__switch .eds-switch__circle svg g,
498
- :checked + .eds-switch__switch .eds-switch__circle path {
499
- fill: var(--eds-switch-color);
358
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
359
+ border-color: var(--components-form-baseform-standard-border-negative);
500
360
  }
501
- .eds-contrast :checked + .eds-switch__switch {
502
- background-color: var(--eds-switch-contrast-color);
361
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
362
+ border-color: var(--components-form-baseform-standard-border-negative);
503
363
  }
504
- :focus + .eds-switch__switch {
505
- outline: 2px solid #181c56;
506
- outline-color: var(--basecolors-stroke-focus-standard);
507
- outline-offset: 0.125rem;
364
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
365
+ border-color: var(--components-form-baseform-standard-border-negative);
508
366
  }
509
- .eds-contrast :focus + .eds-switch__switch {
510
- outline-color: var(--basecolors-stroke-focus-contrast);
367
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
368
+ border-color: var(--components-form-baseform-contrast-border-negative);
511
369
  }
512
- .eds-switch__switch--large {
513
- width: 3.75rem;
514
- height: 2rem;
515
- border-radius: 3.75rem;
370
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
371
+ border-color: var(--components-form-baseform-contrast-border-negative);
516
372
  }
517
- :checked + .eds-switch__switch--large .eds-switch__circle {
518
- left: 1.875rem;
373
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
374
+ border-color: var(--components-form-baseform-contrast-border-negative);
519
375
  }
520
- .eds-switch__switch--large svg {
521
- position: relative;
522
- right: 0.05rem;
376
+ .eds-contrast .eds-form-control .eds-tooltip {
377
+ background: var(--components-tooltip-tooltip-standard-fill);
378
+ color: var(--components-tooltip-tooltip-standard-text);
379
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
523
380
  }
524
- .eds-switch__label--large--right {
525
- font-size: 1rem;
381
+ .eds-form-control .eds-tooltip::after {
382
+ background: var(--components-tooltip-tooltip-standard-fill);
526
383
  }
527
- .eds-switch__label--large--bottom {
528
- font-size: 0.875rem;
384
+
385
+ .eds-form-control {
386
+ display: block;
387
+ -webkit-appearance: none;
388
+ -moz-appearance: none;
389
+ appearance: none;
390
+ width: 100%;
391
+ height: 100%;
392
+ padding: 20px 0rem 0.25rem;
393
+ font-family: inherit;
394
+ font-size: 1rem;
395
+ line-height: 1rem;
396
+ border: 0;
397
+ color: var(--components-form-baseform-standard-text-content);
398
+ background-color: transparent;
529
399
  }
530
- .eds-switch__label--medium--right {
531
- font-size: 0.875rem;
400
+ .eds-form-control::-moz-placeholder {
401
+ opacity: 0;
402
+ -moz-transition: opacity 0.2s ease-in-out;
403
+ transition: opacity 0.2s ease-in-out;
532
404
  }
533
- .eds-switch__label--medium--bottom {
534
- font-size: 0.75rem;
405
+ .eds-form-control::placeholder {
406
+ opacity: 0;
407
+ transition: opacity 0.2s ease-in-out;
535
408
  }
536
- /* DO NOT CHANGE!*/
537
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
538
- .eds-input-panel[focus-within] .eds-input-panel__container {
539
- outline: 2px solid #181c56;
540
- outline-color: var(--basecolors-stroke-focus-standard);
541
- outline-offset: 0.125rem;
409
+ .eds-form-control:focus {
410
+ outline: none;
542
411
  }
543
- .eds-input-panel:focus-within .eds-input-panel__container {
544
- outline: 2px solid #181c56;
545
- outline-color: var(--basecolors-stroke-focus-standard);
546
- outline-offset: 0.125rem;
412
+ .eds-form-control:focus::-moz-placeholder {
413
+ opacity: 1;
547
414
  }
548
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
549
- outline-color: var(--basecolors-stroke-focus-contrast);
415
+ .eds-form-control:focus::placeholder {
416
+ opacity: 1;
550
417
  }
551
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
552
- outline-color: var(--basecolors-stroke-focus-contrast);
418
+ .eds-form-control__prepend, .eds-form-control__append {
419
+ position: relative;
420
+ line-height: inherit;
553
421
  }
554
- .eds-input-panel > input {
422
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
423
+ all: unset;
555
424
  position: absolute;
556
- opacity: 0;
425
+ display: flex;
426
+ align-items: center;
427
+ justify-content: center;
428
+ height: 1.5rem;
429
+ width: 1.5rem;
430
+ right: -2rem;
431
+ border-radius: 100%;
432
+ color: var(--primary-text-color);
557
433
  cursor: pointer;
558
- height: 0;
559
- width: 0;
560
- }
561
- .eds-input-panel > input:checked + .eds-input-panel__container {
562
- border-color: var(--components-form-basepanel-standard-border-selected);
563
- background: var(--components-form-basepanel-standard-fill-selected);
564
- }
565
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
566
- border-color: var(--components-form-basepanel-contrast-border-selected);
567
- background: var(--components-form-basepanel-contrast-fill-selected);
568
434
  }
569
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
570
- width: 0.75rem;
571
- height: 0.75rem;
572
- }
573
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
574
- background-color: var(--components-form-radio-contrast-icon);
575
- }
576
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
577
- background-color: var(--components-form-basepanel-standard-fill-hover);
578
- /* The following styling is needed to sync the inner checkbox/radiobutton's
579
- hover state styling with the inputPanel container */
580
- }
581
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
582
- background-color: var(--components-form-basepanel-contrast-fill-hover);
583
- }
584
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
585
- background-color: var(--components-form-basepanel-standard-fill-hover);
586
- border-color: var(--components-form-basepanel-standard-border-selected);
587
- }
588
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
589
- background-color: var(--components-form-basepanel-contrast-fill-hover);
590
- border-color: var(--components-form-basepanel-contrast-border-selected);
435
+ .eds-form-control__prepend {
436
+ margin-right: 0.75rem;
437
+ margin-left: 0;
591
438
  }
592
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
593
- border-color: transparent;
439
+ .eds-form-control__append {
440
+ margin-right: 0;
441
+ margin-left: 0.75rem;
594
442
  }
595
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
596
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
443
+ /* DO NOT CHANGE!*/
444
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
+ .eds-input-group {
446
+ color: inherit;
447
+ display: block;
448
+ position: relative;
597
449
  }
598
- .eds-input-panel__container {
599
- background: var(--components-form-basepanel-standard-fill-default);
600
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
601
- color: var(--components-form-basepanel-standard-text-accent);
602
- border-radius: 0.25rem;
450
+ .eds-input-group__label {
451
+ color: var(--components-form-baseform-standard-text-label);
603
452
  display: flex;
604
- flex-direction: column;
605
- justify-content: flex-start;
606
- min-width: 20rem;
607
- position: relative;
608
- padding: 1rem;
453
+ font-size: 1rem;
454
+ position: absolute;
455
+ line-height: 1rem;
456
+ height: 3rem;
457
+ padding-left: 0;
458
+ top: 1rem;
459
+ 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;
609
460
  -webkit-user-select: none;
610
461
  -moz-user-select: none;
611
462
  user-select: none;
612
- width: -moz-fit-content;
613
- width: fit-content;
614
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
615
- }
616
- .eds-contrast .eds-input-panel__container {
617
- background-color: var(--components-form-basepanel-contrast-fill-default);
618
- border-color: var(--components-form-basepanel-contrast-border-default);
619
- color: var(--components-form-basepanel-contrast-text-accent);
620
- }
621
- .eds-input-panel__container:hover {
622
- background-color: var(--components-form-basepanel-standard-fill-hover);
623
- /* The following styling is needed to sync the inner checkbox/radiobutton's
624
- hover state styling with the inputPanel container */
625
- }
626
- .eds-contrast .eds-input-panel__container:hover {
627
- background-color: var(--components-form-basepanel-contrast-fill-hover);
463
+ pointer-events: none;
628
464
  }
629
- .eds-input-panel__container:hover .eds-checkbox__icon,
630
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
631
- background-color: var(--components-form-basepanel-standard-fill-hover);
632
- border-color: var(--components-form-basepanel-standard-border-selected);
465
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
466
+ top: 0.375rem;
467
+ font-size: 0.75rem;
468
+ line-height: 0.75rem;
469
+ height: 10px;
470
+ padding: 0;
633
471
  }
634
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
635
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
636
- background-color: var(--components-form-basepanel-contrast-fill-hover);
637
- border-color: var(--components-form-basepanel-contrast-border-selected);
472
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
473
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
474
+ background: var(--textarea-label-background);
475
+ width: calc(100% - 1rem - 1rem - 4px);
638
476
  }
639
- input:disabled + .eds-input-panel__container {
640
- background: var(--components-form-basepanel-standard-fill-disabled);
641
- border-color: var(--components-form-basepanel-standard-border-disabled);
642
- color: var(--components-form-basepanel-standard-text-disabled);
643
- cursor: not-allowed;
477
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
478
+ top: 0.5rem;
479
+ font-size: 0.875rem;
480
+ line-height: 1rem;
481
+ padding: 0;
644
482
  }
645
- .eds-contrast input:disabled + .eds-input-panel__container {
646
- background: var(--components-form-basepanel-contrast-fill-disabled);
647
- border-style: dashed;
648
- border-color: var(--components-form-basepanel-contrast-border-disabled);
649
- color: var(--components-form-basepanel-contrast-text-disabled);
483
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
484
+ top: 0.75rem;
485
+ font-size: 1.5rem;
486
+ line-height: 2.25rem;
650
487
  }
651
- .eds-input-panel__container .eds-checkbox__icon,
652
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
653
- .eds-input-panel__container .eds-form-component--radio__radio {
654
- width: 1.5rem;
655
- height: 1.5rem;
656
- margin-right: 0;
488
+ .eds-input-group__label--filled {
489
+ top: 0.375rem;
490
+ font-size: 0.75rem;
491
+ line-height: 0.75rem;
492
+ height: 10px;
493
+ padding: 0;
657
494
  }
658
- .eds-input-panel--medium .eds-input-panel__title {
659
- font-size: 1rem;
660
- font-weight: 500;
495
+ .eds-textarea__label .eds-input-group__label--filled {
496
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
497
+ background: var(--textarea-label-background);
498
+ width: calc(100% - 1rem - 1rem - 4px);
661
499
  }
662
- .eds-input-panel--medium.eds-input-panel__container {
663
- padding-bottom: 1rem;
664
- min-height: 3.75rem;
500
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
501
+ top: 0.5rem;
502
+ font-size: 0.875rem;
503
+ line-height: 1rem;
504
+ padding: 0;
665
505
  }
666
- .eds-input-panel--large.eds-input-panel__container {
667
- min-height: 6rem;
506
+
507
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
508
+ top: 0.375rem;
509
+ font-size: 0.75rem;
510
+ line-height: 0.75rem;
511
+ height: 10px;
512
+ padding: 0;
668
513
  }
669
- .eds-input-panel--large .eds-input-panel__title {
670
- font-size: 1.25rem;
671
- font-weight: 500;
672
- line-height: 1.875rem;
514
+
515
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
516
+ top: 0.375rem;
517
+ font-size: 0.75rem;
518
+ line-height: 0.75rem;
519
+ height: 10px;
520
+ padding: 0;
673
521
  }
674
- .eds-input-panel__title-wrapper {
675
- display: flex;
676
- justify-content: space-between;
677
- align-items: center;
522
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
523
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
524
+ background: var(--textarea-label-background);
525
+ width: calc(100% - 1rem - 1rem - 4px);
678
526
  }
679
- .eds-input-panel__secondary-label-and-icon-wrapper {
680
- display: flex;
681
- justify-content: center;
682
- align-items: center;
683
- gap: 0.75rem;
527
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
528
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
529
+ background: var(--textarea-label-background);
530
+ width: calc(100% - 1rem - 1rem - 4px);
684
531
  }
685
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
686
- margin: 0;
532
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
533
+ top: 0.5rem;
534
+ font-size: 0.875rem;
535
+ line-height: 1rem;
536
+ padding: 0;
687
537
  }
688
- .eds-input-panel__additional-content {
689
- margin-top: 0.25rem;
690
- word-wrap: break-word;
538
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
539
+ top: 0.5rem;
540
+ font-size: 0.875rem;
541
+ line-height: 1rem;
542
+ padding: 0;
691
543
  }
692
544
  /* DO NOT CHANGE!*/
693
545
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -853,212 +705,360 @@ input:disabled + .eds-input-panel__container {
853
705
  }
854
706
  /* DO NOT CHANGE!*/
855
707
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
856
- .eds-form-control__field-and-feedback-text {
857
- display: flex;
858
- flex-direction: column;
859
- height: -moz-fit-content;
860
- height: fit-content;
861
- width: 100%;
708
+ .eds-input-panel[focus-within] .eds-input-panel__container {
709
+ outline: 2px solid #181c56;
710
+ outline-color: var(--basecolors-stroke-focus-standard);
711
+ outline-offset: 0.125rem;
862
712
  }
863
- .eds-form-control__field-and-feedback-text--has-tooltip {
864
- padding-right: 2rem;
713
+ .eds-input-panel:focus-within .eds-input-panel__container {
714
+ outline: 2px solid #181c56;
715
+ outline-color: var(--basecolors-stroke-focus-standard);
716
+ outline-offset: 0.125rem;
865
717
  }
866
- .eds-form-control-wrapper {
718
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
719
+ outline-color: var(--basecolors-stroke-focus-contrast);
720
+ }
721
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
722
+ outline-color: var(--basecolors-stroke-focus-contrast);
723
+ }
724
+ .eds-input-panel > input {
725
+ position: absolute;
726
+ opacity: 0;
727
+ cursor: pointer;
728
+ height: 0;
729
+ width: 0;
730
+ }
731
+ .eds-input-panel > input:checked + .eds-input-panel__container {
732
+ border-color: var(--components-form-basepanel-standard-border-selected);
733
+ background: var(--components-form-basepanel-standard-fill-selected);
734
+ }
735
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
736
+ border-color: var(--components-form-basepanel-contrast-border-selected);
737
+ background: var(--components-form-basepanel-contrast-fill-selected);
738
+ }
739
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
740
+ width: 0.75rem;
741
+ height: 0.75rem;
742
+ }
743
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
744
+ background-color: var(--components-form-radio-contrast-icon);
745
+ }
746
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
747
+ background-color: var(--components-form-basepanel-standard-fill-hover);
748
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
749
+ hover state styling with the inputPanel container */
750
+ }
751
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
752
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
753
+ }
754
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
755
+ background-color: var(--components-form-basepanel-standard-fill-hover);
756
+ border-color: var(--components-form-basepanel-standard-border-selected);
757
+ }
758
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
759
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
760
+ border-color: var(--components-form-basepanel-contrast-border-selected);
761
+ }
762
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
763
+ border-color: transparent;
764
+ }
765
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
766
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
767
+ }
768
+ .eds-input-panel__container {
769
+ background: var(--components-form-basepanel-standard-fill-default);
770
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
771
+ color: var(--components-form-basepanel-standard-text-accent);
772
+ border-radius: 0.25rem;
867
773
  display: flex;
868
- align-items: center;
774
+ flex-direction: column;
775
+ justify-content: flex-start;
776
+ min-width: 20rem;
869
777
  position: relative;
870
- flex: 1;
871
- min-height: 3rem;
872
- padding-left: 1rem;
873
- padding-right: 1rem;
874
- background-color: var(--components-form-baseform-standard-fill-default);
875
- border-radius: 0.25rem;
876
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
877
- box-shadow: 0 0 0 transparent;
878
- color: var(--components-form-baseform-standard-text-content);
879
- transition: border-color 0.1s ease-in-out;
778
+ padding: 1rem;
779
+ -webkit-user-select: none;
780
+ -moz-user-select: none;
781
+ user-select: none;
782
+ width: -moz-fit-content;
783
+ width: fit-content;
784
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
880
785
  }
881
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
882
- border-color: var(--components-form-baseform-standard-border-interactive);
786
+ .eds-contrast .eds-input-panel__container {
787
+ background-color: var(--components-form-basepanel-contrast-fill-default);
788
+ border-color: var(--components-form-basepanel-contrast-border-default);
789
+ color: var(--components-form-basepanel-contrast-text-accent);
883
790
  }
884
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
885
- border-color: var(--components-form-baseform-standard-border-interactive);
791
+ .eds-input-panel__container:hover {
792
+ background-color: var(--components-form-basepanel-standard-fill-hover);
793
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
794
+ hover state styling with the inputPanel container */
886
795
  }
887
- .eds-contrast .eds-form-control-wrapper:hover {
888
- border-color: var(--components-form-baseform-contrast-border-interactive);
796
+ .eds-contrast .eds-input-panel__container:hover {
797
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
889
798
  }
890
- .eds-form-control-wrapper[focus-within] {
891
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
799
+ .eds-input-panel__container:hover .eds-checkbox__icon,
800
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
801
+ background-color: var(--components-form-basepanel-standard-fill-hover);
802
+ border-color: var(--components-form-basepanel-standard-border-selected);
892
803
  }
893
- .eds-form-control-wrapper:focus-within {
894
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
804
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
805
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
806
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
807
+ border-color: var(--components-form-basepanel-contrast-border-selected);
895
808
  }
896
- .eds-contrast .eds-form-control-wrapper[focus-within] {
897
- outline: var(--components-form-baseform-contrast-border-interactive);
809
+ input:disabled + .eds-input-panel__container {
810
+ background: var(--components-form-basepanel-standard-fill-disabled);
811
+ border-color: var(--components-form-basepanel-standard-border-disabled);
812
+ color: var(--components-form-basepanel-standard-text-disabled);
813
+ cursor: not-allowed;
898
814
  }
899
- .eds-contrast .eds-form-control-wrapper:focus-within {
900
- outline: var(--components-form-baseform-contrast-border-interactive);
815
+ .eds-contrast input:disabled + .eds-input-panel__container {
816
+ background: var(--components-form-basepanel-contrast-fill-disabled);
817
+ border-style: dashed;
818
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
819
+ color: var(--components-form-basepanel-contrast-text-disabled);
901
820
  }
902
- .eds-form-control-wrapper ::-moz-placeholder {
903
- color: var(--components-form-baseform-standard-text-label);
821
+ .eds-input-panel__container .eds-checkbox__icon,
822
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
823
+ .eds-input-panel__container .eds-form-component--radio__radio {
824
+ width: 1.5rem;
825
+ height: 1.5rem;
826
+ margin-right: 0;
904
827
  }
905
- .eds-form-control-wrapper ::placeholder {
906
- color: var(--components-form-baseform-standard-text-label);
828
+ .eds-input-panel--medium .eds-input-panel__title {
829
+ font-size: 1rem;
830
+ font-weight: 500;
907
831
  }
908
- .eds-form-control-wrapper--disabled {
909
- border-color: transparent;
910
- background-color: var(--components-form-baseform-standard-fill-disabled);
911
- pointer-events: none;
912
- color: var(--components-form-baseform-standard-text-disabled);
832
+ .eds-input-panel--medium.eds-input-panel__container {
833
+ padding-bottom: 1rem;
834
+ min-height: 3.75rem;
913
835
  }
914
- .eds-form-control-wrapper--disabled .eds-input-group__label {
915
- color: var(--components-form-baseform-standard-text-disabled);
836
+ .eds-input-panel--large.eds-input-panel__container {
837
+ min-height: 6rem;
838
+ }
839
+ .eds-input-panel--large .eds-input-panel__title {
840
+ font-size: 1.25rem;
841
+ font-weight: 500;
842
+ line-height: 1.875rem;
843
+ }
844
+ .eds-input-panel__title-wrapper {
845
+ display: flex;
846
+ justify-content: space-between;
847
+ align-items: center;
848
+ }
849
+ .eds-input-panel__secondary-label-and-icon-wrapper {
850
+ display: flex;
851
+ justify-content: center;
852
+ align-items: center;
853
+ gap: 0.75rem;
854
+ }
855
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
856
+ margin: 0;
857
+ }
858
+ .eds-input-panel__additional-content {
859
+ margin-top: 0.25rem;
860
+ word-wrap: break-word;
861
+ }
862
+ /* DO NOT CHANGE!*/
863
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
864
+ .eds-form-component--radio__container {
865
+ display: flex;
866
+ justify-content: center;
867
+ align-items: center;
868
+ position: relative;
869
+ cursor: pointer;
870
+ height: 2rem;
871
+ width: -moz-fit-content;
872
+ width: fit-content;
873
+ -webkit-user-select: none;
874
+ -moz-user-select: none;
875
+ user-select: none;
876
+ }
877
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
878
+ background-color: var(--components-form-radio-standard-fill-hover);
879
+ }
880
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
881
+ background-color: var(--components-form-radio-contrast-fill-hover);
882
+ }
883
+ .eds-form-component--radio__container input {
884
+ position: absolute;
885
+ opacity: 0;
886
+ cursor: pointer;
887
+ height: 0;
888
+ width: 0;
889
+ }
890
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
891
+ height: 0.625rem;
892
+ width: 0.625rem;
916
893
  }
917
- .eds-contrast .eds-form-control-wrapper--disabled {
918
- border-color: transparent;
919
- background-color: var(--components-form-baseform-contrast-fill-disabled);
920
- color: var(--components-form-baseform-contrast-text-disabled);
894
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
895
+ outline: 2px solid #181c56;
896
+ outline-color: var(--basecolors-stroke-focus-standard);
897
+ outline-offset: 0.125rem;
921
898
  }
922
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
923
- color: var(--components-form-baseform-contrast-text-disabled);
899
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
900
+ outline-color: var(--basecolors-stroke-focus-contrast);
924
901
  }
925
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
926
- display: none;
902
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
903
+ position: relative;
904
+ height: 1.25rem;
905
+ width: 1.25rem;
906
+ margin-right: 1rem;
907
+ background-color: var(--components-form-radio-standard-fill-default);
908
+ border: 0.125rem solid var(--components-form-radio-standard-border);
909
+ border-radius: 50%;
910
+ display: flex;
911
+ align-items: center;
912
+ justify-content: center;
927
913
  }
928
- .eds-form-control-wrapper--readonly {
929
- border-color: transparent;
930
- pointer-events: none;
931
- cursor: default;
932
- background: var(--components-form-baseform-standard-fill-readonly);
933
- border: var(--components-form-baseform-standard-fill-readonly);
914
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
915
+ background-color: var(--components-form-radio-contrast-fill-default);
916
+ border-color: var(--components-form-radio-contrast-border);
934
917
  }
935
- .eds-contrast .eds-form-control-wrapper--readonly {
936
- background: var(--components-form-baseform-contrast-fill-readonly);
937
- color: var(--components-form-baseform-contrast-text-description);
938
- border: var(--components-form-baseform-contrast-fill-readonly);
918
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
919
+ background: var(--components-form-baseform-contrast-fill-disabled);
920
+ border-color: var(--components-form-baseform-contrast-text-disabled);
921
+ cursor: not-allowed;
939
922
  }
940
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
941
- color: var(--components-form-baseform-contrast-text-description);
923
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
924
+ border-color: var(--components-form-baseform-contrast-text-disabled);
942
925
  }
943
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
944
- display: none;
926
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
927
+ background: var(--components-form-baseform-contrast-fill-disabled);
928
+ border-color: var(--components-form-baseform-contrast-text-disabled);
945
929
  }
946
- .eds-form-control-wrapper--size-medium .eds-form-control,
947
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
948
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
949
- font-size: 1rem;
950
- line-height: 1rem;
930
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
931
+ color: var(--components-form-baseform-contrast-text-disabled);
951
932
  }
952
- .eds-form-control-wrapper--size-large {
953
- min-height: 4rem;
933
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
934
+ display: block;
935
+ width: 0;
936
+ height: 0;
937
+ border-radius: 50%;
938
+ background-color: var(--components-form-radio-standard-fill-selected);
939
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
954
940
  }
955
- .eds-form-control-wrapper--size-large .eds-form-control,
956
- .eds-form-control-wrapper--size-large .eds-form-control__append,
957
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
958
- font-size: 1.5rem;
941
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
942
+ background-color: var(--components-form-radio-contrast-icon);
959
943
  }
960
- .eds-form-control-wrapper--success {
961
- border-color: var(--components-form-baseform-standard-border-success);
944
+ /* DO NOT CHANGE!*/
945
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
946
+ .eds-switch {
947
+ cursor: pointer;
948
+ -webkit-user-select: none;
949
+ -moz-user-select: none;
950
+ user-select: none;
951
+ padding: 0.5rem 0;
952
+ width: -moz-fit-content;
953
+ width: fit-content;
962
954
  }
963
- .eds-form-control-wrapper--success[focus-within] {
964
- border-color: var(--components-form-baseform-standard-border-success);
955
+ .eds-switch input {
956
+ opacity: 0;
957
+ pointer-events: none;
958
+ position: absolute;
965
959
  }
966
- .eds-form-control-wrapper--success:focus-within {
967
- border-color: var(--components-form-baseform-standard-border-success);
960
+ .eds-switch--right {
961
+ display: flex;
962
+ flex-direction: row;
963
+ align-items: center;
968
964
  }
969
- .eds-contrast .eds-form-control-wrapper--success {
970
- border-color: var(--components-form-baseform-standard-border-success);
965
+ .eds-switch--bottom {
966
+ display: flex;
967
+ flex-direction: column;
968
+ align-items: center;
971
969
  }
972
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
973
- border-color: var(--components-form-baseform-contrast-border-success);
970
+ .eds-switch__circle {
971
+ border-radius: 50%;
972
+ height: 1.25rem;
973
+ width: 1.25rem;
974
+ content: "";
975
+ display: flex;
976
+ align-items: center;
977
+ justify-content: center;
978
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
979
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
980
+ background-color: var(--components-form-switch-standard-switch);
981
+ top: 0.125rem;
982
+ left: 0.125rem;
983
+ position: relative;
974
984
  }
975
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
976
- border-color: var(--components-form-baseform-contrast-border-success);
985
+ .eds-switch__switch--large .eds-switch__circle {
986
+ height: 1.75rem;
987
+ width: 1.75rem;
977
988
  }
978
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
979
- border-color: var(--components-form-baseform-standard-border-negative);
989
+ .eds-contrast .eds-switch__circle {
990
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
980
991
  }
981
- .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
982
- border-color: var(--components-form-baseform-standard-border-negative);
992
+ .eds-switch__switch {
993
+ position: relative;
994
+ background-color: var(--components-form-switch-standard-fill-false);
995
+ content: "";
996
+ display: block;
997
+ transition: background-color 0.1s ease-in-out;
998
+ height: 1.5rem;
999
+ width: 3rem;
1000
+ border-radius: 1.5rem;
1001
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
983
1002
  }
984
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
985
- border-color: var(--components-form-baseform-standard-border-negative);
1003
+ .eds-contrast .eds-switch__switch {
1004
+ background-color: var(--components-form-switch-contrast-fill-false);
986
1005
  }
987
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
988
- border-color: var(--components-form-baseform-contrast-border-negative);
1006
+ .eds-switch--right .eds-switch__switch {
1007
+ margin-right: 0.75rem;
989
1008
  }
990
- .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
991
- border-color: var(--components-form-baseform-contrast-border-negative);
1009
+ .eds-switch__switch svg g,
1010
+ .eds-switch__switch path {
1011
+ fill: var(--components-form-switch-standard-icon-false);
1012
+ transition: fill ease-in-out 0.1s;
992
1013
  }
993
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
994
- border-color: var(--components-form-baseform-contrast-border-negative);
1014
+ .eds-contrast .eds-switch__switch svg g,
1015
+ .eds-contrast .eds-switch__switch path {
1016
+ fill: var(--components-form-switch-contrast-icon-false);
995
1017
  }
996
- .eds-contrast .eds-form-control .eds-tooltip {
997
- background: var(--components-tooltip-tooltip-standard-fill);
998
- color: var(--components-tooltip-tooltip-standard-text);
999
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1018
+ :checked + .eds-switch__switch {
1019
+ background-color: var(--eds-switch-color);
1000
1020
  }
1001
- .eds-form-control .eds-tooltip::after {
1002
- background: var(--components-tooltip-tooltip-standard-fill);
1021
+ :checked + .eds-switch__switch .eds-switch__circle {
1022
+ left: 1.625rem;
1003
1023
  }
1004
-
1005
- .eds-form-control {
1006
- display: block;
1007
- -webkit-appearance: none;
1008
- -moz-appearance: none;
1009
- appearance: none;
1010
- width: 100%;
1011
- height: 100%;
1012
- padding: 20px 0rem 0.25rem;
1013
- font-family: inherit;
1014
- font-size: 1rem;
1015
- line-height: 1rem;
1016
- border: 0;
1017
- color: var(--components-form-baseform-standard-text-content);
1018
- background-color: transparent;
1024
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
1025
+ :checked + .eds-switch__switch .eds-switch__circle path {
1026
+ fill: var(--eds-switch-color);
1019
1027
  }
1020
- .eds-form-control::-moz-placeholder {
1021
- opacity: 0;
1022
- -moz-transition: opacity 0.2s ease-in-out;
1023
- transition: opacity 0.2s ease-in-out;
1028
+ .eds-contrast :checked + .eds-switch__switch {
1029
+ background-color: var(--eds-switch-contrast-color);
1024
1030
  }
1025
- .eds-form-control::placeholder {
1026
- opacity: 0;
1027
- transition: opacity 0.2s ease-in-out;
1031
+ :focus + .eds-switch__switch {
1032
+ outline: 2px solid #181c56;
1033
+ outline-color: var(--basecolors-stroke-focus-standard);
1034
+ outline-offset: 0.125rem;
1028
1035
  }
1029
- .eds-form-control:focus {
1030
- outline: none;
1036
+ .eds-contrast :focus + .eds-switch__switch {
1037
+ outline-color: var(--basecolors-stroke-focus-contrast);
1031
1038
  }
1032
- .eds-form-control:focus::-moz-placeholder {
1033
- opacity: 1;
1039
+ .eds-switch__switch--large {
1040
+ width: 3.75rem;
1041
+ height: 2rem;
1042
+ border-radius: 3.75rem;
1034
1043
  }
1035
- .eds-form-control:focus::placeholder {
1036
- opacity: 1;
1044
+ :checked + .eds-switch__switch--large .eds-switch__circle {
1045
+ left: 1.875rem;
1037
1046
  }
1038
- .eds-form-control__prepend, .eds-form-control__append {
1047
+ .eds-switch__switch--large svg {
1039
1048
  position: relative;
1040
- line-height: inherit;
1049
+ right: 0.05rem;
1041
1050
  }
1042
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
1043
- all: unset;
1044
- position: absolute;
1045
- display: flex;
1046
- align-items: center;
1047
- justify-content: center;
1048
- height: 1.5rem;
1049
- width: 1.5rem;
1050
- right: -2rem;
1051
- border-radius: 100%;
1052
- color: var(--primary-text-color);
1053
- cursor: pointer;
1051
+ .eds-switch__label--large--right {
1052
+ font-size: 1rem;
1054
1053
  }
1055
- .eds-form-control__prepend {
1056
- margin-right: 0.75rem;
1057
- margin-left: 0;
1054
+ .eds-switch__label--large--bottom {
1055
+ font-size: 0.875rem;
1058
1056
  }
1059
- .eds-form-control__append {
1060
- margin-right: 0;
1061
- margin-left: 0.75rem;
1057
+ .eds-switch__label--medium--right {
1058
+ font-size: 0.875rem;
1059
+ }
1060
+ .eds-switch__label--medium--bottom {
1061
+ font-size: 0.75rem;
1062
1062
  }
1063
1063
  /* DO NOT CHANGE!*/
1064
1064
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1075,10 +1075,6 @@ input:disabled + .eds-input-panel__container {
1075
1075
  padding: 0.5rem;
1076
1076
  margin-right: -0.75rem;
1077
1077
  }
1078
- .eds-textfield__clear-button-wrapper {
1079
- display: flex;
1080
- align-items: center;
1081
- }
1082
1078
  .eds-textfield__clear-button:hover {
1083
1079
  background: var(--components-form-basepanel-standard-fill-hover);
1084
1080
  }
@@ -1087,6 +1083,10 @@ input:disabled + .eds-input-panel__container {
1087
1083
  outline-color: var(--basecolors-stroke-focus-standard);
1088
1084
  outline-offset: 0.125rem;
1089
1085
  }
1086
+ .eds-textfield__clear-button-wrapper {
1087
+ display: flex;
1088
+ align-items: center;
1089
+ }
1090
1090
 
1091
1091
  .eds-textfield__divider {
1092
1092
  content: "";
@@ -1119,7 +1119,7 @@ input:disabled + .eds-input-panel__container {
1119
1119
  line-height: 1.25rem;
1120
1120
  margin: 0.25rem;
1121
1121
  outline-color: transparent;
1122
- padding: calc(0.25rem/ 2) 0.75rem;
1122
+ padding: calc(0.25rem / 2) 0.75rem;
1123
1123
  text-align: center;
1124
1124
  -webkit-user-select: none;
1125
1125
  -moz-user-select: none;