@nordwerk/scroll-carousel 0.1.0

package/AGENTS.md

@@ -0,0 +1,114 @@
+# scroll-carousel: guide for coding agents
+
+Two parts: how to build a carousel with this package in a project, and how to work on the package
+itself. Human documentation is in README.md; live examples with code are at
+https://studio-nordwerk.github.io/scroll-carousel/.
+
+## Part 1: using the package
+
+### The model in one paragraph
+
+The carousel is a native horizontal scroller. CSS alone lays it out (slides per view, gaps,
+offsets, snapping, centring), so server markup is final and nothing shifts. The script
+(`attach`) only adds arrows, dots, paging, an API, events and announcements. Configure layout in
+CSS custom properties, behaviour in `attach` options. Never compute slide widths or positions in
+JavaScript, never move slides with transforms, never clone slides.
+
+### Rules
+
+1. Markup contract: a root with class `sc`, a track with `data-sc-track`, class `sc-track`,
+   `tabindex="0"` and an accessible name (`aria-label` or `aria-labelledby`), one element per
+   slide as direct children. Controls are optional: `data-sc-prev`, `data-sc-next`,
+   `data-sc-dots` (leave it empty), `data-sc-status` (with `aria-live="polite"`), `data-sc-play`.
+2. Import the stylesheet once: `@nordwerk/scroll-carousel/carousel.css`.
+3. Responsive layout goes in CSS: media queries, or container queries on the root
+   (`@container sc (min-width: …)`, then set the properties on `.sc-track`). Do not re-attach on
+   resize; the script measures on its own.
+4. Keep the group equal to what is visible: `--sc-group: page`, or the same number as
+   `--sc-per-view` per breakpoint.
+5. Opening on a later slide: `data-sc-initial` on that slide, plus the `PRE_POSITION` inline
+   script right after the root when rendering on the server (the adapters do this).
+6. Drag and autoplay are plugins: `import { drag } from '@nordwerk/scroll-carousel/drag'`,
+   `import { autoplay } from '@nordwerk/scroll-carousel/autoplay'`, passed in `plugins`. Autoplay
+   needs a visible `[data-sc-play]` button (WCAG 2.2.2).
+7. An "infinite" or looping carousel is `rewind: true` (fades back to the start). A true loop with
+   cloned slides is not supported; do not build one around the package.
+8. Host-owned arrows or dots: render them yourself and call `carousel.next()`, `prev()`,
+   `goToPage(n)`; read `carousel.state` or listen for `sc:change` on the root. In React or
+   Preact use `useCarousel()` or the `carouselRef` prop.
+9. Text: pass `labels` for dots and the live region in the page's language, and give the arrow
+   buttons their own `aria-label`s ("Previous products", "Next products").
+10. Do not add `disabled` to the arrows yourself; the script manages `aria-disabled`.
+
+### Recipes (CSS on the root or track, options in attach)
+
+| Want | CSS | attach options |
+| --- | --- | --- |
+| Hero, one per view, dots, autoplay | `--sc-gap: 0px` | `{ rewind: true, plugins: [autoplay({ delay: 5000 })] }` |
+| Product row, 2 / 3 / 4 per view, page by view | `--sc-per-view` per container width, `--sc-group: page` | `{}` or `{ plugins: [drag()] }` |
+| Free mode on phones | `--sc-snap: none` (or `mandatory` for "sticky"), `--sc-controls: none` in a small-width query | `{}` |
+| Peek of the next slide | `--sc-per-view: 2.3`, `--sc-offset-before/after: 1rem` | `{}` |
+| Centred slides | `--sc-align: center; --sc-centered: 1; --sc-per-view: 1.4` | `{}` |
+| Chips or logos as wide as their content | `--sc-slide-size: auto; --sc-snap: proximity; --sc-group: page` | `{}` |
+| Date strip opening on today | `--sc-per-view: 7; --sc-group: page` + `data-sc-initial` | `{}` |
+| Too few slides | class `sc--center-few`, or `--sc-count: <n>` | `{}` |
+
+### Adapters
+
+- React / Preact: `<Carousel as="ul" label="…" perView={{ 0: 2, 600: 3 }} gap={12} group="page"
+  rewind plugins={[drag()]} initial={3} onChange={…} carouselRef={…}>` with slides as children.
+  Props: `arrows`, `dots`, `playButton`, `centerFew`, `slideRoles`, `labels` (`prev`, `next`,
+  `page`, `status`), `className`, `style`, `slideClassName`. Options are read once on mount; change
+  `key` to re-attach.
+- Astro: `<Carousel as="ul" label="…" perView={…} group="page" gap={12} drag autoplay={5000}
+  rewind initial={3} labels={{ page: 'Slide {n} of {count}' }}>` with slide elements in the slot;
+  mark the initial slide with `data-sc-initial` yourself.
+- Anything else on the server: `baseStyle(props)`, `responsiveCss(id, props)` and `PRE_POSITION`
+  from `@nordwerk/scroll-carousel/markup`.
+
+## Part 2: working on this repository
+
+### Layout
+
+- `src/math.ts`: pure positioning maths (snap positions, pages, visible range). Unit tested.
+- `src/index.ts`: the controller, `attach()`. Keep it free of framework code.
+- `src/drag.ts`, `src/autoplay.ts`: plugins against the `PluginContext` in index.ts.
+- `src/markup.ts`: server helpers shared by the adapters.
+- `src/adapter.ts`: the React and Preact adapter, written once against a small `Framework`
+  interface; `src/react.ts` and `src/preact.ts` only bind it.
+- `src/astro/Carousel.astro`: shipped as source.
+- `src/carousel.css`: all layout and the default controls.
+- `site/`: the documentation site (`generate.mjs` writes `_site/`), including the wireframe
+  patterns in `wireframes.mjs`. Content there is fictional.
+- `test/unit/`: node's test runner on the TypeScript sources.
+- `test/e2e/`: Playwright against `_site/` and the adapter fixtures from `scripts/fixtures.mjs`.
+
+### Commands
+
+```sh
+pnpm install
+pnpm typecheck
+pnpm test                 # unit tests, no build needed
+pnpm build                # dist/: esbuild modules plus tsc declarations
+pnpm size                 # fails when an entry exceeds its gzip budget
+pnpm site                 # build, then _site/
+node scripts/fixtures.mjs # React, Preact and Astro fixtures into _site/fixtures/
+pnpm test:e2e             # Chromium, WebKit and Firefox
+pnpm check                # all of the above in order
+```
+
+Visual baselines exist per platform in `test/e2e/__screenshots__/<platform>`; update them with
+`UPDATE_VISUAL=1 pnpm test:e2e --project=chromium visual --update-snapshots=all`.
+
+### Conventions
+
+- No runtime dependencies. Anything a consumer does not use must tree-shake away; new optional
+  behaviour becomes a plugin.
+- Size budgets live in `scripts/size.mjs`. Raising one needs a reason in the commit message.
+- Layout stays in CSS. The script reads layout (custom properties, computed styles, geometry)
+  and never writes it.
+- Every must-have behaviour has a browser test that passes in all three engines. Fix flaky tests
+  instead of retrying them.
+- Descriptive names, English in code, comments and docs, no project code names.
+- Examples, fixtures and docs use fictional content. Never name or describe a client, its code,
+  its paths or its numbers in this repository, including commit messages.

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## 0.1.0 (2026-09-21)
+
+First version.
+
+- Core `attach()`: layout in CSS custom properties with scroll snap; arrows, dots, paging by a
+  number of slides or by view, pages counted from the initial slide, keyboard, live-region
+  announcements after settled moves, `sc:change` events, rewind by fading or scrolling back,
+  slides added or removed after attach, right to left.
+- Plugins: `drag()` for mouse dragging (snapping rows move by one page per drag, free rows keep
+  the throw's momentum), `autoplay()` with a pause button and WCAG-conform stops.
+- Adapters: React and Preact (`<Carousel>`, `useCarousel`), Astro (`Carousel.astro`), and server
+  helpers in `markup` (responsive container-query CSS, the pre-position snippet).
+- Documentation site with a live example per configuration and storefront patterns as wireframes.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nordwerk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,226 @@
+# scroll-carousel
+
+A carousel that is a native horizontal scroller first. The layout is plain CSS with scroll snap,
+so the markup your server sends is already the final layout: no layout shift, no hidden slides,
+no device detection on the server. A small script adds arrows, dots, paging by group, an API and
+change events. Drag and autoplay are opt-in plugins. No runtime dependencies.
+
+**Live examples:** https://studio-nordwerk.github.io/scroll-carousel/ (every configuration, with
+its code, plus common storefront patterns as wireframes next to the library options they replace).
+
+| Part | gzip, minified |
+| --- | --- |
+| Core: attach, arrows, dots, keyboard, announcements | 3.4 kB |
+| Drag plugin | +0.9 kB |
+| Autoplay plugin | +0.8 kB |
+| Stylesheet | 1.4 kB |
+
+Adapters for React, Preact and Astro are included; they render the markup and attach the core.
+
+## Install
+
+```sh
+pnpm add @nordwerk/scroll-carousel
+```
+
+React and Preact are optional peer dependencies; the Astro component compiles in your Astro build.
+
+## Quick start
+
+### Plain HTML
+
+```html
+<!-- carousel.css from the package, through your bundler or copied next to the page -->
+<link rel="stylesheet" href="carousel.css" />
+
+<div class="sc products">
+  <ul class="sc-track" data-sc-track tabindex="0" aria-label="Bestsellers">
+    <li>…</li>
+    <li>…</li>
+  </ul>
+  <button class="sc-nav sc-prev" type="button" data-sc-prev aria-label="Previous products">‹</button>
+  <button class="sc-nav sc-next" type="button" data-sc-next aria-label="Next products">›</button>
+  <div class="sc-dots" data-sc-dots></div>
+  <p class="sc-status" data-sc-status aria-live="polite"></p>
+</div>
+
+<style>
+  .products .sc-track { --sc-per-view: 2; --sc-group: 2; --sc-gap: 12px; }
+  @container sc (min-width: 800px) { .products .sc-track { --sc-per-view: 4; --sc-group: 4; } }
+</style>
+
+<script type="module">
+  import { attach } from '@nordwerk/scroll-carousel';
+  attach(document.querySelector('.products'));
+</script>
+```
+
+Without the script the row still scrolls and snaps; arrows and dots stay hidden until it runs.
+
+### React and Preact
+
+```jsx
+import { Carousel } from '@nordwerk/scroll-carousel/react'; // or '/preact'
+import { drag } from '@nordwerk/scroll-carousel/drag';
+import '@nordwerk/scroll-carousel/carousel.css';
+
+<Carousel
+  as="ul"
+  label="Bestsellers"
+  perView={{ 0: 2, 600: 3, 900: 4 }}
+  group={{ 0: 2, 600: 3, 900: 4 }}
+  gap={12}
+  plugins={[drag()]}
+  onChange={(state) => console.log(state.index)}
+  carouselRef={(carousel) => (window.row = carousel)}
+>
+  {products.map((product) => <ProductCard key={product.id} {...product} />)}
+</Carousel>;
+```
+
+Each child becomes a slide (`<li>` with `as="ul"`). Responsive values are keyed by the minimum
+width of the carousel itself, not the viewport, and are rendered as container queries in the
+server markup. For your own arrows and dots, render the markup yourself and use the hook:
+
+```jsx
+const { ref, carousel, state } = useCarousel({ rewind: true });
+// <div className="sc" ref={ref}><ul className="sc-track" data-sc-track …>…</ul></div>
+// <MyDots count={state?.pageCount} current={state?.page} onPick={(p) => carousel.goToPage(p)} />
+```
+
+### Astro
+
+```astro
+---
+import Carousel from '@nordwerk/scroll-carousel/astro';
+---
+<Carousel as="ul" label="Bestsellers" perView={{ 0: 2, 600: 3, 900: 4 }} group="page" gap={12} drag>
+  {products.map((product) => <li><ProductCard {...product} /></li>)}
+</Carousel>
+```
+
+Slides go in the default slot, one element each. Drag and autoplay are loaded only on pages that
+use them. Labels take templates: `labels={{ page: 'Slide {n} of {count}' }}`.
+
+## Markup
+
+| Element | Required | Purpose |
+| --- | --- | --- |
+| `.sc` root | yes | Query container named `sc`; gets the state attributes below |
+| `[data-sc-track]` with class `sc-track` | yes | The scroller. Give it `tabindex="0"` and an accessible name |
+| its children | yes | The slides, one element each |
+| `[data-sc-prev]`, `[data-sc-next]` | no | Any buttons. Class `sc-nav sc-prev` / `sc-next` for the default look |
+| `[data-sc-dots]` | no | Empty container; the script fills it with one button per page |
+| `[data-sc-status]` | no | Live region for "Items 5 to 8 of 12" after a settled move |
+| `[data-sc-play]` | no | Play and pause button for the autoplay plugin |
+| `[data-sc-initial]` on a slide | no | Open on this slide (see below) |
+
+State attributes on the root, for styling: `data-sc-ready`, `data-sc-overflow`,
+`data-sc-start`, `data-sc-end`, and with the plugins `data-sc-drag`, `data-sc-playing`,
+`data-sc-paused`.
+
+## Layout: custom properties
+
+Set them anywhere above the track, in media queries or in container queries. The root is the
+query container, so inside `@container sc (…)` set them on `.sc-track` (or on `.sc > *`).
+
+| Property | Default | |
+| --- | --- | --- |
+| `--sc-per-view` | `1` | Slides per view; fractions show part of the next slide |
+| `--sc-slide-size` | from per-view | A fixed size, or `auto` for the content width |
+| `--sc-gap` | `1rem` | Space between slides |
+| `--sc-offset-before`, `--sc-offset-after` | `0px` | Space before the first and after the last slide; snapped slides line up with it |
+| `--sc-snap` | `mandatory` | `mandatory`, `proximity` or `none` (free mode) |
+| `--sc-align` | `start` | `start` or `center` |
+| `--sc-centered` | `0` | `1` pads both ends so the first and last slide can reach the centre |
+| `--sc-count` | none | The slide count; per-view never exceeds it |
+| `--sc-group` | `1` | Slides per step of next and previous: a number or `page` |
+| `--sc-controls` | shown | `none` hides arrows, dots and the play button |
+
+Class `sc--center-few` keeps a row that does not overflow in the middle. Slides stretch to the
+same height unless you set `align-items` on the track.
+
+Theme for the default controls: `--sc-control-bg`, `--sc-control-fg`, `--sc-control-border`,
+`--sc-control-size`, `--sc-control-radius`, `--sc-control-shadow`, `--sc-nav-top`,
+`--sc-nav-inset`, `--sc-dot`, `--sc-dot-size`, `--sc-dot-height`, `--sc-dot-active-size`,
+`--sc-dot-radius`, `--sc-dot-idle`, `--sc-focus`. The defaults are neutral system colours.
+
+## API
+
+```ts
+const carousel = attach(root, options);
+```
+
+| Option | |
+| --- | --- |
+| `group` | Overrides `--sc-group` |
+| `initial` | Initial slide; overrides `[data-sc-initial]` |
+| `rewind` | `true` fades back to the start after the end (and the reverse); `'scroll'` scrolls back |
+| `labels` | `{ page(n, count), status(first, last, count, slides) }` for dots and the live region |
+| `onChange` | Called after every settled move that changed the state |
+| `prev`, `next`, `dots`, `status` | Elements elsewhere in the page, instead of the ones inside the root |
+| `plugins` | `[drag(), autoplay({ delay: 5000 })]` |
+
+| Member | |
+| --- | --- |
+| `index`, `page`, `pageCount`, `isBeginning`, `isEnd`, `state` | Current state; `state` is a copy of all of it plus `overflow` |
+| `next()`, `prev()` | One page on; with `rewind`, wraps around |
+| `slideTo(index, { instant })` | Show the page that contains the slide |
+| `goToPage(page, { instant })` | |
+| `update()` | Measure again after changing direction or a custom property from script |
+| `destroy()` | Remove everything the script added |
+| `play()`, `pause()` | With the autoplay plugin |
+
+The root dispatches `sc:change` with the state as `detail`, once per settled move (on
+`scrollend`, with a timer where that event is missing), and after resizes or content changes that
+alter the state. `getCarousel(root)` returns the carousel attached to a root.
+
+Pages are counted from the initial slide, so it always starts a page; the first page may be
+shorter. At the end, the last page shows the last full view. With a group larger than one, only
+page starts are snap points, so a swipe also comes to rest on a page.
+
+## Opening on a later slide without a jump
+
+Mark the slide with `data-sc-initial`. If the script runs after the first paint (as module and
+deferred scripts do), render the snippet from `@nordwerk/scroll-carousel/markup` right after the
+root: `<script>${PRE_POSITION}</script>`. It sets the start position while the page is parsed.
+The React, Preact and Astro adapters do this for you when `initial` is set.
+
+## Accessibility
+
+- Keyboard: the track is a tab stop; arrow keys move by a page, Home and End go to the ends.
+  Links and buttons in slides are reachable with Tab and scroll into view natively.
+- Without the script, or when nothing overflows, arrows and dots are not rendered at all, and a
+  row that cannot scroll is no tab stop.
+- Arrows at the ends get `aria-disabled` instead of `disabled`, so focus stays on them.
+- Settled moves are announced in the live region, never on every frame of a swipe, and never
+  for autoplay.
+- Autoplay pauses on hover, off-screen and in hidden tabs; keyboard focus entering the carousel
+  or any control stops it for good, only the play button restarts it; with reduced motion it
+  starts stopped. Moves are instant with reduced motion.
+- A skip link is plain markup: `<a class="sc-skip" href="#after-row">Skip …</a>` before the track.
+
+## Browser support
+
+Current Chromium, Firefox and Safari (container queries and container units, `:dir()`,
+`color-mix()`). Where `scrollend` is missing, a short timer stands in for it.
+
+## Replacing a library carousel
+
+See [docs/migration.md](docs/migration.md) for option-by-option mapping and what is deliberately
+not supported (true infinite loop, vertical, effects, virtual slides, synced thumbnails).
+
+## Development
+
+```sh
+pnpm install
+pnpm check      # typecheck, unit tests, build, size budget, site, fixtures, browser tests
+pnpm serve      # the site on http://localhost:4173 after pnpm site
+```
+
+See [AGENTS.md](AGENTS.md) for the repository layout and conventions, and
+[docs/testing.md](docs/testing.md) for what is tested automatically and by hand.
+
+## Licence
+
+MIT

