@transferwise/components 0.0.0-experimental-e1870f3 → 0.0.0-experimental-302d967

package/src/listItem/ListItem.css

@@ -5,21 +5,21 @@
   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;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" ". info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,17 +29,17 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" ". info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body" "media info";
+    grid-template-areas: "media body" ". info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media prompt";
+    grid-template-areas: "media body" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -93,11 +93,14 @@
     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);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -138,6 +141,9 @@
     margin-bottom: 16px;
     margin-bottom: var(--size-16);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;
@@ -221,7 +227,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 297px) {
   .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 +374,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 +409,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,68 +433,45 @@
   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 {
-  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 {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   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;
+  display: flex;
+  align-items: center;
+}
+.wds-list-item-media-image-wrapper {
+  width: var(--wds-list-item-media-size);
+  height: var(--wds-list-item-media-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .wds-list-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 .wds-list-item-body {
   grid-area: body;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -493,11 +482,18 @@
   gap: var(--size-16);
   word-break: break-word;
 }
-.wds-list-item-title,
-.wds-list-item-title-value {
+.wds-list-item-title {
   color: #37517e;
   color: var(--color-content-primary);
 }
+.wds-list-item-value {
+  text-align: right;
+}
+.wds-list-item-body-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .wds-list-item-additional-info {
   grid-area: info;
   color: #768e9c;
@@ -505,12 +501,13 @@
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
 }
-.wds-list-item-value {
-  align-items: end;
-  text-align: right;
-}
 .wds-list-item-control-wrapper {
   grid-area: control;
+  align-content: center;
+}
+.wds-list-item-navigation .tw-icon-chevron-right {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
 }
 .wds-list-item-control {
   flex: 0 0 auto;
@@ -526,12 +523,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);
@@ -544,6 +535,8 @@
 }
 .wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
 }
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
@@ -556,34 +549,6 @@
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
-.wds-list-item .wds-list-item-spotlight__border {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.wds-list-item .wds-list-item-spotlight__border rect {
-  --wds-list-item-spotlight-borderWidth: 1px;
-  --wds-list-item-spotlight-borderWidthOffset: 0.5px;
-  --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
-  fill: none;
-  stroke: rgba(0,0,0,0.10196);
-  stroke: var(--color-border-neutral);
-  width: calc(100% - 1px);
-  width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-  height: calc(100% - 1px);
-  height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-  x: 0.5px;
-  x: var(--wds-list-item-spotlight-borderWidthOffset);
-  y: 0.5px;
-  y: var(--wds-list-item-spotlight-borderWidthOffset);
-  rx: calc(16px - 0.5px);
-  rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-  ry: calc(16px - 0.5px);
-  ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-  stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
-  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
-}
 .wds-list-item-prompt {
   grid-area: prompt;
   display: inline-flex;

package/src/listItem/ListItem.grid.css

@@ -5,21 +5,21 @@
   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;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" ". info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,17 +29,17 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" ". info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body" "media info";
+    grid-template-areas: "media body" ". info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media prompt";
+    grid-template-areas: "media body" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -93,11 +93,14 @@
     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);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -138,6 +141,9 @@
     margin-bottom: 16px;
     margin-bottom: var(--size-16);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;
@@ -221,7 +227,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 297px) {
   .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,15 +3,15 @@
     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;
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
-              "media prompt prompt";
+              ". info ."
+              ". prompt prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -19,7 +19,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
+              ". info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -27,7 +27,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media prompt prompt";
+              ". prompt prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
@@ -44,8 +44,8 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body"
-              "media info"
-              "media prompt";
+              ". info"
+              ". prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -53,7 +53,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body"
-              "media info" 
+              ". info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -61,7 +61,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body"
-              "media prompt";
+              ". prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
@@ -82,7 +82,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
               "prompt prompt";
         }
 
@@ -91,7 +91,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -149,10 +149,14 @@
       }
     }
 
-    @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);
+
+          .wds-list-item-media-image {
+            height: auto;
+          }
         }
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: 1fr auto;
@@ -228,8 +232,12 @@
       }
 
       &.wds-list-item-hasMedia-noControl {
-          .wds-list-item-media {
+        .wds-list-item-media {
           margin-bottom: var(--size-16);
+
+          .wds-list-item-media-image {
+            height: auto;
+          }
         }
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto auto;
@@ -246,7 +254,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media media"
-              "body body" 
+              "body body"
               "info info";
         }
 
@@ -378,7 +386,7 @@
       }
     }
 
-    @container (max-width: 290px) {
+    @container (max-width: 297px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr;
@@ -461,7 +469,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body"
-              "info" 
+              "info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {