@entur/form 8.1.8 → 8.1.9-RC.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 +620 -620
  14. package/package.json +11 -7
package/dist/styles.css CHANGED
@@ -1,165 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-feedback-text {
4
- display: flex;
5
- align-items: center;
6
- margin-top: 0.25rem;
7
- }
8
- .eds-feedback-text--info, .eds-feedback-text--information {
9
- padding-left: calc(1rem + 0.125rem);
10
- }
11
- .eds-feedback-text__text {
12
- color: var(--components-form-feedbacktext-information-standard-text);
13
- }
14
- .eds-contrast .eds-feedback-text__text {
15
- color: var(--components-form-feedbacktext-information-contrast-text);
16
- }
17
-
18
- .eds-feedback-text__icon {
19
- font-size: 1.5rem;
20
- min-height: 1.5rem;
21
- min-width: 1.5rem;
22
- padding-right: 0.5rem;
23
- position: relative;
24
- top: -0.1rem;
25
- }
26
- .eds-feedback-text__icon--success {
27
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
28
- }
29
- .eds-feedback-text__icon--success circle {
30
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
31
- }
32
- .eds-contrast .eds-feedback-text__icon--success {
33
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
34
- }
35
- .eds-contrast .eds-feedback-text__icon--success circle {
36
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
37
- }
38
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
39
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
40
- }
41
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
42
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
43
- }
44
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
45
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
46
- }
47
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
48
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
49
- }
50
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
51
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
52
- }
53
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
54
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
55
- }
56
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
57
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
58
- }
59
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
61
- }
62
- .eds-feedback-text__icon--warning {
63
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
64
- }
65
- .eds-feedback-text__icon--warning .svg-exclamation {
66
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
67
- }
68
- .eds-contrast .eds-feedback-text__icon--warning {
69
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
70
- }
71
- .eds-contrast .eds-feedback-text__icon--warning circle {
72
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
73
- }
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
- /* DO NOT CHANGE!*/
162
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
163
3
  .eds-checkbox__container {
164
4
  display: flex;
165
5
  align-items: center;
@@ -315,379 +155,473 @@
315
155
  }
316
156
  /* DO NOT CHANGE!*/
