@mosaicajs/components 0.3.0 → 0.4.0

package/dist/status.d.ts

@@ -1,4 +1,4 @@
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { MosaicaElement } from './base.js';
 import './count.js';
 /**
@@ -10,25 +10,50 @@ import './count.js';
  *
  * While the view is up to date, the first cell is a dot alone. When something goes wrong, the cell
  * names the state and offers a button if the viewer can act, such as Retry when the server is busy.
- * Sign in appears when the session expires only if you have set `reauthorise`.
+ * Sign in appears when the session expires only if you have set `reauthorise`. If the viewer may see
+ * no item in the view at all, the cell says so.
  *
- * Screen readers announce a refusal or an expiry, because the state cell is an `aria-live` region.
- * The counts sit outside it, so they are not read out every time the map pans.
+ * Where the strip is short of room, its cells wrap onto further lines.
+ *
+ * After a change of filters, highlight or selection, the cell reads Running query once the answer
+ * has taken more than a quarter of a second, until the map, the layers and the counts have all
+ * loaded. Its Cancel button goes back to the filters, highlight and selection that last finished
+ * loading.
+ *
+ * Screen readers announce the states the cell names in words, because the words are a live region.
+ * A pan announces nothing: up to date and updating are read but not announced, the counts sit
+ * outside the region, and Nothing in view is announced only as the answer to a change of filters,
+ * highlight or selection, not where a pan went. After such a change the region announces the counts
+ * once they have loaded, such as `3,923 of 50,000 match`, or that the view is up to date where there
+ * are no counts to say. After any state it announced, it announces that the view is up to date
+ * again. A state's button sits outside the region. When the button goes with its state while it has
+ * the focus, the state cell takes the focus. With `quiet`, the strip shows the same and announces
+ * nothing.
  *
  * @summary A status line showing whether the map is up to date and how many items it shows.
  * @tagname mosaica-status
  * @category Elements
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-statechange']>} mosaica-statechange - The panel
  *   state changed, including on the first render.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-filterchange']>} mosaica-filterchange - Cancel
+ *   went back to other filters or another highlight, once for each that changed, with `column` null.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-clausechange']>} mosaica-clausechange - Cancel
+ *   put back or took away a `member_of` clause, once for each.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-selectchange']>} mosaica-selectchange - Cancel
+ *   went back to another selected region, or to none, and once with `view` for each other view
+ *   whose held region it put back or took away.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-expired']>} mosaica-expired - The session expired.
  *   Fires once each time.
- * @csspart strip - The one-line strip.
+ * @csspart strip - The strip of cells.
  * @csspart state - The state's dot and words, with `data-state` set to the panel state.
  * @csspart refusal - The words "View refused", or "Server busy", with `data-code` set to the
  *   refusal's code.
  * @csspart reason - The server's reason for a refusal, under "View refused".
  * @csspart refresh - The Refresh button, shown when the data has changed.
  * @csspart retry - The Retry button, after a refusal, no answer or a busy server.
+ * @csspart cancel - The Cancel button, while a query runs.
+ * @csspart spinner - The spinner beside the words Running query. The state part carries
+ *   `data-querying` while it shows.
  * @csspart reauthorise - The Sign in button, shown on expiry if `reauthorise` is set.
  * @csspart count-shown - The `<mosaica-count>` of marks shown.
  * @csspart count-matched - The `<mosaica-count>` of items the filters match.
@@ -46,11 +71,44 @@ export declare class MosaicaStatus extends MosaicaElement {
     accessor compact: boolean;
     /** A function the Sign in button calls when the session has expired. Without it there is no Sign in button. */
     accessor reauthorise: (() => void) | null;
+    /**
+     * Announces nothing: every state and result is still shown, and none is put in a live region. Set
+     * it when another element on the page says the same things.
+     */
+    accessor quiet: boolean;
+    private readonly query;
+    private readonly actionFocus;
+    private readonly emptyAnswer;
     private lastState;
     private expiryFired;
