@mosaicajs/components 0.3.0 → 0.4.0

package/dist/filter.js

@@ -40,6 +40,7 @@ import { FloatingList } from './float.js';
 import { MosaicaElement, columnCaption, emit } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
+import { NamedQuery } from './states.js';
 import { chrome, tokens } from './tokens.js';
 /** The operators a keyword control can send. */
 const KEYWORD_OPERATORS = ['contains', 'prefix', 'eq'];
@@ -57,11 +58,16 @@ const BAR_FLOOR = 2;
  * - A text column takes words that an item must all contain. Double quotes match a phrase where the
  *   column supports phrases, and `OR` between terms matches either.
  * - A category column suggests values as the viewer types. The arrow keys move through the
- *   suggestions, Enter chooses or removes one, and Escape clears what was typed.
+ *   suggestions, as do Home and End once one is reached. Enter chooses or removes the suggestion
+ *   they reached, and Escape clears what was typed. A line under the box says how many values are
+ *   listed, or why none is, and that they are loading once that has taken a quarter of a second.
  * - A keyword column has a menu for choosing how to match, by `contains`, `prefix` or `eq`.
  *
  * The box sets the filter 350 ms after the last keystroke, so that the map does not redraw for
- * every letter. If your code sets a text filter the box cannot express, the box shows it read-only.
+ * every letter. While the query that change started is still loading, and once it has run for a
+ * quarter of a second, a spinner takes the search icon's place. The spinner is not read out:
+ * `<mosaica-status>` is what announces a running query. If your code sets a text filter the box
+ * cannot express, the box shows it read-only.
  *
  * @summary A search box that filters the map by one column.
  * @tagname mosaica-filter
@@ -69,11 +75,13 @@ const BAR_FLOOR = 2;
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-filterchange']>} mosaica-filterchange - The box
  *   changed the column's filter.
  * @csspart entry - The box.
+ * @csspart spinner - The spinner in the search icon's place while the box's own query runs.
  * @csspart mode - The keyword column's operator button, which opens its menu.
  * @csspart operators - The menu of a keyword column's operators.
  * @csspart operator - One operator in the menu, with `aria-checked`.
  * @csspart values - The typeahead's suggestions.
- * @csspart tick - One suggested value, with `aria-selected`.
+ * @csspart tick - One suggested value, with `aria-selected`, and `data-active` on the one the arrow
+ *   keys reached.
  * @csspart bar - A bar for a suggested value's share of the items counted.
  * @csspart value-count - A suggested value's count.
  * @csspart more - The note under the box when nothing matches, or when more values match than are
