@inseefr/lunatic 3.4.17 → 3.4.19

package/esm/use-lunatic/props/propValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"propValue.js","sourceRoot":"","sources":["../../../src/use-lunatic/props/propValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,UAAU,YAAY,CAC3B,SAAqC,EACrC,IAGC;;IAED,IAAI,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,CAAC,SAAS,CAAC;IACb,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QAChC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;IACxC,CAAC;IACD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,OAAO,MAAM,CAAC,WAAW,CACxB,MAAA,MAAA,SAAS,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;YAC1C,QAAQ,CAAC,IAAI;YACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;SAC5C,CAAC,mCAAI,EAAE,CACR,CAAC;IACH,CAAC;IACD,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC/D,CAAC;IACD,0DAA0D;IAC1D,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAO,MAAM,CAAC,WAAW,CACxB,SAAS,CAAC,UAAU;aAClB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACtD,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC;aAC/B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAK,CAAC,CAAC,CAAC,CAClD,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC"}
+{"version":3,"file":"propValue.js","sourceRoot":"","sources":["../../../src/use-lunatic/props/propValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,UAAU,YAAY,CAC3B,SAAqC,EACrC,IAGC;;IAED,IAAI,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,CAAC,SAAS,CAAC;IACb,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QAChC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;IACxC,CAAC;IACD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,OAAO,MAAM,CAAC,WAAW,CACxB,MAAA,MAAA,SAAS,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;YAC1C,QAAQ,CAAC,IAAI;YACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;SAC5C,CAAC,mCAAI,EAAE,CACR,CAAC;IACH,CAAC;IACD,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC/D,CAAC;IACD,0DAA0D;IAC1D,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAO,sBAAsB,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC;AAED;;GAEG;AACH,SAAS,sBAAsB,CAC9B,UAAwC,EACxC,SAAgC;IAEhC,OAAO,MAAM,CAAC,WAAW,CACxB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QACxB,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5D,CAAC;QACD,IAAI,YAAY,IAAI,CAAC,EAAE,CAAC;YACvB,OAAO,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;QACxE,CAAC;QACD,OAAO,EAAE,CAAC;IACX,CAAC,CAAC,CACF,CAAC;AACH,CAAC"}

package/esm/use-lunatic/props/propValue.spec.js

@@ -18,7 +18,7 @@ describe('fillComponentValue', () => {
             },
         }));
     };
