@fusion.dev/helix-core 0.0.0-dev

package/dist/controllers/copy-controller/copy-controller.js

@@ -0,0 +1,128 @@
+import { HelixCopyEvent } from '../../events/events.js';
+/**
+ * Writes to the clipboard, by whichever of the two routes this context allows.
+ *
+ * The async API first, because it is the one with a future and the only one that
+ * reports failure. It is gated in more places than it looks: an insecure origin,
+ * a document that is not focused, and a Permissions Policy that defaults to
+ * `self`, which a sandboxed iframe without `allow-same-origin` is not.
+ *
+ * `execCommand` second, deprecated and still the more widely permitted of the
+ * two: it is synchronous and rides the user gesture that called it rather than
+ * asking for a permission, so it works in a sandboxed frame where the modern one
+ * is refused. A textarea rather than the selection, because the text being
+ * copied is not on the page: it is a value.
+ *
+ * `fixed` and `opacity: 0` rather than off-screen, because scrolling to a
+ * focused element is what a negative offset causes, and a copy that jumps the
+ * page is worse than one that does not happen.
+ */
+const write = async (text) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch {
+        /* Fall through. There is nothing to report yet. */
+    }
+    const carrier = document.createElement('textarea');
+    carrier.value = text;
+    carrier.setAttribute('readonly', '');
+    carrier.setAttribute('aria-hidden', 'true');
+    carrier.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
+    document.body.append(carrier);
+    /* Focused as well as selected. `select()` focuses in a browser and does not
+       everywhere, and `execCommand('copy')` copies the *document's* selection, so
+       an unfocused textarea copies whatever was selected on the page instead. */
+    carrier.focus();
+    carrier.select();
+    let wrote = false;
+    try {
+        wrote = document.execCommand('copy');
+    }
+    catch {
+        wrote = false;
+    }
+    carrier.remove();
+    return wrote;
+};
+/**
+ * Puts text on the clipboard and holds a confirmation for a moment.
+ *
+ * A controller rather than a component, because copying is a behavior and not a
+ * shape. Color's chip is a swatch that copies, and a copy button is a button
+ * that copies, and those two have nothing in common to look at: what they share
+ * is the write, the confirmation that follows it, the timer that ends it and the
+ * event that announces it. Written twice, the second one would get the failure
+ * case wrong.
+ *
+ * **There are two routes and both are tried**, because the modern one is gated
+ * in more places than it looks: an insecure origin, an unfocused document, and a
+ * Permissions Policy defaulting to `self`, which a sandboxed iframe is not. The
+ * component using this reported as not working, and a control that does nothing
+ * is indistinguishable from a broken one. See `write` above.
+ *
+ * **Where neither route is allowed, the failure is silence.** The confirmation
+ * does not appear, which is the honest report: a message about a clipboard is
+ * worse than a chip that did not flash, and there is nothing a reader could do
+ * about a permission policy anyway.
+ *
+ * **The event is announced after the write, not before it.** It is not
+ * cancelable for the same reason: by the time anything could be said, the text
+ * is already on the clipboard, and an event that cannot prevent what it
+ * describes should not pretend otherwise.
+ *
+ * The timer is cleared when the host leaves the document, or a component removed
+ * mid-confirmation asks a detached element to re-render.
+ */
+export class CopyController {
+    constructor(host, options = {}) {
+        this.host = host;
+        this.options = options;
+        /** Whether the last write succeeded and is still being confirmed. */
+        this.copied = false;
+        host.addController(this);
+    }
+    /**
+     * Writes to the clipboard, and confirms it if the platform allowed it.
+     *
+     * Empty text is not copied. An empty clipboard is not a thing a reader ever
+     * asks for, and confirming one is worse than doing nothing.
+     */
+    async copy(text) {
+        if (text === '') {
+            return;
+        }
+        if (!(await write(text))) {
+            return;
+        }
+        /* **The host may have gone while the clipboard was being written.** Writing
+           is asynchronous, `hostDisconnected` runs the moment the element leaves,
+           and it clears a timer that does not exist yet: everything below this line
+           used to run afterwards regardless, starting a fresh timer on a detached
+           host and calling `requestUpdate` on it a second later. Checked here
+           rather than in `reset`, because the thing to skip is the whole
+           confirmation and not only its clock. */
+        if (this.host instanceof HTMLElement && !this.host.isConnected) {
+            return;
+        }
+        this.copied = true;
+        this.host.requestUpdate();
+        this.host.dispatchEvent(new HelixCopyEvent({ value: text }));
+        this.reset();
+        this.timer = setTimeout(() => {
+            this.copied = false;
+            this.host.requestUpdate();
+        }, this.options.after ?? 1200);
+    }
+    hostDisconnected() {
+        this.reset();
+        this.copied = false;
+    }
+    reset() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+    }
+}