package/dist/adapter.d.ts

@@ -0,0 +1,55 @@
+import { type Carousel, type CarouselOptions, type CarouselState, type Plugin } from './index.js';
+import { type LayoutProps } from './markup.js';
+export interface CarouselProps extends LayoutProps {
+    /** Accessible name of the scrolling list. */
+    label: string;
+    /** Element of the track. With 'ul' every child is wrapped in <li>, otherwise in <div>. */
+    as?: 'ul' | 'div';
+    children?: unknown;
+    className?: string;
+    style?: Record<string, string | number>;
+    slideClassName?: string;
+    /** Mark slides as groups with aria-roledescription="slide" and "n of count" labels. */
+    slideRoles?: boolean;
+    /** Keep a short row in the middle instead of at the start. */
+    centerFew?: boolean;
+    /** Default arrows. false renders none, e.g. when the host brings its own. */
+    arrows?: boolean;
+    /** Default dots. */
+    dots?: boolean;
+    /** Render a play/pause button for the autoplay plugin. */
+    playButton?: boolean;
+    labels?: CarouselOptions['labels'] & {
+        prev?: string;
+        next?: string;
+    };
+    initial?: number;
+    rewind?: CarouselOptions['rewind'];
+    group?: LayoutProps['group'];
+    plugins?: Plugin[];
+    onChange?: (state: CarouselState) => void;
+    /** Receives the carousel after attaching, and null after it is destroyed. */
+    carouselRef?: (carousel: Carousel | null) => void;
+}
+export interface Framework {
+    createElement: (...args: any[]) => any;
+    Fragment: any;
+    useState: <T>(initial: T) => [T, (value: T) => void];
+    useRef: <T>(initial: T) => {
+        current: T;
+    };
+    useEffect: (effect: () => void | (() => void), deps?: unknown[]) => void;
+    useLayoutEffect: (effect: () => void | (() => void), deps?: unknown[]) => void;
+    useId: () => string;
+    toChildArray: (children: unknown) => any[];
+}
+export declare function createAdapter(framework: Framework): {
+    Carousel: (props: CarouselProps) => any;
+    useCarousel: (options?: CarouselOptions) => {
+        ref: {
+            current: HTMLElement | null;
+        };
+        carousel: Carousel | null;
+        state: CarouselState | null;
+    };
+};

