Horizontal Scroll

---
/**
 * HorizontalScroll — a strip that moves sideways as the page scrolls down.
 *
 * The section is tall; inside it a sticky viewport holds a max-content
 * track whose translate is bound to the section's view timeline, so the
 * track crosses exactly while the section is pinned. Zero JS. Browsers
 * without scroll timelines get a normal horizontally scrollable strip — a tab
 * stop, so the arrow keys scroll it (reduced motion gets the same strip).
 * Keyboard focus inside the pinned strip turns it into that strip for as long
 * as it stays, so a focused item is scrolled into view by the browser.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'section'> {
  /** Scroll distance as viewport heights: how long the strip stays pinned. */
  length?: number;
  /** Gap between items, any CSS length. */
  gap?: string;
  /** Height of the pinned viewport; 100vh for the page, or the height of an enclosing scroller. */
  viewport?: string;
  /** Accessible name of the strip, which is a tab stop: say what it holds ("Case studies"). */
  label?: string;
}

const { length = 3, gap = '2rem', viewport = '100vh', label = 'Horizontal strip', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-hs-len:${length}`, `--ma-hs-gap:${gap}`, `--ma-hs-vp:${viewport}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<section class:list={['ma-hscroll', className]} style={vars} {...rest}>
  <div class="ma-hscroll__viewport" tabindex="0" role="region" aria-label={label}>
    <div class="ma-hscroll__track">
      <slot />
    </div>
  </div>
</section>

<style is:global>
  @layer components {
    :where(.ma-hscroll__viewport) {
      overflow-x: auto;
      container-type: inline-size;
    }
    :where(.ma-hscroll__track) {
      display: flex;
      align-items: center;
      gap: var(--ma-hs-gap, 2rem);
      width: max-content;
      height: 100%;
    }
    @supports (animation-timeline: view()) {
      :where(.ma-hscroll) {
        height: calc(var(--ma-hs-vp, 100vh) * var(--ma-hs-len, 3));
        view-timeline-name: --ma-hs;
      }
      /* clip, not hidden: a hidden box is still a scroll container, so a focused item scrolled it sideways and the offset
         stayed on top of the translate after focus left */
      :where(.ma-hscroll__viewport) {
        position: sticky;
        top: 0;
        height: var(--ma-hs-vp, 100vh);
        overflow: clip;
      }
      :where(.ma-hscroll__track) {
        will-change: translate;
        animation: ma-hscroll linear both;
        animation-range: contain 0% contain 100%;
      }
      :where(html) :where(.ma-hscroll__track) {
        animation-timeline: --ma-hs;
      }
      /* right to left the track starts at the right edge, so it travels right: the same distance, mirrored. [dir] and
         not :dir(): :dir() reached Chrome in 120, and a build that targets an older Chrome rewrites it into a guess from lang, which a page that sets only
         dir never matches. An ltr island one level inside an rtl page is set back */
      :where([dir='rtl'] .ma-hscroll, .ma-hscroll[dir='rtl']) {
        --ma-hs-dir: -1;
      }
      :where([dir='rtl'] [dir='ltr'] .ma-hscroll, [dir='rtl'] .ma-hscroll[dir='ltr']) {
        --ma-hs-dir: 1;
      }
      /* keyboard focus in the strip (the strip itself, or an item) makes it the scrollable strip until focus leaves: the
         browser scrolls the focused item into view, and the offset goes when clip comes back. A click on a link or a
         button does not (a text field matches :focus-visible however it is focused) */
      :where(.ma-hscroll__viewport:is(:focus-visible, :has(:focus-visible))) {
        overflow-x: auto;
      }
      :where(.ma-hscroll__viewport:is(:focus-visible, :has(:focus-visible)) .ma-hscroll__track) {
        animation: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-hscroll) {
        height: auto;
      }
      :where(.ma-hscroll__viewport) {
        position: static;
        height: auto;
        overflow-x: auto;
      }
      :where(.ma-hscroll__track) {
        animation: none;
      }
    }
  }

  /* min(): a track narrower than the viewport stays put instead of travelling the wrong way */
  @keyframes ma-hscroll {
    to {
      translate: calc(var(--ma-hs-dir, 1) * min(0px, 100cqw - 100%)) 0;
    }
  }
</style>