How animation-timeline: scroll() Replaces Scroll JavaScript

import { LitElement, html, css } from 'lit';
import { customElement, state, query } from 'lit/decorators.js';

/**
 * The running tally of work the naive scroll engine does, shown live so the cost is concrete rather than asserted.
 */
type EngineCounters = {

	/**
	 * Scroll events the one overloaded handler has serviced, the cost the CSS version drops to zero.
	 */
	handlerCalls: number;

	/**
	 * Layout reads the handler forces per frame: one scrollTop plus one getBoundingClientRect for every section.
	 */
	layoutReads: number;

	/**
	 * Style writes the handler makes, the bar's scaleX set on every scroll.
	 */
	styleWrites: number;

	/**
	 * Recalculations the animated resize drives, standing in for the resize listener a grown engine keeps.
	 */
	resizeRecalcs: number;
};

/**
 * The naive JavaScript scroll engine, the version that looked done and then grew teeth.
 *
 * A single `scroll` listener on the inner scroller paints the reading-progress bar, reads every section box to find the active one, and shrinks the header, so the side panel can count the handler calls, layout reads, and style writes piling up on the main thread.
 * It listens to its own scroll container rather than the window, so it runs inside the article's auto-sized iframe instead of needing the whole page to scroll.
 *
 * @element demo-animation-timeline-scroll-scroll-listener-grows-teeth
 */
@customElement( 'demo-animation-timeline-scroll-scroll-listener-grows-teeth' )
export class ScrollListenerGrowsTeethDemo extends LitElement {

	/**
	 * Live counts of the work the engine does, updated on every scroll and resize so the reader watches the cost climb.
	 */
	@state()
	private counters: EngineCounters = { handlerCalls: 0, layoutReads: 0, styleWrites: 0, resizeRecalcs: 0 };

	/**
	 * The title of the section the engine currently considers active, shown in the sticky header.
	 */
	@state()
	private activeLabel = 'Introduction';

	/**
	 * Whether the header has compressed, toggled by the engine once the reader scrolls past a small threshold.
	 */
	@state()
	private shrunk = false;

	/**
	 * The inner scroll container that drives everything; the engine listens to its scroll, never the window's.
	 */
	@query( '.scroller' )
	private $scroller!: HTMLElement;

	/**
	 * The progress-bar fill the engine writes `scaleX` onto on every scroll event.
	 */
	@query( '.fill' )
	private $fill!: HTMLElement;

	/**
	 * The box whose width the Resize button animates, standing in for a layout change that forces the engine to recompute its measurements.
	 */
	@query( '.resize-box' )
	private $resizeBox!: HTMLElement;

	/**
	 * The cached maximum scroll distance, recomputed on resize the way a real engine caches and invalidates layout.
	 */
	private max = 1;

	/**
	 * The fixed lines-of-JavaScript figure for the grown engine, the constant a few lines of CSS later drive to zero.
	 */
	private readonly linesOfJs = 38;

	/**
	 * The timer driving the Resize animation, tracked so it can be cleared when it finishes or the demo leaves the document.
	 */
	private resizeTimer = 0;

	/**
	 * Styles for the harness shell, the inner scroller, and the side panel of counters.
	 */
	static styles = css`
		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		:host { display: block; height: 100%; font-family: var(--font-sans, system-ui, sans-serif); color: var(--ink, #17171a); }
		.wrap { display: grid; grid-template-columns: 1fr 200px; height: 100%; min-height: 420px; }
		.stage { padding: 16px; min-width: 0; }
		.scroller { position: relative; height: 360px; overflow-y: auto; border: 1px solid var(--line, #e7e6e2); border-radius: 12px; background: var(--surface, #fff); scrollbar-width: thin; }
		.topbar { position: sticky; top: 0; z-index: 2; background: color-mix( in srgb, var(--surface, #fff) 88%, transparent ); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line, #e7e6e2); }
		.track { height: 5px; background: var(--line-soft, #eee); }
		.fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent, #2257e6); }
		.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; transition: padding 0.2s ease; }
		.head.shrunk { padding: 7px 16px; }
		.head h3 { margin: 0; font-size: 17px; transition: font-size 0.2s ease; }
		.head.shrunk h3 { font-size: 14px; }
		.active { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent, #2257e6); white-space: nowrap; }
		.body { padding: 18px 16px 40px; }
		.resize-box { width: 100%; margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--accent, #2257e6); border-radius: 8px; font-size: 12px; color: var(--ink-soft, #56565c); background: color-mix( in srgb, var(--accent, #2257e6) 6%, transparent ); }
		section { margin-bottom: 22px; }
		section h4 { margin: 0 0 8px; font-size: 15px; }
		section p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft, #56565c); }
		.panel { border-left: 1px solid var(--line, #e7e6e2); padding: 16px; display: flex; flex-direction: column; gap: 0; background: var(--bg, #fcfcfb); }
		.panel h5 { margin: 0 0 8px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft, #56565c); }
		.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line-soft, #eee); font-size: 12.5px; color: var(--ink-soft, #56565c); }
		.row b { font-family: var(--font-mono, monospace); font-size: 16px; color: var(--accent, #2257e6); font-weight: 700; }
		.resize-btn { margin-top: 14px; font: inherit; font-size: 12.5px; padding: 9px 12px; border: 1px solid var(--line, #e7e6e2); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #17171a); cursor: pointer; }
		.resize-btn:hover { border-color: var(--accent, #2257e6); }
		.note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-faint, #8a8a90); }
		@media (width <= 560px) {
			.wrap { grid-template-columns: 1fr; }
			.panel { border-left: 0; border-top: 1px solid var(--line, #e7e6e2); flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
			.panel h5 { flex-basis: 100%; }
			.row { border-top: 0; padding: 4px 0; }
		}
	`;