-    describe('response', () => {
+    describe('single response', () => {
         const component = {
             response: { name: 'PRENOM' },
         };
@@ -31,7 +31,7 @@ describe('fillComponentValue', () => {
             expectFilledComponent(component, { PRENOM: ['John', 'Renaud'] }, 3).toBe(undefined);
         });
     });
-    describe('responses', () => {
+    describe('multiple responses', () => {
         const component = {
             responses: times(3, (k) => ({
                 response: { name: `NAME${k}` },
@@ -50,5 +50,52 @@ describe('fillComponentValue', () => {
             });
         });
     });
+    describe('Loop component with nested components', () => {
+        const loopComponent = {
+            id: 'm7j9kwro',
+            componentType: 'Loop',
+            components: [
+                {
+                    id: 'm7j9iem8',
+                    componentType: 'Sequence',
+                },
+                {
+                    id: 'question-m7j9q1ep',
+                    componentType: 'Question',
+                    components: [
+                        {
+                            id: 'm7j9q1ep',
+                            componentType: 'Input',
+                            response: { name: 'VOTREPRENO' },
+                        },
+                    ],
+                },
+                {
+                    id: 'question-m7jb81xh',
+                    componentType: 'Question',
+                    components: [
+                        {
+                            id: 'm7jb81xh',
+                            componentType: 'InputNumber',
+                            response: { name: 'VOTREAGE' },
+                        },
+                    ],
+                },
+            ],
+        };
+        it('should correctly extract values from nested responses as arrays', () => {
+            const values = {
+                VOTREPRENO: ['Alice', 'Bob', 'Charlie'],
+                VOTREAGE: [22, 30, 40],
+            };
+            expectFilledComponent(loopComponent, values).toEqual(values);
+        });
+        it('should return null for missing responses', () => {
+            expectFilledComponent(loopComponent).toEqual({
+                VOTREPRENO: null,
+                VOTREAGE: null,
+            });
+        });
+    });
 });
 //# sourceMappingURL=propValue.spec.js.map

package/esm/use-lunatic/props/propValue.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"propValue.spec.js","sourceRoot":"","sources":["../../../src/use-lunatic/props/propValue.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,6BAA6B;IAC7B,MAAM,qBAAqB,GAAG,CAC7B,SAAqC;IACrC,6BAA6B;IAC7B,SAAkC,EAAE;IACpC,kBAAkB;IAClB,SAAkB,EACjB,EAAE;QACH,OAAO,MAAM,CACZ,YAAY,CAAC,SAAS,EAAE;YACvB,SAAS,EAAE,qBAAqB,CAAC,cAAc,CAAC,MAAM,CAAC;YACvD,KAAK,EAAE;gBACN,OAAO,EAAE,CAAC;gBACV,IAAI,EAAE,CAAC;gBACP,SAAS;aACT;SACD,CAAC,CACF,CAAC;IACH,CAAC,CAAC;IAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG;YACjB,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SACW,CAAC;QAEzC,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;YAC3C,qBAAqB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClE,qBAAqB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;YACpD,qBAAqB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CACvE,QAAQ,CACR,CAAC;YACF,qBAAqB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CACvE,SAAS,CACT,CAAC;QACH,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QAC1B,MAAM,SAAS,GAAG;YACjB,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,EAAE;aAC9B,CAAC,CAAC;SAC4C,CAAC;QAEjD,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC9C,qBAAqB,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC;gBACxC,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI;aACX,CAAC,CAAC;YACH,qBAAqB,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC;gBACzD,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI;aACX,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"propValue.spec.js","sourceRoot":"","sources":["../../../src/use-lunatic/props/propValue.spec.ts"],"names":[],"mappings":"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"}

package/main.css

@@ -611,6 +611,16 @@ fieldset {
   background-color: var(--color-error);
 }
 
+.characters-count {
+  display: block;
+  font-size: 12px;
+  padding-top: 0.3rem;
+}
+
+.max-length-reached {
+  color: red;
+}
+
 .lunatic-component .lunatic-input-number {
   display: inline-block;
 }

package/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/css/main.scss","../src/css/components/Button.scss","../src/css/components/CheckboxGroup.scss","../src/css/components/CheckboxOne.scss","../src/css/components/CheckboxOption.scss","../src/css/components/Combobox.scss","../src/css/components/ComponentErrors.scss","../src/css/components/Datepicker.scss","../src/css/components/Declarations.scss","../src/css/components/Dropdown.scss","../src/css/components/Duration.scss","../src/css/components/Fieldset.scss","../src/css/components/IconButton.scss","../src/css/components/Input.scss","../src/css/components/InputNumber.scss","../src/css/components/Label.scss","../src/css/components/Missing.scss","../src/css/components/ModalControls.scss","../src/css/components/RosterForLoop.scss","../src/css/components/Roundabout.scss","../src/css/components/Sequence.scss","../src/css/components/Suggester.scss","../src/css/components/Table.scss","../src/css/components/Textarea.scss","../src/css/components/VariableStatus.scss","../src/css/components/Dragger.scss","../src/css/components/SuggesterWidget.scss"],"names":[],"mappings":";AAAA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAkBD;AAyBC;AA+BA;;AAvDA;EACC;EACA;;AAED;EACC;EACA;;AAID;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;EACA;EACA;EACA;EACA;;AASD;EACC;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAED;EACC;;AAMF;EAxEA;EACA;;AA0EA;EA3EA;EACA;;AA6EA;EACC;EA1ED;EACA;EACA;;AAEA;EACC;;AAwED;EA7EA;EACA;EACA;;AAEA;EACC;;AA4ED;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AACA;EACC;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;;AAMJ;EACC;;;AC1JD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;;;ACnBA;EACC;EACA;;AAGF;EACC;EACA;EACA;;;ACRA;EACC;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AACA;EACC;;;ACdJ;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;;;AAGD;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;;;AAMD;AAAA;EACC;;;AAMF;EACC;;AAEA;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AC1DD;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EApCL;;AAuCK;EAhDL;EASA;EAPA;EACA;EACA;EACA;;AAgDI;EACC;EACA;EACA;EACA;EAhDL;EAkDK;EACA;EACA;EA7DL;EASA;EAPA;EACA;EACA;EACA;;AA2DK;EACC;EACA;EACA;;AAGD;EACC;;AAKH;EAnEH;EAqEI;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;EACA;;AAQN;EACC;EACA;EACA;EACA;;AACA;EACC;;AAIA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AACA;EACC;EACA;EACA;EACA;EAKA;;AAJA;EACC;;AAMF;EAEC;EACA;EACA;EACA;;AACA;EACC;;AAKH;AAAA;AAAA;AAAA;EAIC;EACA;EACA;EACA;;AAIA;EACC;;AAED;EApMH;EACA;EACA;;;ACFA;EACC;;;ACFF;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AChBA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;;AACA;EACC;;;ACxBD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;;ACjCJ;AAAA;EAEC;EACA;EACA;;;AAED;EACC;;;ACPD;EACC;EACA;EACA;;;ACHD;EACC;EACA;;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AChCA;AAAA;AAAA;AAAA;EACC;;AACA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;ACtCF;EACC;;AAEA;EACC;;;ACNF;EACC;EACA;;;ACHF;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;ACzBD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;;AAMF;AAAA;AAAA;AAAA;EAIC;EACA;;AAGF;EACC;EACA;;;AClBF;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;;;ACnCH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAED;AAAA;EAEC;;;ACtCA;EACC;EACA;EACA;EACA;EACA;EACA;;;AC8BD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACC;;AACA;EACC;EACA;EACA;;AAOC;EACC;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EAtEN;;AAyEM;EAjEN;EARA;EAUA;EACA;EACA;EACA;;AAiEK;EACC;EACA;EACA;EACA;EACA;EAnFN;;AAsFM;EACC;EA/EP;EARA;EAUA;EACA;EACA;EACA;;AA6EM;EACC;EACA;EACA;;AAGD;EACC;;AAKH;EAtGJ;EAwGK;EACA;EACA;EACA,YACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AASP;EACC;EACA;EACA;;AAEA;EACC;;AAjIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsHA;EACC;;AArIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0HA;EACC;;AAzIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA+HA;EACC;EACA;;AACA;EACC;EACA;EACA;;;ACrKJ;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA,YACC;;AAKD;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;;;ACxCA;EACC;EACA;;;ACLF;EACC;AAMA;AAUA;;AAdA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;;AC/BJ;EACC;EACA;EACA;EACA;EACA;EACA;;;ACaA;EACC;EACA;;AAED;EACC;EACA;EACA,kBA1BO;EA2BP;EACA;EACA;EACA;;AAlBD;EACC;EACA;;AAoBA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA,OAxCK;EAyCL;EACA;EACA;;AAED;EACC,OA9CK;EA+CL;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA,kBA1DK;;AA4DL;EACC;EACA;;AAGD;EACC,kBAjEI;EAkEJ;EACA;;AAIA;EACC;EACA;EACA,MA5EG;;AAiFN;EACC;EACA;EACA;EACA;;AAGC;EACC,cAvFG;EAwFH;EAMA;;AALA;EACC,kBA1FE;EA2FF;;AAOH;EACC;EACA;EACA;;AACA;EACC,kBAxGG;EAyGH;;AAMJ;EACC;EACA;EACA;EACA,kBApHM;EAqHN;EACA;EACA;EACA;EACA;;AAGC;EACC;;AAIF;EACC;EACA;EACA,MAnIK;;AAWR;EACC;EACA;;AA4HA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,kBAnJK;EAoJL;EACA;;AAEA;EACC;;AAGD;EACC,kBA1JI;EA2JJ;;AAGD;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,MAzKG","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../src/css/main.scss","../src/css/components/Button.scss","../src/css/components/CheckboxGroup.scss","../src/css/components/CheckboxOne.scss","../src/css/components/CheckboxOption.scss","../src/css/components/Combobox.scss","../src/css/components/ComponentErrors.scss","../src/css/components/Datepicker.scss","../src/css/components/Declarations.scss","../src/css/components/Dropdown.scss","../src/css/components/Duration.scss","../src/css/components/Fieldset.scss","../src/css/components/IconButton.scss","../src/css/components/Input.scss","../src/css/components/InputNumber.scss","../src/css/components/Label.scss","../src/css/components/Missing.scss","../src/css/components/ModalControls.scss","../src/css/components/RosterForLoop.scss","../src/css/components/Roundabout.scss","../src/css/components/Sequence.scss","../src/css/components/Suggester.scss","../src/css/components/Table.scss","../src/css/components/Textarea.scss","../src/css/components/VariableStatus.scss","../src/css/components/Dragger.scss","../src/css/components/SuggesterWidget.scss"],"names":[],"mappings":";AAAA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAkBD;AAyBC;AA+BA;;AAvDA;EACC;EACA;;AAED;EACC;EACA;;AAID;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;EACA;EACA;EACA;EACA;;AASD;EACC;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAED;EACC;;AAMF;EAxEA;EACA;;AA0EA;EA3EA;EACA;;AA6EA;EACC;EA1ED;EACA;EACA;;AAEA;EACC;;AAwED;EA7EA;EACA;EACA;;AAEA;EACC;;AA4ED;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AACA;EACC;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;;AAMJ;EACC;;;AC1JD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;;;ACnBA;EACC;EACA;;AAGF;EACC;EACA;EACA;;;ACRA;EACC;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AACA;EACC;;;ACdJ;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;;;AAGD;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;;;AAMD;AAAA;EACC;;;AAMF;EACC;;AAEA;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AC1DD;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EApCL;;AAuCK;EAhDL;EASA;EAPA;EACA;EACA;EACA;;AAgDI;EACC;EACA;EACA;EACA;EAhDL;EAkDK;EACA;EACA;EA7DL;EASA;EAPA;EACA;EACA;EACA;;AA2DK;EACC;EACA;EACA;;AAGD;EACC;;AAKH;EAnEH;EAqEI;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;EACA;;AAQN;EACC;EACA;EACA;EACA;;AACA;EACC;;AAIA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AACA;EACC;EACA;EACA;EACA;EAKA;;AAJA;EACC;;AAMF;EAEC;EACA;EACA;EACA;;AACA;EACC;;AAKH;AAAA;AAAA;AAAA;EAIC;EACA;EACA;EACA;;AAIA;EACC;;AAED;EApMH;EACA;EACA;;;ACFA;EACC;;;ACFF;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AChBA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;;AACA;EACC;;;ACxBD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;;ACjCJ;AAAA;EAEC;EACA;EACA;;;AAED;EACC;;;ACPD;EACC;EACA;EACA;;;ACHD;EACC;EACA;;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AChCA;AAAA;AAAA;AAAA;EACC;;AACA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;;;AClDA;EACC;;AAEA;EACC;;;ACNF;EACC;EACA;;;ACHF;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;ACzBD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;;AAMF;AAAA;AAAA;AAAA;EAIC;EACA;;AAGF;EACC;EACA;;;AClBF;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;;;ACnCH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAED;AAAA;EAEC;;;ACtCA;EACC;EACA;EACA;EACA;EACA;EACA;;;AC8BD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACC;;AACA;EACC;EACA;EACA;;AAOC;EACC;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EAtEN;;AAyEM;EAjEN;EARA;EAUA;EACA;EACA;EACA;;AAiEK;EACC;EACA;EACA;EACA;EACA;EAnFN;;AAsFM;EACC;EA/EP;EARA;EAUA;EACA;EACA;EACA;;AA6EM;EACC;EACA;EACA;;AAGD;EACC;;AAKH;EAtGJ;EAwGK;EACA;EACA;EACA,YACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AASP;EACC;EACA;EACA;;AAEA;EACC;;AAjIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsHA;EACC;;AArIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0HA;EACC;;AAzIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA+HA;EACC;EACA;;AACA;EACC;EACA;EACA;;;ACrKJ;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA,YACC;;AAKD;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;;;ACxCA;EACC;EACA;;;ACLF;EACC;AAMA;AAUA;;AAdA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;;AC/BJ;EACC;EACA;EACA;EACA;EACA;EACA;;;ACaA;EACC;EACA;;AAED;EACC;EACA;EACA,kBA1BO;EA2BP;EACA;EACA;EACA;;AAlBD;EACC;EACA;;AAoBA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA,OAxCK;EAyCL;EACA;EACA;;AAED;EACC,OA9CK;EA+CL;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA,kBA1DK;;AA4DL;EACC;EACA;;AAGD;EACC,kBAjEI;EAkEJ;EACA;;AAIA;EACC;EACA;EACA,MA5EG;;AAiFN;EACC;EACA;EACA;EACA;;AAGC;EACC,cAvFG;EAwFH;EAMA;;AALA;EACC,kBA1FE;EA2FF;;AAOH;EACC;EACA;EACA;;AACA;EACC,kBAxGG;EAyGH;;AAMJ;EACC;EACA;EACA;EACA,kBApHM;EAqHN;EACA;EACA;EACA;EACA;;AAGC;EACC;;AAIF;EACC;EACA;EACA,MAnIK;;AAWR;EACC;EACA;;AA4HA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,kBAnJK;EAoJL;EACA;;AAEA;EACC;;AAGD;EACC,kBA1JI;EA2JJ;;AAGD;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,MAzKG","file":"main.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.4.17",
+    "version": "3.4.19",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -98,6 +98,8 @@
         "src/components/shared/Button/IconButton.spec.tsx",
         "src/components/shared/Button/IconButton.tsx",
         "src/components/shared/Button/__snapshots__/Button.spec.tsx.snap",
+        "src/components/shared/CharactersCount/CharactersCount.spec.tsx",
+        "src/components/shared/CharactersCount/CharactersCount.tsx",
         "src/components/shared/Checkbox/CheckboxOption.spec.tsx",
         "src/components/shared/Checkbox/CheckboxOption.tsx",
         "src/components/shared/Checkbox/getShortcutKey.ts",
@@ -177,6 +179,8 @@
         "src/components/shared/Table/Tr.spec.tsx",
         "src/components/shared/Table/Tr.tsx",
         "src/components/shared/Table/index.ts",
+        "src/components/shared/utils/getCharactersCountId.test.ts",
+        "src/components/shared/utils/getCharactersCountId.ts",
         "src/components/type.ts",
         "src/css/components/Button.scss",
         "src/css/components/CheckboxGroup.scss",
@@ -640,6 +644,12 @@
         "components/shared/Button/IconButton.spec.d.ts",
         "components/shared/Button/IconButton.spec.js",
         "components/shared/Button/IconButton.spec.js.map",
+        "components/shared/CharactersCount/CharactersCount.d.ts",
+        "components/shared/CharactersCount/CharactersCount.js",
+        "components/shared/CharactersCount/CharactersCount.js.map",
+        "components/shared/CharactersCount/CharactersCount.spec.d.ts",
+        "components/shared/CharactersCount/CharactersCount.spec.js",
+        "components/shared/CharactersCount/CharactersCount.spec.js.map",
         "components/shared/Checkbox/CheckboxOption.d.ts",
         "components/shared/Checkbox/CheckboxOption.js",
         "components/shared/Checkbox/CheckboxOption.js.map",
@@ -874,6 +884,9 @@
         "components/shared/Table/index.d.ts",
         "components/shared/Table/index.js",
         "components/shared/Table/index.js.map",
+        "components/shared/utils/getCharactersCountId.d.ts",
+        "components/shared/utils/getCharactersCountId.js",
+        "components/shared/utils/getCharactersCountId.js.map",
         "components/type.d.ts",
         "components/type.js",
         "components/type.js.map",
@@ -1048,6 +1061,12 @@
         "esm/components/shared/Button/IconButton.spec.d.ts",
         "esm/components/shared/Button/IconButton.spec.js",
         "esm/components/shared/Button/IconButton.spec.js.map",
+        "esm/components/shared/CharactersCount/CharactersCount.d.ts",
+        "esm/components/shared/CharactersCount/CharactersCount.js",
+        "esm/components/shared/CharactersCount/CharactersCount.js.map",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.d.ts",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.js",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.js.map",
         "esm/components/shared/Checkbox/CheckboxOption.d.ts",
         "esm/components/shared/Checkbox/CheckboxOption.js",
         "esm/components/shared/Checkbox/CheckboxOption.js.map",
@@ -1282,6 +1301,9 @@
         "esm/components/shared/Table/index.d.ts",
         "esm/components/shared/Table/index.js",
         "esm/components/shared/Table/index.js.map",
+        "esm/components/shared/utils/getCharactersCountId.d.ts",
+        "esm/components/shared/utils/getCharactersCountId.js",
+        "esm/components/shared/utils/getCharactersCountId.js.map",
         "esm/components/type.d.ts",
         "esm/components/type.js",
         "esm/components/type.js.map",

package/src/components/Input/Input.spec.tsx

@@ -1,6 +1,12 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Input } from './Input';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+
+vi.mock('../shared/CharactersCount/CharactersCount', () => ({
+	CharactersCount: vi.fn(),
+}));
+
 describe('Input', () => {
 	const mockOnChange = vi.fn();
 	const baseProps = {
@@ -34,6 +40,19 @@ describe('Input', () => {
 		expect(input).toBeInTheDocument();
 	});
 
+	it('calls CharactersCount component with correct props', () => {
+		const props = { ...baseProps, maxLength: 30 };
+		render(<Input {...props} />);
+		expect(CharactersCount).toHaveBeenCalledWith(
+			{
+				id: props.id,
+				maxLength: props.maxLength,
+				value: props.value,
+			},
+			{}
+		);
+	});
+
 	it('calls onChange with parsed value', () => {
 		const { container } = render(<Input {...baseProps} errors={undefined} />);
 

package/src/components/Input/Input.tsx

@@ -8,6 +8,8 @@ import {
 } from '../shared/ComponentErrors/ComponentErrors';
 import { Declarations } from '../shared/Declarations/Declarations';
 import type { LunaticError } from '../../use-lunatic/type';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+import { getCharactersCountId } from '../shared/utils/getCharactersCountId';
 
 export function Input({
 	handleChanges,
@@ -47,6 +49,8 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 		declarations,
 	} = props;
 	const labelId = `label-${id}`;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+
 	return (
 		<div className={classnames('lunatic-input')}>
 			<Label htmlFor={id} id={labelId} description={description}>
@@ -57,24 +61,28 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 				declarations={declarations}
 				id={id}
 			/>
-			<input
-				id={id}
-				aria-labelledby={labelId}
-				autoComplete="off"
-				type="text"
-				disabled={disabled}
-				readOnly={readOnly}
-				value={(value ?? '').toString()}
-				title={value ?? ''}
-				onChange={(e) => onChange(e.target.value)}
-				aria-required={required}
-				required={required}
-				maxLength={maxLength}
-				aria-invalid={!!errors}
-				onBlur={(e) => {
-					e.target.setSelectionRange(0, 0);
-				}}
-			/>
+			<div className="field-with-count">
+				<input
+					id={id}
+					aria-labelledby={labelId}
+					aria-describedby={maxLength ? charactersCountId : undefined}
+					autoComplete="off"
+					type="text"
+					disabled={disabled}
+					readOnly={readOnly}
+					value={(value ?? '').toString()}
+					title={value ?? ''}
+					onChange={(e) => onChange(e.target.value)}
+					aria-required={required}
+					required={required}
+					maxLength={maxLength}
+					aria-invalid={!!errors}
+					onBlur={(e) => {
+						e.target.setSelectionRange(0, 0);
+					}}
+				/>
+				<CharactersCount id={id} maxLength={maxLength} value={value} />
+			</div>
 			<ComponentErrors errors={errors} />
 		</div>
 	);

package/src/components/Input/__snapshots__/Input.spec.tsx.snap

@@ -16,15 +16,19 @@ exports[`Input > renders without crashing 1`] = `
         description
       </span>
     </label>
-    <input
-      aria-invalid="false"
-      aria-labelledby="label-input"
-      autocomplete="off"
-      id="input"
-      title="input"
-      type="text"
-      value="input"
-    />
+    <div
+      class="field-with-count"
+    >
+      <input
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        autocomplete="off"
+        id="input"
+        title="input"
+        type="text"
+        value="input"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -34,16 +38,20 @@ exports[`Input > should handle readOnly 1`] = `
   <div
     class="lunatic-input"
   >
-    <input
-      aria-invalid="false"
-      aria-labelledby="label-number"
-      autocomplete="off"
-      id="number"
-      readonly=""
-      title="toto"
-      type="text"
-      value="toto"
-    />
+    <div
+      class="field-with-count"
+    >
+      <input
+        aria-invalid="false"
+        aria-labelledby="label-number"
+        autocomplete="off"
+        id="number"
+        readonly=""
+        title="toto"
+        type="text"
+        value="toto"
+      />
+    </div>
   </div>
 </div>
 `;

package/src/components/RosterForLoop/__snapshots__/RosterForLoop.spec.tsx.snap

@@ -31,16 +31,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-0"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-0"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -61,16 +72,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-1"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-1"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>

package/src/components/Textarea/Textarea.spec.tsx

@@ -1,6 +1,11 @@
 import { render } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Textarea } from './Textarea';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+
+vi.mock('../shared/CharactersCount/CharactersCount', () => ({
+	CharactersCount: vi.fn(),
+}));
 
 describe('Textarea', () => {
 	const mockOnChange = vi.fn();
@@ -22,6 +27,19 @@ describe('Textarea', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('calls CharactersCount component with correct props', () => {
+		const props = { ...baseProps, maxLength: 30 };
+		render(<Textarea {...props} />);
+		expect(CharactersCount).toHaveBeenCalledWith(
+			{
+				id: props.id,
+				maxLength: props.maxLength,
+				value: props.value,
+			},
+			{}
+		);
+	});
+
 	it('should handle readOnly', () => {
 		const { container } = render(
 			<Textarea

package/src/components/Textarea/Textarea.tsx

@@ -7,6 +7,8 @@ import {
 import { slottableComponent } from '../shared/HOC/slottableComponent';
 import { Declarations } from '../shared/Declarations/Declarations';
 import type { LunaticError } from '../../use-lunatic/type';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+import { getCharactersCountId } from '../shared/utils/getCharactersCountId';
 
 export function Textarea({
 	handleChanges,
@@ -51,6 +53,7 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 			placeHolder,
 		} = props;
 		const labelId = `label-${id}`;
+		const charactersCountId = getCharactersCountId(id, maxLength);
 
 		return (
 			<div className="lunatic-textarea">
@@ -62,19 +65,24 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 					declarations={declarations}
 					id={id}
 				/>
-				<textarea
-					required={required}
-					disabled={disabled}
-					id={id}
-					rows={rows}
-					maxLength={maxLength}
-					cols={cols}
-					onChange={(e) => onChange(e.target.value)}
-					value={value ?? ''}
-					placeholder={placeHolder}
-					readOnly={readOnly}
-					aria-invalid={!!errors}
-				/>
+				<div className="field-with-count">
+					<textarea
+						required={required}
+						disabled={disabled}
+						id={id}
+						aria-labelledby={labelId}
+						aria-describedby={maxLength ? charactersCountId : undefined}
+						rows={rows}
+						maxLength={maxLength}
+						cols={cols}
+						onChange={(e) => onChange(e.target.value)}
+						value={value ?? ''}
+						placeholder={placeHolder}
+						readOnly={readOnly}
+						aria-invalid={!!errors}
+					/>
+					<CharactersCount id={id} maxLength={maxLength} value={value} />
+				</div>
 				<ComponentErrors errors={errors} />
 			</div>
 		);

package/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap

@@ -5,12 +5,17 @@ exports[`Textarea > renders without crashing 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="input"
+    <div
+      class="field-with-count"
     >
-      input
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        id="input"
+      >
+        input
+      </textarea>
+    </div>
   </div>
 </div>
 `;
@@ -20,13 +25,18 @@ exports[`Textarea > should handle readOnly 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="textarea"
-      readonly=""
+    <div
+      class="field-with-count"
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-textarea"
+        id="textarea"
+        readonly=""
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </textarea>
+    </div>
   </div>
 </div>
 `;

package/src/components/shared/CharactersCount/CharactersCount.spec.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CharactersCount } from './CharactersCount';
+import { render } from '@testing-library/react';
+
+describe('CharactersCount', () => {
+	const defaultProps = {
+		id: 'test-id',
+		maxLength: 20,
+		value: 'Hello',
+	};
+
+	it('renders correctly characters count if there is a maximum length', () => {
+		const { getByText } = render(<CharactersCount {...defaultProps} />);
+
+		expect(getByText('5/20')).toBeInTheDocument();
+	});
+
+	it('should apply the max-length-reached class when limit is reached', () => {
+		const props = { ...defaultProps, maxLength: 5 };
+		const { getByText } = render(<CharactersCount {...props} />);
+
+		expect(getByText('5/5')).toHaveClass('max-length-reached');
+	});
+
+	it('should not render anything when maxLength is not provided', () => {
+		const props = { ...defaultProps, maxLength: undefined };
+		const { container } = render(<CharactersCount {...props} />);
+
+		expect(container.firstChild).toBeNull();
+	});
+});

package/src/components/shared/CharactersCount/CharactersCount.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { getCharactersCountId } from '../utils/getCharactersCountId';
+
+type Props = {
+	id: string;
+	maxLength?: number;
+	value?: string | null;
+};
+
+export function CharactersCount({ id, maxLength, value }: Readonly<Props>) {
+	if (!maxLength) return null;
+
+	const currentLength = value?.length ?? 0;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+	const hasReachedMaxLength = currentLength === maxLength;
+
+	return (
+		<span
+			id={charactersCountId}
+			className={classNames('characters-count', {
+				'max-length-reached': hasReachedMaxLength,
+			})}
+		>
+			{`${currentLength}/${maxLength}`}
+		</span>
+	);
+}