fix: support counters in structured lists

demo/src/app/index/pages/inputs/inputs.page.html

@@ -42,6 +42,10 @@ <h2>inputs</h2>
         <ion-input label="Helper text" placeholder="Enter text" helperText="This is helper text"></ion-input>
       </ion-item>
 
+      <ion-item>
+        <ion-input label="Counter" placeholder="Enter text" [counter]="true" [maxlength]="20"></ion-input>
+      </ion-item>
+
       <ion-item>
         <ion-input class="ion-invalid ion-touched" label="Error text" placeholder="Enter text" errorText="This is error text"></ion-input>
       </ion-item>
@@ -71,6 +75,15 @@ <h2>inputs</h2>
       <ion-item>
         <ion-textarea label="Helper text" placeholder="Enter textarea" helperText="This is helper text"></ion-textarea>
       </ion-item>
+      <ion-item>
+        <ion-textarea
+          label="Counter formatter"
+          placeholder="Enter textarea"
+          [counter]="true"
+          [counterFormatter]="counterFormatter"
+          [maxlength]="100"
+        ></ion-textarea>
+      </ion-item>
       <ion-item>
         <ion-textarea
           class="ion-invalid ion-touched"

demo/src/app/index/pages/inputs/inputs.page.spec.ts

@@ -36,6 +36,18 @@ describe('InputsPage', () => {
     expect(errorTextarea?.classList.contains('ion-touched')).toBe(true);
   });
 
+  it('should render counter examples', () => {
+    const element = fixture.nativeElement as HTMLElement;
+    const counterInput = element.querySelector<HTMLIonInputElement>('ion-input[label="Counter"]');
+    const formattedCounterTextarea = element.querySelector<HTMLIonTextareaElement>('ion-textarea[label="Counter formatter"]');
+
+    expect(counterInput?.counter).toBe(true);
+    expect(counterInput?.maxlength).toBe(20);
+    expect(formattedCounterTextarea?.counter).toBe(true);
+    expect(formattedCounterTextarea?.maxlength).toBe(100);
+    expect(formattedCounterTextarea?.counterFormatter?.(12, 100)).toBe('12 of 100 characters');
+  });
+
   it('should render outlined helper and error patterns', () => {
     const element = fixture.nativeElement as HTMLElement;
     const outlinedInputs = element.querySelectorAll('ion-input[fill="outline"]');

demo/src/app/index/pages/inputs/inputs.page.ts

@@ -42,6 +42,8 @@ import {
   ],
 })
 export class InputsPage implements OnInit {
+  readonly counterFormatter = (inputLength: number, maxLength: number) => `${inputLength} of ${maxLength} characters`;
+
   constructor() {}
 
   ngOnInit() {}

src/styles/utils/structured-list.scss

@@ -5,14 +5,14 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
     &:has(ion-input.input-fill-outline),
     &:has(ion-textarea.textarea-fill-outline),
     &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
-    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))),
-    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))) {
+    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
+    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))) {
       --inner-border-width: 0;
       --inner-padding-bottom: 4px;
     }
 
-    ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))),
-    ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))) {
+    ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
+    ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
       display: none;
     }
   }