@transferwise/components 0.0.0-experimental-2b7bcad → 0.0.0-experimental-66feb7b

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 (10) hide show
  1. package/build/main.css +19 -52
  2. package/build/styles/listItem/ListItem.css +19 -52
  3. package/build/styles/listItem/ListItem.grid.css +3 -3
  4. package/build/styles/main.css +19 -52
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +19 -52
  7. package/src/listItem/ListItem.grid.css +3 -3
  8. package/src/listItem/ListItem.grid.less +3 -3
  9. package/src/listItem/ListItem.less +23 -74
  10. package/src/main.css +19 -52
package/build/main.css CHANGED
@@ -2644,7 +2644,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
2647
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
2648
2648
  }
2649
2649
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2650
2650
  grid-template-columns: auto 1fr auto;
@@ -2654,7 +2654,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2654
2654
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2655
2655
  grid-template-columns: auto 1fr auto;
2656
2656
  grid-template-rows: auto auto;
2657
- grid-template-areas: "media body control" "media prompt prompt";
2657
+ grid-template-areas: "media body control" ". prompt prompt";
2658
2658
  }
2659
2659
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2660
2660
  grid-template-columns: auto 1fr auto;
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 297px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3003
3003
  background-color: #ffffff;
3004
3004
  background-color: var(--color-background-screen);
3005
3005
  position: relative;
3006
- padding: 12px 0;
3007
- padding: var(--size-12) 0;
3006
+ padding: 12px;
3007
+ padding: var(--size-12);
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3038
3038
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3039
3039
  outline: none;
3040
3040
  }
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
+ outline-offset: var(--ring-outline-offset);
3045
+ outline-offset: -1px;
3046
+ }
3041
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3042
3048
  --ring-outline-offset: 0;
3043
3049
  }
@@ -3056,57 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3056
3062
  position: absolute;
3057
3063
  inset: 0;
3058
3064
  }
3059
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
3060
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
3061
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3062
- outline-offset: var(--ring-outline-offset);
3063
- }
3064
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
3065
- background-color: var(--color-background-screen-hover);
3066
- }
3067
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
3068
- background-color: var(--color-background-screen-active);
3069
- }
3070
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3071
- background-color: transparent;
3072
- background-color: initial;
3073
- }
3074
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
3075
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
3076
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3077
- outline-offset: var(--ring-outline-offset);
3078
- content: '';
3079
- position: absolute;
3080
- inset: 0 -8px;
3081
- border-radius: 16px;
3082
- border-radius: var(--radius-medium);
3083
- }
3084
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
3085
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3086
- content: '';
3087
- position: absolute;
3088
- inset: 0 -8px;
3089
- border-radius: 16px;
3090
- border-radius: var(--radius-medium);
3091
- }
3092
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3093
3066
  background-color: var(--color-background-screen-hover);
3094
3067
  }
3095
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3096
- background-color: var(--color-background-screen-active);
3097
- }
3098
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3099
- background-color: transparent;
3100
- background-color: initial;
3101
- }
3102
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3103
3069
  background-color: var(--Button-background-hover);
3104
3070
  color: var(--Button-color-hover);
3105
3071
  transition: none;
3106
3072
  }
3073
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
+ background-color: var(--color-background-screen-active);
3075
+ }
3107
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3108
3077
  transition: none;
3109
3078
  }
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3080
+ background-color: transparent;
3081
+ background-color: initial;
3082
+ }
3110
3083
  .wds-list-item-media {
3111
3084
  grid-area: media;
3112
3085
  }
@@ -3158,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3158
3131
  color: #768e9c;
3159
3132
  color: var(--color-content-tertiary);
3160
3133
  }
3161
- .wds-list-item-spotlight {
3162
- padding-left: 12px;
3163
- padding-left: var(--size-12);
3164
- padding-right: 12px;
3165
- padding-right: var(--size-12);
3166
- }
3167
3134
  .wds-list-item-spotlight-active {
3168
3135
  background-color: rgba(134,167,189,0.10196);
3169
3136
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
@@ -19,7 +19,7 @@
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
368
368
  background-color: #ffffff;
369
369
  background-color: var(--color-background-screen);
370
370
  position: relative;
371
- padding: 12px 0;
372
- padding: var(--size-12) 0;
371
+ padding: 12px;
372
+ padding: var(--size-12);
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
403
403
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
404
404
  outline: none;
405
405
  }
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
408
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
+ outline-offset: var(--ring-outline-offset);
410
+ outline-offset: -1px;
411
+ }
406
412
  .wds-list-item-interactive .wds-list-item-additional-info {
407
413
  --ring-outline-offset: 0;
408
414
  }
