Character Counter

<%# Character counter demo: a textarea whose remaining count is shown beneath it.
    The controller writes the count into the output (an aria-live="polite" region),
    toggles data-near-limit / data-over-limit on the root, and sets aria-invalid on the
    field past the max. This demo styles those state hooks; the library only updates the
    count text and the hooks — no consumer JS is needed (it reacts to input on its own). %>
<div class="character-counter-demo">
  <label class="character-counter-demo__label" for="cc-message">
    <%= t("components.character_counter.demo.label") %>
  </label>
  <div
    class="character-counter"
    data-controller="stimeo--character-counter"
    data-stimeo--character-counter-max-value="140"
    data-stimeo--character-counter-warn-at-value="20">
    <textarea
      id="cc-message"
      class="character-counter__input"
      rows="3"
      data-stimeo--character-counter-target="input"
      aria-describedby="cc-message-count"
      placeholder="<%= t('components.character_counter.demo.placeholder') %>"></textarea>
    <span
      id="cc-message-count"
      class="character-counter__output"
      data-stimeo--character-counter-target="output"
      aria-live="polite"></span>
  </div>
</div>

/*
 * Presentation-only styles for the character counter demo.
 * The library updates the count text and toggles data-near-limit / data-over-limit on
 * the root (and aria-invalid on the field); this CSS reacts to those hooks.
 */

.character-counter-demo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 32rem;
}

.character-counter-demo__label {
  font-weight: 600;
  color: var(--fg);
}

.character-counter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.character-counter__input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
  resize: vertical;
}

.character-counter__output {
  align-self: flex-end;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* Warn as the remaining count gets low, then signal the over-limit state. */
.character-counter[data-near-limit] .character-counter__output {
  color: var(--accent);
}

.character-counter[data-over-limit] .character-counter__output {
  color: var(--danger-500);
  font-weight: 600;
}

.character-counter__input[aria-invalid="true"] {
  border-color: var(--danger-500);
}