package/dist/controllers/disabled-cascade-controller/disabled-cascade-controller.d.ts

@@ -0,0 +1,76 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type DisableableItem } from '../../utils/inherit-disabled/inherit-disabled.js';
+/** What the controller needs of the group it is cascading through. */
+export interface DisabledCascadeOptions {
+    /** The members, read fresh each pass. */
+    items: () => DisableableItem[];
+}
+/**
+ * A host that can be out of play, which is every group this runs on.
+ *
+ * `renderRoot` is named here because `ReactiveControllerHost` does not carry
+ * it: the interface is the scheduling contract and says nothing about where a
+ * host renders. Every Lit element has one, and this needs it to hear
+ * `slotchange`, which stops at the root that owns the slot.
+ */
+type DisableableHost = ReactiveControllerHost & HTMLElement & {
+    disabled: boolean;
+    renderRoot: DocumentFragment | HTMLElement;
+};
+/**
+ * Pushes a group's `disabled` onto its members, on every update, unasked.
+ *
+ * **The cascade itself is `inheritDisabled`, and this is what makes it
+ * automatic.** Four groups called that function by hand from inside whichever
+ * method they happened to use for writing to their items: `place` in two of
+ * them, `sync` in a third, `place` again in the fourth. That works, and it is
+ * the wrong shape for three reasons.
+ *
+ * It runs when that method runs. A group whose items changed without going
+ * through it left them holding the last answer, and which paths reach it is a
+ * different set in each of the four.
+ *
+ * It has to be remembered. A fifth group gets no cascade at all, and nothing
+ * says so: the property exists, the attribute reflects, and the members simply
+ * ignore it. That is the failure this exists to make impossible, because it is
+ * invisible in review and only shows up when someone disables a set.
+ *
+ * And it adds no API. A group already has `disabled`, from `HelixFormElement`
+ * or from the consumer; nothing here introduces a property or a method for
+ * anyone to call. By this repo's own rule that makes it a controller and not a
+ * mixin: it reacts to a lifecycle and nothing else.
+ *
+ * So a group states its members once, at construction, and never thinks about
+ * it again:
+ *
+ *     new DisabledCascadeController(this, { items: () => this.items })
+ *
+ * **Runs after every render, and on every `slotchange`.** The second half is
+ * not an extra: a member arriving in the light DOM changes no property, so Lit
+ * schedules nothing, and a render-only cascade leaves a member slotted into an
+ * already-disabled group enabled. Measured before it was added, on a radio
+ * group holding two disabled members with a third inserted: `110`, and the
+ * third was live in a set nobody could use.
+ *
+ * The listener is on the render root rather than on the host, because
+ * `slotchange` bubbles but is not composed: it reaches the shadow root that
+ * owns the slot and stops there. On the host it would never fire at all.
+ *
+ * After render rather than before, because the items are read from the DOM and
+ * a newly slotted member is not there until the render that assigns it.
+ *
+ * Idempotent, so running on every update costs a comparison per member and
+ * nothing else: `inheritDisabled` writes only where the answer changed and
+ * remembers what each member said for itself, which is what lets a group be
+ * re-enabled without freeing a member that was disabled on its own.
+ */
+export declare class DisabledCascadeController implements ReactiveController {
+    private readonly host;
+    private readonly items;
+    constructor(host: DisableableHost, { items }: DisabledCascadeOptions);
+    private readonly cascade;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}
+export {};

package/dist/controllers/disabled-cascade-controller/disabled-cascade-controller.js