317
157
  /* 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;
158
+ .eds-form-control__field-and-feedback-text {
159
+ display: flex;
160
+ flex-direction: column;
161
+ height: -moz-fit-content;
162
+ height: fit-content;
163
+ width: 100%;
322
164
  }
323
- .eds-input-group__label {
324
- color: var(--components-form-baseform-standard-text-label);
165
+ .eds-form-control__field-and-feedback-text--has-tooltip {
166
+ padding-right: 2rem;
167
+ }
168
+ .eds-form-control-wrapper {
325
169
  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;
170
+ align-items: center;
171
+ position: relative;
172
+ flex: 1;
173
+ min-height: 3rem;
174
+ padding-left: 1rem;
175
+ padding-right: 1rem;
176
+ background-color: var(--components-form-baseform-standard-fill-default);
177
+ border-radius: 0.25rem;
178
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
179
+ box-shadow: 0 0 0 transparent;
180
+ color: var(--components-form-baseform-standard-text-content);
181
+ transition: border-color 0.1s ease-in-out;
337
182
  }
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;
183
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
184
+ border-color: var(--components-form-baseform-standard-border-interactive);
344
185
  }
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);
186
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
187
+ border-color: var(--components-form-baseform-standard-border-interactive);
349
188
  }
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;
189
+ .eds-contrast .eds-form-control-wrapper:hover {
190
+ border-color: var(--components-form-baseform-contrast-border-interactive);
355
191
  }
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;
192
+ .eds-form-control-wrapper[focus-within] {
193
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
360
194
  }
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;
195
+ .eds-form-control-wrapper:focus-within {
196
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
367
197
  }
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);
198
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
199
+ outline: var(--components-form-baseform-contrast-border-interactive);
372
200
  }
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;
201
+ .eds-contrast .eds-form-control-wrapper:focus-within {
202
+ outline: var(--components-form-baseform-contrast-border-interactive);
378
203
  }
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;
204
+ .eds-form-control-wrapper ::-moz-placeholder {
205
+ color: var(--components-form-baseform-standard-text-label);
386
206
  }
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;
207
+ .eds-form-control-wrapper ::placeholder {
208
+ color: var(--components-form-baseform-standard-text-label);
394
209
  }
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);
210
+ .eds-form-control-wrapper--disabled {
211
+ border-color: transparent;
212
+ background-color: var(--components-form-baseform-standard-fill-disabled);
213
+ pointer-events: none;
214
+ color: var(--components-form-baseform-standard-text-disabled);
399
215
  }
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);
216
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
217
+ color: var(--components-form-baseform-standard-text-disabled);
404
218
  }
405
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
406
- top: 0.5rem;
407
- font-size: 0.875rem;
219
+ .eds-contrast .eds-form-control-wrapper--disabled {
220
+ border-color: transparent;
221
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
222
+ color: var(--components-form-baseform-contrast-text-disabled);
223
+ }
224
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
225
+ color: var(--components-form-baseform-contrast-text-disabled);
226
+ }
227
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
228
+ display: none;
229
+ }
230
+ .eds-form-control-wrapper--readonly {
231
+ border-color: transparent;
232
+ pointer-events: none;
233
+ cursor: default;
234
+ background: var(--components-form-baseform-standard-fill-readonly);
235
+ border: var(--components-form-baseform-standard-fill-readonly);
236
+ }
237
+ .eds-contrast .eds-form-control-wrapper--readonly {
238
+ background: var(--components-form-baseform-contrast-fill-readonly);
239
+ color: var(--components-form-baseform-contrast-text-description);
240
+ border: var(--components-form-baseform-contrast-fill-readonly);
241
+ }
242
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
243
+ color: var(--components-form-baseform-contrast-text-description);
244
+ }
245
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
246
+ display: none;
247
+ }
248
+ .eds-form-control-wrapper--size-medium .eds-form-control,
249
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
250
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
251
+ font-size: 1rem;
408
252
  line-height: 1rem;
409
- padding: 0;
410
253
  }
411
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
412
- top: 0.5rem;
413
- font-size: 0.875rem;
254
+ .eds-form-control-wrapper--size-large {
255
+ min-height: 4rem;
256
+ }
257
+ .eds-form-control-wrapper--size-large .eds-form-control,
258
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
259
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
260
+ font-size: 1.5rem;
261
+ }
262
+ .eds-form-control-wrapper--success {
263
+ border-color: var(--components-form-baseform-standard-border-success);
264
+ }
265
+ .eds-form-control-wrapper--success[focus-within] {
266
+ border-color: var(--components-form-baseform-standard-border-success);
267
+ }
268
+ .eds-form-control-wrapper--success:focus-within {
269
+ border-color: var(--components-form-baseform-standard-border-success);
270
+ }
271
+ .eds-contrast .eds-form-control-wrapper--success {
272
+ border-color: var(--components-form-baseform-standard-border-success);
273
+ }
274
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
275
+ border-color: var(--components-form-baseform-contrast-border-success);
276
+ }
277
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
278
+ border-color: var(--components-form-baseform-contrast-border-success);
279
+ }
280
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
281
+ border-color: var(--components-form-baseform-standard-border-negative);
282
+ }
283
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
284
+ border-color: var(--components-form-baseform-standard-border-negative);
285
+ }
286
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
287
+ border-color: var(--components-form-baseform-standard-border-negative);
288
+ }
289
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
290
+ border-color: var(--components-form-baseform-contrast-border-negative);
291
+ }
292
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
293
+ border-color: var(--components-form-baseform-contrast-border-negative);
294
+ }
295
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
296
+ border-color: var(--components-form-baseform-contrast-border-negative);
297
+ }
298
+ .eds-contrast .eds-form-control .eds-tooltip {
299
+ background: var(--components-tooltip-tooltip-standard-fill);
300
+ color: var(--components-tooltip-tooltip-standard-text);
301
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
302
+ }
303
+ .eds-form-control .eds-tooltip::after {
304
+ background: var(--components-tooltip-tooltip-standard-fill);
305
+ }
306
+
307
+ .eds-form-control {
308
+ display: block;
309
+ -webkit-appearance: none;
310
+ -moz-appearance: none;
311
+ appearance: none;
312
+ width: 100%;
313
+ height: 100%;
314
+ padding: 20px 0rem 0.25rem;
315
+ font-family: inherit;
316
+ font-size: 1rem;
414
317
  line-height: 1rem;
415
- padding: 0;
318
+ border: 0;
319
+ color: var(--components-form-baseform-standard-text-content);
320
+ background-color: transparent;
416
321
  }
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;
322
+ .eds-form-control::-moz-placeholder {
323
+ opacity: 0;
324
+ -moz-transition: opacity 0.2s ease-in-out;
325
+ transition: opacity 0.2s ease-in-out;
427
326
  }
428
- .eds-switch input {
327
+ .eds-form-control::placeholder {
429
328
  opacity: 0;
430
- pointer-events: none;
431
- position: absolute;
329
+ transition: opacity 0.2s ease-in-out;
432
330
  }
433
- .eds-switch--right {
434
- display: flex;
435
- flex-direction: row;
436
- align-items: center;
331
+ .eds-form-control:focus {
332
+ outline: none;
437
333
  }
438
- .eds-switch--bottom {
334
+ .eds-form-control:focus::-moz-placeholder {
335
+ opacity: 1;
336
+ }
337
+ .eds-form-control:focus::placeholder {
338
+ opacity: 1;
339
+ }
340
+ .eds-form-control__prepend, .eds-form-control__append {
341
+ position: relative;
342
+ line-height: inherit;
343
+ }
344
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
345
+ all: unset;
346
+ position: absolute;
439
347
  display: flex;
440
- flex-direction: column;
441
348
  align-items: center;
349
+ justify-content: center;
350
+ height: 1.5rem;
351
+ width: 1.5rem;
352
+ right: -2rem;
353
+ border-radius: 100%;
354
+ color: var(--primary-text-color);
355
+ cursor: pointer;
442
356
  }
443
- .eds-switch__circle {
444
- border-radius: 50%;
445
- height: 1.25rem;
446
- width: 1.25rem;
447
- content: "";
357
+ .eds-form-control__prepend {
358
+ margin-right: 0.75rem;
359
+ margin-left: 0;
360
+ }
361
+ .eds-form-control__append {
362
+ margin-right: 0;
363
+ margin-left: 0.75rem;
364
+ }
365
+ /* DO NOT CHANGE!*/
366
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
367
+ .eds-feedback-text {
448
368
  display: flex;
449
369
  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;
370
+ margin-top: 0.25rem;
457
371
  }
