fix(stepper): selects next enabled stepper-item when first one is dis…

…abled (#8004)

**Related Issue:** #7953 

## Summary

Selects next enabled `calcite-stepper-item` when the first one is
disabled.

packages/calcite-components/src/components/stepper/stepper.e2e.ts

@@ -663,4 +663,21 @@ describe("calcite-stepper", () => {
     await page.waitForChanges();
     expect(stepperItem2.getAttribute("aria-current")).toEqual("step");
   });
+
+  it("should select the next enabled stepper-item if first stepper-item is disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-stepper>
+      <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+        <div>Step 1 content</div>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Step 2" id="step-2">
+        <div>Step 2 content</div>
+      </calcite-stepper-item>
+    </calcite-stepper>`);
+
+    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+
+    expect(await stepperItem1.getProperty("selected")).toBe(false);
+    expect(await stepperItem2.getProperty("selected")).toBe(true);
+  });
 });

packages/calcite-components/src/components/stepper/stepper.stories.ts

@@ -160,10 +160,8 @@ export const overriddenWidth_TestOnly = (): string => html` <calcite-stepper num
 </calcite-stepper>`;
 
 export const disabled_TestOnly = (): string => html`<calcite-stepper>
-  <calcite-stepper-item heading="item1" complete>1</calcite-stepper-item>
+  <calcite-stepper-item heading="item1" complete disabled>1</calcite-stepper-item>
   <calcite-stepper-item heading="item2">2</calcite-stepper-item>
-  <calcite-stepper-item heading="item3" selected>3</calcite-stepper-item>
-  <calcite-stepper-item heading="item4" disabled>4</calcite-stepper-item>
 </calcite-stepper>`;
 
 export const arabicNumberingSystem_TestOnly = (): string => html` <calcite-stepper

packages/calcite-components/src/components/stepper/stepper.tsx

@@ -106,7 +106,7 @@ export class Stepper {
     // if no stepper items are set as active, default to the first one
     if (typeof this.currentPosition !== "number") {
       this.calciteInternalStepperItemChange.emit({
-        position: 0,
+        position: this.getFirstEnabledStepperPosition(),
       });
     }
   }
@@ -333,4 +333,9 @@ export class Stepper {
     this.el.style.gridTemplateColumns = spacing;
     this.setStepperItemNumberingSystem();
   };
+
+  private getFirstEnabledStepperPosition(): number {
+    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);
+    return enabledStepIndex > -1 ? enabledStepIndex : 0;
+  }
 }