@transferwise/components 0.0.0-experimental-53e394f → 0.0.0-experimental-2b7bcad

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 (7) hide show
  1. package/build/main.css +43 -19
  2. package/build/styles/listItem/ListItem.css +43 -19
  3. package/build/styles/main.css +43 -19
  4. package/package.json +2 -2
  5. package/src/listItem/ListItem.css +43 -19
  6. package/src/listItem/ListItem.less +67 -27
  7. package/src/main.css +43 -19
package/build/main.css CHANGED
@@ -3038,16 +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):before,
3042
- .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
- outline-offset: var(--ring-outline-offset);
3045
- content: '';
3046
- position: absolute;
3047
- inset: 0 -8px;
3048
- border-radius: 16px;
3049
- border-radius: var(--radius-medium);
3050
- }
3051
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3042
  --ring-outline-offset: 0;
3053
3043
  }
@@ -3066,29 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3056
  position: absolute;
3067
3057
  inset: 0;
3068
3058
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
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 {
3070
3086
  content: '';
3071
3087
  position: absolute;
3072
3088
  inset: 0 -8px;
3073
- background-color: var(--color-background-screen-hover);
3074
3089
  border-radius: 16px;
3075
3090
  border-radius: var(--radius-medium);
3076
3091
  }
3092
+ .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3093
+ background-color: var(--color-background-screen-hover);
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
+ }
3077
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3103
  background-color: var(--Button-background-hover);
3079
3104
  color: var(--Button-color-hover);
3080
3105
  transition: none;
3081
3106
  }
3082
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3083
- background-color: var(--color-background-screen-active);
3084
- }
3085
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3108
  transition: none;
3087
3109
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3089
- background-color: transparent;
3090
- background-color: initial;
3091
- }
3092
3110
  .wds-list-item-media {
3093
3111
  grid-area: media;
3094
3112
  }
@@ -3140,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3140
3158
  color: #768e9c;
3141
3159
  color: var(--color-content-tertiary);
3142
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
+ }
3143
3167
  .wds-list-item-spotlight-active {
3144
3168
  background-color: rgba(134,167,189,0.10196);
3145
3169
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.css CHANGED
@@ -403,16 +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):before,
407
- .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
408
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
- outline-offset: var(--ring-outline-offset);
410
- content: '';
411
- position: absolute;
412
- inset: 0 -8px;
413
- border-radius: 16px;
414
- border-radius: var(--radius-medium);
415
- }
416
406
  .wds-list-item-interactive .wds-list-item-additional-info {
417
407
  --ring-outline-offset: 0;
418
408
  }
@@ -431,29 +421,57 @@
431
421
  position: absolute;
432
422
  inset: 0;
433
423
  }
434
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
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 {
435
451
  content: '';
436
452
  position: absolute;
437
453
  inset: 0 -8px;
438
- background-color: var(--color-background-screen-hover);
439
454
  border-radius: 16px;
440
455
  border-radius: var(--radius-medium);
441
456
  }
457
+ .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
458
+ background-color: var(--color-background-screen-hover);
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
+ }
442
467
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
443
468
  background-color: var(--Button-background-hover);
444
469
  color: var(--Button-color-hover);
445
470
  transition: none;
446
471
  }
447
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
448
- background-color: var(--color-background-screen-active);
449
- }
450
472
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
451
473
  transition: none;
452
474
  }
453
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
454
- background-color: transparent;
455
- background-color: initial;
456
- }
457
475
  .wds-list-item-media {
458
476
  grid-area: media;
459
477
  }
@@ -505,6 +523,12 @@
505
523
  color: #768e9c;
506
524
  color: var(--color-content-tertiary);
