@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/listbox/root/listbox-root.js

@@ -4,59 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, countLabel, customElement, DelayController, DisabledCascadeController, endInSight, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, fillTemplate, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { HelixHeadlessOptionGroup } from '../../option/group/option-group.js';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
-const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp']);
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+const MOVES = new Set([...FIELD_MOVES, 'End', 'Home']);
 const PAGE = 10;
-const matched = new Map();
-const HIGHLIGHT = 'helix-filter-match';
-const paintable = () => typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined';
-const paintMatches = () => {
-    if (!paintable()) {
-        return;
-    }
-    const all = [...matched.values()].flat();
-    if (all.length === 0) {
-        CSS.highlights.delete(HIGHLIGHT);
-        return;
-    }
-    CSS.highlights.set(HIGHLIGHT, new Highlight(...all));
-};
-const rangeFor = (root, needle) => {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    const nodes = [];
-    let whole = '';
-    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
-        nodes.push(node);
-        whole += node.nodeValue ?? '';
-    }
-    const at = whole.toLowerCase().indexOf(needle);
-    if (at < 0) {
-        return [];
-    }
-    const range = document.createRange();
-    let seen = 0;
-    let started = false;
-    for (const node of nodes) {
-        const length = node.nodeValue?.length ?? 0;
-        if (!started && at < seen + length) {
-            range.setStart(node, at - seen);
-            started = true;
-        }
-        if (started && at + needle.length <= seen + length) {
-            range.setEnd(node, at + needle.length - seen);
-            return [range];
-        }
-        seen += length;
-    }
-    return [];
-};
 let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
@@ -70,13 +26,20 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.filterable = false;
         this.filterDelay = 0;
         this.filterLabel = 'Filter';
+        this.items = undefined;
+        this.data = new OptionWindowController(this, {
+            current: () => this.currentValue,
+            items: () => this.items,
+        });
         this.loadError = '';
         this.manual = false;
         this.multiple = false;
         this.resultLabel = '{count} result';
         this.resultsLabel = '{count} results';
+        this.selectedLabel = '{name}, selected';
         this.activeValue = '';
         this.parked = false;
+        this.anchor = '';
         this.typeahead = new Typeahead();
         this.seen = new Set();
         this.forwarded = false;
@@ -85,6 +48,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.options,
         });
