From b9943df37894fff3ed7a562c8a0608e74b3ef0fc Mon Sep 17 00:00:00 2001
From: anastasiia_glushkova <anastasiia.glushkova@haiilo.com>
Date: Thu, 9 Apr 2026 15:26:51 +0200
Subject: [PATCH 1/2] feat(core): make textarea counter independent from label

---
 .../components/cat-textarea/cat-textarea.tsx   | 18 +++++++++---------
 core/src/index.html                            |  2 ++
 core/src/styles/_snippets/_form-label.scss     | 11 +++++++----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/core/src/components/cat-textarea/cat-textarea.tsx b/core/src/components/cat-textarea/cat-textarea.tsx
index 063aff410..ac5a79dc2 100644
--- a/core/src/components/cat-textarea/cat-textarea.tsx
+++ b/core/src/components/cat-textarea/cat-textarea.tsx
@@ -282,19 +282,19 @@ export class CatTextarea {
                         ({i18n.t('input.required')})
                       </span>
                     )}
-                    {(this.maxLength || this.hasSlottedCounter) && (
-                      <div class="label-character-count" aria-hidden="true">
-                        {this.hasSlottedCounter ? (
-                          <slot name="counter"></slot>
-                        ) : (
-                          `${this.value?.length ?? 0}/${this.maxLength}`
-                        )}
-                      </div>
-                    )}
                   </div>
                 </span>
               </label>
             )}
+            {(this.maxLength || this.hasSlottedCounter) && (
+                <div class="character-count" aria-atomic="true" aria-live="polite">
+                  {this.hasSlottedCounter ? (
+                      <slot name="counter"></slot>
+                  ) : (
+                      `${this.value?.length ?? 0}/${this.maxLength}`
+                  )}
+                </div>
+            )}
           </div>
           <div class="textarea-container">
             <div
diff --git a/core/src/index.html b/core/src/index.html
index 60a9cc454..7e27d81fa 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -1310,6 +1310,8 @@ <h3>Slotted Counter</h3>
               <cat-textarea label="Custom counter">
                 <span slot="counter">Show any text here</span>
               </cat-textarea>
+              <h3>Counter w/o label</h3>
+              <cat-textarea max-length="100"></cat-textarea>
             </section>
 
             <section id="toggle" class="cat-form">
diff --git a/core/src/styles/_snippets/_form-label.scss b/core/src/styles/_snippets/_form-label.scss
index a46743c76..7da944789 100644
--- a/core/src/styles/_snippets/_form-label.scss
+++ b/core/src/styles/_snippets/_form-label.scss
@@ -20,7 +20,8 @@ $cat-input-height: 2.5rem;
   flex-basis: var(--label-size, 33.33%);
 }
 
-.label-wrapper {
+.label-wrapper,
+.label-container {
   display: flex;
   gap: 0.25rem;
 }
@@ -35,15 +36,17 @@ $cat-input-height: 2.5rem;
 }
 
 .label-optional,
-.label-character-count {
+.character-count {
   display: inline-flex;
   align-items: center;
   max-height: 1.25rem;
   @include cat-body('xs', null);
 }
 
-.label-character-count {
+.character-count {
   margin-left: auto;
+  flex-shrink: 0;
+  color: cat-token('color.ui.font.muted');
 }
 
 .input-horizontal,
@@ -70,7 +73,7 @@ $cat-input-height: 2.5rem;
   .label-metadata {
     justify-content: flex-start;
 
-    .label-character-count {
+    .character-count {
       margin-left: 0;
     }
   }

From 079d619a8c54db290df2f164217d4e5140463d73 Mon Sep 17 00:00:00 2001
From: anastasiia_glushkova <anastasiia.glushkova@haiilo.com>
Date: Thu, 9 Apr 2026 15:32:25 +0200
Subject: [PATCH 2/2] feat(core): prettier

---
 core/src/components/cat-textarea/cat-textarea.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/core/src/components/cat-textarea/cat-textarea.tsx b/core/src/components/cat-textarea/cat-textarea.tsx
index ac5a79dc2..d386a4599 100644
--- a/core/src/components/cat-textarea/cat-textarea.tsx
+++ b/core/src/components/cat-textarea/cat-textarea.tsx
@@ -287,13 +287,9 @@ export class CatTextarea {
               </label>
             )}
             {(this.maxLength || this.hasSlottedCounter) && (
-                <div class="character-count" aria-atomic="true" aria-live="polite">
-                  {this.hasSlottedCounter ? (
-                      <slot name="counter"></slot>
-                  ) : (
-                      `${this.value?.length ?? 0}/${this.maxLength}`
-                  )}
-                </div>
+              <div class="character-count" aria-atomic="true" aria-live="polite">
+                {this.hasSlottedCounter ? <slot name="counter"></slot> : `${this.value?.length ?? 0}/${this.maxLength}`}
+              </div>
             )}
           </div>
           <div class="textarea-container">