@entur/form 8.2.5-beta.0 → 8.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +424 -424
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,5 +1,83 @@
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. */
3
81
  .eds-checkbox__container {
4
82
  display: flex;
5
83
  align-items: center;
@@ -141,291 +219,241 @@
141
219
  stroke-dashoffset: 0;
142
220
  }
143
221
  }
144
- .eds-fieldset {
145
- margin: 0;
146
- padding: 0;
147
- border: 0;
148
- }
149
222
  /* DO NOT CHANGE!*/
150
223
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
151
- .eds-form-control__field-and-feedback-text {
152
- display: flex;
153
- flex-direction: column;
154
- height: -moz-fit-content;
155
- height: fit-content;
156
- width: 100%;
157
- }
158
- .eds-form-control__field-and-feedback-text--has-tooltip {
159
- padding-right: 2rem;
160
- }
161
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled) {
162
- cursor: not-allowed;
224
+ .eds-input-group {
225
+ color: inherit;
226
+ display: block;
227
+ position: relative;
163
228
  }
164
- .eds-form-control-wrapper {
229
+ .eds-input-group__label {
230
+ color: var(--components-form-baseform-standard-text-label);
165
231
  display: flex;
166
- align-items: center;
167
- position: relative;
168
- flex: 1;
169
- min-height: 3rem;
170
- padding-left: 1rem;
171
- padding-right: 1rem;
172
- background-color: var(--components-form-baseform-standard-fill-default);
173
- border-radius: 0.25rem;
174
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
175
- box-shadow: 0 0 0 transparent;
176
- color: var(--components-form-baseform-standard-text-content);
177
- transition: border-color 0.1s ease-in-out;
232
+ font-size: 1rem;
233
+ position: absolute;
234
+ line-height: 1rem;
235
+ height: 3rem;
236
+ padding-left: 0;
237
+ top: 1rem;
238
+ 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;
239
+ -webkit-user-select: none;
240
+ -moz-user-select: none;
241
+ user-select: none;
242
+ pointer-events: none;
178
243
  }
179
- .eds-form-control-wrapper:hover {
180
- border-color: var(--components-form-baseform-standard-border-interactive);
244
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
245
+ top: 0.375rem;
246
+ font-size: 0.75rem;
247
+ line-height: 0.75rem;
248
+ height: 10px;
249
+ padding: 0;
181
250
  }
182
- .eds-contrast .eds-form-control-wrapper:hover {
183
- border-color: var(--components-form-baseform-contrast-border-interactive);
251
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
252
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
253
+ background: var(--textarea-label-background);
254
+ width: calc(100% - 1rem - 1rem - 4px);
184
255
  }
185
- .eds-form-control-wrapper:focus-within {
186
- border-color: var(--components-form-baseform-standard-border-interactive);
187
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
256
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
257
+ top: 0.5rem;
258
+ font-size: 0.875rem;
259
+ line-height: 1rem;
260
+ padding: 0;
188
261
  }
189
- .eds-contrast .eds-form-control-wrapper:focus-within {
190
- border-color: var(--components-form-baseform-contrast-border-interactive);
191
- outline-color: var(--components-form-baseform-contrast-border-interactive);
262
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
263
+ top: 0.75rem;
264
+ font-size: 1.5rem;
265
+ line-height: 2.25rem;
192
266
  }
193
- .eds-form-control-wrapper ::-moz-placeholder {
194
- color: var(--components-form-baseform-standard-text-label);
267
+ .eds-input-group__label--filled {
268
+ top: 0.375rem;
269
+ font-size: 0.75rem;
270
+ line-height: 0.75rem;
271
+ height: 10px;
272
+ padding: 0;
195
273
  }
196
- .eds-form-control-wrapper ::placeholder {
197
- color: var(--components-form-baseform-standard-text-label);
274
+ .eds-textarea__label .eds-input-group__label--filled {
275
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
276
+ background: var(--textarea-label-background);
277
+ width: calc(100% - 1rem - 1rem - 4px);
198
278
  }
199
- .eds-form-control-wrapper--disabled {
200
- border-color: transparent;
201
- background-color: var(--components-form-baseform-standard-fill-disabled);
202
- pointer-events: none;
203
- color: var(--components-form-baseform-standard-text-disabled);
279
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
280
+ top: 0.5rem;
281
+ font-size: 0.875rem;
282
+ line-height: 1rem;
283
+ padding: 0;
204
284
  }
205
- .eds-form-control-wrapper--disabled .eds-input-group__label {
206
- color: var(--components-form-baseform-standard-text-disabled);
285
+
286
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
287
+ top: 0.375rem;
288
+ font-size: 0.75rem;
289
+ line-height: 0.75rem;
290
+ height: 10px;
291
+ padding: 0;
207
292
  }
208
- .eds-contrast .eds-form-control-wrapper--disabled {
209
- border-color: transparent;
210
- background-color: var(--components-form-baseform-contrast-fill-disabled);
211
- color: var(--components-form-baseform-contrast-text-disabled);
293
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
294
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
295
+ background: var(--textarea-label-background);
296
+ width: calc(100% - 1rem - 1rem - 4px);
212
297
  }
213
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
214
- color: var(--components-form-baseform-contrast-text-disabled);
298
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
299
+ top: 0.5rem;
300
+ font-size: 0.875rem;
301
+ line-height: 1rem;
302
+ padding: 0;
215
303
  }
216
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
217
- display: none;
304
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
305
+ top: 1rem;
306
+ font-size: 1rem;
307
+ height: 3rem;
308
+ line-height: 1rem;
218
309
  }
219
- .eds-form-control-wrapper--disabled:focus-within {
220
- border-color: transparent;
221
- outline: none;
310
+ /* DO NOT CHANGE!*/
311
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
312
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
313
+ outline: 2px solid #181c56;
314
+ outline-color: var(--basecolors-stroke-focus-standard);
315
+ outline-offset: 0.125rem;
222
316
  }
223
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
224
- border-color: transparent;
225
- outline: none;
317
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
318
+ outline-color: var(--basecolors-stroke-focus-contrast);
226
319
  }
227
- .eds-form-control-wrapper--readonly {
228
- border-color: transparent;
229
- pointer-events: none;
230
- cursor: default;
231
- background: var(--components-form-baseform-standard-fill-readonly);
232
- border: var(--components-form-baseform-standard-fill-readonly);
320
+ .eds-input-panel > input {
321
+ position: absolute;
322
+ opacity: 0;
323
+ cursor: pointer;
324
+ height: 0;
325
+ width: 0;
233
326
  }
234
- .eds-contrast .eds-form-control-wrapper--readonly {
235
- background: var(--components-form-baseform-contrast-fill-readonly);
236
- border: var(--components-form-baseform-contrast-fill-readonly);
237
- color: var(--components-form-baseform-contrast-text-description);
327
+ .eds-input-panel > input:checked + .eds-input-panel__container {
328
+ border-color: var(--components-form-basepanel-standard-border-selected);
329
+ background: var(--components-form-basepanel-standard-fill-selected);
238
330
  }
239
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
240
- color: var(--components-form-baseform-contrast-text-description);
331
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
332
+ border-color: var(--components-form-basepanel-contrast-border-selected);
333
+ background: var(--components-form-basepanel-contrast-fill-selected);
241
334
  }
242
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
243
- color: var(--components-form-baseform-contrast-text-description);
335
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
336
+ width: 0.75rem;
337
+ height: 0.75rem;
244
338
  }
245
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
246
- display: none;
339
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
340
+ background-color: var(--components-form-radio-contrast-icon);
247
341
  }
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;
252
- line-height: 1rem;
253
- }
254
- .eds-form-control-wrapper--size-large {
255
- min-height: 4rem;
342
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
343
+ background-color: var(--components-form-basepanel-standard-fill-hover);
344
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
345
+ hover state styling with the inputPanel container */
256
346
  }
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;
347
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
348
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
261
349
  }