+        this.chosenAgain = undefined;
         this.handleSelection = (event) => {
             if (event.detail.href !== undefined) {
                 return;
@@ -102,11 +66,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 return;
             }
             const typing = this.forwarded || event.composedPath()[0] === this.partNamed('search-field');
+            if (this.multiple && event.key === ' ' && event.shiftKey && !typing) {
+                event.preventDefault();
+                this.extend(this.activeValue);
+                return;
+            }
             if (event.key === 'Enter' || (event.key === ' ' && !typing && !this.typeahead.typing())) {
                 const link = shown.find((option) => option.value === this.activeValue && Boolean(option.href));
                 if (link !== undefined) {
                     event.preventDefault();
                     if (event.key === 'Enter') {
+                        ;
                         link.select(event);
                     }
                 }
@@ -121,10 +91,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             }
             if (this.multiple && !typing && selectsAll(event)) {
                 event.preventDefault();
-                const reachable = shown.map((option) => option.value);
-                const all = reachable.every((value) => this.values.includes(value));
-                const kept = this.values.filter((value) => !reachable.includes(value));
-                this.requestValue((all ? kept : [...kept, ...reachable]).join(','));
+                this.requestValue(toggleEvery(this.values, shown.map((option) => option.value)).join(','));
                 return;
             }
             if (!typing && typesCharacter(event)) {
@@ -140,7 +107,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 event.shiftKey &&
                 (event.ctrlKey || event.metaKey) &&
                 (event.key === 'Home' || event.key === 'End');
-            if (!fieldRange && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const grid = this.layout === 'grid' && !this.data.records;
+            const along = grid && !typing ? inlineStep(this, event.key) : 0;
+            if (!fieldRange && !along && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -149,7 +118,13 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             const at = shown.findIndex((option) => option.value === from);
             const last = shown.length - 1;
             let next = at;
-            if (event.key === 'ArrowDown') {
+            if (along) {
+                next = Math.min(Math.max(at + along, 0), last);
+            }
+            else if (grid && at >= 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                next = columnStep(shown.map((option) => option.getBoundingClientRect().left), at, event.key === 'ArrowDown' ? 1 : -1);
+            }
+            else if (event.key === 'ArrowDown') {
                 next = at < 0 ? 0 : (at + 1) % shown.length;
             }
             else if (event.key === 'ArrowUp') {
@@ -197,7 +172,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.askedAt = -1;
         this.handleScroll = (event) => {
             const items = event.currentTarget;
-            const count = this.options.length;
+            const count = this.entries.length;
             if (this.loading ||
                 !endInSight({
                     askedAt: this.askedAt,
@@ -241,43 +216,52 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.requestUpdate('filter', previous);
     }
     get selectedIndex() {
-        return this.options.findIndex((option) => option.selected);
+        return this.entries.findIndex((option) => option.selected);
     }
     set selectedIndex(at) {
-        const option = this.options[at];
+        const option = this.entries[at];
         this.value = option?.value ?? '';
     }
     highlight(where) {
         const shown = this.shown.filter((option) => !option.disabled);
         this.typeahead.reset();
         this.parked = where === 'none';
-        if (where === 'none') {
-            this.activeValue = '';
-        }
-        else if (where === 'first') {
-            this.activeValue = shown[0]?.value ?? '';
-        }
-        else if (where === 'last') {
-            this.activeValue = shown.at(-1)?.value ?? '';
-        }
-        else {
-            const chosen = shown.find((option) => this.values.includes(option.value));
-            this.activeValue = (chosen ?? shown[0])?.value ?? '';
-        }
+        const chosen = where === 'selected' ? shown.find((option) => this.values.includes(option.value)) : undefined;
+        this.activeValue =
+            where === 'none'
+                ? ''
+                : ((where === 'last' ? shown.at(-1) : (chosen ?? shown[0]))?.value ?? '');
         if (this.childrenKnown) {
             this.place();
         }
     }
     tell(changed) {
-        if (!changed.has('filter') || !this.hasUpdated) {
+        if (!this.hasUpdated) {
+            return;
+        }
+        if (!changed.has('filter')) {
+            this.tellActive(changed);
             return;
         }
         const count = this.shown.length;
-        if (this.filter.trim() === '' || count === 0) {
-            this.announced = '';
+        this.announced =
+            this.filter.trim() && count
+                ? countLabel(count, this.resultLabel, this.resultsLabel, this.lang)
+                : '';
+    }
+    tellActive(changed) {
+        if (!changed.has('activeValue') ||
+            !this.filterable ||
+            !onApple() ||
+            this.renderRoot.activeElement?.getAttribute('part') !== 'search-field') {
             return;
         }
-        this.announced = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
+        const active = this.entries.find((option) => option.value === this.activeValue);
+        if (active) {
+            this.announced = active.selected
+                ? fillTemplate(this.selectedLabel, { name: active.text })
+                : active.text;
+        }
     }
     typeaheadTo(key) {
         const shown = this.shown.filter((option) => !option.disabled);
@@ -315,16 +299,25 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return found;
     }
     get groups() {
-        return this.among((node) => node instanceof HelixHeadlessOptionGroup, this.children);
+        return this.among((node) => node.localName.endsWith('-option-group'), this.children);
+    }
+    get entries() {
+        return this.data.records ?? this.options;
+    }
+    get elements() {
+        return this.data.records ? this.data.drawn : this.options;
     }
     get shown() {
-        return this.options.filter((option) => !option.hidden);
+        return this.entries.filter((option) => !option.hidden);
     }
     get values() {
         return this.value === '' ? [] : this.value.split(',');
     }
     choose(value) {
         const chosen = this.values;
+        if (!chosen.includes(value)) {
+            this.anchor = value;
+        }
         const next = this.multiple
             ? chosen.includes(value)
                 ? chosen.filter((each) => each !== value)
@@ -332,23 +325,31 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             : [value];
         const joined = next.join(',');
         if (joined === this.value) {
+            this.chosenAgain?.();
             return;
         }
         this.requestValue(joined);
     }
+    extend(to) {
+        const reach = this.shown.filter((option) => !option.disabled).map((option) => option.value);
+        const taken = rangeAdd(this.values, reach, reach.indexOf(this.anchor), reach.indexOf(to));
+        if (taken) {
+            this.requestValue(taken.join(','));
+        }
+    }
     arrive(value) {
         this.parked = false;
         this.activeValue = value;
-        const link = this.options.some((option) => option.value === value && Boolean(option.href));
+        const link = this.entries.some((option) => option.value === value && Boolean(option.href));
         if (!this.multiple && !this.manual && !this.forwarded && !link) {
             this.choose(value);
         }
     }
     pageSize() {
         const items = this.partNamed('items');
-        const row = this.shown[0]?.getBoundingClientRect().height ?? 0;
+        const row = this.elements.find((option) => !option.hidden)?.getBoundingClientRect().height ?? 0;
         const height = items?.clientHeight ?? 0;
-        return row > 0 && height > 0 ? Math.max(1, Math.floor(height / row) - 1) : PAGE;
+        return row > 0 && height > 0 ? pageRows(height, row) : PAGE;
     }
     navigate(event) {
         this.forwarded = true;
@@ -360,29 +361,21 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     reveal() {
-        const items = this.partNamed('items');
-        const chosen = this.options.find((option) => option.selected && !option.hidden);
-        if (!items || !chosen) {
+        if (this.data.records) {
+            this.data.center(this.values[0] ?? '');
             return;
         }
-        for (let pass = 0; pass < 2; pass += 1) {
-            const box = items.getBoundingClientRect();
-            const row = chosen.getBoundingClientRect();
-            if (box.height === 0 || row.height === 0) {
-                return;
-            }
-            const off = row.top + row.height / 2 - (box.top + box.height / 2);
-            if (Math.abs(off) < 1) {
-                return;
-            }
-            items.scrollTop += off;
+        const items = this.partNamed('items');
+        const chosen = this.options.find((option) => option.selected && !option.hidden);
+        if (items && chosen) {
+            centerInView(items, chosen);
         }
     }
     place() {
         this.forgetRemoved();
         const needle = this.filter.trim().toLowerCase();
         const chosen = new Set(this.values);
-        for (const option of this.options) {
+        for (const option of this.entries) {
             option.hidden = needle !== '' && !option.text.toLowerCase().includes(needle);
             option.selected = chosen.has(option.value);
         }
@@ -398,20 +391,10 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (rescue && !shown.some((option) => option.value === this.activeValue)) {
             this.activeValue = shown.find((option) => !option.disabled)?.value ?? '';
         }
-        for (const option of this.options) {
+        for (const option of this.entries) {
             option.active = option.value === this.activeValue;
         }
-        if (needle === '' || !paintable()) {
-            matched.delete(this);
-        }
-        else {
-            matched.set(this, shown.flatMap((option) => rangeFor(option, needle)));
-        }
-        paintMatches();
-        const anyShown = shown.length > 0;
-        if (anyShown !== this.hasMatches) {
-            this.hasMatches = anyShown;
-        }
+        this.hasMatches = shown.length > 0;
         this.counted = true;
     }
     get owned() {
@@ -422,15 +405,19 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (this.owned) {
             return;
         }
-        const present = new Set(this.options.map((option) => option.value));
+        const present = new Set(this.entries.map((option) => option.value));
         const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
             this.value = this.values.filter((value) => !gone.includes(value)).join(',');
         }
     }
-    followActive() {
-        const active = this.shown.find((option) => option.value === this.activeValue);
+    followActive(changed) {
+        if (this.data.records &&
+            !this.data.follow(changed.has('activeValue') || changed.has('filter'))) {
+            return;
+        }
+        const active = this.elements.find((option) => !option.hidden && option.value === this.activeValue);
         if (active) {
             const items = this.partNamed('items');
             scrollItemIntoView(active, { padding: 4, ...(items ? { scroller: items } : {}) });
@@ -454,8 +441,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('keydown', this.handleKeydown);
-        matched.delete(this);
-        paintMatches();
+        markMatches(this, [], '');
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -476,7 +462,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         this.toggleState('empty', !this.showsOptions);
         this.toggleState('loading', this.loading);
-        this.toggleState('error', this.loadError !== '');
+        this.toggleState('error', this.failed);
         this.toggleState('no-results', this.noResults);
     }
     seedDeclared() {
@@ -498,14 +484,15 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (!list || !('ariaActiveDescendantElement' in list)) {
             return;
         }
-        const active = this.options.find((option) => option.value === this.currentValue);
+        const active = this.elements.find((option) => option.value === this.currentValue);
         list.ariaActiveDescendantElement = active ?? null;
     }
     updated(changed) {
         super.updated(changed);
-        this.followActive();
+        this.followActive(changed);
         this.sync();
         this.linkActive();
+        markMatches(this, this.elements.filter((option) => !option.hidden), this.filter.trim());
     }
     takeFilter(control) {
         this.filtering.cancel();
@@ -547,12 +534,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     get showsOptions() {
         return this.counted && !this.loading
             ? this.filter === ''
-                ? this.options.length > 0
+                ? this.entries.length > 0
                 : this.hasMatches
             : true;
     }
     renderStatus(hasContent) {
-        if (this.loadError !== '') {
+        if (this.failed) {
             return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
         }
         if (!this.loading && hasContent) {
@@ -571,17 +558,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return (this.counted &&
             !this.loading &&
             this.filter !== '' &&
-            this.options.length > 0 &&
+            this.entries.length > 0 &&
             !this.hasMatches);
     }
+    get failed() {
+        return Boolean(this.loadError);
+    }
     renderLive(hasContent) {
-        if (this.loadError !== '') {
-            return html `<span part="live" role="status">${this.loadError}</span>`;
-        }
-        if (this.noResults && this.noResultsText !== undefined) {
-            return html `<span part="live" role="status">${this.noResultsText}</span>`;
-        }
-        return super.renderLive(hasContent);
+        const words = this.loadError || (this.noResults ? this.noResultsText : undefined);
+        return words === undefined
+            ? super.renderLive(hasContent)
+            : html `<span part="live" role="status">${words}</span>`;
     }
     render() {
         const shown = this.showsOptions;
@@ -594,7 +581,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
               <input
                 part="search-field"
                 type="text"
-                autocomplete=${this.autocomplete || nothing}
+                autocomplete="off"
                 spellcheck="false"
                 .value=${this.filter}
                 placeholder=${this.filterLabel}
@@ -617,14 +604,22 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         aria-labelledby=${this.labeled ? this.labelId : nothing}
         aria-multiselectable=${this.multiple ? 'true' : nothing}
         aria-required=${this.required ? 'true' : nothing}
-        ${''}
         tabindex=${this.filterable ? nothing : this.isDisabled ? -1 : 0}
         @scroll=${this.handleScroll}
       >
-        <slot @slotchange=${() => this.place()}></slot>
+        ${this.data.render() ?? html `<slot @slotchange=${() => this.requestUpdate()}></slot>`}
         ${this.renderStatus(shown)}
       </div>
-      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}${this.autocomplete === 'off'
+            ? nothing
+            : drawAutofill({
+                autocomplete: this.autocomplete,
+                disabled: this.isDisabled,
+                multiple: this.multiple,
+                onFill: (value) => this.requestValue(value),
+                options: this.childrenKnown ? this.entries : [],
+                value: this.value,
+            })}`;
     }
 };
 __decorate([
@@ -648,6 +643,12 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "items", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessListbox.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'load-error' })
 ], HelixHeadlessListbox.prototype, "loadError", void 0);
@@ -667,14 +668,11 @@ __decorate([
     property({ attribute: 'results-label' })
 ], HelixHeadlessListbox.prototype, "resultsLabel", void 0);
 __decorate([
-    state()
-], HelixHeadlessListbox.prototype, "activeValue", void 0);
+    property({ attribute: 'selected-label' })
+], HelixHeadlessListbox.prototype, "selectedLabel", void 0);
 __decorate([
     state()
-], HelixHeadlessListbox.prototype, "hasMatches", void 0);
-__decorate([
-    state()
-], HelixHeadlessListbox.prototype, "counted", void 0);
+], HelixHeadlessListbox.prototype, "activeValue", void 0);
 HelixHeadlessListbox = __decorate([
     customElement('helix-headless-listbox')
 ], HelixHeadlessListbox);

package/dist/map/marker/map-marker.d.ts

@@ -12,7 +12,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `name`, or its `label` if it has no name.
  *
  * All the markers in a map share one tab stop. The arrow keys move between
- * them in the order they are written.
+ * them in the order they are written. Taking away the marker that has focus
+ * moves focus to the next one, or to the one before where it was the last.
  *
  * @since 0.105.0
  * @status experimental

package/dist/map/root/map-root.d.ts

@@ -67,8 +67,20 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * @slot - The element your renderer draws the map in, and the map's markers, routes, areas, positions, and points layers.
  * @slot attribution - The map credit, which most tile licenses require.
+ * @slot face-north-icon - Replaces the compass needle. It inherits `--map-needle-turn`, so `rotate: var(--map-needle-turn)` keeps it pointing north.
  * @slot footer - Content below the map, such as a legend or a scale.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the map, such as a title or a search field.
+ * @slot layers-icon - Replaces the glyph inside the layers button.
+ * @slot pan-down-icon - Replaces the glyph inside the pan down button.
+ * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
+ * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
+ * @slot pan-up-icon - Replaces the glyph inside the pan up button.
+ * @slot rotate-left-icon - Replaces the glyph inside the rotate left button.
+ * @slot rotate-right-icon - Replaces the glyph inside the rotate right button.
+ * @slot tilt-icon - Replaces the "3D" inside the 3D button.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in button.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out button.
  *
  * @event {Event} change - The layers menu changed the map type, which `map-type` now holds.
  * @event {HelixActivateEvent} helix-activate - A marker was pressed. The value is the marker's `name`, or its `label` if it has no name. A cluster sends `helix-map-cluster` instead.
@@ -122,8 +134,11 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * @cssstate fullscreen - The map fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate layers-open - The layers menu is open.
  * @cssstate ready - The map has been drawn whole, after `helix-map-ready`.
+ * @cssstate rotated - The map is turned away from north, by `bearing`.
  * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a map with `gestures="activate"` waits to be pressed.
+ * @cssstate tilted - The map is tilted by `pitch`, so it no longer looks straight down.
  * @cssstate using - A map with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
@@ -323,8 +338,31 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     protected readonly keys: KeyboardNavigationController;
     /** The marker a press or a click came from, where it came from one. */
     private markerOf;
+    /**
+     * The marker focus is on, while it is.
+     *
+     * **Kept so a marker the page takes away hands focus on.** A delivery done
+     * or a filter changed removes a marker, and the one a reader was on went
+     * with focus still in it: the browser dropped focus to the page, and the
+     * reader was put back at its top with nothing said.
+     */
+    private focused;
     /** Moves the tab stop to the marker focus arrived at. */
     private readonly handleFocusIn;
+    /**
+     * Forgets the marker focus left, unless the page took it away.
+     *
+     * Focus leaving for nothing is a press on the page or the marker removed,
+     * and which one is known once the removal has finished: a marker still in
+     * the page was left, and one gone is owed a place for focus to land.
+     */
+    private readonly handleFocusOut;
+    /**
+     * Gives focus to the marker that took the stop of one the page took away
+     * with focus on it: the next, the last where it was the last, its cluster
+     * where it is gathered, and the region where none is left.
+     */
+    private refocus;
     /**
      * Says a marker was pressed, by click, Enter or Space: a place by its name,
      * and a cluster as a cluster, from the marker it is drawn as.
@@ -376,7 +414,7 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * order they are written, with its picture and name, pressed while it is
      * shown. A group's tile is pressed while any of its layers is shown.
      */
-    private renderLayersMenu;
+    protected renderLayersMenu(): TemplateResult | typeof nothing;
     /**
      * The map types, as cards with a picture of the map in each: Standard,
      * Hybrid, and Satellite. One is chosen, so they are radio buttons, and the
@@ -392,7 +430,7 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * arrows around it are the way to move and turn the map without dragging,
      * which a pointer otherwise needs.
      */
-    private renderCompass;
+    protected renderCompass(pan: boolean, rotate: boolean): TemplateResult;
     /**
      * The controls, in one column in the order they are read: fullscreen, the
      * layers, 3D, zoom, and the compass with the arrows round it, last, where