@transferwise/components 0.0.0-experimental-66feb7b → 0.0.0-experimental-1467862

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 (11) hide show
  1. package/build/main.css +54 -21
  2. package/build/styles/listItem/ListItem.css +54 -21
  3. package/build/styles/listItem/ListItem.grid.css +5 -5
  4. package/build/styles/main.css +54 -21
  5. package/package.json +3 -3
  6. package/src/listItem/ListItem.css +54 -21
  7. package/src/listItem/ListItem.grid.css +5 -5
  8. package/src/listItem/ListItem.grid.less +5 -5
  9. package/src/listItem/ListItem.less +74 -23
  10. package/src/listItem/_stories/ListItem.story.tsx +4 -4
  11. package/src/main.css +54 -21
package/build/main.css CHANGED
@@ -2640,11 +2640,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
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" ". prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
2657
+ grid-template-areas: "media body control" "media 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;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -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: 297px) {
2859
+ @container (max-width: 290px) {
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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,12 +3038,6 @@ 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
- }
3047
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3042
  --ring-outline-offset: 0;
3049
3043
  }
@@ -3062,24 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3056
  position: absolute;
3063
3057
  inset: 0;
3064
3058
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
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 {
3066
3093
  background-color: var(--color-background-screen-hover);
3067
3094
  }
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
+ }
3068
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3103
  background-color: var(--Button-background-hover);
3070
3104
  color: var(--Button-color-hover);
3071
3105
  transition: none;
3072
3106
  }
3073
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
- background-color: var(--color-background-screen-active);
3075
- }
3076
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3108
  transition: none;
3078
3109
  }
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
- }
3083
3110
  .wds-list-item-media {
3084
3111
  grid-area: media;
3085
3112
  }
@@ -3131,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3131
3158
  color: #768e9c;
3132
3159
  color: var(--color-content-tertiary);
3133
3160
  }
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
+ }
3134
3167
  .wds-list-item-spotlight-active {
3135
3168
  background-color: rgba(134,167,189,0.10196);
3136
3169
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.css CHANGED
@@ -5,11 +5,11 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
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" ". prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
22
+ grid-template-areas: "media body control" "media 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;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 297px) {
224
+ @container (max-width: 290px) {
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;
372
- padding: var(--size-12);
371
+ padding: 12px 0;
372
+ padding: var(--size-12) 0;
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
@@ -403,12 +403,6 @@
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
- }
412
406
  .wds-list-item-interactive .wds-list-item-additional-info {
413
407
  --ring-outline-offset: 0;
414
408
  }
@@ -427,24 +421,57 @@
427
421
  position: absolute;
428
422
  inset: 0;
429
423
  }
430
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
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 {
431
458
  background-color: var(--color-background-screen-hover);
432
459
  }
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
+ }
433
467
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
434
468
  background-color: var(--Button-background-hover);
435
469
  color: var(--Button-color-hover);
436
470
  transition: none;
437
471
  }
438
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
439
- background-color: var(--color-background-screen-active);
440
- }
441
472
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
442
473
  transition: none;
443
474
  }
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
- }
448
475
  .wds-list-item-media {
449
476
  grid-area: media;
450
477
  }
@@ -496,6 +523,12 @@
496
523
  color: #768e9c;
497
524
  color: var(--color-content-tertiary);
498
525
  }
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
+ }
499
532
  .wds-list-item-spotlight-active {
500
533
  background-color: rgba(134,167,189,0.10196);
501
534
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -5,11 +5,11 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
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" ". prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
22
+ grid-template-areas: "media body control" "media 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;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 297px) {
224
+ @container (max-width: 290px) {
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
@@ -2640,11 +2640,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
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" ". prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
2657
+ grid-template-areas: "media body control" "media 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;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -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: 297px) {
2859
+ @container (max-width: 290px) {
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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,12 +3038,6 @@ 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
- }
3047
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3042
  --ring-outline-offset: 0;
3049
3043
  }
@@ -3062,24 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3056
  position: absolute;
3063
3057
  inset: 0;
3064
3058
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
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 {
3066
3093
  background-color: var(--color-background-screen-hover);
3067
3094
  }
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
+ }
3068
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3103
  background-color: var(--Button-background-hover);
3070
3104
  color: var(--Button-color-hover);
