@mosaicajs/components 0.2.0 → 0.4.0

package/dist/explorer.js

@@ -37,9 +37,9 @@ import { css, html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { CATEGORY_PALETTES, DEFAULT_DENSITY_CELL_PX, DEFAULT_DENSITY_SCALE, DENSITY_CELL_SIZES, RAMPS, cellDepth, nearestStop } from '@mosaicajs/deck';
-import { CLUSTER_PREFIX, PALETTES, WORLD_SIZE, activeCount, artifactName, colourLayers, emptyDraft } from '@mosaicajs/client';
-import { hasOneLayout, sizesPoints, topLevelServed } from '@mosaicajs/client/internal';
-import { DENSITY_COLOUR_TITLES, colourOfFraction, css as rgb, hexOf } from '@mosaicajs/deck/internal';
+import { CLUSTER_PREFIX, PALETTES, WORLD_SIZE, activeCount, artifactName, clustersInView, colourLayers, emptyDraft } from '@mosaicajs/client';
+import { follows, hasOneLayout, levelFollowsZoom, levelOfLayer, sizesPoints } from '@mosaicajs/client/internal';
+import { DENSITY_COLOUR_TITLES, clusterLayerOf, colourOfFraction, css as rgb, hexOf } from '@mosaicajs/deck/internal';
 import { MosaicaElement, columnCaption, emit, shortCount } from './base.js';
 import { placeCallout } from './callout.js';
 import { colouringOf, setColouring, sizingOf, watchChoices } from './colouring.js';
@@ -110,6 +110,8 @@ const px = (n) => n.toLocaleString('en-GB', { maximumFractionDigits: 1 });
 const fill = (v, min, max) => `--fill:${(Math.min(1, Math.max(0, (v - min) / (max - min))) * 100).toFixed(1)}%`;
 /** A ramp as a CSS gradient, low to high. */
 const rampGradient = (ramp, reverse) => `linear-gradient(to right, ${Array.from({ length: 8 }, (_, k) => rgb(colourOfFraction(k / 7, ramp, reverse))).join(', ')})`;
+/** The tick on the entry chosen in a list of choices. */
+const tick = (chosen) => (chosen ? html `<span class="tick">${icon('check', 11, 1.6)}</span>` : nothing);
 /** The Density choices in the Layers popover, in order. */
 const DENSITY_MODES = [
     { mode: 'none', label: 'None' },
@@ -124,7 +126,16 @@ const CALLOUT_SIZE = { width: 300, height: 220 };
 const CALLOUT_REST_MS = 200;
 /** The shortest a callout is made to fit beside its point; what does not fit scrolls inside it. */
 const CALLOUT_MIN_HEIGHT = 180;
-/** The narrow layout's tabs, each opening a sheet, drawn where its panel is. */
+/** The controls Tab stops at. */
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/** Whether `node` is `container` or inside it, through slots and shadow roots. */
+function within(node, container) {
+    for (let at = node; at; at = (at instanceof Element ? at.assignedSlot : null) ?? at.parentNode ?? (at instanceof ShadowRoot ? at.host : null))
+        if (at === container)
+            return true;
+    return false;
+}
+/** The narrow layout's buttons, each opening a sheet, drawn where its panel is. */
 const TABS = [
     { sheet: 'filters', icon: 'filter', label: 'Fields', panel: 'filters' },
     { sheet: 'layers', icon: 'layers', label: 'Layers', panel: 'legend' },
@@ -153,7 +164,20 @@ const TABS = [
  * HTML.
  *
  * Below 1000 px the explorer uses the overlay layout whatever `layout` says. At 720 px or less it
- * opens its panels as sheets from a tab bar.
+ * opens its panels as sheets from a bar of buttons under the map, and a picked item's card opens
+ * in the Item sheet. A sheet that reaches up over the map's tools makes the map behind it inert
+ * until it closes.
+ *
+ * The status strip speaks for the explorer: its map and its selection card are set `quiet`, so a
+ * change is announced once. Where you put something other than a `<mosaica-status>` in the
+ * `status` slot, they announce for themselves.
+ *
+ * An `aria-label` on the explorer names its map, so a page with several explorers can tell them
+ * apart.
+ *
+ * A dataset title, a view's name or a layer's name too long for its line is cut with an ellipsis
+ * and keeps all of it in its `title`. Set `--mosaica-long-text: normal` to wrap them. The narrow
+ * layout wraps them itself.
  *
  * @summary A complete map application in a single element.
  * @tagname mosaica-explorer
@@ -163,7 +187,7 @@ const TABS = [
  * @slot filters - Replaces the filter panel.
  * @slot selection - Replaces the selection panel, shown while a region is selected.
  * @slot detail - Replaces the item and artifact cards, in the card beside the point.
- * @slot status - Replaces the status strip drawn on the map.
+ * @slot status - Replaces the status strip: on the map, or under it in the narrow layout.
  * @slot tooltip - Replaces the map's hover tooltip.
  * @slot top-right - Content in the map's top-right corner, above the selection's card.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-viewchange']>} mosaica-viewchange - The map's camera moved.
@@ -176,11 +200,11 @@ const TABS = [
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-selectchange']>} mosaica-selectchange - A selection was drawn, changed or cleared, or its counts arrived.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-layerchange']>} mosaica-layerchange - The layers chosen changed.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-colourchange']>} mosaica-colourchange - Colour by changed, in the Layers popover or by a card's paint button.
- * @fires {CustomEvent<MosaicaEventDetails['mosaica-levelchange']>} mosaica-levelchange - The level a layer is coloured and labelled at changed.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-levelchange']>} mosaica-levelchange - The level one layer is counted, coloured and labelled at changed.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-displaychange']>} mosaica-displaychange - A setting in the Points or Density section changed.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-sizechange']>} mosaica-sizechange - Size by, the size range or the scale changed in the Points section.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-budgetchange']>} mosaica-budgetchange - Most points was let go at a new number.
- * @fires {CustomEvent<MosaicaEventDetails['mosaica-clusterbudgetchange']>} mosaica-clusterbudgetchange - Most clusters was let go at a new number.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-clusterspacingchange']>} mosaica-clusterspacingchange - Cluster density was let go at a new spacing.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-fold']>} mosaica-fold - A field card was folded to one line or opened.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-valuecolour']>} mosaica-valuecolour - Colours were chosen or reset for values of a category, on a field card or in Edit colours.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-clustercolour']>} mosaica-clustercolour - Colours were chosen or reset for clusters of a layer, on a field card or in Edit colours.
@@ -217,8 +241,9 @@ const TABS = [
  * @csspart points-toggle - The Points switch, with `aria-checked`.
  * @csspart most-points - The Most points slider.
  * @csspart most-points-value - The number of points it stands at, such as "250K".
- * @csspart most-clusters - The Most clusters slider, while a `nested` or `dag` layer is drawn.
- * @csspart most-clusters-value - The number of clusters it stands at, such as "1K".
+ * @csspart cluster-density - The Cluster density slider, while a `nested` or `dag` layer is drawn, or a
+ *   levelled layer whose level follows the zoom is drawn or coloured by.
+ * @csspart cluster-density-value - How many clusters it gives the map at its size, such as "96".
  * @csspart size-by - The Size by button, naming the column the points are sized by or None, with
  *   `aria-expanded` while its menu is open.
  * @csspart size-menu - The Size by menu, while it is open.
@@ -235,7 +260,8 @@ const TABS = [
  *   `aria-expanded` while its menu is open.
  * @csspart colour-menu - The Colour by menu, while it is open.
  * @csspart colour-option - An entry in the Colour by menu, with `data-value` (empty for None,
- *   `cluster:<layer>@<level>` for one level of a levelled layer) and `aria-checked`.
+ *   `cluster:<layer>@<level>` for one level of a levelled layer, `cluster:<layer>@` for Follow zoom
+ *   on one whose levels declare no zoom range) and `aria-checked`.
  * @csspart palette - The Palette button, while the points are coloured by a layer or a category.
  * @csspart palette-menu - The Palette menu, while it is open.
  * @csspart palette-option - A palette in that menu, with `data-value` and `aria-checked`.
@@ -259,9 +285,10 @@ const TABS = [
  * @csspart detail - The item or artifact card in the map's top-right corner, used when the picked
  *   item or artifact has no position on the map, such as after following an item into another
  *   view.
- * @csspart sheet - The open sheet, in the narrow layout.
+ * @csspart sheet - The open sheet, over the map in the narrow layout.
  * @csspart strip-row - The full-width status strip, in the narrow layout.
- * @csspart tabs - The tab bar, in the narrow layout.
+ * @csspart tabs - The bar of buttons that open the sheets, in the narrow layout, each with
+ *   `data-sheet` and `aria-expanded`.
  * @csspart map-<part> - A part of the inner `<mosaica-map>`, such as `map-controls`.
  * @csspart status-<part> - A part of an inner `<mosaica-status>`.
  * @csspart view-picker-<part> - A part of the inner `<mosaica-view-picker>`.
@@ -305,6 +332,9 @@ let MosaicaExplorer = (() => {
     let _cardFields_decorators;
     let _cardFields_initializers = [];
     let _cardFields_extraInitializers = [];
+    let _imageFields_decorators;
+    let _imageFields_initializers = [];
+    let _imageFields_extraInitializers = [];
     let _openUrl_decorators;
     let _openUrl_initializers = [];
     let _openUrl_extraInitializers = [];
@@ -320,15 +350,15 @@ let MosaicaExplorer = (() => {
     let _budgetMax_decorators;
     let _budgetMax_initializers = [];
     let _budgetMax_extraInitializers = [];
-    let _clusterBudget_decorators;
-    let _clusterBudget_initializers = [];
-    let _clusterBudget_extraInitializers = [];
-    let _clusterBudgetMin_decorators;
-    let _clusterBudgetMin_initializers = [];
-    let _clusterBudgetMin_extraInitializers = [];
-    let _clusterBudgetMax_decorators;
-    let _clusterBudgetMax_initializers = [];
-    let _clusterBudgetMax_extraInitializers = [];
+    let _clusterSpacing_decorators;
+    let _clusterSpacing_initializers = [];
+    let _clusterSpacing_extraInitializers = [];
+    let _clusterSpacingMin_decorators;
+    let _clusterSpacingMin_initializers = [];
+    let _clusterSpacingMin_extraInitializers = [];
+    let _clusterSpacingMax_decorators;
+    let _clusterSpacingMax_initializers = [];
+    let _clusterSpacingMax_extraInitializers = [];
     let _basemap_decorators;
     let _basemap_initializers = [];
     let _basemap_extraInitializers = [];
@@ -419,9 +449,9 @@ let MosaicaExplorer = (() => {
     let _tabFocus_decorators;
     let _tabFocus_initializers = [];
     let _tabFocus_extraInitializers = [];
-    let _level_decorators;
-    let _level_initializers = [];
-    let _level_extraInitializers = [];
+    let _levels_decorators;
+    let _levels_initializers = [];
+    let _levels_extraInitializers = [];
     let _pinned_decorators;
     let _pinned_initializers = [];
     let _pinned_extraInitializers = [];
@@ -448,14 +478,15 @@ let MosaicaExplorer = (() => {
             _titleField_decorators = [property({ attribute: 'title-field' })];
             _subtitleField_decorators = [property({ attribute: 'subtitle-field' })];
             _cardFields_decorators = [property({ attribute: 'card-fields' })];
+            _imageFields_decorators = [property({ attribute: 'image-fields' })];
             _openUrl_decorators = [property({ attribute: 'open-url' })];
             _open_decorators = [property({ attribute: false })];
             _budget_decorators = [property({ type: Number })];
             _budgetMin_decorators = [property({ type: Number, attribute: 'budget-min' })];
             _budgetMax_decorators = [property({ type: Number, attribute: 'budget-max' })];
-            _clusterBudget_decorators = [property({ type: Number, attribute: 'cluster-budget' })];
-            _clusterBudgetMin_decorators = [property({ type: Number, attribute: 'cluster-budget-min' })];
-            _clusterBudgetMax_decorators = [property({ type: Number, attribute: 'cluster-budget-max' })];
+            _clusterSpacing_decorators = [property({ type: Number, attribute: 'cluster-spacing' })];
+            _clusterSpacingMin_decorators = [property({ type: Number, attribute: 'cluster-spacing-min' })];
+            _clusterSpacingMax_decorators = [property({ type: Number, attribute: 'cluster-spacing-max' })];
             _basemap_decorators = [property({ hasChanged: basemapChanged })];
             _noPoints_decorators = [property({ type: Boolean, attribute: 'no-points' })];
             _radius_decorators = [property({ type: Number })];
@@ -486,7 +517,7 @@ let MosaicaExplorer = (() => {
             _densityColoursOpen_decorators = [state()];
             _sheet_decorators = [state()];
             _tabFocus_decorators = [state()];
-            _level_decorators = [state()];
+            _levels_decorators = [state()];
             _pinned_decorators = [state()];
             _layersOpen_decorators = [state()];
             _compact_decorators = [state()];
@@ -500,14 +531,15 @@ let MosaicaExplorer = (() => {
             __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, _subtitleField_decorators, { kind: "accessor", name: "subtitleField", static: false, private: false, access: { has: obj => "subtitleField" in obj, get: obj => obj.subtitleField, set: (obj, value) => { obj.subtitleField = value; } }, metadata: _metadata }, _subtitleField_initializers, _subtitleField_extraInitializers);
             __esDecorate(this, null, _cardFields_decorators, { kind: "accessor", name: "cardFields", static: false, private: false, access: { has: obj => "cardFields" in obj, get: obj => obj.cardFields, set: (obj, value) => { obj.cardFields = value; } }, metadata: _metadata }, _cardFields_initializers, _cardFields_extraInitializers);
+            __esDecorate(this, null, _imageFields_decorators, { kind: "accessor", name: "imageFields", static: false, private: false, access: { has: obj => "imageFields" in obj, get: obj => obj.imageFields, set: (obj, value) => { obj.imageFields = value; } }, metadata: _metadata }, _imageFields_initializers, _imageFields_extraInitializers);
             __esDecorate(this, null, _openUrl_decorators, { kind: "accessor", name: "openUrl", static: false, private: false, access: { has: obj => "openUrl" in obj, get: obj => obj.openUrl, set: (obj, value) => { obj.openUrl = value; } }, metadata: _metadata }, _openUrl_initializers, _openUrl_extraInitializers);
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_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, _budgetMin_decorators, { kind: "accessor", name: "budgetMin", static: false, private: false, access: { has: obj => "budgetMin" in obj, get: obj => obj.budgetMin, set: (obj, value) => { obj.budgetMin = value; } }, metadata: _metadata }, _budgetMin_initializers, _budgetMin_extraInitializers);
             __esDecorate(this, null, _budgetMax_decorators, { kind: "accessor", name: "budgetMax", static: false, private: false, access: { has: obj => "budgetMax" in obj, get: obj => obj.budgetMax, set: (obj, value) => { obj.budgetMax = value; } }, metadata: _metadata }, _budgetMax_initializers, _budgetMax_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, _clusterBudgetMin_decorators, { kind: "accessor", name: "clusterBudgetMin", static: false, private: false, access: { has: obj => "clusterBudgetMin" in obj, get: obj => obj.clusterBudgetMin, set: (obj, value) => { obj.clusterBudgetMin = value; } }, metadata: _metadata }, _clusterBudgetMin_initializers, _clusterBudgetMin_extraInitializers);
-            __esDecorate(this, null, _clusterBudgetMax_decorators, { kind: "accessor", name: "clusterBudgetMax", static: false, private: false, access: { has: obj => "clusterBudgetMax" in obj, get: obj => obj.clusterBudgetMax, set: (obj, value) => { obj.clusterBudgetMax = value; } }, metadata: _metadata }, _clusterBudgetMax_initializers, _clusterBudgetMax_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, _clusterSpacingMin_decorators, { kind: "accessor", name: "clusterSpacingMin", static: false, private: false, access: { has: obj => "clusterSpacingMin" in obj, get: obj => obj.clusterSpacingMin, set: (obj, value) => { obj.clusterSpacingMin = value; } }, metadata: _metadata }, _clusterSpacingMin_initializers, _clusterSpacingMin_extraInitializers);
+            __esDecorate(this, null, _clusterSpacingMax_decorators, { kind: "accessor", name: "clusterSpacingMax", static: false, private: false, access: { has: obj => "clusterSpacingMax" in obj, get: obj => obj.clusterSpacingMax, set: (obj, value) => { obj.clusterSpacingMax = value; } }, metadata: _metadata }, _clusterSpacingMax_initializers, _clusterSpacingMax_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, _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);
             __esDecorate(this, null, _radius_decorators, { kind: "accessor", name: "radius", static: false, private: false, access: { has: obj => "radius" in obj, get: obj => obj.radius, set: (obj, value) => { obj.radius = value; } }, metadata: _metadata }, _radius_initializers, _radius_extraInitializers);
@@ -538,7 +570,7 @@ let MosaicaExplorer = (() => {
             __esDecorate(this, null, _densityColoursOpen_decorators, { kind: "accessor", name: "densityColoursOpen", static: false, private: false, access: { has: obj => "densityColoursOpen" in obj, get: obj => obj.densityColoursOpen, set: (obj, value) => { obj.densityColoursOpen = value; } }, metadata: _metadata }, _densityColoursOpen_initializers, _densityColoursOpen_extraInitializers);
             __esDecorate(this, null, _sheet_decorators, { kind: "accessor", name: "sheet", static: false, private: false, access: { has: obj => "sheet" in obj, get: obj => obj.sheet, set: (obj, value) => { obj.sheet = value; } }, metadata: _metadata }, _sheet_initializers, _sheet_extraInitializers);
             __esDecorate(this, null, _tabFocus_decorators, { kind: "accessor", name: "tabFocus", static: false, private: false, access: { has: obj => "tabFocus" in obj, get: obj => obj.tabFocus, set: (obj, value) => { obj.tabFocus = value; } }, metadata: _metadata }, _tabFocus_initializers, _tabFocus_extraInitializers);
-            __esDecorate(this, null, _level_decorators, { kind: "accessor", name: "level", static: false, private: false, access: { has: obj => "level" in obj, get: obj => obj.level, set: (obj, value) => { obj.level = value; } }, metadata: _metadata }, _level_initializers, _level_extraInitializers);
+            __esDecorate(this, null, _levels_decorators, { kind: "accessor", name: "levels", static: false, private: false, access: { has: obj => "levels" in obj, get: obj => obj.levels, set: (obj, value) => { obj.levels = value; } }, metadata: _metadata }, _levels_initializers, _levels_extraInitializers);
             __esDecorate(this, null, _pinned_decorators, { kind: "accessor", name: "pinned", static: false, private: false, access: { has: obj => "pinned" in obj, get: obj => obj.pinned, set: (obj, value) => { obj.pinned = value; } }, metadata: _metadata }, _pinned_initializers, _pinned_extraInitializers);
             __esDecorate(this, null, _layersOpen_decorators, { kind: "accessor", name: "layersOpen", static: false, private: false, access: { has: obj => "layersOpen" in obj, get: obj => obj.layersOpen, set: (obj, value) => { obj.layersOpen = value; } }, metadata: _metadata }, _layersOpen_initializers, _layersOpen_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);
@@ -593,6 +625,13 @@ let MosaicaExplorer = (() => {
         height: 100%;
         min-height: 320px;
       }
+      /* The narrow layout's map takes the height its bars leave. */
+      @container explorer (max-width: 720px) {
+        mosaica-map,
+        ::slotted(mosaica-map) {
+          min-height: 0;
+        }
+      }
       /* What the map draws at its top-left, its tools or a region's tag, sits right of the card; in
          the narrow layout there is no card. */
       @container explorer (width > 720px) {
@@ -689,11 +728,17 @@ let MosaicaExplorer = (() => {
         min-width: 0;
       }
       .title {
+        display: block;
+        margin: 0;
         font-size: 15px;
         font-weight: 600;
+        letter-spacing: 0;
+        text-transform: none;
+        color: var(--_mosaica-ink);
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        white-space: var(--_mosaica-long-text);
+        overflow-wrap: anywhere;
       }
       .compact .title {
         font-size: 14px;
@@ -772,6 +817,10 @@ let MosaicaExplorer = (() => {
           linear-gradient(transparent, color-mix(in srgb, var(--_mosaica-ink) 16%, transparent)) bottom / 100% 10px no-repeat scroll,
           var(--_mosaica-surface);
       }
+      [part='layers-popover']:focus-visible,
+      [part='sheet']:focus-visible {
+        outline-offset: -2px;
+      }
       [part='layers-popover'] mosaica-layer-picker,
       [part='sheet'] mosaica-layer-picker {
         display: block;
@@ -852,6 +901,7 @@ let MosaicaExplorer = (() => {
       }
       [part='pin'][aria-pressed='true'] {
         background: var(--_mosaica-surface-3);
+        box-shadow: inset 0 -2px 0 var(--_mosaica-accent);
         color: var(--_mosaica-ink);
       }
       /* The selection keeps its heading, counts and actions; only its list of marks scrolls, so the
@@ -898,18 +948,22 @@ let MosaicaExplorer = (() => {
         padding: 10px 16px;
       }
       @container explorer (max-width: 720px) {
+        /* The map keeps a floor under its height; a frame too short for it and the bars scrolls.
+           A long title or name wraps here, in the explorer and in the elements it holds. */
         [part='frame'],
         [part='frame'].docked {
+          --mosaica-long-text: normal;
+          --_mosaica-long-text: normal;
           grid-template-columns: minmax(0, 1fr);
-          grid-template-rows: minmax(0, 1fr) auto;
+          grid-template-rows: minmax(120px, 1fr) auto auto;
+          overflow: hidden auto;
         }
         [part='frame'].titled {
-          grid-template-rows: auto minmax(0, 1fr) auto;
+          grid-template-rows: auto minmax(120px, 1fr) auto auto;
         }
         [part='sidebar'],
         [part='panel'],
         .layers,
-        .right,
         .callouts,
         .in-map-strip {
           display: none;
@@ -933,30 +987,37 @@ let MosaicaExplorer = (() => {
           font-size: 11px;
           font-weight: 500;
         }
-        [part='tabs'] button[aria-selected='true'] {
+        [part='tabs'] button[aria-expanded='true'] {
+          box-shadow: inset 0 2px 0 var(--_mosaica-accent);
           color: var(--_mosaica-ink);
           font-weight: 600;
         }
+        /* The sheet opens over the map alone, so the strip and the bar under it stay in reach. A
+           short map gives the sheet all of its height. */
         [part='sheet'] {
           position: absolute;
           left: 0;
           right: 0;
-          bottom: 56px;
-          max-height: 70%;
-          overflow-y: auto;
+          bottom: 0;
+          max-height: max(80%, min(100%, 240px));
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
           background: var(--_mosaica-surface);
           border-top: 1px solid var(--_mosaica-line);
           border-radius: 12px 12px 0 0;
           box-shadow: var(--_mosaica-shadow);
           z-index: 6;
         }
-        /* The sheet takes focus as it opens so a keyboard lands in it; that is not a focus to show. */
-        [part='sheet']:focus-visible {
-          outline: none;
+        /* What the sheet holds scrolls between its handle and its footer, so nothing goes under the footer. */
+        .sheet-body {
+          flex: 0 1 auto;
+          min-height: 0;
+          overflow-y: auto;
+          overscroll-behavior: contain;
         }
         .sheet-footer {
-          position: sticky;
-          bottom: 0;
+          flex: none;
           display: flex;
           gap: 10px;
           padding: 10px 16px;
@@ -973,7 +1034,7 @@ let MosaicaExplorer = (() => {
         }
         [part='sheet']::before {
           content: '';
-          display: block;
+          flex: none;
           width: 36px;
           height: 4px;
           border-radius: 2px;
@@ -992,8 +1053,18 @@ let MosaicaExplorer = (() => {
           box-shadow: none;
           border-radius: 0;
           border-width: 1px 0 0;
-          height: 44px;
-          overflow-x: auto;
+          min-height: 44px;
+        }
+      }
+      @media (forced-colors: active) {
+        [part='layers-toggle'] .on {
+          forced-color-adjust: none;
+          background: Highlight;
+        }
+        [part='tabs'] button[aria-expanded='true'] {
+          forced-color-adjust: none;
+          background: Highlight;
+          color: HighlightText;
         }
       }
     `
@@ -1038,7 +1109,11 @@ let MosaicaExplorer = (() => {
         /** The fields the item card shows before "Show all", in order, as for `<mosaica-item-card>`. Unset, the first three. */
         get cardFields() { return this.#cardFields_accessor_storage; }
         set cardFields(value) { this.#cardFields_accessor_storage = value; }
-        #openUrl_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
+        #imageFields_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _imageFields_initializers, ''));
+        /** The fields the item card draws as images, as for `<mosaica-item-card>`'s `image-fields`. */
+        get imageFields() { return this.#imageFields_accessor_storage; }
+        set imageFields(value) { this.#imageFields_accessor_storage = value; }
+        #openUrl_accessor_storage = (__runInitializers(this, _imageFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
         /** The link template for the item card's Open button, as for `<mosaica-item-card>`. Without it or `open`, there is no Open button. */
         get openUrl() { return this.#openUrl_accessor_storage; }
         set openUrl(value) { this.#openUrl_accessor_storage = value; }
@@ -1061,22 +1136,24 @@ let MosaicaExplorer = (() => {
         /** The highest value of the Most points slider. */
         get budgetMax() { return this.#budgetMax_accessor_storage; }
         set budgetMax(value) { this.#budgetMax_accessor_storage = value; }
-        #clusterBudget_accessor_storage = (__runInitializers(this, _budgetMax_extraInitializers), __runInitializers(this, _clusterBudget_initializers, 1_000));
+        #clusterSpacing_accessor_storage = (__runInitializers(this, _budgetMax_extraInitializers), __runInitializers(this, _clusterSpacing_initializers, 100));
         /**
-         * The most clusters a `nested` or `dag` layer is cut to; `0` removes the limit. Most clusters in
-         * the Layers popover changes it.
+         * The side in CSS pixels of the square of the map each cluster is given, as for `<mosaica-map>`'s
+         * `cluster-spacing`: at 100, a map 1,200 by 800 pixels cuts a `nested` or `dag` layer to 96
+         * clusters, and a level that follows the zoom may have 96 in view. `0` removes the limit. Most
+         * clusters in the Layers popover changes it.
          */
-        get clusterBudget() { return this.#clusterBudget_accessor_storage; }
-        set clusterBudget(value) { this.#clusterBudget_accessor_storage = value; }
-        #clusterBudgetMin_accessor_storage = (__runInitializers(this, _clusterBudget_extraInitializers), __runInitializers(this, _clusterBudgetMin_initializers, 10));
-        /** The lowest value of the Most clusters slider. */
-        get clusterBudgetMin() { return this.#clusterBudgetMin_accessor_storage; }
-        set clusterBudgetMin(value) { this.#clusterBudgetMin_accessor_storage = value; }
-        #clusterBudgetMax_accessor_storage = (__runInitializers(this, _clusterBudgetMin_extraInitializers), __runInitializers(this, _clusterBudgetMax_initializers, 10_000));
-        /** The highest value of the Most clusters slider. */
-        get clusterBudgetMax() { return this.#clusterBudgetMax_accessor_storage; }
-        set clusterBudgetMax(value) { this.#clusterBudgetMax_accessor_storage = value; }
-        #basemap_accessor_storage = (__runInitializers(this, _clusterBudgetMax_extraInitializers), __runInitializers(this, _basemap_initializers, null));
+        get clusterSpacing() { return this.#clusterSpacing_accessor_storage; }
+        set clusterSpacing(value) { this.#clusterSpacing_accessor_storage = value; }
+        #clusterSpacingMin_accessor_storage = (__runInitializers(this, _clusterSpacing_extraInitializers), __runInitializers(this, _clusterSpacingMin_initializers, 50));
+        /** The smallest spacing Cluster density offers, at its More end. */
+        get clusterSpacingMin() { return this.#clusterSpacingMin_accessor_storage; }
+        set clusterSpacingMin(value) { this.#clusterSpacingMin_accessor_storage = value; }
+        #clusterSpacingMax_accessor_storage = (__runInitializers(this, _clusterSpacingMin_extraInitializers), __runInitializers(this, _clusterSpacingMax_initializers, 400));
+        /** The largest spacing Cluster density offers, at its Fewer end. */
+        get clusterSpacingMax() { return this.#clusterSpacingMax_accessor_storage; }
+        set clusterSpacingMax(value) { this.#clusterSpacingMax_accessor_storage = value; }
+        #basemap_accessor_storage = (__runInitializers(this, _clusterSpacingMax_extraInitializers), __runInitializers(this, _basemap_initializers, null));
         /**
          * What is drawn under the points, as for `<mosaica-map>`'s `basemap`. The attribute takes `world`
          * and `none`. Unset, a view with a map projection gets the world outline and any other view gets
@@ -1191,7 +1268,7 @@ let MosaicaExplorer = (() => {
         get pointsDragged() { return this.#pointsDragged_accessor_storage; }
         set pointsDragged(value) { this.#pointsDragged_accessor_storage = value; }
         #clustersDragged_accessor_storage = (__runInitializers(this, _pointsDragged_extraInitializers), __runInitializers(this, _clustersDragged_initializers, null));
-        /** Where Most clusters is being dragged, before it is let go. @internal */
+        /** The cluster spacing Cluster density is being dragged to, before it is let go. @internal */
         get clustersDragged() { return this.#clustersDragged_accessor_storage; }
         set clustersDragged(value) { this.#clustersDragged_accessor_storage = value; }
         #densityColoursOpen_accessor_storage = (__runInitializers(this, _clustersDragged_extraInitializers), __runInitializers(this, _densityColoursOpen_initializers, false));
@@ -1203,14 +1280,33 @@ let MosaicaExplorer = (() => {
         get sheet() { return this.#sheet_accessor_storage; }
         set sheet(value) { this.#sheet_accessor_storage = value; }
         #tabFocus_accessor_storage = (__runInitializers(this, _sheet_extraInitializers), __runInitializers(this, _tabFocus_initializers, null));
-        /** The narrow layout's tab focused last, which keeps the tab list's one place in the tab order. */
+        /** The narrow layout's button focused last, which keeps the bar's one place in the tab order. */
         get tabFocus() { return this.#tabFocus_accessor_storage; }
         set tabFocus(value) { this.#tabFocus_accessor_storage = value; }
-        #level_accessor_storage = (__runInitializers(this, _tabFocus_extraInitializers), __runInitializers(this, _level_initializers, null));
-        /** The level a layer is coloured and labelled at, chosen on its card or in Colour by. @internal */
-        get level() { return this.#level_accessor_storage; }
-        set level(value) { this.#level_accessor_storage = value; }
-        #pinned_accessor_storage = (__runInitializers(this, _level_extraInitializers), __runInitializers(this, _pinned_initializers, []));
+        /**
+         * What the selection's card shows, as last seen: the record or the refusal the store holds, or
+         * the map's broken pick; null for no card. Picking the same item again brings a new record.
+         */
+        cardSeen = (__runInitializers(this, _tabFocus_extraInitializers), null);
+        /** Where focus was before the update being drawn: in the open sheet, elsewhere in the explorer, or outside it. */
+        focusBefore = null;
+        /** Whether the host put something other than a status strip in the `status` slot, so no strip speaks. */
+        get stripReplaced() {
+            const given = Array.from(this.children).filter((el) => el.slot === 'status');
+            return given.length > 0 && !given.some((el) => el.localName === 'mosaica-status' || el.querySelector('mosaica-status') !== null);
+        }
+        /** What the host put in the `status` slot changed, and with it whether a strip speaks. */
+        onStatusSlot = () => this.requestUpdate();
+        /** What the status region says: the card that opened last. */
+        announced = '';
+        #levels_accessor_storage = __runInitializers(this, _levels_initializers, new Map());
+        /**
+         * The level each layer is counted, coloured and labelled at, chosen on its card or in Colour by,
+         * keyed by layer name. A layer with no entry takes its default level. @internal
+         */
+        get levels() { return this.#levels_accessor_storage; }
+        set levels(value) { this.#levels_accessor_storage = value; }
+        #pinned_accessor_storage = (__runInitializers(this, _levels_extraInitializers), __runInitializers(this, _pinned_initializers, []));
         /** The cards kept open by Pin, oldest first. @internal */
         get pinned() { return this.#pinned_accessor_storage; }
         set pinned(value) { this.#pinned_accessor_storage = value; }
@@ -1285,6 +1381,61 @@ let MosaicaExplorer = (() => {
             }
             super.onStoreChange();
         }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'aria-label'];
+        }
+        /** An `aria-label` on the explorer is passed to its map. */
+        attributeChangedCallback(name, old, value) {
+            super.attributeChangedCallback(name, old, value);
+            if (name === 'aria-label')
+                this.requestUpdate();
+        }
+        /**
+         * As the selection's card comes, changes or goes. The wide layouts say which card opened in the
+         * status region. The narrow layout opens the Item sheet for it, and closes that sheet with it; a
+         * card that arrives while the viewer's focus is in another sheet leaves that sheet open. Sheets
+         * are the narrow layout's: growing wider closes the open one, and growing narrow with a card
+         * open opens the Item sheet.
+         */
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            const sheet = this.renderRoot?.querySelector('[part="sheet"]') ?? null;
+            this.focusBefore = sheet && within(this.shadowRoot?.activeElement ?? null, sheet) ? 'sheet' : this.holdsFocus() ? 'explorer' : null;
+            const card = this.cardSubject();
+            const fresh = card !== this.cardSeen;
+            this.cardSeen = card;
+            if (fresh)
+                this.announced = card && !this.narrow ? `${this.cardName(this.liveKey())}, card opened` : '';
+            if (!this.narrow) {
+                this.sheet = null;
+                return;
+            }
+            if (card && (fresh || changed.has('narrow'))) {
+                if (this.sheet === null || this.focusBefore === 'explorer')
+                    this.sheet = 'detail';
+            }
+            else if (fresh && this.sheet === 'detail')
+                this.sheet = null;
+        }
+        /** Whether focus is in the explorer: in its own tree, or in an element the host put in a slot. */
+        holdsFocus() {
+            const active = this.getRootNode().activeElement;
+            return active !== null && this.contains(active);
+        }
+        /** What the selection's card shows, or null where it has nothing to show or `panels` leaves the card out. */
+        cardSubject() {
+            if (!this.has('detail'))
+                return null;
+            const sel = this.resolvedStore?.get('selection');
+            const broken = this.map?.lastPick?.kind === 'broken' ? this.map.lastPick : null;
+            const artifact = sel?.artifact ?? sel?.artifactRefusal ?? null;
+            return (this.showsArtifact() ? artifact : (sel?.item ?? sel?.itemRefusal ?? artifact)) ?? broken;
+        }
+        /** Whether the selection has a card to show: a click that found nothing shows none, and a broken pick shows its fault. */
+        hasDetail() {
+            const selection = this.resolvedStore?.get('selection');
+            return Boolean(selection?.item || selection?.artifact || selection?.artifactRefusal || selection?.itemRefusal || this.map?.lastPick?.kind === 'broken');
+        }
         connectedCallback() {
             super.connectedCallback();
             if (typeof ResizeObserver === 'undefined')
@@ -1341,6 +1492,19 @@ let MosaicaExplorer = (() => {
             if (group && !path.includes(group) && !(editor && path.includes(editor)))
                 this.closeLayers();
         };
+        /**
+         * Focus going from the Layers button, its popover or their menus to somewhere else in the page
+         * closes the popover. The Edit colours dialog it opens is not somewhere else.
+         */
+        onLayersFocusOut = (e) => {
+            const to = e.relatedTarget;
+            if (!this.layersOpen || !(to instanceof Node))
+                return;
+            const editor = this.renderRoot.querySelector('mosaica-colour-editor');
+            if (within(to, e.currentTarget) || (editor && within(to, editor)))
+                return;
+            this.closeLayers();
+        };
         openLayers() {
             this.layersOpen = true;
             document.addEventListener('pointerdown', this.onOutside, true);
@@ -1348,12 +1512,12 @@ let MosaicaExplorer = (() => {
         closeLayers() {
             this.layersOpen = false;
             this.menu = null;
+            this.densityColoursOpen = false;
             document.removeEventListener('pointerdown', this.onOutside, true);
         }
         render() {
             const s = this.resolvedStore;
             const region = s?.get('region') ?? null;
-            const selection = s?.get('selection');
             const meta = s?.get('meta') ?? null;
             const artifacts = s?.get('artifacts');
             const layersOn = artifacts?.layers.length ?? 0;
@@ -1362,9 +1526,8 @@ let MosaicaExplorer = (() => {
             const narrow = this.narrow;
             // Short of room, the docked layout takes the overlay's form.
             const floating = this.layout === 'overlay' || compact;
-            const level = this.level;
-            // A click that found nothing shows no card; a broken pick shows its fault.
-            const hasDetail = Boolean(selection?.item || selection?.artifact || selection?.artifactRefusal || selection?.itemRefusal || this.map?.lastPick?.kind === 'broken');
+            const levels = this.levels;
+            const hasDetail = this.hasDetail();
             // The detail shows whichever changed last.
             const showArtifact = this.showsArtifact();
             const detail = this.liveCard(showArtifact);
@@ -1377,43 +1540,50 @@ let MosaicaExplorer = (() => {
             const shown = meta?.views.find((v) => v.id === s?.get('view').id) ?? (meta?.views.length === 1 ? meta.views[0] : undefined);
             // A name that is only the view's id says nothing to a reader.
             const viewName = shown && shown.displayName !== shown.id ? shown.displayName : '';
-            const viewText = (cls) => (pickersShown || !viewName ? nothing : html `<span part="view-name" class=${cls}>${viewName}</span>`);
+            // The heading is the dataset's title, or without one the view's name.
             const names = this.datasetTitle
-                ? html `<div class="names"><span part="dataset-title" class="title">${this.datasetTitle}</span><div class="sub">${pickers}${viewText('')}</div></div>`
-                : html `<div class="names">${pickers}${viewText('title')}</div>`;
+                ? html `<div class="names"><h2 part="dataset-title" class="title" title=${this.datasetTitle}>${this.datasetTitle}</h2><div class="sub">${pickers}${pickersShown || !viewName ? nothing : html `<span part="view-name">${viewName}</span>`}</div></div>`
+                : html `<div class="names">${pickers}${pickersShown || !viewName ? nothing : html `<h2 part="view-name" class="title" title=${viewName}>${viewName}</h2>`}</div>`;
             const named = pickersShown || viewName !== '' || this.datasetTitle !== '';
             const layersPanel = html `<slot name="layers"><mosaica-layer-picker exportparts=${FORWARD['layer-picker']}></mosaica-layer-picker></slot>`;
-            const filters = html `<slot name="filters"><mosaica-filter-panel exportparts=${FORWARD['filter-panel']} pinned=${this.pinnedFilters || nothing} ?compact=${compact || narrow} .clusterLevel=${level}></mosaica-filter-panel></slot>`;
-            const selectionPanel = this.has('selection') && region ? html `<slot name="selection"><mosaica-selection exportparts=${FORWARD.selection}></mosaica-selection></slot>` : nothing;
+            const filters = html `<slot name="filters"><mosaica-filter-panel exportparts=${FORWARD['filter-panel']} pinned=${this.pinnedFilters || nothing} ?compact=${compact || narrow} .clusterLevels=${levels}></mosaica-filter-panel></slot>`;
+            // The status strip speaks for the map and the selection card, unless the host replaced it with something else.
+            const quiet = !this.stripReplaced;
+            const selectionPanel = this.has('selection') && region ? html `<slot name="selection"><mosaica-selection exportparts=${FORWARD.selection} ?quiet=${quiet}></mosaica-selection></slot>` : nothing;
             const selectionCard = selectionPanel === nothing ? nothing : html `<div part="selection-card" class="card">${selectionPanel}</div>`;
             const head = html `<div class="head" ?hidden=${!named}>${names}</div>`;
             // The card beside the point, where the map holds a position for what is selected; else the
             // card stands in the top-right corner.
             const anchor = this.liveAnchor(showArtifact);
             const detailInColumn = this.has('detail') && hasDetail && anchor === null;
-            const right = html `<div slot="top-right" class="right"><slot name="top-right"></slot>${selectionCard}${detailInColumn ? html `<div part="detail" class="card">${detail}</div>` : nothing}</div>`;
-            const docked = html `<aside part="sidebar" aria-label="Explorer panels">
+            // The narrow layout shows the selection and the detail in the Item sheet.
+            const right = html `<div slot="top-right" class="right"><slot name="top-right"></slot>${narrow ? nothing : selectionCard}${detailInColumn && !narrow ? html `<div part="detail" class="card">${detail}</div>` : nothing}</div>`;
+            // The column is named for what it holds.
+            const columnName = this.has('filters') ? 'Fields' : 'View';
+            const docked = html `<aside part="sidebar" aria-label=${columnName}>
       ${this.has('toolbar') ? head : nothing}
       ${this.has('filters') ? filters : nothing}
     </aside>`;
             const panel = this.has('toolbar') || this.has('filters')
-                ? html `<div part="panel" class="card" role="region" aria-label="Explorer panels">${this.has('toolbar') ? head : nothing}${this.has('filters') ? filters : nothing}</div>`
+                ? html `<div part="panel" class="card" role="region" aria-label=${columnName}>${this.has('toolbar') ? head : nothing}${this.has('filters') ? filters : nothing}</div>`
                 : nothing;
             const layersButton = this.has('legend')
-                ? html `<div class="layers" slot=${compact ? 'bottom-left' : 'top-left'} @keydown=${this.onLayersKey}>
+                ? html `<div class="layers" slot=${compact ? 'bottom-left' : 'top-left'} @keydown=${this.onLayersKey} @focusout=${this.onLayersFocusOut}>
           <div class="group"><button part="layers-toggle" type="button" aria-label=${`Layers and display, ${layersOn} layers on`} aria-expanded=${this.layersOpen ? 'true' : 'false'}
-            aria-controls="layers-popover" ?data-on=${layersOn > 0} @click=${() => (this.layersOpen ? this.closeLayers() : this.openLayers())}>${icon('layers', 16, 1.2)}${layersOn > 0 ? html `<span class="on"></span>` : nothing}</button></div>
+            aria-controls=${this.layersOpen ? 'layers-popover' : nothing} ?data-on=${layersOn > 0} @click=${() => (this.layersOpen ? this.closeLayers() : this.openLayers())}>${icon('layers', 16, 1.2)}${layersOn > 0 ? html `<span class="on"></span>` : nothing}</button></div>
           ${this.layersOpen
-                    ? html `<div part="layers-popover" id="layers-popover" class="card" role="dialog" aria-label="Layers and display" @pointerdown=${this.onPopoverPress}>${this.displaySection()}${layersPanel}</div>${this.choiceMenu()}`
+                    ? html `<div part="layers-popover" id="layers-popover" class="card" role="dialog" aria-label="Layers and display" tabindex="-1" @pointerdown=${this.onPopoverPress}>${this.displaySection()}${layersPanel}</div>${this.choiceMenu()}`
                     : nothing}
         </div>`
                 : nothing;
             const tabs = TABS.filter((t) => this.has(t.panel));
-            // One tab is in the page's tab order: the one focused last, else the open sheet's, else the first.
+            // One button is in the page's tab order: the one focused last, else the open sheet's, else the first.
             const reachable = tabs.find((t) => t.sheet === this.tabFocus) ?? tabs.find((t) => t.sheet === this.sheet) ?? tabs[0];
-            const tab = ({ sheet, icon: ic, label }) => html `<button type="button" role="tab" id=${`tab-${sheet}`} data-sheet=${sheet} tabindex=${reachable?.sheet === sheet ? '0' : '-1'}
-        aria-selected=${this.sheet === sheet ? 'true' : 'false'} aria-controls=${this.sheet === sheet ? 'sheet' : nothing}
-        @click=${() => {
+            const tab = ({ sheet, icon: ic, label }) => html `<button type="button" id=${`opens-${sheet}`} data-sheet=${sheet} tabindex=${reachable?.sheet === sheet ? '0' : '-1'}
+        aria-expanded=${this.sheet === sheet ? 'true' : 'false'} aria-controls=${this.sheet === sheet ? 'sheet' : nothing}
+        @click=${(e) => {
+                // A press does not focus a button in every browser, and the sheet takes the focus the explorer holds.
+                e.currentTarget.focus();
                 this.tabFocus = sheet;
                 this.sheet = this.sheet === sheet ? null : sheet;
             }}>${icon(ic, 18)}${label}</button>`;
@@ -1433,16 +1603,16 @@ let MosaicaExplorer = (() => {
       <button class="btn primary" type="button" @click=${() => (this.sheet = null)}>${matchedText}</button>
     </div>`;
             const sheetBody = this.sheet === 'filters'
-                ? html `${filters}${sheetFooter}`
+                ? html `<div class="sheet-body">${filters}</div>${sheetFooter}`
                 : this.sheet === 'layers'
-                    ? html `${this.displaySection()}${layersPanel}${this.choiceMenu()}`
+                    ? html `<div class="sheet-body">${this.displaySection()}${layersPanel}${this.choiceMenu()}</div>`
                     : this.sheet === 'detail'
-                        ? html `${selectionPanel}${detail}`
+                        ? html `<div class="sheet-body">${selectionPanel}${detail}</div>`
                         : nothing;
             // The tooltip slot is forwarded only when the host supplied one: a slot assigned another slot
             // counts as filled even when that slot is empty, which would hide the map's own tooltip.
             return html `<div part="frame" class=${`${floating ? 'floating' : 'docked'}${compact ? ' compact' : ''}${narrow && this.has('toolbar') && named ? ' titled' : ''}`}
-      @mosaica-levelchange=${(e) => (this.level = e.detail.level)}
+      @mosaica-levelchange=${(e) => this.chooseLevel(e.detail.layer, e.detail.level)}
       @mosaica-artifactfit=${(e) => this.map?.fitTo(BigInt(e.detail.id))}
       @mosaica-viewfollow=${(e) => this.followItem(e.detail)}
       @mosaica-close=${(e) => this.closeDetail(e)}>
@@ -1452,14 +1622,16 @@ let MosaicaExplorer = (() => {
         ${floating && !narrow ? panel : nothing}
         <mosaica-map
           exportparts=${FORWARD.map}
+          aria-label=${this.getAttribute('aria-label') ?? nothing}
+          ?quiet=${quiet}
           colour-by=${this.colourBy || nothing}
           layers=${this.layers || nothing}
           tooltip-fields=${this.tooltipFields}
           title-field=${this.titleField || nothing}
           budget=${this.budget || nothing}
-          .clusterBudget=${this.clusterBudget}
+          .clusterSpacing=${this.clusterSpacing}
           controls-corner=${compact ? 'bottom-left' : 'top-left'}
-          .clusterLevel=${level}
+          .clusterLevels=${levels}
           .basemap=${this.basemap}
           .noPoints=${this.noPoints}
           .radius=${this.radius}
@@ -1484,22 +1656,24 @@ let MosaicaExplorer = (() => {
           @mosaica-pick=${() => this.requestUpdate()}
           @mosaica-itemopen=${() => this.requestUpdate()}
           @mosaica-miss=${() => this.onMiss()}
-          @keydown=${this.onMapKey}
           @click=${() => this.requestUpdate()}
         >
           ${narrow ? nothing : layersButton}
-          ${narrow ? nothing : right}
-          ${narrow ? nothing : html `<div slot="bottom-right" class="in-map-strip"><slot name="status"><mosaica-status exportparts=${FORWARD.status} ?compact=${compact}></mosaica-status></slot></div>`}
+          ${right}
+          ${narrow ? nothing : html `<div slot="bottom-right" class="in-map-strip"><slot name="status" @slotchange=${this.onStatusSlot}><mosaica-status exportparts=${FORWARD.status} ?compact=${compact}></mosaica-status></slot></div>`}
           ${this.querySelector('[slot="tooltip"]') ? html `<slot name="tooltip" slot="tooltip"></slot>` : nothing}
         </mosaica-map>
         ${narrow ? nothing : this.callouts(this.has('detail') && hasDetail ? anchor : null, detail)}
+        ${narrow && this.sheet && sheetBody !== nothing
+                ? html `<div part="sheet" id="sheet" role="dialog" aria-labelledby=${`opens-${this.sheet}`} tabindex="-1" @keydown=${this.onSheetKey}>${sheetBody}</div>`
+                : nothing}
       </div>
-      ${this.sheet && sheetBody !== nothing
-                ? html `<div part="sheet" id="sheet" role="dialog" aria-labelledby=${`tab-${this.sheet}`} tabindex="-1" @keydown=${this.onSheetKey}>${sheetBody}</div>`
+      <div class="sr-only" role="status">${this.announced}</div>
+      ${narrow
+                ? html `<div part="strip-row"><slot name="status" @slotchange=${this.onStatusSlot}><mosaica-status exportparts=${FORWARD.status}></mosaica-status></slot></div>
+            <div part="tabs" role="toolbar" aria-label="Panels" @keydown=${this.onTabKey}>${tabs.map(tab)}</div>`
                 : nothing}
-      <div part="strip-row"><mosaica-status exportparts=${FORWARD.status}></mosaica-status></div>
-      <div part="tabs" role="tablist" aria-label="Explorer panels" @keydown=${this.onTabKey}>${tabs.map(tab)}</div>
-      <mosaica-colour-editor exportparts=${FORWARD['colour-editor']} field=${s?.get('legend').colourBy ?? ''} .level=${level}></mosaica-colour-editor>
+      <mosaica-colour-editor exportparts=${FORWARD['colour-editor']} field=${s?.get('legend').colourBy ?? ''} .clusterLevels=${levels}></mosaica-colour-editor>
     </div>`;
         }
         /** The item or artifact card for what is selected, or the host's in the `detail` slot. */
@@ -1514,7 +1688,7 @@ let MosaicaExplorer = (() => {
          */
         itemCard(item, actions) {
             return html `<mosaica-item-card exportparts=${FORWARD['item-card']} compact .item=${item} .pick=${item ? null : (this.map?.lastPick ?? null)}
-      title-field=${this.titleField || nothing} subtitle-field=${this.subtitleField || nothing} card-fields=${this.cardFields || nothing} open-url=${this.openUrl || nothing} .open=${this.open}>${actions}</mosaica-item-card>`;
+      title-field=${this.titleField || nothing} subtitle-field=${this.subtitleField || nothing} card-fields=${this.cardFields || nothing} image-fields=${this.imageFields || nothing} open-url=${this.openUrl || nothing} .open=${this.open}>${actions}</mosaica-item-card>`;
         }
         /** Whether the card for the selection is the artifact card: the artifact, or its refusal, changed last. */
         showsArtifact() {
@@ -1591,19 +1765,22 @@ let MosaicaExplorer = (() => {
             if (!m)
                 return nothing;
             const live = this.liveKey();
-            const pinButton = (pressed, onPress) => html `<button part="pin" slot="actions" type="button" aria-pressed=${pressed ? 'true' : 'false'} aria-label=${pressed ? 'Unpin' : 'Pin'} title=${pressed ? 'Unpin' : 'Keep open'} @click=${onPress}>${icon('pin', 13, 1.5)}</button>`;
+            // Pin keeps one name, the card's, and says whether it is on by its pressed state; its hint to a pointer says what a press does.
+            const pinButton = (pressed, name, onPress) => html `<button part="pin" slot="actions" type="button" aria-pressed=${pressed ? 'true' : 'false'} aria-label=${`Pin ${name}`} title=${pressed ? 'Unpin' : 'Keep open'} @click=${onPress}>${icon('pin', 13, 1.5)}</button>`;
             const cards = this.pinned
                 .filter((p) => p.view === view)
                 .map((p) => {
-                const unpin = pinButton(true, () => (this.pinned = this.pinned.filter((q) => q.key !== p.key)));
+                const name = this.cardName(p.key);
+                const unpin = pinButton(true, name, () => (this.pinned = this.pinned.filter((q) => q.key !== p.key)));
                 const body = p.kind === 'item'
                     ? this.itemCard(p.item, unpin)
                     : html `<mosaica-artifact-card exportparts=${FORWARD['artifact-card']} .artifact=${p.artifact}>${unpin}</mosaica-artifact-card>`;
-                return { key: p.key, world: p.world, body, pinned: true, name: this.cardName(p.key) };
+                return { key: p.key, world: p.world, body, pinned: true, name };
             });
             if (anchor && !(live && this.pinned.some((p) => p.key === live && p.view === view))) {
-                const body = live ? this.liveCard(this.showsArtifact(), pinButton(false, () => this.togglePin())) : detail;
-                cards.push({ key: 'live', world: anchor, body, pinned: false, name: this.cardName(live) });
+                const name = this.cardName(live);
+                const body = live ? this.liveCard(this.showsArtifact(), pinButton(false, name, () => this.togglePin())) : detail;
+                cards.push({ key: 'live', world: anchor, body, pinned: false, name });
             }
             this.cards = cards.map(({ key, world, pinned }) => ({ key, world, pinned }));
             if (cards.length === 0)
@@ -1618,7 +1795,8 @@ let MosaicaExplorer = (() => {
         /**
          * Place each callout beside its point under the camera as it stands, clear of the cards over the
          * map and of the callouts placed before it, and join it to its point. A callout whose point is off
-         * the map is hidden with its leader. Reads no layout: the sizes are those {@link measure} took.
+         * the map is hidden with its leader, and gives the focus it holds to the map. Reads no layout: the
+         * sizes are those {@link measure} took.
          */
         placeCallouts(firm = this.moving !== null) {
             const m = this.map;
@@ -1641,6 +1819,8 @@ let MosaicaExplorer = (() => {
                 const last = this.placements.get(key);
                 const kept = last && last.world[0] === card.world[0] && last.world[1] === card.world[1] ? { side: last.side, offset: last.offset, firm } : null;
                 const at = size.width > 0 && size.height > 0 ? placeCallout(point, box, size, [...this.keepClear, ...placed], undefined, kept, CALLOUT_MIN_HEIGHT) : null;
+                if (at === null && !el.hidden && within(this.renderRoot.activeElement, el))
+                    m.focus();
                 el.hidden = at === null;
                 leader?.setAttribute('visibility', at === null ? 'hidden' : 'visible');
                 if (!at)
@@ -1685,6 +1865,7 @@ let MosaicaExplorer = (() => {
             });
             // A card that grew, as under Show all, keeps its side and grows down where that is clear.
             this.placeCallouts();
+            this.coverMap();
         }
         /** The cards over the map that callouts keep clear of, and the map's tools and the Layers button. */
         keptClear() {
@@ -1708,7 +1889,8 @@ let MosaicaExplorer = (() => {
                     this.measure();
                 return;
             }
-            const now = new Set([...(m ? [m] : []), ...this.keptClear(), ...callouts]);
+            const sheet = this.renderRoot.querySelector('[part="sheet"]');
+            const now = new Set([...(m ? [m] : []), ...this.keptClear(), ...callouts, ...(sheet ? [sheet] : [])]);
             for (const el of this.observed)
                 if (!now.has(el))
                     this.sizes.unobserve(el);
@@ -1745,24 +1927,9 @@ let MosaicaExplorer = (() => {
                 }
             });
         }
-        /**
-         * Tab from the map itself goes to the card beside the point, the selection's where it shows, so
-         * the card is the next stop after the map; from there Tab goes on in the page's order.
-         */
-        onMapKey = (e) => {
-            const from = e.composedPath()[0];
-            if (e.key !== 'Tab' || e.shiftKey || !this.map || (from !== this.map && from !== this.map.focusTarget))
-                return;
-            const shown = Array.from(this.renderRoot.querySelectorAll('[part~="callout"]')).filter((c) => !c.hidden);
-            const card = shown.find((c) => c.dataset.callout === 'live') ?? shown[0];
-            if (!card)
-                return;
-            e.preventDefault();
-            card.focus();
-        };
         /** Escape on a card: the card not pinned closes, dropping the selection; focus goes back to the map. */
         onCalloutKey = (e) => {
-            if (e.key !== 'Escape')
+            if (e.key !== 'Escape' || e.defaultPrevented)
                 return;
             e.stopPropagation();
             const key = e.currentTarget.dataset.callout;
@@ -1801,11 +1968,15 @@ let MosaicaExplorer = (() => {
             const change = (patch) => this.changeDisplay(patch);
             const number = (e) => Number(e.target.value);
             const choices = Object.keys(DENSITY_COLOUR_TITLES);
+            // The arrow keys move the choice and leave the list open; a press chooses and closes it.
             const colourList = this.densityColoursOpen
-                ? html `<div id="density-colour-list" class="ramp-list" role="radiogroup" aria-labelledby="colours-label">
+                ? html `<div id="density-colour-list" class="ramp-list" role="radiogroup" aria-labelledby="colours-label" @focusout=${this.onDensityColoursFocusOut} @keydown=${this.onDensityColoursKey}>
           ${choices.map((c, i) => html `<button type="button" role="radio" data-colours=${c} aria-checked=${c === colours ? 'true' : 'false'} tabindex=${c === colours ? '0' : '-1'}
-              @click=${() => change({ densityColours: c })}
-              @keydown=${(e) => radioKeys(e, choices.length, i, (j) => change({ densityColours: choices[j] }))}><span class="bar" style=${`background:${densityGradient(c, scheme)}`}></span>${DENSITY_COLOUR_TITLES[c]}</button>`)}
+              @click=${() => {
+                    change({ densityColours: c });
+                    this.closeDensityColours();
+                }}
+              @keydown=${(e) => radioKeys(e, choices.length, i, (j) => change({ densityColours: choices[j] }))}>${tick(c === colours)}<span class="bar" style=${`background:${densityGradient(c, scheme)}`}></span>${DENSITY_COLOUR_TITLES[c]}</button>`)}
         </div>`
                 : nothing;
             const densityControls = s.density === 'none'
@@ -1815,22 +1986,23 @@ let MosaicaExplorer = (() => {
             ${this.densityScaleControl(s.densityScale, change)}
             ${ramped
                     ? html `<span id="colours-label">Colours</span>
-                  <button part="density-colours" class="ramp-choice" type="button" aria-labelledby="colours-label" aria-expanded=${this.densityColoursOpen ? 'true' : 'false'} aria-controls="density-colour-list"
+                  <button part="density-colours" class="ramp-choice" type="button" aria-label=${`Colours: ${DENSITY_COLOUR_TITLES[colours]}`} aria-expanded=${this.densityColoursOpen ? 'true' : 'false'}
+                    aria-controls=${this.densityColoursOpen ? 'density-colour-list' : nothing} @focusout=${this.onDensityColoursFocusOut}
                     @click=${() => (this.densityColoursOpen = !this.densityColoursOpen)}><span class="bar" style=${`background:${densityGradient(colours, scheme)}`}></span>${DENSITY_COLOUR_TITLES[colours]}${icon('chev', 12, 1.4)}</button>
                   ${colourList}`
                     : nothing}
             <label for="density-strength">Strength</label>
             <div class="with-readout"><input id="density-strength" part="density-strength" class="slider" type="range" min="0.1" max="1" step="0.05" .value=${String(s.densityStrength)}
-              style=${fill(s.densityStrength, 0.1, 1)} @input=${(e) => change({ densityStrength: number(e) })} /><span class="readout">${Math.round(s.densityStrength * 100)}%</span></div>
+              style=${fill(s.densityStrength, 0.1, 1)} aria-valuetext=${`${Math.round(s.densityStrength * 100)}%`} @input=${(e) => change({ densityStrength: number(e) })} /><span class="readout">${Math.round(s.densityStrength * 100)}%</span></div>
           </div>`;
             return html `<div part="display" class="display">
-      <section class="sec">
+      <section class="sec" aria-labelledby="points-label">
         <div class="sec-head">
-          <span class="hd" id="points-label">Points</span>
+          <h2 class="hd" id="points-label">Points</h2>
           <button part="points-toggle" class="switch small" type="button" role="switch" aria-checked=${s.points ? 'true' : 'false'} aria-label="Show points"
             @click=${() => change({ points: !s.points })}><span class="knob"></span></button>
         </div>
-        ${this.mostPoints(!s.points)}${this.mostClusters()}
+        ${this.mostPoints(!s.points)}${this.clusterDensity()}
         <div class="sliders">
           ${this.sizeControls(radius, !s.points)}
           <label for="point-opacity">Opacity</label>
@@ -1839,10 +2011,10 @@ let MosaicaExplorer = (() => {
         </div>
       </section>
       ${this.colourSection()}
-      <section class="sec">
-        <div class="hd" id="density-label">Density</div>
+      <section class="sec" aria-labelledby="density-label">
+        <h2 class="hd" id="density-label">Density</h2>
         <div part="density-mode" class="modes" role="radiogroup" aria-labelledby="density-label">
-          ${DENSITY_MODES.map((m, i) => html `<button type="button" role="radio" data-mode=${m.mode} aria-checked=${m.mode === s.density ? 'true' : 'false'} tabindex=${i === modeAt ? '0' : '-1'}
+          ${DENSITY_MODES.map((m, i) => html `<button type="button" role="radio" data-mode=${m.mode} aria-checked=${m.mode === s.density ? 'true' : 'false'} tabindex=${i === Math.max(0, modeAt) ? '0' : '-1'}
               @click=${() => change({ density: m.mode })}
               @keydown=${(e) => radioKeys(e, DENSITY_MODES.length, i, (j) => change({ density: DENSITY_MODES[j].mode }))}>${m.label}</button>`)}
         </div>
@@ -1856,67 +2028,89 @@ let MosaicaExplorer = (() => {
          */
         mostPoints(disabled) {
             const s = this.resolvedStore;
+            const min = Math.max(1, this.budgetMin);
+            const max = Math.max(min * 10, this.budgetMax);
+            const span = Math.log(max / min);
+            const at = (n) => Math.min(1, Math.max(0, Math.log(n / min) / span));
+            const shown = this.pointsDragged ?? s?.budget ?? 250_000;
+            // A tick at each power of ten between the ends, where it leaves room for the last end's label.
+            const ticks = [];
+            for (let p = 10 ** Math.ceil(Math.log10(min) + 1e-9); p < max; p *= 10)
+                if (at(p) > 0.08 && at(p) < 0.85)
+                    ticks.push({ at: at(p), text: pointsText(p) });
             return this.mostSlider({
                 id: 'most-points',
                 label: 'Most points',
-                unit: 'points',
-                range: [this.budgetMin, this.budgetMax],
-                shown: this.pointsDragged ?? s?.budget ?? 250_000,
+                at: at(shown),
+                readout: pointsText(shown),
+                valueText: `${pointsText(shown)} points`,
+                ends: [pointsText(min), pointsText(max)],
+                ticks,
                 disabled: disabled || !s,
+                of: (t) => Math.min(max, Math.max(min, roundPoints(min * Math.exp(t * span)))),
                 drag: (n) => (this.pointsDragged = n),
                 set: (n) => this.setBudget(n)
             });
         }
         /**
-         * Most clusters, while a `nested` or `dag` layer is drawn: a slider from `cluster-budget-min` to
-         * `cluster-budget-max` as Most points is. Letting go sets the most clusters such a layer is cut to.
+         * Cluster density, while a `nested` or `dag` layer is drawn, or a levelled layer following the zoom
+         * is drawn or coloured by: a slider over the cluster spacing on a log scale, from
+         * `cluster-spacing-max` at its Fewer end to `cluster-spacing-min` at its More end, with how many
+         * clusters the spacing gives the map at its size. Letting go sets the store's spacing.
          */
-        mostClusters() {
+        clusterDensity() {
             const s = this.resolvedStore;
             const meta = s?.get('meta') ?? null;
             if (!s || !meta)
                 return nothing;
-            const treed = s.get('artifacts').layers.some((name) => {
-                const kind = meta.layers.find((l) => l.name === name)?.hierarchy.kind;
-                return kind === 'nested' || kind === 'dag';
+            const coloured = clusterLayerOf(s.get('legend').colourBy);
+            const steered = [...s.get('artifacts').layers, ...(coloured === null ? [] : [coloured])].some((name) => {
+                const layer = meta.layers.find((l) => l.name === name);
+                if (!layer)
+                    return false;
+                return layer.hierarchy.kind === 'nested' || layer.hierarchy.kind === 'dag' || follows(layer, this.levels.get(name));
             });
-            if (!treed)
+            if (!steered)
                 return nothing;
+            const dense = Math.max(1, this.clusterSpacingMin);
+            const sparse = Math.max(dense * 2, this.clusterSpacingMax);
+            const span = Math.log(sparse / dense);
+            // With no spacing the map shows every cluster, as at the More end.
+            const shown = this.clustersDragged ?? s.clusterSpacing ?? dense;
+            const map = this.renderRoot.querySelector('mosaica-map');
+            const count = map && map.clientWidth > 0 && map.clientHeight > 0 ? clustersInView(shown, map.clientWidth, map.clientHeight) : null;
+            const square = `one per ${Math.round(shown)} px square`;
             return this.mostSlider({
-                id: 'most-clusters',
-                label: 'Most clusters',
-                unit: 'clusters',
-                range: [this.clusterBudgetMin, this.clusterBudgetMax],
-                shown: this.clustersDragged ?? s.clusterBudget ?? (this.clusterBudget || this.clusterBudgetMax),
+                id: 'cluster-density',
+                label: 'Cluster density',
+                at: Math.min(1, Math.max(0, Math.log(sparse / shown) / span)),
+                readout: count === null ? `1 per ${Math.round(shown)} px` : pointsText(count),
+                valueText: count === null ? square : `${count} clusters, ${square}`,
+                ends: ['Fewer', 'More'],
+                ticks: [],
                 disabled: false,
+                of: (t) => Math.min(sparse, Math.max(dense, Math.round(sparse * Math.exp(-t * span)))),
                 drag: (n) => (this.clustersDragged = n),
-                set: (n) => this.setClusterBudget(n)
+                set: (n) => this.setClusterSpacing(n)
             });
         }
-        /** A log-scale slider over `range` on round numbers, with the number it stands at. */
+        /**
+         * A slider standing `at` of the way along, with its readout, its ends' labels and its ticks. `of`
+         * gives the value at a share of the way along; dragging passes it to `drag`, and letting go to
+         * `set`.
+         */
         mostSlider(o) {
-            const min = Math.max(1, o.range[0]);
-            const max = Math.max(min * 10, o.range[1]);
-            const span = Math.log(max / min);
-            const at = (n) => Math.min(1, Math.max(0, Math.log(n / min) / span));
-            const of = (t) => Math.min(max, Math.max(min, roundPoints(min * Math.exp(t * span))));
-            const t = at(o.shown);
-            // A tick at each power of ten between the ends, where it leaves room for the last end's label.
-            const ticks = [];
-            for (let p = 10 ** Math.ceil(Math.log10(min) + 1e-9); p < max; p *= 10)
-                if (at(p) > 0.08 && at(p) < 0.85)
-                    ticks.push(p);
-            const read = (e) => of(Number(e.target.value) / 1000);
+            const read = (e) => o.of(Number(e.target.value) / 1000);
             return html `<div class="most">
-      <div class="most-top"><label for=${o.id}>${o.label}</label><span part=${o.id === 'most-points' ? 'most-points-value' : 'most-clusters-value'} class="most-value">${pointsText(o.shown)}</span></div>
-      <input id=${o.id} part=${o.id === 'most-points' ? 'most-points' : 'most-clusters'} class="slider" type="range" min="0" max="1000" step="1" .value=${String(Math.round(t * 1000))} ?disabled=${o.disabled}
-        style=${`--fill:${(t * 100).toFixed(1)}%`} aria-valuetext=${`${pointsText(o.shown)} ${o.unit}`}
+      <div class="most-top"><label for=${o.id}>${o.label}</label><span part=${o.id === 'most-points' ? 'most-points-value' : 'cluster-density-value'} class="most-value">${o.readout}</span></div>
+      <input id=${o.id} part=${o.id === 'most-points' ? 'most-points' : 'cluster-density'} class="slider" type="range" min="0" max="1000" step="1" .value=${String(Math.round(o.at * 1000))} ?disabled=${o.disabled}
+        style=${`--fill:${(o.at * 100).toFixed(1)}%`} aria-valuetext=${o.valueText}
         @input=${(e) => o.drag(read(e))}
         @change=${(e) => o.set(read(e))} />
       <div class="ticks" aria-hidden="true">
-        <span style="left:0">${pointsText(min)}</span>
-        ${ticks.map((p) => html `<span class="mid" style=${`left:${(at(p) * 100).toFixed(1)}%`}>${pointsText(p)}</span>`)}
-        <span style="right:0">${pointsText(max)}</span>
+        <span style="left:0">${o.ends[0]}</span>
+        ${o.ticks.map((p) => html `<span class="mid" style=${`left:${(p.at * 100).toFixed(1)}%`}>${p.text}</span>`)}
+        <span style="right:0">${o.ends[1]}</span>
       </div>
     </div>`;
         }
@@ -1930,15 +2124,15 @@ let MosaicaExplorer = (() => {
             emit(this, 'mosaica-budgetchange', { budget });
             this.requestUpdate();
         }
-        /** Set the most clusters a treed layer is cut to from Most clusters, and report it. */
-        setClusterBudget(budget) {
+        /** Set the store's cluster spacing from Cluster density, and report it. */
+        setClusterSpacing(spacing) {
             this.clustersDragged = null;
             const s = this.resolvedStore;
-            if (!s || budget === s.clusterBudget)
+            if (!s || spacing === s.clusterSpacing)
                 return;
-            s.setClusterBudget(budget);
-            this.clusterBudget = budget;
-            emit(this, 'mosaica-clusterbudgetchange', { budget });
+            s.setClusterSpacing(spacing);
+            this.clusterSpacing = spacing;
+            emit(this, 'mosaica-clusterspacingchange', { spacing });
         }
         /**
          * The Colour section: Colour by, then the palette for a category, or the ramp, its scale and
@@ -1956,7 +2150,7 @@ let MosaicaExplorer = (() => {
             const clusters = colourBy?.startsWith(CLUSTER_PREFIX) ?? false;
             const palette = s && clusters ? PALETTES[s.get('artifacts').palette] : CATEGORY_PALETTES[colouring.palette];
             const choice = (menu, label, body, stretch = false) => html `<button part=${{ size: 'size-by', colour: 'colour-by', palette: 'palette', ramp: 'ramp' }[menu]} class=${`ramp-choice${stretch ? ' stretch' : ''}`} type="button" aria-haspopup="menu" aria-expanded=${this.menu === menu ? 'true' : 'false'}
-        aria-label=${label} ?disabled=${!meta} @click=${() => (this.menu = this.menu === menu ? null : menu)} @keydown=${this.onMenuButtonKey(menu)}>${body}${icon('chev', 12, 1.4)}</button>`;
+        aria-label=${label} title=${label} ?disabled=${!meta} @click=${() => (this.menu = this.menu === menu ? null : menu)} @keydown=${this.onMenuButtonKey(menu)}>${body}${icon('chev', 12, 1.4)}</button>`;
             const byName = current?.title ?? 'None';
             const palettes = (column?.category || clusters) && !this.hidePalettes
                 ? html `<span>Palette</span>${choice('palette', `Palette: ${palette.title}`, html `<span class="strip">${palette.colours.slice(0, 10).map((c) => html `<span style=${`background:${hexOf(c)}`}></span>`)}</span><span class="t">${palette.title}</span>`, true)}`
@@ -1975,8 +2169,8 @@ let MosaicaExplorer = (() => {
                 : nothing;
             // A category's values and a layer's clusters have colours of their own to edit.
             const editable = Boolean(column?.category) || clusters;
-            return html `<section class="sec">
-      <div class="hd">Colour</div>
+            return html `<section class="sec" aria-labelledby="colour-label">
+      <h2 class="hd" id="colour-label">Colour</h2>
       <div class="sliders">
         <span>Colour by</span>${choice('colour', `Colour by: ${byName}`, html `<span class="t">${byName}</span>`)}
         ${palettes}${ramps}
@@ -1986,7 +2180,8 @@ let MosaicaExplorer = (() => {
         }
         /**
          * What Colour by offers: None, every layer that can colour (a levelled layer once per level, by
-         * its levels' titles), and the rendered category and number columns.
+         * its levels' titles, after Follow zoom where no level declares a zoom range), and the rendered
+         * category and number columns.
          */
         colourOptions() {
             const s = this.resolvedStore;
@@ -1998,13 +2193,19 @@ let MosaicaExplorer = (() => {
                 const value = `${CLUSTER_PREFIX}${decl.name}`;
                 if (decl.levels.length <= 1)
                     return [{ value, title: decl.title || decl.name, kind: 'Clusters', checked: colourBy === value }];
-                const drawn = this.level ?? topLevelServed(decl, s?.get('artifacts').served ?? []);
-                return decl.levels.map((lv) => ({ value: `${value}@${lv.level}`, title: lv.title || `${decl.title || decl.name}, level ${lv.level}`, kind: 'Clusters', checked: colourBy === value && drawn === lv.level }));
+                const chosen = this.levels.get(decl.name);
+                const following = follows(decl, chosen);
+                const drawn = levelOfLayer(decl, chosen, s?.get('artifacts').followedLevels);
+                const follow = levelFollowsZoom(decl) ? [{ value: `${value}@`, title: `${decl.title || decl.name}, follow zoom`, kind: 'Clusters', checked: colourBy === value && following }] : [];
+                return [...follow, ...decl.levels.map((lv) => ({ value: `${value}@${lv.level}`, title: lv.title || `${decl.title || decl.name}, level ${lv.level}`, kind: 'Clusters', checked: colourBy === value && !following && drawn === lv.level }))];
             });
             const columns = meta.declaredScalars.filter((c) => c.render).map((c) => ({ value: c.name, title: columnCaption(c.name), kind: c.category ? 'Category' : c.arrowType === 'timestamp_us' ? 'Date' : 'Number', checked: colourBy === c.name }));
             return [{ value: '', title: 'None', kind: '', checked: colourBy === null }, ...layers, ...columns];
         }
-        /** Colour by `value`: a column, `cluster:<layer>`, or `cluster:<layer>@<level>` for one level of a layer. */
+        /**
+         * Colour by `value`: a column, `cluster:<layer>`, `cluster:<layer>@<level>` for one level of a
+         * layer, or `cluster:<layer>@` for the level that follows the zoom.
+         */
         chooseColour(value) {
             const s = this.resolvedStore;
             if (!s)
@@ -2013,11 +2214,22 @@ let MosaicaExplorer = (() => {
             const colourBy = value === '' ? null : at > 0 ? value.slice(0, at) : value;
             s.setColourBy(colourBy);
             emit(this, 'mosaica-colourchange', { colourBy });
-            if (at > 0) {
-                this.level = Number(value.slice(at + 1));
-                emit(this, 'mosaica-levelchange', { level: this.level });
+            if (at > 0 && colourBy !== null) {
+                const layer = colourBy.slice(CLUSTER_PREFIX.length);
+                const level = at === value.length - 1 ? null : Number(value.slice(at + 1));
+                this.chooseLevel(layer, level);
+                emit(this, 'mosaica-levelchange', { layer, level });
             }
         }
+        /** Count, colour and label `layer` at `level`, or at its default level where `level` is null; other layers keep theirs. */
+        chooseLevel(layer, level) {
+            const levels = new Map(this.levels);
+            if (level === null)
+                levels.delete(layer);
+            else
+                levels.set(layer, level);
+            this.levels = levels;
+        }
         /** Colour a layer's clusters from `palette`, and report it. */
         chooseClusterPalette(palette) {
             const s = this.resolvedStore;
@@ -2084,7 +2296,7 @@ let MosaicaExplorer = (() => {
             const at = DENSITY_SCALES.findIndex((x) => x.scale === scale);
             return html `<span id="density-scale-label">Scale</span>
       <div part="density-scale" class="seg" role="radiogroup" aria-labelledby="density-scale-label">
-        ${DENSITY_SCALES.map((x, i) => html `<button type="button" role="radio" data-scale=${x.scale} aria-checked=${x.scale === scale ? 'true' : 'false'} tabindex=${i === at ? '0' : '-1'}
+        ${DENSITY_SCALES.map((x, i) => html `<button type="button" role="radio" data-scale=${x.scale} aria-checked=${x.scale === scale ? 'true' : 'false'} tabindex=${i === Math.max(0, at) ? '0' : '-1'}
             @click=${() => change({ densityScale: x.scale })}
             @keydown=${(e) => radioKeys(e, DENSITY_SCALES.length, i, (j) => change({ densityScale: DENSITY_SCALES[j].scale }))}>${x.label}</button>`)}
       </div>`;
@@ -2113,10 +2325,15 @@ let MosaicaExplorer = (() => {
             const sizing = this.sizing;
             const number = (e) => Number(e.target.value);
             const { min, max, step } = SIZE_RANGE;
+            // With no column to offer, the button says why: to a pointer in its `title`, and in the text that describes it.
+            const none = this.resolvedStore?.get('meta') && this.sizeColumns.length === 0;
+            const why = 'No number column to size by';
+            const shown = sizeBy === null ? 'None' : columnCaption(sizeBy);
             const choice = html `<span id="size-by-label">Size by</span>
-      <button part="size-by" class="ramp-choice" type="button" aria-haspopup="menu" aria-expanded=${this.menu === 'size' ? 'true' : 'false'} aria-label=${`Size by: ${sizeBy === null ? 'None' : columnCaption(sizeBy)}`}
-        ?disabled=${disabled || (sizeBy === null && this.sizeColumns.length === 0)} title=${this.sizeColumns.length === 0 ? 'No number column to size by' : nothing}
-        @click=${() => (this.menu = this.menu === 'size' ? null : 'size')} @keydown=${this.onMenuButtonKey('size')}><span class="t">${sizeBy === null ? 'None' : columnCaption(sizeBy)}</span>${icon('chev', 12, 1.4)}</button>`;
+      <button part="size-by" class="ramp-choice" type="button" aria-haspopup="menu" aria-expanded=${this.menu === 'size' ? 'true' : 'false'} aria-label=${`Size by: ${shown}`}
+        ?disabled=${disabled || (sizeBy === null && this.sizeColumns.length === 0)} title=${none ? why : shown} aria-describedby=${none ? 'size-by-note' : nothing}
+        @click=${() => (this.menu = this.menu === 'size' ? null : 'size')} @keydown=${this.onMenuButtonKey('size')}><span class="t">${shown}</span>${icon('chev', 12, 1.4)}</button>
+      ${none ? html `<span id="size-by-note" class="sr-only">${why}</span>` : nothing}`;
             if (sizeBy === null) {
                 if (this.hideSize)
                     return choice;
@@ -2129,14 +2346,14 @@ let MosaicaExplorer = (() => {
             return html `${choice}<span id="size-range-label">Range</span>
       <div class="range" role="group" aria-labelledby="size-range-label">
         <input part="size-min" class="slider" type="range" min=${min} max=${max} step=${step} aria-label="Smallest size" .value=${String(sizing.min)} ?disabled=${disabled}
-          style=${fill(sizing.min, min, max)} @input=${(e) => this.changeSize({ min: number(e), max: Math.max(number(e), sizing.max) })} />
+          style=${fill(sizing.min, min, max)} aria-valuetext=${`${px(sizing.min)} px`} @input=${(e) => this.changeSize({ min: number(e), max: Math.max(number(e), sizing.max) })} />
         <span part="size-range" class="readout">${px(sizing.min)} – ${px(sizing.max)} px</span>
         <input part="size-max" class="slider" type="range" min=${min} max=${max} step=${step} aria-label="Largest size" .value=${String(sizing.max)} ?disabled=${disabled}
-          style=${fill(sizing.max, min, max)} @input=${(e) => this.changeSize({ max: number(e), min: Math.min(number(e), sizing.min) })} />
+          style=${fill(sizing.max, min, max)} aria-valuetext=${`${px(sizing.max)} px`} @input=${(e) => this.changeSize({ max: number(e), min: Math.min(number(e), sizing.min) })} />
       </div>
       <span id="size-scale-label">Scale</span>
       <div part="size-scale" class="seg" role="radiogroup" aria-labelledby="size-scale-label">
-        ${SIZE_SCALES.map((x, i) => html `<button type="button" role="radio" data-scale=${x.scale} aria-checked=${x.scale === sizing.scale ? 'true' : 'false'} tabindex=${i === at ? '0' : '-1'} ?disabled=${disabled}
+        ${SIZE_SCALES.map((x, i) => html `<button type="button" role="radio" data-scale=${x.scale} aria-checked=${x.scale === sizing.scale ? 'true' : 'false'} tabindex=${i === Math.max(0, at) ? '0' : '-1'} ?disabled=${disabled}
             @click=${() => this.changeSize({ scale: x.scale })}
             @keydown=${(e) => radioKeys(e, SIZE_SCALES.length, i, (j) => this.changeSize({ scale: SIZE_SCALES[j].scale }))}>${x.label}</button>`)}
       </div>`;
@@ -2209,10 +2426,19 @@ let MosaicaExplorer = (() => {
                 const items = Array.from(this.renderRoot.querySelectorAll(`[part~="${menu}-option"]`));
                 const next = { ArrowDown: (i + 1) % items.length, ArrowUp: (i - 1 + items.length) % items.length, Home: 0, End: items.length - 1 }[e.key];
                 if (e.key === 'Escape') {
+                    // An Escape that has dismissed the map's tooltip does no more.
+                    if (e.defaultPrevented)
+                        return;
                     e.stopPropagation();
                     this.closeMenu(true);
                     return;
                 }
+                // Tab closes the menu and goes back to its button, in the popover, and on from there.
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    this.closeMenu(true);
+                    return;
+                }
                 if (next === undefined)
                     return;
                 e.preventDefault();
@@ -2221,8 +2447,8 @@ let MosaicaExplorer = (() => {
             };
             const at = Math.max(0, entries.findIndex((o) => o.value === checked));
             const row = (o) => o.line === undefined
-                ? html `<span class="lead">${o.swatch ?? nothing}<span>${o.title}</span></span><span class="kind">${o.kind}</span>`
-                : html `${o.swatch ?? nothing}<span class="named"><span class="t">${o.title}</span><span class="line">${o.line}</span></span>`;
+                ? html `<span class="lead">${tick(o.value === checked)}${o.swatch ?? nothing}<span>${o.title}</span></span><span class="kind">${o.kind}</span>`
+                : html `${tick(o.value === checked)}${o.swatch ?? nothing}<span class="named"><span class="t">${o.title}</span><span class="line">${o.line}</span></span>`;
             return html `<div part=${{ size: 'size-menu', colour: 'colour-menu', palette: 'palette-menu', ramp: 'ramp-menu' }[menu]} class=${`size-menu${menu === 'ramp' ? ' wide' : menu === 'palette' ? ' palettes' : ''}`} popover="manual" role="menu" aria-labelledby="menu-label" @focusout=${this.onMenuFocusOut}>
       <div class="hd" id="menu-label">${title}</div>
       ${entries.map((o, i) => html `<button part=${{ size: 'size-option', colour: 'colour-option', palette: 'palette-option', ramp: 'ramp-option' }[menu]} type="button" role="menuitemradio" data-value=${o.value} aria-checked=${o.value === checked ? 'true' : 'false'}
@@ -2245,7 +2471,7 @@ let MosaicaExplorer = (() => {
                 this.menu = menu;
             };
         }
-        /** Focus leaving the open menu, by Tab or otherwise, closes it; Tab goes on from where focus went. */
+        /** Focus leaving the open menu closes it. */
         onMenuFocusOut = (e) => {
             const to = e.relatedTarget;
             if (to && e.currentTarget.contains(to))
@@ -2291,10 +2517,8 @@ let MosaicaExplorer = (() => {
                 this.pointOpacity = patch.pointOpacity;
             if (patch.density !== undefined)
                 this.density = patch.density;
-            if (patch.densityColours !== undefined) {
+            if (patch.densityColours !== undefined)
                 this.densityColours = patch.densityColours ?? '';
-                this.densityColoursOpen = false;
-            }
             if (patch.densityStrength !== undefined)
                 this.densityStrength = patch.densityStrength;
             if (patch.densityResolution !== undefined)
@@ -2303,17 +2527,36 @@ let MosaicaExplorer = (() => {
                 this.densityScale = patch.densityScale;
             emit(this, 'mosaica-displaychange', this.display);
         }
+        /** Close the list of density colours, with focus on its button. */
+        closeDensityColours() {
+            this.renderRoot.querySelector('[part="density-colours"]')?.focus();
+            this.densityColoursOpen = false;
+        }
+        /** Escape in the list of density colours closes the list alone. */
+        onDensityColoursKey = (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented)
+                return;
+            e.stopPropagation();
+            this.closeDensityColours();
+        };
+        /** Focus leaving the list of density colours and its button closes the list. */
+        onDensityColoursFocusOut = (e) => {
+            const to = e.relatedTarget;
+            const held = [this.renderRoot.querySelector('#density-colour-list'), this.renderRoot.querySelector('[part="density-colours"]')];
+            if (!held.some((el) => el && to && el.contains(to)))
+                this.densityColoursOpen = false;
+        };
         /** Escape closes the Layers popover and returns focus to its button. */
         onLayersKey = (e) => {
-            if (e.key !== 'Escape' || !this.layersOpen)
+            if (e.key !== 'Escape' || e.defaultPrevented || !this.layersOpen)
                 return;
             e.stopPropagation();
             this.closeLayers();
             this.renderRoot.querySelector('[part="layers-toggle"]')?.focus();
         };
-        /** The tab list's keys: the arrows move between tabs, wrapping, and Home and End go to the ends. */
+        /** The bar's keys: the arrows move between its buttons, wrapping, and Home and End go to the ends. */
         onTabKey = (e) => {
-            const buttons = Array.from(this.renderRoot.querySelectorAll('[part="tabs"] [role="tab"]'));
+            const buttons = Array.from(this.renderRoot.querySelectorAll('[part="tabs"] button'));
             const at = buttons.indexOf(e.target);
             if (at < 0)
                 return;
@@ -2328,24 +2571,56 @@ let MosaicaExplorer = (() => {
         };
         /** Escape closes the sheet. */
         onSheetKey = (e) => {
-            if (e.key !== 'Escape')
+            if (e.key !== 'Escape' || e.defaultPrevented)
                 return;
             e.stopPropagation();
             this.sheet = null;
         };
-        /** Focus goes into a sheet as it opens, and back to its tab as it closes. */
+        /**
+         * Focus goes to the first control of the Layers popover as it opens. A sheet that opens takes
+         * the focus the explorer held, and none from the page around it. A sheet that closes gives the
+         * focus it held to its button, or to the map where the layout has grown wide and has no button.
+         */
         updated(changed) {
             this.toggleAttribute('data-compact', this.compact);
             this.fitLayers();
             this.placeMenu(changed.has('menu') && this.menu !== null);
             this.followLayout();
+            this.coverMap();
+            if (changed.has('layersOpen') && this.layersOpen)
+                this.renderRoot.querySelector('[part="layers-popover"]')?.querySelector(FOCUSABLE)?.focus();
             if (!changed.has('sheet'))
                 return;
             const before = changed.get('sheet');
-            if (this.sheet)
-                this.renderRoot.querySelector('[part="sheet"]')?.focus();
-            else if (before)
-                this.renderRoot.querySelector(`[role="tab"][data-sheet="${before}"]`)?.focus();
+            if (this.sheet) {
+                if (this.focusBefore)
+                    this.renderRoot.querySelector('[part="sheet"]')?.focus();
+            }
+            else if (before && this.focusBefore === 'sheet') {
+                if (this.narrow)
+                    this.renderRoot.querySelector(`[part="tabs"] [data-sheet="${before}"]`)?.focus();
+                else
+                    this.map?.focus();
+            }
+        }
+        /**
+         * While an open sheet reaches up over the map's tools, the map behind it is inert: nothing under
+         * the sheet takes focus or a press. A shorter sheet leaves the map above it in use.
+         */
+        coverMap() {
+            const m = this.map;
+            if (!m)
+                return;
+            const sheet = this.renderRoot.querySelector('[part="sheet"]');
+            // Nothing is measured where no sheet is open, which is every draw of the wide layouts.
+            if (!sheet) {
+                if (m.inert)
+                    m.inert = false;
+                return;
+            }
+            const tools = m.shadowRoot?.querySelector('[part="controls"]');
+            const clear = tools ? tools.getBoundingClientRect().bottom : m.getBoundingClientRect().top;
+            m.inert = sheet.getBoundingClientRect().top < clear;
         }
         /**
          * Hold the open Layers popover within the explorer's visible box: the part of it inside the