@transferwise/components 0.0.0-experimental-04d15ef → 0.0.0-experimental-d7fd1c8

package/build/main.css

@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -3056,59 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -3160,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/listItem/ListItem.css

@@ -5,7 +5,7 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -421,59 +427,24 @@
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -525,12 +496,6 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/listItem/ListItem.grid.css

@@ -5,7 +5,7 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;

package/build/styles/main.css

@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -3056,59 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -3160,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-04d15ef",
+  "version": "0.0.0-experimental-d7fd1c8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "storybook": "^9.0.18",
     "storybook-addon-tag-badges": "^2.0.1",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/listItem/ListItem.css

@@ -5,7 +5,7 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -421,59 +427,24 @@
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -525,12 +496,6 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/listItem/ListItem.grid.css

@@ -5,7 +5,7 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;

package/src/listItem/ListItem.grid.less

@@ -3,7 +3,7 @@
     display: grid;
     gap: var(--size-4) var(--size-16);
 
-    @container (min-width: 380px) {
+    @container (min-width: 375px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr auto;
@@ -149,7 +149,7 @@
       }
     }
 
-    @container (min-width: 290px) and (max-width: 380px) {
+    @container (min-width: 297px) and (max-width: 375px) {
       &.wds-list-item-hasMedia-hasControl {
         .wds-list-item-media {
           margin-bottom: var(--size-12);
@@ -378,7 +378,7 @@
       }
     }
 
-    @container (max-width: 290px) {
+    @container (max-width: 296px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr;

package/src/listItem/ListItem.less

@@ -7,7 +7,7 @@
   border-radius: var(--radius-medium);
   background-color: var(--color-background-screen);
   position: relative;
-  padding: var(--size-12) 0;
+  padding: var(--size-12);
   container-type: inline-size;
 
   & + .wds-list-item-spotlight,
@@ -47,6 +47,12 @@
       outline: none;
     }
 
+    &:has(.wds-list-item-control:focus-visible),
+    &:has(input[type="checkbox"]:focus-visible) {
+      .ring();
+      outline-offset: -1px;
+    }
+
     .wds-list-item-additional-info {
       .ring-offset-0
     }
@@ -70,88 +76,32 @@
       }
     }
 
-    // spotlighted list item has extra horizontal padding so the focus
-    // and hover styles can be rendered within the main container.
-    &.wds-list-item-spotlight {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        .ring();
-        outline-offset: -1px;
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover {
-          background-color: unset;
+    &:not(.disabled, :disabled):hover {
+        background-color: var(--color-background-screen-hover);
+
+        .wds-list-item-control-wrapper {
+            .wds-Button {
+              background-color: var(--Button-background-hover);
+              color: var(--Button-color-hover);
+              transition: none;
+            }
         }
-      }
     }
 
-    // non-spotlighted list item has no horizontal padding so the focus
-    // and hover styles have to be rendered out of bounds.
-    &:not(.wds-list-item-spotlight) {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        &:before {
-          .ring();
-          content: '';
-          position: absolute;
-          inset: 0 -8px;
-          border-radius: var(--radius-medium);
-          outline-offset: -1px;
-        }
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover,
-        &:active {
-          &:before {
-            content: '';
-            position: absolute;
-            inset: 0 -8px;
-            border-radius: var(--radius-medium);
-          }
-        }
-
-        &:hover:before {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active:before {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover:before {
-          background-color: unset;
-        }
-      }
+    &:not(.disabled, :disabled):active {
+        background-color: var(--color-background-screen-active);
     }
 
-    &:not(.disabled, :disabled):hover {
-      .wds-list-item-control-wrapper {
+    .wds-list-item-button-control {
         .wds-Button {
-          background-color: var(--Button-background-hover);
-          color: var(--Button-color-hover);
           transition: none;
         }
       }
-    }
 
-    .wds-list-item-button-control {
-        .wds-Button {
-          transition: none;
-        }
+    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+      &:hover {
+        background-color: unset;
+      }
     }
   }
 
@@ -212,9 +162,6 @@
 
 
   &-spotlight {
-      padding-left: var(--size-12);
-      padding-right: var(--size-12);
-
       &-active {
           background-color: var(--color-background-neutral);
           &:not(.disabled, :disabled):hover {

package/src/listItem/_stories/ListItem.story.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
+import Emphasis from '../../emphasis';
 import { ListItem, Props as ItemProps } from '../ListItem';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -277,9 +278,9 @@ export const Responsiveness: Story = {
     return (
       <ol
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
+        style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
       >
-        <div style={{ width: '290px' }}>
+        <div style={{ width: '320px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -289,7 +290,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '350px' }}>
+        <div style={{ width: '360px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -299,7 +300,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '381px' }}>
+        <div style={{ width: '400px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -425,7 +426,7 @@ export const Spotlight: Story = {
  * All of these limitations were put in place to ensure that the list item is compliant with
  * accessibility guidance and offers consistent experience across all engineering platforms.
  *
- * Please refer to the [design documentation](https://wise.design/components/list-item#:~:text=specific%20list%20item.-,Interaction,-The%20list%20item) for more details.
+ * Please refer to the [design documentation](https://wise.design/components/list-item#interaction) for more details.
  */
 export const Interactivity: Story = {
   render: function Render() {
@@ -501,6 +502,8 @@ export const Interactivity: Story = {
  * to a new icon for improved user experience and accessibility. <br />
  * For the same reason, only the control part of the List Item is dimmed, while all the content
  * retains high contrast and interactivity.
+ *
+ * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
  */
 export const Disabled: Story = {
   parameters: {
@@ -668,3 +671,37 @@ export const Disabled: Story = {
     </div>
   ),
 };
+
+/**
+ * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
+ * That said, most of them should be fed with plain text only. The exception is `valueTitle`
+ * and `valueSubtitle` which can be augmented with sentiment colours, strikethrough or bold
+ * styles. <br />
+ *
+ * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
+ */
+export const StylingLabels: Story = {
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    media: MEDIA.image,
+    control: CONTROLS.iconButton,
+    prompt: PROMPTS.interactive,
+  },
+  render: function Render(args) {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          {...args}
+          valueTitle={<Emphasis text="<negative>100 GBP</negative>" />}
+          valueSubtitle={<s>125 GBP</s>}
+        />
+        <ListItem
+          {...args}
+          valueTitle={<Emphasis text="<positive>100 GBP</positive>" />}
+          valueSubtitle={<strong>125 GBP</strong>}
+        />
+      </ol>
+    );
+  },
+};

package/src/main.css

@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 296px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -3056,59 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -3160,12 +3131,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);