@@ -421,57 +427,24 @@
421
427
  position: absolute;
422
428
  inset: 0;
423
429
  }
424
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
425
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
426
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
427
- outline-offset: var(--ring-outline-offset);
428
- }
429
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
430
- background-color: var(--color-background-screen-hover);
431
- }
432
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
433
- background-color: var(--color-background-screen-active);
434
- }
435
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
436
- background-color: transparent;
437
- background-color: initial;
438
- }
439
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
440
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
441
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
442
- outline-offset: var(--ring-outline-offset);
443
- content: '';
444
- position: absolute;
445
- inset: 0 -8px;
446
- border-radius: 16px;
447
- border-radius: var(--radius-medium);
448
- }
449
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
450
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
451
- content: '';
452
- position: absolute;
453
- inset: 0 -8px;
454
- border-radius: 16px;
455
- border-radius: var(--radius-medium);
456
- }
457
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
430
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
458
431
  background-color: var(--color-background-screen-hover);
459
432
  }
460
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
461
- background-color: var(--color-background-screen-active);
462
- }
463
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
464
- background-color: transparent;
465
- background-color: initial;
466
- }
467
433
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
468
434
  background-color: var(--Button-background-hover);
469
435
  color: var(--Button-color-hover);
470
436
  transition: none;
471
437
  }
438
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
439
+ background-color: var(--color-background-screen-active);
440
+ }
472
441
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
473
442
  transition: none;
474
443
  }
444
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
445
+ background-color: transparent;
446
+ background-color: initial;
447
+ }
475
448
  .wds-list-item-media {
476
449
  grid-area: media;
477
450
  }
@@ -523,12 +496,6 @@
523
496
  color: #768e9c;
524
497
  color: var(--color-content-tertiary);
525
498
  }
526
- .wds-list-item-spotlight {
527
- padding-left: 12px;
528
- padding-left: var(--size-12);
529
- padding-right: 12px;
530
- padding-right: var(--size-12);
531
- }
532
499
  .wds-list-item-spotlight-active {
533
500
  background-color: rgba(134,167,189,0.10196);
534
501
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
@@ -19,7 +19,7 @@
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/build/styles/main.css CHANGED
@@ -2644,7 +2644,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
2647
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
2648
2648
  }
2649
2649
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2650
2650
  grid-template-columns: auto 1fr auto;
@@ -2654,7 +2654,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2654
2654
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2655
2655
  grid-template-columns: auto 1fr auto;
2656
2656
  grid-template-rows: auto auto;
2657
- grid-template-areas: "media body control" "media prompt prompt";
2657
+ grid-template-areas: "media body control" ". prompt prompt";
2658
2658
  }
2659
2659
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2660
2660
  grid-template-columns: auto 1fr auto;
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 297px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3003
3003
  background-color: #ffffff;
3004
3004
  background-color: var(--color-background-screen);
3005
3005
  position: relative;
3006
- padding: 12px 0;
3007
- padding: var(--size-12) 0;
3006
+ padding: 12px;
3007
+ padding: var(--size-12);
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3038
3038
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3039
3039
  outline: none;
3040
3040
  }
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
+ outline-offset: var(--ring-outline-offset);
3045
+ outline-offset: -1px;
3046
+ }
3041
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3042
3048
  --ring-outline-offset: 0;
3043
3049
  }
@@ -3056,57 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3056
3062
  position: absolute;
3057
3063
  inset: 0;
3058
3064
  }
3059
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
3060
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
3061
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3062
- outline-offset: var(--ring-outline-offset);
3063
- }
3064
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
3065
- background-color: var(--color-background-screen-hover);
3066
- }
3067
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
3068
- background-color: var(--color-background-screen-active);
3069
- }
3070
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3071
- background-color: transparent;
3072
- background-color: initial;
3073
- }
3074
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
3075
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
3076
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3077
- outline-offset: var(--ring-outline-offset);
3078
- content: '';
3079
- position: absolute;
3080
- inset: 0 -8px;
3081
- border-radius: 16px;
3082
- border-radius: var(--radius-medium);
3083
- }
3084
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
3085
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3086
- content: '';
3087
- position: absolute;
3088
- inset: 0 -8px;
3089
- border-radius: 16px;
3090
- border-radius: var(--radius-medium);
3091
- }
3092
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3093
3066
  background-color: var(--color-background-screen-hover);