	/**
	 * Caches the max scroll distance and attaches the scroll listener once the DOM exists, on every connect.
	 *
	 * Awaits the first render so the scroller is laid out, then guards the await against a teardown that raced it.
	 * Using `connectedCallback` rather than `firstUpdated` means a reconnected element re-attaches the listener and recomputes the range instead of going inert, the same lifecycle discipline the final component keeps.
	 */
	async connectedCallback(): Promise<void> {
		super.connectedCallback();
		await this.updateComplete;

		if ( ! this.isConnected ) {
			return;
		}

		this.max = this.$scroller.scrollHeight - this.$scroller.clientHeight;
		this.$scroller.addEventListener( 'scroll', this.onScroll, { passive: true } );
	}

	/**
	 * Removes the scroll listener and stops the resize animation, the cleanup a grown engine has to remember.
	 *
	 * The optional chain covers a disconnect that runs before the first render ever resolved `$scroller`.
	 */
	disconnectedCallback(): void {
		super.disconnectedCallback();
		this.$scroller?.removeEventListener( 'scroll', this.onScroll );
		window.clearInterval( this.resizeTimer );
	}

	/**
	 * The one overloaded handler: it paints the bar, reads every section box to pick the active one, and shrinks the header, all by touching layout on every scroll event.
	 */
	private onScroll = (): void => {
		// The range was cached while the iframe could still be zero-sized (a lazy load racing the page's hydration), so an obviously wrong cache re-measures once here; the resize handler owns every later recompute.
		if ( this.max <= 0 ) {
			this.max = this.$scroller.scrollHeight - this.$scroller.clientHeight;
		}

		const top = this.$scroller.scrollTop;
		const progress = this.max > 0 ? Math.min( top / this.max, 1 ) : 0;
		this.$fill.style.transform = `scaleX( ${ progress } )`;

		const $sections = Array.from( this.$scroller.querySelectorAll<HTMLElement>( 'section[id]' ) );
		let active = this.activeLabel;
		for ( const $section of $sections ) {
			const rect = $section.getBoundingClientRect();
			if ( rect.top <= 140 ) {
				active = $section.dataset.title ?? $section.id;
			}
		}

		this.counters = {
			handlerCalls: this.counters.handlerCalls + 1,
			layoutReads: this.counters.layoutReads + 1 + $sections.length,
			styleWrites: this.counters.styleWrites + 1,
			resizeRecalcs: this.counters.resizeRecalcs,
		};
		if ( active !== this.activeLabel ) {
			this.activeLabel = active;
		}
		if ( ( top > 40 ) !== this.shrunk ) {
			this.shrunk = top > 40;
		}
	};

	/**
	 * Animates the resize box narrower and back over three seconds, recomputing the cached max on every frame the way a resize listener would, so one tap shows the resize recalcs climb without anyone touching the window.
	 */
	private onResize = (): void => {
		const start = performance.now();
		window.clearInterval( this.resizeTimer );
		this.resizeTimer = window.setInterval( () => {
			const t = Math.min( ( performance.now() - start ) / 3000, 1 );
			// A triangle wave: 0 at the ends, 1 in the middle, so the box narrows then returns to its original width.
			const wave = 1 - Math.abs( t * 2 - 1 );
			this.$resizeBox.style.width = `${ 100 - wave * 45 }%`;
			this.max = this.$scroller.scrollHeight - this.$scroller.clientHeight;
			this.counters = {
				...this.counters,
				resizeRecalcs: this.counters.resizeRecalcs + 1,
				layoutReads: this.counters.layoutReads + 1,
			};
			if ( t >= 1 ) {
				window.clearInterval( this.resizeTimer );
			}
		}, 50 );
	};