@@ -0,0 +1,67 @@
+import { inheritDisabled, } from '../../utils/inherit-disabled/inherit-disabled.js';
+/**
+ * Pushes a group's `disabled` onto its members, on every update, unasked.
+ *
+ * **The cascade itself is `inheritDisabled`, and this is what makes it
+ * automatic.** Four groups called that function by hand from inside whichever
+ * method they happened to use for writing to their items: `place` in two of
+ * them, `sync` in a third, `place` again in the fourth. That works, and it is
+ * the wrong shape for three reasons.
+ *
+ * It runs when that method runs. A group whose items changed without going
+ * through it left them holding the last answer, and which paths reach it is a
+ * different set in each of the four.
+ *
+ * It has to be remembered. A fifth group gets no cascade at all, and nothing
+ * says so: the property exists, the attribute reflects, and the members simply
+ * ignore it. That is the failure this exists to make impossible, because it is
+ * invisible in review and only shows up when someone disables a set.
+ *
+ * And it adds no API. A group already has `disabled`, from `HelixFormElement`
+ * or from the consumer; nothing here introduces a property or a method for
+ * anyone to call. By this repo's own rule that makes it a controller and not a
+ * mixin: it reacts to a lifecycle and nothing else.
+ *
+ * So a group states its members once, at construction, and never thinks about
+ * it again:
+ *
+ *     new DisabledCascadeController(this, { items: () => this.items })
+ *
+ * **Runs after every render, and on every `slotchange`.** The second half is
+ * not an extra: a member arriving in the light DOM changes no property, so Lit
+ * schedules nothing, and a render-only cascade leaves a member slotted into an
+ * already-disabled group enabled. Measured before it was added, on a radio
+ * group holding two disabled members with a third inserted: `110`, and the
+ * third was live in a set nobody could use.
+ *
+ * The listener is on the render root rather than on the host, because
+ * `slotchange` bubbles but is not composed: it reaches the shadow root that
+ * owns the slot and stops there. On the host it would never fire at all.
+ *
+ * After render rather than before, because the items are read from the DOM and
+ * a newly slotted member is not there until the render that assigns it.
+ *
+ * Idempotent, so running on every update costs a comparison per member and
+ * nothing else: `inheritDisabled` writes only where the answer changed and
+ * remembers what each member said for itself, which is what lets a group be
+ * re-enabled without freeing a member that was disabled on its own.
+ */
+export class DisabledCascadeController {
+    constructor(host, { items }) {
+        this.cascade = () => {
+            inheritDisabled(this.host.disabled, this.items());
+        };
+        this.host = host;
+        this.items = items;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.renderRoot.addEventListener('slotchange', this.cascade);
+    }
+    hostDisconnected() {
+        this.host.renderRoot.removeEventListener('slotchange', this.cascade);
+    }
+    hostUpdated() {
+        this.cascade();
+    }
+}

package/dist/controllers/dismiss-controller/dismiss-controller.d.ts

@@ -0,0 +1,58 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface DismissOptions {
+    /**
+     * The element a press must land inside to count as interacting rather than
+     * leaving. Defaults to the host.
+     *
+     * It has to be overridable because an overlay's own scrim is usually inside
+     * its shadow root, and a press on the scrim is exactly what "outside" means
+     * to a reader. Measured against the host, that press is inside the composed
+     * path and the overlay never closes. A drawer points this at its panel.
+     */
+    boundary?: () => Element | readonly (Element | null | undefined)[] | null | undefined;
+    /** Called when the reader asks to close. */
+    onDismiss: () => void;
+}
+/**
+ * Closes an overlay on Escape or on a pointer press outside it.
+ *
+ * Both, because they are different intentions with the same meaning: Escape is
+ * the keyboard's way out and clicking away is the pointer's, and an overlay
+ * that honours only one is one half its readers cannot dismiss.
+ *
+ * The outside press is watched on `pointerdown` rather than `click`, so a press
+ * that starts outside and drags across the overlay still counts as leaving
+ * rather than as interacting.
+ *
+ * A press inside a frame is the third case, and it needs its own signal. The
+ * frame swallows the event, so the document that owns the overlay never sees a
+ * `pointerdown` at all, and where the frame is cross-origin there is nothing to
+ * listen to inside it either. What is observable is that the window lost focus
+ * and a frame on this page gained it, which is exactly a press the document
+ * cannot see. Leaving the browser altogether blurs the window too, so what took
+ * focus is the part that distinguishes them.
+ */
+export declare class DismissController implements ReactiveController {
+    private readonly host;
+    private readonly boundary;
+    private readonly onDismiss;
+    private active;
+    constructor(host: ReactiveControllerHost & HTMLElement, { boundary, onDismiss }: DismissOptions);
+    private readonly handleKeydown;
+    /**
+     * Focus left the document. If a frame took it, that was a press.
+     *
+     * Deferred by a task, because the order of `blur` against the focus moving is
+     * not something every browser agrees on and reading `activeElement` too early
+     * gives the element that is losing focus rather than the one taking it. The
+     * guard is for the case where the overlay closed for another reason in
+     * between, which would otherwise dismiss whatever opened next.
+     */
+    private readonly handleWindowBlur;
+    private readonly handlePointerDown;
+    /** Starts listening. */
+    activate(): void;
+    /** Stops listening. */
+    deactivate(): void;
+    hostDisconnected(): void;
+}