262
- .eds-form-control-wrapper--success {
263
- border-color: var(--components-form-baseform-standard-border-success);
350
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
351
+ background-color: var(--components-form-basepanel-standard-fill-hover);
352
+ border-color: var(--components-form-basepanel-standard-border-selected);
264
353
  }
265
- .eds-form-control-wrapper--success:focus-within {
266
- border-color: var(--components-form-baseform-standard-border-success);
267
- outline-color: var(--components-form-baseform-standard-border-success);
354
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
355
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
356
+ border-color: var(--components-form-basepanel-contrast-border-selected);
268
357
  }
269
- .eds-contrast .eds-form-control-wrapper--success {
270
- border-color: var(--components-form-baseform-standard-border-success);
358
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
359
+ border-color: transparent;
271
360
  }
272
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
273
- border-color: var(--components-form-baseform-contrast-border-success);
274
- outline-color: var(--components-form-baseform-contrast-border-success);
361
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
362
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
275
363
  }
276
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
277
- border-color: var(--components-form-baseform-standard-border-negative);
364
+ .eds-input-panel__container {
365
+ background: var(--components-form-basepanel-standard-fill-default);
366
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
367
+ color: var(--components-form-basepanel-standard-text-accent);
368
+ border-radius: 0.25rem;
369
+ display: flex;
370
+ flex-direction: column;
371
+ justify-content: flex-start;
372
+ min-width: 20rem;
373
+ position: relative;
374
+ padding: 1rem;
375
+ -webkit-user-select: none;
376
+ -moz-user-select: none;
377
+ user-select: none;
378
+ width: -moz-fit-content;
379
+ width: fit-content;
380
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
278
381
  }
