fix(stepper-item): no longer refer numberingSystem from neighbor step…

…per component (#6380)

**Related Issue:** #6331 

## Summary

This PR will fix the issue of `stepper` component's numbers being
localized to the `numberingSystem` specified by neighboring `stepper`
component rendered in same page.

src/components/stepper-item/stepper-item.tsx

@@ -182,12 +182,6 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
     if (this.selected) {
       this.emitRequestedItem();
     }
-
-    numberStringFormatter.numberFormatOptions = {
-      locale: this.effectiveLocale,
-      numberingSystem: this.parentStepperEl?.numberingSystem,
-      useGrouping: false
-    };
   }
 
   componentDidLoad(): void {
@@ -219,11 +213,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
             }
           >
             {this.icon ? this.renderIcon() : null}
-            {this.numbered ? (
-              <div class="stepper-item-number">
-                {numberStringFormatter.numberFormatter.format(this.itemPosition + 1)}.
-              </div>
-            ) : null}
+            {this.numbered ? <div class="stepper-item-number">{this.renderNumbers()}.</div> : null}
             <div class="stepper-item-header-text">
               <span class="stepper-item-heading">{this.heading}</span>
               <span class="stepper-item-description">{this.description}</span>
@@ -372,4 +362,13 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
       this.el
     );
   }
+
+  renderNumbers(): string {
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.parentStepperEl?.numberingSystem,
+      useGrouping: false
+    };
+    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
+  }
 }

src/components/stepper/stepper.e2e.ts

@@ -577,4 +577,30 @@ describe("calcite-stepper", () => {
       });
     });
   });
+
+  it("should render correct numbering-system with multiple stepper component", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-stepper numbered>
+      <calcite-stepper-item heading="Add info" description="Subtitle lorem ipsum" complete id="step-one"
+        >Step 1 Content here lorem ipsum</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper numbered numbering-system="arab" lang="ar" dir="rtl" >
+      <calcite-stepper-item heading="الخطوةالاولى" complete>
+       الخطوة الأولى للمحتوى هنا
+    </calcite-stepper>`);
+    const [stepper1, stepper2] = await page.findAll("calcite-stepper");
+    expect(stepper2.getAttribute("numbering-system")).toEqual("arab");
+
+    await stepper1.click();
+    await page.waitForChanges();
+    await stepper2.click();
+    await page.waitForChanges();
+    await stepper1.click();
+    await page.waitForChanges();
+
+    const stepper1Number = await page.find("calcite-stepper-item[id='step-one'] >>> .stepper-item-number");
+    expect(stepper1Number.textContent).toBe("1.");
+  });
 });

src/components/stepper/stepper.tsx

@@ -143,7 +143,8 @@ export class Stepper {
     event.stopPropagation();
   }
 
-  @Listen("calciteInternalStepperItemRegister") registerItem(event: CustomEvent): void {
+  @Listen("calciteInternalStepperItemRegister")
+  registerItem(event: CustomEvent): void {
     const item = event.target as HTMLCalciteStepperItemElement;
     const { content, position } = event.detail;
 
@@ -153,7 +154,8 @@ export class Stepper {
     event.stopPropagation();
   }
 
-  @Listen("calciteInternalStepperItemSelect") updateItem(event: CustomEvent): void {
+  @Listen("calciteInternalStepperItemSelect")
+  updateItem(event: CustomEvent): void {
     const { position } = event.detail;
 
     if (typeof position === "number") {