@entur/form 8.2.5 → 8.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +394 -394
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -71,11 +71,6 @@
71
71
  .eds-contrast .eds-feedback-text__icon--warning circle {
72
72
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
73
73
  }
74
- .eds-fieldset {
75
- margin: 0;
76
- padding: 0;
77
- border: 0;
78
- }
79
74
  /* DO NOT CHANGE!*/
80
75
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
81
76
  .eds-checkbox__container {
@@ -219,241 +214,218 @@
219
214
  stroke-dashoffset: 0;
220
215
  }
221
216
  }
217
+ .eds-fieldset {
218
+ margin: 0;
219
+ padding: 0;
220
+ border: 0;
221
+ }
222
222
  /* DO NOT CHANGE!*/
223
223
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
224
- .eds-input-group {
225
- color: inherit;
226
- display: block;
227
- position: relative;
228
- }
229
- .eds-input-group__label {
230
- color: var(--components-form-baseform-standard-text-label);
224
+ .eds-form-control__field-and-feedback-text {
231
225
  display: flex;
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;
226
+ flex-direction: column;
227
+ height: -moz-fit-content;
228
+ height: fit-content;
229
+ width: 100%;
243
230
  }
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;
231
+ .eds-form-control__field-and-feedback-text--has-tooltip {
232
+ padding-right: 2rem;
250
233
  }
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);
234
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
235
+ cursor: not-allowed;
255
236
  }
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;
237
+ .eds-form-control-wrapper {
238
+ display: flex;
239
+ align-items: center;
240
+ position: relative;
241
+ flex: 1;
242
+ min-height: 3rem;
243
+ padding-left: 1rem;
244
+ padding-right: 1rem;
245
+ background-color: var(--components-form-baseform-standard-fill-default);
246
+ border-radius: 0.25rem;
247
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
248
+ box-shadow: 0 0 0 transparent;
249
+ color: var(--components-form-baseform-standard-text-content);
250
+ transition: border-color 0.1s ease-in-out;
261
251
  }
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;
252
+ .eds-form-control-wrapper:hover {
253
+ border-color: var(--components-form-baseform-standard-border-interactive);
266
254
  }
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;
255
+ .eds-contrast .eds-form-control-wrapper:hover {
256
+ border-color: var(--components-form-baseform-contrast-border-interactive);
273
257
  }
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);
258
+ .eds-form-control-wrapper:focus-within {
259
+ border-color: var(--components-form-baseform-standard-border-interactive);
260
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
278
261
  }
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;
262
+ .eds-contrast .eds-form-control-wrapper:focus-within {
263
+ border-color: var(--components-form-baseform-contrast-border-interactive);
264
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
284
265
  }
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;
266
+ .eds-form-control-wrapper ::-moz-placeholder {
267
+ color: var(--components-form-baseform-standard-text-label);
292
268
  }
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);
269
+ .eds-form-control-wrapper ::placeholder {
270
+ color: var(--components-form-baseform-standard-text-label);
297
271
  }
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;
272
+ .eds-form-control-wrapper--disabled {
273
+ border-color: transparent;
274
+ background-color: var(--components-form-baseform-standard-fill-disabled);
275
+ pointer-events: none;
276
+ color: var(--components-form-baseform-standard-text-disabled);
303
277
  }
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;
278
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
279
+ color: var(--components-form-baseform-standard-text-disabled);
309
280
  }
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;
281
+ .eds-contrast .eds-form-control-wrapper--disabled {
282
+ border-color: transparent;
283
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
284
+ color: var(--components-form-baseform-contrast-text-disabled);
316
285
  }
317
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
318
- outline-color: var(--basecolors-stroke-focus-contrast);
286
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
287
+ color: var(--components-form-baseform-contrast-text-disabled);
319
288
  }
320
- .eds-input-panel > input {
321
- position: absolute;
322
- opacity: 0;
323
- cursor: pointer;
324
- height: 0;
325
- width: 0;
289
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
290
+ display: none;
326
291
  }
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);
292
+ .eds-form-control-wrapper--disabled:focus-within {
293
+ border-color: transparent;
294
+ outline: none;
330
295
  }
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);
296
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
297
+ border-color: transparent;
298
+ outline: none;
334
299
  }