279
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
280
- border-color: var(--components-form-baseform-standard-border-negative);
281
- outline-color: var(--components-form-baseform-standard-border-negative);
382
+ .eds-contrast .eds-input-panel__container {
383
+ background-color: var(--components-form-basepanel-contrast-fill-default);
384
+ border-color: var(--components-form-basepanel-contrast-border-default);
385
+ color: var(--components-form-basepanel-contrast-text-accent);
282
386
  }
283
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
284
- border-color: var(--components-form-baseform-contrast-border-negative);
387
+ .eds-input-panel__container:hover {
388
+ background-color: var(--components-form-basepanel-standard-fill-hover);
389
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
390
+ hover state styling with the inputPanel container */
285
391
  }
286
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
287
- border-color: var(--components-form-baseform-contrast-border-negative);
288
- outline-color: var(--components-form-baseform-contrast-border-negative);
392
+ .eds-contrast .eds-input-panel__container:hover {
393
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
289
394
  }
290
- .eds-contrast .eds-form-control .eds-tooltip {
291
- background: var(--components-tooltip-tooltip-standard-fill);
292
- color: var(--components-tooltip-tooltip-standard-text);
293
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
395
+ .eds-input-panel__container:hover .eds-checkbox__icon,
396
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
397
+ background-color: var(--components-form-basepanel-standard-fill-hover);
398
+ border-color: var(--components-form-basepanel-standard-border-selected);
294
399
  }
295
- .eds-form-control .eds-tooltip::after {
296
- background: var(--components-tooltip-tooltip-standard-fill);
400
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
401
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
402
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
403
+ border-color: var(--components-form-basepanel-contrast-border-selected);
297
404
  }
