fix(stepper): add disabled state to prevent navigation and provide visual feedback

src/app/shared/components/stepper/stepper.component.html

@@ -1,25 +1,27 @@
 <div class="stepper-container">
-
   <!-- Horizontal indicator bar -->
-  <div class="stepper-header">
+  <div class="stepper-header" [class.is-disabled]="disabled()" [attr.aria-disabled]="disabled()">
     @for (step of steps(); track step; let i = $index; let last = $last) {
       <div
         class="stepper-header__item"
         [ngClass]="{
           'is-active': currentStepIndex() === i,
-          'is-completed': currentStepIndex() > i
+          'is-completed': currentStepIndex() > i,
         }"
       >
         <!-- Connecting line before (except first) -->
         @if (i > 0) {
-          <div class="stepper-header__line" [ngClass]="{ 'is-completed': currentStepIndex() > i - 1 }"></div>
+          <div
+            class="stepper-header__line"
+            [ngClass]="{ 'is-completed': currentStepIndex() > i - 1 }"
+          ></div>
         }
 
         <!-- Circle indicator -->
         <div
           class="stepper-header__circle"
           [attr.aria-label]="step.label()"
-          [class.is-clickable]="currentStepIndex() > i"
+          [class.is-clickable]="!disabled() && currentStepIndex() > i"
           (click)="goToStep(i)"
         ></div>
 
@@ -33,5 +35,4 @@
   <div class="stepper-body">
     <ng-content></ng-content>
   </div>
-
 </div>