3094
3067
  }
3095
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3096
- background-color: var(--color-background-screen-active);
3097
- }
3098
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3099
- background-color: transparent;
3100
- background-color: initial;
3101
- }
3102
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3103
3069
  background-color: var(--Button-background-hover);
3104
3070
  color: var(--Button-color-hover);
3105
3071
  transition: none;
3106
3072
  }
3073
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
+ background-color: var(--color-background-screen-active);
3075
+ }
3107
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3108
3077
  transition: none;
3109
3078
  }
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3080
+ background-color: transparent;
3081
+ background-color: initial;
3082
+ }
3110
3083
  .wds-list-item-media {
3111
3084
  grid-area: media;
3112
3085
  }
@@ -3158,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3158
3131
  color: #768e9c;
3159
3132
  color: var(--color-content-tertiary);
3160
3133
  }
3161
- .wds-list-item-spotlight {
3162
- padding-left: 12px;
3163
- padding-left: var(--size-12);
3164
- padding-right: 12px;
3165
- padding-right: var(--size-12);
3166
- }
3167
3134
  .wds-list-item-spotlight-active {
3168
3135
  background-color: rgba(134,167,189,0.10196);
3169
3136
  background-color: var(--color-background-neutral);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-2b7bcad",
3
+ "version": "0.0.0-experimental-66feb7b",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/listItem/ListItem.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
@@ -19,7 +19,7 @@
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
368
368
  background-color: #ffffff;
369
369
  background-color: var(--color-background-screen);
370
370
  position: relative;
371
- padding: 12px 0;
372
- padding: var(--size-12) 0;
371
+ padding: 12px;
372
+ padding: var(--size-12);
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
403
403
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
404
404
  outline: none;
405
405
  }
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
408
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
+ outline-offset: var(--ring-outline-offset);
410
+ outline-offset: -1px;
411
+ }
406
412
  .wds-list-item-interactive .wds-list-item-additional-info {
407
413
  --ring-outline-offset: 0;
408
414
  }
@@ -421,57 +427,24 @@
421
427
  position: absolute;
422
428
  inset: 0;
423
429
  }
424
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
425
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
426
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
427
- outline-offset: var(--ring-outline-offset);
428
- }
429
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
430
- background-color: var(--color-background-screen-hover);
431
- }
432
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
433
- background-color: var(--color-background-screen-active);
434
- }
435
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
436
- background-color: transparent;
437
- background-color: initial;
438
- }
439
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
440
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
441
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
442
- outline-offset: var(--ring-outline-offset);
443
- content: '';
444
- position: absolute;
445
- inset: 0 -8px;
446
- border-radius: 16px;
447
- border-radius: var(--radius-medium);
448
- }
449
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
450
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
451
- content: '';
452
- position: absolute;
453
- inset: 0 -8px;
454
- border-radius: 16px;
455
- border-radius: var(--radius-medium);
456
- }
457
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
430
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
458
431
  background-color: var(--color-background-screen-hover);
459
432
  }
460
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
461
- background-color: var(--color-background-screen-active);
462
- }
463
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
464
- background-color: transparent;
465
- background-color: initial;
466
- }
467
433
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
468
434
  background-color: var(--Button-background-hover);
469
435
  color: var(--Button-color-hover);
470
436
  transition: none;
471
437
  }
438
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
439
+ background-color: var(--color-background-screen-active);
440
+ }
472
441
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
473
442
  transition: none;
474
443
  }
444
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
445
+ background-color: transparent;
446
+ background-color: initial;
447
+ }
475
448
  .wds-list-item-media {
476
449
  grid-area: media;
477
450
  }
@@ -523,12 +496,6 @@
523
496
  color: #768e9c;
524
497
  color: var(--color-content-tertiary);
525
498
  }
