refactor(i18n)!: reduce list of supported numbering systems (#8217)

**Related Issue:** #8216

## Summary

Reduce the list of supported numbering systems to `arab`, `arabext`, and
`latn` after a discussion in the Internationalization Teams channel.

BREAKING CHANGE: Removed support for the following numbering systems:
`bali`, `beng`, `deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`,
`knda`, `laoo`, `limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`,
`telu`, `thai`, `tibt`

---------

Co-authored-by: JC Franco <[email protected]>

Author: benelan

packages/calcite-components/src/components/date-picker/date-picker.stories.ts

@@ -241,17 +241,6 @@ arabLangNumberingSystem_TestOnly.parameters = {
   chromatic: { diffThreshold: 1 },
 };
 
-export const thaiLangNumberingSystem_TestOnly = (): string =>
-  html`<div style="width: 400px">
-    ${create(
-      "calcite-date-picker",
-      createAttributes({ exceptions: ["lang", "numberingSystem"] }).concat([
-        { name: "lang", value: "th" },
-        { name: "numbering-system", value: "thai" },
-      ])
-    )}
-  </div>`;
-
 export const widthSetToBreakpoints_TestOnly = (): string =>
   createBreakpointStories(html`<calcite-date-picker scale="{scale}" value="2000-11-27"></calcite-date-picker>`);
 

packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts

@@ -66,13 +66,12 @@ export const flipPlacements_TestOnly = (): string => html`
   </script>
 `;
 
-export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string => html`
+export const mediumIconForLargeInput_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       open
       value="1/1/1"
       lang="zh-CN"
-      numbering-system="laoo"
       scale="l"
       start="2020-12-12"
       end="2020-12-16"

packages/calcite-components/src/components/input-number/input-number.stories.ts

@@ -115,34 +115,20 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystemAndMediumIconForLargeInputStyling_TestOnly = (): string =>
+export const mediumIconForLargeInputStyling_TestOnly = (): string =>
   html`
-    <calcite-input-number
-      number-button-type="vertical"
-      lang="ar-EG"
-      numbering-system="hebr"
-      value="123456"
-      scale="l"
-    ></calcite-input-number
+    <calcite-input-number number-button-type="vertical" lang="ar-EG" value="123456" scale="l"></calcite-input-number
     ><calcite-input-number
       number-button-type="vertical"
       lang="ar-EG"
-      numbering-system="hebr"
       value="123456"
       scale="l"
       icon="pen"
     ></calcite-input-number>
-    <calcite-input-number
-      number-button-type="horizontal"
-      lang="ar-EG"
-      numbering-system="hebr"
-      value="123456"
-      scale="l"
-    ></calcite-input-number
+    <calcite-input-number number-button-type="horizontal" lang="ar-EG" value="123456" scale="l"></calcite-input-number
     ><calcite-input-number
       number-button-type="horizontal"
       lang="ar-EG"
-      numbering-system="hebr"
       value="123456"
       scale="l"
       icon="pen"

packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts

@@ -225,9 +225,9 @@ describe("calcite-input-time-picker", () => {
     expect(inputTimePickerValue).toBe(expectedValue);
   });
 
-  it("value displays correctly in the input when it is directly changed for a 24-hour language when a default value is present (thai lang/numberingSystem)", async () => {
-    const locale = "th";
-    const numberingSystem = "thai";
+  it("value displays correctly in the input when it is directly changed for a 24-hour language when a default value is present (arab lang/numberingSystem)", async () => {
+    const locale = "ar";
+    const numberingSystem = "arab";
     const initialValue = "11:00:00";
 
     const page = await newE2EPage();
@@ -665,11 +665,11 @@ describe("calcite-input-time-picker", () => {
     expect(await getInputValue(page)).toBe("٠٢:٣٠:٢٥ م");
 
     inputTimePicker.setProperty("lang", "zh-HK");
-    inputTimePicker.setProperty("numberingSystem", "hanidec");
+    inputTimePicker.setProperty("numberingSystem", "latn");
     await page.waitForChanges();
     await waitForAnimationFrame();
 
-    expect(await getInputValue(page)).toBe("下午〇二:三〇:二五");
+    expect(await getInputValue(page)).toBe("下午02:30");
   });
 
   describe("arabic locale support", () => {

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

@@ -155,9 +155,6 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystem_TestOnly = (): string =>
-  html` <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input>`;
-
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;
 

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

@@ -668,13 +668,16 @@ describe("calcite-stepper", () => {
     const stepper1Number = await page.find("calcite-stepper-item[id='step-one'] >>> .stepper-item-number");
     expect(stepper1Number.textContent).toBe("1.");
 
-    stepper2.setProperty("numberingSystem", "thai");
+    stepper2.setProperty("numberingSystem", "arabext");
     await page.waitForChanges();
+
     const stepper2Number = await page.find("calcite-stepper-item[id='step-two'] >>> .stepper-item-number");
-    const thaiNumeral1 = new Intl.NumberFormat("th", { numberingSystem: "thai" } as NumberStringFormatOptions).format(
-      1
-    );
-    expect(stepper2Number.textContent).toBe(`${thaiNumeral1}.`);
+
+    const arabextNumeral1 = new Intl.NumberFormat("ar", {
+      numberingSystem: "arabext",
+    } as NumberStringFormatOptions).format(1);
+
+    expect(stepper2Number.textContent).toBe(`${arabextNumeral1}.`);
   });
 
   it("should have correct ARIA attributes", async () => {

packages/calcite-components/src/components/text-area/text-area.stories.ts

@@ -70,14 +70,8 @@ export const exceedingMaxLength_TestOnly = (): string => html`
   <calcite-text-area value="Rocky Mountains National Park" max-length="10"> </calcite-text-area>
 `;
 
-export const chineseLangNumberingSystem_TestOnly = (): string => html`
-  <calcite-text-area
-    value="Rocky Mountains National Park"
-    lang="zh-cn"
-    numbering-system="hanidec"
-    group-separator
-    max-length="654321"
-  >
+export const chineseLang_TestOnly = (): string => html`
+  <calcite-text-area value="Rocky Mountains National Park" lang="zh-cn" group-separator max-length="654321">
   </calcite-text-area>
 `;
 

packages/calcite-components/src/demos/_assets/locales.ts

@@ -208,7 +208,6 @@ export const locales: Locale[] = [
   {
     name: "Thai (Thai digits)",
     locale: "th",
-    numberingSystem: "thai",
   },
   {
     name: "Turkish",
@@ -226,27 +225,12 @@ export const locales: Locale[] = [
     name: "Chinese (China)",
     locale: "zh-CN",
   },
-  {
-    name: "Chinese (China) (Hanidec numerals)",
-    locale: "zh-CN",
-    numberingSystem: "hanidec",
-  },
   {
     name: "Chinese (Hong Kong)",
     locale: "zh-HK",
   },
-  {
-    name: "Chinese (Hong Kong) (Hanidec numerals)",
-    locale: "zh-HK",
-    numberingSystem: "hanidec",
-  },
   {
     name: "Chinese (Taiwan)",
     locale: "zh-TW",
   },
-  {
-    name: "Chinese (Taiwan) (Hanidec numerals)",
-    locale: "zh-TW",
-    numberingSystem: "hanidec",
-  },
 ];

packages/calcite-components/src/demos/date-picker.html

@@ -218,33 +218,10 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
       <script type="module">
         import { locales } from "./_assets/locales.js";
 
-        const numberingSystems = [
-          "arab",
-          "arabext",
-          "bali",
-          "beng",
-          "deva",
-          "fullwide",
-          "gujr",
-          "guru",
-          "hanidec",
-          "khmr",
-          "knda",
-          "laoo",
-          "latn",
-          "limb",
-          "mlym",
-          "mong",
-          "mymr",
-          "orya",
-          "tamldec",
-          "telu",
-          "thai",
-          "tibt",
-        ];
-
-        let selectedLang = "th";
-        let selectedNumberingSystem = "thai";
+        const numberingSystems = ["arab", "arabext", "latn"];
+
+        let selectedLang = "ar";
+        let selectedNumberingSystem = "arab";
 
         let localeDatePickerS;
         let localeDatePickerL;

packages/calcite-components/src/utils/locale.ts

@@ -100,30 +100,7 @@ export const locales = [
   "zh-TW",
 ];
 
-export const numberingSystems = [
-  "arab",
-  "arabext",
-  "bali",
-  "beng",
-  "deva",
-  "fullwide",
-  "gujr",
-  "guru",
-  "hanidec",
-  "khmr",
-  "knda",
-  "laoo",
-  "latn",
-  "limb",
-  "mlym",
-  "mong",
-  "mymr",
-  "orya",
-  "tamldec",
-  "telu",
-  "thai",
-  "tibt",
-] as const;
+export const numberingSystems = ["arab", "arabext", "latn"] as const;
 
 export const supportedLocales = [...new Set([...t9nLocales, ...locales])] as const;