fix(wizard): update left border color of currently active step

projects/angular/src/wizard/STYLES.md

@@ -16,6 +16,7 @@
 | --clr-wizard-stepnav-border-size | Wizard navigation border size |
 | --clr-wizard-stepnav-item-border-color | Wizard navigation border color |
 | --clr-wizard-stepnav-item-border-color--active | Wizard navigation item complete border color (misnamed) |
+| --clr-wizard-stepnav-selected-border-color | Wizard navigation border color of current not completed step |
 | --clr-wizard-stepnav-active-bgcolor | _Deprecated in v18_ Wizard navigation background color for the currently selected element |
 | --clr-wizard-stepnav-selected-bgcolor | Wizard navigation background color for the currently selected element |
 | --clr-wizard-stepnav-selected-hover-bgcolor | Wizard navigation background color for the currently hovered selected element |

projects/angular/src/wizard/_properties.wizard.scss

@@ -31,6 +31,7 @@
  --clr-wizard-stepnav-border-size: #{tokens.$cds-global-space-3};
  // @TODO v18 rename to --clr-wizard-stepnav-item-complete-border-color
  --clr-wizard-stepnav-item-border-color--active: #{tokens.$cds-alias-status-success};
+ --clr-wizard-stepnav-selected-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
  // @TODO v18 remove in favor of --clr-wizard-stepnav-selected-bgcolor
  --clr-wizard-stepnav-active-bgcolor: #{tokens.$cds-alias-object-interaction-background-selected};
  --clr-wizard-stepnav-selected-bgcolor: var(--clr-wizard-stepnav-active-bgcolor);

projects/angular/src/wizard/_variables.wizard.scss

@@ -23,6 +23,7 @@ $clr-wizard-stepnav-border-color: var(--clr-wizard-stepnav-border-color) !defaul
 $clr-wizard-stepnav-border-size: var(--clr-wizard-stepnav-border-size) !default;
 $clr-wizard-stepnav-item-border-color: var(--clr-wizard-stepnav-item-border-color) !default;
 $clr-wizard-stepnav-item-border-color--active: var(--clr-wizard-stepnav-item-border-color--active) !default;
+$clr-wizard-stepnav-selected-border-color: var(--clr-wizard-stepnav-selected-border-color) !default;
 $clr-wizard-stepnav-active-bgcolor: var(--clr-wizard-stepnav-active-bgcolor) !default;
 $clr-wizard-stepnav-selected-bgcolor: var(--clr-wizard-stepnav-selected-bgcolor) !default;
 $clr-wizard-stepnav-selected-hover-bgcolor: var(--clr-wizard-stepnav-selected-hover-bgcolor) !default;

projects/angular/src/wizard/_wizard.clarity.scss

@@ -187,6 +187,7 @@
  &.active {
  color: wizard-variables.$clr-wizard-stepnav-text--active;
  background-color: wizard-variables.$clr-wizard-stepnav-selected-bgcolor;
+ border-left-color: wizard-variables.$clr-wizard-stepnav-selected-border-color;
 
  &:hover {
  background-color: wizard-variables.$clr-wizard-stepnav-selected-hover-bgcolor;