335
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
336
- width: 0.75rem;
337
- height: 0.75rem;
300
+ .eds-form-control-wrapper--readonly {
301
+ border-color: transparent;
302
+ pointer-events: none;
303
+ cursor: default;
304
+ background: var(--components-form-baseform-standard-fill-readonly);
305
+ border: var(--components-form-baseform-standard-fill-readonly);
338
306
  }
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);
307
+ .eds-contrast .eds-form-control-wrapper--readonly {
308
+ background: var(--components-form-baseform-contrast-fill-readonly);
309
+ border: var(--components-form-baseform-contrast-fill-readonly);
310
+ color: var(--components-form-baseform-contrast-text-description);
341
311
  }
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 */
312
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
313
+ color: var(--components-form-baseform-contrast-text-description);
346
314
  }
347
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
348
- background-color: var(--components-form-basepanel-contrast-fill-hover);
315
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
316
+ color: var(--components-form-baseform-contrast-text-description);
349
317
  }
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);
318
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
319
+ display: none;
353
320
  }
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);
321
+ .eds-form-control-wrapper--size-medium .eds-form-control,
322
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
323
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
324
+ font-size: 1rem;
325
+ line-height: 1rem;
357
326
  }
358
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
359
- border-color: transparent;
327
+ .eds-form-control-wrapper--size-large {
328
+ min-height: 4rem;
360
329
  }
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);
330
+ .eds-form-control-wrapper--size-large .eds-form-control,
331
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
332
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
333
+ font-size: 1.5rem;
363
334
  }
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;
335
+ .eds-form-control-wrapper--success {
336
+ border-color: var(--components-form-baseform-standard-border-success);
381
337
  }
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);
338
+ .eds-form-control-wrapper--success:focus-within {
339
+ border-color: var(--components-form-baseform-standard-border-success);
340
+ outline-color: var(--components-form-baseform-standard-border-success);
386
341
  }
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 */
342
+ .eds-contrast .eds-form-control-wrapper--success {
343
+ border-color: var(--components-form-baseform-standard-border-success);
391
344
  }
392
- .eds-contrast .eds-input-panel__container:hover {
393
- background-color: var(--components-form-basepanel-contrast-fill-hover);
345
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
346
+ border-color: var(--components-form-baseform-contrast-border-success);
347
+ outline-color: var(--components-form-baseform-contrast-border-success);
394
348
  }
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);
349
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
350
+ border-color: var(--components-form-baseform-standard-border-negative);
399
351
  }
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);
352
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
353
+ border-color: var(--components-form-baseform-standard-border-negative);
354
+ outline-color: var(--components-form-baseform-standard-border-negative);
404
355
  }
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;
356
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
357
+ border-color: var(--components-form-baseform-contrast-border-negative);
410
358
  }
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);
359
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
360
+ border-color: var(--components-form-baseform-contrast-border-negative);
361
+ outline-color: var(--components-form-baseform-contrast-border-negative);
362
+ }
363
+ .eds-contrast .eds-form-control .eds-tooltip {
364
+ background: var(--components-tooltip-tooltip-standard-fill);
365
+ color: var(--components-tooltip-tooltip-standard-text);
366
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
416
367
  }
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;
368
+ .eds-form-control .eds-tooltip::after {
369
+ background: var(--components-tooltip-tooltip-standard-fill);
423
370
  }
