Fix: Align class names in List

Author: dchyun

packages/components/src/components/hds/stepper/list/step.ts

@@ -74,7 +74,7 @@ export default class HdsStepperListStep extends Component<HdsStepperListStepSign
     const { status = DEFAULT_STATUS } = this.args;
 
     assert(
-      `@status for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(
+      `@status for "Hds::Stepper::List::Step" must be one of the following: ${STATUSES.join(
         ', '
       )}; received: ${status}`,
       STATUSES.includes(status)
@@ -120,7 +120,7 @@ export default class HdsStepperListStep extends Component<HdsStepperListStepSign
   get classNames(): string {
     const classes = ['hds-stepper-list__step'];
 
-    classes.push(`hds-stepper-list__step-${this.status}`);
+    classes.push(`hds-stepper-list__step--${this.status}`);
 
     return classes.join(' ');
   }

packages/components/src/styles/components/stepper/list.scss

@@ -74,25 +74,25 @@ $hds-stepper-list-step-padding-bottom: 16px;
 
 // Complete & Active
 
-.hds-stepper-list__step-complete .hds-stepper-list__step__title,
-.hds-stepper-list__step-progress .hds-stepper-list__step__title,
-.hds-stepper-list__step-processing .hds-stepper-list__step__title {
+.hds-stepper-list__step--complete .hds-stepper-list__step__title,
+.hds-stepper-list__step--progress .hds-stepper-list__step__title,
+.hds-stepper-list__step--processing .hds-stepper-list__step__title {
   color: var(--token-color-foreground-strong);
 }
 
 // Complete
 
 .hds-stepper-list__step {
-  &:not(:last-of-type).hds-stepper-list__step-complete .hds-stepper-list__step__progress::after {
+  &:not(:last-of-type).hds-stepper-list__step--complete .hds-stepper-list__step__progress::after {
     height: calc(100% + $hds-stepper-list-step-padding-bottom - 4px);
   }
 
-  &:not(:last-of-type, :first-of-type).hds-stepper-list__step-complete .hds-stepper-list__step__progress::after {
+  &:not(:last-of-type, :first-of-type).hds-stepper-list__step--complete .hds-stepper-list__step__progress::after {
     top: -4px;
     height: calc(100% + $hds-stepper-list-step-padding-bottom);
   }
 
-  &:not(:first-of-type):last-of-type.hds-stepper-list__step-complete .hds-stepper-list__step__progress::after {
+  &:not(:first-of-type):last-of-type.hds-stepper-list__step--complete .hds-stepper-list__step__progress::after {
     position: absolute;
     top: -4px;
     left: 11px;