@fusion.dev/helix-headless 0.104.1 → 0.106.0

package/dist/map/index.d.ts

@@ -1 +1,15 @@
+export { HelixHeadlessMapArea } from './area/map-area.js';
+export { HelixHeadlessMapBuildings } from './buildings/map-buildings.js';
+export { HelixHeadlessMapContours } from './contours/map-contours.js';
+export { HelixHeadlessMapLandcover } from './landcover/map-landcover.js';
+export { HelixHeadlessMapMarker } from './marker/map-marker.js';
+export type { MapPointsCollection, MapPointsInView, MapPointsPlace, } from './points/map-points.js';
+export { HelixHeadlessMapPoints } from './points/map-points.js';
+export { HelixHeadlessMapPosition } from './position/map-position.js';
+export { HelixHeadlessMapRaster } from './raster/map-raster.js';
+export type { MapType } from './root/map-root.js';
 export { HelixHeadlessMap } from './root/map-root.js';
+export type { MapPoint } from './route/map-route.js';
+export { HelixHeadlessMapRoute } from './route/map-route.js';
+export type { MapTerrainEncoding } from './terrain/map-terrain.js';
+export { HelixHeadlessMapTerrain } from './terrain/map-terrain.js';

package/dist/map/index.js

@@ -1 +1,11 @@
+export { HelixHeadlessMapArea } from './area/map-area.js';
+export { HelixHeadlessMapBuildings } from './buildings/map-buildings.js';
+export { HelixHeadlessMapContours } from './contours/map-contours.js';
+export { HelixHeadlessMapLandcover } from './landcover/map-landcover.js';
+export { HelixHeadlessMapMarker } from './marker/map-marker.js';
+export { HelixHeadlessMapPoints } from './points/map-points.js';
+export { HelixHeadlessMapPosition } from './position/map-position.js';
+export { HelixHeadlessMapRaster } from './raster/map-raster.js';
 export { HelixHeadlessMap } from './root/map-root.js';
+export { HelixHeadlessMapRoute } from './route/map-route.js';
+export { HelixHeadlessMapTerrain } from './terrain/map-terrain.js';

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

@@ -0,0 +1,47 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+/**
+ * @summary What covers the ground on a map: forest, grass, farmland, wetland, sand, rock, and ice.
+ *
+ * @description
+ * `connectMap` colors the ground by what covers it, from the land cover in
+ * the map's own tiles: forest and grass in greens, farmland in wheat,
+ * wetland in teal, sand in tan, rock in gray, and ice in pale blue. Each is
+ * mixed into the map's land color, so the colors sit in a light or a dark
+ * theme. It draws over the map's parks, and under its water and roads.
+ *
+ * MapLibre draws it, from tiles in the OpenMapTiles schema. The frame lists
+ * the layer by its `label` for screen readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Land cover, Land use, Vegetation, Ground cover
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The layer's name or color changed. Used by `connectMap`; pages do not need to listen for it.
+ */
+export declare class HelixHeadlessMapLandcover extends HelixElement {
+    /** More about the land cover. Read after the label in the frame's list. */
+    description?: string;
+    /**
+     * A name this layer shares with other layers, such as a route and its
+     * dotted legs. The layers menu shows layers in the same group as one entry,
+     * named by the first of them, and its checkbox shows or hides them all.
+     */
+    group?: string;
+    /** Marks this as a layer for the frame and the connector, whatever its tag. */
+    readonly isMapLayer = true;
+    /** @internal Which kind of layer, which is how the connector draws it. */
+    readonly layerKind: 'landcover';
+    /** The layer's name in the frame's list. */
+    label: string;
+    /** Tells the frame and the connector the layer was renamed or recolored. */
+    protected updated(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-landcover': HelixHeadlessMapLandcover;
+    }
+}

package/dist/map/landcover/map-landcover.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessMapLandcover = class HelixHeadlessMapLandcover extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isMapLayer = true;
+        this.layerKind = 'landcover';
+        this.label = 'Land cover';
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapLandcover.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapLandcover.prototype, "group", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapLandcover.prototype, "label", void 0);
+HelixHeadlessMapLandcover = __decorate([
+    customElement('helix-headless-map-landcover')
+], HelixHeadlessMapLandcover);
+export { HelixHeadlessMapLandcover };

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

