@fusion.dev/helix-headless 0.104.0 → 0.105.0

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

@@ -700,6 +700,18 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * lurch under every press.
      */
     private readonly handleFocusIn;
+    /**
+     * A connection being made from the keyboard ends when the reader leaves
+     * the board, as Escape ends it.
+     *
+     * Otherwise the board went on showing every card as somewhere to land, and
+     * a reader who came back and pressed Enter on a card connected something
+     * they had long since walked away from. Only for somewhere else on the
+     * page: a window losing focus names nothing, and the reader switching away
+     * and back is still in the middle of it. A pointer's connection is its
+     * own, ended by its release.
+     */
+    private readonly handleFocusOut;
     /** Brings a card into view, where it is not already whole in it. */
     private reveal;
     /**

package/dist/canvas/root/canvas-root.js

@@ -291,7 +291,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.linking.pressed) {
                     const clicked = this.linking.edge;
                     this.linking = undefined;
-                    if (clicked !== undefined && pointing) {
+                    if (clicked !== undefined && pointing && event.type !== 'pointercancel') {
                         this.clicked(clicked, event);
                     }
                     return;
@@ -316,7 +316,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     return;
                 }
                 this.carrying = undefined;
-                if (!carry.started && pointing) {
+                if (!carry.started && pointing && event.type !== 'pointercancel') {
                     this.clicked(carry.pressed, event);
                 }
                 if (carry.moved) {
@@ -326,7 +326,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             if (this.dragging?.pointer === event.pointerId) {
                 const drag = this.dragging;
-                if (Math.hypot(event.clientX - drag.from.x, event.clientY - drag.from.y) < SLOP) {
+                if (event.type !== 'pointercancel' &&
+                    Math.hypot(event.clientX - drag.from.x, event.clientY - drag.from.y) < SLOP) {
                     if (drag.pressed !== undefined && pointing) {
                         this.clicked(drag.pressed, event);
                     }
@@ -508,6 +509,20 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 this.reveal(card.name);
             }
         };
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            const linking = this.linking;
+            if (!linking ||
+                linking.pointer !== undefined ||
+                linking.held ||
+                !(next instanceof Node) ||
+                this.contains(next) ||
+                this.renderRoot.contains(next)) {
+                return;
+            }
+            this.linking = undefined;
+            this.said = this.stoppedLabel;
+        };
         this.handleDoubleClick = (event) => {
             const path = event.composedPath();
             if (path.some((one) => one instanceof Element && one.matches(INTERACTIVE))) {
@@ -1462,6 +1477,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.watchWords();
         this.addEventListener('dblclick', this.handleDoubleClick);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('keydown', this.handleStopKeydown);
         this.addEventListener('pointercancel', this.handlePointerUp);
         this.addEventListener('pointerdown', this.handlePointerDown);
@@ -1478,6 +1494,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.words?.disconnect();
         this.removeEventListener('dblclick', this.handleDoubleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleStopKeydown);
         this.removeEventListener('pointercancel', this.handlePointerUp);
         this.removeEventListener('pointerdown', this.handlePointerDown);

package/dist/color-input/root/color-input-root.d.ts

@@ -184,6 +184,16 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
     private get painted();
     /** Relayed under this element's name, so a consumer hears one control. */
     private readonly handleInput;
+    /**
+     * The picker's request, taken as this element's own.
+     *
+     * **Only the picker's.** A request from anything inside it arrives here
+     * retargeted to the picker, and a slider's carried its number: a hue of 120
+     * became this field's value and every page listening heard it. The picker
+     * keeps its sliders' requests now, and this checks where the event started
+     * as well, so a picker a tier above renders cannot say for it what it did
+     * not mean.
+     */
     private readonly handlePickerChange;
     /**
      * The picker is about to take the pointer over, so the panel gets out of the

package/dist/color-input/root/color-input-root.js

@@ -29,6 +29,9 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         };
         this.handlePickerChange = (event) => {
             event.stopPropagation();
+            if (event.composedPath()[0] !== event.currentTarget) {
+                return;
+            }
             this.requestValue(event.detail.value);
             this.restore();
         };

package/dist/color-picker/root/color-picker-root.d.ts

@@ -382,6 +382,18 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * renders its own ramp through.
      */
     protected renderChannel(channel: 'alpha' | 'hue', label: string, max: number, value: number): TemplateResult;
