@fusion.dev/helix-headless 0.146.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, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, 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);
                     }
                 }
@@ -119,16 +89,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (this.multiple &&
-                !typing &&
-                event.key.toLowerCase() === 'a' &&
-                (event.ctrlKey || event.metaKey) &&
-                !event.altKey) {
+            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)) {
@@ -139,7 +102,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (!(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const fieldRange = typing &&
+                this.multiple &&
+                event.shiftKey &&
+                (event.ctrlKey || event.metaKey) &&
+                (event.key === 'Home' || event.key === 'End');
+            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();
@@ -148,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') {
@@ -170,7 +146,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             if (target) {
                 this.arrive(target.value);
                 const ranged = event.key === 'Home' || event.key === 'End';
-                if (this.multiple && !typing && event.shiftKey && ranged) {
+                if (this.multiple && (!typing || fieldRange) && event.shiftKey && ranged) {
                     const taken = rangeAdd(this.values, shown.map((option) => option.value), at, next);
                     if (taken) {
                         this.requestValue(taken.join(','));
@@ -196,14 +172,18 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.askedAt = -1;
         this.handleScroll = (event) => {
             const items = event.currentTarget;
-            const count = this.options.length;
-            if (this.loading || count === this.askedAt || items.clientHeight === 0) {
+            const count = this.entries.length;
+            if (this.loading ||
+                !endInSight({
+                    askedAt: this.askedAt,
+                    count,
+                    remaining: items.scrollHeight - items.scrollTop - items.clientHeight,
+                    screen: items.clientHeight,
+                })) {
                 return;
             }
-            if (items.scrollHeight - items.scrollTop - items.clientHeight <= items.clientHeight) {
-                this.askedAt = count;
-                this.dispatchEvent(new HelixLoadMoreEvent());
-            }
+            this.askedAt = count;
+            this.dispatchEvent(new HelixLoadMoreEvent());
         };
         this.handleFilterKeydown = (event) => {
             if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
@@ -236,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);
@@ -293,49 +282,42 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get options() {
-        return this.collect(this.children);
+        return this.among((node) => node instanceof HelixHeadlessOption, this.children);
     }
-    collect(nodes) {
+    among(is, nodes) {
         const found = [];
         for (const node of nodes) {
-            if (node instanceof HelixHeadlessOption) {
+            if (is(node)) {
                 found.push(node);
             }
-            else if (node instanceof HTMLSlotElement) {
-                found.push(...this.collect(node.assignedElements({ flatten: true })));
-            }
             else {
-                found.push(...this.collect(node.children));
+                found.push(...this.among(is, node instanceof HTMLSlotElement
+                    ? node.assignedElements({ flatten: true })
+                    : node.children));
             }
         }
         return found;
     }
     get groups() {
-        const found = [];
-        const walk = (nodes) => {
-            for (const node of nodes) {
-                if (node instanceof HelixHeadlessOptionGroup) {
-                    found.push(node);
-                }
-                if (node instanceof HTMLSlotElement) {
-                    walk(node.assignedElements({ flatten: true }));
-                }
-                else {
-                    walk(node.children);
-                }
-            }
-        };
-        walk(this.children);
-        return found;
+        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)
@@ -343,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;
@@ -371,55 +361,40 @@ 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);
         }
         for (const group of this.groups) {
-            const inside = this.collect(group.children);
+            const inside = this.among((node) => node instanceof HelixHeadlessOption, group.children);
             group.hidden = inside.length > 0 && inside.every((option) => option.hidden);
         }
+        for (const rule of this.among((node) => node.localName.endsWith('-option-separator'), this.children)) {
+            rule.hidden = needle !== '';
+        }
         const shown = this.shown;
         const rescue = !this.parked && (needle !== '' || this.activeValue !== '');
         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() {
@@ -430,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 } : {}) });
@@ -462,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);
@@ -484,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() {
@@ -506,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();
@@ -555,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) {
@@ -579,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;
@@ -602,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}
@@ -625,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([
@@ -656,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);
@@ -675,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