458
- .eds-switch__switch--large .eds-switch__circle {
459
- height: 1.75rem;
460
- width: 1.75rem;
372
+ .eds-feedback-text--info, .eds-feedback-text--information {
373
+ padding-left: calc(1rem + 0.125rem);
461
374
  }
462
- .eds-contrast .eds-switch__circle {
463
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
375
+ .eds-feedback-text__text {
376
+ color: var(--components-form-feedbacktext-information-standard-text);
464
377
  }
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);
378
+ .eds-contrast .eds-feedback-text__text {
379
+ color: var(--components-form-feedbacktext-information-contrast-text);
475
380
  }
476
- .eds-contrast .eds-switch__switch {
477
- background-color: var(--components-form-switch-contrast-fill-false);
381
+
382
+ .eds-feedback-text__icon {
383
+ font-size: 1.5rem;
384
+ min-height: 1.5rem;
385
+ min-width: 1.5rem;
386
+ padding-right: 0.5rem;
387
+ position: relative;
388
+ top: -0.1rem;
478
389
  }
479
- .eds-switch--right .eds-switch__switch {
480
- margin-right: 0.75rem;
390
+ .eds-feedback-text__icon--success {
391
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
481
392
  }
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;
393
+ .eds-feedback-text__icon--success circle {
394
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
486
395
  }
487
- .eds-contrast .eds-switch__switch svg g,
488
- .eds-contrast .eds-switch__switch path {
489
- fill: var(--components-form-switch-contrast-icon-false);
396
+ .eds-contrast .eds-feedback-text__icon--success {
397
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
490
398
  }
491
- :checked + .eds-switch__switch {
492
- background-color: var(--eds-switch-color);
399
+ .eds-contrast .eds-feedback-text__icon--success circle {
400
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
493
401
  }
494
- :checked + .eds-switch__switch .eds-switch__circle {
495
- left: 1.625rem;
402
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
403
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
496
404
  }
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);
405
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
406
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
500
407
  }
501
- .eds-contrast :checked + .eds-switch__switch {
502
- background-color: var(--eds-switch-contrast-color);
408
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
409
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
503
410
  }
504
- :focus + .eds-switch__switch {
505
- outline: 2px solid #181c56;
506
- outline-color: var(--basecolors-stroke-focus-standard);
507
- outline-offset: 0.125rem;
411
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
412
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
508
413
  }
509
- .eds-contrast :focus + .eds-switch__switch {
510
- outline-color: var(--basecolors-stroke-focus-contrast);
414
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
415
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
511
416
  }
512
- .eds-switch__switch--large {
513
- width: 3.75rem;
514
- height: 2rem;
515
- border-radius: 3.75rem;
417
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
418
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
516
419
  }
517
- :checked + .eds-switch__switch--large .eds-switch__circle {
518
- left: 1.875rem;
420
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
421
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
519
422
  }
520
- .eds-switch__switch--large svg {
521
- position: relative;
522
- right: 0.05rem;
423
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
424
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
523
425
  }
524
- .eds-switch__label--large--right {
525
- font-size: 1rem;
426
+ .eds-feedback-text__icon--warning {
427
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
526
428
  }
527
- .eds-switch__label--large--bottom {
528
- font-size: 0.875rem;
429
+ .eds-feedback-text__icon--warning .svg-exclamation {
430
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
529
431
  }
530
- .eds-switch__label--medium--right {
531
- font-size: 0.875rem;
432
+ .eds-contrast .eds-feedback-text__icon--warning {
433
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
532
434
  }
533
- .eds-switch__label--medium--bottom {
534
- font-size: 0.75rem;
435
+ .eds-contrast .eds-feedback-text__icon--warning circle {
436
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
535
437
  }
536
438
  /* DO NOT CHANGE!*/
537
439
  /* 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;
440
+ .eds-input-group {
441
+ color: inherit;
442
+ display: block;
443
+ position: relative;
542
444
  }
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;
445
+ .eds-input-group__label {
446
+ color: var(--components-form-baseform-standard-text-label);
447
+ display: flex;
448
+ font-size: 1rem;
449
+ position: absolute;
450
+ line-height: 1rem;
451
+ height: 3rem;
452
+ padding-left: 0;
453
+ top: 1rem;
454
+ 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;
455
+ -webkit-user-select: none;
456
+ -moz-user-select: none;
457
+ user-select: none;
458
+ pointer-events: none;
547
459
  }
548
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
549
- outline-color: var(--basecolors-stroke-focus-contrast);
460
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
461
+ top: 0.375rem;
462
+ font-size: 0.75rem;
463
+ line-height: 0.75rem;
464
+ height: 10px;
465
+ padding: 0;
550
466
  }
551
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
552
- outline-color: var(--basecolors-stroke-focus-contrast);
467
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
468
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
469
+ background: var(--textarea-label-background);
470
+ width: calc(100% - 1rem - 1rem - 4px);
553
471
  }
554
- .eds-input-panel > input {
555
- position: absolute;
556
- opacity: 0;
557
- cursor: pointer;
558
- height: 0;
559
- width: 0;
472
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
473
+ top: 0.5rem;
474
+ font-size: 0.875rem;
475
+ line-height: 1rem;
476
+ padding: 0;
560
477
  }
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);
478
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
479
+ top: 0.75rem;
480
+ font-size: 1.5rem;
481
+ line-height: 2.25rem;
564
482
  }
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);
483
+ .eds-input-group__label--filled {
484
+ top: 0.375rem;
485
+ font-size: 0.75rem;
486
+ line-height: 0.75rem;
487
+ height: 10px;
488
+ padding: 0;
568
489
  }
569
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
570
- width: 0.75rem;
571
- height: 0.75rem;
490
+ .eds-textarea__label .eds-input-group__label--filled {
491
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
492
+ background: var(--textarea-label-background);
493
+ width: calc(100% - 1rem - 1rem - 4px);
572
494
  }
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);
495
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
496
+ top: 0.5rem;
497
+ font-size: 0.875rem;
498
+ line-height: 1rem;
499
+ padding: 0;
575
500
  }
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 */
501
+
502
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
503
+ top: 0.375rem;
504
+ font-size: 0.75rem;
505
+ line-height: 0.75rem;
506
+ height: 10px;
507
+ padding: 0;
580
508
  }
581
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
582
- background-color: var(--components-form-basepanel-contrast-fill-hover);
509
+
510
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
511
+ top: 0.375rem;
512
+ font-size: 0.75rem;
513
+ line-height: 0.75rem;
514
+ height: 10px;
515
+ padding: 0;
583
516
  }
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);
517
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
518
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
519
+ background: var(--textarea-label-background);
520
+ width: calc(100% - 1rem - 1rem - 4px);
587
521
  }
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);
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);
591
526
  }
