@fusion.dev/helix-headless 0.0.0-dev

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -0,0 +1,108 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
+/**
+ * @summary A set of clips and the one player they take turns in.
+ *
+ * @description
+ * **The player is slotted, never rendered here.** A consumer's player carries
+ * their appearance, their extra controls, their captions and their poster
+ * treatment, and a playlist that rendered its own would either lose all of that
+ * or grow a property for each of them. `Sandbox` takes its preview and `Menu`
+ * its trigger the same way.
+ *
+ * **The entries are markup rather than an array property.** A list of objects
+ * would be the shorter API and it does not survive the trip: React skips every
+ * property it would have to apply imperatively while hydrating, so an array
+ * handed to a custom element is missing on the first paint of every
+ * server-rendered page. `using-the-elements.mdx` carries the measurement. Markup
+ * is also what makes each entry a real button with a real name in it.
+ *
+ * **Nothing here plays anything.** It sets `src` on the player and lets the
+ * player be a player. What the playlist owns is which entry is current, and it
+ * moves that on three signals: an entry pressed, `helix-next` or
+ * `helix-previous` from the player, and the player reaching the end.
+ *
+ * `ended` advances without asking, because a set of clips that stopped between
+ * each one is a set the reader has to nurse. The clip that follows starts where
+ * the last one left off, which is `autoplay` in the only sense that matters
+ * here: the reader already pressed play once.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Playlist, Queue, Up next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot - The entries.
+ * @slot player - The `helix-video` they play in.
+ *
+ * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current entry changes, and cancelable.
+ *
+ * @csspart items - The list of entries.
+ * @csspart player - The region holding the player.
+ */
+export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlaylist_base {
+    /**
+     * Accessible name for the list, which usually has no visible heading.
+     */
+    label: string;
+    /**
+     * The entries, in the order the consumer wrote them.
+     *
+     * **Found by tag and filtered on the property, never on `[value]`.** The
+     * prefilter used to be an attribute selector, which is redundant beside the
+     * tag match and is the half that broke: React assigns a matching property
+     * rather than an attribute, so a playlist written in JSX carried no `value`
+     * attribute anywhere and `querySelectorAll('[value]')` returned nothing. Every
+     * entry vanished from the list, the active one included, and the component
+     * threw no error because an empty playlist is a legal playlist.
+     *
+     * Reading `one.value` answers the same question and answers it the same way
+     * whether the consumer wrote markup or set a property, which is the only form
+     * that works for both. Found by rendering the React twin of this family's
+     * examples beside the markup ones.
+     */
+    private get items();
+    /**
+     * Whether the entry changed because somebody moved through the playlist.
+     *
+     * All three ways it moves are the reader going somewhere: pressing an entry,
+     * pressing next or previous, or a clip ending and the next one following it.
+     * Every one of those means play, and the one case that does not is the first
+     * render, where the playlist is simply pointing the player at its opening
+     * entry and nobody has asked for anything yet.
+     *
+     * A press is also what makes the play legal. Autoplay is refused when nothing
+     * the reader did asked for it, so starting here works because this is inside
+     * the gesture that chose the entry, and where it is refused anyway the player
+     * shows its start control and waits.
+     */
+    private chased;
+    private get player();
+    /** Moves by one, and does nothing at either end. */
+    private step;
+    private readonly handleSelect;
+    private readonly handleNext;
+    private readonly handlePrevious;
+    private readonly handleEnded;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Points the player at the current entry, and tells the entries which is on.
+     *
+     * In `updated` rather than in the handlers, so the three signals that move the
+     * current entry all arrive at one place that applies it. The server never runs
+     * this, which is correct: the entries are light DOM it cannot see, and what it
+     * renders is the player with whatever `src` the consumer wrote.
+     */
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-video-playlist': HelixHeadlessVideoPlaylist;
+    }
+}
+export {};

package/dist/video-playlist/root/video-playlist-root.js

