semaphore/routes/_components/compose/ComposeLengthIndicator.html

<span class="compose-box-length {{$rawInputTextInComposeOverLimit ? 'over-char-limit' : ''}}"
      aria-label="{{inputLengthLabel}}">
      {{inputLengthToDisplayAfterRaf || '0'}}
    </span>
<style>
  .compose-box-length {
    grid-area: length;
    justify-self: right;
    color: var(--main-theme-color);
    font-size: 1.3em;
    align-self: center;
  }

  .compose-box-length.over-char-limit {
    color: var(--warning-color);
  }
</style>
<script>
  import { CHAR_LIMIT } from '../../_static/statuses'
  import { mark, stop } from '../../_utils/marks'
  import { store } from '../../_store/store'

  export default {
    oncreate() {
      // perf improvement for keyboard input latency
      this.observe('inputLengthToDisplay', inputLengthToDisplay => {
        requestAnimationFrame(() => {
          mark('set inputLengthToDisplayAfterRaf')
          this.set({inputLengthToDisplayAfterRaf: inputLengthToDisplay})
          stop('set inputLengthToDisplayAfterRaf')
        })
      })
    },
    store: () => store,
    computed: {
      inputLengthToDisplay: ($rawInputTextInComposeLength) => {
        return ($rawInputTextInComposeLength <= CHAR_LIMIT
          ? $rawInputTextInComposeLength
          : CHAR_LIMIT - $rawInputTextInComposeLength)
      },
      inputLengthLabel: ($rawInputTextInComposeOverLimit, inputLengthToDisplay) => {
        if ($rawInputTextInComposeOverLimit) {
          return `${inputLengthToDisplay} characters over limit`
        } else {
          return `${inputLengthToDisplay} characters`
        }
      }
    }
  }
</script>