カウントアップ

<%# count-up: the final numbers stay authored in the markup (SEO / no-JS / SR read
    the real values); each stat composes intersection ("start when visible") with
    count-up via data-action. Scroll the stats into view to run the animation. %>
<div class="count-up-demo">
  <p class="count-up-demo__hint"><%= t("components.count_up.demo.hint") %></p>
  <dl class="count-up-demo__stats">
    <div class="count-up-demo__stat">
      <dt><%= t("components.count_up.demo.stats.users") %></dt>
      <dd data-controller="stimeo--intersection stimeo--count-up"
          data-stimeo--intersection-once-value="true"
          data-action="stimeo--intersection:enter->stimeo--count-up#start">12,480</dd>
    </div>
    <div class="count-up-demo__stat">
      <dt><%= t("components.count_up.demo.stats.stars") %></dt>
      <dd data-controller="stimeo--intersection stimeo--count-up"
          data-stimeo--intersection-once-value="true"
          data-action="stimeo--intersection:enter->stimeo--count-up#start">3,200</dd>
    </div>
    <div class="count-up-demo__stat">
      <dt><%= t("components.count_up.demo.stats.uptime") %></dt>
      <dd data-controller="stimeo--intersection stimeo--count-up"
          data-stimeo--intersection-once-value="true"
          data-action="stimeo--intersection:enter->stimeo--count-up#start">99</dd>
    </div>
  </dl>
</div>

/*
 * Presentation-only styles for the count-up demo. The library animates the text
 * content; this CSS only lays out the stat tiles.
 */

.count-up-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.count-up-demo__hint {
  margin: 0;
  color: var(--muted);
}

.count-up-demo__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.count-up-demo__stat {
  min-width: 10rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
}

.count-up-demo__stat dt {
  color: var(--muted);
  font-size: 0.9rem;
}

.count-up-demo__stat dd {
  margin: 0.25rem 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}