@@ -0,0 +1,120 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A named place on a map.
+ *
+ * @description
+ * A button placed at a latitude and longitude. `connectMap` positions it on
+ * the map and moves it as the map moves. Its name shows beside it on hover
+ * and focus.
+ *
+ * Pressing a marker sends `helix-activate` from the frame with the marker's
+ * `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.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Map pin, Place, Point of interest
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @slot icon - A letter, number, or icon shown in the point, such as a stop's order. Screen readers read the marker's label only.
+ *
+ * @event {HelixMapClusterEvent} helix-map-cluster - This marker shows a cluster and was pressed. `connectMap` zooms in to its places.
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The marker moved or was renamed. Used by `connectMap`; pages do not need to listen for it.
+ *
+ * @csspart label - The place's name, next to the point.
+ * @csspart marker - The button, holding the point and the name.
+ * @csspart point - The dot on the place, holding the icon if there is one.
+ *
+ * @cssstate behind - On the far side of a globe, out of sight until the globe turns it into view.
+ * @cssstate cluster - Shows several markers as one count.
+ * @cssstate clustered - Hidden inside another marker's cluster.
+ * @cssstate current - Holds the map's tab stop.
+ * @cssstate fanned - Spread out from a location it shares with other markers, after their cluster was pressed.
+ * @cssstate icon - Has content in the icon slot.
+ * @cssstate passed - Marked as passed.
+ * @cssstate start - Shows its name before the point, because there was no room after it.
+ */
+export declare class HelixHeadlessMapMarker extends HelixElement {
+    /**
+     * @internal Whether the map's one tab stop is on this marker, written by the
+     * frame. Not a consumer's to set: the frame keeps exactly one.
+     */
+    current: boolean;
+    /**
+     * @internal The names of the places this stands for, its own first, written
+     * by the connector while it gathers markers that would draw over each other.
+     * Empty while it stands only for itself.
+     */
+    gathered: string[];
+    /**
+     * @internal Whether the place is on the far side of a globe, written by the
+     * connector. It is hidden meanwhile, and stays in the frame's walk, so a
+     * reader reaching it turns the globe to show it.
+     */
+    behind: boolean;
+    /**
+     * @internal Whether this stands fanned out from a spot it shares with
+     * other places, written by the connector when their cluster is pressed and
+     * no zoom would draw them apart.
+     */
+    fanned: boolean;
+    /**
+     * @internal The marker standing for this one while they are gathered,
+     * written by the connector. This one is hidden meanwhile, and the frame's
+     * walk and tab stop go to the one standing for it.
+     */
+    gatheredBy: HelixHeadlessMapMarker | undefined;
+    /**
+     * Marks the element as a map marker. The frame and the connector find
+     * markers among the frame's children by this flag, so they treat a styled
+     * marker and a headless one the same way.
+     */
+    readonly isMapMarker = true;
+    /** The place's name. Shown next to the marker and read by screen readers. */
+    label?: string;
+    /** Latitude, in degrees. A marker without both `lat` and `lng` is not shown. */
+    lat?: number;
+    /** Longitude, in degrees. */
+    lng?: number;
+    /**
+     * @internal Which side of the point the name sits on, in reading order,
+     * written by the connector from the room either side of the place. After
+     * the point unless the view's edge would cut the name off there.
+     */
+    side: 'end' | 'start';
+    /** The value `helix-activate` reports. Defaults to the label. */
+    name: string;
+    /**
+     * Marks the place as passed, such as a stop already visited. The marker is
+     * drawn muted, and its name is followed by `passed-label`.
+     */
+    passed: boolean;
+    /** The word added after a passed place's name. Defaults to "passed". */
+    passedLabel: string;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Tells the connector the place moved or was renamed, which moves the point
+     * or changes how far the name reaches, and the frame that it was gathered
+     * or let go, which moves its tab stop. Not for the rest of the frame's own
+     * bookkeeping, `current` and `side`, which the frame and the connector wrote.
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * How far the marker reaches from its point along the line, name included,
+     * in CSS pixels: the button's width, which is laid out even while its name is
+     * faded, so the connector can ask before the name is ever shown.
+     */
+    extent(): number;
+    /** Focuses the marker's button. The host draws no box of its own. */
+    focus(options?: FocusOptions): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-marker': HelixHeadlessMapMarker;
+    }
+}

package/dist/map/marker/map-marker.js

@@ -0,0 +1,109 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+const BOOKKEEPING = new Set([
+    'behind',
+    'current',
+    'fanned',
+    'gathered',
+    'gatheredBy',
+    'side',
+]);
+let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.current = false;
+        this.gathered = [];
+        this.behind = false;
+        this.fanned = false;
+        this.gatheredBy = undefined;
+        this.isMapMarker = true;
+        this.side = 'end';
+        this.name = '';
+        this.passed = false;
+        this.passedLabel = 'passed';
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('behind', this.behind);
+        this.toggleState('cluster', this.gathered.length > 1);
+        this.toggleState('clustered', this.gatheredBy !== undefined);
+        this.toggleState('current', this.current);
+        this.toggleState('fanned', this.fanned);
+        this.toggleState('passed', this.passed);
+        this.toggleState('start', this.side === 'start');
+        if (this.childrenKnown) {
+            this.toggleState('icon', this.knownChildren.some((child) => child.slot === 'icon'));
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        const keys = [...changed.keys()];
+        if (keys.some((key) => key === 'gathered' || key === 'gatheredBy')) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'cluster' }));
+        }
+        if (keys.some((key) => !BOOKKEEPING.has(key))) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
+        }
+    }
+    extent() {
+        return this.partNamed('marker')?.getBoundingClientRect().width ?? 0;
+    }
+    focus(options) {
+        this.partNamed('marker')?.focus(options);
+    }
+    render() {
+        const cluster = this.gathered.length > 1;
+        const lang = cluster ? this.closest('[lang]')?.getAttribute('lang') || undefined : undefined;
+        return html `<span part="marker" role="button" tabindex=${this.current ? '0' : '-1'} ?hidden=${this.gatheredBy !== undefined}>
+      <span part="point" aria-hidden="true">${cluster ? new Intl.NumberFormat(lang).format(this.gathered.length) : nothing}<slot name="icon" ?hidden=${cluster} @slotchange=${() => this.requestUpdate()}></slot></span>
+      <span part="label">${cluster ? new Intl.ListFormat(lang, { type: 'conjunction' }).format(this.gathered) : this.passed ? `${this.label ?? ''}, ${this.passedLabel}` : (this.label ?? '')}</span>
+    </span>`;
+    }
+};
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "current", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "gathered", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "behind", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "fanned", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "gatheredBy", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapMarker.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMapMarker.prototype, "lat", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMapMarker.prototype, "lng", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapMarker.prototype, "side", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapMarker.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMapMarker.prototype, "passed", void 0);
+__decorate([
+    property({ attribute: 'passed-label' })
+], HelixHeadlessMapMarker.prototype, "passedLabel", void 0);
+HelixHeadlessMapMarker = __decorate([
+    customElement('helix-headless-map-marker')
+], HelixHeadlessMapMarker);
+export { HelixHeadlessMapMarker };

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

@@ -0,0 +1,139 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+/** A place in a points layer, written as an object with coordinates and an optional name. */
+export interface MapPointsPlace {
+    /** What pressing it reports, where it is not its label. */
+    id?: string | number | undefined;
+    /** Its name. */
+    label?: string | undefined;
+    lat: number;
+    lng: number;
+}
+/**
+ * A point or a count the renderer drew in view, as the connector found it and
+ * stood it on the screen, in pixels from the map's top left.
+ */
+export interface MapPointsInView {
+    /** How many places it stands for, where it is a count. */
+    count?: number | undefined;
+    /** Which it is, as the connector keys it: the same point or count keeps it while it stays in view. */
+    key: string;
+    /** Its name, where it is a point that has one. */
+    label?: string | undefined;
+    /** What pressing it reports, where it is a point. */
+    value?: string | undefined;
+    x: number;
+    y: number;
+}
+/** A GeoJSON collection of points, longitude first as GeoJSON writes it. */
+export interface MapPointsCollection {
+    features: {
+        geometry: {
+            coordinates: number[];
+            type: string;
+        } | null;
+        id?: string | number | undefined;
+        properties?: Record<string, unknown> | null;
+        type: 'Feature';
+    }[];
+    type: 'FeatureCollection';
+}
+/**
+ * @summary Thousands of places on a map, loaded from data.
+ *
+ * @description
+ * Use a points layer for more places than markers can handle, such as every
+ * café in a city. `connectMap` draws the points as one layer of the map. Set
+ * `src` to a GeoJSON file, or set `data` to a GeoJSON collection or a list of
+ * places. With `cluster`, nearby points combine into counts.
+ *
+ * Pressing a point sends `helix-activate` from this element with the point's
+ * id, or its name if it has no id. Each point is named by its `name`
+ * property, or by the property set in `name-key`.
+ *
+ * The points and counts in view share one tab stop. The arrow keys, Home, and
+ * End move between them from top to bottom and along each line. Enter on a
+ * count zooms in to it.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Data layer, GeoJSON layer, Point cloud, Point layer
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixActivateEvent} helix-activate - A point in view was pressed. The value is its id, or its name if it has no id.
+ * @event {HelixMapClusterEvent} helix-map-cluster - A count in view was pressed from the keyboard. `connectMap` zooms in to it.
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The points, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
+ *
+ * @csspart count - The button on a count, which is also a `place`.
+ * @csspart label - The name of the focused point or count.
+ * @csspart place - The button on a point or count in view.
+ * @csspart places - The group of buttons, named by the layer's label.
+ */
+export declare class HelixHeadlessMapPoints extends HelixElement {
+    /** Combines nearby points into counts. Pressing a count zooms in to it. */
+    cluster: boolean;
+    /**
+     * The name read for a count. `{count}` is replaced by the number of places.
+     * Defaults to "{count} places".
+     */
+    countLabel: string;
+    /**
+     * The points, as a GeoJSON collection or a list of `{ lat, lng, label, id }`
+     * places.
+     */
+    data?: MapPointsCollection | readonly MapPointsPlace[];
+    /**
+     * More about the points, such as how many there are. Read after the label in
+     * the frame's list.
+     */
+    description?: string;
+    /**
+     * A name this layer shares with other layers, such as a route and its
+     * dotted legs. The layers menu shows layers in the same group as one entry,
+     * named by the first of them, and its checkbox shows or hides them all.
+     */
+    group?: string;
+    /** Marks this as a layer for the frame and the connector, whatever its tag. */
+    readonly isMapLayer = true;
+    /** The layer's name, used in the frame's list. */
+    label?: string;
+    /** @internal Which kind of layer, which is how the connector draws it. */
+    readonly layerKind: 'points';
+    /** The GeoJSON property each point is named by. Defaults to `name`. */
+    nameKey: string;
+    /** A GeoJSON file of points to load. Ignored when `data` is set. */
+    src?: string;
+    /**
+     * @internal The points and counts in view, in reading order and stood on
+     * the screen, written by the connector as the view moves and settles.
+     */
+    walk: MapPointsInView[];
+    /** The one the layer's tab stop is on, by its key: the first until a reader moves it. */
+    private stop;
+    /** Where focus was when the walk changed, so it can go to what stands nearest there. */
+    private held;
+    /** What a point or a count in view is called. */
+    private nameOf;
+    /** The button standing on one, where it is drawn. */
+    private buttonOf;
+    /** Moves the tab stop and the focus to one. */
+    private reach;
+    /** Presses one: a point is the page's, a count the connector's to zoom in to. */
+    private press;
+    private readonly handleKeydown;
+    private readonly handleKeyup;
+    private readonly handleFocusin;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Tells the frame and the connector the points changed, were renamed or were
+     * retoned; not the walk, which the connector wrote, nor where it stands.
+     */
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-points': HelixHeadlessMapPoints;
+    }
+}

package/dist/map/points/map-points.js

@@ -0,0 +1,161 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPartChangeEvent, isRtl, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+let HelixHeadlessMapPoints = class HelixHeadlessMapPoints extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.cluster = false;
+        this.countLabel = '{count} places';
+        this.isMapLayer = true;
+        this.layerKind = 'points';
+        this.nameKey = 'name';
+        this.walk = [];
+        this.handleKeydown = (event) => {
+            const key = event.composedPath()[0]?.dataset?.key;
+            const at = this.walk.findIndex((one) => one.key === key);
+            const here = this.walk[at];
+            if (!here) {
+                return;
+            }
+            const forward = isRtl(this) ? 'ArrowLeft' : 'ArrowRight';
+            const back = isRtl(this) ? 'ArrowRight' : 'ArrowLeft';
+            const last = this.walk.length - 1;
+            const to = event.key === forward || event.key === 'ArrowDown'
+                ? Math.min(at + 1, last)
+                : event.key === back || event.key === 'ArrowUp'
+                    ? Math.max(at - 1, 0)
+                    : event.key === 'Home'
+                        ? 0
+                        : event.key === 'End'
+                            ? last
+                            : undefined;
+            if (to !== undefined) {
+                event.preventDefault();
+                this.reach(this.walk[to]);
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (event.key === 'Enter' && !event.repeat) {
+                    this.press(here);
+                }
+            }
+        };
+        this.handleKeyup = (event) => {
+            const key = event.composedPath()[0]?.dataset?.key;
+            const here = this.walk.find((one) => one.key === key);
+            if (here && event.key === ' ') {
+                event.preventDefault();
+                this.press(here);
+            }
+        };
+        this.handleFocusin = (event) => {
+            const key = event.composedPath()[0]?.dataset?.key;
+            if (key !== undefined) {
+                this.stop = key;
+            }
+        };
+    }
+    nameOf(one) {
+        if (one.count !== undefined) {
+            const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
+            return this.countLabel.replace('{count}', new Intl.NumberFormat(lang).format(one.count));
+        }
+        return one.label || one.value || '';
+    }
+    buttonOf(key) {
+        return key === undefined
+            ? null
+            : (this.renderRoot.querySelector(`[data-key="${CSS.escape(key)}"]`) ?? null);
+    }
+    reach(one) {
+        if (!one) {
+            return;
+        }
+        this.stop = one.key;
+        void this.updateComplete.then(() => this.buttonOf(one.key)?.focus());
+    }
+    press(one) {
+        if (one.count !== undefined) {
+            this.dispatchEvent(new HelixMapClusterEvent({ key: one.key, labels: [] }));
+        }
+        else {
+            this.dispatchEvent(new HelixActivateEvent({ value: one.value || one.label || '' }));
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('walk')) {
+            const key = this.shadowRoot?.activeElement?.dataset?.key;
+            const was = changed.get('walk') ?? [];
+            this.held = was.find((one) => one.key === key);
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        const held = this.held;
+        this.held = undefined;
+        if (held && !this.walk.some((one) => one.key === held.key)) {
+            const nearest = [...this.walk].sort((a, b) => Math.hypot(a.x - held.x, a.y - held.y) - Math.hypot(b.x - held.x, b.y - held.y))[0];
+            this.reach(nearest);
+        }
+        if ([...changed.keys()].some((key) => key !== 'walk' && key !== 'stop')) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+        }
+    }
+    render() {
+        if (this.walk.length === 0) {
+            return nothing;
+        }
+        const stop = this.walk.some((one) => one.key === this.stop) ? this.stop : this.walk[0]?.key;
+        return html `<span part="places" role="group" aria-label=${this.label ?? ''} @focusin=${this.handleFocusin} @keydown=${this.handleKeydown} @keyup=${this.handleKeyup}>${repeat(this.walk, (one) => one.key, (one) => {
+            const tabindex = one.key === stop ? '0' : '-1';
+            const at = `--_map-place-x: ${one.x}px; --_map-place-y: ${one.y}px`;
+            const name = html `<span part="label">${this.nameOf(one)}</span>`;
+            return one.count === undefined
+                ? html `<span part="place" role="button" data-key=${one.key} tabindex=${tabindex} style=${at}>${name}</span>`
+                : html `<span part="place count" role="button" data-key=${one.key} tabindex=${tabindex} style=${at}>${name}</span>`;
+        })}</span>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMapPoints.prototype, "cluster", void 0);
+__decorate([
+    property({ attribute: 'count-label' })
+], HelixHeadlessMapPoints.prototype, "countLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMapPoints.prototype, "data", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapPoints.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapPoints.prototype, "group", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapPoints.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'name-key' })
+], HelixHeadlessMapPoints.prototype, "nameKey", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapPoints.prototype, "src", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapPoints.prototype, "walk", void 0);
+__decorate([
+    state()
+], HelixHeadlessMapPoints.prototype, "stop", void 0);
+HelixHeadlessMapPoints = __decorate([
+    customElement('helix-headless-map-points')
+], HelixHeadlessMapPoints);
+export { HelixHeadlessMapPoints };