Scroll Visibility

<%# Markup for the scroll-visibility (scroll-driven visibility toggle / GoToTop) demo.
    The library toggles the target via hidden / data-state once the scroll source passes a
    threshold, and toTop scrolls that source back to the top. Here the scroll source is the
    demo's own scroll box (root points at it), so the demo is self-contained and works even
    when the page itself does not scroll on the window. The look and transition are demo.css's.
    Scroll inside the box and a "Back to top" button appears at the bottom-right. %>
<div
  class="scroll-visibility-demo"
  data-controller="stimeo--scroll-visibility"
  data-stimeo--scroll-visibility-root-value="#scroll-visibility-demo-scroller"
  data-stimeo--scroll-visibility-offset-value="120"
  data-stimeo--scroll-visibility-mode-value="offset">
  <div id="scroll-visibility-demo-scroller" class="scroll-visibility-demo__scroller"
       tabindex="0" role="region" aria-labelledby="scroll-visibility-demo-hint">
    <p id="scroll-visibility-demo-hint" class="scroll-visibility-demo__hint"><%= t(
      "components.scroll_visibility.demo.hint"
    ) %></p>
    <% 12.times do |i| %>
      <p class="scroll-visibility-demo__line"><%= t(
        "components.scroll_visibility.demo.line", number: i + 1
      ) %></p>
    <% end %>
  </div>
  <button
    type="button"
    class="go-to-top"
    hidden
    data-stimeo--scroll-visibility-target="element"
    data-action="click->stimeo--scroll-visibility#toTop">
    <%= t("components.scroll_visibility.demo.to_top") %>
  </button>
</div>

/* Presentation CSS for scroll-visibility. The library only toggles hidden / data-state
   and does the toTop scroll, so visuals like the scroll box, positioning, and fade are
   drawn here. The demo scrolls inside its own box (the controller's root) rather than the
   window, so the "Back to top" button is pinned to the box, not the viewport. */
.scroll-visibility-demo {
  position: relative; /* positioning context for the absolutely-pinned button */
  color: var(--color-text-muted);
}

/* The scroll source the controller observes (data-...-root-value points here). */
.scroll-visibility-demo__scroller {
  max-height: 16rem;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

.scroll-visibility-demo__scroller:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.scroll-visibility-demo__hint {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.scroll-visibility-demo__line {
  margin: 0.5rem 0;
}

/* "Back to top" button, pinned to the demo box. Visible only once the library removes
   hidden (and the control is back in the focus order). */
.go-to-top {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary-hover);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--vital-rgb), 0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.go-to-top:hover {
  transform: translateY(-2px);
}

.go-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .go-to-top {
    transition: none;
  }
  .go-to-top:hover {
    transform: none;
  }
}