@@ -0,0 +1,218 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement, MixinControllerActive } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary A set of clips and the one player they take turns in.
+ *
+ * @description
+ * **The player is slotted, never rendered here.** A consumer's player carries
+ * their appearance, their extra controls, their captions and their poster
+ * treatment, and a playlist that rendered its own would either lose all of that
+ * or grow a property for each of them. `Sandbox` takes its preview and `Menu`
+ * its trigger the same way.
+ *
+ * **The entries are markup rather than an array property.** A list of objects
+ * would be the shorter API and it does not survive the trip: React skips every
+ * property it would have to apply imperatively while hydrating, so an array
+ * handed to a custom element is missing on the first paint of every
+ * server-rendered page. `using-the-elements.mdx` carries the measurement. Markup
+ * is also what makes each entry a real button with a real name in it.
+ *
+ * **Nothing here plays anything.** It sets `src` on the player and lets the
+ * player be a player. What the playlist owns is which entry is current, and it
+ * moves that on three signals: an entry pressed, `helix-next` or
+ * `helix-previous` from the player, and the player reaching the end.
+ *
+ * `ended` advances without asking, because a set of clips that stopped between
+ * each one is a set the reader has to nurse. The clip that follows starts where
+ * the last one left off, which is `autoplay` in the only sense that matters
+ * here: the reader already pressed play once.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Playlist, Queue, Up next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot - The entries.
+ * @slot player - The `helix-video` they play in.
+ *
+ * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current entry changes, and cancelable.
+ *
+ * @csspart items - The list of entries.
+ * @csspart player - The region holding the player.
+ */
+let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Accessible name for the list, which usually has no visible heading.
+         */
+        this.label = 'Playlist';
+        /*
+         * The player, whichever tag the consumer slotted.
+         *
+         * Asked of the slot rather than matched by tag name: the headless tier's
+         * player is `helix-headless-video` and the styled tier's is `helix-video`, and a
+         * consumer bringing a third under either name should still be driven. What is
+         * needed of it is `src`, which is the whole of the contract.
+         */
+        /**
+         * Whether the entry changed because somebody moved through the playlist.
+         *
+         * All three ways it moves are the reader going somewhere: pressing an entry,
+         * pressing next or previous, or a clip ending and the next one following it.
+         * Every one of those means play, and the one case that does not is the first
+         * render, where the playlist is simply pointing the player at its opening
+         * entry and nobody has asked for anything yet.
+         *
+         * A press is also what makes the play legal. Autoplay is refused when nothing
+         * the reader did asked for it, so starting here works because this is inside
+         * the gesture that chose the entry, and where it is refused anyway the player
+         * shows its start control and waits.
+         */
+        this.chased = false;
+        this.handleSelect = (event) => {
+            /* Stopped and not relayed. The entry says it was chosen, this element says
+               what is playing, and a consumer hearing both would hear one press twice
+               under two names.
+             *
+             * `stopImmediatePropagation`, not `stopPropagation`. The consumer's listener
+             * is on this same element, and stopping propagation only keeps an event off
+             * the *next* node: every listener already bound here still runs, so the
+             * entry's selection reached them anyway. Command carries the longer note,
+             * and the spec below is what caught this one. */
+            event.stopImmediatePropagation();
+            this.chased = true;
+            this.requestActive(event.detail.value);
+        };
+        this.handleNext = () => {
+            this.chased = true;
+            this.step(1);
+        };
+        this.handlePrevious = () => {
+            this.chased = true;
+            this.step(-1);
+        };
+        this.handleEnded = () => {
+            this.chased = true;
+            this.step(1);
+        };
+    }
+    /**
+     * The entries, in the order the consumer wrote them.
+     *
+     * **Found by tag and filtered on the property, never on `[value]`.** The
+     * prefilter used to be an attribute selector, which is redundant beside the
+     * tag match and is the half that broke: React assigns a matching property
+     * rather than an attribute, so a playlist written in JSX carried no `value`
+     * attribute anywhere and `querySelectorAll('[value]')` returned nothing. Every
+     * entry vanished from the list, the active one included, and the component
+     * threw no error because an empty playlist is a legal playlist.
+     *
+     * Reading `one.value` answers the same question and answers it the same way
+     * whether the consumer wrote markup or set a property, which is the only form
+     * that works for both. Found by rendering the React twin of this family's
+     * examples beside the markup ones.
+     */
+    get items() {
+        return [
+            ...this.querySelectorAll('helix-video-playlist-item, helix-headless-video-playlist-item'),
+        ].filter((one) => one.value !== '');
+    }
+    get player() {
+        const slot = this.renderRoot?.querySelector('slot[name="player"]');
+        const first = slot?.assignedElements()[0];
+        return (first ?? null);
+    }
+    /** Moves by one, and does nothing at either end. */
+    step(by) {
+        const items = this.items.filter((one) => !one.disabled);
+        const at = items.findIndex((one) => one.value === this.resolveActive(items)?.value);
+        const next = items[at + by];
+        if (next) {
+            this.requestActive(next.value);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-select', this.handleSelect);
+        this.addEventListener('helix-next', this.handleNext);
+        this.addEventListener('helix-previous', this.handlePrevious);
+        /* `ended` is a media event and does not compose out of the player's shadow
+           root on its own. The player relays it, which is why listening here works
+           at all, and why this listens on the element rather than on a `<video>` it
+           has no reference to. */
+        this.addEventListener('ended', this.handleEnded);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleSelect);
+        this.removeEventListener('helix-next', this.handleNext);
+        this.removeEventListener('helix-previous', this.handlePrevious);
+        this.removeEventListener('ended', this.handleEnded);
+    }
+    /**
+     * Points the player at the current entry, and tells the entries which is on.
+     *
+     * In `updated` rather than in the handlers, so the three signals that move the
+     * current entry all arrive at one place that applies it. The server never runs
+     * this, which is correct: the entries are light DOM it cannot see, and what it
+     * renders is the player with whatever `src` the consumer wrote.
+     */
+    updated(changed) {
+        super.updated?.(changed);
+        const items = this.items;
+        const current = this.resolveActive(items);
+        for (const item of items) {
+            item.current = item === current;
+        }
+        const player = this.player;
+        if (!player || !current) {
+            return;
+        }
+        /* Only on a change. Writing `src` with the value it already holds reloads
+           the resource in every engine, so a playlist that assigned on each update
+           would restart the clip whenever anything else about it rendered. */
+        if (player.src !== current.src) {
+            player.src = current.src;
+            player.poster = current.poster;
+            player.label = current.text;
+            if (this.chased) {
+                /* After the player has rendered, not now. `src` here is the element's
+                   property, and the `<video>` inside it only takes the new source on
+                   its next render: playing at this point plays the outgoing clip for an
+                   instant and the load that follows stops it again. Measured, and the
+                   reading was a player left paused on the entry that had just been
+                   chosen.
+        
+                   A microtask later is still inside the press that got us here, so the
+                   platform still counts it as asked for. */
+                void player.updateComplete?.then(() => {
+                    player.play();
+                });
+            }
+        }
+        this.chased = false;
+    }
+    render() {
+        return html `<div part="player"><slot name="player"></slot></div>
+      <div part="items" role="list" aria-label=${this.label}>
+        <slot></slot>
+      </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
+HelixHeadlessVideoPlaylist = __decorate([
+    customElement('helix-headless-video-playlist')
+], HelixHeadlessVideoPlaylist);
+export { HelixHeadlessVideoPlaylist };

package/dist/virtual-list/index.d.ts

@@ -0,0 +1 @@
+export * from './root/virtual-list-root.js';

package/dist/virtual-list/index.js

@@ -0,0 +1 @@
+export * from './root/virtual-list-root.js';

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -0,0 +1,121 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary Renders the rows of a long set that are on screen, and no others.
+ *
+ * @description
+ * **The set arrives as data, which is what makes this a virtual list rather
+ * than a box that hides children.** `for` names a
+ * `<script type="application/json">` holding an array of objects, and a
+ * `<template>` child says what one row looks like: elements carrying
+ * `data-field="name"` are filled with that field of the item.
+ *
+ * Both halves are markup, and that is the whole reason for the shape.
+ * `VirtualizeController` says why the obvious alternatives are shut: an `items`
+ * property cannot survive React hydration, which skips every property it would
+ * have to apply imperatively, and light-DOM children exist by the time anything
+ * could decide not to create them. Text in the document is neither. A server
+ * emits it, React re-emits it as a child rather than applying it, and it is one
+ * node whatever the row count.
+ *
+ * **The same shape the charts already use**, `for="<id>"` pointing at markup the
+ * consumer wrote, and the difference is what is at the other end. A chart names
+ * a `<table>`, which is the accessible version of the picture and which a reader
+ * with no JavaScript still gets. Ten thousand rows cannot be that: the table
+ * would be the cost this exists to avoid. So the accessible version here is the
+ * rendered window plus `aria-setsize` and `aria-posinset`, which is what says
+ * "four thousand of ten thousand" rather than "four of twenty".
+ *
+ * **Rows are light DOM, deliberately.** They are cloned from the consumer's
+ * template and appended to the host, so a document rule reaches them, the base
+ * layer applies, and a class in the template means what it says. Cloned into
+ * the shadow root they would be markup the consumer wrote and could not style,
+ * which is the one thing a row template must not be.
+ *
+ * **Reading the source is client-only**, because a server has no document to
+ * query. The window renders empty from the server and fills on the first update,
+ * which is the same client-side enhancement rule every tree-reading component
+ * here follows.
+ *
+ * **On this tier the consumer gives the viewport its box**, and the component
+ * cannot do it for them: `helix/headless` ships no stylesheet, and a height is a
+ * decision rather than a fact this could publish. So a base list wants two rules
+ * before it is a list at all:
+ *
+ * ```css
+ * helix-headless-virtual-list::part(viewport) {
+ *   block-size: 12rem;
+ *   overflow-y: auto;
+ * }
+ * ```
+ *
+ * **Without them it is not a scroller**, and the failure is worse than it
+ * sounds. `scrollTop` is always zero, so nothing ever windows; and the box has
+ * no height of its own, so `clientHeight` is a function of the rows just drawn.
+ * Measuring then moves what is being measured, and the two need not converge:
+ * measured in Chromium at 500 rows, it settled into a two-cycle between 378 and
+ * 379 rows and stayed there, at two and a half thousand passes in eight seconds.
+ * `VirtualizeController` gives up after ten passes and says so, so this now
+ * draws a bad window rather than stopping the page, but a bad window is still
+ * the answer until the rules are written.
+ *
+ * The styled tier writes them for you, with `--virtual-list-block-size`.
+ *
+ * @category layout
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/virtual-list
+ *
+ * @csspart after - The space standing in for rows below the window.
+ * @csspart before - The space standing in for rows above the window.
+ * @csspart viewport - The scrolling box. Needs a block size and an overflow on this tier.
+ */
+export declare class HelixHeadlessVirtualList extends HelixElement {
+    /**
+     * How tall one row is, in pixels, used to map scroll offset to an index.
+     */
+    estimate: number;
+    /**
+     * Id of the element holding the rows, as JSON in a script.
+     */
+    for: string;
+    /**
+     * What the list is called, since the rendered rows are only a window on it.
+     */
+    label: string;
+    /**
+     * The parsed source.
+     *
+     * Empty on a server, which has nothing to read.
+     */
+    private rows;
+    private readonly virtualize;
+    /**
+     * Reads the source named by `for`, once the document exists to read.
+     *
+     * `firstUpdated` rather than `connectedCallback`, per the server rules: the
+     * shim has attributes and no tree, so `getElementById` is undefined there.
+     * A source that is missing or not an array leaves the list empty rather than
+     * throwing, because a consumer whose data has not arrived yet is the ordinary
+     * case and an empty list says so by itself.
+     */
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private read;
+    /**
+     * Puts the windowed rows into the light DOM, and takes the rest out.
+     *
+     * Cleared and re-cloned rather than reconciled, which is the simple thing and
+     * is measured rather than assumed to be enough: a window is twenty-odd rows
+     * and cloning that many is well under a frame. A reconciler here would be
+     * carrying keys and identity for a set nothing selects into, and is the kind
+     * of optimisation to add against a measurement rather than ahead of one.
+     */
+    private place;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-virtual-list': HelixHeadlessVirtualList;
+    }
+}

package/dist/virtual-list/root/virtual-list-root.js

@@ -0,0 +1,221 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement, VirtualizeController } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/**
+ * @summary Renders the rows of a long set that are on screen, and no others.
+ *
+ * @description
+ * **The set arrives as data, which is what makes this a virtual list rather
+ * than a box that hides children.** `for` names a
+ * `<script type="application/json">` holding an array of objects, and a
+ * `<template>` child says what one row looks like: elements carrying
+ * `data-field="name"` are filled with that field of the item.
+ *
+ * Both halves are markup, and that is the whole reason for the shape.
+ * `VirtualizeController` says why the obvious alternatives are shut: an `items`
+ * property cannot survive React hydration, which skips every property it would
+ * have to apply imperatively, and light-DOM children exist by the time anything
+ * could decide not to create them. Text in the document is neither. A server
+ * emits it, React re-emits it as a child rather than applying it, and it is one
+ * node whatever the row count.
+ *
+ * **The same shape the charts already use**, `for="<id>"` pointing at markup the
+ * consumer wrote, and the difference is what is at the other end. A chart names
+ * a `<table>`, which is the accessible version of the picture and which a reader
+ * with no JavaScript still gets. Ten thousand rows cannot be that: the table
+ * would be the cost this exists to avoid. So the accessible version here is the
+ * rendered window plus `aria-setsize` and `aria-posinset`, which is what says
+ * "four thousand of ten thousand" rather than "four of twenty".
+ *
+ * **Rows are light DOM, deliberately.** They are cloned from the consumer's
+ * template and appended to the host, so a document rule reaches them, the base
+ * layer applies, and a class in the template means what it says. Cloned into
+ * the shadow root they would be markup the consumer wrote and could not style,
+ * which is the one thing a row template must not be.
+ *
+ * **Reading the source is client-only**, because a server has no document to
+ * query. The window renders empty from the server and fills on the first update,
+ * which is the same client-side enhancement rule every tree-reading component
+ * here follows.
+ *
+ * **On this tier the consumer gives the viewport its box**, and the component
+ * cannot do it for them: `helix/headless` ships no stylesheet, and a height is a
+ * decision rather than a fact this could publish. So a base list wants two rules
+ * before it is a list at all:
+ *
+ * ```css
+ * helix-headless-virtual-list::part(viewport) {
+ *   block-size: 12rem;
+ *   overflow-y: auto;
+ * }
+ * ```
+ *
+ * **Without them it is not a scroller**, and the failure is worse than it
+ * sounds. `scrollTop` is always zero, so nothing ever windows; and the box has
+ * no height of its own, so `clientHeight` is a function of the rows just drawn.
+ * Measuring then moves what is being measured, and the two need not converge:
+ * measured in Chromium at 500 rows, it settled into a two-cycle between 378 and
+ * 379 rows and stayed there, at two and a half thousand passes in eight seconds.
+ * `VirtualizeController` gives up after ten passes and says so, so this now
+ * draws a bad window rather than stopping the page, but a bad window is still
+ * the answer until the rules are written.
+ *
+ * The styled tier writes them for you, with `--virtual-list-block-size`.
+ *
+ * @category layout
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/virtual-list
+ *
+ * @csspart after - The space standing in for rows below the window.
+ * @csspart before - The space standing in for rows above the window.
+ * @csspart viewport - The scrolling box. Needs a block size and an overflow on this tier.
+ */
+let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * How tall one row is, in pixels, used to map scroll offset to an index.
+         */
+        this.estimate = 32;
+        /**
+         * Id of the element holding the rows, as JSON in a script.
+         */
+        this.for = '';
+        /**
+         * What the list is called, since the rendered rows are only a window on it.
+         */
+        this.label = '';
+        /**
+         * The parsed source.
+         *
+         * Empty on a server, which has nothing to read.
+         */
+        this.rows = [];
+        /* No `overscan` property. The controller's four is a statement about a frame
+           of fast scrolling at a 32 pixel row, which is a fact about the platform
+           rather than a preference, and a knob here would be one more thing to get
+           wrong for no case anybody has. */
+        this.virtualize = new VirtualizeController(this, {
+            container: () => this.renderRoot.querySelector('[part="viewport"]'),
+            count: () => this.rows.length,
+            estimate: () => this.estimate,
+        });
+    }
+    /**
+     * Reads the source named by `for`, once the document exists to read.
+     *
+     * `firstUpdated` rather than `connectedCallback`, per the server rules: the
+     * shim has attributes and no tree, so `getElementById` is undefined there.
+     * A source that is missing or not an array leaves the list empty rather than
+     * throwing, because a consumer whose data has not arrived yet is the ordinary
+     * case and an empty list says so by itself.
+     */
+    firstUpdated(changed) {
+        super.firstUpdated?.(changed);
+        this.read();
+    }
+    updated(changed) {
+        super.updated?.(changed);
+        if (changed.has('for')) {
+            this.read();
+        }
+        this.virtualize.measure();
+        this.place();
+    }
+    read() {
+        const source = this.for === '' ? null : this.ownerDocument.getElementById(this.for);
+        const text = source?.textContent ?? '';
+        if (text.trim() === '') {
+            this.rows = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(text);
+            this.rows = Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            /* Left empty rather than thrown. The source is a consumer's markup, and a
+               component that throws on it takes the page down over a comma. */
+            this.rows = [];
+        }
+    }
+    /**
+     * Puts the windowed rows into the light DOM, and takes the rest out.
+     *
+     * Cleared and re-cloned rather than reconciled, which is the simple thing and
+     * is measured rather than assumed to be enough: a window is twenty-odd rows
+     * and cloning that many is well under a frame. A reconciler here would be
+     * carrying keys and identity for a set nothing selects into, and is the kind
+     * of optimisation to add against a measurement rather than ahead of one.
+     */
+    place() {
+        const template = this.querySelector('template');
+        if (!template) {
+            return;
+        }
+        for (const stale of [...this.children]) {
+            if (stale !== template) {
+                stale.remove();
+            }
+        }
+        const { first, last } = this.virtualize.window;
+        const total = this.rows.length;
+        const fragment = this.ownerDocument.createDocumentFragment();
+        for (let at = first; at < last; at += 1) {
+            const row = this.rows[at];
+            if (!row) {
+                continue;
+            }
+            const clone = template.content.cloneNode(true);
+            for (const hole of clone.querySelectorAll('[data-field]')) {
+                hole.textContent = row[hole.dataset.field ?? ''] ?? '';
+            }
+            /* The real index and the real total, not the position in the window. A
+               reader arrowing through this should hear where they are in the set. */
+            for (const element of clone.children) {
+                element.setAttribute('role', 'listitem');
+                element.setAttribute('aria-posinset', String(at + 1));
+                element.setAttribute('aria-setsize', String(total));
+            }
+            fragment.append(clone);
+        }
+        this.append(fragment);
+    }
+    render() {
+        const { after, before } = this.virtualize.window;
+        return html `<div
+      data-scroller
+      part="viewport"
+      role="list"
+      aria-label=${this.label}
+      @scroll=${() => this.virtualize.measure()}
+    >
+      <div part="before" style="block-size: ${before}px"></div>
+      <slot></slot>
+      <div part="after" style="block-size: ${after}px"></div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Number })
+], HelixHeadlessVirtualList.prototype, "estimate", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "for", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "label", void 0);
+__decorate([
+    state()
+], HelixHeadlessVirtualList.prototype, "rows", void 0);
+HelixHeadlessVirtualList = __decorate([
+    customElement('helix-headless-virtual-list')
+], HelixHeadlessVirtualList);
+export { HelixHeadlessVirtualList };