@transferwise/components 0.0.0-experimental-53e394f → 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 +10 -19
  2. package/build/styles/listItem/ListItem.css +10 -19
  3. package/build/styles/listItem/ListItem.grid.css +3 -3
  4. package/build/styles/main.css +10 -19
  5. package/package.json +2 -2
  6. package/src/listItem/ListItem.css +10 -19
  7. package/src/listItem/ListItem.grid.css +3 -3
  8. package/src/listItem/ListItem.grid.less +3 -3
  9. package/src/listItem/ListItem.less +5 -16
  10. package/src/main.css +10 -19
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,15 +3038,11 @@ 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 {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
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);
3045
+ outline-offset: -1px;
3050
3046
  }
3051
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3048
  --ring-outline-offset: 0;
@@ -3066,13 +3062,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3062
  position: absolute;
3067
3063
  inset: 0;
3068
3064
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
- content: '';
3071
- position: absolute;
3072
- inset: 0 -8px;
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3073
3066
  background-color: var(--color-background-screen-hover);
3074
- border-radius: 16px;
3075
- border-radius: var(--radius-medium);
3076
3067
  }
3077
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3069
  background-color: var(--Button-background-hover);
@@ -3085,7 +3076,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3085
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3077
  transition: none;
3087
3078
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3089
3080
  background-color: transparent;
3090
3081
  background-color: initial;
3091
3082
  }
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,15 +403,11 @@
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 {
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
408
408
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
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);
410
+ outline-offset: -1px;
415
411
  }
416
412
  .wds-list-item-interactive .wds-list-item-additional-info {
417
413
  --ring-outline-offset: 0;
@@ -431,13 +427,8 @@
431
427
  position: absolute;
432
428
  inset: 0;
433
429
  }
434
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
435
- content: '';
436
- position: absolute;
437
- inset: 0 -8px;
430
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
438
431
  background-color: var(--color-background-screen-hover);
439
- border-radius: 16px;
440
- border-radius: var(--radius-medium);
441
432
  }
442
433
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
443
434
  background-color: var(--Button-background-hover);
@@ -450,7 +441,7 @@
450
441
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
451
442
  transition: none;
452
443
  }
453
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
444
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
454
445
  background-color: transparent;
455
446
  background-color: initial;
456
447
  }
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,15 +3038,11 @@ 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 {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
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);
3045
+ outline-offset: -1px;
3050
3046
  }
3051
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3048
  --ring-outline-offset: 0;
@@ -3066,13 +3062,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3062
  position: absolute;
3067
3063
  inset: 0;
3068
3064
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
- content: '';
3071
- position: absolute;
3072
- inset: 0 -8px;
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3073
3066
  background-color: var(--color-background-screen-hover);
3074
- border-radius: 16px;
3075
- border-radius: var(--radius-medium);
3076
3067
  }
3077
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3069
  background-color: var(--Button-background-hover);
@@ -3085,7 +3076,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3085
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3077
  transition: none;
3087
3078
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3089
3080
  background-color: transparent;
3090
3081
  background-color: initial;
3091
3082
  }
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-66feb7b",
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
@@ -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,15 +403,11 @@
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 {
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
408
408
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
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);
410
+ outline-offset: -1px;
415
411
  }
416
412
  .wds-list-item-interactive .wds-list-item-additional-info {
417
413
  --ring-outline-offset: 0;
@@ -431,13 +427,8 @@
431
427
  position: absolute;
432
428
  inset: 0;
433
429
  }
434
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
435
- content: '';
436
- position: absolute;
437
- inset: 0 -8px;
430
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
438
431
  background-color: var(--color-background-screen-hover);
439
- border-radius: 16px;
440
- border-radius: var(--radius-medium);
441
432
  }
442
433
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
443
434
  background-color: var(--Button-background-hover);
@@ -450,7 +441,7 @@
450
441
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
451
442
  transition: none;
452
443
  }
453
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
444
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
454
445
  background-color: transparent;
455
446
  background-color: initial;
456
447
  }
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,
@@ -49,13 +49,8 @@
49
49
 
50
50
  &:has(.wds-list-item-control:focus-visible),
51
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
- }
52
+ .ring();
53
+ outline-offset: -1px;
59
54
  }
60
55
 
61
56
  .wds-list-item-additional-info {
@@ -82,13 +77,7 @@
82
77
  }
83
78
 
84
79
  &:not(.disabled, :disabled):hover {
85
- &:before {
86
- content: '';
87
- position: absolute;
88
- inset: 0 -8px;
89
- background-color: var(--color-background-screen-hover);
90
- border-radius: var(--radius-medium);
91
- }
80
+ background-color: var(--color-background-screen-hover);
92
81
 
93
82
  .wds-list-item-control-wrapper {
94
83
  .wds-Button {
@@ -110,7 +99,7 @@
110
99
  }
111
100
 
112
101
  &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
113
- &:hover:before {
102
+ &:hover {
114
103
  background-color: unset;
115
104
  }
116
105
  }
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,15 +3038,11 @@ 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 {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
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);
3045
+ outline-offset: -1px;
3050
3046
  }
3051
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3052
3048
  --ring-outline-offset: 0;
@@ -3066,13 +3062,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3066
3062
  position: absolute;
3067
3063
  inset: 0;
3068
3064
  }
3069
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
- content: '';
3071
- position: absolute;
3072
- inset: 0 -8px;
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3073
3066
  background-color: var(--color-background-screen-hover);
3074
- border-radius: 16px;
3075
- border-radius: var(--radius-medium);
3076
3067
  }
3077
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3078
3069
  background-color: var(--Button-background-hover);
@@ -3085,7 +3076,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3085
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3086
3077
  transition: none;
3087
3078
  }
3088
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3089
3080
  background-color: transparent;
3090
3081
  background-color: initial;
3091
3082
  }