package/dist/autoplay.d.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from './index.js';
+export interface AutoplayOptions {
+    /** Milliseconds per page. Default 5000. */
+    delay?: number;
+    /** Start running on attach. Default true, except with reduced motion. */
+    start?: boolean;
+    /** Default: [data-sc-play] inside the root. */
+    button?: HTMLElement | null;
+    labels?: {
+        play?: string;
+        pause?: string;
+    };
+}
+export declare const autoplay: ({ delay, start, button, labels }?: AutoplayOptions) => Plugin;

package/dist/autoplay.js

@@ -0,0 +1,67 @@
+// src/autoplay.ts
+var autoplay = ({ delay = 5e3, start = true, button, labels = {} } = {}) => ({ root, track, listen, layout, step, on }) => {
+  const play = button || root.querySelector("[data-sc-play]");
+  const holds = /* @__PURE__ */ new Set();
+  let playing = start && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let timer = 0;
+  let left = delay;
+  let since = 0;
+  function sync() {
+    const running = playing && !holds.size && layout().pages.length > 1;
+    root.toggleAttribute("data-sc-playing", playing);
+    root.toggleAttribute("data-sc-paused", playing && !running);
+    play?.setAttribute("aria-label", playing ? labels.pause || "Stop automatic scrolling" : labels.play || "Start automatic scrolling");
+    if (running && !timer) {
+      since = performance.now();
+      timer = setTimeout(() => {
+        timer = 0;
+        left = delay;
+        step(1, true, true);
+        sync();
+      }, left);
+    } else if (!running && timer) {
+      clearTimeout(timer);
+      timer = 0;
+      left = Math.max(0, left - (performance.now() - since));
+    }
+  }
+  function set(on2) {
+    playing = on2;
+    left = delay;
+    clearTimeout(timer);
+    timer = 0;
+    sync();
+  }
+  const hold = (reason, on2) => {
+    holds[on2 ? "add" : "delete"](reason);
+    sync();
+  };
+  if (track.matches(":hover")) holds.add("hover");
+  if (document.hidden) holds.add("hidden");
+  if (root.contains(document.activeElement) && !play?.contains(document.activeElement)) playing = false;
+  root.style.setProperty("--sc-autoplay-delay", `${delay}ms`);
+  on("control", () => playing && set(false));
+  on("measure", sync);
+  listen(play, "click", () => set(!playing));
+  listen(track, "pointerenter", (event) => event.pointerType == "mouse" && hold("hover", true));
+  listen(track, "pointerleave", (event) => event.pointerType == "mouse" && hold("hover", false));
+  listen(root, "focusin", (event) => !play?.contains(event.target) && playing && set(false));
+  listen(document, "visibilitychange", () => hold("hidden", document.hidden));
+  const visibility = new IntersectionObserver(([entry]) => hold("offscreen", !entry.isIntersecting));
+  visibility.observe(root);
+  sync();
+  return {
+    play: () => set(true),
+    pause: () => set(false),
+    destroy() {
+      clearTimeout(timer);
+      visibility.disconnect();
+      root.removeAttribute("data-sc-playing");
+      root.removeAttribute("data-sc-paused");
+      root.style.removeProperty("--sc-autoplay-delay");
+    }
+  };
+};
+export {
+  autoplay
+};