FEATURE: Add word count and indicator when exceeded max (#19367)

**This PR creates a new core reusable component wraps a character counter around any input.**

The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).

It can be used for example, like so:
```hbs
  <CharCounter @max="50" @value={{this.charCounterContent}}>
    <textarea
      placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
      {{on "input" (action (mut this.charCounterContent) value="target.value")}}
      class="styleguide--char-counter"></textarea>
  </CharCounter>
```

**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs

@@ -0,0 +1,10 @@
+<StyleguideExample @title="char-counter">
+  <CharCounter @max="50" @value={{this.charCounterContent}}>
+    <textarea
+      placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
+      {{on "input" (action (mut this.charCounterContent) value="target.value")}}
+      class="styleguide--char-counter"
+    >
+    </textarea>
+  </CharCounter>
+</StyleguideExample>

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -144,6 +144,12 @@
     color: var(--primary-medium);
     margin: 0 0 0 10px;
   }
+
+  &--char-counter {
+    display: block;
+    width: 100%;
+    margin-bottom: 0;
+  }
 }
 
 .buttons-examples {

plugins/styleguide/config/locales/client.en.yml

@@ -88,3 +88,7 @@ en:
           description: "Description"
           header: "Header"
           hover_to_see: "Hover to see a tooltip"
+        char_counter:
+          title: "Character Counter"
+          placeholder: "Enter your text here..."
+