3071
3105
  transition: none;
3072
3106
  }
3073
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
- background-color: var(--color-background-screen-active);
3075
- }
3076
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3108
  transition: none;
3078
3109
  }
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
- }
3083
3110
  .wds-list-item-media {
3084
3111
  grid-area: media;
3085
3112
  }
@@ -3131,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3131
3158
  color: #768e9c;
3132
3159
  color: var(--color-content-tertiary);
3133
3160
  }
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
+ }
3134
3167
  .wds-list-item-spotlight-active {
3135
3168
  background-color: rgba(134,167,189,0.10196);
3136
3169
  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-66feb7b",
3
+ "version": "0.0.0-experimental-1467862",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -84,9 +84,9 @@
84
84
  "storybook-addon-tag-badges": "^2.0.1",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "@transferwise/less-config": "3.1.2",
87
- "@transferwise/neptune-css": "14.24.5",
88
87
  "@wise/components-theming": "1.6.4",
89
- "@wise/wds-configs": "0.0.0"
88
+ "@wise/wds-configs": "0.0.0",
89
+ "@transferwise/neptune-css": "14.24.5"
90
90
  },
91
91
  "peerDependencies": {
92
92
  "@transferwise/icons": "^3.22.3",
package/src/listItem/ListItem.css CHANGED
@@ -5,11 +5,11 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
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" ". prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
22
+ grid-template-areas: "media body control" "media 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;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 297px) {
224
+ @container (max-width: 290px) {
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;
372
- padding: var(--size-12);
371
+ padding: 12px 0;
372
+ padding: var(--size-12) 0;
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
@@ -403,12 +403,6 @@
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
- }
412
406
  .wds-list-item-interactive .wds-list-item-additional-info {
413
407
  --ring-outline-offset: 0;
414
408
  }
@@ -427,24 +421,57 @@
427
421
  position: absolute;
428
422
  inset: 0;
429
423
  }
430
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
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 {
431
458
  background-color: var(--color-background-screen-hover);
432
459
  }
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
+ }
433
467
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
434
468
  background-color: var(--Button-background-hover);
435
469
  color: var(--Button-color-hover);
436
470
  transition: none;
437
471
  }
438
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
439
- background-color: var(--color-background-screen-active);
440
- }
441
472
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
442
473
  transition: none;
443
474
  }
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
- }
448
475
  .wds-list-item-media {
449
476
  grid-area: media;
450
477
  }
@@ -496,6 +523,12 @@
496
523
  color: #768e9c;
497
524
  color: var(--color-content-tertiary);
498
525
  }
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
+ }
499
532
  .wds-list-item-spotlight-active {
500
533
  background-color: rgba(134,167,189,0.10196);
501
534
  background-color: var(--color-background-neutral);
package/src/listItem/ListItem.grid.css CHANGED
@@ -5,11 +5,11 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
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" ". prompt prompt";
12
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
22
+ grid-template-areas: "media body control" "media 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;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 297px) {
224
+ @container (max-width: 290px) {
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
@@ -3,7 +3,7 @@
3
3
  display: grid;
4
4
  gap: var(--size-4) var(--size-16);
5
5
 
6
- @container (min-width: 375px) {
6
+ @container (min-width: 380px) {
7
7
  &.wds-list-item-hasMedia-hasControl {
8
8
  &.wds-list-item-hasInfo-hasPrompt {
9
9
  grid-template-columns: auto 1fr auto;
@@ -11,7 +11,7 @@
11
11
  grid-template-areas:
12
12
  "media body control"
13
13
  "media info control"
14
- ". prompt prompt";
14
+ "media 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
- ". prompt prompt";
30
+ "media prompt prompt";
31
31
  }
32
32
 
33
33
  &.wds-list-item-noInfo-noPrompt {
@@ -149,7 +149,7 @@
149
149
  }
150
150
  }
151
151
 
152
- @container (min-width: 297px) and (max-width: 375px) {
152
+ @container (min-width: 290px) and (max-width: 380px) {
153
153
  &.wds-list-item-hasMedia-hasControl {
154
154
  .wds-list-item-media {
155
155
  margin-bottom: var(--size-12);
@@ -378,7 +378,7 @@
378
378
  }
379
379
  }
380
380
 
381
- @container (max-width: 297px) {
381
+ @container (max-width: 290px) {
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);
10
+ padding: var(--size-12) 0;
11
11
  container-type: inline-size;
12
12
 
13
13
  & + .wds-list-item-spotlight,
@@ -47,12 +47,6 @@
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
-
56
50
  .wds-list-item-additional-info {
57
51
  .ring-offset-0
58
52
  }
@@ -76,32 +70,86 @@
76
70
  }
77
71
  }
78
72
 
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
- }
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;
88
94
  }
95
+ }
89
96
  }
90
97
 
91
- &:not(.disabled, :disabled):active {
92
- background-color: var(--color-background-screen-active);
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
+ }
93
137
  }
