@mosaicajs/components 0.3.0 → 0.4.0

package/dist/map.js

@@ -35,13 +35,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { Deck, OrthographicView } from '@deck.gl/core';
 import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { MAX_DEPTH, WORLD_SIZE, dataToWorldXY } from '@mosaicajs/client';
+import { MAX_DEPTH, WORLD_SIZE, dataToWorldXY, formatMasked } from '@mosaicajs/client';
 import { assertCompositionMatchesServed, chosenColour, hasValue } from '@mosaicajs/client/internal';
 import { DEFAULT_DENSITY_CELL_PX, DEFAULT_DENSITY_SCALE, DensityCounter, MosaicaLayer, cameraFitting, densityCountAt, frameMatches, resolvePick, viewInputOf } from '@mosaicajs/deck';
-import { DENSITY_COLOUR_TITLES, MarkSlab, artifactOfMark, clusterLayerOf, contourShapes, drawnLevel, densityStops, drawnCells, encodingOf, encodingSignature, hoverAt, maxCount } from '@mosaicajs/deck/internal';
+import { DENSITY_COLOUR_TITLES, MarkSlab, artifactOfMark, clusterLayerOf, colourLayerOf, contourShapes, drawnLevel, drawnLevels, densityStops, drawnCells, encodingOf, encodingSignature, hoverAt, levelsKey, maxCount } from '@mosaicajs/deck/internal';
 import { MosaicaElement, emit, idString, shapeDetail, timestampText } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
-import { NOTHING_VISIBLE, refusedState, renderState, seesNothing, stateOf } from './states.js';
+import { ActionFocus, EmptyAnswer, NOTHING_VISIBLE, UNSAID, liveLine, refusedLine, seesNothing, stateLine, stateOf } from './states.js';
 import { MapBasemap, basemapChanged } from './basemap.js';
 import { icon } from './icons.js';
 import { sameFrame } from './view-switch.js';
@@ -70,13 +70,29 @@ let mapsMade = 0;
  * A box or lasso drawn with the toolbar becomes the store's selected region, which narrows the map
  * and every count to the items inside it. Shift-drag draws a box without changing tool. With the
  * map focused, the arrow keys pan and `+` and `-` zoom. Escape cancels a shape being drawn, or
- * clears the region when there is no shape, or drops the picked item when there is neither.
+ * clears the region when there is no shape, or drops the picked item when there is neither. With
+ * none of the three, the map leaves Escape to the page, so a dialog holding the map still closes.
  *
- * When the map cannot draw the view, it says why over the canvas.
+ * The hover tooltip follows the pointer and stays inside the map. Escape dismisses it wherever the
+ * focus is, and it stays away until the pointer moves onto another point. With the focus in the
+ * map, or in an element that renders the map inside its own shadow root, such as
+ * `<mosaica-explorer>`, the press does nothing else: the map calls `preventDefault` on it, and
+ * clears no selection on it. With the focus anywhere else on the page, the map leaves the press as
+ * it was, so the page's own Escape still acts.
+ *
+ * When the map cannot draw the view, it says why over the canvas, and screen readers announce it.
+ * Nothing in view is announced as the answer to a change of filters, highlight or selection, and
+ * only shown where a pan went. Screen readers also announce the basemap's note, and how many items
+ * match inside the selected region, once, when the query that counts it has finished loading. Set
+ * `quiet` where another element on the page says the same things, such as a status strip: the map
+ * shows the same, and announces only what it alone knows, the basemap's note and a basemap it
+ * refuses.
+ *
+ * With `ground` unset the map follows the page's colour scheme, and draws again when it changes.
  *
  * The canvas is a single tab stop, and it takes any `tabindex` or `aria-label` you set on the map.
- * Without an `aria-label`, the canvas is labelled with its keys, "map: arrow keys pan, + and -
- * zoom", so that someone using a screen reader knows how to move it.
+ * Without an `aria-label` the canvas is named "Map". Either way its description lists its keys, so
+ * that someone using a screen reader knows how to move it.
  *
  * @summary An interactive map with no panels around it.
  * @tagname mosaica-map
@@ -105,23 +121,26 @@ let mapsMade = 0;
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-layerchange']>} mosaica-layerchange - The
  *   `layers` attribute changed.
  * @csspart canvas - The deck.gl canvas's container.
- * @csspart overlay - The message over the canvas when the view is refused, expired or empty, or the
- *   server cannot be reached, did not answer or is too busy. If the viewer may see no item in the
- *   view at all, it says so instead of "Nothing in view".
+ * @csspart overlay - The layer over the canvas that holds the state line.
  * @csspart state - The state line inside the overlay, with `data-state`, and `data-visible="none"`
- *   if the viewer may see no item in the view.
+ *   if the viewer may see no item in the view. It shows a message when the view is refused,
+ *   expired or empty, or the server cannot be reached, did not answer or is too busy; if the viewer
+ *   may see no item in the view at all, it says so instead of "Nothing in view". It is in the page
+ *   in every state, and drawn only while it has a message.
  * @csspart retry - The Retry button in the overlay, after a refusal, no answer or a busy server.
  * @csspart refusal - The words "View refused", or "Server busy", inside the overlay, with
  *   `data-code` set to the refusal's code.
  * @csspart reason - The server's reason for a refusal, as it sent it, on a line under "View
  *   refused".
  * @csspart controls - The toolbar.
- * @csspart region-tag - The tag on the selected region's top-left corner, with how many items
- *   match inside it (or outside it, for its complement) and a button that clears it.
+ * @csspart region-tag - The tag above the selected region's top-left corner, with how many items
+ *   match inside it (or outside it, for its complement) and a button that clears it. It stays
+ *   inside the map when the corner is off it.
  * @csspart tooltip - The hover tooltip.
  * @csspart density-key - The key to density's colours in items per cell, in the bottom-left corner.
  *   Shown while density is drawn in a colour ramp or without the points.
- * @csspart note - Why no basemap is drawn under this view, in the bottom-right corner.
+ * @csspart note - Why no basemap is drawn under this view, in the bottom-right corner. It is in the
+ *   page whether or not there is a note, and drawn only while there is one.
  * @csspart attribution - The tile server's credit, in the bottom-right corner while tiles are drawn.
  * @cssprop --mosaica-map-height - The map's height.
  * @cssprop --mosaica-map-bg - The canvas's background, behind the points and any basemap.
