読了プログレス

<%# reading-progress: the article publishes its progress as a CSS custom property
    on itself AND on :root; the bar here consumes it with pure CSS (no consumer
    JS). Scroll the page to move the bar. %>
<div class="reading-progress-demo">
  <p class="reading-progress-demo__hint"><%= t("components.reading_progress.demo.hint") %></p>
  <div class="reading-progress-demo__bar" aria-hidden="true"></div>
  <article class="reading-progress-demo__article" data-controller="stimeo--reading-progress">
    <% 14.times do |i| %>
      <p><%= t("components.reading_progress.demo.paragraph", index: i + 1) %></p>
    <% end %>
  </article>
</div>

/*
 * Presentation-only styles for the reading-progress demo. The library maintains
 * --stimeo--reading-progress (0..1); the bar's width is pure CSS from that
 * variable. The bar is sticky so it stays visible while the article scrolls.
 */

.reading-progress-demo__hint {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.reading-progress-demo__bar {
  position: sticky;
  top: 0;
  height: 0.375rem;
  border-radius: 0.25rem;
  background: var(--border);
  overflow: hidden;
}

.reading-progress-demo__bar::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--stimeo--reading-progress, 0) * 100%);
  background: var(--accent);
}

/*
 * The article must be decisively taller than the viewport: progress is
 * -top / (height - viewportHeight), so an article shorter than the viewport is
 * binary (0 -> 1) by contract and the bar never fills gradually. Real text plus
 * a vh floor keeps the demo progressive on any screen size.
 */
.reading-progress-demo__article {
  margin-top: 0.75rem;
  min-height: 180vh;
}

.reading-progress-demo__article p {
  margin: 0 0 1.5rem;
  color: var(--fg);
}