94
138
 
95
- .wds-list-item-button-control {
139
+ &:not(.disabled, :disabled):hover {
140
+ .wds-list-item-control-wrapper {
96
141
  .wds-Button {
142
+ background-color: var(--Button-background-hover);
143
+ color: var(--Button-color-hover);
97
144
  transition: none;
98
145
  }
99
146
  }
147
+ }
100
148
 
101
- &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
102
- &:hover {
103
- background-color: unset;
104
- }
149
+ .wds-list-item-button-control {
150
+ .wds-Button {
151
+ transition: none;
152
+ }
105
153
  }
106
154
  }
107
155
 
@@ -162,6 +210,9 @@
162
210
 
163
211
 
164
212
  &-spotlight {
213
+ padding-left: var(--size-12);
214
+ padding-right: var(--size-12);
215
+
165
216
  &-active {
166
217
  background-color: var(--color-background-neutral);
167
218
  &:not(.disabled, :disabled):hover {
package/src/listItem/_stories/ListItem.story.tsx CHANGED
@@ -277,9 +277,9 @@ export const Responsiveness: Story = {
277
277
  return (
278
278
  <ol
279
279
  className="list-unstyled"
280
- style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
280
+ style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
281
281
  >
282
- <div style={{ width: '320px' }}>
282
+ <div style={{ width: '290px' }}>
283
283
  <ListItem
284
284
  {...args}
285
285
  subtitle={lorem10}
@@ -289,7 +289,7 @@ export const Responsiveness: Story = {
289
289
  prompt={PROMPTS.interactive}
290
290
  />
291
291
  </div>
292
- <div style={{ width: '360px' }}>
292
+ <div style={{ width: '350px' }}>
293
293
  <ListItem
294
294
  {...args}
295
295
  subtitle={lorem10}
@@ -299,7 +299,7 @@ export const Responsiveness: Story = {
299
299
  prompt={PROMPTS.interactive}
300
300
  />
301
301
  </div>
302
- <div style={{ width: '400px' }}>
302
+ <div style={{ width: '381px' }}>
303
303
  <ListItem
304
304
  {...args}
305
305
  subtitle={lorem10}
package/src/main.css CHANGED
@@ -2640,11 +2640,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
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" ". prompt prompt";
2647
+ grid-template-areas: "media body control" "media info control" "media 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" ". prompt prompt";
2657
+ grid-template-areas: "media body control" "media 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;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -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: 297px) {
2859
+ @container (max-width: 290px) {
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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,12 +3038,6 @@ 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
- }
3047
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3042
  --ring-outline-offset: 0;
3049
3043
  }
@@ -3062,24 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3056
  position: absolute;
3063
3057
  inset: 0;
3064
3058
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
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 {
3066
3093
  background-color: var(--color-background-screen-hover);
3067
3094
  }
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
+ }
3068
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3103
  background-color: var(--Button-background-hover);
3070
3104
  color: var(--Button-color-hover);
3071
3105
  transition: none;
3072
3106
  }
3073
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
- background-color: var(--color-background-screen-active);
3075
- }
3076
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3108
  transition: none;
3078
3109
  }
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
- }
3083
3110
  .wds-list-item-media {
3084
3111
  grid-area: media;
3085
3112
  }
@@ -3131,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3131
3158
  color: #768e9c;
3132
3159
  color: var(--color-content-tertiary);
3133
3160
  }
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
+ }
3134
3167
  .wds-list-item-spotlight-active {
3135
3168
  background-color: rgba(134,167,189,0.10196);
3136
3169
  background-color: var(--color-background-neutral);