298
-
299
- .eds-form-control {
300
- display: block;
301
- -webkit-appearance: none;
302
- -moz-appearance: none;
303
- appearance: none;
304
- width: 100%;
305
- height: 100%;
306
- padding: 20px 0rem 0.25rem;
307
- font-family: inherit;
308
- font-size: 1rem;
309
- line-height: 1rem;
310
- border: 0;
311
- color: var(--components-form-baseform-standard-text-content);
312
- background-color: transparent;
405
+ input:disabled + .eds-input-panel__container {
406
+ background: var(--components-form-basepanel-standard-fill-disabled);
407
+ border-color: var(--components-form-basepanel-standard-border-disabled);
408
+ color: var(--components-form-basepanel-standard-text-disabled);
409
+ cursor: not-allowed;
313
410
  }
314
- .eds-form-control::-moz-placeholder {
315
- opacity: 0;
316
- -moz-transition: opacity 0.2s ease-in-out;
317
- transition: opacity 0.2s ease-in-out;
411
+ .eds-contrast input:disabled + .eds-input-panel__container {
412
+ background: var(--components-form-basepanel-contrast-fill-disabled);
413
+ border-style: dashed;
414
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
415
+ color: var(--components-form-basepanel-contrast-text-disabled);
318
416
  }
319
- .eds-form-control::placeholder {
320
- opacity: 0;
321
- transition: opacity 0.2s ease-in-out;
417
+ .eds-input-panel__container .eds-checkbox__icon,
418
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
419
+ .eds-input-panel__container .eds-form-component--radio__radio {
420
+ width: 1.5rem;
421
+ height: 1.5rem;
422
+ margin-right: 0;
322
423
  }
323
- .eds-form-control:focus {
324
- outline: none;
424
+ .eds-input-panel--medium .eds-input-panel__title {
425
+ font-size: 1rem;
426
+ font-weight: 500;
325
427
  }
326
- .eds-form-control:focus::-moz-placeholder {
327
- opacity: 1;
428
+ .eds-input-panel--medium.eds-input-panel__container {
429
+ padding-bottom: 1rem;
430
+ min-height: 3.75rem;
328
431
  }
329
- .eds-form-control:focus::placeholder {
330
- opacity: 1;
432
+ .eds-input-panel--large.eds-input-panel__container {
433
+ min-height: 6rem;
331
434
  }
332
- .eds-form-control__prepend, .eds-form-control__append {
333
- position: relative;
334
- line-height: inherit;
435
+ .eds-input-panel--large .eds-input-panel__title {
436
+ font-size: 1.25rem;
437
+ font-weight: 500;
438
+ line-height: 1.875rem;
335
439
  }
336
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
337
- all: unset;
338
- position: absolute;
440
+ .eds-input-panel__title-wrapper {
339
441
  display: flex;
442
+ justify-content: space-between;
340
443
  align-items: center;
341
- justify-content: center;
342
- height: 1.5rem;
343
- width: 1.5rem;
344
- right: -2rem;
345
- border-radius: 100%;
346
- color: var(--primary-text-color);
347
- cursor: pointer;
348
444
  }
349
- .eds-form-control__prepend {
350
- margin-right: 0.75rem;
351
- margin-left: 0;
352
- }
353
- .eds-form-control__append {
354
- margin-right: 0;
355
- margin-left: 0.75rem;
356
- }
357
- /* DO NOT CHANGE!*/
358
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
- .eds-feedback-text {
445
+ .eds-input-panel__secondary-label-and-icon-wrapper {
360
446
  display: flex;
447
+ justify-content: center;
361
448
  align-items: center;
362
- margin-top: 0.25rem;
363
- }
364
- .eds-feedback-text--info, .eds-feedback-text--information {
365
- padding-left: calc(1rem + 0.125rem);
366
- }
367
- .eds-feedback-text__text {
368
- color: var(--components-form-feedbacktext-information-standard-text);
369
- }
370
- .eds-contrast .eds-feedback-text__text {
371
- color: var(--components-form-feedbacktext-information-contrast-text);
372
- }
373
-
374
- .eds-feedback-text__icon {
375
- font-size: 1.5rem;
376
- min-height: 1.5rem;
377
- min-width: 1.5rem;
378
- padding-right: 0.5rem;
379
- position: relative;
380
- top: -0.1rem;
381
- }
382
- .eds-feedback-text__icon--success {
383
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
384
- }
385
- .eds-feedback-text__icon--success circle {
386
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
387
- }
388
- .eds-contrast .eds-feedback-text__icon--success {
389
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
390
- }
391
- .eds-contrast .eds-feedback-text__icon--success circle {
392
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
393
- }
394
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
395
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
396
- }
397
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
398
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
399
- }
400
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
401
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
402
- }
403
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
404
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
405
- }
406
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
407
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
408
- }
409
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
410
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
411
- }
412
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
413
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
414
- }
415
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
416
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
417
- }
418
- .eds-feedback-text__icon--warning {
419
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
420
- }
421
- .eds-feedback-text__icon--warning .svg-exclamation {
422
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
449
+ gap: 0.75rem;
423
450
  }
