@mosaicajs/components 0.3.0 → 0.4.0

package/dist/selection.js

@@ -34,18 +34,19 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { formatMasked } from '@mosaicajs/client';
 import { isBusy, isUnanswered } from '@mosaicajs/client/internal';
 import { MosaicaElement, emit, idString, shapeDetail } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
-import { reasonOf, refusedState, renderState, stateOf } from './states.js';
+import { ActionFocus, UNSAID, liveLine, reasonOf, refusedLine, stateLine, stateOf } from './states.js';
 import { chrome, tokens } from './tokens.js';
 import './count.js';
 /**
  * Use the selection card beside a map so that viewers can see what is inside the region they have
  * drawn. It reads the store's selected region, or the `region` you set. It counts the items inside
  * that the filters match, the items the viewer may see there and the marks drawn there. The drawn
- * marks are listed below the counts, and clicking one picks it.
+ * marks are listed below the counts, each a button that picks it.
  *
  * The region acts as a filter, which means the map and every other count narrow to it once it
  * settles. Outside flips it to everything outside the shape, and Clear removes it. The counts are
@@ -53,6 +54,12 @@ import './count.js';
  * says when that is so. Export and Save as artifact are shown disabled because they are not
  * available yet.
  *
+ * Screen readers announce the state line as it changes: that the selection is being counted, a
+ * refusal, and, once, when the query has finished loading, the matched and visible counts with
+ * whether they are exact for the shape. The counts and that verdict are read out and not drawn on
+ * the line, since the figures are below it. With `quiet`, the card shows the same and announces
+ * nothing.
+ *
  * @summary A card showing the counts and marks inside the selected region.
  * @tagname mosaica-selection
  * @category Elements
@@ -71,7 +78,7 @@ import './count.js';
  * @csspart count-visible - The `<mosaica-count>` of items the viewer may see inside (or outside).
  * @csspart label - The heading above the list.
  * @csspart items - The list of drawn marks inside.
- * @csspart item - One drawn mark, by `mosaica_id`.
+ * @csspart item - One drawn mark's row, holding a button named by its `mosaica_id`.
  * @csspart actions - The action buttons.
  * @csspart action - One action button.
  */