507
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
+ }
508
532
  .wds-list-item-spotlight-active {
509
533
  background-color: rgba(134,167,189,0.10196);
510
534
  background-color: var(--color-background-neutral);
package/build/styles/main.css CHANGED
@@ -3038,16 +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):before,
3042
- .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
- outline-offset: var(--ring-outline-offset);
3045
- content: '';
3046
- position: absolute;
3047
- inset: 0 -8px;
3048
- border-radius: 16px;
3049
- border-radius: var(--radius-medium);
3050
- }
3051
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3042
  --ring-outline-offset: 0;
3053
3043
  }
@@ -3066,29 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3056
  position: absolute;
3067
3057
  inset: 0;
3068
3058
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
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 {
3070
3086
  content: '';
3071
3087
  position: absolute;
3072
3088
  inset: 0 -8px;
3073
- background-color: var(--color-background-screen-hover);
3074
3089
  border-radius: 16px;
3075
3090
  border-radius: var(--radius-medium);
3076
3091
  }
3092
+ .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3093
+ background-color: var(--color-background-screen-hover);
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
+ }
3077
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3103
  background-color: var(--Button-background-hover);
3079
3104
  color: var(--Button-color-hover);
3080
3105
  transition: none;
3081
3106
  }
3082
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3083
- background-color: var(--color-background-screen-active);
3084
- }
3085
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3108
  transition: none;
3087
3109
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3089
- background-color: transparent;
3090
- background-color: initial;
3091
- }
3092
3110
  .wds-list-item-media {
3093
3111
  grid-area: media;
3094
3112
  }
@@ -3140,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3140
3158
  color: #768e9c;
3141
3159
  color: var(--color-content-tertiary);
3142
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
+ }
3143
3167
  .wds-list-item-spotlight-active {
3144
3168
  background-color: rgba(134,167,189,0.10196);
3145
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-53e394f",
3
+ "version": "0.0.0-experimental-2b7bcad",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -83,8 +83,8 @@
83
83
  "storybook": "^9.0.18",
84
84
  "storybook-addon-tag-badges": "^2.0.1",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
- "@transferwise/neptune-css": "14.24.5",
87
86
  "@transferwise/less-config": "3.1.2",
87
+ "@transferwise/neptune-css": "14.24.5",
88
88
  "@wise/components-theming": "1.6.4",
89
89
  "@wise/wds-configs": "0.0.0"
90
90
  },
package/src/listItem/ListItem.css CHANGED
@@ -403,16 +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):before,
407
- .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
408
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
- outline-offset: var(--ring-outline-offset);
410
- content: '';
411
- position: absolute;
412
- inset: 0 -8px;
413
- border-radius: 16px;
414
- border-radius: var(--radius-medium);
415
- }
416
406
  .wds-list-item-interactive .wds-list-item-additional-info {
417
407
  --ring-outline-offset: 0;
418
408
  }
@@ -431,29 +421,57 @@
431
421
  position: absolute;
432
422
  inset: 0;
433
423
  }
434
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
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 {
435
451
  content: '';
436
452
  position: absolute;
437
453
  inset: 0 -8px;
438
- background-color: var(--color-background-screen-hover);
439
454
  border-radius: 16px;
440
455
  border-radius: var(--radius-medium);
441
456
  }
457
+ .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
458
+ background-color: var(--color-background-screen-hover);
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
+ }
442
467
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
443
468
  background-color: var(--Button-background-hover);
444
469
  color: var(--Button-color-hover);
445
470
  transition: none;
446
471
  }
447
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
448
- background-color: var(--color-background-screen-active);
449
- }
450
472
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
451
473
  transition: none;
452
474
  }
453
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
454
- background-color: transparent;
455
- background-color: initial;
456
- }
457
475
  .wds-list-item-media {
458
476
  grid-area: media;
459
477
  }
@@ -505,6 +523,12 @@
505
523
  color: #768e9c;
506
524
  color: var(--color-content-tertiary);
