@fusion.dev/helix-headless 0.104.1 → 0.106.0

package/dist/list/item/list-item.d.ts

@@ -4,26 +4,21 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @summary One row of a list.
  *
  * @description
- * Layout and semantics, and deliberately not a target.
+ * Provides layout and semantics. The row is a target only when you set `href`.
  *
- * **`href` makes the row itself the link.** A whole-row target needs the anchor
- * to wrap the layout, which a *consumer's* anchor cannot do for slots it does not
- * own. The component's can: an `<a part="row">` wraps this component's own layout
- * perfectly well, which is what `Tree.Item` does.
+ * **`href` makes the whole row a link.** The component wraps its own layout in
+ * an `<a part="row">`, as `Tree.Item` does. An anchor of your own cannot wrap
+ * slots it does not own. With the anchor, the whole row is a target, Enter
+ * follows it, middle click opens a new tab, the status bar shows the
+ * destination, and all of it works before JavaScript runs.
  *
- * What the anchor buys is what the row could not fake: the whole row is a
- * target, Enter follows it, middle click opens a tab, the status bar shows the
- * destination, and it all works before any JavaScript runs.
+ * Client-side routing needs your own handling. A router cannot render its
+ * anchor inside the shadow root, so to navigate without a page load, intercept
+ * the click: the anchor is in `composedPath()`. Handle only a plain primary
+ * click, so native gestures keep working.
  *
- * What it costs is client-side routing, and that is the consumer's to restore.
- * A router renders its own anchor and cannot render one inside this shadow
- * root, so a framework wanting a soft navigation intercepts the click on the
- * way out: the anchor is in `composedPath()`, and taking only a plain primary
- * press leaves every native gesture alone.
- *
- * **`data-list-item` is still the answer for a row that is not a destination.**
- * A list row is often a container of controls rather than a place to go, and a
- * row with `href` unset behaves exactly as it always did.
+ * **For a row that holds controls and is not a destination, use
+ * `data-list-item`.** With `href` unset, the row is not a link.
  *
  * @since 0.1.0
  * @status stable
@@ -35,11 +30,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Trailing content.
  * @slot start - Leading content, usually an icon or an avatar.
  *
- * @csspart row - The layout, held off the host so the host can carry a marker.
+ * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
     /**
-     * Where the row goes, and nothing when it goes nowhere.
+     * The URL the row links to. Leave it empty for a row that is not a link.
      *
      * Empty rather than optional, and unset by default: a list is not always a
      * list of links, and an empty `href` written onto every row would be a link
@@ -47,12 +42,12 @@ export declare class HelixHeadlessListItem extends HelixElement {
      */
     href: string;
     /**
-     * What the link declares about where it goes. The consumer's decision rather
-     * than one derived from `target`, for the reason `Tree.Item` gives.
+     * The link's `rel` value. You set it yourself. It is not derived from
+     * `target`, for the reason `Tree.Item` gives.
      */
     rel: string;
     /**
-     * Where the link opens, for the rare row that leaves the site.
+     * Where the link opens. Use it for a row that leaves the site.
      */
     target: string;
     protected willUpdate(changed: PropertyValues): void;

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

@@ -1,12 +1,11 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
- * @summary A set of rows, read as a set.
+ * @summary A set of rows, announced as a list.
  *
  * @description
- * `role="list"` on the host, so the rows are counted and announced as "1 of 7"
- * rather than as seven unrelated passages. That count is the whole reason to
- * use a list rather than a stack of divs.
+ * Sets `role="list"` on the host, so a screen reader counts the rows and
+ * announces each one's position, such as "1 of 7".
  *
  * @since 0.1.0
  * @status stable
@@ -18,7 +17,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessList extends HelixElement {
     /**
-     * What kind of list this is, which is a fact about the content.
+     * The kind of list, which follows from the content.
      *
      * On the headless tier because it is meaning rather than decoration, the same
      * argument `severity` makes on `Callout`. A numbered list is numbered because
@@ -41,11 +40,11 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     kind?: 'default' | 'description' | 'ordered' | 'unordered';
     /**
-     * Accessible name for the set.
+     * The list's name, read by screen readers.
      */
     label: string;
     /**
-     * Which markers an ordered list draws, in `<ol type>`'s own five values.
+     * The markers an ordered list draws. It takes the five values of `<ol type>`.
      *
      * Reflected, because this is one of the things a stylesheet selects on, each
      * value mapping to a `list-style-type`. The platform's spellings rather than

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

@@ -0,0 +1,48 @@
+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;
+    /**
+     * 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: '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,40 @@
+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, "group", 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/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 };