package/dist/controllers/dismiss-controller/dismiss-controller.js

@@ -0,0 +1,165 @@
+import { deepActiveElement } from '../../utils/focusable-elements/focusable-elements.js';
+/*
+ * The element that actually has focus, through any number of shadow roots.
+ *
+ * `document.activeElement` stops at the outermost host: focus inside a shadow
+ * tree is reported as the element containing that tree, because what is inside
+ * it is not the document's business. So a frame in a component's shadow root
+ * reads as the component, and a check for a frame never matches one. Each root
+ * keeps its own `activeElement`, so descending through them gives the element
+ * the reader is really on.
+ */
+/**
+ * How deeply nested an overlay's host is, counting shadow boundaries as well.
+ *
+ * The innermost overlay is the one a reader means by Escape, and "innermost" has
+ * to be measured rather than assumed from listener order: every overlay listens
+ * on `document`, so they run in the order they opened, which is not the order
+ * they are nested in.
+ */
+const deepDepth = (node) => {
+    let depth = 0;
+    let at = node;
+    while (at) {
+        at = at.parentNode ?? at.host ?? null;
+        depth += 1;
+    }
+    return depth;
+};
+/**
+ * Every overlay currently listening, so one press can be settled by asking.
+ *
+ * Module-level because that is the scope the question has: "which open overlay
+ * is innermost" is about the page, and no single controller can answer it from
+ * what it holds. Membership is exactly `activate`/`deactivate`, and
+ * `hostDisconnected` calls the second, so an overlay torn down rather than
+ * closed leaves too.
+ */
+const listening = new Set();
+/**
+ * Closes an overlay on Escape or on a pointer press outside it.
+ *
+ * Both, because they are different intentions with the same meaning: Escape is
+ * the keyboard's way out and clicking away is the pointer's, and an overlay
+ * that honours only one is one half its readers cannot dismiss.
+ *
+ * The outside press is watched on `pointerdown` rather than `click`, so a press
+ * that starts outside and drags across the overlay still counts as leaving
+ * rather than as interacting.
+ *
+ * A press inside a frame is the third case, and it needs its own signal. The
+ * frame swallows the event, so the document that owns the overlay never sees a
+ * `pointerdown` at all, and where the frame is cross-origin there is nothing to
+ * listen to inside it either. What is observable is that the window lost focus
+ * and a frame on this page gained it, which is exactly a press the document
+ * cannot see. Leaving the browser altogether blurs the window too, so what took
+ * focus is the part that distinguishes them.
+ */
+export class DismissController {
+    constructor(host, { boundary, onDismiss }) {
+        this.active = false;
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            /* One overlay per press, decided by asking all of them rather than by
+             * comparing against whoever ran before.
+             *
+             * `stopPropagation` cannot arrange this: every open overlay registers this
+             * same listener on `document`, so they are siblings on one node where the
+             * only ordering is registration, and propagation is about ancestors.
+             *
+             * Carrying the winning depth on the event does not arrange it either, which
+             * is the version this replaced. A handler that runs before any deeper one
+             * has no way to know a deeper one exists, so it dismisses and only then
+             * loses the comparison. Registration order is the order the overlays
+             * *opened*, and opening the outer one first is the ordinary case: a dialog,
+             * then a select inside it. Measured, that closed both.
+             *
+             * So the first handler to see the press takes it for everybody, and picks
+             * the winner from every controller currently listening, which is a question
+             * that has one answer whenever it is asked. */
+            const taken = event;
+            if (taken.helixDismissTaken) {
+                return;
+            }
+            taken.helixDismissTaken = true;
+            /* Ties go to whoever asked, which is the first to run. Two overlays neither
+               of which is inside the other have no better answer available, and exactly
+               one closing is the point. */
+            let deepest = this;
+            let found = deepDepth(this.host);
+            for (const other of listening) {
+                const depth = deepDepth(other.host);
+                if (depth > found) {
+                    found = depth;
+                    deepest = other;
+                }
+            }
+            deepest.onDismiss();
+        };
+        /**
+         * Focus left the document. If a frame took it, that was a press.
+         *
+         * Deferred by a task, because the order of `blur` against the focus moving is
+         * not something every browser agrees on and reading `activeElement` too early
+         * gives the element that is losing focus rather than the one taking it. The
+         * guard is for the case where the overlay closed for another reason in
+         * between, which would otherwise dismiss whatever opened next.
+         */
+        this.handleWindowBlur = () => {
+            setTimeout(() => {
+                if (this.active && deepActiveElement()?.tagName === 'IFRAME') {
+                    this.onDismiss();
+                }
+            });
+        };
+        this.handlePointerDown = (event) => {
+            // `composedPath` rather than `target`, so a press inside the overlay's own
+            // shadow root is still recognized as inside it.
+            /* More than one thing can be inside.
+             *
+             * A control is not always one element: a popover opened by an invoker
+             * somewhere else on the page has that invoker as part of it, and a press on
+             * it is not a press outside. Treating it as outside closed the panel on
+             * `pointerdown` and the invoker's own `--toggle` reopened it on the `click`
+             * that followed, so the panel could never be closed by the button that
+             * opened it. */
+            const inside = this.boundary?.() ?? this.host;
+            const boundaries = (Array.isArray(inside) ? inside : [inside]).filter(Boolean);
+            const path = event.composedPath();
+            if (!boundaries.some((element) => path.includes(element))) {
+                this.onDismiss();
+            }
+        };
+        this.host = host;
+        this.boundary = boundary;
+        this.onDismiss = onDismiss;
+        host.addController(this);
+    }
+    /** Starts listening. */
+    activate() {
+        if (this.active) {
+            return;
+        }
+        this.active = true;
+        listening.add(this);
+        document.addEventListener('keydown', this.handleKeydown);
+        document.addEventListener('pointerdown', this.handlePointerDown);
+        window.addEventListener('blur', this.handleWindowBlur);
+    }
+    /** Stops listening. */
+    deactivate() {
+        if (!this.active) {
+            return;
+        }
+        this.active = false;
+        listening.delete(this);
+        document.removeEventListener('keydown', this.handleKeydown);
+        document.removeEventListener('pointerdown', this.handlePointerDown);
+        window.removeEventListener('blur', this.handleWindowBlur);
+    }
+    hostDisconnected() {
+        this.deactivate();
+    }
+}