592
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
593
- border-color: transparent;
527
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
528
+ top: 0.5rem;
529
+ font-size: 0.875rem;
530
+ line-height: 1rem;
531
+ padding: 0;
594
532
  }
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);
533
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
534
+ top: 0.5rem;
535
+ font-size: 0.875rem;
536
+ line-height: 1rem;
537
+ padding: 0;
597
538
  }
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;
539
+ /* DO NOT CHANGE!*/
540
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
541
+ .eds-form-component--radio__container {
603
542
  display: flex;
604
- flex-direction: column;
605
- justify-content: flex-start;
606
- min-width: 20rem;
543
+ justify-content: center;
544
+ align-items: center;
607
545
  position: relative;
608
- padding: 1rem;
546
+ cursor: pointer;
547
+ height: 2rem;
548
+ width: -moz-fit-content;
549
+ width: fit-content;
609
550
  -webkit-user-select: none;
610
551
  -moz-user-select: none;
611
552
  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
553
  }
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);
554
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
555
+ background-color: var(--components-form-radio-standard-fill-hover);
620
556
  }
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 */
557
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
558
+ background-color: var(--components-form-radio-contrast-fill-hover);
625
559
  }
626
- .eds-contrast .eds-input-panel__container:hover {
627
- background-color: var(--components-form-basepanel-contrast-fill-hover);
560
+ .eds-form-component--radio__container input {
561
+ position: absolute;
562
+ opacity: 0;
563
+ cursor: pointer;
564
+ height: 0;
565
+ width: 0;
628
566
  }
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);
567
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
568
+ height: 0.625rem;
569
+ width: 0.625rem;
633
570
  }
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);
571
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
572
+ outline: 2px solid #181c56;
573
+ outline-color: var(--basecolors-stroke-focus-standard);
574
+ outline-offset: 0.125rem;
638
575
  }
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;
576
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
577
+ outline-color: var(--basecolors-stroke-focus-contrast);
644
578
  }
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);
579
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
580
+ position: relative;
581
+ height: 1.25rem;
582
+ width: 1.25rem;
583
+ margin-right: 1rem;
584
+ background-color: var(--components-form-radio-standard-fill-default);
585
+ border: 0.125rem solid var(--components-form-radio-standard-border);
586
+ border-radius: 50%;
587
+ display: flex;
588
+ align-items: center;
589
+ justify-content: center;
650
590
  }
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;
591
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
592
+ background-color: var(--components-form-radio-contrast-fill-default);
593
+ border-color: var(--components-form-radio-contrast-border);
657
594
  }