526
- .wds-list-item-spotlight {
527
- padding-left: 12px;
528
- padding-left: var(--size-12);
529
- padding-right: 12px;
530
- padding-right: var(--size-12);
531
- }
532
499
  .wds-list-item-spotlight-active {
533
500
  background-color: rgba(134,167,189,0.10196);
534
501
  background-color: var(--color-background-neutral);
package/src/listItem/ListItem.grid.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
@@ -19,7 +19,7 @@
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/src/listItem/ListItem.grid.less CHANGED
@@ -11,7 +11,7 @@
11
11
  grid-template-areas:
12
12
  "media body control"
13
13
  "media info control"
14
- "media prompt prompt";
14
+ ". prompt prompt";
15
15
  }
16
16
 
17
17
  &.wds-list-item-hasInfo-noPrompt {
@@ -27,7 +27,7 @@
27
27
  grid-template-rows: auto auto;
28
28
  grid-template-areas:
29
29
  "media body control"
30
- "media prompt prompt";
30
+ ". prompt prompt";
31
31
  }
32
32
 
33
33
  &.wds-list-item-noInfo-noPrompt {
@@ -378,7 +378,7 @@
378
378
  }
379
379
  }
380
380
 
381
- @container (max-width: 296px) {
381
+ @container (max-width: 297px) {
382
382
  &.wds-list-item-hasMedia-hasControl {
383
383
  &.wds-list-item-hasInfo-hasPrompt {
384
384
  grid-template-columns: auto 1fr;
package/src/listItem/ListItem.less CHANGED
@@ -7,7 +7,7 @@
7
7
  border-radius: var(--radius-medium);
8
8
  background-color: var(--color-background-screen);
9
9
  position: relative;
10
- padding: var(--size-12) 0;
10
+ padding: var(--size-12);
11
11
  container-type: inline-size;
12
12
 
13
13
  & + .wds-list-item-spotlight,
@@ -47,6 +47,12 @@
47
47
  outline: none;
48
48
  }
49
49
 
50
+ &:has(.wds-list-item-control:focus-visible),
51
+ &:has(input[type="checkbox"]:focus-visible) {
52
+ .ring();
53
+ outline-offset: -1px;
54
+ }
55
+
50
56
  .wds-list-item-additional-info {
51
57
  .ring-offset-0
52
58
  }
@@ -70,86 +76,32 @@
70
76
  }
71
77
  }
72
78
 
73
- // spotlighted list item has extra horizontal padding so the focus
74
- // and hover styles can be rendered within the main container.
75
- &.wds-list-item-spotlight {
76
- &:has(.wds-list-item-control:focus-visible),
77
- &:has(input[type="checkbox"]:focus-visible) {
78
- .ring();
79
- }
80
-
81
- &:not(.disabled, :disabled) {
82
- &:hover {
83
- background-color: var(--color-background-screen-hover);
84
- }
85
-
86
- &:active {
87
- background-color: var(--color-background-screen-active);
88
- }
89
- }
90
-
91
- &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
92
- &:hover {
93
- background-color: unset;
79
+ &:not(.disabled, :disabled):hover {
80
+ background-color: var(--color-background-screen-hover);
81
+
82
+ .wds-list-item-control-wrapper {
83
+ .wds-Button {
84
+ background-color: var(--Button-background-hover);
85
+ color: var(--Button-color-hover);
86
+ transition: none;
87
+ }
94
88
  }
95
- }
96
89
  }
97
90
 
98
- // non-spotlighted list item has no horizontal padding so the focus
99
- // and hover styles have to be rendered out of bounds.
100
- &:not(.wds-list-item-spotlight) {
101
- &:has(.wds-list-item-control:focus-visible),
102
- &:has(input[type="checkbox"]:focus-visible) {
103
- &:before {
104
- .ring();
105
- content: '';
106
- position: absolute;
107
- inset: 0 -8px;
108
- border-radius: var(--radius-medium);
109
- }
110
- }
111
-
112
- &:not(.disabled, :disabled) {
113
- &:hover,
114
- &:active {
115
- &:before {
116
- content: '';
117
- position: absolute;
118
- inset: 0 -8px;
119
- border-radius: var(--radius-medium);
120
- }
121
- }
122
-
123
- &:hover:before {
124
- background-color: var(--color-background-screen-hover);
125
- }
126
-
127
- &:active:before {
128
- background-color: var(--color-background-screen-active);
129
- }
130
- }
131
-
132
- &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
133
- &:hover:before {
134
- background-color: unset;
135
- }
136
- }
91
+ &:not(.disabled, :disabled):active {
92
+ background-color: var(--color-background-screen-active);
137
93
  }
138
94
 
139
- &:not(.disabled, :disabled):hover {
140
- .wds-list-item-control-wrapper {
95
+ .wds-list-item-button-control {
141
96
  .wds-Button {
142
- background-color: var(--Button-background-hover);
143
- color: var(--Button-color-hover);
144
97
  transition: none;
145
98
  }
146
99
  }
147
- }
148
100
 
149
- .wds-list-item-button-control {
150
- .wds-Button {
151
- transition: none;
152
- }
101
+ &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
102
+ &:hover {
103
+ background-color: unset;
104
+ }
153
105
  }
154
106
  }
155
107
 
@@ -210,9 +162,6 @@
210
162
 
211
163
 
212
164
  &-spotlight {
213
- padding-left: var(--size-12);
214
- padding-right: var(--size-12);
215
-
216
165
  &-active {
217
166
  background-color: var(--color-background-neutral);
218
167
  &:not(.disabled, :disabled):hover {
package/src/main.css CHANGED
@@ -2644,7 +2644,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
2647
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" ". prompt prompt";
2648
2648
  }
2649
2649
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2650
2650
  grid-template-columns: auto 1fr auto;
@@ -2654,7 +2654,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2654
2654
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2655
2655
  grid-template-columns: auto 1fr auto;
2656
2656
  grid-template-rows: auto auto;
2657
- grid-template-areas: "media body control" "media prompt prompt";
2657
+ grid-template-areas: "media body control" ". prompt prompt";
2658
2658
  }
2659
2659
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2660
2660
  grid-template-columns: auto 1fr auto;
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 297px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3003
3003
  background-color: #ffffff;
3004
3004
  background-color: var(--color-background-screen);
3005
3005
  position: relative;
3006
- padding: 12px 0;
3007
- padding: var(--size-12) 0;
3006
+ padding: 12px;
3007
+ padding: var(--size-12);
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3038
3038
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3039
3039
  outline: none;
3040
3040
  }
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
+ outline-offset: var(--ring-outline-offset);
3045
+ outline-offset: -1px;
3046
+ }
3041
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3042
3048
  --ring-outline-offset: 0;
3043
3049
  }