507
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
+ }
508
532
  .wds-list-item-spotlight-active {
509
533
  background-color: rgba(134,167,189,0.10196);
510
534
  background-color: var(--color-background-neutral);
package/src/listItem/ListItem.less CHANGED
@@ -47,17 +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
- &:before {
53
- .ring();
54
- content: '';
55
- position: absolute;
56
- inset: 0 -8px;
57
- border-radius: var(--radius-medium);
58
- }
59
- }
60
-
61
50
  .wds-list-item-additional-info {
62
51
  .ring-offset-0
63
52
  }
@@ -81,38 +70,86 @@
81
70
  }
82
71
  }
83
72
 
84
- &:not(.disabled, :disabled):hover {
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;
94
+ }
95
+ }
96
+ }
97
+
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) {
85
103
  &:before {
104
+ .ring();
86
105
  content: '';
87
106
  position: absolute;
88
107
  inset: 0 -8px;
89
- background-color: var(--color-background-screen-hover);
90
108
  border-radius: var(--radius-medium);
91
109
  }
110
+ }
92
111
 
93
- .wds-list-item-control-wrapper {
94
- .wds-Button {
95
- background-color: var(--Button-background-hover);
96
- color: var(--Button-color-hover);
97
- transition: none;
98
- }
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
+ }
99
121
  }
100
- }
101
122
 
102
- &:not(.disabled, :disabled):active {
103
- background-color: var(--color-background-screen-active);
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
+ }
104
137
  }
105
138
 
106
- .wds-list-item-button-control {
139
+ &:not(.disabled, :disabled):hover {
140
+ .wds-list-item-control-wrapper {
107
141
  .wds-Button {
142
+ background-color: var(--Button-background-hover);
143
+ color: var(--Button-color-hover);
108
144
  transition: none;
109
145
  }
110
146
  }
147
+ }
111
148
 
112
- &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
113
- &:hover:before {
114
- background-color: unset;
115
- }
149
+ .wds-list-item-button-control {
150
+ .wds-Button {
151
+ transition: none;
152
+ }
116
153
  }
117
154
  }
118
155
 
@@ -173,6 +210,9 @@
173
210
 
174
211
 
175
212
  &-spotlight {
213
+ padding-left: var(--size-12);
214
+ padding-right: var(--size-12);
215
+
176
216
  &-active {
177
217
  background-color: var(--color-background-neutral);
178
218
  &:not(.disabled, :disabled):hover {
package/src/main.css CHANGED
@@ -3038,16 +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):before,
3042
- .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
- outline-offset: var(--ring-outline-offset);
3045
- content: '';
3046
- position: absolute;
3047
- inset: 0 -8px;
3048
- border-radius: 16px;
3049
- border-radius: var(--radius-medium);
3050
- }
3051
3041
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3042
  --ring-outline-offset: 0;
3053
3043
  }
@@ -3066,29 +3056,57 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3056
  position: absolute;
3067
3057
  inset: 0;
3068
3058
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
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 {
3070
3086
  content: '';
3071
3087
  position: absolute;
3072
3088
  inset: 0 -8px;
3073
- background-color: var(--color-background-screen-hover);
3074
3089
  border-radius: 16px;
3075
3090
  border-radius: var(--radius-medium);
3076
3091
  }
3092
+ .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3093
+ background-color: var(--color-background-screen-hover);
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
+ }
3077
3102
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3103
  background-color: var(--Button-background-hover);
3079
3104
  color: var(--Button-color-hover);
3080
3105
  transition: none;
3081
3106
  }
3082
- .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3083
- background-color: var(--color-background-screen-active);
3084
- }
3085
3107
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3108
  transition: none;
3087
3109
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3089
- background-color: transparent;
3090
- background-color: initial;
3091
- }
3092
3110
  .wds-list-item-media {
3093
3111
  grid-area: media;
3094
3112
  }
@@ -3140,6 +3158,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3140
3158
  color: #768e9c;
3141
3159
  color: var(--color-content-tertiary);
3142
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
+ }
3143
3167
  .wds-list-item-spotlight-active {
3144
3168
  background-color: rgba(134,167,189,0.10196);
3145
3169
  background-color: var(--color-background-neutral);