424
- .eds-contrast .eds-feedback-text__icon--warning {
425
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
451
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
452
+ margin: 0;
426
453
  }
427
- .eds-contrast .eds-feedback-text__icon--warning circle {
428
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
454
+ .eds-input-panel__additional-content {
455
+ margin-top: 0.25rem;
456
+ word-wrap: break-word;
429
457
  }
430
458
  /* DO NOT CHANGE!*/
431
459
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -630,239 +658,211 @@
630
658
  }
631
659
  /* DO NOT CHANGE!*/
632
660
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
633
- .eds-input-group {
634
- color: inherit;
635
- display: block;
636
- position: relative;
637
- }
638
- .eds-input-group__label {
639
- color: var(--components-form-baseform-standard-text-label);
661
+ .eds-form-control__field-and-feedback-text {
640
662
  display: flex;
641
- font-size: 1rem;
642
- position: absolute;
643
- line-height: 1rem;
644
- height: 3rem;
645
- padding-left: 0;
646
- top: 1rem;
647
- 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;
648
- -webkit-user-select: none;
649
- -moz-user-select: none;
650
- user-select: none;
651
- pointer-events: none;
663
+ flex-direction: column;
664
+ height: -moz-fit-content;
665
+ height: fit-content;
666
+ width: 100%;
652
667
  }
653
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
654
- top: 0.375rem;
655
- font-size: 0.75rem;
656
- line-height: 0.75rem;
657
- height: 10px;
658
- padding: 0;
668
+ .eds-form-control__field-and-feedback-text--has-tooltip {
669
+ padding-right: 2rem;
659
670
  }
660
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
661
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
662
- background: var(--textarea-label-background);
663
- width: calc(100% - 1rem - 1rem - 4px);
671
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled) {
672
+ cursor: not-allowed;
664
673
  }
665
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
666
- top: 0.5rem;
667
- font-size: 0.875rem;
668
- line-height: 1rem;
669
- padding: 0;
674
+ .eds-form-control-wrapper {
675
+ display: flex;
676
+ align-items: center;
677
+ position: relative;
678
+ flex: 1;
679
+ min-height: 3rem;
680
+ padding-left: 1rem;
681
+ padding-right: 1rem;
682
+ background-color: var(--components-form-baseform-standard-fill-default);
683
+ border-radius: 0.25rem;
684
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
685
+ box-shadow: 0 0 0 transparent;
686
+ color: var(--components-form-baseform-standard-text-content);
687
+ transition: border-color 0.1s ease-in-out;
670
688
  }