658
- .eds-input-panel--medium .eds-input-panel__title {
659
- font-size: 1rem;
660
- font-weight: 500;
595
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
596
+ background: var(--components-form-baseform-contrast-fill-disabled);
597
+ border-color: var(--components-form-baseform-contrast-text-disabled);
598
+ cursor: not-allowed;
661
599
  }
662
- .eds-input-panel--medium.eds-input-panel__container {
663
- padding-bottom: 1rem;
664
- min-height: 3.75rem;
600
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
601
+ border-color: var(--components-form-baseform-contrast-text-disabled);
665
602
  }
666
- .eds-input-panel--large.eds-input-panel__container {
667
- min-height: 6rem;
603
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
604
+ background: var(--components-form-baseform-contrast-fill-disabled);
605
+ border-color: var(--components-form-baseform-contrast-text-disabled);
668
606
  }
669
- .eds-input-panel--large .eds-input-panel__title {
670
- font-size: 1.25rem;
671
- font-weight: 500;
672
- line-height: 1.875rem;
607
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
608
+ color: var(--components-form-baseform-contrast-text-disabled);
673
609
  }
674
- .eds-input-panel__title-wrapper {
675
- display: flex;
676
- justify-content: space-between;
677
- align-items: center;
610
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
611
+ display: block;
612
+ width: 0;
613
+ height: 0;
614
+ border-radius: 50%;
615
+ background-color: var(--components-form-radio-standard-fill-selected);
616
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
678
617
  }
