Esri · anveshmekala · Jul 10, 2023 · Jul 7, 2023 · Jul 7, 2023 · Jul 10, 2023
@@ -1,5 +1,4 @@
 {
   "invalid": "Invalid",
-  "tooLong": "Character limit exceeded",
-  "longText": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
+  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "غير صالح",
-  "tooLong": "تم تجاوز حد الأحرف",
-  "longText": "طول الأحرف الحالي هو {currentLength}، والذي يتجاوز الحد الأقصى لطول أحرف {maxLength}."
+  "tooLong": "طول الأحرف الحالي هو {currentLength}، والذي يتجاوز الحد الأقصى لطول أحرف {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Невалидно",
-  "tooLong": "Превишен лимит за символи",
-  "longText": "Текущата дължина на знака е{currentLength}, която надвишава максималната дължина на знака от{maxLength}."
+  "tooLong": "Текущата дължина на знака е{currentLength}, която надвишава максималната дължина на знака от{maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Nevažeće",
-  "tooLong": "Premašeno je ograničenje znakova",
-  "longText": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
+  "tooLong": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "No vàlid",
-  "tooLong": "S'ha excedit el límit de caràcters",
-  "longText": "La longitud de caràcters actual és de {currentLength}, que supera la longitud de caràcters màxima de {maxLength}."
+  "tooLong": "La longitud de caràcters actual és de {currentLength}, que supera la longitud de caràcters màxima de {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Neplatný",
-  "tooLong": "Překročen limit počtu znaků",
-  "longText": "Aktuální počet znaků je {currentLength}, což překračuje maximální počet znaků {maxLength}."
+  "tooLong": "Aktuální počet znaků je {currentLength}, což překračuje maximální počet znaků {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Ugyldig",
-  "tooLong": "Grænsen for antallet af tegn er overskredet",
-  "longText": "Den aktuelle tegnlængde er {currentLength}, hvilket overskrider den maksimale tegnlængde på {maxLength}."
+  "tooLong": "Den aktuelle tegnlængde er {currentLength}, hvilket overskrider den maksimale tegnlængde på {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Ungültig",
-  "tooLong": "Zeichenlimit wurde überschritten",
-  "longText": "Die aktuelle Zeichenanzahl beträgt {currentLength} und überschreitet damit die maximal zulässige Anzahl von {maxLength} Zeichen."
+  "tooLong": "Die aktuelle Zeichenanzahl beträgt {currentLength} und überschreitet damit die maximal zulässige Anzahl von {maxLength} Zeichen."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Μη έγκυρο",
-  "tooLong": "Υπέρβαση ορίου χαρακτήρων",
-  "longText": "Το τρέχον μήκος χαρακτήρων είναι {currentLength}, το οποίο υπερβαίνει το μέγιστο μήκος χαρακτήρων του {maxLength}."
+  "tooLong": "Το τρέχον μήκος χαρακτήρων είναι {currentLength}, το οποίο υπερβαίνει το μέγιστο μήκος χαρακτήρων του {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Invalid",
-  "tooLong": "Character limit exceeded",
-  "longText": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
+  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "No válido",
-  "tooLong": "Se superó el límite de caracteres",
-  "longText": "La longitud de caracteres actual es de {currentLength}, lo cual supera la longitud de caracteres máxima de {maxLength}."
+  "tooLong": "La longitud de caracteres actual es de {currentLength}, lo cual supera la longitud de caracteres máxima de {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Sobimatu",
-  "tooLong": "Tähemärkide piirang on ületatud",
-  "longText": "Praegune tähemärkide arv on {currentLength}, mis ületab tähemärkide maksimaalse arvu{maxLength}."
+  "tooLong": "Praegune tähemärkide arv on {currentLength}, mis ületab tähemärkide maksimaalse arvu{maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Virheellinen",
-  "tooLong": "Merkkien määrä ylitetty",
-  "longText": "Nykyinen merkkipituus on {currentLength}, joka ylittää {maxLength} merkkien enimmäispituuden."
+  "tooLong": "Nykyinen merkkipituus on {currentLength}, joka ylittää {maxLength} merkkien enimmäispituuden."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Non valide",
-  "tooLong": "Limite de caractères dépassée",
-  "longText": "La longueur actuelle de caractères est de {currentLength}, ce qui dépasse la longueur maximale de {maxLength} caractères."
+  "tooLong": "La longueur actuelle de caractères est de {currentLength}, ce qui dépasse la longueur maximale de {maxLength} caractères."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "לא תקין",
-  "tooLong": "חריגה ממגבלת מספר התווים",
-  "longText": "אורך התו הנוכחי הוא {currentLength}, אשר חורג מאורך התו המרבי של {maxLength}."
+  "tooLong": "אורך התו הנוכחי הוא {currentLength}, אשר חורג מאורך התו המרבי של {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Nevažeće",
-  "tooLong": "Premašeno je ograničenje znakova",
-  "longText": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
+  "tooLong": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Érvénytelen",
-  "tooLong": "Karakterkorlát túllépve",
-  "longText": "Az aktuális karakterhossz {currentLength}, ami meghaladja a maximális {maxLength} karakterhosszúságot."
+  "tooLong": "Az aktuális karakterhossz {currentLength}, ami meghaladja a maximális {maxLength} karakterhosszúságot."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Tidak valid",
-  "tooLong": "Batas karakter terlampaui",
-  "longText": "Panjang karakter saat ini adalah {currentLength}, yang mana melebihi panjang karakter maksimum {maxLength}."
+  "tooLong": "Panjang karakter saat ini adalah {currentLength}, yang mana melebihi panjang karakter maksimum {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Non valido",
-  "tooLong": "Limite di caratteri superato",
-  "longText": "La lunghezza in caratteri corrente è {currentLength}, superiore al limite massimo di {maxLength}."
+  "tooLong": "La lunghezza in caratteri corrente è {currentLength}, superiore al limite massimo di {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "無効",
-  "tooLong": "文字制限を超えています",
-  "longText": "現在の文字数は {currentLength} です。これは、文字数の最大値である {maxLength} 文字を超過しています。"
+  "tooLong": "現在の文字数は {currentLength} です。これは、文字数の最大値である {maxLength} 文字を超過しています。"
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "잘못됨",
-  "tooLong": "문자 제한을 초과함",
-  "longText": "현재 문자 길이({currentLength})가 최대 문자 길이({maxLength})를 초과합니다."
+  "tooLong": "현재 문자 길이({currentLength})가 최대 문자 길이({maxLength})를 초과합니다."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Neteisingas",
-  "tooLong": "Viršytas simbolių limitas",
-  "longText": "Dabartinis simbolių skaičius yra {currentLength}, o tai viršija maksimalų {maxLength} simbolių ilgį."
+  "tooLong": "Dabartinis simbolių skaičius yra {currentLength}, o tai viršija maksimalų {maxLength} simbolių ilgį."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Nederīgs",
-  "tooLong": "Pārsniegts rakstzīmju skaita ierobežojums",
-  "longText": "Pašreizējais rakstzīmju garums ir {currentLength}, kas pārsniedz maksimālo rakstzīmju garumu {maxLength}."
+  "tooLong": "Pašreizējais rakstzīmju garums ir {currentLength}, kas pārsniedz maksimālo rakstzīmju garumu {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Ongeldig",
-  "tooLong": "Tekenlimiet overschreden",
-  "longText": "Het huidige aantal tekens is {currentLength}, wat meer is dan het maximumaantal van {maxLength} tekens."
+  "tooLong": "Het huidige aantal tekens is {currentLength}, wat meer is dan het maximumaantal van {maxLength} tekens."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Ugyldig",
-  "tooLong": "Maksimumsgrensen for antall tegn er overskredet",
-  "longText": "Den nåværende tegnlengden er {currentLength}, som overskrider den maksimalt tillatte tegnlengden på {maxLength}."
+  "tooLong": "Den nåværende tegnlengden er {currentLength}, som overskrider den maksimalt tillatte tegnlengden på {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Niepoprawny",
-  "tooLong": "Przekroczono limit liczby znaków",
-  "longText": "Bieżąca liczba znaków wynosi {currentLength}, co przekracza maksymalną liczbę znaków {maxLength}."
+  "tooLong": "Bieżąca liczba znaków wynosi {currentLength}, co przekracza maksymalną liczbę znaków {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Inválido",
-  "tooLong": "Limite de caracteres excedido",
-  "longText": "O comprimento atual do caractere é {currentLength}, que exceda o comprimento máximo de caracteres de {maxLength}."
+  "tooLong": "O comprimento atual do caractere é {currentLength}, que exceda o comprimento máximo de caracteres de {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Inválido",
-  "tooLong": "Limite de carateres ultrapassado",
-  "longText": "O comprimento atual dos caracteres é {currentLength}, o que excede o comprimento máximo de caracteres de {maxLength}."
+  "tooLong": "O comprimento atual dos caracteres é {currentLength}, o que excede o comprimento máximo de caracteres de {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Nevalid",
-  "tooLong": "Limită de caractere depășită",
-  "longText": "Lungimea maximă a caracterelor curentă este {currentLength}, ceea ce depășește lungimea maximă a caracterelor de maximum {maxLength}."
+  "tooLong": "Lungimea maximă a caracterelor curentă este {currentLength}, ceea ce depășește lungimea maximă a caracterelor de maximum {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Недопустимый",
-  "tooLong": "Превышен лимит символов",
-  "longText": "Текущая длина символов - {currentLength}, что превышает максимальную длину символов {maxLength}."
+  "tooLong": "Текущая длина символов - {currentLength}, что превышает максимальную длину символов {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Neplatné",
-  "tooLong": "Bol prekročený limit počtu znakov",
-  "longText": "Aktuálna dĺžka znaku je {currentLength}, čo presahuje maximálnu dĺžku {maxLength}."
+  "tooLong": "Aktuálna dĺžka znaku je {currentLength}, čo presahuje maximálnu dĺžku {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Neveljavno",
-  "tooLong": "Presežena je omejitev znakov",
-  "longText": "Trenutna dolžina znakov znaša {currentLength}, kar presega maksimalno dolžino znakov {maxLength}."
+  "tooLong": "Trenutna dolžina znakov znaša {currentLength}, kar presega maksimalno dolžino znakov {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Nevažeće",
-  "tooLong": "Prekoračeno ograničenje znakova",
-  "longText": "Trenutno ograničenje za broj karaktera je {currentLength}, što prekoračuje maksimalni broj dužine karaktera od {maxLength}."
+  "tooLong": "Trenutno ograničenje za broj karaktera je {currentLength}, što prekoračuje maksimalni broj dužine karaktera od {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Ogiltig",
-  "tooLong": "Teckengränsen överskriden",
-  "longText": "Den aktuella teckenlängden är {currentLength}, vilket överskrider den maximala teckenlängden på {maxLength}."
+  "tooLong": "Den aktuella teckenlängden är {currentLength}, vilket överskrider den maximala teckenlängden på {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "ไม่ถูกต้อง",
-  "tooLong": "เกินขีดจำกัดอักขระ",
-  "longText": "ความยาวจำนวนอักขระในปัจจุบันคือ {currentLength} ซึ่งเกินความยาวจำนวนอักขระสูงสุดที่ {maxLength}"
+  "tooLong": "ความยาวจำนวนอักขระในปัจจุบันคือ {currentLength} ซึ่งเกินความยาวจำนวนอักขระสูงสุดที่ {maxLength}"
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Geçersiz",
-  "tooLong": "Karakter sınırı aşıldı",
-  "longText": "Mevcut karakter uzunluğu {currentLength} ve maksimum karakter uzunluğu {maxLength}'i aşıyor."
+  "tooLong": "Mevcut karakter uzunluğu {currentLength} ve maksimum karakter uzunluğu {maxLength}'i aşıyor."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Неприпустимий",
-  "tooLong": "Перевищено обмеження кількості символів",
-  "longText": "Поточна довжина символу становить {currentLength}, що перевищує максимальну довжину символів {maxLength}."
+  "tooLong": "Поточна довжина символу становить {currentLength}, що перевищує максимальну довжину символів {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "Không hợp lệ",
-  "tooLong": "Đã vượt quá giới hạn ký tự",
-  "longText": "Độ dài ký tự hiện tại là {currentLength}, vượt quá độ dài ký tự tối đa {maxLength}."
+  "tooLong": "Độ dài ký tự hiện tại là {currentLength}, vượt quá độ dài ký tự tối đa {maxLength}."
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "无效",
-  "tooLong": "超出字符限制",
-  "longText": "当前字符长度为 {currentLength}，超过了最大字符长度 {maxLength}。"
+  "tooLong": "当前字符长度为 {currentLength}，超过了最大字符长度 {maxLength}。"
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "無效",
-  "tooLong": "已超過字元限制",
-  "longText": "目前字元長度為 {currentLength}，超過了最大字元長度 {maxLength}。"
+  "tooLong": "目前字元長度為 {currentLength}，超過了最大字元長度 {maxLength}。"
 }