@@ -144,6 +152,10 @@ let MosaicaFilter = (() => {
       .input input {
         font-size: 12px;
       }
+      /* In the search icon's place, at its width. */
+      .input .spinner {
+        margin: 0 1px;
+      }
       .ctl-row {
         display: flex;
         align-items: center;
@@ -233,6 +245,11 @@ let MosaicaFilter = (() => {
       [part~='tick'][aria-selected='true'] {
         background: var(--_mosaica-surface-2);
       }
+      /* The box keeps focus, so the suggestion the arrow keys reached is ringed as if it had it. */
+      [part~='tick'][data-active] {
+        outline: 2px solid var(--_mosaica-focus);
+        outline-offset: -2px;
+      }
       [part~='tick'][aria-selected='true'] {
         font-weight: 600;
       }
@@ -243,9 +260,10 @@ let MosaicaFilter = (() => {
         min-width: 0;
       }
       .opt .name {
+        white-space: var(--_mosaica-long-text, nowrap);
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        overflow-wrap: anywhere;
       }
       /* The matched span the server gave. */
       [part~='tick'] mark {
@@ -264,11 +282,13 @@ let MosaicaFilter = (() => {
         height: 3px;
         border-radius: 2px;
         background: var(--_mosaica-surface-3);
+        forced-color-adjust: none;
       }
       [part='bar'] {
         height: 3px;
         border-radius: 2px;
         background: color-mix(in srgb, var(--_mosaica-ink-2) 75%, var(--_mosaica-surface));
+        forced-color-adjust: none;
       }
       [aria-selected='true'] [part='bar'] {
         background: var(--_mosaica-ink);
@@ -298,6 +318,21 @@ let MosaicaFilter = (() => {
       .skel {
         margin-top: 8px;
       }
+      @media (forced-colors: active) {
+        [part~='tick'][data-active] {
+          outline-color: Highlight;
+        }
+        .track {
+          background: GrayText;
+        }
+        [part='bar'] {
+          background: CanvasText;
+        }
+        /* A chosen row is painted Highlight there. */
+        [aria-selected='true'] [part='bar'] {
+          background: HighlightText;
+        }
+      }
     `
         ];
         #column_accessor_storage = __runInitializers(this, _column_initializers, '');
@@ -324,7 +359,7 @@ let MosaicaFilter = (() => {
         get search() { return this.#search_accessor_storage; }
         set search(value) { this.#search_accessor_storage = value; }
         #activeCode_accessor_storage = (__runInitializers(this, _search_extraInitializers), __runInitializers(this, _activeCode_initializers, null));
-        /** The suggestion the arrow keys moved to, by code; `null` is the first. @internal */
+        /** The suggestion the arrow keys reached, by code; `null` before they reach one. @internal */
         get activeCode() { return this.#activeCode_accessor_storage; }
         set activeCode(value) { this.#activeCode_accessor_storage = value; }
         #focused_accessor_storage = (__runInitializers(this, _activeCode_extraInitializers), __runInitializers(this, _focused_initializers, false));
@@ -336,6 +371,11 @@ let MosaicaFilter = (() => {
         get operatorsOpen() { return this.#operatorsOpen_accessor_storage; }
         set operatorsOpen(value) { this.#operatorsOpen_accessor_storage = value; }
         sent = (__runInitializers(this, _operatorsOpen_extraInitializers), null);
+        /** Whether the query the store is running was started by this box. */
+        asked = false;
+        query = new NamedQuery(this);
+        /** Whether the suggestions have been awaited long enough to say so. */
+        awaited = new NamedQuery(this);
         floating = new FloatingList(() => {
             const list = this.renderRoot.querySelector('[part="values"]');
             const anchor = this.renderRoot.querySelector('.combo');
@@ -366,6 +406,7 @@ let MosaicaFilter = (() => {
             // The draft being edited was the previous store's; the next is seeded from the one adopted.
             this.draft = null;
             this.sent = null;
+            this.asked = false;
         }
         get resolvedOperand() {
             return this.resolvedStore?.get('meta')?.filterOperands.find((o) => o.column === this.column) ?? null;
@@ -396,14 +437,22 @@ let MosaicaFilter = (() => {
             this.ask('');
             this.floating.stop();
             this.operatorMenu.stop();
+            this.query.stop();
+            this.awaited.stop();
             super.disconnectedCallback();
         }
         onStoreChange() {
-            // Re-seed from the store only when its draft changed underneath (a clear all, or the first
-            // meta), not while the user's own edit is in flight.
+            // Re-seed from the store only when its draft changed underneath (a clear all, a cancelled
+            // query, or the first meta), not while the user's own edit is in flight. A draft that no
+            // longer holds the control this box sent has dropped it.
             const stored = this.resolvedStore?.get('filters').draft.filter[this.column] ?? null;
-            if (stored && stored !== this.sent && JSON.stringify(stored) !== JSON.stringify(this.draft)) {
-                this.draft = structuredClone(stored);
+            const changed = stored ? stored !== this.sent && JSON.stringify(stored) !== JSON.stringify(this.draft) : this.sent !== null;
+            if (changed) {
+                // What was typed since is not sent over the draft that replaced it.
+                if (this.typing)
+                    clearTimeout(this.typing);
+                this.typing = null;
+                this.draft = stored ? structuredClone(stored) : null;
                 this.sent = stored;
             }
             if (this.resolvedOperand?.family === 'category') {
@@ -428,6 +477,24 @@ let MosaicaFilter = (() => {
             super.updated(changed);
             this.floating.update();
             this.operatorMenu.update();
+            if (changed.has('activeCode'))
+                this.renderRoot.querySelector('[part~="tick"][data-active]')?.scrollIntoView({ block: 'nearest' });
+            if (!this.querying)
+                this.asked = false;
+            this.query.track(this.asked);
+            this.awaited.track(this.awaiting);
+        }
+        get querying() {
+            return this.resolvedStore?.get('status').querying ?? false;
+        }
+        /** Whether a category box holds text whose suggestions have neither landed nor been refused. */
+        get awaiting() {
+            const filters = this.resolvedStore?.get('filters');
+            return this.resolvedOperand?.family === 'category' && this.search !== '' && this.resolvedSuggestion === null && !filters?.suggestErrors[this.column];
+        }
+        /** The search icon, or a spinner while the query this box started has run long enough to name. */
+        lead() {
+            return this.asked && this.querying && this.query.named ? html `<span part="spinner" class="spinner" aria-hidden="true"></span>` : icon('search', 12);
         }
         /** The box's draft: the one being edited, else the store's, else the client's empty one, which also sets a keyword's starting operator. */
         currentDraft(o) {
@@ -447,6 +514,8 @@ let MosaicaFilter = (() => {
                 const draft = { ...held, filter: { ...held.filter, [column]: next } };
                 this.sent = next;
                 s.setFilters(draft);
+                this.asked = s.get('status').querying;
+                this.requestUpdate();
                 emit(this, 'mosaica-filterchange', { column, verb: 'filter', expr: composeFilters(draft, 'filter') });
             };
             if (immediate)
@@ -472,16 +541,18 @@ let MosaicaFilter = (() => {
                     return nothing;
             }
         }
-        label() {
-            return this.placeholder || columnCaption(this.column);
+        /** The box's name: the column, and the placeholder the box shows. */
+        label(shown) {
+            return shown ? `${columnCaption(this.column)}: ${shown}` : columnCaption(this.column);
         }
         text(draft) {
             // An expression set from outside that no query writes is shown as it is, and cannot be typed over.
             if (draft.expr !== undefined) {
-                return html `<div class="input">${icon('search', 12)}<input id="ctl" part="entry" readonly aria-label=${this.label()} .value=${JSON.stringify(draft.expr)} /></div>`;
+                return html `<div class="input">${icon('search', 12)}<input id="ctl" part="entry" readonly aria-label=${this.label('')} .value=${JSON.stringify(draft.expr)} /></div>`;
             }
-            return html `<div class="input">${icon('search', 12)}<input id="ctl" part="entry" type="search" .value=${draft.query} placeholder=${this.placeholder || 'Search the text'} autocomplete="off"
-        aria-label=${this.label()} @input=${(e) => this.change({ family: 'text', query: e.target.value, phrase: draft.phrase }, false)} /></div>`;
+            const shown = this.placeholder || 'Search the text';
+            return html `<div class="input">${this.lead()}<input id="ctl" part="entry" type="search" .value=${draft.query} placeholder=${shown} autocomplete="off"
+        aria-label=${this.label(shown)} @input=${(e) => this.change({ family: 'text', query: e.target.value, phrase: draft.phrase }, false)} /></div>`;
         }
         /** A keyword box, offering the operators the column publishes in a menu. */
         keyword(o, draft) {
@@ -516,7 +587,7 @@ let MosaicaFilter = (() => {
                 void this.updateComplete.then(() => this.renderRoot.querySelector('[part~="operator"][aria-checked="true"]')?.focus());
             };
             return html `<div class="ctl-row">
-      <div class="input grow">${icon('search', 12)}<input id="ctl" part="entry" type="search" .value=${draft.needle} autocomplete="off" placeholder=${this.placeholder || nothing} aria-label=${this.label()}
+      <div class="input grow">${this.lead()}<input id="ctl" part="entry" type="search" .value=${draft.needle} autocomplete="off" placeholder=${this.placeholder || nothing} aria-label=${this.label(this.placeholder)}
         @input=${(e) => this.change({ ...draft, needle: e.target.value }, false)} /></div>
       <div class="op" @focusout=${(e) => {
                 const to = e.relatedTarget;
@@ -574,18 +645,20 @@ let MosaicaFilter = (() => {
                 this.change({ ...draft, keys: chosen.has(key) ? draft.keys.filter((k) => k !== key) : [...draft.keys, key] }, true);
             };
             const typed = this.search !== '';
+            const listed = suggestion?.values ?? [];
             // The suggestions show while the box has focus and holds text; the list closes as focus leaves.
-            const rows = typed && this.focused ? (suggestion?.values ?? []) : [];
-            // The row the keys act on: the one the arrows reached, else the first.
-            const active = rows.find((v) => v.code === this.activeCode) ?? rows[0] ?? null;
-            const move = (by) => {
-                if (rows.length === 0)
-                    return;
-                const at = active ? rows.indexOf(active) : -1;
-                this.activeCode = rows[(at + by + rows.length) % rows.length].code;
+            const rows = typed && this.focused ? listed : [];
+            // The row Enter acts on: the one the arrow keys reached. Until they reach one there is none, so
+            // Enter does not take whichever row a page that lands puts first.
+            const active = rows.find((v) => v.code === this.activeCode) ?? null;
+            const at = active ? rows.indexOf(active) : -1;
+            const reach = (i) => {
+                if (rows.length > 0)
+                    this.activeCode = rows[(i + rows.length) % rows.length].code;
             };
-            const field = html `<div class="input">${icon('search', 12)}<input id="ctl" part="entry" type="search" autocomplete="off" placeholder=${this.placeholder || 'Type a value'}
-        aria-label=${this.label()} role="combobox" aria-expanded=${rows.length > 0 ? 'true' : 'false'} aria-controls="values" aria-activedescendant=${active ? `value-${active.code}` : nothing}
+            const shown = this.placeholder || 'Type a value';
+            const field = html `<div class="input">${this.lead()}<input id="ctl" part="entry" type="search" autocomplete="off" placeholder=${shown}
+        aria-label=${this.label(shown)} role="combobox" aria-autocomplete="list" aria-expanded=${rows.length > 0 ? 'true' : 'false'} aria-controls="values" aria-activedescendant=${active ? `value-${active.code}` : nothing}
         .value=${this.search}
         @focus=${() => (this.focused = true)}
         @blur=${() => (this.focused = false)}
@@ -598,7 +671,12 @@ let MosaicaFilter = (() => {
         @keydown=${(e) => {
                 if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                     e.preventDefault();
-                    move(e.key === 'ArrowDown' ? 1 : -1);
+                    reach(e.key === 'ArrowDown' ? at + 1 : Math.max(at, 0) - 1);
+                }
+                else if ((e.key === 'Home' || e.key === 'End') && active) {
+                    // Before the arrow keys reach a suggestion, Home and End move in the text.
+                    e.preventDefault();
+                    reach(e.key === 'Home' ? 0 : -1);
                 }
                 else if (e.key === 'Enter') {
                     if (active)
@@ -623,20 +701,21 @@ let MosaicaFilter = (() => {
       </button>`;
             };
             const list = rows.length > 0
-                ? html `<div part="values" id="values" popover="manual" role="listbox" aria-label=${`${columnCaption(this.column)} values`} style=${countWidth(rows.map((v) => v.count))}>${repeat(rows, (v) => v.code, option)}</div>`
+                ? html `<div part="values" id="values" popover="manual" role="listbox" aria-multiselectable=${choose ? nothing : 'true'} aria-label=${`${columnCaption(this.column)} values`} style=${countWidth(rows.map((v) => v.count))}>${repeat(rows, (v) => v.code, option)}</div>`
                 : nothing;
-            const note = !typed
+            // How many values are listed, or why none is, for a reader as the list changes under the box.
+            const said = !typed
                 ? nothing
                 : refusal
                     ? html `<span part="refusal" data-code=${refusal.code}><span class="dot refuse"></span>Values unavailable</span>`
                     : suggestion === null
-                        ? html `<span class="skel" aria-hidden="true"></span>`
-                        : rows.length === 0
+                        ? html `<span class="skel" aria-hidden="true"></span>${this.awaited.named ? html `<span class="sr-only">Loading values</span>` : nothing}`
+                        : listed.length === 0
                             ? html `<span part="more">No value starts with that</span>`
-                            : suggestion.more
-                                ? html `<span part="more">Type more to narrow the list</span>`
-                                : nothing;
-            return html `<div class="combo">${field}${list}</div>${note}`;
+                            : rows.length === 0
+                                ? nothing
+                                : html `<span class="sr-only">${rows.length} ${rows.length === 1 ? 'value' : 'values'} listed. </span>${suggestion.more ? html `<span part="more">Type more to narrow the list</span>` : nothing}`;
+            return html `<div class="combo">${field}${list}</div><div role="status">${said}</div>`;
         }
     };
 })();

package/dist/hierarchy.d.ts

@@ -10,10 +10,19 @@ import './count.js';
  * hierarchy, filter layers among them. When there are several, a select switches between them.
  *
  * Each row shows how many of the artifact's items the viewer may see. While filters are set, it
- * also shows how many of those items match. A parent the viewer may not see is left out, so its
- * children appear at the top level.
+ * also shows how many of those items match, and a screen reader is given each count with what it
+ * counts. An artifact the viewer may not see is left out, and its children appear under its
+ * nearest ancestors the viewer may see, or at the top level where it has none. A row under several
+ * served parents names the others, and a parent no page has served yet is asked for by name. When
+ * the filters change, the rows are fetched again, a few requests at a time: as many pages of the
+ * roots and of each open row as More had loaded, since a page's cursor is good only for the
+ * filters it was served under. Focus stays on the control it was on.
  *
- * A row's buttons highlight or filter the map by its artifact. Its Fit button only fires
+ * A row's name is one line, cut with an ellipsis where it is too long, unless
+ * `--mosaica-long-text` is `normal`. A row's buttons highlight or filter the map by its artifact.
+ * They are shown in place of its counts while the pointer or focus is in the row, and Escape puts
+ * them away again; where there is no pointer to hover with, they stand beside the counts. Its Fit
+ * button only fires
  * `mosaica-artifactfit`, so you handle the event by passing its id to the map's `fitTo`. The
  * explorer does this for a hierarchy you put in one of its slots. `fitTo` finds only the artifacts
  * the map currently draws, so Fit does nothing for a row whose artifact is not drawn at this zoom.
@@ -28,31 +37,39 @@ import './count.js';
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-artifactfit']>} mosaica-artifactfit - A row's Fit
  *   button was pressed.
  * @csspart title - The heading.
- * @csspart state - The state line, with `data-state`.
+ * @csspart state - The state line, with `data-state`, inside a `role="status"` region, which also
+ *   says which rows are loading children and which were refused them.
  * @csspart refusal - The words "View refused" or "Layer unavailable", with `data-code`.
  * @csspart reason - The server's reason for a refusal, under "View refused".
  * @csspart layer - The layer select, shown if there are several layers.
  * @csspart search - The search box.
- * @csspart tree - The tree of rows.
- * @csspart row - One row, with `data-id`, and `data-clause` (`filter`, `highlight` or both,
- *   separated by a space) while its artifact is filtered or highlighted.
- * @csspart expander - A row's expand button. On a row with no children it has `data-leaf` and is
- *   hidden, keeping the names aligned.
- * @csspart name - A row's name, with `data-unnamed` if it has none. Pressing it highlights the
- *   artifact.
- * @csspart counts - A row's counts.
+ * @csspart tree - The tree of rows, named by the layer.
+ * @csspart row - One row, with `data-id`, `data-clause` (`filter`, `highlight` or both, separated
+ *   by a space) while its artifact is filtered or highlighted, and `data-buttons-away` once Escape has put
+ *   its buttons away.
+ * @csspart expander - A row's expand button, with `aria-expanded` while its children are shown. On
+ *   a row with no children it has `data-leaf` and is hidden, keeping the names aligned.
+ * @csspart name - A row's name. Where the artifact has none it is the artifact's key, with
+ *   `data-key-name`, and where it has no key either it is the word Unnamed, with `data-unnamed`.
+ *   Pressing it highlights the artifact, and it has `aria-pressed` while the artifact is
+ *   highlighted.
+ * @csspart counts - A row's counts as they are drawn, hidden from a screen reader, which is given
+ *   them beside it with what each counts. They are not drawn while the row's buttons are shown
+ *   over them.
  * @csspart count-matched - The `<mosaica-count>` of a row's items that match the filters, while a
  *   filter is set.
  * @csspart count-masked - The `<mosaica-count>` of a row's items the viewer may see.
- * @csspart actions - A row's buttons.
+ * @csspart actions - A row's buttons, shown over its counts while the pointer or focus is in the
+ *   row.
  * @csspart highlight - A row's highlight button, with `aria-pressed`.
  * @csspart filter - A row's filter button, with `aria-pressed`.
  * @csspart fit - A row's Fit button, on a layer that draws.
  * @csspart dismiss - A × that removes a row's filter or highlight, one for each, with `data-verb`.
- * @csspart also - The row's other parents, or "Children unavailable" with `data-code` if its
- *   children were refused.
+ *   The highlight's has a bar under it.
+ * @csspart also - The row's other parents, each with `data-key-name` where it is called by its key,
+ *   or "Children unavailable" with `data-code` if its children were refused.
  * @csspart children - An expanded row's children.
- * @csspart more - The More button, which loads the next page.
+ * @csspart more - The More button, which loads the next page and moves focus to its first row.
  */
 export declare class MosaicaHierarchy extends MosaicaElement {
     static styles: import("lit").CSSResult[];
@@ -60,34 +77,22 @@ export declare class MosaicaHierarchy extends MosaicaElement {
     accessor layer: string;
     /** Rows per page, from 1 up to the server's `maxBrowseRows`. */
     accessor limit: number;
-    private accessor roots;
-    private accessor rootsNext;
     private accessor query;
     private accessor searching;
-    private accessor loading;
-    private accessor refusal;
+    /** Why the last search was refused. */
+    private accessor searchRefusal;
     /** Which paths are open, so a re-render of the tree keeps the walk. */
     private accessor open;
-    /** Bumped to re-render after a node's children land, since the tree in `roots` is mutated. */
-    private accessor revision;
-    /** The question the roots were fetched under; see {@link question}. */
-    private fetchedUnder;
-    /**
-     * Every name the walk has seen, by identifier. A filter layer's artifacts are never served in a
-     * viewport, so this is the client's only source of their names.
-     */
-    private names;
+    /** The paths of the rows whose buttons Escape has put away, each until the pointer and focus leave it. */
+    private accessor buttonsAway;
+    /** The browse pages of the current layer: its roots and the children of the rows opened. */
+    private readonly lineage;
     private searchTimer;
-    /** Moved by {@link resetServerData}, so a page asked for before it is dropped. */
+    /** Moved by {@link resetServerData}, so a search asked for before it is dropped. */
     private epoch;
     protected resetServerData(): void;
     private layers;
     private current;
-    /**
-     * The question the panel is asking, as a string: the layer and the map's filter. A change
-     * refetches the roots and drops the walk, whose counts answer the old question.
-     */
-    private question;
     /**
      * Whether the panel is shown. A hidden panel sends no request, so a panel in a closed drawer
      * does not load the roots alongside the first viewport.
@@ -99,30 +104,48 @@ export declare class MosaicaHierarchy extends MosaicaElement {
     private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Escape puts away the buttons shown over a row's counts, wherever focus is, since the pointer
+     * alone shows them. Focus on one of them goes to the row's name.
+     */
+    private onEscape;
+    /** The buttons Escape put away come back once the pointer and focus have both left the row. */
+    private leftRow;
+    /** Let a row show its buttons again. */
+    private shownAgain;
     /** Whether this element is displayed; see {@link shown}. */
     private displayed;
     /** The roots, where the question they were fetched under is no longer the one being asked. */
     private loadRootsIfStale;
     protected onStoreChange(): void;
+    /** The control focus was on as the last render began. */
+    private held;
     /** Re-asked before every render, so putting the panel away and taking it out again both count. */
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(): void;
-    /** One page of the current layer, under the map's filter, which the store supplies. */
-    private page;
-    private loadRoots;
-    private node;
-    /** What to call an artifact: its name where the walk has met one. */
-    private nameOf;
+    /** Open a row, fetching its children where it has none yet, or close one that is open or opening. */
+    private toggle;
     /**
-     * Expand a node: its children, paged. A node keeps what it fetched while {@link question} is
-     * unchanged, so reopening it fetches nothing.
+     * Load the next page of the roots, or of `parent`'s children, and move focus from the More
+     * button, which the page replaces or removes, to the first row it added. Focus that has gone
+     * anywhere else meanwhile stays there.
      */
-    private expand;
-    private toggle;
+    private more;
+    private rowElements;
+    /** The control in a row that focus is on, read before a render so {@link keepFocus} can put it back. */
+    private heldControl;
+    /**
+     * After a render, put focus back on the control it was on, in the row it was on. Where a ×
+     * removed itself, focus goes to the row's other ×, else to the button that makes the clause.
+     * Where the row is gone, it goes to the row now in its place, else the last, else the search box.
+     */
+    private keepFocus;
     private search;
     /** The positions of the clauses on this row's artifact, which colour the row and set the buttons. */
     private clausesOn;
     private apply;
+    /** What the rows' own fetches say, for the status region: the rows loading children, and those refused them. */
+    private rowNotes;
     render(): TemplateResult | typeof nothing;
     private renderNode;
 }