424
- .eds-input-panel--medium .eds-input-panel__title {
371
+
372
+ .eds-form-control {
373
+ display: block;
374
+ -webkit-appearance: none;
375
+ -moz-appearance: none;
376
+ appearance: none;
377
+ width: 100%;
378
+ height: 100%;
379
+ padding: 20px 0rem 0.25rem;
380
+ font-family: inherit;
425
381
  font-size: 1rem;
426
- font-weight: 500;
382
+ line-height: 1rem;
383
+ border: 0;
384
+ color: var(--components-form-baseform-standard-text-content);
385
+ background-color: transparent;
427
386
  }
428
- .eds-input-panel--medium.eds-input-panel__container {
429
- padding-bottom: 1rem;
430
- min-height: 3.75rem;
387
+ .eds-form-control::-moz-placeholder {
388
+ opacity: 0;
389
+ -moz-transition: opacity 0.2s ease-in-out;
390
+ transition: opacity 0.2s ease-in-out;
431
391
  }
432
- .eds-input-panel--large.eds-input-panel__container {
433
- min-height: 6rem;
392
+ .eds-form-control::placeholder {
393
+ opacity: 0;
394
+ transition: opacity 0.2s ease-in-out;
434
395
  }
435
- .eds-input-panel--large .eds-input-panel__title {
436
- font-size: 1.25rem;
437
- font-weight: 500;
438
- line-height: 1.875rem;
396
+ .eds-form-control:focus {
397
+ outline: none;
439
398
  }
440
- .eds-input-panel__title-wrapper {
441
- display: flex;
442
- justify-content: space-between;
443
- align-items: center;
399
+ .eds-form-control:focus::-moz-placeholder {
400
+ opacity: 1;
444
401
  }
445
- .eds-input-panel__secondary-label-and-icon-wrapper {
402
+ .eds-form-control:focus::placeholder {
403
+ opacity: 1;
404
+ }
405
+ .eds-form-control__prepend, .eds-form-control__append {
406
+ position: relative;
407
+ line-height: inherit;
408
+ }
409
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
410
+ all: unset;
411
+ position: absolute;
446
412
  display: flex;
447
- justify-content: center;
448
413
  align-items: center;
449
- gap: 0.75rem;
414
+ justify-content: center;
415
+ height: 1.5rem;
416
+ width: 1.5rem;
417
+ right: -2rem;
418
+ border-radius: 100%;
419
+ color: var(--primary-text-color);
420
+ cursor: pointer;
450
421
  }
451
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
452
- margin: 0;
422
+ .eds-form-control__prepend {
423
+ margin-right: 0.75rem;
424
+ margin-left: 0;
453
425
  }
454
- .eds-input-panel__additional-content {
455
- margin-top: 0.25rem;
456
- word-wrap: break-word;
426
+ .eds-form-control__append {
427
+ margin-right: 0;
428
+ margin-left: 0.75rem;
457
429
  }
458
430
  /* DO NOT CHANGE!*/
459
431
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -658,211 +630,91 @@ input:disabled + .eds-input-panel__container {
658
630
  }
659
631
  /* DO NOT CHANGE!*/
660
632
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
661
- .eds-form-control__field-and-feedback-text {
662
- display: flex;
663
- flex-direction: column;
664
- height: -moz-fit-content;
665
- height: fit-content;
666
- width: 100%;
667
- }
668
- .eds-form-control__field-and-feedback-text--has-tooltip {
669
- padding-right: 2rem;
670
- }
671
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled) {
672
- cursor: not-allowed;
673
- }
674
- .eds-form-control-wrapper {
675
- display: flex;
676
- align-items: center;
633
+ .eds-input-group {
634
+ color: inherit;
635
+ display: block;
677
636
  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;
688
- }
689
- .eds-form-control-wrapper:hover {
690
- border-color: var(--components-form-baseform-standard-border-interactive);
691
- }
692
- .eds-contrast .eds-form-control-wrapper:hover {
693
- border-color: var(--components-form-baseform-contrast-border-interactive);
694
- }
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);
698
- }
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);
702
- }
703
- .eds-form-control-wrapper ::-moz-placeholder {
704
- color: var(--components-form-baseform-standard-text-label);
705
637
  }
706
- .eds-form-control-wrapper ::placeholder {
638
+ .eds-input-group__label {
707
639
  color: var(--components-form-baseform-standard-text-label);
708
- }
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);
714
- }
715
- .eds-form-control-wrapper--disabled .eds-input-group__label {
716
- color: var(--components-form-baseform-standard-text-disabled);
717
- }
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);
722
- }
723
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
724
- color: var(--components-form-baseform-contrast-text-disabled);
725
- }
726
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
727
- display: none;
728
- }
729
- .eds-form-control-wrapper--disabled:focus-within {
730
- border-color: transparent;
731
- outline: none;
732
- }
733
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
734
- border-color: transparent;
735
- outline: none;
736
- }
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);
743
- }
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);
748
- }
749
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
750
- color: var(--components-form-baseform-contrast-text-description);
751
- }
752
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
753
- color: var(--components-form-baseform-contrast-text-description);
754
- }
755
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
756
- display: none;
757
- }
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 {
640
+ display: flex;
761
641
  font-size: 1rem;
642
+ position: absolute;
762
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;
763
652
  }
764
- .eds-form-control-wrapper--size-large {
765
- min-height: 4rem;
766
- }
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;
771
- }
772
- .eds-form-control-wrapper--success {
773
- border-color: var(--components-form-baseform-standard-border-success);
774
- }
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);
778
- }
779
- .eds-contrast .eds-form-control-wrapper--success {
780
- border-color: var(--components-form-baseform-standard-border-success);
781
- }
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);
785
- }
786
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
787
- border-color: var(--components-form-baseform-standard-border-negative);
788
- }
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);
792
- }
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);
795
- }
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);
799
- }
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);
804
- }
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;
818
- font-size: 1rem;
819
- line-height: 1rem;
820
- border: 0;
821
- color: var(--components-form-baseform-standard-text-content);
822
- background-color: transparent;
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;
823
659
  }
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;
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);
828
664
  }
