Intersection

<%# intersection: the primitive turns viewport visibility into events and hooks.
    No consumer JS here — everything visible is pure CSS reacting to the hooks the
    controller flips: data-intersecting (in/out), data-passed (scrolled past the
    top), and the --stimeo--intersection-ratio custom property (the fill bar).
    ratioSteps makes the ratio update smoothly while scrolling. %>
<div class="intersection-demo">
  <p class="intersection-demo__hint"><%= t("components.intersection.demo.hint") %></p>
  <div class="intersection-demo__viewport" id="intersection-viewport" role="region" tabindex="0"
       aria-label="<%= t('components.intersection.demo.viewport_label') %>">
    <p class="intersection-demo__filler"><%= t("components.intersection.demo.before") %></p>
    <div class="intersection-demo__box"
         data-controller="stimeo--intersection"
         data-stimeo--intersection-root-selector-value="#intersection-viewport"
         data-stimeo--intersection-ratio-steps-value="20">
      <span class="intersection-demo__state intersection-demo__state--in">
        <%= t("components.intersection.demo.state_visible") %>
      </span>
      <span class="intersection-demo__state intersection-demo__state--out">
        <%= t("components.intersection.demo.state_hidden") %>
      </span>
      <span class="intersection-demo__state intersection-demo__state--passed">
        <%= t("components.intersection.demo.state_passed") %>
      </span>
      <span class="intersection-demo__ratio" aria-hidden="true"></span>
    </div>
    <p class="intersection-demo__filler"><%= t("components.intersection.demo.after") %></p>
  </div>
</div>

/*
 * Presentation-only styles for the intersection demo. The library flips
 * data-intersecting / data-passed and updates --stimeo--intersection-ratio; this
 * CSS reacts to those hooks — no consumer JS at all. The state labels are all in
 * the markup (localized); each shows only in its own state.
 */

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

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

.intersection-demo__viewport {
  height: 14rem;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.intersection-demo__viewport:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tall filler so the observed box scrolls fully in and out of the root. */
.intersection-demo__filler {
  margin: 0;
  padding: 7rem 0;
  color: var(--muted);
  text-align: center;
}

.intersection-demo__box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  transition: border-color 0.15s ease;
}

.intersection-demo__box[data-intersecting="true"] {
  border-color: var(--accent);
}

/* Exactly one state label shows: visible / not visible / scrolled past. */
.intersection-demo__state {
  display: none;
  font-weight: 600;
}

.intersection-demo__box[data-intersecting="true"] .intersection-demo__state--in {
  display: block;
  color: var(--accent-700);
}

.intersection-demo__box:not([data-intersecting="true"]) .intersection-demo__state--out {
  display: block;
  color: var(--muted);
}

.intersection-demo__box[data-passed="true"] .intersection-demo__state--out {
  display: none;
}

.intersection-demo__box[data-passed="true"] .intersection-demo__state--passed {
  display: block;
  color: var(--muted);
}

/* Fill bar driven by the ratio custom property the controller maintains. */
.intersection-demo__ratio {
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--border);
  overflow: hidden;
  position: relative;
}

.intersection-demo__ratio::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--stimeo--intersection-ratio, 0) * 100%);
  background: var(--accent);
  transition: width 0.1s linear;
}