671
- .eds-form-control-wrapper--size-large .eds-input-group__label {
672
- top: 0.75rem;
673
- font-size: 1.5rem;
674
- line-height: 2.25rem;
689
+ .eds-form-control-wrapper:hover {
690
+ border-color: var(--components-form-baseform-standard-border-interactive);
675
691
  }
676
- .eds-input-group__label--filled {
677
- top: 0.375rem;
678
- font-size: 0.75rem;
679
- line-height: 0.75rem;
680
- height: 10px;
681
- padding: 0;
692
+ .eds-contrast .eds-form-control-wrapper:hover {
693
+ border-color: var(--components-form-baseform-contrast-border-interactive);
682
694
  }
683
- .eds-textarea__label .eds-input-group__label--filled {
684
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
685
- background: var(--textarea-label-background);
686
- width: calc(100% - 1rem - 1rem - 4px);
695
+ .eds-form-control-wrapper:focus-within {
696
+ border-color: var(--components-form-baseform-standard-border-interactive);
697
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
687
698
  }
688
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
689
- top: 0.5rem;
690
- font-size: 0.875rem;
691
- line-height: 1rem;
692
- padding: 0;
699
+ .eds-contrast .eds-form-control-wrapper:focus-within {
700
+ border-color: var(--components-form-baseform-contrast-border-interactive);
701
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
693
702
  }
694
-
695
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
696
- top: 0.375rem;
697
- font-size: 0.75rem;
698
- line-height: 0.75rem;
699
- height: 10px;
700
- padding: 0;
703
+ .eds-form-control-wrapper ::-moz-placeholder {
704
+ color: var(--components-form-baseform-standard-text-label);
701
705
  }
702
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
703
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
704
- background: var(--textarea-label-background);
705
- width: calc(100% - 1rem - 1rem - 4px);
706
+ .eds-form-control-wrapper ::placeholder {
707
+ color: var(--components-form-baseform-standard-text-label);
706
708
  }
707
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
708
- top: 0.5rem;
709
- font-size: 0.875rem;
710
- line-height: 1rem;
711
- padding: 0;
709
+ .eds-form-control-wrapper--disabled {
710
+ border-color: transparent;
711
+ background-color: var(--components-form-baseform-standard-fill-disabled);
712
+ pointer-events: none;
713
+ color: var(--components-form-baseform-standard-text-disabled);
712
714
  }
713
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
714
- top: 1rem;
715
- font-size: 1rem;
716
- height: 3rem;
717
- line-height: 1rem;
715
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
716
+ color: var(--components-form-baseform-standard-text-disabled);
718
717
  }
719
- /* DO NOT CHANGE!*/
720
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
721
- .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
722
- outline: 2px solid #181c56;
723
- outline-color: var(--basecolors-stroke-focus-standard);
724
- outline-offset: 0.125rem;
718
+ .eds-contrast .eds-form-control-wrapper--disabled {
719
+ border-color: transparent;
720
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
721
+ color: var(--components-form-baseform-contrast-text-disabled);
725
722
  }
726
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
727
- outline-color: var(--basecolors-stroke-focus-contrast);
723
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
724
+ color: var(--components-form-baseform-contrast-text-disabled);
728
725
  }
729
- .eds-input-panel > input {
730
- position: absolute;
731
- opacity: 0;
732
- cursor: pointer;
733
- height: 0;
734
- width: 0;
726
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
727
+ display: none;
735
728
  }
736
- .eds-input-panel > input:checked + .eds-input-panel__container {
737
- border-color: var(--components-form-basepanel-standard-border-selected);
738
- background: var(--components-form-basepanel-standard-fill-selected);
729
+ .eds-form-control-wrapper--disabled:focus-within {
730
+ border-color: transparent;
731
+ outline: none;
739
732
  }
740
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
741
- border-color: var(--components-form-basepanel-contrast-border-selected);
742
- background: var(--components-form-basepanel-contrast-fill-selected);
733
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
734
+ border-color: transparent;
735
+ outline: none;
743
736
  }
744
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
745
- width: 0.75rem;
746
- height: 0.75rem;
737
+ .eds-form-control-wrapper--readonly {
738
+ border-color: transparent;
739
+ pointer-events: none;
740
+ cursor: default;
741
+ background: var(--components-form-baseform-standard-fill-readonly);
742
+ border: var(--components-form-baseform-standard-fill-readonly);
747
743
  }
748
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
749
- background-color: var(--components-form-radio-contrast-icon);
744
+ .eds-contrast .eds-form-control-wrapper--readonly {
745
+ background: var(--components-form-baseform-contrast-fill-readonly);
746
+ border: var(--components-form-baseform-contrast-fill-readonly);
747
+ color: var(--components-form-baseform-contrast-text-description);
750
748
  }
751
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
752
- background-color: var(--components-form-basepanel-standard-fill-hover);
753
- /* The following styling is needed to sync the inner checkbox/radiobutton's
754
- hover state styling with the inputPanel container */
749
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
750
+ color: var(--components-form-baseform-contrast-text-description);
755
751
  }
756
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
757
- background-color: var(--components-form-basepanel-contrast-fill-hover);
752
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
753
+ color: var(--components-form-baseform-contrast-text-description);
758
754
  }
759
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
760
- background-color: var(--components-form-basepanel-standard-fill-hover);
761
- border-color: var(--components-form-basepanel-standard-border-selected);
755
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
756
+ display: none;
762
757
  }
763
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
764
- background-color: var(--components-form-basepanel-contrast-fill-hover);
765
- border-color: var(--components-form-basepanel-contrast-border-selected);
758
+ .eds-form-control-wrapper--size-medium .eds-form-control,
759
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
760
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
761
+ font-size: 1rem;
762
+ line-height: 1rem;
766
763
  }