+    /**
+     * A slider's own request, kept inside.
+     *
+     * **The slider is a Helix control, so it asks before it moves**, with
+     * `helix-before-change` carrying its number, and that event is composed. Let
+     * out, it reached a consumer listening on this element as though the picker
+     * had asked for a hue of 120 or an alpha of 0 as its color, which Color
+     * Input took for its value and the theme builder then failed to read as a
+     * brand. What this element asks for is a color, and it asks through `move`.
+     * Not refused, only kept: the slider applies, and `takeChannel` reads it.
+     */
+    private readonly keepChannelRequest;
     /**
      * One axis of the area, taken the way `takeChannel` takes a rail.
      *

package/dist/color-picker/root/color-picker-root.js

@@ -116,6 +116,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             const down = Math.min(1, Math.max(0, (event.clientY - box.top) / box.height));
             this.move({ brightness: Math.round((1 - down) * 100), saturation: Math.round(across * 100) });
         };
+        this.keepChannelRequest = (event) => {
+            event.stopPropagation();
+        };
     }
     get color() {
         return this.moved ?? parseColor(this.value) ?? parseColor(this.settled) ?? START;
@@ -179,6 +182,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       ?disabled=${this.isDisabled}
       @input=${(event) => this.takeChannel(channel, event)}
       @change=${(event) => this.takeChannel(channel, event)}
+      @helix-before-change=${this.keepChannelRequest}
     ></${this.tag('slider')}>`;
     }
     takeArea(axis, event) {

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

@@ -116,6 +116,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * holds a value and the wrong one for a palette: nothing here changed, a
      * command ran. It is stopped and re-announced rather than relayed, so a
      * consumer hears one event naming the element they put on the page.
+     *
+     * **And refused, so the list keeps no answer.** A listbox holding what was
+     * chosen hears the same row chosen again as no change and says nothing, so
+     * the command a reader ran last, which on a site is the page they are on,
+     * could not be run again: Enter did nothing and the palette stayed open.
      */
     private readonly handleChange;
     /**

package/dist/command/root/command-root.js

@@ -43,6 +43,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         };
         this.handleChange = (event) => {
             event.stopPropagation();
+            event.preventDefault();
             const { value } = event.detail;
             if (!this.dispatchEvent(new HelixSelectEvent({ value }))) {
                 return;

package/dist/element-events.generated.js

@@ -100,7 +100,18 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
-    'helix-headless-map': ['helix-map-pan', 'helix-map-zoom'],
+    'helix-headless-map': [
+        'helix-activate',
+        'helix-map-cluster',
+        'helix-map-pan',
+        'helix-map-part-change',
+        'helix-map-zoom',
+    ],
+    'helix-headless-map-area': ['helix-map-part-change'],
+    'helix-headless-map-marker': ['helix-map-cluster', 'helix-map-part-change'],
+    'helix-headless-map-points': ['helix-activate', 'helix-map-cluster', 'helix-map-part-change'],
+    'helix-headless-map-position': ['helix-map-part-change'],
+    'helix-headless-map-route': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-headless-menu-item': ['helix-select'],

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

@@ -0,0 +1,42 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+import { type MapPoint } from '../route/map-route.js';
+/**
+ * @summary A shape on a map, such as a delivery zone.
+ *
+ * @description
+ * `connectMap` fills the shape as a layer of the map, under its place names.
+ * The frame lists each area by its `label` and `description` for screen
+ * readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Map region, Polygon, Zone
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The area's points, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
+ */
+export declare class HelixHeadlessMapArea extends HelixElement {
+    /** More about the area. Read after its label in the frame's list. */
+    description?: 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: 'area' | 'route';
+    /** The area's name, used in the frame's list. */
+    label?: string;
+    /**
+     * The corners of the shape, in order. The last point connects back to the
+     * first.
+     */
+    points?: MapPoint[];
+    /** Tells the frame and the connector the shape moved, was renamed or was retoned. */
+    protected updated(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-area': HelixHeadlessMapArea;
+    }
+}

package/dist/map/area/map-area.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';
+import { pointsConverter } from '../route/map-route.js';
+let HelixHeadlessMapArea = class HelixHeadlessMapArea extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isMapLayer = true;
+        this.layerKind = 'area';
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapArea.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapArea.prototype, "label", void 0);
+__decorate([
+    property({ converter: pointsConverter })
+], HelixHeadlessMapArea.prototype, "points", void 0);
+HelixHeadlessMapArea = __decorate([
+    customElement('helix-headless-map-area')
+], HelixHeadlessMapArea);
+export { HelixHeadlessMapArea };

package/dist/map/index.d.ts

@@ -1 +1,8 @@
+export { HelixHeadlessMapArea } from './area/map-area.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 { HelixHeadlessMap } from './root/map-root.js';
+export type { MapPoint } from './route/map-route.js';
+export { HelixHeadlessMapRoute } from './route/map-route.js';

package/dist/map/index.js

@@ -1 +1,6 @@
+export { HelixHeadlessMapArea } from './area/map-area.js';
+export { HelixHeadlessMapMarker } from './marker/map-marker.js';
+export { HelixHeadlessMapPoints } from './points/map-points.js';
+export { HelixHeadlessMapPosition } from './position/map-position.js';
 export { HelixHeadlessMap } from './root/map-root.js';
+export { HelixHeadlessMapRoute } from './route/map-route.js';

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

@@ -0,0 +1,113 @@
+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 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 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 this as a map marker for the frame and the connector, which find
+     * their markers among the frame's children by this rather than by tag, so a
+     * styled marker and a headless one are the same thing to them.
+     */
+    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 button rather than the host, which 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,97 @@
+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(['current', 'fanned', 'gathered', 'gatheredBy', 'side']);
+let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.current = false;
+        this.gathered = [];
+        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('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, "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,133 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+/** A place in a points layer, where it is written as a list rather than GeoJSON. */
+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;
+    /** 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;
+    }
+}