@fusion.dev/helix-headless 0.105.0 → 0.106.0

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

@@ -3,22 +3,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
- * @summary A list of options, one or several of which are the answer.
+ * @summary A list of options, from which you choose one or several.
  *
  * @description
- * **The listbox is the control and the options are its vocabulary.** A Select
- * is this with a trigger in front of it, a Combobox is this with a text input,
- * and a command palette is this again: they differ in what opens the list and
- * what filters it, not in what the list is.
+ * The listbox is the control, and options are its items. A Select is a listbox
+ * with a trigger in front of it, a Combobox is a listbox with a text input, and
+ * a command palette is a listbox in a dialog. They differ only in what opens
+ * the list and what filters it.
  *
- * **`value` is comma separated when `multiple` is set**, the way
- * `Checkbox.Group`'s is, and a string because that is what `MixinControllerValue`
- * holds. The form is sent one entry per answer, as a native `<select multiple>`
- * sends it, so a server never has to know to split on a comma.
+ * With `multiple` set, `value` is a comma-separated string, like
+ * `Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form
+ * receives one entry per selected option, as a native `<select multiple>` sends
+ * it, so your server does not split on commas.
  *
- * **Chosen and active are two different things.** Chosen is the answer; active
- * is where the keyboard is. Only the second moves with the arrows, and
- * `aria-activedescendant` names it while focus stays on the list.
+ * Selected and active are separate. The selected option is the value. The
+ * active option is where the keyboard is: the arrow keys move it, and
+ * `aria-activedescendant` points to it while focus stays on the list.
  *
  * @since 0.1.0
  * @status stable
@@ -27,28 +27,28 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @documentation https://fusion.dev/helix/components/listbox
  *
  * @slot - The options, and any groups of them.
- * @slot filter-icon - The mark in the filter's field. Left empty, a magnifier is drawn.
- * @slot hint - Richer than a string.
- * @slot label - Richer than a string.
+ * @slot filter-icon - The icon in the filter field. Defaults to a magnifying glass.
+ * @slot hint - The hint, for content richer than plain text.
+ * @slot label - The label, for content richer than plain text.
  *
- * @event {Event} change - Announced once the value has moved.
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the answer changes, and cancelable.
- * @event {HelixFilterEvent} helix-filter - Fired before the list narrows, and cancelable.
- * @event {Event} input - Announced once the value has moved.
+ * @event {Event} change - Fired after the value changes.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
+ * @event {HelixFilterEvent} helix-filter - Fired before the list is filtered, and cancelable.
+ * @event {Event} input - Fired after the value changes.
  *
- * @csspart empty - Shown when a filter has hidden everything.
- * @csspart feedback - What is wrong with it.
- * @csspart filter-icon - The mark beside that field.
- * @csspart filter-mark - The glyph beside the filter field, where none is slotted.
+ * @csspart empty - The text shown when the filter hides every option.
+ * @csspart feedback - The message that says what is wrong with the value.
+ * @csspart filter-icon - The icon beside the filter field.
+ * @csspart filter-mark - The default icon beside the filter field, shown when none is slotted.
  * @csspart hint - Help under the list.
- * @csspart items - The list itself.
- * @csspart label - The question, over the list.
- * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
- * @csspart loading - Shown while the options are still on their way.
- * @csspart search - The region holding the field that narrows the list.
- * @csspart search-field - The field itself.
+ * @csspart items - The list of options.
+ * @csspart label - The label above the list.
+ * @csspart live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
+ * @csspart loading - The text shown while the options load.
+ * @csspart search - The region that holds the filter field.
+ * @csspart search-field - The filter field.
  *
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
@@ -62,11 +62,11 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     autocomplete: string;
     /**
-     * What to start narrowed to, where nothing declared it.
+     * The filter text the list starts with, when `filter` is not set.
      */
     defaultFilter: string;
     /**
-     * What is shown when a filter has hidden every option.
+     * The text shown when the filter hides every option.
      *
      * From `MixinCollection`, which every collection in the library now shares,
      * and re-declared here only to keep this list's own wording: "No matches" is
@@ -77,7 +77,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     /** What the list is narrowed to, whoever set it. */
     private filterState;
     /**
-     * What the list is narrowed to, if anything.
+     * The text the list is filtered by, if any.
      *
      * Filtering hides rather than removes, so nothing about the value changes and
      * the list is still the consumer's own elements in their own order. Reading
@@ -87,7 +87,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     get filter(): string;
     set filter(next: string);
     /**
-     * Whether the list renders a field for narrowing itself.
+     * Whether the list shows a field for filtering it.
      *
      * The field lives here rather than in whatever frames the list, because the
      * filtering already does: `filter`, the empty state and the keyboard are all
@@ -96,11 +96,11 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     filterable: boolean;
     /**
-     * Placeholder for the field that narrows the list.
+     * Placeholder text for the filter field.
      */
     filterLabel: string;
     /**
-     * Whether more than one option can be the answer.
+     * Whether more than one option can be chosen.
      */
     multiple: boolean;
     /**
@@ -151,14 +151,15 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     get selectedIndex(): number;
     set selectedIndex(at: number);
     /**
-     * Which kind of chooser this is, in the platform's two words.
+     * The kind of list, as the platform names it: `select-one` or
+     * `select-multiple`.
      *
      * Derived rather than declared, because `multiple` already decides it and a
      * second property could disagree.
      */
     get type(): string;
     /**
-     * Every option, in the order a reader meets them.
+     * Every option, in the order they appear.
      *
      * Descendants rather than children, because a group puts a level between the
      * list and its options and the keyboard has to move through a grouped list
@@ -179,7 +180,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private get groups();
     /** The options a filter has left showing. */
     private get shown();
-    /** The chosen values, which is a list whether or not `multiple` is set. */
+    /** The chosen values, as an array whether or not `multiple` is set. */
     get values(): string[];
     /**
      * Applies a choice, announcing first so a listener can refuse it.
@@ -219,7 +220,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     navigate(event: KeyboardEvent): void;
     /**
-     * Brings the chosen option to rest in the middle of the list.
+     * Scrolls the chosen option to the middle of the list.
      *
      * A method rather than something this does on its own, because a listbox
      * opening on its answer usually wants it merely *visible* and the browser
@@ -266,7 +267,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * their answer moved when it did not is worse than telling them nothing.
      */
     private readonly handleFilter;
-    /** Requests a narrowing, and reports whether the request stood. */
+    /** Requests a new filter, and returns whether the request went through. */
     requestFilter(next: string): boolean;
     /**
      * Sends the keys that belong to the list to the list.

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

@@ -1,28 +1,23 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
- * @summary Says that something indeterminate is in progress.
+ * @summary Shows that work of unknown length is in progress.
  *
  * @description
- * Two concentric circles rather than one arc: the track is what makes the
- * moving part read as a proportion of a whole rather than as a shape drifting
- * on its own, and it costs one element.
+ * Draws two concentric circles: a track and a moving arc. The track shows the
+ * arc as a proportion of a whole, and costs one element.
  *
- * **The center is a slot and is empty by default.** A loader with a mark in the
- * middle is a brand's loader, and this library does not know whose. The slot is
- * the capability; the logo is the application's, put in once wherever the app
- * wraps it. Nothing is rendered when nothing is slotted, so an unbranded loader
- * is still two circles and no extra box.
+ * **The center is a slot, empty by default.** Put your logo there once, where
+ * your app wraps the loader. When nothing is slotted, nothing extra is
+ * rendered.
  *
- * What is slotted does not turn. Only the arc moves, because a mark rotating
- * with it stops reading as a mark and becomes part of the animation, and a
- * wordmark upside down twice a second is worse than no wordmark.
+ * Slotted content does not rotate. Only the arc moves, so a logo stays
+ * readable.
  *
- * The semantics are on the host through `ElementInternals`, not on an inner
- * span. A `role` written into the shadow root announces correctly but leaves
- * the host itself anonymous to anything walking the light DOM, and a `role`
- * written onto the host as an attribute is one a React consumer's server markup
- * never had.
+ * The role is set on the host through `ElementInternals`. A `role` in the
+ * shadow root would leave the host itself without a role in the light DOM, and
+ * a `role` attribute on the host would be missing from React server-rendered
+ * markup.
  *
  * @since 0.1.0
  * @status stable
@@ -30,16 +25,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Spinner, Busy, Activity
  * @documentation https://fusion.dev/helix/components/loader
  *
- * @slot - A mark to sit still at the center, usually a logo. Empty by default.
+ * @slot - An icon or logo that stays still at the center. Empty by default.
  *
  * @csspart indicator - The arc that turns.
- * @csspart mark - The region holding what was slotted at the center.
+ * @csspart mark - The region that holds the slotted content at the center.
  * @csspart svg - The rotating circle pair.
  * @csspart track - The full circle behind the indicator.
  */
 export declare class HelixHeadlessLoader extends HelixElement {
     /**
-     * Accessible name, announced while the work is outstanding.
+     * The loader's name, announced by screen readers while the work is in
+     * progress.
      */
     label: string;
     protected willUpdate(changed: PropertyValues): void;

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

@@ -20,6 +20,12 @@ import { type MapPoint } from '../route/map-route.js';
 export declare class HelixHeadlessMapArea extends HelixElement {
     /** More about the area. Read after its 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. */

package/dist/map/area/map-area.js

@@ -25,6 +25,9 @@ let HelixHeadlessMapArea = class HelixHeadlessMapArea extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessMapArea.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapArea.prototype, "group", void 0);
 __decorate([
     property()
 ], HelixHeadlessMapArea.prototype, "label", void 0);

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

@@ -0,0 +1,45 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+/**
+ * @summary The buildings on a map, raised to their real heights in 3D.
+ *
+ * @description
+ * `connectMap` raises the buildings in the map's tiles to the heights the tiles
+ * record, under the map's place names. Tilt the map to see the heights. The
+ * buildings appear from zoom 13, where the tiles start to carry them.
+ *
+ * MapLibre draws the buildings. Leaflet draws maps flat, so a Leaflet map shows
+ * none. The frame lists the layer by its `label` for screen readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases 3D buildings, Extrusion
+ * @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 HelixHeadlessMapBuildings extends HelixElement {
+    /** More about the buildings. 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: 'buildings';
+    /** 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-buildings': HelixHeadlessMapBuildings;
+    }
+}

package/dist/map/buildings/map-buildings.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 HelixHeadlessMapBuildings = class HelixHeadlessMapBuildings extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isMapLayer = true;
+        this.layerKind = 'buildings';
+        this.label = '3D buildings';
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapBuildings.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapBuildings.prototype, "group", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapBuildings.prototype, "label", void 0);
+HelixHeadlessMapBuildings = __decorate([
+    customElement('helix-headless-map-buildings')
+], HelixHeadlessMapBuildings);
+export { HelixHeadlessMapBuildings };

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

@@ -0,0 +1,61 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+import type { MapTerrainEncoding } from '../terrain/map-terrain.js';
+/**
+ * @summary Contour lines on a map, each at one height, labeled at every fifth.
+ *
+ * @description
+ * `connectMap` traces lines of equal height from elevation tiles, the same
+ * tiles `helix-map-terrain` reads, and draws them under the roads. The lines
+ * are closer together as the map zooms in, and every fifth, the index line,
+ * is heavier and labeled with its height. They show from zoom 9.
+ *
+ * Set `src` to an elevation tile URL with `{z}`, `{x}`, and `{y}` in it, and
+ * `encoding` to how its tiles store heights. Set `unit` to `feet` to label
+ * the heights in feet. Put the provider's credit in `attribution`.
+ *
+ * MapLibre draws the lines. The frame lists the layer by its `label` for
+ * screen readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Contours, Topographic lines, Elevation lines, Isolines
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, the unit, or the layer's name or color changed. Used by `connectMap`; pages do not need to listen for it.
+ */
+export declare class HelixHeadlessMapContours extends HelixElement {
+    /** The elevation provider's credit, shown in the frame's footer. Links in it stay links. */
+    attribution?: string;
+    /** More about the lines. Read after the label in the frame's list. */
+    description?: string;
+    /** How the tiles store heights in their colors: `terrarium` or `mapbox`. */
+    encoding: MapTerrainEncoding;
+    /**
+     * 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: 'contours';
+    /** The layer's name in the frame's list. */
+    label: string;
+    /** The deepest zoom the provider has tiles for. */
+    maxZoom?: number;
+    /** One elevation tile URL with `{z}`, `{x}`, and `{y}` in it. */
+    src?: string;
+    /** The unit the heights are labeled in: `meters` or `feet`. */
+    unit: 'feet' | 'meters';
+    /** Tells the frame and the connector the layer changed. */
+    protected updated(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-contours': HelixHeadlessMapContours;
+    }
+}

package/dist/map/contours/map-contours.js

@@ -0,0 +1,54 @@
+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 HelixHeadlessMapContours = class HelixHeadlessMapContours extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.encoding = 'terrarium';
+        this.isMapLayer = true;
+        this.layerKind = 'contours';
+        this.label = 'Contour lines';
+        this.unit = 'meters';
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "attribution", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "encoding", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "group", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'max-zoom', type: Number })
+], HelixHeadlessMapContours.prototype, "maxZoom", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "src", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapContours.prototype, "unit", void 0);
+HelixHeadlessMapContours = __decorate([
+    customElement('helix-headless-map-contours')
+], HelixHeadlessMapContours);
+export { HelixHeadlessMapContours };

package/dist/map/index.d.ts

@@ -1,8 +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,6 +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

@@ -29,6 +29,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @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.
@@ -49,6 +50,12 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      * 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
@@ -62,9 +69,9 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      */
     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.
+     * 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. */
@@ -102,7 +109,7 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      * 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. */
+    /** Focuses the marker's button. The host draws no box of its own. */
     focus(options?: FocusOptions): void;
     protected render(): TemplateResult;
 }