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

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Left border color for currently active page is same as future pages
`--cds-alias-status-neutral-tint`.

Issue Number: CDE-2307

## What is the new behavior?
Left border color for currently active page is different than other
pages `--cds-alias-object-interaction-background-highlight`.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

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;