@fusion.dev/helix-headless 0.171.0 → 0.173.0

package/dist/menu/root/menu-root.d.ts

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement, KeyboardNavigationController, type Placement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController, OpenPhaseController, type Placement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -18,7 +18,9 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  *
  * Submenus drill down by default. A submenu replaces the panel's content, and a
  * back row returns to the previous page. One panel stays inside a narrow
- * window, and works on touch screens, which have no hover.
+ * window, and works on touch screens, which have no hover. Focus follows a
+ * mouse resting on a row in either mode, and a drilled page is a `menu` named
+ * by the row that opened it.
  *
  * **`submenus="flyout"` opens each submenu in a panel of its own beside its
  * row**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the
@@ -52,6 +54,11 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * trigger's width, for a menu as wide as its trigger:
  * `helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.
  *
+ * **The choices in one place.** `checkedValues` holds the values of the rows
+ * that are checked, anywhere in the menu, and setting it checks exactly
+ * those rows, as React Aria's `selectedKeys` does. `change` is sent on the
+ * menu when a reader's choice changes it.
+ *
  * With `context`, the trigger is an area and the menu is its context menu: a
  * right-click, a long press, Shift+F10 or the menu key over the area opens it
  * at the pointer, or at the area's corner from the keyboard, as Radix's context
@@ -74,7 +81,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * field: Up and Down Arrow move the highlight through the rows that are left,
  * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
  * on a submenu goes back, and Escape clears the filter and then closes the
- * menu. Home, End and the other keys move the caret and type. The field names
+ * menu. A screen reader hears how many rows the filter keeps
+ * (`results-label`). Home, End and the other keys move the caret and type. The field names
  * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
  * after the field. Cancel `helix-filter` to keep every row
  * showing and narrow the rows yourself, such as by replacing them with rows
@@ -87,9 +95,12 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @documentation https://fusion.dev/helix/components/menu
  *
  * @slot - The items.
+ * @slot empty - What the menu shows when it has no items, for content richer than `empty-text`.
+ * @slot loading - What the menu shows while its items load, for content richer than `loading-text`.
  * @slot no-results - What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
  * @slot trigger - The control that opens the menu, or with `context` the area a context menu opens over.
  *
+ * @event {Event} change - A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now.
  * @event {HelixBeforeCloseEvent} helix-before-close - The menu is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The menu is about to open. Cancelable: cancel it to keep it closed.
  * @event {HelixFilterEvent} helix-filter - The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
@@ -110,6 +121,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
  *
  * @cssstate drilled - A submenu's page is showing, so content that is not a row can hide with the top page.
+ * @cssstate entering - From the moment the panel shows until its entrance has finished.
+ * @cssstate exiting - From the moment the panel hides until its exit has finished.
  * @cssstate mark - A row on the current page has a checkbox or a link, so every row keeps the trailing column.
  * @cssstate open - While the menu is open.
  * @cssstate placed-bottom - While the open panel sits below its trigger.
@@ -124,6 +137,7 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * `registerWords('de', { 'helix-menu': { backLabel: 'Zurück' } })`.
      */
     static words: string;
+    protected statusSlots: boolean;
     /**
      * The text of the row that returns from a submenu.
      */
@@ -204,6 +218,12 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * Space between the trigger and the surface, in pixels.
      */
     offset: number;
+    /**
+     * What opens the menu from its trigger. `long-press` leaves a press to the
+     * trigger's own action and opens the menu on a press held for half a second,
+     * or on Alt+Down or Alt+Up.
+     */
+    openOn: 'click' | 'long-press';
     /** Whether the trigger opens the menu only on a held press. */
     private get pressHeld();
     /**
@@ -213,18 +233,18 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private readonly longPress;
     /** Where a held press on a context menu's area is, to open the menu there. */
     private heldAt;
-    /**
-     * What opens the menu from its trigger. `long-press` leaves a press to the
-     * trigger's own action and opens the menu on a press held for half a second,
-     * or on Alt+Down or Alt+Up.
-     */
-    openOn: 'click' | 'long-press';
     /**
      * The side the menu opens on, when there is room.
      *
      * It moves if that side does not fit.
      */
     placement: Placement;
+    /**
+     * What a screen reader hears when the filter narrows the rows. `{count}` is
+     * how many rows are left, written in the locale, and each language writes
+     * the forms it has, as Listbox's `results-label` does.
+     */
+    resultsLabel: string;
     /**
      * How a submenu opens. `drill` shows it in place of the page showing, with
      * a way back. `flyout` opens it in a panel of its own beside its row.
@@ -257,6 +277,7 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * menu that drills, so those keys are spoken for here rather than unhandled.
      */
     protected readonly keys: KeyboardNavigationController;
+    protected readonly phases: OpenPhaseController;
     /** Carries a host `aria-label` and `aria-labelledby` to the surface. */
     protected readonly aria: AriaForwardController;
     /** Where a context menu was asked for, in the viewport, while it is open. */
@@ -310,6 +331,21 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * it, the one direction a reference crosses.
      */
     private reach;
+    /** Watches for rows taken away while the menu is open. */
+    private rowWatch;
+    /**
+     * Moves the reader to a neighbor when the page takes away the row they were
+     * on: the row that took its place, or the one before it where it was the
+     * last. A menu with no rows left closes and gives focus to its trigger.
+     *
+     * **Focus went to the body**, and the menu then ignored every key, its
+     * listener being on the host: measured in Chromium, removing the focused
+     * row and pressing ArrowUp did nothing. List and Virtual List move focus to
+     * a neighbor the same way, as React Aria's collections do. With `filterable`,
+     * focus stays in the field and the highlight moves. Focus a reader put
+     * anywhere but the body is left there.
+     */
+    private readonly followRemoved;
     /** Opens the menu. */
     show(): void;
     /** Opens the menu with focus on its first or its last row. */
@@ -327,6 +363,23 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private enter;
     /** Returns to the page above, or closes when there is none. */
     private leave;
+    /** The choice rows anywhere in the menu, in document order. */
+    private get choiceRows();
+    /**
+     * The values of the choice rows that are checked, anywhere in the menu, in
+     * document order.
+     *
+     * Set it to check exactly those rows and uncheck every other choice row, as
+     * React Aria's `selectedKeys` controls a menu's selection from one place.
+     * Each row keeps its own `checked` too, which this reads and writes. `change`
+     * is sent on the menu when a reader's choice changes it.
+     */
+    get checkedValues(): string[];
+    set checkedValues(values: readonly string[]);
+    /** The checked values `change` last said, joined, so a choice that moved nothing says nothing. */
+    private toldChecked;
+    /** Sends `change` when a reader's choice has changed which rows are checked. */
+    private tellChecked;
     private readonly handleSelect;
     /**
      * Keeps whatever has focus in sight, however it got there.
@@ -390,9 +443,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private grace;
     private stopHover;
     /**
-     * A mouse resting on a row, under `flyout`: focus follows it, and after a
-     * moment the row's submenu opens, or the submenus below the row's own page
+     * A mouse resting on a row: focus follows it, and under `flyout`, after a
+     * moment, the row's submenu opens, or the submenus below the row's own page
      * close. Not while the pointer is crossing toward an open submenu.
+     *
+     * **In every mode**, as the APG's menus, React Aria's and Radix's have it.
+     * Under `drill` the pointer did not move focus, so the row under the
+     * pointer and the row the keys moved from were two rows, measured in
+     * Chromium: hovering Delete left focus on Cut.
      */
     private readonly handleHover;
     /** The pointer leaving a row whose submenu is open, which starts the grace area. */
@@ -402,8 +460,11 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the surface is named by a submenu's page, which `nameSurface` undoes at the top. */
+    private namedByPage;
     /**
-     * Names the surface by its trigger, where nothing else names it.
+     * Names the surface by its trigger, where nothing else names it, and a
+     * submenu's page by its title.
      *
      * By element reference, which is the one direction that crosses: the surface
      * is in this shadow root and the trigger is in the tree around it. A host

package/dist/menu/root/menu-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, formatWords, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, OpenPhaseController, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -30,6 +30,7 @@ const isSection = (element) => 'isMenuSection' in element && element.isMenuSecti
 let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.backLabel = 'Back';
         this.closeOnSelect = true;
         this.context = false;
@@ -40,6 +41,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
         this.noResultsText = 'No matches';
         this.offset = 4;
+        this.openOn = 'click';
         this.longPress = new LongPress(this, {
             onLongPress: () => {
                 if (this.context) {
@@ -54,8 +56,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 }
             },
         });
-        this.openOn = 'click';
         this.placement = 'bottom-start';
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.submenus = 'drill';
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isMenuItem' in element && element.isMenuItem === true,
@@ -70,6 +72,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             selects: () => false,
             typeahead: typeaheadBy((item) => slottedWords(item, [''])),
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('surface'),
+        });
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.menuBox,
@@ -98,6 +108,37 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             event.stopPropagation();
             this.filterBy(event.target.value);
         };
+        this.followRemoved = (records) => {
+            if (!this.open) {
+                return;
+            }
+            const active = deepActiveElement();
+            const lost = active === null || active === document.body || !active.isConnected;
+            const record = records.find((one) => [...one.removedNodes].some((node) => isItem(node) && (this.filterable ? node === this.highlighted : lost)));
+            if (!record) {
+                return;
+            }
+            const items = this.items;
+            const after = (from, step) => {
+                for (let node = from; node; node = node[step]) {
+                    if (items.includes(node)) {
+                        return node;
+                    }
+                }
+                return undefined;
+            };
+            const next = after(record.nextSibling, 'nextSibling') ??
+                after(record.previousSibling, 'previousSibling') ??
+                items.at(-1);
+            if (this.filterable || next) {
+                this.reach(next);
+                return;
+            }
+            this.hide();
+            if (!this.context) {
+                this.trigger.focus();
+            }
+        };
         this.handleContextMenu = (event) => {
             if (!this.context) {
                 return;
@@ -124,6 +165,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 return;
             }
             const chosen = item;
+            this.tellChecked();
             if (chosen.hasSubmenu) {
                 event.stopPropagation();
                 this.enter(chosen);
@@ -141,6 +183,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             if (item) {
                 this.revealRow(item);
             }
+            this.nameSurface();
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
@@ -235,7 +278,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
         this.handleHover = (event) => {
-            if (!(this.flies || this.filterable) || !this.open || event.pointerType !== 'mouse') {
+            if (!this.open || event.pointerType !== 'mouse') {
                 return;
             }
             const row = event
@@ -293,6 +336,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 until: Date.now() + GRACE,
             };
         };
+        this.namedByPage = false;
     }
     static { this.words = 'helix-menu'; }
     get flies() {
@@ -487,6 +531,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.drilldown.back();
         this.updateComplete.then(() => this.reach(leaving ?? undefined));
     }
+    get choiceRows() {
+        return [...this.querySelectorAll('*')].filter((node) => isItem(node) && node.choice);
+    }
+    get checkedValues() {
+        return this.choiceRows.filter((row) => row.checked).map((row) => row.value);
+    }
+    set checkedValues(values) {
+        const wanted = new Set(values);
+        for (const row of this.choiceRows) {
+            row.checked = wanted.has(row.value);
+        }
+        this.toldChecked = this.checkedValues.join('\u0000');
+    }
+    tellChecked() {
+        const now = this.checkedValues.join('\u0000');
+        const before = this.toldChecked;
+        this.toldChecked = now;
+        if (before !== undefined && before !== now) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
     revealRow(item) {
         const holder = this.flies ? this.holderOf(item) : null;
         const surface = holder
@@ -555,6 +620,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('pointercancel', this.handlePointerCancel);
         this.addEventListener('click', this.handleHeldClick, true);
         this.addEventListener('focusin', this.handleTriggerFocusIn);
+        this.rowWatch = new MutationObserver(this.followRemoved);
+        this.rowWatch.observe(this, { childList: true, subtree: true });
         void this.whenSettled.then(() => {
             this.settledOnce = true;
             if (!this.context) {
@@ -581,6 +648,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('pointercancel', this.handlePointerCancel);
         this.removeEventListener('click', this.handleHeldClick, true);
         this.removeEventListener('focusin', this.handleTriggerFocusIn);
+        this.rowWatch?.disconnect();
+        this.rowWatch = undefined;
         if (this.described) {
             unlinkDescription(this.described, this);
             this.described = undefined;
@@ -588,6 +657,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('open') && this.open) {
+            this.toldChecked = this.checkedValues.join('\u0000');
+        }
         if (!this.context) {
             this.tellTrigger();
         }
@@ -628,7 +700,20 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     nameSurface() {
         const surface = this.menuBox;
-        if (!surface || !('ariaLabelledByElements' in surface)) {
+        if (!surface) {
+            return;
+        }
+        if (!this.flies && !this.drilldown.atRoot && this.partNamed('title')) {
+            surface.setAttribute('aria-labelledby', 'title');
+            this.namedByPage = true;
+            return;
+        }
+        if (this.namedByPage) {
+            this.namedByPage = false;
+            surface.removeAttribute('aria-labelledby');
+            this.aria.forward();
+        }
+        if (!('ariaLabelledByElements' in surface)) {
             return;
         }
         if (this.hasAttribute('aria-labelledby')) {
@@ -673,8 +758,15 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     render() {
         const point = this.context && this.point;
         const filtering = this.filtering;
-        const none = filtering && !this.rowsOf(this.filterPage).some((row) => this.kept(row));
-        this.announced = none ? this.noResultsText : '';
+        const count = filtering
+            ? this.rowsOf(this.filterPage).filter((row) => this.kept(row)).length
+            : 0;
+        const none = filtering && count === 0;
+        this.announced = none
+            ? this.noResultsText
+            : filtering
+                ? formatWords(this, 'resultsLabel', { count })
+                : '';
         const rows = html `${this.flies || this.drilldown.atRoot
             ? nothing
             : html `<div part="header">
@@ -690,7 +782,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 ${unsafeSVG(caretLeft.content)}
               </svg>
             </button>
-            <span part="title">${this.drilldown.label}</span>
+            <span part="title" id="title">${this.drilldown.label}</span>
           </div>`}
       <slot @slotchange=${(event) => this.countRows(event)}></slot>
       ${none
@@ -775,6 +867,10 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "placement", void 0);
+__decorate([
+    words,
+    property({ attribute: 'results-label' })
+], HelixHeadlessMenu.prototype, "resultsLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "submenus", void 0);

package/dist/outline/root/outline-root.d.ts

@@ -40,6 +40,22 @@ import { type Branch } from '../levels.js';
  * headings are far apart, none is in the band and no section is marked, and
  * when they are close together, several are in the band at once.
  *
+ * **Several sections at once.** `marks="visible"` marks the link of every
+ * section with part of it on screen, from the reading line to the bottom of
+ * what the sections scroll in, as Zag's table of contents marks its active
+ * ids. The mark then runs from the first of those links to the last, and
+ * `marked` lists their ids in page order.
+ *
+ * **Going to a section from code.** `scrollToSection(id)` scrolls to the
+ * section as a press on its link does, with `behavior`, and marks its link at
+ * once.
+ *
+ * **Styling a link by its state.** Each link the outline finds carries
+ * `data-depth`, its depth in the outline from `1`, nested lists and
+ * `data-level` alike, and `aria-current="location"` while its section is
+ * marked, so `a[aria-current]` and `a[data-depth="2"]` are the hooks for a
+ * rule of yours.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -109,6 +125,12 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * slot names it in place of this.
      */
     label: string;
+    /**
+     * Which links are marked. `reading` marks the one section being read, the
+     * last whose heading has passed the reading line. `visible` marks every
+     * section with part of it on screen, and the mark runs across their links.
+     */
+    marks: 'reading' | 'visible';
     /**
      * How far below the top of the scroll container a heading counts as reached,
      * in pixels. The scroll container is the window or the panel the sections
@@ -130,6 +152,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * than saying it in a sentence nobody reads.
      */
     get current(): string;
+    /**
+     * The ids of the sections whose links are marked, in page order: the one
+     * `current` names, or under `marks="visible"` every section on screen.
+     * Read-only, for the reason `current` gives.
+     */
+    get marked(): string[];
+    /** What `marked` reports, which only `markTo` writes. */
+    private markedIds;
     /**
      * What `current` reports, which only `mark` writes.
      *
@@ -183,6 +213,12 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * wherever the page says the top of the readable area is.
      */
     private mark;
+    /**
+     * The sections with part of them on screen, under `marks="visible"`: each
+     * runs from its own target to the next one's, and the last to the end of the
+     * page.
+     */
+    private onScreen;
     /** Where the destination is set, whether measured or asked for. */
     private markTo;
     /**
@@ -293,6 +329,18 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * handled is not ours, and `auto` is the whole point of `auto`.
      */
     private readonly handleClick;
+    /**
+     * Scrolls to the section with this id, as a press on its link does, with
+     * `behavior`, and marks its link at once. The address and focus stay where
+     * they are. Returns whether the outline has a link to that section.
+     */
+    scrollToSection(id: string): boolean;
+    /**
+     * Marks the section a reader asked for, and holds the mark there until the
+     * page stops moving. Scrolls to it where `scroll` says this element does
+     * the scrolling, and returns whether it did.
+     */
+    private travel;
     /**
      * Watches every section, and re-marks whenever any of them crosses anything.
      *
@@ -312,6 +360,15 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * life of the page.
      */
     private readonly handleSlotChange;
+    /**
+     * Writes each link's depth in the outline, from 1, as `data-depth`: the
+     * list items around it inside the outline, or for a flat run, its place in
+     * the lists `data-level` makes of it.
+     *
+     * On the consumer's links, as `aria-current` is, and only after the first
+     * render, where a framework has hydrated them.
+     */
+    private writeDepths;
     disconnectedCallback(): void;
     /**
      * Stops waiting for a scroll to land, both halves of the wait.