文字数カウンタ

<%# Markup for the character-counter demo. The visible output updates on every
    keystroke, while the settled remaining count is debounced into the shared
    stimeo--announcer your app seats once, in its layout (the settled count is the
    transition worth reading; the visible output is not itself a live region). This
    demo's CSS styles the root's near/over hooks and the over-limit aria-invalid;
    watching the field needs no consumer JavaScript. %>
<% announcement = t("components.character_counter.demo.announcement") %>
<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"
    data-stimeo--character-counter-announce-text-value="<%= announcement %>">
    <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"></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-700);
}

.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);
}