Overflow Indicator

<%# Markup for the overflow-indicator (horizontal-scroll affordance) demo.
    The library exposes the viewport's remaining scroll room via data-overflow-start /
    data-overflow-end and syncs the prev/next buttons' disabled to that room. The
    shadow/arrow look is drawn by demo.css. %>
<div class="overflow-demo" data-controller="stimeo--overflow-indicator"
     data-stimeo--overflow-indicator-orientation-value="horizontal">
  <button
    type="button"
    class="overflow-demo__nav"
    aria-label="<%= t("components.overflow_indicator.demo.prev") %>"
    data-stimeo--overflow-indicator-direction-param="start"
    data-action="click->stimeo--overflow-indicator#scrollByPage">‹</button>

  <div class="overflow-demo__viewport"
       data-stimeo--overflow-indicator-target="viewport"
       data-action="scroll->stimeo--overflow-indicator#update"
       tabindex="0"
       role="region"
       aria-label="<%= t("components.overflow_indicator.demo.label") %>">
    <% 10.times do |i| %>
      <div class="overflow-demo__card"><%= t(
        "components.overflow_indicator.demo.card", number: i + 1
      ) %></div>
    <% end %>
  </div>

  <button
    type="button"
    class="overflow-demo__nav"
    aria-label="<%= t("components.overflow_indicator.demo.next") %>"
    data-stimeo--overflow-indicator-direction-param="end"
    data-action="click->stimeo--overflow-indicator#scrollByPage">›</button>
</div>

/* Presentation CSS for overflow-indicator. The library syncs data-overflow-start / -end
   and the buttons' disabled, so the edge shadow (mask) and button look are drawn here. */
.overflow-demo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 460px;
}

/* Prev/next buttons. The direction with no room becomes disabled, tied to data-overflow-*. */
.overflow-demo__nav {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-card);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
}

.overflow-demo__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.overflow-demo__nav:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 2px;
}

/* The viewport is the horizontally-scrolling container; it reads data-overflow-* to mask
   its edges. */
.overflow-demo__viewport {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem;
  scroll-behavior: smooth;
  /* Edge gradient mask. Only the side with remaining room fades out. */
  --mask-start: transparent;
  --mask-end: transparent;
  -webkit-mask-image: linear-gradient(
    to right, var(--mask-start), var(--ink) 12%, var(--ink) 88%, var(--mask-end)
  );
  mask-image: linear-gradient(
    to right,
    var(--mask-start),
    var(--ink) 12%,
    var(--ink) 88%,
    var(--mask-end)
  );
}

.overflow-demo__viewport:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 2px;
}

.overflow-demo__viewport[data-overflow-start="true"] {
  --mask-start: transparent;
}

.overflow-demo__viewport[data-overflow-start="false"] {
  --mask-start: var(--ink);
}

.overflow-demo__viewport[data-overflow-end="true"] {
  --mask-end: transparent;
}

.overflow-demo__viewport[data-overflow-end="false"] {
  --mask-end: var(--ink);
}

.overflow-demo__card {
  flex: 0 0 auto;
  width: 110px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--color-primary-hover);
  color: var(--white);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .overflow-demo__viewport {
    scroll-behavior: auto;
  }
}