	/**
	 * Renders the inner scroller with its sticky progress bar and shrinking header beside the live cost panel.
	 */
	render() {
		return html`
			<div class="wrap">
				<div class="stage">
					<div class="scroller">
						<div class="topbar">
							<div class="track"><div class="fill"></div></div>
							<div class="head ${ this.shrunk ? 'shrunk' : '' }">
								<h3>The launch post</h3>
								<span class="active">active: ${ this.activeLabel }</span>
							</div>
						</div>
						<div class="body">
							<div class="resize-box">A sidebar that can change width. Tap Resize to watch the engine recompute.</div>
							<section id="intro" data-title="Introduction">
								<h4>Introduction</h4>
								<p>Scroll this panel. The bar at the top fills, the header shrinks, and the active label tracks where you are. Every bit of that runs in one scroll handler.</p>
							</section>
							<section id="setup" data-title="Setup">
								<h4>The setup</h4>
								<p>It began as one line that wrote the bar's scaleX from the scroll offset. Then it grew a section scan, a header toggle, and a resize listener, all sharing the same event.</p>
							</section>
							<section id="growth" data-title="Growth">
								<h4>How it grew</h4>
								<p>Each new request rode the one handler. The counters on the right are the bill: a layout read per section, a style write, every single scroll frame.</p>
							</section>
							<section id="cost" data-title="Cost">
								<h4>The cost</h4>
								<p>On a fast desktop this feels fine. On a mid-range phone, reading layout inside the scroll handler makes the browser recompute geometry on frames it would rather spend scrolling.</p>
							</section>
							<section id="end" data-title="The point">
								<h4>The point</h4>
								<p>One small ask became a scroll engine. The next steps in the article delete the paint half of it and watch these counters fall to zero.</p>
							</section>
						</div>
					</div>
				</div>
				<div class="panel">
					<h5>Scroll engine cost</h5>
					<div class="row"><span>scroll-handler calls</span><b>${ this.counters.handlerCalls }</b></div>
					<div class="row"><span>layout reads</span><b>${ this.counters.layoutReads }</b></div>
					<div class="row"><span>style writes</span><b>${ this.counters.styleWrites }</b></div>
					<div class="row"><span>resize recalcs</span><b>${ this.counters.resizeRecalcs }</b></div>
					<div class="row"><span>lines of JavaScript</span><b>${ this.linesOfJs }</b></div>
					<button type="button" class="resize-btn" @click=${ this.onResize }>Resize the sidebar</button>
					<p class="note">A few lines of CSS later drive the same bar with every counter at zero.</p>
				</div>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-animation-timeline-scroll-scroll-listener-grows-teeth': ScrollListenerGrowsTeethDemo;
	}
}

/* The static base: an empty bar, so an engine without scroll-driven
   animation shows scaleX(0) rather than a stuck, permanently full bar. */
.fill {
	transform: scaleX( 0 );
	transform-origin: left;
}

@keyframes grow-progress {
	from { transform: scaleX( 0 ); }
	to { transform: scaleX( 1 ); }
}

/* Gate the scroll-driven rule, then attach the timeline. scroll() resolves
   to the nearest scrolling ancestor, the inner scroller the fill sits in.
   animation-timeline is declared after the shorthand or it resets to auto.
   The both fill holds the bar full at the exact end of the scroll, which
   sits just past the animation's active range. */
@supports ( ( animation-timeline: scroll() ) and ( animation-range: 0% 100% ) ) {
	.fill {
		animation: grow-progress 1ms linear both;
		animation-timeline: scroll();
	}
}

/* One bar, one set of keyframes. Only the timeline it reads changes. */
@keyframes fill {
	from { transform: scaleX( 0 ); }
	to { transform: scaleX( 1 ); }
}

.bar {
	/* Static base: empty bar wherever the timeline never runs. */
	transform: scaleX( 0 );
	transform-origin: left;
}

/* The two scrollers each publish a named timeline. */
.panel { scroll-timeline: --panel block; }
.outer { scroll-timeline: --outer block; }

/* The bar is a descendant of .outer but a sibling subtree from .panel, so a
   common ancestor lifts both names into scope where the bar can name either. */
.stage { timeline-scope: --panel, --outer; }

@supports ( ( animation-timeline: scroll() ) and ( animation-range: 0% 100% ) ) {
	.bar { animation: fill 1ms linear both; } /* both holds the ends: the exact bottom sits past the active range and would otherwise snap the bar to its empty base */

	/* The nested panel drives the bar. */
	.bar[ data-source='panel' ] { animation-timeline: --panel; }

	/* The whole demo (the outer scroller) drives the bar. */
	.bar[ data-source='outer' ] { animation-timeline: --outer; }

	/* Wrong axis: the nearest inline scroll container has no scrollbar, so this
	   timeline is inactive and the bar keeps its empty base. */
	.bar[ data-source='wrong' ] { animation-timeline: scroll( nearest inline ); }
}

@keyframes reveal {
	from { opacity: 0; transform: translateY( 88px ) scale( 0.85 ); }
	to { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

.card { opacity: 1; }

@supports ( ( animation-timeline: view() ) and ( animation-range: entry 0% cover 40% ) ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.card {
			animation: reveal 1ms linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
	}
}

/* Same visual glide, two engines. */

/* Compositor-friendly: transform, with opacity the classic compositor-safe pair, */
/* is a property the browser can keep on its own thread, so the compositor keeps it gliding */
/* while the main thread is blocked. The animation is already active, so it is */
/* compositor-eligible on its own; no will-change hint is needed. */
@keyframes glide-transform {
	from { transform: translateX( 0 ) scale( 1 ); }
	to   { transform: translateX( 180px ) scale( 1.25 ); }
}

.box--transform {
	animation: glide-transform 2.6s linear infinite alternate;
}

/* Main-thread bound: animating a layout property (here `margin-left` and */
/* `height`) recomputes layout every frame, so the same motion stalls the */
/* instant the main thread is blocked, then jumps when it frees. */
@keyframes glide-layout {
	from { margin-left: 0; height: 56px; }
	to   { margin-left: 180px; height: 70px; }
}

.box--layout {
	animation: glide-layout 2.6s linear infinite alternate;
}

import { LitElement, html, css, type PropertyValues } from 'lit';
import { customElement, state, query, queryAll } from 'lit/decorators.js';

/**
 * One section of the sample article, the unit the active-section observer tracks and the unit CSS reveals.
 *
 * The body is a sentence or two of filler so each section is tall enough to cross the reading line on its own as the inner reader scrolls.
 */
interface DemoSection {

	/**
	 * The section id, the value the active-section readout reports and the illustrative URL-hash readout mirrors.
	 */
	id: string;

	/**
	 * The human label shown in the active-section readout, also written to the section's `data-title`.
	 */
	title: string;

	/**
	 * A short body paragraph, present in the static base so the CSS reveal only decorates how a card enters.
	 */
	body: string;
}

/**
 * Which layer paints the progress bar, the contrast the assembled review makes visible and countable; the reveals stay on their CSS timeline in both modes.
 *
 * `css` lets the CSS `scroll()` timeline own the bar's paint, the result the article argues for.
 * `js` simulates the deleted scroll engine, repainting the bar from a `scroll` listener so the contrast is visible and countable.
 */
type Implementation = 'css' | 'js';

/**
 * The assembled review page for the scroll-driven article: one inner scroller that runs every behavior at once, with live readouts for the JavaScript half.
 *
 * CSS owns the sticky reading-progress bar (a `scroll()` timeline) and the card reveals (a `view()` timeline); both run with no handler of ours.
 * JavaScript owns the active-section label and the one-shot halfway analytics counter, and the URL hash and load-more note shown as the same signal-then-act pattern, the observer supplying the signal and the app owning the act.
 * Every observer here is rooted on the inner reader, not the viewport, because in the article's auto-height iframe the page never scrolls and only the reader does; a viewport-rooted observer would read the wrong scrollport.
 * The reduced-motion and unsupported-engine states are simulated by toggling a `data-` attribute: reduced motion removes only the decorative reveals and keeps the informational progress bar, while unsupported removes both CSS timelines, matching a failed feature query. The controls label them as simulations because a sandboxed iframe can force neither.
 *
 * The code panel beside this demo shows this harness itself, so what you read is what runs, with every observer rooted on the inner reader; the copyable, viewport-rooted version of the same JavaScript half is `article-scroll`, shown assembled in the article.
 *
 * The custom-element tag is the long, collision-proof name the registry derives as `demo-<article>-<slug>`; it is never shown to a reader.
 *
 * @element demo-animation-timeline-scroll-scroll-final-review
 */
@customElement( 'demo-animation-timeline-scroll-scroll-final-review' )
export class ScrollFinalReviewDemo extends LitElement {

	/**
	 * Which implementation paints the progress bar, driving the `data-impl` attribute on the reader.
	 *
	 * It starts on `css`, the state the article argues for, so the demo opens on the deleted-JavaScript result.
	 */
	@state()
	private implementation: Implementation = 'css';

	/**
	 * Whether the demo simulates a reduced-motion preference, driving the `data-reduced-motion` attribute.
	 *
	 * The toggle is labeled a simulation because a sandboxed iframe cannot set `prefers-reduced-motion`; flipping it strips the reveal so the cards rest on their content-complete base.
	 */
	@state()
	private reducedMotion = false;

	/**
	 * Whether the demo simulates an engine without scroll-driven animation support, driving the `data-unsupported` attribute.
	 *
	 * It stands in for a browser where the `@supports` gate fails: the bar sits at its static `scaleX( 0 )` base and the cards stay fully visible, never falsely full or hidden.
	 */
	@state()
	private unsupported = false;

	/**
	 * The label of the section currently on the reading line, set by the scroller-rooted section observer.
	 *
	 * It starts as a dash so the readout reads honestly before the first section resolves rather than guessing a section.
	 */
	@state()
	private activeTitle = '-';

	/**
	 * The id of the active section, the value the illustrative URL-hash readout mirrors.
	 */
	@state()
	private activeId = '';

	/**
	 * How many times the halfway analytics milestone has fired, the live proof the one-shot guard holds.
	 *
	 * It reaches one when the reader first crosses the midpoint and stays there however often the reader scrolls back over it.
	 */
	@state()
	private halfwayCount = 0;

	/**
	 * How many times the foot sentinel has requested the next page, counted from the illustrative load-more pattern.
	 *
	 * The demo only counts the request; it runs no fetch, which is the boundary the article draws around load-more.
	 */
	@state()
	private loadMoreCount = 0;

	/**
	 * How many `scroll` events the simulated JavaScript engine has handled, the cost the CSS version drops to zero.
	 *
	 * It only climbs while `implementation` is `js`, since the CSS timeline runs no handler of ours at all.
	 */
	@state()
	private scrollHandlerCalls = 0;

	/**
	 * The main reader, the real scroll container whose overflow keeps the CSS `scroll()` and `view()` timelines active.
	 *
	 * It is also the `root` every IntersectionObserver here watches against, and the element the simulated JavaScript engine reads its scroll position from.
	 */
	@query( '.reader' )
	private $reader!: HTMLElement;

	/**
	 * The progress-bar fill inside the reader, the element the simulated JavaScript engine writes `scaleX` onto.
	 *
	 * In CSS mode it carries no inline transform and the `scroll()` timeline drives it; in JavaScript mode the scroll handler sets its transform directly.
	 */
	@query( '.reader > .bar-track .bar-fill' )
	private $barFill!: HTMLElement;

	/**
	 * The section boxes inside the reader, resolved by Lit so the section observer can watch each one.
	 *
	 * They are real children of the reader rather than slotted into a sub-component, so the observer can root on the reader without crossing a shadow boundary.
	 */
	@queryAll( 'section.card' )
	private $sections!: NodeListOf<HTMLElement>;

	/**
	 * The midpoint sentinel inside the reader, the single element the halfway analytics observer watches.
	 *
	 * It is an absolutely positioned strip from half the content's height to its end, observed through a band at the middle of the reader, so the halfway event lands closely on the bar's fifty percent and no scroll speed can skip it.
	 */
	@query( '#halfway-sentinel' )
	private $halfwaySentinel!: HTMLElement;

	/**
	 * The foot sentinel inside the reader, the single element the load-more observer watches.
	 */
	@query( '#foot-sentinel' )
	private $footSentinel!: HTMLElement;

	/**
	 * Section ids in document order, so a tie on the reading line resolves to the earliest section deterministically.
	 *
	 * Filled once the sections exist; the active section is the first id in this order that is currently on the line.
	 */
	private readonly sectionIds: string[] = [];

	/**
	 * Section titles keyed by id, resolved once so the readout shows a label without re-reading the DOM on every change.
	 */
	private readonly sectionTitles = new Map<string, string>();

	/**
	 * Ids of the sections currently touching the reading line, a set because membership rather than order is what each callback toggles.
	 *
	 * Document order, used to pick the active one, comes from {@link ScrollFinalReviewDemo.sectionIds}, never from the order the browser delivers entries.
	 */
	private readonly onLine = new Set<string>();

	/**
	 * Whether the halfway milestone has already fired, the guard that keeps the analytics event a one-shot.
	 */
	private hasReportedHalfway = false;

	/**
	 * Whether the illustrative load-more request has fired, the in-flight guard a production consumer would clear after appending the page.
	 */
	private hasRequestedMore = false;

	/**
	 * The scroll handler for the simulated JavaScript engine, retained as a field so it can be added and removed by reference.
	 *
	 * Keeping a stable reference is the same discipline the article keeps for the listener it ultimately deletes: a handler you add you must be able to remove.
	 */
	private readonly onReaderScroll = (): void => {
		this.scrollHandlerCalls += 1;
		this.paintProgressFromScroll();
	};

	/**
	 * Paints the progress bar from the reader's current scroll position without counting a call.
	 *
	 * The initial paint when JavaScript mode is selected goes through here rather than the handler, so the call count reflects real scroll events and never starts at one before the reader has moved.
	 */
	private paintProgressFromScroll(): void {
		const max = this.$reader.scrollHeight - this.$reader.clientHeight;
		const progress = max > 0 ? this.$reader.scrollTop / max : 0;
		this.$barFill.style.transform = `scaleX( ${progress} )`;
	}

	/**
	 * The active-section observer, rooted on the reader so the reading line is measured against the scroller, not the viewport.
	 *
	 * Setting `root` to the reader is the load-bearing choice: the page never scrolls inside the iframe, so a default viewport root would measure the wrong scrollport and the label would never track.
	 * The active section is the first id in document order currently on the line, so the result never depends on the order the browser delivers entries, and a short section fully in view cannot outrank the tall one the reader is inside.
	 */
	private sectionObserver: IntersectionObserver | null = null;

	/**
	 * The halfway analytics observer, rooted on the reader, firing the milestone the first time the midpoint sentinel crosses into view.
	 *
	 * The `hasReportedHalfway` guard makes it a one-shot, so scrolling back up across the midpoint never re-reports.
	 */
	private halfwayObserver: IntersectionObserver | null = null;

	/**
	 * The load-more observer, rooted on the reader, counting an illustrative next-page request when the foot sentinel scrolls into view.
	 *
	 * It only tallies the request to show the shape, the observer signaling and the app owning the request; the demo deliberately runs no fetch and loads no next page.
	 */
	private loadMoreObserver: IntersectionObserver | null = null;

	/**
	 * The reader height the line observers were last built for, so a resize only rebuilds them when the height actually changes.
	 */
	private lineObserverHeight = 0;

	/**
	 * Watches the reader for height changes, since the reading-line and halfway margins are pixels derived from that height.
	 */
	private readerResize: ResizeObserver | null = null;

	/**
	 * The sample article sections, fixed content so the active-section and reveal behavior is deterministic across loads.
	 *
	 * Each id doubles as the illustrative URL hash, and each title is the label the active-section readout shows.
	 */
	private readonly sections: DemoSection[] = [
		{
			id: 'intro',
			title: 'The request',
			body: 'Marketing asked for a progress bar, card reveals, a shrinking header, a section label, a halfway event, a live URL hash, and an endless feed. That is seven jobs wearing one scroll.',
		},
		{
			id: 'contracts',
			title: 'Name the jobs',
			body: 'A visual timeline is the one kind of scroll work CSS can take off your hands. State, events, navigation, and data stay in JavaScript, and naming each job is the whole decision.',
		},
		{
			id: 'progress',
			title: 'Delete the paint',
			body: 'The progress bar and the reveals move to CSS timelines, gated behind a feature query over a content-complete base, so an unsupported engine still reads cleanly.',
		},
		{
			id: 'state',
			title: 'Keep the state',
			body: 'The active section is a value the app reads, so an IntersectionObserver resolves it in document order. This readout is that state, live.',
		},
		{
			id: 'analytics',
			title: 'Fire the event',
			body: 'Reading past the midpoint is a business event, so it fires once behind a guard off its own sentinel, never a scroll listener. Cross back over it and it stays quiet.',
		},
		{
			id: 'review',
			title: 'What stays in JS',
			body: 'The hash and the next-page fetch stay JavaScript-owned, each riding an observer signal. This demo names their shape and stops short of a router or an infinite feed.',
		},
		{
			id: 'header',
			title: 'The header is layout',
			body: 'Pinning the header is layout, so position: sticky owns that half without a listener. A purely visual shrink stays in CSS, smooth or stepped, and it moves to JavaScript only when the app reads the state.',
		},
		{
			id: 'ship',
			title: 'Ship the split',
			body: 'Scroll to the very bottom and the bar should sit completely full. Every behavior above is tagged with its owner, which is the routing this whole build teaches.',
		},
	];

	/**
	 * Styles for the harness shell, the scroll container, the CSS timelines, and the controls, scoped to the shadow root.
	 *
	 * The reading progress bar and the card reveals are gated behind `@supports` over static bases: JavaScript mode replaces only the bar's timeline with a scroll handler, reduced motion removes only the decorative reveals, and the unsupported state removes both CSS timelines.
	 */
	static styles = css`
		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		:host {
			display: block;
			height: 100%;
			font-family: var( --font-sans, system-ui, sans-serif );
			color: var( --ink, #17171a );
		}

		.wrap {
			display: grid;
			grid-template-columns: 1fr 19rem;
			min-height: 620px;
			height: 100%;
		}

		/* The stage cell takes the row height the controls column sets, and the reader fills it absolutely, so the scrollable area is always exactly as tall as the sidebar. */
		.stage {
			position: relative;
			min-height: 620px;
		}

		.reader {
			position: absolute;
			inset: 0;
			overflow: auto;
			border-right: 1px solid var( --line, #e7e6e2 );
			background: var( --bg, #fcfcfb );
		}

		.bar-track {
			position: sticky;
			top: 0;
			z-index: 2;
			height: 6px;
			background: var( --line-soft, #f0efec );
		}

		.bar-fill {
			height: 100%;
			background: var( --accent, #2257e6 );
			/* Static base: an empty bar wherever the timeline never runs, never a falsely full one. */
			transform: scaleX( 0 );
			/* Grows from the left edge. */
			transform-origin: left;
		}

		/*
		 * The progress bar as a whole behavior in CSS, gated as a conservative whole-feature query.
		 * The bar sets no animation-range itself, so the range here is a completeness proxy: an engine that parses the timeline but cannot run the full model degrades as one piece.
		 * The data- guards drop the rule for the JavaScript and unsupported simulations; reduced motion deliberately keeps the bar, since it informs reading position rather than decorating it.
		 */
		@supports ( ( animation-timeline: scroll() ) and ( animation-range: 0% 100% ) ) {
			.reader:not( [data-impl='js'] ):not( [data-unsupported] ) > .bar-track .bar-fill {
				animation: grow-progress 1ms linear both;
				/*
				 * Must come after the animation shorthand, which resets it to auto.
				 * scroll() is scroll( nearest ): it resolves to the nearest ancestor scroll container, the .reader, whose overflow actually scrolls.
				 * scroll( self ) would target the .bar-fill's own scroll, and the fill is not a scroll container, so the timeline would be inactive and the bar would stay at its scaleX( 0 ) base and never fill.
				 */
				animation-timeline: scroll();
			}
		}

		@keyframes grow-progress {
			from {
				transform: scaleX( 0 );
			}

			to {
				transform: scaleX( 1 );
			}
		}

		.content {
			position: relative;
			padding: var( --space-5, 20px );
			display: grid;
			gap: var( --space-5, 20px );
		}

		.lede {
			margin: 0;
			font-size: var( --fs-13, 13px );
			line-height: 1.6;
			color: var( --ink-soft, #56565c );
		}

		.card {
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius-md, 12px );
			background: var( --surface, #fff );
			padding: var( --space-5, 20px );
			min-height: 168px;
			display: grid;
			gap: 10px;
			align-content: start;
			/* Static, content-complete base for the unsupported and reduced-motion fallbacks. */
			opacity: 1;
		}

		.card h3 {
			margin: 0;
			font-size: var( --fs-17, 17px );
			color: var( --ink, #17171a );
		}

		.card p {
			margin: 0;
			font-size: var( --fs-13, 13px );
			line-height: 1.6;
			color: var( --ink-soft, #56565c );
		}

		/*
		 * The card reveal on a view timeline, gated on the exact range it uses and held behind the reduced-motion guard.
		 * The reduced-motion and unsupported guards strip it to the content-complete opacity: 1 base; the JavaScript bar mode leaves it alone, because the reveals stay CSS-owned in both modes.
		 * The keyframe is deliberately bold (a long lift plus a scale) so the reveal is unmistakable in a small frame; the article's minimal 2rem lift teaches the same rule.
		 */
		@supports ( ( animation-timeline: view() ) and ( animation-range: entry 0% cover 40% ) ) {
			@media ( prefers-reduced-motion: no-preference ) {
				.reader:not( [data-unsupported] ):not( [data-reduced-motion] ) .card {
					animation: reveal 1ms linear both;
					animation-timeline: view();
					/* Start as the card enters, finish 40% up the cover range. */
					animation-range: entry 0% cover 40%;
				}
			}
		}

		@keyframes reveal {
			from {
				opacity: 0;
				transform: translateY( 88px ) scale( 0.85 );
			}

			to {
				opacity: 1;
				transform: translateY( 0 ) scale( 1 );
			}
		}

		/*
		 * A footer-sized run of space below the last card so its reveal endpoint (cover 40%) is reachable before the scroller bottoms out.
		 * Without it the final card parks mid-reveal at max scroll, half transparent and shifted, because the range cannot complete.
		 */
		.tail {
			min-height: 240px;
			margin: 0;
			display: grid;
			place-content: end center;
			color: var( --ink-soft, #56565c );
			font-size: 0.8rem;
		}

		.sentinel {
			height: 1px;
			margin: 0;
			padding: 0;
			pointer-events: none;
		}

		/* A strip from half the content's height to its end, observed through a band at the reader's middle: the halfway event fires closely on the bar's fifty percent, and a fast flick can never jump past it between observer samples. */
		.sentinel--halfway {
			position: absolute;
			top: 50%;
			bottom: 0;
			left: 0;
			width: 1px;
			height: auto;
		}

		.controls {
			padding: var( --space-5, 18px );
			display: grid;
			gap: 14px;
			align-content: start;
		}

		.section-title {
			font-family: var( --font-mono, monospace );
			font-size: 10px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var( --ink-faint, #71717b );
			margin: 0 0 8px;
		}

		.readouts {
			display: grid;
			gap: 8px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.readout {
			display: grid;
			gap: 3px;
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius, 9px );
			padding: 8px 10px;
		}

		.readout .k {
			font-size: 11px;
			color: var( --ink-faint, #71717b );
		}

		.stack {
			display: grid;
			gap: 8px;
			align-content: start;
		}

		.control-label {
			margin: 0 0 4px;
			font-size: 11px;
			color: var( --ink-faint, #71717b );
		}

		.control-note {
			margin: 6px 0 0;
			font-size: 10px;
			line-height: 1.5;
			color: var( --ink-faint, #71717b );
		}

		.readout .v {
			font-family: var( --font-mono, monospace );
			font-size: 13px;
			color: var( --ink, #17171a );
			word-break: break-all;
		}

		.note {
			font-size: 10px;
			color: var( --ink-faint, #71717b );
		}

		.seg {
			display: flex;
			width: 100%;
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: 7px;
			overflow: hidden;
		}

		.seg-option {
			flex: 1;
			padding: 6px 8px;
			border: none;
			background: var( --bg, #fcfcfb );
			color: var( --ink-soft, #56565c );
			font: inherit;
			font-size: 12px;
			cursor: pointer;
		}

		.seg-option + .seg-option {
			border-left: 1px solid var( --line, #e7e6e2 );
		}

		.seg-option.on {
			background: var( --accent, #2257e6 );
			color: var( --accent-ink, #fff );
		}

		.toggle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			width: 100%;
			background: var( --bg, #fcfcfb );
			color: var( --ink, #17171a );
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: 7px;
			padding: 5px 10px;
			font: inherit;
			font-size: 12px;
			cursor: pointer;
		}

		.track {
			position: relative;
			width: 30px;
			height: 16px;
			border-radius: 999px;
			background: var( --line, #e7e6e2 );
			box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --ink, #17171a ) 12%, transparent );
			transition: background 0.2s ease;
			flex: none;
		}

		.track.on {
			background: var( --accent, #2257e6 );
			box-shadow: none;
		}

		.knob {
			position: absolute;
			top: 2px;
			left: 2px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: var( --surface, #fff );
			box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.35 );
			transition: transform 0.2s ease;
		}

		.track.on .knob {
			transform: translateX( 14px );
		}

		@media ( width <= 640px ) {
			.wrap {
				grid-template-columns: 1fr;
			}

			.stage {
				min-height: 0;
			}

			.reader {
				position: static;
				height: 620px;
				border-right: none;
				border-bottom: 1px solid var( --line, #e7e6e2 );
			}
		}
	`;

	/**
	 * Wires the scroller-rooted observers and the simulated progress handler once the reader, the sections, and the sentinels exist.
	 *
	 * Awaits the first render so the reader is laid out and can serve as each observer's `root`, then collects the section ids in document order and observes every section box and both sentinels.
	 * It also re-syncs the simulated progress handler, so a reconnect while JavaScript mode is selected restores the listener that teardown removed rather than leaving the bar frozen.
	 * Keeping all observation here, rather than in a `scroll` handler, is the whole point: the browser schedules visibility work asynchronously, so the page never reads layout on every frame.
	 */
	async connectedCallback(): Promise<void> {
		super.connectedCallback();
		await this.updateComplete;

		if ( ! this.isConnected ) {
			return;
		}

		this.collectSections();
		this.connectObservers();
		this.syncProgressImplementation();
	}

	/**
	 * Tears down every observer and the simulated JavaScript scroll handler when the demo leaves the document.
	 *
	 * The observers each carry their own teardown obligation, and the contrast engine has a listener to clear; clearing both here leaves nothing observing or listening on a detached tree, the leak the article warns against.
	 */
	disconnectedCallback(): void {
		super.disconnectedCallback();
		this.$reader?.removeEventListener( 'scroll', this.onReaderScroll );
		this.readerResize?.disconnect();
		this.sectionObserver?.disconnect();
		this.halfwayObserver?.disconnect();
		this.loadMoreObserver?.disconnect();
		this.readerResize = null;
		this.sectionObserver = null;
		this.halfwayObserver = null;
		this.loadMoreObserver = null;
		this.onLine.clear();
		this.lineObserverHeight = 0;
	}

	/**
	 * Re-syncs the simulated JavaScript scroll handler whenever the implementation toggle changes.
	 *
	 * @param changed - The set of reactive properties Lit has just updated.
	 */
	updated( changed: PropertyValues ): void {
		if ( ! changed.has( 'implementation' ) ) {
			return;
		}

		this.syncProgressImplementation();
	}

	/**
	 * Attaches or removes the simulated JavaScript scroll handler to match the current implementation, from a clean slate each time.
	 *
	 * It removes any existing listener first, so calling it from both `connectedCallback` and `updated` is safe and idempotent; a reconnect while JavaScript mode is selected re-attaches the handler that teardown removed, which a property-change-only path would miss.
	 * In JavaScript mode it attaches the listener and paints once from the current position; in CSS mode it clears the inline transform so the timeline owns the bar again.
	 */
	private syncProgressImplementation(): void {
		this.$reader.removeEventListener( 'scroll', this.onReaderScroll );

		if ( this.implementation === 'js' ) {
			this.$reader.addEventListener( 'scroll', this.onReaderScroll, { passive: true } );
			this.paintProgressFromScroll();
			return;
		}

		this.$barFill.style.transform = '';
		this.scrollHandlerCalls = 0;
	}

	/**
	 * Reads the rendered sections into {@link ScrollFinalReviewDemo.sectionIds} and {@link ScrollFinalReviewDemo.sectionTitles} in document order.
	 *
	 * Document order is what lets a tie on the reading line resolve to the earliest section, so the active-section readout never depends on the order the browser delivers observer entries.
	 */
	private collectSections(): void {
		this.sectionIds.length = 0;
		this.sectionTitles.clear();

		for ( const $section of this.$sections ) {
			this.sectionIds.push( $section.id );
			this.sectionTitles.set( $section.id, $section.dataset.title ?? $section.id );
		}
	}

	/**
	 * Starts the load-more observer, builds the height-derived reading-line observers, and watches the reader for the resize that would change their geometry.
	 *
	 * Every observer is rooted on the reader, not the viewport, because the page never scrolls inside the iframe, so a viewport root would measure the wrong scrollport.
	 * The load-more observer needs no margin; the reading-line and halfway observers live in {@link ScrollFinalReviewDemo.buildLineObservers} because their pixel margins depend on the reader's height.
	 */
	private connectObservers(): void {
		this.loadMoreObserver = new IntersectionObserver(
			( entries ) => {
				for ( const entry of entries ) {
					if ( entry.isIntersecting && ! this.hasRequestedMore ) {
						this.hasRequestedMore = true;
						this.loadMoreObserver?.unobserve( entry.target );
						this.loadMoreCount += 1;
					}
				}
			},
			{ root: this.$reader },
		);
		this.loadMoreObserver.observe( this.$footSentinel );

		this.buildLineObservers();

		this.readerResize = new ResizeObserver( () => this.buildLineObservers() );
		this.readerResize.observe( this.$reader );
	}

	/**
	 * Builds the reading-line and halfway observers from the reader's current height, recreating them when it changes.
	 *
	 * `rootMargin` percentages are specified relative to the root's width, even for the top and bottom edges, which makes them the wrong unit for a line meant to sit at a fraction of the reader's height, and historical engine behavior has not always matched the spec. So the margins are pixels derived from the reader's height: a line near the top third for the active section, and a thin band at the center for the halfway milestone.
	 * Observer options are immutable, so a height change disconnects and recreates both; the early return skips a width-only resize.
	 */
	private buildLineObservers(): void {
		const height = this.$reader.clientHeight;
		if ( height === 0 || height === this.lineObserverHeight ) {
			return;
		}
		this.lineObserverHeight = height;

		const readingTop = Math.round( height * 0.3 );
		const readingBottom = Math.round( height * 0.65 );
		const halfwayInset = Math.round( height * 0.49 );

		this.sectionObserver?.disconnect();
		this.sectionObserver = new IntersectionObserver(
			( entries ) => {
				for ( const entry of entries ) {
					if ( entry.isIntersecting ) {
						this.onLine.add( entry.target.id );
					} else {
						this.onLine.delete( entry.target.id );
					}
				}
				const active = this.sectionIds.find( ( id ) => this.onLine.has( id ) );
				if ( active ) {
					this.setActiveSection( active );
				}
			},
			{ root: this.$reader, rootMargin: `-${ readingTop }px 0px -${ readingBottom }px 0px` },
		);

		this.halfwayObserver?.disconnect();
		this.halfwayObserver = new IntersectionObserver(
			( entries ) => {
				for ( const entry of entries ) {
					if ( entry.isIntersecting && ! this.hasReportedHalfway ) {
						this.hasReportedHalfway = true;
						this.halfwayCount += 1;
					}
				}
			},
			{ root: this.$reader, rootMargin: `-${ halfwayInset }px 0px -${ halfwayInset }px 0px` },
		);

		for ( const $section of this.$sections ) {
			this.sectionObserver.observe( $section );
		}
		this.halfwayObserver.observe( this.$halfwaySentinel );
	}

	/**
	 * Sets the active section and updates the readout only when the id actually changes.
	 *
	 * The id guard is what keeps a stable active section from churning the readout as the reader scrolls within one section.
	 *
	 * @param id - The id of the section now on the reading line, always one of the collected `sectionIds`.
	 */
	private setActiveSection( id: string ): void {
		if ( id === this.activeId ) {
			return;
		}

		this.activeId = id;
		this.activeTitle = this.sectionTitles.get( id ) ?? id;
	}

	/**
	 * Renders the scrolling reader with the CSS-driven bar and reveals, the layer-tagged readouts, and the controls.
	 *
	 * The `data-impl`, `data-reduced-motion`, and `data-unsupported` attributes on the reader are the switches the CSS reads: `data-impl` hands only the bar to the scroll listener, reduced motion strips only the reveals, and unsupported strips every timeline.
	 */
	render() {
		return html`
			<div class="wrap">
				<div class="stage">
				<div
					class="reader"
					data-impl=${this.implementation}
					?data-reduced-motion=${this.reducedMotion}
					?data-unsupported=${this.unsupported}
				>
					<div class="bar-track" aria-hidden="true">
						<div class="bar-fill"></div>
					</div>
					<div class="content">
						<p class="lede">
							A sample article page, scrolled inside its own box. The card reveals and, by default, the progress
							bar run on CSS timelines; the section label and the analytics count run on JavaScript observers
							rooted on this scroller.
						</p>
						${this.sections.map(
							( section ) => html`
								<section id=${section.id} data-title=${section.title} class="card">
									<h3>${section.title}</h3>
									<p>${section.body}</p>
								</section>
							`,
						)}
						<p class="tail">End of the sample page.</p>

						<div id="halfway-sentinel" class="sentinel sentinel--halfway" aria-hidden="true"></div>

						<div id="foot-sentinel" class="sentinel" aria-hidden="true"></div>
					</div>
				</div>
				</div>

				<div class="controls">
					<div class="stack">
						<div>
							<p class="control-label">Progress bar driven by</p>
							<div class="seg" role="group" aria-label="Progress bar implementation">
								<button type="button"
									aria-pressed=${this.implementation === 'css'}
									class=${this.implementation === 'css' ? 'seg-option on' : 'seg-option'}
									@click=${() => this.setImplementation( 'css' )}
								>
									CSS timeline
								</button>
								<button type="button"
									aria-pressed=${this.implementation === 'js'}
									class=${this.implementation === 'js' ? 'seg-option on' : 'seg-option'}
									@click=${() => this.setImplementation( 'js' )}
								>
									JS listener
								</button>
							</div>
							<p class="control-note">Flip it and the Progress bar row below moves between the two groups. Nothing else moves.</p>
						</div>
						<button type="button"
							class="toggle"
							@click=${this.toggleReducedMotion}
							aria-pressed=${this.reducedMotion}
						>
							<span>Reduced motion</span>
							<span class=${this.reducedMotion ? 'track on' : 'track'}><span class="knob"></span></span>
						</button>
						<button type="button"
							class="toggle"
							@click=${this.toggleUnsupported}
							aria-pressed=${this.unsupported}
						>
							<span>Unsupported engine</span>
							<span class=${this.unsupported ? 'track on' : 'track'}><span class="knob"></span></span>
						</button>
					</div>

					<div>
						<p class="section-title">Paint jobs (CSS)</p>
						<ul class="readouts">
							${this.implementation === 'css'
								? html`
										<li class="readout">
											<span class="k">Progress bar</span>
											<span class="v">scroll() timeline</span>
											<span class="note">${this.unsupported ? 'Unsupported here, so the bar rests on its static empty base.' : 'Scrubbed by CSS; no JavaScript of ours runs to paint it.'}</span>
										</li>
									`
								: null}
							<li class="readout">
								<span class="k">Card reveals</span>
								<span class="v">view() timeline</span>
								<span class="note">${this.unsupported ? 'Unsupported here, so cards rest on their visible base.' : this.reducedMotion ? 'Reduced motion, so cards rest on their visible base.' : 'Each card lifts in as it enters.'}</span>
							</li>
						</ul>
					</div>

					<div>
						<p class="section-title">State and events (JavaScript)</p>
						<ul class="readouts">
							${this.implementation === 'js'
								? html`
										<li class="readout">
											<span class="k">Progress bar</span>
											<span class="v">our scroll listener</span>
											<span class="note">A JS listener paints it: ${this.scrollHandlerCalls} ${this.scrollHandlerCalls === 1 ? 'call' : 'calls'} and counting.</span>
										</li>
									`
								: null}
							<li class="readout">
								<span class="k">Active section</span>
								<span class="v">${this.activeTitle}</span>
								<span class="note">Read by an observer rooted on this scroller.</span>
							</li>
							<li class="readout">
								<span class="k">Halfway event</span>
								<span class="v">${this.halfwayCount === 0 ? 'not yet' : 'fired once'}</span>
								<span class="note">One-shot, close to the bar's fifty percent.</span>
							</li>
							<li class="readout">
								<span class="k">URL hash</span>
								<span class="v">#${this.activeId || '...'}</span>
								<span class="note">Display only; nothing is routed.</span>
							</li>
							<li class="readout">
								<span class="k">Next page</span>
								<span class="v">${this.loadMoreCount === 0 ? 'not requested yet' : 'requested once'}</span>
								<span class="note">Fires once at the very bottom; a real page would append more and re-arm.</span>
							</li>
						</ul>
					</div>

				</div>
			</div>
		`;
	}

	/**
	 * Selects which implementation paints the bar, driving the `data-impl` attribute on the reader; the reveals stay on their CSS timeline in either choice.
	 *
	 * A two-option switch rather than a single toggle, so both choices stay visible and the reader always knows what the alternative is.
	 *
	 * @param implementation - The implementation the pressed option names.
	 */
	private setImplementation = ( implementation: Implementation ): void => {
		this.implementation = implementation;
	};

	/**
	 * Flips the simulated reduced-motion preference, which drives the `data-reduced-motion` attribute that strips the reveal.
	 */
	private toggleReducedMotion = (): void => {
		this.reducedMotion = ! this.reducedMotion;
	};

	/**
	 * Flips the simulated unsupported-engine state, which drives the `data-unsupported` attribute that strips every scroll-driven rule.
	 */
	private toggleUnsupported = (): void => {
		this.unsupported = ! this.unsupported;
	};
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-animation-timeline-scroll-scroll-final-review': ScrollFinalReviewDemo;
	}
}