package/dist/controllers/drilldown-controller/drilldown-controller.d.ts

@@ -0,0 +1,127 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** How the controller is told what it is drilling through. */
+export interface DrilldownOptions {
+    /**
+     * Whether an element counts as a row.
+     *
+     * Defaults to any element. A container holding things other than rows says so
+     * here, rather than the controller guessing from a tag name it cannot know.
+     */
+    isRow?: (element: Element) => boolean;
+    /** The rows of the top page, in the order a reader moves through them. */
+    root: () => Element[];
+    /**
+     * The slot a row's own page is assigned to. Defaults to `page`.
+     *
+     * The nesting is the structure: a row that opens a page *contains* that
+     * page's rows. There are no ids to wire and nothing to keep in step, and a
+     * consumer who moves a row in the markup has moved its page with it.
+     */
+    slot?: string;
+}
+/**
+ * One page of a nested set showing at a time, with a way back.
+ *
+ * A drill-down replaces the panel rather than opening a second one beside it.
+ * That is the right shape wherever there is no room for two: on a phone there
+ * is no second column, and on a touch screen there is no hover to open one
+ * with. What a reader gets instead is one panel, a title saying where they are,
+ * and a way back.
+ *
+ * **Extracted from `Menu`, which had all of this and did not say so.** The menu
+ * held a `page`, derived the rows on it, read a title off the row that opened
+ * it, and reset on close; the sandbox's settings dropdown has been a drill-down
+ * for as long as it has existed. None of that is about menus. Taking it out is
+ * what lets a settings panel, a filter stack or a navigation tree have the same
+ * behavior without one of them being a menu that is pretending.
+ *
+ * **The tree is the state.** A row's page is its own children, assigned to a
+ * slot, so the controller holds one reference, the row currently drilled into,
+ * and derives everything else from the DOM. The alternative, an id per page and
+ * a map beside it, is a second copy of the structure that a consumer can put
+ * out of step with the first.
+ *
+ * **A stack, not a pointer.** `back()` returns to the page above rather than to
+ * the root, because a reader three levels down pressed one control and expects
+ * one level. The stack is rebuilt from the DOM by walking up from the current
+ * row, so it cannot disagree with the tree: a page removed while it was showing
+ * takes its ancestors with it, and `atRoot` becomes true rather than the
+ * controller holding a reference to something detached.
+ *
+ * Nothing here decides what a row *is*, what it renders, or what happens when
+ * one is chosen. It answers where the reader is and what is on this page.
+ */
+export declare class DrilldownController<Row extends Element = Element> implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The row whose page is showing, or nothing at the top. */
+    private current;
+    constructor(host: ReactiveControllerHost, options: DrilldownOptions);
+    /**
+     * The row whose page is showing, once the tree has been asked about it.
+     *
+     * **A held reference can outlive the row it names, and the walk alone does
+     * not catch it.** Removing the row a reader is *on* works: its
+     * `parentElement` is null and the walk stops. Removing one of its
+     * *ancestors* does not, because the subtree comes away intact, so the child
+     * still has a parent and the parent still has a parent. Measured on a
+     * three-level menu with the middle page removed: `depth` answered 2, `rows`
+     * listed a page nobody could see, and `back()` walked to a second detached
+     * row before reaching the top.
+     *
+     * That is the disagreement with the tree the walk exists to prevent, so the
+     * question is asked here, once, and every reader below goes through it.
+     */
+    private get here();
+    /** The row whose page is showing, or `null` at the top. */
+    get page(): Row | null;
+    /** Whether the top page is the one showing. */
+    get atRoot(): boolean;
+    /**
+     * How deep the reader is, with the top page at zero.
+     *
+     * Counted by walking up rather than by keeping a number, for the reason the
+     * stack is: a count can be wrong about a tree, and the tree is what renders.
+     */
+    get depth(): number;
+    /**
+     * What the page showing is called.
+     *
+     * The row's own text and not its subtree, because a row that opens a page
+     * contains that page's rows: `textContent` would read back the whole thing.
+     * Empty at the top, where the panel's own label is the name of the place.
+     */
+    get label(): string;
+    /** The rows on the page showing, which is what the keyboard moves over. */
+    get rows(): Row[];
+    /** Whether a row has a page to drill into. */
+    hasPage(row: Element): boolean;
+    /**
+     * Shows a row's page in place of the one showing.
+     *
+     * Refuses a row with no page rather than drilling into an empty one, which
+     * would leave a reader on a blank panel with a back control as its only
+     * content and nothing saying why.
+     */
+    enter(row: Row): boolean;
+    /** Returns to the page above, and reports whether there was one. */
+    back(): boolean;
+    /**
+     * Returns to the top page.
+     *
+     * For closing rather than for navigating: a panel that reopens where it was
+     * left is showing a reader a place they have no memory of choosing.
+     */
+    reset(): void;
+    /**
+     * The row that opened the page this row is on.
+     *
+     * Walks up two steps, because a row sits inside the row that opened it: its
+     * parent element *is* that row. Read from the DOM each time rather than
+     * stored, so a tree the consumer has changed cannot leave this pointing at
+     * something no longer in it.
+     */
+    private parentOf;
+    /** Back to the top when the host goes away, so it reopens where it opened. */
+    hostDisconnected(): void;
+}