@@ -80,11 +87,16 @@ let MosaicaSelection = (() => {
     let _region_decorators;
     let _region_initializers = [];
     let _region_extraInitializers = [];
+    let _quiet_decorators;
+    let _quiet_initializers = [];
+    let _quiet_extraInitializers = [];
     return class MosaicaSelection extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _region_decorators = [property({ attribute: false })];
+            _quiet_decorators = [property({ type: Boolean, reflect: true })];
             __esDecorate(this, null, _region_decorators, { kind: "accessor", name: "region", static: false, private: false, access: { has: obj => "region" in obj, get: obj => obj.region, set: (obj, value) => { obj.region = value; } }, metadata: _metadata }, _region_initializers, _region_extraInitializers);
+            __esDecorate(this, null, _quiet_decorators, { kind: "accessor", name: "quiet", static: false, private: false, access: { has: obj => "quiet" in obj, get: obj => obj.quiet, set: (obj, value) => { obj.quiet = value; } }, metadata: _metadata }, _quiet_initializers, _quiet_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
@@ -95,7 +107,10 @@ let MosaicaSelection = (() => {
         display: block;
       }
       [part='counts'] {
-        margin-bottom: 4px;
+        margin: 0 0 4px;
+      }
+      [part='counts'] dd {
+        margin: 0;
       }
       [part='counts'] mosaica-count::part(count) {
         font-weight: 500;
@@ -115,8 +130,26 @@ let MosaicaSelection = (() => {
       }
       [part='item'] {
         min-height: 26px;
+      }
+      /* The row is its button, which fills it and takes the row's own padding. */
+      .list > [part='item'] {
+        padding: 0;
+      }
+      [part='item'] button {
+        flex: 1 1 0;
+        min-width: 0;
+        align-self: stretch;
+        padding: 0 6px;
+        border-radius: var(--_mosaica-radius-control);
         font-family: var(--_mosaica-font-mono);
         font-size: 12px;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      [part='item'] button:focus-visible {
+        outline-offset: -2px;
       }
       [part='actions'] {
         display: flex;
@@ -130,74 +163,107 @@ let MosaicaSelection = (() => {
         /** A region to show instead of the store's `region` projection. */
         get region() { return this.#region_accessor_storage; }
         set region(value) { this.#region_accessor_storage = value; }
+        #quiet_accessor_storage = (__runInitializers(this, _region_extraInitializers), __runInitializers(this, _quiet_initializers, false));
+        /**
+         * Announces nothing: the state line and the counts are still shown, and none is put in a live
+         * region. Set it when another element on the page says the same things.
+         */
+        get quiet() { return this.#quiet_accessor_storage; }
+        set quiet(value) { this.#quiet_accessor_storage = value; }
         get shown() {
             return this.region ?? this.resolvedStore?.get('region') ?? null;
         }
-        render() {
-            const r = this.shown;
-            const heading = (shape = '') => html `<h2 part="title">Selection<span class="summary">${shape}</span></h2>`;
-            if (!r)
-                return html `<div class="panel">${heading()}<span part="state" data-state="detached"></span></div>`;
-            const status = this.resolvedStore?.get('status') ?? null;
-            const stale = status?.stale ?? false;
-            const state = r.status === 'shown' ? (stale ? 'stale' : 'shown') : r.status;
-            const kv = (label, count) => html `<div class="k">${label}</div><div class="v">${count}</div>`;
-            const counts = r.status === 'shown'
-                ? html `<div part="counts" class="kv">
-            ${kv('Shown inside', html `<mosaica-count part="count-served" .count=${r.served} .stale=${stale} figure="shown"></mosaica-count>`)}
-            ${kv(r.shape.outside ? 'Matched outside' : 'Matched inside', html `<mosaica-count part="count-matched" .masked=${r.matched} .stale=${stale}></mosaica-count>`)}
-            ${r.visible ? kv(r.shape.outside ? 'Visible outside' : 'Visible inside', html `<mosaica-count part="count-visible" .masked=${r.visible} .stale=${stale}></mosaica-count>`) : nothing}
-          </div>`
-                : nothing;
+        actionFocus = (__runInitializers(this, _quiet_extraInitializers), new ActionFocus());
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            this.actionFocus.note(this.renderRoot);
+        }
+        updated() {
+            this.actionFocus.keep(this.renderRoot.querySelector('[part="state"]'));
+        }
+        /**
+         * The state and its line for a region: what the server said of its count, or how the count
+         * stands. Once it is counted, `verdict` says whether the counts are exact for the shape.
+         */
+        stateOfRegion(r, status) {
             // A server that cannot be reached, did not answer or is too busy is named as the status strip
             // names it, since nothing about the selection was refused.
             const unreachable = stateOf(status) === 'retrying' && status?.unreachable === true;
             const unanswered = (r.status === 'refused' && isUnanswered(r.refusal)) || stateOf(status) === 'unanswered';
+            if (r.status !== 'shown' && (unreachable || unanswered)) {
+                const state = unreachable ? 'retrying' : 'unanswered';
+                return { state, line: stateLine(state, status) };
+            }
             // Busy only where the selection's own count was shed, so the code shown is its own.
-            const busy = r.status === 'refused' && isBusy(r.refusal);
-            const stateRegion = r.status !== 'shown' && (unreachable || unanswered)
-                ? renderState(unreachable ? 'retrying' : 'unanswered', status)
-                : busy && status
-                    ? renderState('busy', { ...status, refusal: r.refusal }, { onRetry: () => this.resolvedStore?.refresh() })
-                    : r.status === 'loading'
-                        ? html `<span part="state" data-state="loading"><span class="dot quiet"></span>Counting<span class="skel" aria-hidden="true"></span></span>`
-                        : r.status === 'refused'
-                            ? refusedState('Selection refused', r.refusal?.code, null, reasonOf(r.refusal))
-                            : html `<span part="state" data-state=${state} title=${r.verdict === null ? 'Not counted yet' : r.verdict.exact ? 'Exact for the shape' : 'Approximate: counted over cells around the shape'}>${stale ? html `<span class="dot warn"></span>Data updated` : nothing}</span>`;
-            const ids = Array.from(r.held.ids, idString);
-            const waiting = (label, reason) => html `<button part="action" class="btn off" type="button" disabled title=${reason}>${label}</button>`;
-            return html `<div class="panel">${heading(r.shape.outside ? `outside ${r.shape.kind}` : r.shape.kind)}${stateRegion}${counts}
-      ${ids.length > 0
-                ? html `<div part="label" class="xs muted items-label">Shown items</div>
-          <ul part="items" class="list" aria-label="held marks inside the selection">
-            ${ids.map((id) => html `<li part="item" class="item" tabindex="0" role="button"
-                  @click=${() => void this.resolvedStore?.pick(BigInt(id))}
-                  @keydown=${(e) => {
-                    if (e.key === 'Enter' || e.key === ' ')
-                        void this.resolvedStore?.pick(BigInt(id));
-                }}><span class="name">${id}</span></li>`)}
+            if (r.status === 'refused' && isBusy(r.refusal) && status)
+                return { state: 'busy', line: stateLine('busy', { ...status, refusal: r.refusal }, { onRetry: () => this.resolvedStore?.refresh() }) };
+            // Counting until the query has finished loading. The figures a frame gives first are an
+            // estimate, shown below as they stand with no line above them; the line goes on saying
+            // Counting, undrawn, from the same element, so the counts that follow are said once.
+            const estimate = r.status === 'shown' && status?.querying === true;
+            const counting = html `<span class=${estimate ? 'sr-only' : nothing}>Counting</span>`;
+            if (r.status === 'loading')
+                return { state: 'loading', line: { dot: 'dot quiet', words: counting, action: nothing } };
+            if (r.status === 'refused')
+                return { state: 'refused', line: refusedLine('Selection refused', r.refusal?.code, null, reasonOf(r.refusal)) };
+            const verdict = r.verdict === null ? 'Not counted yet' : r.verdict.exact ? 'Exact for the shape' : 'Approximate: counted over cells around the shape';
+            if (status?.stale)
+                return { state: 'stale', line: { dot: 'dot warn', words: 'Data updated', action: nothing }, verdict };
+            if (estimate)
+                return { state: 'shown', line: { dot: null, words: counting, action: nothing }, verdict };
+            // The counts in words and whether they are exact for the shape: heard as they arrive and not
+            // drawn, since the figures are below and the verdict is the line's tooltip.
+            const side = r.shape.outside ? 'outside' : 'inside';
+            const counted = `${formatMasked(r.matched)} matched ${side}${r.visible ? `, ${formatMasked(r.visible)} visible ${side}` : ''}.`;
+            return { state: 'shown', line: { dot: null, words: html `<span class="sr-only">${this.quiet ? nothing : counted} ${verdict}</span>`, action: nothing }, verdict };
+        }
+        render() {
+            const r = this.shown;
+            const status = this.resolvedStore?.get('status') ?? null;
+            const stale = status?.stale ?? false;
+            const { state, line, verdict } = r ? this.stateOfRegion(r, status) : { state: 'detached', line: stateLine('detached', null) };
+            const pair = (label, count) => html `<dt class="k">${label}</dt><dd class="v">${count}</dd>`;
+            const counts = r?.status === 'shown'
+                ? html `<dl part="counts" class="kv">
+            ${pair('Shown inside', html `<mosaica-count part="count-served" .count=${r.served} .stale=${stale} figure="shown"></mosaica-count>`)}
+            ${pair(r.shape.outside ? 'Matched outside' : 'Matched inside', html `<mosaica-count part="count-matched" .masked=${r.matched} .stale=${stale}></mosaica-count>`)}
+            ${r.visible ? pair(r.shape.outside ? 'Visible outside' : 'Visible inside', html `<mosaica-count part="count-visible" .masked=${r.visible} .stale=${stale}></mosaica-count>`) : nothing}
+          </dl>`
+                : nothing;
+            const ids = r ? Array.from(r.held.ids, idString) : [];
+            const unavailable = 'Not available yet';
+            const waiting = (label) => html `<button part="action" class="btn off" type="button" disabled title=${unavailable} aria-describedby="unavailable">${label}</button>`;
+            // One template whether or not there is a region, so the live element inside the state line is
+            // there before its words are. The state's button sits beside it, and the line takes the focus
+            // when the button goes.
+            return html `<div class="panel">
+      <h2 part="title">Selection <span class="summary">${r ? (r.shape.outside ? `outside ${r.shape.kind}` : r.shape.kind) : nothing}</span></h2>
+      <span part="state" data-state=${state} tabindex="-1" title=${verdict ?? nothing}>${liveLine(line, this.quiet ? UNSAID : null, state === 'loading' ? html `<span class="skel" aria-hidden="true"></span>` : nothing)}</span>
+      ${counts}
+      ${r && ids.length > 0
+                ? html `<div part="label" id="items-label" class="xs muted items-label">Shown items</div>
+          <ul part="items" class="list" aria-labelledby="items-label">
+            ${ids.map((id) => html `<li part="item" class="item"><button type="button" @click=${() => void this.resolvedStore?.pick(BigInt(id))}>${id}</button></li>`)}
             ${r.held.count > ids.length ? html `<li class="muted sm">${(r.held.count - ids.length).toLocaleString('en-GB')} more not listed</li>` : nothing}
           </ul>`
                 : nothing}
-      <div part="actions">
-        <button part="action" class="btn" type="button" @click=${() => {
-                this.resolvedStore?.select(null);
-                emit(this, 'mosaica-selectchange', { shape: null });
-            }}>${icon('close', 13)}Clear</button>
-        <button part="action" class="btn" type="button" title=${r.shape.outside ? 'Filter to the inside of the shape' : 'Filter to the outside of the shape'} @click=${() => {
-                const next = { ...r.shape, outside: !r.shape.outside };
-                this.resolvedStore?.select(next);
-                emit(this, 'mosaica-selectchange', { shape: shapeDetail(next), status: 'loading' });
-            }}>${icon(r.shape.outside ? 'filter' : 'outside', 13)}${r.shape.outside ? 'Inside' : 'Outside'}</button>
-        ${waiting('Export', 'Not available yet')}
-        ${waiting('Save as artifact', 'Not available yet')}
-      </div>
+      ${r
+                ? html `<div part="actions">
+            <button part="action" class="btn" type="button" @click=${() => {
+                    this.resolvedStore?.select(null);
+                    emit(this, 'mosaica-selectchange', { shape: null });
+                }}>${icon('close', 13)}Clear</button>
+            <button part="action" class="btn" type="button" title=${r.shape.outside ? 'Filter to the inside of the shape' : 'Filter to the outside of the shape'} @click=${() => {
+                    const next = { ...r.shape, outside: !r.shape.outside };
+                    this.resolvedStore?.select(next);
+                    emit(this, 'mosaica-selectchange', { shape: shapeDetail(next), status: 'loading' });
+                }}>${icon(r.shape.outside ? 'filter' : 'outside', 13)}${r.shape.outside ? 'Inside' : 'Outside'}</button>
+            ${waiting('Export')}${waiting('Save as artifact')}
+            <span id="unavailable" class="sr-only">${unavailable}</span>
+          </div>`
+                : nothing}
     </div>`;
         }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, _region_extraInitializers);
-        }
     };
 })();
 export { MosaicaSelection };

package/dist/states.d.ts

@@ -47,6 +47,51 @@ export declare function refusalText(words: string, code: string | null | undefin
  * server's, such as an error from a request that reached no server.
  */
 export declare function reasonOf(refusal: Refusal | null | undefined): string | null;
+/**
+ * What a state's line is made of: the class of the dot before its words, the words, and the button
+ * the state offers. An element whose state is a live region puts the words inside it and the
+ * button beside it, so the button's name is not read out as part of the state.
+ */
+export type StateLine = {
+    dot: string | null;
+    words: TemplateResult | string | typeof nothing;
+    action: TemplateResult | typeof nothing;
+    /** The dot's tooltip, for a line whose words are not drawn. */
+    title?: string;
+};
+/**
+ * The refused state's line: its words with the refusal's code, the server's reason on a line under
+ * them where `reason` is given, and Retry where `onRetry` is given.
+ */
+export declare function refusedLine(words: string, code: string | null | undefined, onRetry?: (() => void) | null, reason?: string | null): StateLine;
+/** The line each state needs; `detached` and `shown` need none. */
+export declare function stateLine(state: PanelState, status: StatusProjection | null | undefined, actions?: StateActions): StateLine;
+/**
+ * A line for an element that announces its state: the dot, the words in a `role="status"` element,
+ * `after`, and the line's button beside them. An element renders this in the same place in every
+ * state, so the live element stays and each change of its words is announced. With `unsaid`, the
+ * words sit beside the live element instead, read and not announced, and the live element holds
+ * `unsaid.heard`, undrawn.
+ */
+export declare function liveLine(line: StateLine, unsaid?: {
+    heard: unknown;
+} | null, after?: unknown): TemplateResult;
+/** What {@link liveLine} takes for words that are shown and never announced. */
+export declare const UNSAID: {
+    heard: symbol;
+};
+/**
+ * Whether the view's emptiness is a query's answer, which an element announces, or where a pan
+ * went, which it does not. An element calls {@link note} once for each update.
+ */
+export declare class EmptyAnswer {
+    private wasQuerying;
+    private answered;
+    /** Whether `state` is `empty` and a query ended in it. It stays so until the view is no longer empty. */
+    note(state: PanelState, querying: boolean): boolean;
+}
+/** The element with the focus in `doc`, looked for through the shadow roots that hold it. */
+export declare function focusedElement(doc: Document): Element | null;
 /**
  * The refused state: its dot, its words with the refusal's code, the server's reason on a line
  * under them where `reason` is given, and Retry where `onRetry` is given.
@@ -57,6 +102,33 @@ export declare function refusedState(words: string, code: string | null | undefi
  * state needs, such as a skeleton while loading or the refresh control when stale.
  */
 export declare function renderState(state: PanelState, status: StatusProjection | null | undefined, actions?: StateActions): TemplateResult | typeof nothing;
+/**
+ * Where focus goes when a state's button leaves with its state. An element calls {@link note} from
+ * `willUpdate` and {@link keep} from `updated`, naming the element that takes the focus.
+ */
+export declare class ActionFocus {
+    private held;
+    /** Remember the button with focus in a state line inside `root`, if there is one. */
+    note(root: DocumentFragment | HTMLElement | null): void;
+    /** Focus `to` if the remembered button has left the page. */
+    keep(to: HTMLElement | null): void;
+}
+/**
+ * Whether a query has run long enough to name. An element calls {@link track} from `updated` with
+ * whether its query is running, reads {@link named} when it renders, and is asked to update when
+ * the query has run for {@link QUERY_NAMED_AFTER_MS}.
+ */
+export declare class NamedQuery {
+    private readonly host;
+    named: boolean;
+    private timer;
+    constructor(host: {
+        requestUpdate(): void;
+    });
+    track(running: boolean): void;
+    /** Forget the wait, as an element leaving the page does. */
+    stop(): void;
+}
 /** The words for a viewer who can see no item in the view at all, where `empty` would read as "pan elsewhere". */
 export declare const NOTHING_VISIBLE = "Nothing visible to you";
 /**

package/dist/states.js

@@ -73,45 +73,154 @@ function retryButton(onRetry) {
     return onRetry ? html `<button part="retry" class="btn small" type="button" @click=${onRetry}>Retry</button>` : nothing;
 }
 /**
- * The refused state: its dot, its words with the refusal's code, the server's reason on a line
- * under them where `reason` is given, and Retry where `onRetry` is given.
+ * The refused state's line: its words with the refusal's code, the server's reason on a line under
+ * them where `reason` is given, and Retry where `onRetry` is given.
  */
-export function refusedState(words, code, onRetry, reason) {
+export function refusedLine(words, code, onRetry, reason) {
     const said = reason ? html `<span class="said">${refusalText(words, code)}<span part="reason">${reason}</span></span>` : refusalText(words, code);
-    return html `<span part="state" data-state="refused"><span class="dot refuse"></span>${said}${retryButton(onRetry)}</span>`;
+    return { dot: 'dot refuse', words: said, action: retryButton(onRetry) };
 }
-/**
- * The state region every panel renders: a `part="state"` carrying `data-state`, and the line the
- * state needs, such as a skeleton while loading or the refresh control when stale.
- */
-export function renderState(state, status, actions = {}) {
+/** The line each state needs; `detached` and `shown` need none. */
+export function stateLine(state, status, actions = {}) {
     const refusal = status?.refusal ?? null;
+    const words = stateWord(state, status);
     switch (state) {
+        // Empty: "empty" and "refused" are answers, and a detached panel has none.
         case 'detached':
-            // Empty: "empty" and "refused" are answers, and a detached panel has none.
-            return html `<span part="state" data-state="detached"></span>`;
-        case 'loading': {
-            const words = actions.first && status?.sessionWarm ? 'Loading' : stateWord(state, status);
-            return html `<span part="state" data-state="loading"><span class="dot quiet"></span>${words}${status && !status.sessionWarm ? nothing : html `<span class="skel" aria-hidden="true"></span>`}</span>`;
-        }
+        case 'shown':
+            return { dot: null, words: nothing, action: nothing };
+        case 'loading':
+            return { dot: 'dot quiet', words: actions.first && status?.sessionWarm ? 'Loading' : words, action: nothing };
         case 'retrying':
-            return html `<span part="state" data-state="retrying"><span class="dot warn"></span>${stateWord(state, status)}</span>`;
+            return { dot: 'dot warn', words, action: nothing };
         case 'unanswered':
-            return html `<span part="state" data-state="unanswered"><span class="dot warn"></span>${stateWord(state, status)}${retryButton(actions.onRetry)}</span>`;
+            return { dot: 'dot warn', words, action: retryButton(actions.onRetry) };
         case 'busy':
-            return html `<span part="state" data-state="busy"><span class="dot warn"></span>${refusalText(stateWord(state, status), refusal?.code)}${retryButton(actions.onRetry)}</span>`;
-        case 'shown':
-            return html `<span part="state" data-state="shown"></span>`;
+            return { dot: 'dot warn', words: refusalText(words, refusal?.code), action: retryButton(actions.onRetry) };
         case 'empty':
-            return html `<span part="state" data-state="empty">${stateWord(state, status)}</span>`;
+            return { dot: null, words, action: nothing };
         case 'refused':
-            return refusedState(stateWord(state, status), refusal?.code, actions.onRetry, reasonOf(refusal));
+            return refusedLine(words, refusal?.code, actions.onRetry, reasonOf(refusal));
         case 'expired':
-            return html `<span part="state" data-state="expired"><span class="dot refuse"></span>${stateWord(state, status)}${actions.onReauthorise
-                ? html `<button part="reauthorise" class="btn small" type="button" @click=${actions.onReauthorise}>Sign in</button>`
-                : nothing}</span>`;
+            return {
+                dot: 'dot refuse',
+                words,
+                action: actions.onReauthorise ? html `<button part="reauthorise" class="btn small" type="button" @click=${actions.onReauthorise}>Sign in</button>` : nothing
+            };
         case 'stale':
-            return html `<span part="state" data-state="stale"><span class="dot warn"></span>${stateWord(state, status)}<button part="refresh" class="btn small" type="button" @click=${actions.onRefresh ?? undefined}>Refresh</button></span>`;
+            return { dot: 'dot warn', words, action: html `<button part="refresh" class="btn small" type="button" @click=${actions.onRefresh ?? undefined}>Refresh</button>` };
+    }
+}
+/** The dot before a line's words. */
+function stateDot(line) {
+    return line.dot ? html `<span class=${line.dot} title=${line.title ?? nothing}></span>` : nothing;
+}
+/**
+ * A line for an element that announces its state: the dot, the words in a `role="status"` element,
+ * `after`, and the line's button beside them. An element renders this in the same place in every
+ * state, so the live element stays and each change of its words is announced. With `unsaid`, the
+ * words sit beside the live element instead, read and not announced, and the live element holds
+ * `unsaid.heard`, undrawn.
+ */
+export function liveLine(line, unsaid = null, after = nothing) {
+    return html `${stateDot(line)}${unsaid ? line.words : nothing}<span class=${unsaid ? 'sr-only' : nothing} role="status">${unsaid ? unsaid.heard : line.words}</span>${after}${line.action}`;
+}
+/** What {@link liveLine} takes for words that are shown and never announced. */
+export const UNSAID = { heard: nothing };
+/**
+ * Whether the view's emptiness is a query's answer, which an element announces, or where a pan
+ * went, which it does not. An element calls {@link note} once for each update.
+ */
+export class EmptyAnswer {
+    wasQuerying = false;
+    answered = false;
+    /** Whether `state` is `empty` and a query ended in it. It stays so until the view is no longer empty. */
+    note(state, querying) {
+        if (state !== 'empty')
+            this.answered = false;
+        else if (this.wasQuerying && !querying)
+            this.answered = true;
+        this.wasQuerying = querying;
+        return this.answered;
+    }
+}
+/** The element with the focus in `doc`, looked for through the shadow roots that hold it. */
+export function focusedElement(doc) {
+    let focused = doc.activeElement;
+    while (focused?.shadowRoot?.activeElement)
+        focused = focused.shadowRoot.activeElement;
+    return focused;
+}
+/** A line as a `part="state"` carrying `data-state`, with `after` between its words and its button. */
+function stateRegion(state, line, after = nothing) {
+    return html `<span part="state" data-state=${state}>${stateDot(line)}${line.words}${after}${line.action}</span>`;
+}
+/**
+ * The refused state: its dot, its words with the refusal's code, the server's reason on a line
+ * under them where `reason` is given, and Retry where `onRetry` is given.
+ */
+export function refusedState(words, code, onRetry, reason) {
+    return stateRegion('refused', refusedLine(words, code, onRetry, reason));
+}
+/**
+ * The state region every panel renders: a `part="state"` carrying `data-state`, and the line the
+ * state needs, such as a skeleton while loading or the refresh control when stale.
+ */
+export function renderState(state, status, actions = {}) {
+    const skeleton = state === 'loading' && !(status && !status.sessionWarm) ? html `<span class="skel" aria-hidden="true"></span>` : nothing;
+    return stateRegion(state, stateLine(state, status, actions), skeleton);
+}
+/**
+ * Where focus goes when a state's button leaves with its state. An element calls {@link note} from
+ * `willUpdate` and {@link keep} from `updated`, naming the element that takes the focus.
+ */
+export class ActionFocus {
+    held = null;
+    /** Remember the button with focus in a state line inside `root`, if there is one. */
+    note(root) {
+        const focused = root ? focusedElement(root.ownerDocument) : null;
+        this.held = focused instanceof HTMLButtonElement && root.contains(focused) && focused.closest('[part~="state"]') ? focused : null;
+    }
+    /** Focus `to` if the remembered button has left the page. */
+    keep(to) {
+        if (this.held && !this.held.isConnected)
+            to?.focus();
+        this.held = null;
+    }
+}
+/** How long a query has run before an element names it, so one answered at once does not flicker it. */
+const QUERY_NAMED_AFTER_MS = 250;
+/**
+ * Whether a query has run long enough to name. An element calls {@link track} from `updated` with
+ * whether its query is running, reads {@link named} when it renders, and is asked to update when
+ * the query has run for {@link QUERY_NAMED_AFTER_MS}.
+ */
+export class NamedQuery {
+    host;
+    named = false;
+    timer = null;
+    constructor(host) {
+        this.host = host;
+    }
+    track(running) {
+        if (!running) {
+            this.stop();
+            this.named = false;
+            return;
+        }
+        if (this.named || this.timer !== null)
+            return;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            this.named = true;
+            this.host.requestUpdate();
+        }, QUERY_NAMED_AFTER_MS);
+    }
+    /** Forget the wait, as an element leaving the page does. */
+    stop() {
+        if (this.timer !== null)
+            clearTimeout(this.timer);
+        this.timer = null;
     }
 }
 /** The words for a viewer who can see no item in the view at all, where `empty` would read as "pan elsewhere". */