@@ -1,5 +1,4 @@
 {
   "invalid": "無效",
-  "tooLong": "已超過字元限制",
-  "longText": "目前字元長度為 {currentLength}，超過了最大字元長度 {maxLength}。"
+  "tooLong": "目前字元長度為 {currentLength}，超過了最大字元長度 {maxLength}。"
 }
diff --git a/packages/calcite-components/src/components/text-area/interfaces.ts b/packages/calcite-components/src/components/text-area/interfaces.ts
@@ -0,0 +1,4 @@
+export interface CharacterLengthObj {
+  currentLength: string;
+  maxLength: string;
+}
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -45,6 +45,7 @@ import {
   InteractiveComponent,
   updateHostInteraction
 } from "../../utils/interactive";
+import { CharacterLengthObj } from "./interfaces";
 
 /**
  * @slot - A slot for adding text.
@@ -363,6 +364,8 @@ export class TextArea
 
   @State() effectiveLocale = "";
 
+  @State() localizedCharacterLengthObj: CharacterLengthObj;
+
   @Watch("effectiveLocale")
   effectiveLocaleChange(): void {
     updateMessages(this, this.effectiveLocale);
@@ -402,26 +405,39 @@ export class TextArea
     }
   };
 
-  renderCharacterLimit = (): VNode => {
-    return this.maxLength ? (
-      <span class={CSS.characterLimit}>
-        <span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
-          {this.getLocalizedCharacterLength()}
+  renderCharacterLimit = (): VNode | null => {
+    if (this.maxLength) {
+      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
+      return (
+        <span class={CSS.characterLimit}>
+          <span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
+            {this.localizedCharacterLengthObj.currentLength}
+          </span>
+          {"/"}
+          {this.localizedCharacterLengthObj.maxLength}
         </span>
-        {"/"}
-        {numberStringFormatter.localize(this.maxLength.toString())}
-      </span>
-    ) : null;
+      );
+    }
+    return null;
   };
 
-  getLocalizedCharacterLength(): string {
+  getLocalizedCharacterLength(): CharacterLengthObj {
+    const currentLength = this.value ? this.value.length.toString() : "0";
+    const maxLength = this.maxLength.toString();
+    if (this.numberingSystem === "latn") {
+      return { currentLength, maxLength };
+    }
+
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem,
       signDisplay: "never",
       useGrouping: this.groupSeparator
     };
-    return numberStringFormatter.localize(this.value ? this.value.length.toString() : "0");
+    return {
+      currentLength: numberStringFormatter.localize(currentLength),
+      maxLength: numberStringFormatter.localize(maxLength)
+    };
   }
 
   resizeObserver = createObserver("resize", async () => {
@@ -439,10 +455,16 @@ export class TextArea
   syncHiddenFormInput(input: HTMLInputElement): void {
     input.setCustomValidity("");
     if (this.value?.length > this.maxLength) {
-      input.setCustomValidity(this.messages.tooLong);
+      input.setCustomValidity(this.replacePlaceHoldersInMessages());
     }
   }
 
+  private replacePlaceHoldersInMessages(): string {
+    return this.messages.tooLong
+      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
+      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
+  }
+
   // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
   // throttle is used to avoid flashing of textarea when user resizes.
   private setHeightAndWidthToAuto = throttle(