[Timeline] Get information of "already completed" steps in the future

[klediouron]

On the timeline component, it's possible to go back (and forward) to already completed steps.

However, there is no visual indication of which future steps are already completed and successful (they are greyed-out).

We need a 'checked' or 'step-completed' state for future steps to avoid mistakenly thinking that the step is not yet completed (greyed out).

Past steps are correctly indicated as checked.

Current:

(Steps 3 & 4 are actually completed thus clickable)

Expected:

[lmullot]

I have a similar needs that doesn't include that the step is past or futur, I juste want that all "valid" step are checked and others stay as default.

<ol class="timeline mod-number mod-L mod-checkedValidStep">
  @for (step of steps; track step) {
    @let isActiveStep = store.activeStep() === step;
    <li class="timeline-step" [attr.aria-current]="isActiveStep ? 'step' : undefined" [class.is-valid]="step | ptIsValidStep">
        ....
    </li>
  }
</ol>

.timeline {
  &.mod-checkedValidStep {
    // Default state, not selected, not valid
    .timeline-step {
      .timeline-step-title {
        color: var(--palettes-neutral-600);

        &::before {
          background-color: var(--palettes-neutral-200);
          color: var(--palettes-neutral-600);
        }

        .timeline-step-title-icon {
          &::before {
            background-color: transparent;
          }
        }
      }
    }

    // Selected state
    .timeline-step:is([aria-current='step']) {
      .timeline-step-title {
        color: var(--palettes-product-800);

        &::before {
          background-color: var(--palettes-product-800);
          color: var(--colors-white-color);
        }
      }
    }

    // Timeline step separator
    .timeline-step:not([aria-current='step']):not(
        [aria-current='step'] ~ .timeline-step
      ):not(.timeline-stepAddBetweenStep)::after {
      border-color: var(--palettes-200, var(--palettes-product-200));
      border-bottom-style: solid;
    }

    // Valid state
    .timeline-step:not([aria-current='step']) {
      &.is-valid {
        .timeline-step-title {
          color: var(--palettes-product-800);

          &::before {
            background-color: var(--palettes-product-300) !important;
            color: var(--palettes-700, var(--palettes-product-700));
          }

          .timeline-step-title-icon {
            &::before {
              left: 7px !important;
              color: var(--palettes-neutral-700) !important;
              font-weight: bold !important;
            }
          }
        }
      }
    }
  }
}