@@ -3056,57 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3056
3062
  position: absolute;
3057
3063
  inset: 0;
3058
3064
  }
3059
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
3060
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
3061
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3062
- outline-offset: var(--ring-outline-offset);
3063
- }
3064
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
3065
- background-color: var(--color-background-screen-hover);
3066
- }
3067
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
3068
- background-color: var(--color-background-screen-active);
3069
- }
3070
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3071
- background-color: transparent;
3072
- background-color: initial;
3073
- }
3074
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
3075
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
3076
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3077
- outline-offset: var(--ring-outline-offset);
3078
- content: '';
3079
- position: absolute;
3080
- inset: 0 -8px;
3081
- border-radius: 16px;
3082
- border-radius: var(--radius-medium);
3083
- }
3084
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
3085
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3086
- content: '';
3087
- position: absolute;
3088
- inset: 0 -8px;
3089
- border-radius: 16px;
3090
- border-radius: var(--radius-medium);
3091
- }
3092
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3093
3066
  background-color: var(--color-background-screen-hover);
3094
3067
  }
3095
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3096
- background-color: var(--color-background-screen-active);
3097
- }
3098
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3099
- background-color: transparent;
3100
- background-color: initial;
3101
- }
3102
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3103
3069
  background-color: var(--Button-background-hover);
3104
3070
  color: var(--Button-color-hover);
3105
3071
  transition: none;
3106
3072
  }
3073
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
+ background-color: var(--color-background-screen-active);
3075
+ }
3107
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3108
3077
  transition: none;
3109
3078
  }
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3080
+ background-color: transparent;
3081
+ background-color: initial;
3082
+ }
3110
3083
  .wds-list-item-media {
3111
3084
  grid-area: media;
3112
3085
  }
@@ -3158,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3158
3131
  color: #768e9c;
3159
3132
  color: var(--color-content-tertiary);
3160
3133
  }
3161
- .wds-list-item-spotlight {
3162
- padding-left: 12px;
3163
- padding-left: var(--size-12);
3164
- padding-right: 12px;
3165
- padding-right: var(--size-12);
3166
- }
3167
3134
  .wds-list-item-spotlight-active {
3168
3135
  background-color: rgba(134,167,189,0.10196);
3169
3136
  background-color: var(--color-background-neutral);