829
- .eds-form-control::placeholder {
830
- opacity: 0;
831
- transition: opacity 0.2s ease-in-out;
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;
832
670
  }
833
- .eds-form-control:focus {
834
- outline: none;
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;
835
675
  }
836
- .eds-form-control:focus::-moz-placeholder {
837
- opacity: 1;
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;
838
682
  }
839
- .eds-form-control:focus::placeholder {
840
- opacity: 1;
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);
841
687
  }
842
- .eds-form-control__prepend, .eds-form-control__append {
843
- position: relative;
844
- line-height: inherit;
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;
845
693
  }
846
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
847
- all: unset;
848
- position: absolute;
849
- display: flex;
850
- align-items: center;
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;
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;
858
701
  }
859
- .eds-form-control__prepend {
860
- margin-right: 0.75rem;
861
- margin-left: 0;
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);
862
706
  }
863
- .eds-form-control__append {
864
- margin-right: 0;
865
- margin-left: 0.75rem;
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;
712
+ }
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;
866
718
  }
867
719
  /* DO NOT CHANGE!*/
868
720
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1032,6 +884,154 @@ input:disabled + .eds-input-panel__container {
1032
884
  }
1033
885
  /* DO NOT CHANGE!*/
1034
886
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
887
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
888
+ outline: 2px solid #181c56;
889
+ outline-color: var(--basecolors-stroke-focus-standard);
890
+ outline-offset: 0.125rem;
891
+ }
892
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
893
+ outline-color: var(--basecolors-stroke-focus-contrast);
894
+ }
895
+ .eds-input-panel > input {
896
+ position: absolute;
897
+ opacity: 0;
898
+ cursor: pointer;
899
+ height: 0;
900
+ width: 0;
901
+ }
902
+ .eds-input-panel > input:checked + .eds-input-panel__container {
903
+ border-color: var(--components-form-basepanel-standard-border-selected);
904
+ background: var(--components-form-basepanel-standard-fill-selected);
905
+ }
906
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
907
+ border-color: var(--components-form-basepanel-contrast-border-selected);
908
+ background: var(--components-form-basepanel-contrast-fill-selected);
909
+ }
910
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
911
+ width: 0.75rem;
912
+ height: 0.75rem;
913
+ }
914
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
915
+ background-color: var(--components-form-radio-contrast-icon);
916
+ }
917
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
918
+ background-color: var(--components-form-basepanel-standard-fill-hover);
919
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
920
+ hover state styling with the inputPanel container */
921
+ }
922
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
923
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
924
+ }
925
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
926
+ background-color: var(--components-form-basepanel-standard-fill-hover);
927
+ border-color: var(--components-form-basepanel-standard-border-selected);
928
+ }
929
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
930
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
931
+ border-color: var(--components-form-basepanel-contrast-border-selected);
932
+ }
933
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
934
+ border-color: transparent;
935
+ }
936
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
937
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
938
+ }
939
+ .eds-input-panel__container {
940
+ background: var(--components-form-basepanel-standard-fill-default);
941
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
942
+ color: var(--components-form-basepanel-standard-text-accent);
943
+ border-radius: 0.25rem;
944
+ display: flex;
945
+ flex-direction: column;
946
+ justify-content: flex-start;
947
+ min-width: 20rem;
948
+ position: relative;
949
+ padding: 1rem;
950
+ -webkit-user-select: none;
951
+ -moz-user-select: none;
952
+ user-select: none;
953
+ width: -moz-fit-content;
954
+ width: fit-content;
955
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
956
+ }
957
+ .eds-contrast .eds-input-panel__container {
958
+ background-color: var(--components-form-basepanel-contrast-fill-default);
959
+ border-color: var(--components-form-basepanel-contrast-border-default);
960
+ color: var(--components-form-basepanel-contrast-text-accent);
961
+ }
962
+ .eds-input-panel__container:hover {
963
+ background-color: var(--components-form-basepanel-standard-fill-hover);
964
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
965
+ hover state styling with the inputPanel container */
966
+ }
967
+ .eds-contrast .eds-input-panel__container:hover {
968
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
969
+ }
970
+ .eds-input-panel__container:hover .eds-checkbox__icon,
971
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
972
+ background-color: var(--components-form-basepanel-standard-fill-hover);
973
+ border-color: var(--components-form-basepanel-standard-border-selected);
974
+ }
975
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
976
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
977
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
978
+ border-color: var(--components-form-basepanel-contrast-border-selected);
979
+ }
980
+ input:disabled + .eds-input-panel__container {
981
+ background: var(--components-form-basepanel-standard-fill-disabled);
982
+ border-color: var(--components-form-basepanel-standard-border-disabled);
983
+ color: var(--components-form-basepanel-standard-text-disabled);
984
+ cursor: not-allowed;
985
+ }
986
+ .eds-contrast input:disabled + .eds-input-panel__container {
987
+ background: var(--components-form-basepanel-contrast-fill-disabled);
988
+ border-style: dashed;
989
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
990
+ color: var(--components-form-basepanel-contrast-text-disabled);
991
+ }
992
+ .eds-input-panel__container .eds-checkbox__icon,
993
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
994
+ .eds-input-panel__container .eds-form-component--radio__radio {
995
+ width: 1.5rem;
996
+ height: 1.5rem;
997
+ margin-right: 0;
998
+ }
999
+ .eds-input-panel--medium .eds-input-panel__title {
1000
+ font-size: 1rem;
1001
+ font-weight: 500;
1002
+ }
1003
+ .eds-input-panel--medium.eds-input-panel__container {
1004
+ padding-bottom: 1rem;
1005
+ min-height: 3.75rem;
1006
+ }
1007
+ .eds-input-panel--large.eds-input-panel__container {
1008
+ min-height: 6rem;
1009
+ }
1010
+ .eds-input-panel--large .eds-input-panel__title {
1011
+ font-size: 1.25rem;
1012
+ font-weight: 500;
1013
+ line-height: 1.875rem;
1014
+ }
1015
+ .eds-input-panel__title-wrapper {
1016
+ display: flex;
1017
+ justify-content: space-between;
1018
+ align-items: center;
1019
+ }
1020
+ .eds-input-panel__secondary-label-and-icon-wrapper {
1021
+ display: flex;
1022
+ justify-content: center;
1023
+ align-items: center;
1024
+ gap: 0.75rem;
1025
+ }
1026
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1027
+ margin: 0;
1028
+ }
1029
+ .eds-input-panel__additional-content {
1030
+ margin-top: 0.25rem;
1031
+ word-wrap: break-word;
1032
+ }
1033
+ /* DO NOT CHANGE!*/
1034
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1035
1035
  .eds-textfield__clear-button {
1036
1036
  background: none;
1037
1037
  border: none;
@@ -1156,17 +1156,6 @@ input:disabled + .eds-input-panel__container {
1156
1156
  }
1157
1157
  /* DO NOT CHANGE!*/
1158
1158
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1159
- .eds-segmented-control {
1160
- margin-top: 0.25rem;
1161
- display: flex;
1162
- background: var(--components-form-segmentedcontrol-standard-background);
1163
- border-radius: 0.5rem;
1164
- }
1165
- .eds-contrast .eds-segmented-control {
1166
- background: var(--components-form-segmentedcontrol-contrast-background);
1167
- }
1168
- /* DO NOT CHANGE!*/
1169
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1170
1159
  /* DO NOT CHANGE!*/
1171
1160
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1172
1161
  /* DO NOT CHANGE!*/
@@ -1716,3 +1705,14 @@ input:disabled + .eds-input-panel__container {
1716
1705
  :root {
1717
1706
  --eds-form: 1;
1718
1707
  }
1708
+ /* DO NOT CHANGE!*/
1709
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1710
+ .eds-segmented-control {
1711
+ margin-top: 0.25rem;
1712
+ display: flex;
1713
+ background: var(--components-form-segmentedcontrol-standard-background);
1714
+ border-radius: 0.5rem;
1715
+ }
1716
+ .eds-contrast .eds-segmented-control {
1717
+ background: var(--components-form-segmentedcontrol-contrast-background);
1718
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.2.5",
3
+ "version": "8.2.7",
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.5",
31
- "@entur/icons": "^7.9.0",
30
+ "@entur/button": "^3.3.7",
31
+ "@entur/icons": "^7.11.0",
32
32
  "@entur/tokens": "^3.19.0",
33
- "@entur/tooltip": "^5.2.5",
34
- "@entur/typography": "^1.9.5",
33
+ "@entur/tooltip": "^5.2.7",
34
+ "@entur/typography": "^1.9.7",
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": "e59bee5bf5aa6ab864c96be6cf4979feab287c61"
41
+ "gitHead": "ccdbbec971e0336510c047873a1e63cc31aa850e"
42
42
  }