679
- .eds-input-panel__secondary-label-and-icon-wrapper {
680
- display: flex;
681
- justify-content: center;
682
- align-items: center;
683
- gap: 0.75rem;
618
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
619
+ background-color: var(--components-form-radio-contrast-icon);
684
620
  }
685
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
621
+ .eds-fieldset {
686
622
  margin: 0;
687
- }
688
- .eds-input-panel__additional-content {
689
- margin-top: 0.25rem;
690
- word-wrap: break-word;
623
+ padding: 0;
624
+ border: 0;
691
625
  }
692
626
  /* DO NOT CHANGE!*/
693
627
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -853,212 +787,278 @@ input:disabled + .eds-input-panel__container {
853
787
  }
854
788
  /* DO NOT CHANGE!*/
855
789
  /* 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%;
790
+ .eds-input-panel[focus-within] .eds-input-panel__container {
791
+ outline: 2px solid #181c56;
792
+ outline-color: var(--basecolors-stroke-focus-standard);
793
+ outline-offset: 0.125rem;
862
794
  }
863
- .eds-form-control__field-and-feedback-text--has-tooltip {
864
- padding-right: 2rem;
795
+ .eds-input-panel:focus-within .eds-input-panel__container {
796
+ outline: 2px solid #181c56;
797
+ outline-color: var(--basecolors-stroke-focus-standard);
798
+ outline-offset: 0.125rem;
865
799
  }
866
- .eds-form-control-wrapper {
867
- display: flex;
868
- align-items: center;
869
- 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;
800
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
801
+ outline-color: var(--basecolors-stroke-focus-contrast);
880
802
  }
881
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
882
- border-color: var(--components-form-baseform-standard-border-interactive);
803
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
804
+ outline-color: var(--basecolors-stroke-focus-contrast);
883
805
  }
884
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
885
- border-color: var(--components-form-baseform-standard-border-interactive);
806
+ .eds-input-panel > input {
807
+ position: absolute;
808
+ opacity: 0;
809
+ cursor: pointer;
810
+ height: 0;
811
+ width: 0;
886
812
  }
887
- .eds-contrast .eds-form-control-wrapper:hover {
888
- border-color: var(--components-form-baseform-contrast-border-interactive);
813
+ .eds-input-panel > input:checked + .eds-input-panel__container {
814
+ border-color: var(--components-form-basepanel-standard-border-selected);
815
+ background: var(--components-form-basepanel-standard-fill-selected);
889
816
  }
890
- .eds-form-control-wrapper[focus-within] {
891
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
817
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
818
+ border-color: var(--components-form-basepanel-contrast-border-selected);
819
+ background: var(--components-form-basepanel-contrast-fill-selected);
892
820
  }
893
- .eds-form-control-wrapper:focus-within {
894
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
821
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
822
+ width: 0.75rem;
823
+ height: 0.75rem;
895
824
  }
896
- .eds-contrast .eds-form-control-wrapper[focus-within] {
897
- outline: var(--components-form-baseform-contrast-border-interactive);
825
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
826
+ background-color: var(--components-form-radio-contrast-icon);
898
827
  }
899
- .eds-contrast .eds-form-control-wrapper:focus-within {
900
- outline: var(--components-form-baseform-contrast-border-interactive);
828
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
829
+ background-color: var(--components-form-basepanel-standard-fill-hover);
830
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
831
+ hover state styling with the inputPanel container */
901
832
  }
