fix(step-list): fix border radius of step list elements (#3036)

src/elements/clock/clock.scss

@@ -36,7 +36,8 @@
 }
 
 .sbb-clock__hand-minutes {
-  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
+  transition: transform var(--sbb-disable-animation-zero-time, 0.2s)
+    cubic-bezier(0.4, 2.08, 0.55, 0.44);
 
   @supports not (aspect-ratio: 1 / 1) {
     transform-origin: 50% 49.625%;

src/elements/core/styles/mixins/lists.scss

@@ -81,6 +81,7 @@
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
 
   // Additional space from overall li padding to the text because text
   // has to be centered to marker number.
@@ -117,7 +118,6 @@
     position: relative;
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
-    border-radius: var(--sbb-border-radius-4x);
     padding-block: calc(
         var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
       )
@@ -131,6 +131,16 @@
       var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
     );
 
+    &:first-of-type {
+      border-start-start-radius: var(--sbb-step-list-border-radius);
+      border-start-end-radius: var(--sbb-step-list-border-radius);
+    }
+
+    &:last-of-type {
+      border-end-start-radius: var(--sbb-step-list-border-radius);
+      border-end-end-radius: var(--sbb-step-list-border-radius);
+    }
+
     &::before {
       @include typo.text-xxs--bold;
 

tools/web-test-runner/preload-icons.ts

@@ -28,9 +28,9 @@ const preloadIconList = [
   'chevron-small-right-small',
   'chevron-small-up-small',
   'circle-cross-small',
-  'circle-dotted-small',
   'circle-dotted-part-small',
   'circle-dotted-part-x-small',
+  'circle-dotted-small',
   'circle-exclamation-point-small',
   'circle-information-large',
   'circle-information-medium',
@@ -46,6 +46,7 @@ const preloadIconList = [
   'container-small',
   'context-menu-small',
   'cross-small',
+  'dash-small',
   'delay',
   'diamond-small',
   'disruption',
@@ -61,7 +62,9 @@ const preloadIconList = [
   'hamburger-menu-small',
   'heart-medium',
   'house-small',
+  'ic-35',
   'info',
+  'ir-27',
   'ir-35',
   'ir-37',
   'link-small',
@@ -88,7 +91,10 @@ const preloadIconList = [
   'sa-r',
   'sa-rr',
   'sa-rs',
+  'sa-tg',
+  'sa-vr',
   'sa-wr',
+  'sa-z',
   'shopping-cart-small',
   'swisspass-medium',
   'swisspass-small',
@@ -101,22 +107,24 @@ const preloadIconList = [
   'travel-backpack-medium',
   'user-small',
   'utilization-high',
-  'utilization-low',
-  'utilization-medium',
-  'utilization-none',
   'utilization-high-high-contrast',
-  'utilization-low-high-contrast',
-  'utilization-medium-high-contrast',
-  'utilization-none-high-contrast',
   'utilization-high-negative',
+  'utilization-low',
+  'utilization-low-high-contrast',
   'utilization-low-negative',
+  'utilization-medium',
+  'utilization-medium-high-contrast',
   'utilization-medium-negative',
+  'utilization-none',
+  'utilization-none-high-contrast',
   'utilization-none-negative',
   'walk-fast-small',
   'walk-slow-small',
   'walk-small',
   'picto:bus-right',
+  'picto:jetty-right',
   'picto:train-right',
+  'picto:tram-right',
 ];
 
 export interface PreloadedIcon {

tools/web-test-runner/visual-regression-plugin-config.ts

@@ -39,6 +39,7 @@ writeFileSync(new URL(`./${metaFileName}`, screenshotsDir), JSON.stringify(meta)
 
 export const visualRegressionConfig = {
   baseDir: 'dist/screenshots',
+  diffOptions: { threshold: 0.03 },
   async getBaseline({ filePath, name }) {
     const baselineFileUrl = baselineUrl + name + extname(filePath);
     const infoFilePath = filePath + '.json';