+    /** What the strip shows now, decided before each render: `bare` is a dot alone, and `unsaid` what {@link liveLine} takes. */
+    private shown;
+    /** What the live region says while the strip shows a dot alone: a query's result, or that the view is back up to date. */
+    private heard;
+    /** The dot-alone state `heard` was last decided under. */
+    private bareState;
+    private wasQuerying;
+    /** Whether a query has finished and its result is still to be said. */
+    private resultDue;
+    /** Whether the strip has left a state it announced and has not yet said the view is up to date again. */
+    private recoveryDue;
     private get status();
     private get view();
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * Decide what the live region says while the strip shows a dot alone. A pan moves between up to
+     * date and updating and says nothing. A query that finishes says its result once the counts are
+     * in, or that the view is up to date where there are no counts to say, and a return from a
+     * state the strip announced says the view is up to date. Either is taken away at the next
+     * change, so that it is said again when it next holds.
+     */
+    private hear;
+    /** The counts as the cells show them, in full figures, or `null` where there are none to show. */
+    private result;
     protected updated(): void;
+    /** Cancel the query, and tell the page what it went back to, as the controls that set those do. */
+    private cancel;
     render(): TemplateResult | typeof nothing;
     /**
      * The count cells: current in the shown state, greyed out while a new answer is awaited or the

package/dist/status.js

@@ -34,10 +34,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { NO_COUNT, NO_MASKED } from '@mosaicajs/client';
-import { MosaicaElement, emit } from './base.js';
+import { NO_COUNT, NO_MASKED, formatMasked } from '@mosaicajs/client';
+import { MosaicaElement, emit, idString, shapeDetail } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
-import { NOTHING_VISIBLE, renderState, seesNothing, showsContent, stateOf } from './states.js';
+import { ActionFocus, EmptyAnswer, NOTHING_VISIBLE, NamedQuery, UNSAID, liveLine, seesNothing, showsContent, stateLine, stateOf, stateWord } from './states.js';
 import { chrome, tokens } from './tokens.js';
 import './count.js';
 /**
@@ -49,25 +49,50 @@ import './count.js';
  *
  * While the view is up to date, the first cell is a dot alone. When something goes wrong, the cell
  * names the state and offers a button if the viewer can act, such as Retry when the server is busy.
- * Sign in appears when the session expires only if you have set `reauthorise`.
+ * Sign in appears when the session expires only if you have set `reauthorise`. If the viewer may see
+ * no item in the view at all, the cell says so.
  *
- * Screen readers announce a refusal or an expiry, because the state cell is an `aria-live` region.
- * The counts sit outside it, so they are not read out every time the map pans.
+ * Where the strip is short of room, its cells wrap onto further lines.
+ *
+ * After a change of filters, highlight or selection, the cell reads Running query once the answer
+ * has taken more than a quarter of a second, until the map, the layers and the counts have all
+ * loaded. Its Cancel button goes back to the filters, highlight and selection that last finished
+ * loading.
+ *
+ * Screen readers announce the states the cell names in words, because the words are a live region.
+ * A pan announces nothing: up to date and updating are read but not announced, the counts sit
+ * outside the region, and Nothing in view is announced only as the answer to a change of filters,
+ * highlight or selection, not where a pan went. After such a change the region announces the counts
+ * once they have loaded, such as `3,923 of 50,000 match`, or that the view is up to date where there
+ * are no counts to say. After any state it announced, it announces that the view is up to date
+ * again. A state's button sits outside the region. When the button goes with its state while it has
+ * the focus, the state cell takes the focus. With `quiet`, the strip shows the same and announces
+ * nothing.
  *
  * @summary A status line showing whether the map is up to date and how many items it shows.
  * @tagname mosaica-status
  * @category Elements
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-statechange']>} mosaica-statechange - The panel
  *   state changed, including on the first render.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-filterchange']>} mosaica-filterchange - Cancel
+ *   went back to other filters or another highlight, once for each that changed, with `column` null.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-clausechange']>} mosaica-clausechange - Cancel
+ *   put back or took away a `member_of` clause, once for each.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-selectchange']>} mosaica-selectchange - Cancel
+ *   went back to another selected region, or to none, and once with `view` for each other view
+ *   whose held region it put back or took away.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-expired']>} mosaica-expired - The session expired.
  *   Fires once each time.
- * @csspart strip - The one-line strip.
+ * @csspart strip - The strip of cells.
  * @csspart state - The state's dot and words, with `data-state` set to the panel state.
  * @csspart refusal - The words "View refused", or "Server busy", with `data-code` set to the
  *   refusal's code.
  * @csspart reason - The server's reason for a refusal, under "View refused".
  * @csspart refresh - The Refresh button, shown when the data has changed.
  * @csspart retry - The Retry button, after a refusal, no answer or a busy server.
+ * @csspart cancel - The Cancel button, while a query runs.
+ * @csspart spinner - The spinner beside the words Running query. The state part carries
+ *   `data-querying` while it shows.
  * @csspart reauthorise - The Sign in button, shown on expiry if `reauthorise` is set.
  * @csspart count-shown - The `<mosaica-count>` of marks shown.
  * @csspart count-matched - The `<mosaica-count>` of items the filters match.
@@ -88,15 +113,20 @@ let MosaicaStatus = (() => {
     let _reauthorise_decorators;
     let _reauthorise_initializers = [];
     let _reauthorise_extraInitializers = [];
+    let _quiet_decorators;
+    let _quiet_initializers = [];
+    let _quiet_extraInitializers = [];
     return class MosaicaStatus extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _expanded_decorators = [property({ type: Boolean })];
             _compact_decorators = [property({ type: Boolean, reflect: true })];
             _reauthorise_decorators = [property({ attribute: false })];
+            _quiet_decorators = [property({ type: Boolean, reflect: true })];
             __esDecorate(this, null, _expanded_decorators, { kind: "accessor", name: "expanded", static: false, private: false, access: { has: obj => "expanded" in obj, get: obj => obj.expanded, set: (obj, value) => { obj.expanded = value; } }, metadata: _metadata }, _expanded_initializers, _expanded_extraInitializers);
             __esDecorate(this, null, _compact_decorators, { kind: "accessor", name: "compact", static: false, private: false, access: { has: obj => "compact" in obj, get: obj => obj.compact, set: (obj, value) => { obj.compact = value; } }, metadata: _metadata }, _compact_initializers, _compact_extraInitializers);
             __esDecorate(this, null, _reauthorise_decorators, { kind: "accessor", name: "reauthorise", static: false, private: false, access: { has: obj => "reauthorise" in obj, get: obj => obj.reauthorise, set: (obj, value) => { obj.reauthorise = value; } }, metadata: _metadata }, _reauthorise_initializers, _reauthorise_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 = [
@@ -108,8 +138,11 @@ let MosaicaStatus = (() => {
         max-width: 100%;
         vertical-align: top;
       }
+      /* The cells wrap onto further lines where the strip is short of room, and a cell wider than
+         the strip wraps its own words. */
       [part='strip'] {
         display: inline-flex;
+        flex-wrap: wrap;
         align-items: stretch;
         max-width: 100%;
         min-height: 32px;
@@ -121,17 +154,19 @@ let MosaicaStatus = (() => {
         font-size: 12px;
         color: var(--_mosaica-ink-2);
         font-variant-numeric: tabular-nums;
-        white-space: nowrap;
       }
       [part='strip'][data-state='detached'] {
         display: none;
       }
       .cell {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        gap: 4px;
+        gap: 0 4px;
+        min-height: 30px;
         padding: 7px 12px;
-        flex: none;
+        flex: 0 1 auto;
+        min-width: 0;
       }
       .cell mosaica-count {
         font-size: inherit;
@@ -139,8 +174,11 @@ let MosaicaStatus = (() => {
       .cell + .cell {
         border-left: 1px solid var(--_mosaica-line-2);
       }
+      /* Figures that wait for an answer, or stand from before a refusal, are all drawn in the
+         faint ink, which keeps a text's contrast. The state cell says why, by its dot's shape
+         or in words. */
       .cell.dim {
-        opacity: 0.4;
+        color: var(--_mosaica-ink-3);
       }
       .cell.state {
         padding: 0 5px 0 12px;
@@ -148,8 +186,12 @@ let MosaicaStatus = (() => {
       .cell.state.bare {
         padding: 0 12px;
       }
+      .cell.state:focus-visible {
+        outline-offset: -2px;
+      }
       [part='state'] {
         gap: 7px;
+        min-width: 0;
         color: inherit;
       }
       [part='state'] .skel {
@@ -161,6 +203,7 @@ let MosaicaStatus = (() => {
       [part='state']:not(:has(.btn)) {
         padding-right: 7px;
       }
+
       .cell mosaica-count::part(count) {
         font-weight: 600;
       }
@@ -179,6 +222,10 @@ let MosaicaStatus = (() => {
       .cell mosaica-count.lit::part(count) {
         color: var(--_mosaica-highlight);
       }
+      .cell.dim mosaica-count::part(count),
+      .cell.dim mosaica-count::part(label) {
+        color: var(--_mosaica-ink-3);
+      }
       .cell mosaica-count::part(label) {
         margin-left: 0.3em;
       }
@@ -198,6 +245,10 @@ let MosaicaStatus = (() => {
         box-shadow: var(--_mosaica-shadow);
         font-size: 12px;
       }
+      [part='card'] dl,
+      [part='card'] dd {
+        margin: 0;
+      }
     `
         ];
         #expanded_accessor_storage = __runInitializers(this, _expanded_initializers, false);
@@ -212,15 +263,122 @@ let MosaicaStatus = (() => {
         /** A function the Sign in button calls when the session has expired. Without it there is no Sign in button. */
         get reauthorise() { return this.#reauthorise_accessor_storage; }
         set reauthorise(value) { this.#reauthorise_accessor_storage = value; }
-        lastState = (__runInitializers(this, _reauthorise_extraInitializers), null);
+        #quiet_accessor_storage = (__runInitializers(this, _reauthorise_extraInitializers), __runInitializers(this, _quiet_initializers, false));
+        /**
+         * Announces nothing: every state and result is 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; }
+        query = (__runInitializers(this, _quiet_extraInitializers), new NamedQuery(this));
+        actionFocus = new ActionFocus();
+        emptyAnswer = new EmptyAnswer();
+        lastState = null;
         expiryFired = false;
+        /** What the strip shows now, decided before each render: `bare` is a dot alone, and `unsaid` what {@link liveLine} takes. */
+        shown = { state: 'detached', running: false, bare: false, line: stateLine('detached', null), unsaid: null };
+        /** What the live region says while the strip shows a dot alone: a query's result, or that the view is back up to date. */
+        heard = '';
+        /** The dot-alone state `heard` was last decided under. */
+        bareState = null;
+        wasQuerying = false;
+        /** Whether a query has finished and its result is still to be said. */
+        resultDue = false;
+        /** Whether the strip has left a state it announced and has not yet said the view is up to date again. */
+        recoveryDue = false;
         get status() {
             return this.resolvedStore?.get('status') ?? null;
         }
         get view() {
             return this.resolvedStore?.get('view') ?? null;
         }
+        disconnectedCallback() {
+            this.query.stop();
+            super.disconnectedCallback();
+        }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            this.actionFocus.note(this.renderRoot);
+            const status = this.status;
+            const state = stateOf(status);
+            const querying = status?.querying === true;
+            const refresh = () => this.resolvedStore?.refresh();
+            const nothingVisible = seesNothing(this.resolvedStore, state);
+            // A query that has run long enough to name. The map may have drawn its answer while the
+            // counts still load, and a refusal, an expiry or a lost server is said in its own words.
+            const running = querying && this.query.named && (state === 'loading' || state === 'shown' || state === 'empty' || state === 'stale');
+            // Up to date and updating, the two states a pan moves between, are each a dot alone, so the
+            // strip keeps its width through a gesture; every other state names itself beside its dot.
+            const bare = !running && !nothingVisible && (state === 'shown' || (state === 'loading' && status?.sessionWarm === true));
+            // Nothing in view is announced as a query's answer. Where a pan went, it is shown and not said.
+            const answered = this.emptyAnswer.note(state, querying);
+            const panned = state === 'empty' && !running && !nothingVisible && !answered;
+            this.hear(state, bare, panned);
+            const words = stateWord(state, status);
+            const line = running
+                ? { dot: null, words: 'Running query', action: html `<button part="cancel" class="btn small" type="button" @click=${() => this.cancel()}>Cancel</button>` }
+                : bare
+                    ? // Read and not drawn, and left out while the live region is saying the same words.
+                        { dot: state === 'shown' ? 'dot' : 'dot quiet', title: words, words: this.heard === words && !this.quiet ? nothing : html `<span class="sr-only">${words}</span>`, action: nothing }
+                    : state === 'empty'
+                        ? { dot: 'dot quiet', words: nothingVisible ? NOTHING_VISIBLE : words, action: nothing }
+                        : stateLine(state, status, { onRefresh: refresh, onRetry: refresh, onReauthorise: this.reauthorise });
+            this.shown = { state, running, bare, line, unsaid: this.quiet || panned ? UNSAID : bare ? { heard: this.heard } : null };
+        }
+        /**
+         * Decide what the live region says while the strip shows a dot alone. A pan moves between up to
+         * date and updating and says nothing. A query that finishes says its result once the counts are
+         * in, or that the view is up to date where there are no counts to say, and a return from a
+         * state the strip announced says the view is up to date. Either is taken away at the next
+         * change, so that it is said again when it next holds.
+         */
+        hear(state, bare, panned) {
+            const querying = this.status?.querying === true;
+            if (querying)
+                this.resultDue = false;
+            else if (this.wasQuerying)
+                this.resultDue = true;
+            this.wasQuerying = querying;
+            if (!bare) {
+                // The words shown are the answer. Where a pan went is not announced, so leaving it is not.
+                this.heard = '';
+                this.bareState = null;
+                this.resultDue = false;
+                if (!panned)
+                    this.recoveryDue = state !== 'detached';
+                return;
+            }
+            if (state !== this.bareState || querying)
+                this.heard = '';
+            this.bareState = state;
+            if (state !== 'shown' || querying)
+                return;
+            if (this.resultDue) {
+                // Counts still loading are waited for; refused or absent, the state is said in their place.
+                if (this.view?.inView?.status === 'loading')
+                    return;
+                this.heard = this.result() ?? stateWord(state, this.status);
+            }
+            else if (this.recoveryDue)
+                this.heard = stateWord(state, this.status);
+            this.resultDue = false;
+            this.recoveryDue = false;
+        }
+        /** The counts as the cells show them, in full figures, or `null` where there are none to show. */
+        result() {
+            const v = this.view;
+            const n = v?.inView;
+            if (!v || !n || n.status !== 'shown')
+                return null;
+            const match = `${formatMasked(n.matched)} of ${formatMasked(n.visible)} match`;
+            if (!v.highlighting)
+                return match;
+            const lit = `${formatMasked(n.highlighted)} highlighted of ${formatMasked(n.matched)}`;
+            return this.resolvedStore?.requestFilters() != null ? `${match}, ${lit}` : lit;
+        }
         updated() {
+            this.actionFocus.keep(this.renderRoot.querySelector('.cell.state'));
+            this.query.track(this.status?.querying ?? false);
             const state = stateOf(this.status);
             if (state !== this.lastState) {
                 const from = this.lastState;
@@ -235,29 +393,50 @@ let MosaicaStatus = (() => {
                 this.expiryFired = false;
             }
         }
+        /** Cancel the query, and tell the page what it went back to, as the controls that set those do. */
+        cancel() {
+            const s = this.resolvedStore;
+            if (!s)
+                return;
+            const was = { ...s.get('filters'), shape: s.get('region')?.shape ?? null };
+            s.cancelQuery();
+            const now = s.get('filters');
+            const differ = (a, b) => JSON.stringify(a) !== JSON.stringify(b);
+            if (differ(was.expr, now.expr))
+                emit(this, 'mosaica-filterchange', { column: null, verb: 'filter', expr: now.expr });
+            if (differ(was.highlight, now.highlight))
+                emit(this, 'mosaica-filterchange', { column: null, verb: 'highlight', expr: now.highlight });
+            const keyed = (clauses) => new Map(clauses.map((c) => [`${c.verb} ${c.outside} ${c.artifact} ${c.layer}`, c]));
+            const [before, after] = [keyed(was.members), keyed(now.members)];
+            const told = (c, on) => emit(this, 'mosaica-clausechange', { id: idString(c.artifact), layer: c.layer, outside: c.outside, verb: c.verb, on });
+            for (const [key, clause] of before)
+                if (!after.has(key))
+                    told(clause, false);
+            for (const [key, clause] of after)
+                if (!before.has(key))
+                    told(clause, true);
+            const shape = s.get('region')?.shape ?? null;
+            if (shape !== was.shape)
+                emit(this, 'mosaica-selectchange', { shape: shapeDetail(shape), status: shape ? 'loading' : 'cleared' });
+            const heldIn = (regions) => new Map(regions.map((r) => [r.view, r.shape]));
+            const [heldBefore, heldAfter] = [heldIn(was.regions), heldIn(now.regions)];
+            for (const view of heldBefore.keys())
+                if (!heldAfter.has(view))
+                    emit(this, 'mosaica-selectchange', { shape: null, view, status: 'cleared' });
+            for (const [view, held] of heldAfter)
+                if (heldBefore.get(view) !== held)
+                    emit(this, 'mosaica-selectchange', { shape: shapeDetail(held), view, status: 'loading' });
+        }
         render() {
-            const status = this.status;
-            const state = stateOf(status);
-            const stale = status?.stale ?? false;
+            const { state, running, bare, line, unsaid } = this.shown;
+            const stale = this.status?.stale ?? false;
             const v = this.view;
-            const refresh = () => this.resolvedStore?.refresh();
-            // Up to date and updating, the two states a pan moves between, are each a dot alone, so the
-            // strip keeps its width through a gesture; every other state names itself beside its dot.
-            const bare = (cls, words) => html `<span part="state" data-state=${state}><span class=${cls} role="img" aria-label=${words} title=${words}></span></span>`;
-            // A viewer who can see nothing is told so once, by the map; the strip keeps its dot.
-            const nothingVisible = seesNothing(this.resolvedStore, state);
-            const dotAlone = state === 'shown' || (state === 'loading' && status?.sessionWarm === true) || nothingVisible;
-            const inner = state === 'shown'
-                ? bare('dot', 'Up to date')
-                : nothingVisible
-                    ? bare('dot quiet', NOTHING_VISIBLE)
-                    : dotAlone
-                        ? bare('dot quiet', 'Updating')
-                        : state === 'empty'
-                            ? html `<span part="state" data-state="empty"><span class="dot quiet"></span>Nothing in view</span>`
-                            : renderState(state, status, { onRefresh: refresh, onRetry: refresh, onReauthorise: this.reauthorise });
-            // One live element across every state, so each change of state is announced from it.
-            const first = html `<div class=${`cell state${dotAlone ? ' bare' : ''}`} role="status" aria-live="polite">${inner}</div>`;
+            // One template for every state, so the live element stays and each change of its words is
+            // announced. The state's button sits outside it, and the cell takes the focus when the
+            // button goes.
+            const first = html `<div class=${`cell state${bare ? ' bare' : ''}`} tabindex="-1">
+      <span part="state" data-state=${state} ?data-querying=${running}>${running ? html `<span part="spinner" class="spinner" aria-hidden="true"></span>` : nothing}${liveLine(line, unsaid)}</span>
+    </div>`;
             return html `<div part="strip" data-state=${state}>${first}${this.counts(state, v, stale)}</div>
       ${this.expanded && showsContent(state) && v ? this.card(v, stale) : nothing}`;
         }
@@ -293,14 +472,14 @@ let MosaicaStatus = (() => {
       ${this.compact ? nothing : html `<div class=${cls}><mosaica-count part="count-shown" .count=${{ shown: n.shown, total: n.matched.value, exact: true }} figure="shown" label="shown"></mosaica-count></div>`}`;
         }
         card(v, stale) {
-            const row = (label, value) => html `<div class="k">${label}</div><div class="v">${value}</div>`;
+            const row = (label, value) => html `<dt class="k">${label}</dt><dd class="v">${value}</dd>`;
             const n = v.inView;
-            return html `<div part="card"><div class="kv">
+            return html `<div part="card"><dl class="kv">
       ${row('Shown', html `<mosaica-count .count=${n ? { shown: n.shown, total: n.matched.value, exact: true } : NO_COUNT} .stale=${stale}></mosaica-count>`)}
       ${row('Match the filters', html `<mosaica-count .masked=${n?.matched ?? NO_MASKED} .stale=${stale}></mosaica-count>`)}
       ${v.highlighting ? row('Highlighted', html `<mosaica-count .masked=${n?.highlighted ?? NO_MASKED} .stale=${stale}></mosaica-count>`) : nothing}
       ${row('In this view', html `<mosaica-count .masked=${n?.visible ?? NO_MASKED} .stale=${stale}></mosaica-count>`)}
-    </div></div>`;
+    </dl></div>`;
         }
     };
 })();

package/dist/tokens.d.ts

@@ -19,16 +19,18 @@
  * @cssprop --mosaica-ink - The colour of body text, values and map tools.
  * @cssprop --mosaica-ink-2 - The colour of labels, section headings and secondary text.
  * @cssprop --mosaica-ink-3 - The colour of faint text: placeholders, hints and disabled controls,
- *   and of the dot in the loading states.
+ *   and of the ring in the loading states.
  * @cssprop --mosaica-line - The colour of borders around panels, cards, buttons, chips and
  *   the map toolbar.
  * @cssprop --mosaica-line-2 - The colour of the rules between sections and between the status
  *   strip's cells.
- * @cssprop --mosaica-line-control - The colour of borders around inputs and of a slider's unfilled
- *   track, at 3:1 against the surface.
+ * @cssprop --mosaica-line-control - The colour of borders around inputs, of a slider's unfilled
+ *   track and of a switch's track when it is off, at 3:1 against the surface.
  * @cssprop --mosaica-accent - The colour of the active map tool, primary buttons, badges, checked
- *   boxes and focus rings.
+ *   boxes, a switch that is on, and the bar on a pressed segment and a chosen row.
  * @cssprop --mosaica-accent-ink - The text colour on an accent background.
+ * @cssprop --mosaica-focus - The colour of the focus ring, at 3:1 or more against each surface and
+ *   the map's background.
  * @cssprop --mosaica-highlight - The colour of a highlight chip, a highlighted row's text and its ×.
  * @cssprop --mosaica-highlight-soft - The background of a highlight chip and a highlighted row.
  * @cssprop --mosaica-bar - The colour of a field card's bars for the items in view.
@@ -50,6 +52,8 @@
  * @cssprop --mosaica-space - The gap between the content in the map's corners and the map's edges.
  *   Half of it separates items in one corner.
  * @cssprop --mosaica-density - A multiplier on `--mosaica-space`'s default.
+ * @cssprop --mosaica-long-text - What a title or a name too long for its line does: `nowrap`, the
+ *   default, cuts it with an ellipsis; `normal` wraps it.
  * @cssprop --mosaica-map-height - The map's height.
  */
 export declare const tokens: import("lit").CSSResult;