@@ -139,9 +158,9 @@ let MosaicaMap = (() => {
     let _budget_decorators;
     let _budget_initializers = [];
     let _budget_extraInitializers = [];
-    let _clusterBudget_decorators;
-    let _clusterBudget_initializers = [];
-    let _clusterBudget_extraInitializers = [];
+    let _clusterSpacing_decorators;
+    let _clusterSpacing_initializers = [];
+    let _clusterSpacing_extraInitializers = [];
     let _tooltipFields_decorators;
     let _tooltipFields_initializers = [];
     let _tooltipFields_extraInitializers = [];
@@ -154,9 +173,9 @@ let MosaicaMap = (() => {
     let _palette_decorators;
     let _palette_initializers = [];
     let _palette_extraInitializers = [];
-    let _clusterLevel_decorators;
-    let _clusterLevel_initializers = [];
-    let _clusterLevel_extraInitializers = [];
+    let _clusterLevels_decorators;
+    let _clusterLevels_initializers = [];
+    let _clusterLevels_extraInitializers = [];
     let _basemap_decorators;
     let _basemap_initializers = [];
     let _basemap_extraInitializers = [];
@@ -223,6 +242,9 @@ let MosaicaMap = (() => {
     let _noControls_decorators;
     let _noControls_initializers = [];
     let _noControls_extraInitializers = [];
+    let _quiet_decorators;
+    let _quiet_initializers = [];
+    let _quiet_extraInitializers = [];
     let _controlsCorner_decorators;
     let _controlsCorner_initializers = [];
     let _controlsCorner_extraInitializers = [];
@@ -247,12 +269,12 @@ let MosaicaMap = (() => {
                     converter: { fromAttribute: (v) => (v ? v.split(/[\s,]+/).filter(Boolean) : []), toAttribute: (v) => v.join(' ') }
                 })];
             _budget_decorators = [property({ type: Number })];
-            _clusterBudget_decorators = [property({ type: Number, attribute: 'cluster-budget' })];
+            _clusterSpacing_decorators = [property({ type: Number, attribute: 'cluster-spacing' })];
             _tooltipFields_decorators = [property({ attribute: 'tooltip-fields' })];
             _titleField_decorators = [property({ attribute: 'title-field' })];
             _mode_decorators = [property({ reflect: true })];
             _palette_decorators = [property()];
-            _clusterLevel_decorators = [property({ type: Number, attribute: 'cluster-level' })];
+            _clusterLevels_decorators = [property({ attribute: false })];
             _basemap_decorators = [property({ hasChanged: basemapChanged })];
             _ground_decorators = [property({ reflect: true })];
             _noPoints_decorators = [property({ type: Boolean, attribute: 'no-points', reflect: true })];
@@ -275,6 +297,7 @@ let MosaicaMap = (() => {
             _sizeMax_decorators = [property({ type: Number, attribute: 'size-max' })];
             _sizeScale_decorators = [property({ attribute: 'size-scale' })];
             _noControls_decorators = [property({ type: Boolean, attribute: 'no-controls' })];
+            _quiet_decorators = [property({ type: Boolean, reflect: true })];
             _controlsCorner_decorators = [property({ attribute: 'controls-corner' })];
             _hover_decorators = [state()];
             _hoveredArtifact_decorators = [state()];
@@ -283,12 +306,12 @@ let MosaicaMap = (() => {
             __esDecorate(this, null, _colourBy_decorators, { kind: "accessor", name: "colourBy", static: false, private: false, access: { has: obj => "colourBy" in obj, get: obj => obj.colourBy, set: (obj, value) => { obj.colourBy = value; } }, metadata: _metadata }, _colourBy_initializers, _colourBy_extraInitializers);
             __esDecorate(this, null, _layers_decorators, { kind: "accessor", name: "layers", static: false, private: false, access: { has: obj => "layers" in obj, get: obj => obj.layers, set: (obj, value) => { obj.layers = value; } }, metadata: _metadata }, _layers_initializers, _layers_extraInitializers);
             __esDecorate(this, null, _budget_decorators, { kind: "accessor", name: "budget", static: false, private: false, access: { has: obj => "budget" in obj, get: obj => obj.budget, set: (obj, value) => { obj.budget = value; } }, metadata: _metadata }, _budget_initializers, _budget_extraInitializers);
-            __esDecorate(this, null, _clusterBudget_decorators, { kind: "accessor", name: "clusterBudget", static: false, private: false, access: { has: obj => "clusterBudget" in obj, get: obj => obj.clusterBudget, set: (obj, value) => { obj.clusterBudget = value; } }, metadata: _metadata }, _clusterBudget_initializers, _clusterBudget_extraInitializers);
+            __esDecorate(this, null, _clusterSpacing_decorators, { kind: "accessor", name: "clusterSpacing", static: false, private: false, access: { has: obj => "clusterSpacing" in obj, get: obj => obj.clusterSpacing, set: (obj, value) => { obj.clusterSpacing = value; } }, metadata: _metadata }, _clusterSpacing_initializers, _clusterSpacing_extraInitializers);
             __esDecorate(this, null, _tooltipFields_decorators, { kind: "accessor", name: "tooltipFields", static: false, private: false, access: { has: obj => "tooltipFields" in obj, get: obj => obj.tooltipFields, set: (obj, value) => { obj.tooltipFields = value; } }, metadata: _metadata }, _tooltipFields_initializers, _tooltipFields_extraInitializers);
             __esDecorate(this, null, _titleField_decorators, { kind: "accessor", name: "titleField", static: false, private: false, access: { has: obj => "titleField" in obj, get: obj => obj.titleField, set: (obj, value) => { obj.titleField = value; } }, metadata: _metadata }, _titleField_initializers, _titleField_extraInitializers);
             __esDecorate(this, null, _mode_decorators, { kind: "accessor", name: "mode", static: false, private: false, access: { has: obj => "mode" in obj, get: obj => obj.mode, set: (obj, value) => { obj.mode = value; } }, metadata: _metadata }, _mode_initializers, _mode_extraInitializers);
             __esDecorate(this, null, _palette_decorators, { kind: "accessor", name: "palette", static: false, private: false, access: { has: obj => "palette" in obj, get: obj => obj.palette, set: (obj, value) => { obj.palette = value; } }, metadata: _metadata }, _palette_initializers, _palette_extraInitializers);
-            __esDecorate(this, null, _clusterLevel_decorators, { kind: "accessor", name: "clusterLevel", static: false, private: false, access: { has: obj => "clusterLevel" in obj, get: obj => obj.clusterLevel, set: (obj, value) => { obj.clusterLevel = value; } }, metadata: _metadata }, _clusterLevel_initializers, _clusterLevel_extraInitializers);
+            __esDecorate(this, null, _clusterLevels_decorators, { kind: "accessor", name: "clusterLevels", static: false, private: false, access: { has: obj => "clusterLevels" in obj, get: obj => obj.clusterLevels, set: (obj, value) => { obj.clusterLevels = value; } }, metadata: _metadata }, _clusterLevels_initializers, _clusterLevels_extraInitializers);
             __esDecorate(this, null, _basemap_decorators, { kind: "accessor", name: "basemap", static: false, private: false, access: { has: obj => "basemap" in obj, get: obj => obj.basemap, set: (obj, value) => { obj.basemap = value; } }, metadata: _metadata }, _basemap_initializers, _basemap_extraInitializers);
             __esDecorate(this, null, _ground_decorators, { kind: "accessor", name: "ground", static: false, private: false, access: { has: obj => "ground" in obj, get: obj => obj.ground, set: (obj, value) => { obj.ground = value; } }, metadata: _metadata }, _ground_initializers, _ground_extraInitializers);
             __esDecorate(this, null, _noPoints_decorators, { kind: "accessor", name: "noPoints", static: false, private: false, access: { has: obj => "noPoints" in obj, get: obj => obj.noPoints, set: (obj, value) => { obj.noPoints = value; } }, metadata: _metadata }, _noPoints_initializers, _noPoints_extraInitializers);
@@ -311,6 +334,7 @@ let MosaicaMap = (() => {
             __esDecorate(this, null, _sizeMax_decorators, { kind: "accessor", name: "sizeMax", static: false, private: false, access: { has: obj => "sizeMax" in obj, get: obj => obj.sizeMax, set: (obj, value) => { obj.sizeMax = value; } }, metadata: _metadata }, _sizeMax_initializers, _sizeMax_extraInitializers);
             __esDecorate(this, null, _sizeScale_decorators, { kind: "accessor", name: "sizeScale", static: false, private: false, access: { has: obj => "sizeScale" in obj, get: obj => obj.sizeScale, set: (obj, value) => { obj.sizeScale = value; } }, metadata: _metadata }, _sizeScale_initializers, _sizeScale_extraInitializers);
             __esDecorate(this, null, _noControls_decorators, { kind: "accessor", name: "noControls", static: false, private: false, access: { has: obj => "noControls" in obj, get: obj => obj.noControls, set: (obj, value) => { obj.noControls = value; } }, metadata: _metadata }, _noControls_initializers, _noControls_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);
             __esDecorate(this, null, _controlsCorner_decorators, { kind: "accessor", name: "controlsCorner", static: false, private: false, access: { has: obj => "controlsCorner" in obj, get: obj => obj.controlsCorner, set: (obj, value) => { obj.controlsCorner = value; } }, metadata: _metadata }, _controlsCorner_initializers, _controlsCorner_extraInitializers);
             __esDecorate(this, null, _hover_decorators, { kind: "accessor", name: "hover", static: false, private: false, access: { has: obj => "hover" in obj, get: obj => obj.hover, set: (obj, value) => { obj.hover = value; } }, metadata: _metadata }, _hover_initializers, _hover_extraInitializers);
             __esDecorate(this, null, _hoveredArtifact_decorators, { kind: "accessor", name: "hoveredArtifact", static: false, private: false, access: { has: obj => "hoveredArtifact" in obj, get: obj => obj.hoveredArtifact, set: (obj, value) => { obj.hoveredArtifact = value; } }, metadata: _metadata }, _hoveredArtifact_initializers, _hoveredArtifact_extraInitializers);
@@ -331,13 +355,26 @@ let MosaicaMap = (() => {
         outline: none;
         overflow: hidden;
       }
+      /* Draws nothing: a colour that follows the scheme, whose transition tells the map that the
+         ground it draws on has changed. It is inside the map's own tree, where no rule of the
+         page's or of an element holding the map reaches it, and its transition outranks the one
+         the theme takes away under reduced motion. */
+      #ground {
+        position: absolute;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+        text-decoration-color: light-dark(#000, #fff);
+        transition: text-decoration-color 1ms !important;
+      }
       [part='canvas'] {
         position: absolute;
         inset: 0;
       }
-      [part='canvas']:focus-visible {
-        outline: 1.5px solid color-mix(in srgb, var(--_mosaica-accent) 40%, transparent);
-        outline-offset: -1.5px;
+      /* Inside the canvas's edge, which the map clips at. deck's own canvas takes the focus on a click. */
+      [part='canvas']:focus-visible,
+      [part='canvas'] canvas:focus-visible {
+        outline-offset: -2px;
       }
       :host([mode='box']) [part='canvas'],
       :host([mode='lasso']) [part='canvas'] {
@@ -399,10 +436,14 @@ let MosaicaMap = (() => {
         background: var(--_mosaica-accent);
         color: var(--_mosaica-accent-ink);
       }
-      /* The drawn region's count and clear button, on its top edge. */
+      /* The drawn region's count and clear button, above its top-left corner. It and the tooltip
+         are laid out at the map's own corner, so neither is squeezed against an edge, and moved
+         to their places once their sizes are known. */
       [part='region-tag'] {
         position: absolute;
         z-index: 3;
+        left: 0;
+        top: 0;
         display: flex;
         align-items: center;
         gap: 6px;
@@ -414,7 +455,6 @@ let MosaicaMap = (() => {
         font-size: 12px;
         color: var(--_mosaica-ink-2);
         white-space: nowrap;
-        transform: translateY(calc(-100% - 4px));
       }
       [part='region-tag'] mosaica-count {
         font-size: inherit;
@@ -424,6 +464,7 @@ let MosaicaMap = (() => {
         font-weight: 600;
       }
       [part='region-tag'] button {
+        position: relative;
         width: 20px;
         height: 20px;
         display: grid;
@@ -431,21 +472,32 @@ let MosaicaMap = (() => {
         border-radius: 4px;
         color: var(--_mosaica-ink-2);
       }
+      /* The pointer's target is 24 px square around the button, which the tag does not grow for. */
+      [part='region-tag'] button::before {
+        content: '';
+        position: absolute;
+        inset: -2px;
+      }
       [part='region-tag'] button:hover {
         background: var(--_mosaica-surface-2);
       }
+      [part='region-tag'] button:focus-visible {
+        outline-offset: -2px;
+      }
       [part='tooltip'] {
         position: absolute;
         z-index: 4;
+        left: 0;
+        top: 0;
         pointer-events: none;
         padding: 8px 10px;
-        max-width: 260px;
+        max-width: min(260px, 100%);
         background: var(--_mosaica-surface);
         border: 1px solid var(--_mosaica-line);
         border-radius: var(--_mosaica-radius);
         box-shadow: var(--_mosaica-shadow);
         font-size: 12px;
-        transform: translate(14px, 14px);
+        overflow-wrap: anywhere;
       }
       [part='tooltip'] .t {
         font-weight: 500;
@@ -465,7 +517,8 @@ let MosaicaMap = (() => {
         justify-content: center;
         pointer-events: none;
       }
-      [part='overlay'] [part='state'] {
+      /* A card while the state has words to show; otherwise it is kept, undrawn, for what it announces. */
+      [part='overlay'] [part='state']:not(.sr-only) {
         pointer-events: auto;
         min-height: 40px;
         padding: 6px 8px 6px 14px;
@@ -477,7 +530,7 @@ let MosaicaMap = (() => {
         font-weight: 500;
         color: var(--_mosaica-ink);
       }
-      [part='overlay'] [part='state']:not(:has(button)) {
+      [part='overlay'] [part='state']:not(.sr-only, :has(button)) {
         padding-right: 14px;
       }
       [part='density-key'] {
@@ -509,11 +562,13 @@ let MosaicaMap = (() => {
         border: 0;
         background: color-mix(in srgb, var(--_mosaica-surface) 80%, transparent);
       }
+      /* The ramp's colours are what it shows, so forced colours leave them. */
       [part='density-key'] .ramp {
         display: block;
         width: 120px;
         height: 8px;
         border-radius: 2px;
+        forced-color-adjust: none;
       }
       [part='density-key'] .ends {
         display: grid;
@@ -545,14 +600,24 @@ let MosaicaMap = (() => {
         /** How many marks to aim for on screen. `0` keeps the store's budget, which starts at 250000. */
         get budget() { return this.#budget_accessor_storage; }
         set budget(value) { this.#budget_accessor_storage = value; }
-        #clusterBudget_accessor_storage = (__runInitializers(this, _budget_extraInitializers), __runInitializers(this, _clusterBudget_initializers, 0));
+        #clusterSpacing_accessor_storage = (__runInitializers(this, _budget_extraInitializers), __runInitializers(this, _clusterSpacing_initializers, 0));
         /**
-         * The most clusters a `nested` or `dag` layer is cut to (`Store.setClusterBudget`). `0` keeps the
-         * store's setting; setting `0` after another value removes the limit, giving the finest cut.
+         * The side in CSS pixels of the square of the map each cluster is given (`Store.setClusterSpacing`),
+         * so the map shows about one cluster per square whatever its size: at 100, a map 1,200 by 800
+         * pixels shows 96. `0` keeps the store's setting; setting `0` after another value removes the
+         * limit.
+         *
+         * A `nested` or `dag` layer is cut to that many clusters. A `stacked` or `tiered` layer whose
+         * levels declare no zoom range and which `clusterLevels` leaves to follow the zoom is drawn at the
+         * finest level with no more than that many clusters in view and no tile in view holding the most a
+         * tile is served, so the world view shows a broad level and finer ones appear as the camera zooms
+         * in. Without a spacing only a full tile holds a level back, so such a layer is drawn at its
+         * finest level at every zoom until its tiles fill, world zoom included, and a `nested` or `dag`
+         * layer is drawn at its finest cut.
          */
-        get clusterBudget() { return this.#clusterBudget_accessor_storage; }
-        set clusterBudget(value) { this.#clusterBudget_accessor_storage = value; }
-        #tooltipFields_accessor_storage = (__runInitializers(this, _clusterBudget_extraInitializers), __runInitializers(this, _tooltipFields_initializers, ''));
+        get clusterSpacing() { return this.#clusterSpacing_accessor_storage; }
+        set clusterSpacing(value) { this.#clusterSpacing_accessor_storage = value; }
+        #tooltipFields_accessor_storage = (__runInitializers(this, _clusterSpacing_extraInitializers), __runInitializers(this, _tooltipFields_initializers, ''));
         /**
          * The columns the hover tooltip shows under the point's title, separated by spaces or commas.
          * Only rendered columns arrive with the points, so another column shows nothing.
@@ -579,14 +644,17 @@ let MosaicaMap = (() => {
          */
         get palette() { return this.#palette_accessor_storage; }
         set palette(value) { this.#palette_accessor_storage = value; }
-        #clusterLevel_accessor_storage = (__runInitializers(this, _palette_extraInitializers), __runInitializers(this, _clusterLevel_initializers, null));
+        #clusterLevels_accessor_storage = (__runInitializers(this, _palette_extraInitializers), __runInitializers(this, _clusterLevels_initializers, new Map()));
         /**
-         * The level of a `stacked` or `tiered` layer at which clusters are coloured, labelled and
-         * outlined. Unset, the coarsest level. A `nested` or `dag` layer ignores it.
+         * The level at which each `stacked` or `tiered` layer's clusters are coloured, labelled and
+         * outlined, keyed by layer name. A layer with no entry is drawn at the level that follows the zoom
+         * where its levels declare no zoom range (see `cluster-spacing`), and otherwise at the coarsest
+         * level the camera's zoom serves. A `nested` or `dag` layer ignores its entry. Set it as a
+         * property; it has no attribute.
          */
-        get clusterLevel() { return this.#clusterLevel_accessor_storage; }
-        set clusterLevel(value) { this.#clusterLevel_accessor_storage = value; }
-        #basemap_accessor_storage = (__runInitializers(this, _clusterLevel_extraInitializers), __runInitializers(this, _basemap_initializers, null));
+        get clusterLevels() { return this.#clusterLevels_accessor_storage; }
+        set clusterLevels(value) { this.#clusterLevels_accessor_storage = value; }
+        #basemap_accessor_storage = (__runInitializers(this, _clusterLevels_extraInitializers), __runInitializers(this, _basemap_initializers, null));
         /**
          * What is drawn under the points. `world` is the server's outline of land, coastlines and country
          * borders, and needs a view with a map projection. `{tiles, attribution}` is a tile server's URL
@@ -604,8 +672,9 @@ let MosaicaMap = (() => {
         #ground_accessor_storage = (__runInitializers(this, _basemap_extraInitializers), __runInitializers(this, _ground_initializers, ''));
         /**
          * Whether the map's background is `light` or `dark`, for when it differs from the page's, such as
-         * a light basemap on a dark page. Labels and density colours follow it; the toolbar and panels
-         * follow the page. Unset, it follows the page's `color-scheme`.
+         * a light basemap on a dark page. The points' single colour, labels and density colours follow
+         * it; the toolbar and panels follow the page. Unset, it follows the page's `color-scheme`, and
+         * the system's where the page allows both.
          */
         get ground() { return this.#ground_accessor_storage; }
         set ground(value) { this.#ground_accessor_storage = value; }
@@ -751,7 +820,16 @@ let MosaicaMap = (() => {
         /** Hides the toolbar. */
         get noControls() { return this.#noControls_accessor_storage; }
         set noControls(value) { this.#noControls_accessor_storage = value; }
-        #controlsCorner_accessor_storage = (__runInitializers(this, _noControls_extraInitializers), __runInitializers(this, _controlsCorner_initializers, 'top-left'));
+        #quiet_accessor_storage = (__runInitializers(this, _noControls_extraInitializers), __runInitializers(this, _quiet_initializers, false));
+        /**
+         * Leaves to another element what that element also says: the view's state over the canvas and
+         * the selected region's count are still shown, and neither is put in a live region. Set it when
+         * another element on the page says the same things, such as a status strip. What only the map
+         * knows is announced either way: the basemap's note, and a basemap it refuses.
+         */
+        get quiet() { return this.#quiet_accessor_storage; }
+        set quiet(value) { this.#quiet_accessor_storage = value; }
+        #controlsCorner_accessor_storage = (__runInitializers(this, _quiet_extraInitializers), __runInitializers(this, _controlsCorner_initializers, 'top-left'));
         /**
          * The corner the toolbar sits in: `top-left`, `top-right`, `bottom-left` or `bottom-right`.
          * Content in the same corner's slot sits below the toolbar in a top corner, and above it in a
@@ -794,7 +872,7 @@ let MosaicaMap = (() => {
             marks: 0,
             requests: 0,
             densityRequests: 0,
-            encoding: 'uniform',
+            encoding: 'uniform|dark',
             basemap: [],
             view: { depth: 0, status: 'idle', stale: false, visible: 0, matched: 0, served: 0, provisional: 0 },
             region: null,
@@ -865,6 +943,7 @@ let MosaicaMap = (() => {
             super.connectedCallback();
             this.askPointColumns(this.resolvedStore);
             this.syncBasemap();
+            this.watchTooltipKeys();
             if (this.finalizeTimer) {
                 clearTimeout(this.finalizeTimer);
                 this.finalizeTimer = null;
@@ -892,6 +971,9 @@ let MosaicaMap = (() => {
                 clearTimeout(this.describeTimer);
                 this.describeTimer = null;
             }
+            this.watchTooltipKeys();
+            this.tagSized?.disconnect();
+            this.tagBox = null;
             this.stopFrameLoop();
             this.finalizeTimer = setTimeout(() => {
                 this.finalizeTimer = null;
@@ -901,6 +983,9 @@ let MosaicaMap = (() => {
         }
         updated(changed) {
             this.ensureDeck();
+            this.watchTooltipKeys();
+            this.placeFloats();
+            this.actionFocus.keep(this.focusTarget);
             if (changed.has('measure')) {
                 if (this.measure && this.isConnected)
                     this.startFrameLoop();
@@ -915,7 +1000,7 @@ let MosaicaMap = (() => {
                 this.drawnBasemap.reset();
             if (changed.has('basemap') || changed.has('ground'))
                 this.syncBasemap();
-            const repaint = ['mode', 'drag', 'dragPolygon', 'basemap', 'ground', 'radius', 'clusterLevel', 'hoveredArtifact', 'noPoints', 'pointOpacity', 'density', 'densityColours', 'densityStrength', 'densityScale'];
+            const repaint = ['mode', 'drag', 'dragPolygon', 'basemap', 'ground', 'radius', 'clusterLevels', 'hoveredArtifact', 'noPoints', 'pointOpacity', 'density', 'densityColours', 'densityStrength', 'densityScale'];
             if (repaint.some((k) => changed.has(k)))
                 this.paint();
         }
@@ -1017,6 +1102,17 @@ let MosaicaMap = (() => {
                 return 'dark';
             return typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }
+        /**
+         * Draw for the other ground when the page's or the system's colour scheme changes, which the
+         * colour of the `#ground` element follows: the basemap, the points and names, and the density key.
+         */
+        onGroundChange = () => {
+            if (this.ground !== '')
+                return;
+            this.syncBasemap();
+            this.paint();
+            this.requestUpdate();
+        };
         resetServerData() {
             // A hover's title is a record the server answered, and a pick names an item it served.
             this.hover = null;
@@ -1073,6 +1169,11 @@ let MosaicaMap = (() => {
         }
         /** A store adopted since the last update, to which the host's settings are not yet written. */
         unpushed = null;
+        /** Keeps the focus on the map when the overlay's Retry goes with its state. */
+        actionFocus = new ActionFocus();
+        emptyAnswer = new EmptyAnswer();
+        /** Whether the view is empty as a query's answer, which is announced, and not where a pan went. */
+        emptyAnswered = false;
         /**
          * Write the host's settings to the store before the render: every one to a store adopted since
          * the last update, else those that changed. `layers` set or changed in this update fires
@@ -1082,7 +1183,11 @@ let MosaicaMap = (() => {
          */
         willUpdate(changed) {
             super.willUpdate(changed);
+            this.actionFocus.note(this.renderRoot);
             const s = this.resolvedStore;
+            const status = s?.get('status') ?? null;
+            this.emptyAnswered = this.emptyAnswer.note(stateOf(status), status?.querying === true);
+            this.hearRegion();
             if (!s)
                 return;
             const all = this.unpushed === s;
@@ -1099,11 +1204,11 @@ let MosaicaMap = (() => {
                 emit(this, 'mosaica-layerchange', { layers: this.layers });
             if (touched('budget') && this.budget > 0)
                 s.setBudget(this.budget);
-            if (touched('clusterBudget')) {
-                if (this.clusterBudget > 0)
-                    s.setClusterBudget(this.clusterBudget);
-                else if (!all && (changed.get('clusterBudget') ?? 0) > 0)
-                    s.setClusterBudget(null);
+            if (touched('clusterSpacing')) {
+                if (this.clusterSpacing > 0)
+                    s.setClusterSpacing(this.clusterSpacing);
+                else if (!all && (changed.get('clusterSpacing') ?? 0) > 0)
+                    s.setClusterSpacing(null);
             }
             if (touched('palette') && this.palette !== '')
                 s.setPalette(this.palette);
@@ -1158,7 +1263,7 @@ let MosaicaMap = (() => {
             };
             const legend = s.get('legend');
             const clusterLayer = clusterLayerOf(legend.colourBy);
-            p.encoding = clusterLayer ? `cluster|${clusterLayer}` : encodingSignature(encodingOf(s.get('meta'), legend, colouringOf(s)));
+            p.encoding = clusterLayer ? `cluster|${clusterLayer}` : encodingSignature(encodingOf(s.get('meta'), legend, colouringOf(s), this.scheme()));
             if (this.measure)
                 this.measureStore(s);
             // Events for what arrived: the selected item's record, the opened artifact, the region's counts.
@@ -1257,15 +1362,16 @@ let MosaicaMap = (() => {
                 return;
             this.probedArtifacts = artifacts;
             this.probedComposition = view.composition;
-            this.probe.cluster = this.clusterProbe(clusterLayerOf(s.get('legend').colourBy), artifacts, s.get('marks').bands);
+            this.probe.cluster = this.clusterProbe(s.get('legend').colourBy, artifacts, s.get('marks').bands);
         }
         /** A sample of carried ordinals, each resolved through the table; see {@link MapProbe.cluster}. */
-        clusterProbe(clusterLayer, a, bands) {
-            const layer = clusterLayer ?? a.layers[0] ?? null;
+        clusterProbe(colourBy, a, bands) {
+            const clusterLayer = clusterLayerOf(colourBy);
+            const layer = colourLayerOf(a, colourBy) ?? null;
             const rows = clusterLayer ? a.colourServed : a.served;
             const rowOrdinals = clusterLayer ? new Set(rows.map((x) => a.table.ordinalOf(x.layer, x.mosaicaId))) : a.servedOrdinals;
             const sample = [];
-            const level = this.drawnLevel();
+            const level = this.levelOf(layer);
             let coloured = 0;
             if (layer) {
                 for (const band of bands) {
@@ -1305,8 +1411,7 @@ let MosaicaMap = (() => {
                 parent,
                 views: VIEW,
                 viewState: this.viewState,
-                // The map takes the keys itself, on its canvas, so deck's keyboard is off.
-                controller: { keyboard: false },
+                controller: this.controller(),
                 pickingRadius: MosaicaMap.PICK_RADIUS_PX,
                 // Presses draw no pick, which would count against the press's time to be a click (`clickPick`).
                 layerFilter: ({ isPicking, renderPass }) => !isPicking || renderPass.startsWith('picking:hover') || this.picking,
@@ -1331,7 +1436,9 @@ let MosaicaMap = (() => {
                     return viewState;
                 },
                 onClick: (info) => this.onClick(this.clickPick(info)),
-                onHover: (info) => this.onHover(info)
+                onHover: (info) => this.onHover(info),
+                // The store's cluster count follows the canvas's size.
+                onResize: () => this.pushView()
             });
             this.paint();
         }
@@ -1375,7 +1482,7 @@ let MosaicaMap = (() => {
                     id: 'mosaica',
                     store: s,
                     slab: this.slab,
-                    clusterLevel: this.drawnLevel(),
+                    clusterLevels: this.clusterLevels,
                     selectedWorldXY: this.selectedWorldXY,
                     openedArtifact: s.get('selection').artifact?.id ?? null,
                     hoveredArtifact: this.hoveredArtifact,
@@ -1420,16 +1527,19 @@ let MosaicaMap = (() => {
                     }
                 }));
             }
-            this.deck.setProps({
-                layers,
-                viewState: this.viewState,
-                // In box and lasso modes the drag is the selection's; the wheel still zooms.
-                controller: this.mode === 'box' || this.mode === 'lasso' ? { dragPan: false, dragRotate: false } : true
-            });
+            this.deck.setProps({ layers, viewState: this.viewState, controller: this.controller() });
+        }
+        /**
+         * What deck's own input handling does. Its keyboard is off in every mode, since the map takes
+         * the keys itself and a key would otherwise move the camera twice. In box and lasso modes the
+         * drag is the selection's; the wheel still zooms.
+         */
+        controller() {
+            return this.mode === 'box' || this.mode === 'lasso' ? { keyboard: false, dragPan: false, dragRotate: false } : { keyboard: false };
         }
         /**
          * The shapes a hover or click is resolved against ({@link contourShapes}), held until the served
-         * set, the fetched shapes, the level or the roster change. Each is the artifact's box until its
+         * set, the fetched shapes, the levels or the roster change. Each is the artifact's box until its
          * shape is fetched; where boxes overlap, depth and the mark under the pointer decide.
          */
         contoursHeld = null;
@@ -1439,13 +1549,14 @@ let MosaicaMap = (() => {
             if (!a)
                 return [];
             const meta = s?.get('meta') ?? null;
-            const level = this.drawnLevel() ?? null;
+            const levels = this.drawnLevels();
+            const key = levelsKey(levels);
             const opened = s?.get('selection').artifact?.id ?? null;
             const held = this.contoursHeld;
-            if (held && held.served === a.served && held.fetched === a.shapes && held.level === level && held.meta === meta && held.opened === opened)
+            if (held && held.served === a.served && held.fetched === a.shapes && held.levels === key && held.meta === meta && held.opened === opened)
                 return held.shapes;
-            const shapes = contourShapes(a, { level: level ?? undefined, meta, opened });
-            this.contoursHeld = { served: a.served, fetched: a.shapes, level, meta, opened, shapes };
+            const shapes = contourShapes(a, { levels, meta, opened });
+            this.contoursHeld = { served: a.served, fetched: a.shapes, levels: key, meta, opened, shapes };
             return shapes;
         }
         /** How far past a hovered shape's edge the pointer goes before the hover lets go, in pixels. */
@@ -1466,7 +1577,7 @@ let MosaicaMap = (() => {
         /** What decides what is under a pixel: the camera, the map's size, and the marks and names drawn and their sizes. */
         drawnKey() {
             const s = this.resolvedStore;
-            return [this.viewState, this.clientWidth, this.clientHeight, s?.get('marks'), s?.get('artifacts'), s?.get('legend'), s?.get('selection').artifact?.id, this.drawnLevel(), this.noPoints, this.radius];
+            return [this.viewState, this.clientWidth, this.clientHeight, s?.get('marks'), s?.get('artifacts'), s?.get('legend'), s?.get('selection').artifact?.id, levelsKey(this.drawnLevels()), this.noPoints, this.radius];
         }
         /** Whether the map is running a pick of its own, which the deck's `layerFilter` lets draw. */
         picking = false;
@@ -1497,13 +1608,16 @@ let MosaicaMap = (() => {
             const at = slot ? this.slab.markAt(Number(slot[1]), info.index) : null;
             const artifacts = this.resolvedStore?.get('artifacts') ?? null;
             // The mark's own artifact, preferred where shapes interleave.
-            const own = at && artifacts ? artifactOfMark(at.band, at.i, artifacts, this.drawnLevel()) : null;
+            const own = at && artifacts ? artifactOfMark(at.band, at.i, artifacts, this.levelOf(artifacts.layers[0])) : null;
             const world = this.worldAt(info.x, info.y);
             this.hoveredArtifact = picked.kind === 'artifact' ? picked.id : world ? this.artifactAt(world, own) : null;
             // The viewport carries no shapes; fetch the hovered one. `needShape` asks once per artifact.
             if (this.hoveredArtifact !== null)
                 this.resolvedStore?.needShape(this.hoveredArtifact);
-            if (picked.kind !== 'mark' || this.pressed || picked.id === this.resolvedStore?.get('selection').item?.id) {
+            // A tooltip Escape dismissed stays away while the pointer is on its mark.
+            if (picked.kind !== 'mark' || picked.id !== this.dismissedHover)
+                this.dismissedHover = null;
+            if (picked.kind !== 'mark' || this.pressed || picked.id === this.dismissedHover || picked.id === this.resolvedStore?.get('selection').item?.id) {
                 if (this.hover)
                     this.hover = null;
                 return;
@@ -1554,6 +1668,94 @@ let MosaicaMap = (() => {
                 });
             }, HOVER_DESCRIBE_MS);
         }
+        /** The mark whose tooltip Escape dismissed, while the pointer stays on it. */
+        dismissedHover = null;
+        /** Whether the document is listened to for the Escape that dismisses the tooltip. */
+        tooltipKeys = false;
+        /** Listen to the document for Escape while a tooltip shows, wherever the focus is. */
+        watchTooltipKeys() {
+            const on = this.hover !== null && this.isConnected;
+            if (on === this.tooltipKeys)
+                return;
+            this.tooltipKeys = on;
+            if (on)
+                this.ownerDocument.addEventListener('keydown', this.onTooltipKey, true);
+            else
+                this.ownerDocument.removeEventListener('keydown', this.onTooltipKey, true);
+        }
+        /**
+         * Escape dismisses the tooltip. Pressed in the map, or in an element whose shadow tree holds the
+         * map, such as an explorer, it does nothing else: it is marked as taken, so the same press clears
+         * no selection there. Pressed anywhere else on the page it is left as it was, for the page.
+         */
+        onTooltipKey = (e) => {
+            if (e.key !== 'Escape' || !this.hover)
+                return;
+            this.dismissedHover = this.hover.id;
+            this.hover = null;
+            const path = e.composedPath();
+            for (let at = this; at;) {
+                if (path.includes(at)) {
+                    e.preventDefault();
+                    return;
+                }
+                const root = at.getRootNode();
+                at = root instanceof ShadowRoot ? root.host : null;
+            }
+        };
+        /** The region's tag as last measured: its size, the map's, and how far in the top-left corner's content starts. */
+        tagBox = null;
+        /** Measures the tag again when it or the map changes size, so that placing it as the camera moves reads no layout. */
+        tagSized = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(() => {
+                if (!this.tagBox)
+                    return;
+                this.measureTag(this.tagBox.tag);
+                this.placeTag();
+            });
+        measureTag(tag) {
+            // No further left than the top-left corner's content starts, right of whatever the host keeps
+            // over the map's left side.
+            const inset = this.renderRoot.querySelector('.corner.top-left')?.offsetLeft ?? 0;
+            const { width, height } = this.size;
+            this.tagBox = { tag, size: [tag.offsetWidth, tag.offsetHeight], map: [width, height], inset };
+        }
+        /** Put the region's tag above its region's top-left corner, inside the map, from the sizes last measured. */
+        placeTag() {
+            const corner = this.regionCorner();
+            if (!this.tagBox || !corner)
+                return;
+            const { tag, size, map, inset } = this.tagBox;
+            const scale = 2 ** this.viewState.zoom;
+            const [x, y] = [(corner[0] - this.viewState.target[0]) * scale + map[0] / 2, (corner[1] - this.viewState.target[1]) * scale + map[1] / 2];
+            const [left, top] = keptInside([x, y - size[1] - REGION_TAG_GAP_PX], size, [inset, 0], map);
+            tag.style.transform = `translate(${left}px, ${top}px)`;
+        }
+        /**
+         * Move the tooltip beside the pointer and the region's tag above its region's corner, each kept
+         * inside the map. The tooltip is measured each time it is drawn; the tag when it is first drawn
+         * and when it or the map changes size.
+         */
+        placeFloats() {
+            const tip = this.renderRoot.querySelector('[part="tooltip"]');
+            if (tip && this.hover) {
+                const { width, height } = this.size;
+                const [left, top] = tooltipCorner([this.hover.x, this.hover.y], [tip.offsetWidth, tip.offsetHeight], [width, height]);
+                tip.style.transform = `translate(${left}px, ${top}px)`;
+            }
+            const tag = this.renderRoot.querySelector('[part="region-tag"]');
+            if (tag !== (this.tagBox?.tag ?? null)) {
+                this.tagSized?.disconnect();
+                this.tagBox = null;
+                if (tag) {
+                    this.measureTag(tag);
+                    this.tagSized?.observe(tag);
+                    this.tagSized?.observe(this);
+                }
+            }
+            this.placeTag();
+        }
         /** The element that takes the map's focus: the canvas, a tab stop of its own. @internal */
         get focusTarget() {
             return this.renderRoot.querySelector('[part="canvas"]');
@@ -1744,38 +1946,57 @@ let MosaicaMap = (() => {
                 this.requestUpdate();
         }
         /**
-         * The drawn region's tag at its top-left corner: how many items match inside it (or outside, for
-         * its complement) and a button that clears it. A region drawn as an artifact's outline has none.
+         * The drawn region's tag: how many items match inside it (or outside, for its complement) and a
+         * button that clears it. A region drawn as an artifact's outline has none. {@link placeFloats}
+         * puts it above the region's top-left corner.
          */
         regionTag() {
             const region = this.resolvedStore?.get('region');
-            if (!region)
-                return nothing;
-            let corner = null;
-            if (this.regionWorld)
-                corner = [this.regionWorld[0], this.regionWorld[1]];
-            else if (this.regionPolygon && this.regionPolygon.length > 0) {
-                corner = [Math.min(...this.regionPolygon.map((p) => p[0])), Math.min(...this.regionPolygon.map((p) => p[1]))];
-            }
-            if (!corner)
+            if (!region || !this.regionCorner())
                 return nothing;
-            // The orthographic camera, y down: world units scale by 2^zoom about the target at the centre.
-            const { width, height } = this.size;
-            const scale = 2 ** this.viewState.zoom;
-            const [tx, ty] = this.viewState.target;
-            // Kept inside the map where the corner is off its top edge, and no further left than the
-            // top-left corner's content starts, right of whatever the host keeps over the map's left side.
-            const left = (corner[0] - tx) * scale + width / 2;
-            const top = Math.max(30, (corner[1] - ty) * scale + height / 2);
-            return html `<div part="region-tag" style=${`left:max(calc(var(--_mosaica-space) + var(--mosaica-map-inset-left, 0px)), ${left}px);top:${top}px`}>
+            return html `<div part="region-tag">
       <mosaica-count .masked=${region.matched}></mosaica-count><span>${region.shape.outside ? 'outside' : 'inside'}</span>
       <button type="button" aria-label="Clear selection" title="Clear selection" @click=${() => this.select(null)}>${icon('close', 12, 1.4)}</button>
     </div>`;
         }
-        /** The level clusters are drawn at: `cluster-level` where set, else the top level of a levelled layer. */
-        drawnLevel() {
+        /** The top-left corner of the drawn region's bounds, in world coordinates; `null` where no shape is drawn. */
+        regionCorner() {
+            if (this.regionWorld)
+                return [this.regionWorld[0], this.regionWorld[1]];
+            if (!this.regionPolygon || this.regionPolygon.length === 0)
+                return null;
+            return [Math.min(...this.regionPolygon.map((p) => p[0])), Math.min(...this.regionPolygon.map((p) => p[1]))];
+        }
+        /** What the map last announced of the selected region, and the shape it said it of. */
+        regionHeard = '';
+        heardShape = null;
+        /**
+         * Decide what the map announces of the selected region: how many items match inside it (or
+         * outside), once the query that counts it has finished loading, since the figure a frame gives
+         * first is an estimate. The words change only with the figure or the shape, so a count is
+         * announced once, whatever else the map says in the meantime.
+         */
+        hearRegion() {
+            const s = this.resolvedStore;
+            const region = s?.get('region') ?? null;
+            const shape = region?.shape ?? null;
+            if (shape !== this.heardShape) {
+                this.heardShape = shape;
+                this.regionHeard = '';
+            }
+            if (!s || region?.status !== 'shown' || s.get('status').querying)
+                return;
+            this.regionHeard = `${formatMasked(region.matched)} ${region.shape.outside ? 'outside' : 'inside'} the selection`;
+        }
+        /** The level the layer `name` is drawn at: its entry in `clusterLevels`, else the level in view of a levelled layer. */
+        levelOf(name) {
             const s = this.resolvedStore;
-            return drawnLevel(s?.get('meta') ?? null, s?.get('artifacts') ?? null, s?.get('legend').colourBy, this.clusterLevel ?? undefined);
+            return drawnLevel(s?.get('meta') ?? null, s?.get('artifacts') ?? null, name ?? undefined, this.clusterLevels);
+        }
+        /** {@link levelOf} for each layer drawn. */
+        drawnLevels() {
+            const s = this.resolvedStore;
+            return drawnLevels(s?.get('meta') ?? null, s?.get('artifacts') ?? null, this.clusterLevels);
         }
         /** Whether the map is drawn on a light or dark background now: `ground` if set, else the page's scheme. */
         get drawnGround() {
@@ -1866,8 +2087,9 @@ let MosaicaMap = (() => {
             return true;
         }
         onKey = (e) => {
-            // From the canvas's container, or deck's canvas inside it, which a click focuses.
-            if (e.target !== e.currentTarget && !(e.target instanceof HTMLCanvasElement))
+            // From the canvas's container, or deck's canvas inside it, which a click focuses. A key that
+            // has already dismissed the tooltip does no more.
+            if (e.defaultPrevented || (e.target !== e.currentTarget && !(e.target instanceof HTMLCanvasElement)))
                 return;
             const step = 64 / 2 ** this.viewState.zoom;
             const [x, y] = this.viewState.target;
@@ -1904,6 +2126,10 @@ let MosaicaMap = (() => {
                     else if (this.pickedAt || this.selectedWorldXY) {
                         this.clearPick();
                     }
+                    else {
+                        // Nothing to clear, so the key is left for whatever holds the map, such as a dialog.
+                        return;
+                    }
                     break;
                 default:
                     return;
@@ -1953,22 +2179,25 @@ let MosaicaMap = (() => {
             const scale = drawnDensityScale(this.densityScale);
             const middle = Math.round(densityCountAt(0.5, max, scale));
             const label = `Density in ${DENSITY_COLOUR_TITLES[colours]}, ${max > 0 ? `from 0 to ${countText(max)} items per cell on a ${scale} scale` : 'from fewer items to more'}`;
-            return html `<div part="density-key" role="img" aria-label=${label}>
+            // What the largest figure counts is a tooltip on the figure and, for a reader of the key's
+            // name, its description.
+            const densest = 'The densest cell in view and around it';
+            return html `<div part="density-key" role="img" aria-label=${label} aria-describedby=${max > 0 ? 'densest' : nothing}>
       <span class="caption">${max > 0 ? 'Items per cell' : 'Density'}</span>
       <span class="ramp" style=${`background:linear-gradient(to right, ${stops.join(', ')})`}></span>
       <span class="ends"
         >${max > 0
-                ? html `<span>0</span><span>${middle >= 1 && middle < max ? countText(middle) : ''}</span><span title="The densest cell in view and around it">${countText(max)}</span>`
+                ? html `<span>0</span><span>${middle >= 1 && middle < max ? countText(middle) : ''}</span><span title=${densest}>${countText(max)}</span>`
                 : html `<span>Fewer</span><span></span><span>More items</span>`}</span
-      >
+      >${max > 0 ? html `<span id="densest" class="sr-only">${densest}</span>` : nothing}
     </div>`;
         }
         /** The note saying why no basemap is drawn under this view, and the tile server's credit. */
         basemapCorner() {
             const { note, attribution } = this.drawnBasemap;
-            if (!note && !attribution)
-                return nothing;
-            return html `${note ? html `<span part="note" role="status">${note}</span>` : nothing}${attribution ? html `<span part="attribution">${attribution}</span>` : nothing}`;
+            // The note's element is there before its words are, so they are announced, and is not drawn
+            // while it has none.
+            return html `<span part="note" class=${note ? nothing : 'sr-only'} role="status">${note ?? nothing}</span>${attribution ? html `<span part="attribution">${attribution}</span>` : nothing}`;
         }
         render() {
             const status = this.resolvedStore?.get('status') ?? null;
@@ -1979,13 +2208,23 @@ let MosaicaMap = (() => {
             // strip's alone.
             const refresh = () => this.resolvedStore?.refresh();
             const nothingVisible = seesNothing(this.resolvedStore, state);
-            const overlay = nothingVisible
-                ? html `<div part="overlay"><span part="state" data-state="empty" data-visible="none">${NOTHING_VISIBLE}</span></div>`
+            const ofView = nothingVisible
+                ? { state, line: { dot: null, words: NOTHING_VISIBLE, action: nothing } }
                 : state === 'refused' || state === 'unanswered' || state === 'busy' || state === 'expired' || state === 'empty' || (state === 'retrying' && status?.unreachable)
-                    ? html `<div part="overlay">${renderState(state, status, { onRefresh: refresh, onRetry: refresh })}</div>`
-                    : this.drawnBasemap.refusal
-                        ? html `<div part="overlay">${refusedState(this.drawnBasemap.refusal, 'basemap')}</div>`
-                        : nothing;
+                    ? { state, line: stateLine(state, status, { onRefresh: refresh, onRetry: refresh }) }
+                    : null;
+            const said = ofView ?? (this.drawnBasemap.refusal ? { state: 'refused', line: refusedLine(this.drawnBasemap.refusal, 'basemap') } : null);
+            // One template whatever the state, so the live element is there before its words are and
+            // each change of them is announced. With no state to show it is not drawn. Nothing in view
+            // is announced as a query's answer; where a pan went, it is shown and not said. `quiet`
+            // leaves the view's states to another element; a basemap's refusal is the map's alone to
+            // say. The selected region's count has a live element of its own, so it is said once,
+            // whatever the state does.
+            const unsaid = ofView !== null && (this.quiet || (state === 'empty' && !nothingVisible && !this.emptyAnswered));
+            const overlay = html `<div part="overlay">
+      <span part="state" class=${said ? nothing : 'sr-only'} data-state=${said?.state ?? state} data-visible=${nothingVisible ? 'none' : nothing}>${liveLine(said?.line ?? NO_LINE, unsaid ? UNSAID : null)}</span>
+      <span class="sr-only" role="status">${this.quiet ? nothing : this.regionHeard}</span>
+    </div>`;
             const controls = this.noControls
                 ? nothing
                 : html `<div part="controls" role="toolbar" aria-label="Map tools">
@@ -2014,12 +2253,14 @@ let MosaicaMap = (() => {
         part="canvas"
         tabindex=${this.canvasTab}
         role="application"
-        aria-label=${this.getAttribute('aria-label') ?? 'map: arrow keys pan, + and - zoom'}
+        aria-label=${this.getAttribute('aria-label') ?? 'Map'}
+        aria-describedby="keys"
         @keydown=${this.onKey}
         @pointerleave=${() => {
                 // deck reports picks only while the pointer is over the canvas, so clear the hover here.
                 if (this.hover)
                     this.hover = null;
+                this.dismissedHover = null;
             }}
         @pointerdown=${{ handleEvent: this.onPointerDown, capture: true }}
         @pointermove=${{ handleEvent: this.onPointerMove, capture: true }}
@@ -2027,11 +2268,13 @@ let MosaicaMap = (() => {
         @pointercancel=${{ handleEvent: this.onPointerUp, capture: true }}
         @lostpointercapture=${{ handleEvent: this.onPointerUp, capture: true }}
       ></div>
+      <span id="keys" class="sr-only">Arrow keys pan, plus and minus zoom, Escape clears the selection.</span>
+      <span id="ground" aria-hidden="true" @transitionrun=${this.onGroundChange}></span>
       ${overlay}
       ${this.regionTag()}
       ${corners.filter((c) => c !== this.controlsCorner).map(corner)}
       ${this.hover
-                ? html `<div part="tooltip" style=${`left:${this.hover.x}px;top:${this.hover.y}px`}>
+                ? html `<div part="tooltip" role="tooltip">
             <slot name="tooltip"><div class="t">${this.hover.title}</div>${this.hover.lines.length > 0 ? html `<div class="s">${this.hover.lines.join(' · ')}</div>` : nothing}</slot>
           </div>`
                 : nothing}`;
@@ -2043,6 +2286,33 @@ export { MosaicaMap };
 function countText(n) {
     return n.toLocaleString('en-GB', { maximumFractionDigits: 0 });
 }
+/** The overlay's line while the map has no state to show. */
+const NO_LINE = { dot: null, words: nothing, action: nothing };
+/** How far the tooltip sits from the pointer along each axis, in pixels. */
+const TOOLTIP_GAP_PX = 14;
+/** The gap between the region's tag and its region, in pixels. */
+const REGION_TAG_GAP_PX = 4;
+/**
+ * A box's top-left corner, moved as little as keeps the box between `min` and `max` on each axis.
+ * A box larger than that room starts at `min`.
+ *
+ * @internal
+ */
+export function keptInside(at, size, min, max) {
+    const axis = (i) => Math.max(min[i], Math.min(at[i], max[i] - size[i]));
+    return [axis(0), axis(1)];
+}
+/**
+ * The tooltip's top-left corner for a pointer at `pointer` on a map of size `map`: below and right
+ * of the pointer, on the pointer's other side along an axis where it would cross the map's far
+ * edge, and inside the map either way.
+ *
+ * @internal
+ */
+export function tooltipCorner(pointer, size, map) {
+    const axis = (i) => (pointer[i] + TOOLTIP_GAP_PX + size[i] > map[i] ? pointer[i] - TOOLTIP_GAP_PX - size[i] : pointer[i] + TOOLTIP_GAP_PX);
+    return keptInside([axis(0), axis(1)], size, [0, 0], map);
+}
 /** The density scale drawn: `linear` where set, else `log`. */
 export function drawnDensityScale(scale) {
     return scale === 'linear' ? 'linear' : 'log';