767
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
768
- border-color: transparent;
764
+ .eds-form-control-wrapper--size-large {
765
+ min-height: 4rem;
769
766
  }
770
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
771
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
767
+ .eds-form-control-wrapper--size-large .eds-form-control,
768
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
769
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
770
+ font-size: 1.5rem;
772
771
  }
773
- .eds-input-panel__container {
774
- background: var(--components-form-basepanel-standard-fill-default);
775
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
776
- color: var(--components-form-basepanel-standard-text-accent);
777
- border-radius: 0.25rem;
778
- display: flex;
779
- flex-direction: column;
780
- justify-content: flex-start;
781
- min-width: 20rem;
782
- position: relative;
783
- padding: 1rem;
784
- -webkit-user-select: none;
785
- -moz-user-select: none;
786
- user-select: none;
787
- width: -moz-fit-content;
788
- width: fit-content;
789
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
772
+ .eds-form-control-wrapper--success {
773
+ border-color: var(--components-form-baseform-standard-border-success);
790
774
  }
791
- .eds-contrast .eds-input-panel__container {
792
- background-color: var(--components-form-basepanel-contrast-fill-default);
793
- border-color: var(--components-form-basepanel-contrast-border-default);
794
- color: var(--components-form-basepanel-contrast-text-accent);
775
+ .eds-form-control-wrapper--success:focus-within {
776
+ border-color: var(--components-form-baseform-standard-border-success);
777
+ outline-color: var(--components-form-baseform-standard-border-success);
795
778
  }
796
- .eds-input-panel__container:hover {
797
- background-color: var(--components-form-basepanel-standard-fill-hover);
798
- /* The following styling is needed to sync the inner checkbox/radiobutton's
799
- hover state styling with the inputPanel container */
779
+ .eds-contrast .eds-form-control-wrapper--success {
780
+ border-color: var(--components-form-baseform-standard-border-success);
800
781
  }
801
- .eds-contrast .eds-input-panel__container:hover {
802
- background-color: var(--components-form-basepanel-contrast-fill-hover);
782
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
783
+ border-color: var(--components-form-baseform-contrast-border-success);
784
+ outline-color: var(--components-form-baseform-contrast-border-success);
803
785
  }
804
- .eds-input-panel__container:hover .eds-checkbox__icon,
805
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
806
- background-color: var(--components-form-basepanel-standard-fill-hover);
807
- border-color: var(--components-form-basepanel-standard-border-selected);
786
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
787
+ border-color: var(--components-form-baseform-standard-border-negative);
808
788
  }
809
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
810
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
811
- background-color: var(--components-form-basepanel-contrast-fill-hover);
812
- border-color: var(--components-form-basepanel-contrast-border-selected);
789
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
790
+ border-color: var(--components-form-baseform-standard-border-negative);
791
+ outline-color: var(--components-form-baseform-standard-border-negative);
813
792
  }
814
- input:disabled + .eds-input-panel__container {
815
- background: var(--components-form-basepanel-standard-fill-disabled);
816
- border-color: var(--components-form-basepanel-standard-border-disabled);
817
- color: var(--components-form-basepanel-standard-text-disabled);
818
- cursor: not-allowed;
793
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
794
+ border-color: var(--components-form-baseform-contrast-border-negative);
819
795
  }
820
- .eds-contrast input:disabled + .eds-input-panel__container {
821
- background: var(--components-form-basepanel-contrast-fill-disabled);
822
- border-style: dashed;
823
- border-color: var(--components-form-basepanel-contrast-border-disabled);
824
- color: var(--components-form-basepanel-contrast-text-disabled);
796
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
797
+ border-color: var(--components-form-baseform-contrast-border-negative);
798
+ outline-color: var(--components-form-baseform-contrast-border-negative);
825
799
  }
826
- .eds-input-panel__container .eds-checkbox__icon,
827
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
828
- .eds-input-panel__container .eds-form-component--radio__radio {
829
- width: 1.5rem;
830
- height: 1.5rem;
831
- margin-right: 0;
800
+ .eds-contrast .eds-form-control .eds-tooltip {
801
+ background: var(--components-tooltip-tooltip-standard-fill);
802
+ color: var(--components-tooltip-tooltip-standard-text);
803
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
832
804
  }
833
- .eds-input-panel--medium .eds-input-panel__title {
805
+ .eds-form-control .eds-tooltip::after {
806
+ background: var(--components-tooltip-tooltip-standard-fill);
807
+ }
808
+
809
+ .eds-form-control {
810
+ display: block;
811
+ -webkit-appearance: none;
812
+ -moz-appearance: none;
813
+ appearance: none;
814
+ width: 100%;
815
+ height: 100%;
816
+ padding: 20px 0rem 0.25rem;
817
+ font-family: inherit;
834
818
  font-size: 1rem;
835
- font-weight: 500;
819
+ line-height: 1rem;
820
+ border: 0;
821
+ color: var(--components-form-baseform-standard-text-content);
822
+ background-color: transparent;
836
823
  }
837
- .eds-input-panel--medium.eds-input-panel__container {
838
- padding-bottom: 1rem;
839
- min-height: 3.75rem;
824
+ .eds-form-control::-moz-placeholder {
825
+ opacity: 0;
826
+ -moz-transition: opacity 0.2s ease-in-out;
827
+ transition: opacity 0.2s ease-in-out;
840
828
  }
841
- .eds-input-panel--large.eds-input-panel__container {
842
- min-height: 6rem;
829
+ .eds-form-control::placeholder {
830
+ opacity: 0;
831
+ transition: opacity 0.2s ease-in-out;
843
832
  }
844
- .eds-input-panel--large .eds-input-panel__title {
845
- font-size: 1.25rem;
846
- font-weight: 500;
847
- line-height: 1.875rem;
833
+ .eds-form-control:focus {
834
+ outline: none;
848
835
  }
849
- .eds-input-panel__title-wrapper {
850
- display: flex;
851
- justify-content: space-between;
852
- align-items: center;
836
+ .eds-form-control:focus::-moz-placeholder {
837
+ opacity: 1;
853
838
  }
854
- .eds-input-panel__secondary-label-and-icon-wrapper {
839
+ .eds-form-control:focus::placeholder {
840
+ opacity: 1;
841
+ }
842
+ .eds-form-control__prepend, .eds-form-control__append {
843
+ position: relative;
844
+ line-height: inherit;
845
+ }
846
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
847
+ all: unset;
848
+ position: absolute;
855
849
  display: flex;
856
- justify-content: center;
857
850
  align-items: center;
858
- gap: 0.75rem;
851
+ justify-content: center;
852
+ height: 1.5rem;
853
+ width: 1.5rem;
854
+ right: -2rem;
855
+ border-radius: 100%;
856
+ color: var(--primary-text-color);
857
+ cursor: pointer;
859
858
  }
860
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
861
- margin: 0;
859
+ .eds-form-control__prepend {
860
+ margin-right: 0.75rem;
861
+ margin-left: 0;
862
862
  }
863
- .eds-input-panel__additional-content {
864
- margin-top: 0.25rem;
865
- word-wrap: break-word;
863
+ .eds-form-control__append {
864
+ margin-right: 0;
865
+ margin-left: 0.75rem;
866
866
  }
867
867
  /* DO NOT CHANGE!*/
868
868
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.2.5-beta.0",
3
+ "version": "8.2.5",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.4",
31
- "@entur/icons": "^7.8.0",
30
+ "@entur/button": "^3.3.5",
31
+ "@entur/icons": "^7.9.0",
32
32
  "@entur/tokens": "^3.19.0",
33
- "@entur/tooltip": "^5.2.4",
34
- "@entur/typography": "^1.9.4",
33
+ "@entur/tooltip": "^5.2.5",
34
+ "@entur/typography": "^1.9.5",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "1437e501a9a5ad8c806c7c1cccc6e399765c0638"
41
+ "gitHead": "e59bee5bf5aa6ab864c96be6cf4979feab287c61"
42
42
  }