902
- .eds-form-control-wrapper ::-moz-placeholder {
903
- color: var(--components-form-baseform-standard-text-label);
833
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
834
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
904
835
  }
905
- .eds-form-control-wrapper ::placeholder {
906
- color: var(--components-form-baseform-standard-text-label);
836
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
837
+ background-color: var(--components-form-basepanel-standard-fill-hover);
838
+ border-color: var(--components-form-basepanel-standard-border-selected);
907
839
  }
908
- .eds-form-control-wrapper--disabled {
840
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
841
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
842
+ border-color: var(--components-form-basepanel-contrast-border-selected);
843
+ }
844
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
909
845
  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);
913
846
  }
914
- .eds-form-control-wrapper--disabled .eds-input-group__label {
915
- color: var(--components-form-baseform-standard-text-disabled);
847
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
848
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
916
849
  }
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);
850
+ .eds-input-panel__container {
851
+ background: var(--components-form-basepanel-standard-fill-default);
852
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
853
+ color: var(--components-form-basepanel-standard-text-accent);
854
+ border-radius: 0.25rem;
855
+ display: flex;
856
+ flex-direction: column;
857
+ justify-content: flex-start;
858
+ min-width: 20rem;
859
+ position: relative;
860
+ padding: 1rem;
861
+ -webkit-user-select: none;
862
+ -moz-user-select: none;
863
+ user-select: none;
864
+ width: -moz-fit-content;
865
+ width: fit-content;
866
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
921
867
  }
922
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
923
- color: var(--components-form-baseform-contrast-text-disabled);
868
+ .eds-contrast .eds-input-panel__container {
869
+ background-color: var(--components-form-basepanel-contrast-fill-default);
870
+ border-color: var(--components-form-basepanel-contrast-border-default);
871
+ color: var(--components-form-basepanel-contrast-text-accent);
872
+ }
873
+ .eds-input-panel__container:hover {
874
+ background-color: var(--components-form-basepanel-standard-fill-hover);
875
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
876
+ hover state styling with the inputPanel container */
877
+ }
878
+ .eds-contrast .eds-input-panel__container:hover {
879
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
880
+ }
881
+ .eds-input-panel__container:hover .eds-checkbox__icon,
882
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
883
+ background-color: var(--components-form-basepanel-standard-fill-hover);
884
+ border-color: var(--components-form-basepanel-standard-border-selected);
885
+ }
886
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
887
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
888
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
889
+ border-color: var(--components-form-basepanel-contrast-border-selected);
890
+ }
891
+ input:disabled + .eds-input-panel__container {
892
+ background: var(--components-form-basepanel-standard-fill-disabled);
893
+ border-color: var(--components-form-basepanel-standard-border-disabled);
894
+ color: var(--components-form-basepanel-standard-text-disabled);
895
+ cursor: not-allowed;
896
+ }
897
+ .eds-contrast input:disabled + .eds-input-panel__container {
898
+ background: var(--components-form-basepanel-contrast-fill-disabled);
899
+ border-style: dashed;
900
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
901
+ color: var(--components-form-basepanel-contrast-text-disabled);
902
+ }
903
+ .eds-input-panel__container .eds-checkbox__icon,
904
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
905
+ .eds-input-panel__container .eds-form-component--radio__radio {
906
+ width: 1.5rem;
907
+ height: 1.5rem;
908
+ margin-right: 0;
924
909
  }
925
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
926
- display: none;
910
+ .eds-input-panel--medium .eds-input-panel__title {
911
+ font-size: 1rem;
912
+ font-weight: 500;
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-input-panel--medium.eds-input-panel__container {
915
+ padding-bottom: 1rem;
916
+ min-height: 3.75rem;
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-input-panel--large.eds-input-panel__container {
919
+ min-height: 6rem;
939
920
  }
940
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
941
- color: var(--components-form-baseform-contrast-text-description);
921
+ .eds-input-panel--large .eds-input-panel__title {
922
+ font-size: 1.25rem;
923
+ font-weight: 500;
924
+ line-height: 1.875rem;
942
925
  }
943
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
944
- display: none;
926
+ .eds-input-panel__title-wrapper {
927
+ display: flex;
928
+ justify-content: space-between;
929
+ align-items: center;
945
930
  }
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;
931
+ .eds-input-panel__secondary-label-and-icon-wrapper {
932
+ display: flex;
933
+ justify-content: center;
934
+ align-items: center;
935
+ gap: 0.75rem;
951
936
  }
952
- .eds-form-control-wrapper--size-large {
953
- min-height: 4rem;
937
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
938
+ margin: 0;
954
939
  }
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;
940
+ .eds-input-panel__additional-content {
941
+ margin-top: 0.25rem;
942
+ word-wrap: break-word;
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;
@@ -1186,17 +1186,6 @@ input:disabled + .eds-input-panel__container {
1186
1186
  }
1187
1187
  /* DO NOT CHANGE!*/
1188
1188
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1189
- .eds-segmented-control {
1190
- margin-top: 0.25rem;
1191
- display: flex;
1192
- background: var(--components-form-segmentedcontrol-standard-background);
1193
- border-radius: 0.5rem;
1194
- }
1195
- .eds-contrast .eds-segmented-control {
1196
- background: var(--components-form-segmentedcontrol-contrast-background);
1197
- }
1198
- /* DO NOT CHANGE!*/
1199
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1200
1189
  /* DO NOT CHANGE!*/
1201
1190
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1202
1191
  /* DO NOT CHANGE!*/
@@ -1744,3 +1733,14 @@ input:disabled + .eds-input-panel__container {
1744
1733
  :root {
1745
1734
  --eds-form: 1;
1746
1735
  }
1736
+ /* DO NOT CHANGE!*/
1737
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1738
+ .eds-segmented-control {
1739
+ margin-top: 0.25rem;
1740
+ display: flex;
1741
+ background: var(--components-form-segmentedcontrol-standard-background);
1742
+ border-radius: 0.5rem;
1743
+ }
1744
+ .eds-contrast .eds-segmented-control {
1745
+ background: var(--components-form-segmentedcontrol-contrast-background);
1746
+ }