@fusion.dev/helix 0.105.0 → 0.106.0

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

@@ -1,16 +1,15 @@
 import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
 import type { CSSResultGroup } from 'lit';
 /**
- * @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
  * A framed, scrolling list with the field's three parts around it. The frame is
- * the list rather than the host, so a filter that empties it leaves a box with
- * a message in it rather than a border collapsing to nothing.
+ * on the list itself, so a filter that hides every option leaves a box with a
+ * message in it, and the border stays in place.
  *
- * `--listbox-max-block-size` is what makes it scroll rather than run down the
- * page. The keyboard brings the active option into that box itself, so a long
- * list moves under the reader rather than the reader moving to find it.
+ * Set `--listbox-max-block-size` to make the list scroll. The keyboard scrolls
+ * the active option into view inside that box.
  *
  * @since 0.1.0
  * @status stable
@@ -18,9 +17,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Options, Select list
  * @documentation https://fusion.dev/helix/components/listbox
  *
- * @cssproperty --listbox-background-color - The panel's fill. `transparent` where the list is already inside one.
- * @cssproperty --listbox-border - The panel's border, as a shorthand. `none` where the list is already inside one.
- * @cssproperty --listbox-max-block-size - How tall it gets before it scrolls.
+ * @cssproperty --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
+ * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
+ * @cssproperty --listbox-max-block-size - Maximum height of the list before it scrolls.
  */
 export declare class HelixListbox extends HelixHeadlessListbox {
     static styles: CSSResultGroup;

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

@@ -1,13 +1,11 @@
 import { HelixHeadlessLoader } from '@fusion.dev/helix-headless/loader';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Says that something indeterminate is in progress.
+ * @summary Shows that work of unknown length is in progress.
  *
  * @description
- * Sized in `em`, so it matches whatever text it sits beside without being told.
- * The color is `currentColor` for the same reason: a loader inside a primary
- * button is on the accent, and one in body copy is not, and neither should have
- * to say so.
+ * Sized in `em`, so it matches the text beside it. The color is `currentColor`,
+ * so it matches the text color around it, including inside a primary button.
  *
  * @since 0.1.0
  * @status stable
@@ -17,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --loader-color - Color of the moving arc.
  * @cssproperty --loader-size - Diameter. Defaults to 1.5em.
- * @cssproperty --loader-track-color - Color of the circle behind it.
+ * @cssproperty --loader-track-color - Color of the circle behind the arc.
  */
 export declare class HelixLoader extends HelixHeadlessLoader {
     /**
@@ -25,7 +23,7 @@ export declare class HelixLoader extends HelixHeadlessLoader {
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * How the waiting is drawn.
+     * How the loader is drawn. Leave it unset for a spinning arc, or set `pulse`.
      *
      * Unset is the turning arc, which is what most waits want.
      *

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/map/buildings/map-buildings.css.js

@@ -0,0 +1,27 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color: var(--map-buildings-color, var(--helix-color-surface-raised));
+display: none;
+}
+
+:host([tone="accent"]) {
+color: var(--helix-color-accent);
+}
+:host([tone="danger"]) {
+color: var(--helix-color-danger);
+}
+:host([tone="info"]) {
+color: var(--helix-color-info);
+}
+:host([tone="neutral"]) {
+color: var(--helix-color-foreground-muted);
+}
+:host([tone="primary"]) {
+color: var(--helix-color-primary);
+}
+:host([tone="success"]) {
+color: var(--helix-color-success);
+}
+:host([tone="warning"]) {
+color: var(--helix-color-warning);
+}`);

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

@@ -0,0 +1,28 @@
+import { HelixHeadlessMapBuildings } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary The buildings on a map, raised to their real heights in 3D.
+ *
+ * @description
+ * Raises the buildings in your theme's raised surface color, one step off the
+ * land, so they read as solid in light and dark themes. Set `tone` to color
+ * them by meaning.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases 3D buildings, Extrusion
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-buildings-color - The buildings' color when no tone is set.
+ */
+export declare class HelixMapBuildings extends HelixHeadlessMapBuildings {
+    /** The buildings' color. Uses your raised surface color unless set. */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-buildings': HelixMapBuildings;
+    }
+}

package/dist/map/buildings/map-buildings.js

@@ -0,0 +1,20 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMapBuildings } from '@fusion.dev/helix-headless/map';
+import { property } from 'lit/decorators.js';
+import { styles } from './map-buildings.css.js';
+let HelixMapBuildings = class HelixMapBuildings extends HelixHeadlessMapBuildings {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixMapBuildings.prototype, "tone", void 0);
+HelixMapBuildings = __decorate([
+    customElement('helix-map-buildings')
+], HelixMapBuildings);
+export { HelixMapBuildings };

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,8 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color: var(
+--map-contours-color,
+color-mix(in oklab, oklch(0.55 0.08 60) 55%, var(--helix-color-foreground))
+);
+display: none;
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessMapContours } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Contour lines on a map, each at one height, labeled at every fifth.
+ *
+ * @description
+ * Draws the lines in a brown mixed toward your theme's ink, the color of
+ * contours on a printed map, so they read over a light or a dark map.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Contours, Topographic lines, Elevation lines, Isolines
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-contours-color - The lines' color.
+ */
+export declare class HelixMapContours extends HelixHeadlessMapContours {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-contours': HelixMapContours;
+    }
+}

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

@@ -0,0 +1,16 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMapContours } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-contours.css.js';
+let HelixMapContours = class HelixMapContours extends HelixHeadlessMapContours {
+    static { this.styles = styles; }
+};
+HelixMapContours = __decorate([
+    customElement('helix-map-contours')
+], HelixMapContours);
+export { HelixMapContours };

package/dist/map/index.d.ts

@@ -1,6 +1,11 @@
 export { HelixMapArea } from './area/map-area.js';
+export { HelixMapBuildings } from './buildings/map-buildings.js';
+export { HelixMapContours } from './contours/map-contours.js';
+export { HelixMapLandcover } from './landcover/map-landcover.js';
 export { HelixMapMarker } from './marker/map-marker.js';
 export { HelixMapPoints } from './points/map-points.js';
 export { HelixMapPosition } from './position/map-position.js';
+export { HelixMapRaster } from './raster/map-raster.js';
 export { HelixMap } from './root/map-root.js';
 export { HelixMapRoute } from './route/map-route.js';
+export { HelixMapTerrain } from './terrain/map-terrain.js';

package/dist/map/index.js

@@ -1,6 +1,11 @@
 export { HelixMapArea } from './area/map-area.js';
+export { HelixMapBuildings } from './buildings/map-buildings.js';
+export { HelixMapContours } from './contours/map-contours.js';
+export { HelixMapLandcover } from './landcover/map-landcover.js';
 export { HelixMapMarker } from './marker/map-marker.js';
 export { HelixMapPoints } from './points/map-points.js';
 export { HelixMapPosition } from './position/map-position.js';
+export { HelixMapRaster } from './raster/map-raster.js';
 export { HelixMap } from './root/map-root.js';
 export { HelixMapRoute } from './route/map-route.js';
+export { HelixMapTerrain } from './terrain/map-terrain.js';

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,5 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color: var(--map-landcover-ground, var(--helix-color-surface));
+display: none;
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessMapLandcover } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary What covers the ground on a map: forest, grass, farmland, wetland, sand, rock, and ice.
+ *
+ * @description
+ * Mixes each cover's color into your theme's land color, so the ground is
+ * colored by what covers it in a light or a dark theme.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Land cover, Land use, Vegetation, Ground cover
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-landcover-ground - The land color the covers are mixed into.
+ */
+export declare class HelixMapLandcover extends HelixHeadlessMapLandcover {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-landcover': HelixMapLandcover;
+    }
+}

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

@@ -0,0 +1,16 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMapLandcover } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-landcover.css.js';
+let HelixMapLandcover = class HelixMapLandcover extends HelixHeadlessMapLandcover {
+    static { this.styles = styles; }
+};
+HelixMapLandcover = __decorate([
+    customElement('helix-map-landcover')
+], HelixMapLandcover);
+export { HelixMapLandcover };

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

@@ -31,6 +31,11 @@ z-index: calc(var(--helix-layer-raised) + 1);
 visibility: hidden;
 }
 
+:host(:state(behind)) {
+opacity: 0;
+pointer-events: none;
+}
+
 [part="marker"] {
 align-items: center;
 cursor: pointer;

package/dist/map/position/map-position.css.js

@@ -12,6 +12,7 @@ var(--helix-color-surface)
 --_map-position-size: var(--map-position-size, 1.25rem);
 
 --_map-position-heading: 0deg;
+--_map-position-pitch: 0deg;
 --_map-position-radius: 0px;
 --_map-position-x: 0px;
 --_map-position-y: 0px;
@@ -32,6 +33,10 @@ visibility: hidden;
 
 [part="position"] {
 display: block;
+left: 0;
+position: absolute;
+top: 0;
+transform: rotateX(var(--_map-position-pitch));
 }
 
 [part="accuracy"] {

package/dist/map/raster/map-raster.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/map/raster/map-raster.css.js

@@ -0,0 +1,4 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: none;
+}`);

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

@@ -0,0 +1,23 @@
+import { HelixHeadlessMapRaster } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Map tiles laid over a map, such as weather radar.
+ *
+ * @description
+ * The tiles keep their own colors, such as a radar provider's scale, and draw
+ * at `opacity` so the map shows through.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Weather radar, Tile overlay, Raster layer
+ * @documentation https://fusion.dev/helix/components/map
+ */
+export declare class HelixMapRaster extends HelixHeadlessMapRaster {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-raster': HelixMapRaster;
+    }
+}

package/dist/map/raster/map-raster.js

@@ -0,0 +1,16 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMapRaster } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-raster.css.js';
+let HelixMapRaster = class HelixMapRaster extends HelixHeadlessMapRaster {
+    static { this.styles = styles; }
+};
+HelixMapRaster = __decorate([
+    customElement('helix-map-raster')
+], HelixMapRaster);
+export { HelixMapRaster };

package/dist/map/root/map-root.css.js

@@ -73,11 +73,228 @@ background-color: var(--viewport-control-background-color, transparent);
 }
 
 :host([material]) [part="controls"] button:hover {
-background-color: var(--helix-color-surface-raised);
+background-color: color-mix(
+in oklab,
+var(--helix-color-foreground) 10%,
+var(--helix-color-surface-overlay)
+);
 }
 
 @media print {
 [part="controls"] {
 display: none;
 }
+}
+
+[part="controls"] {
+align-items: center;
+display: flex;
+flex-direction: column;
+
+grid-column: 1 / -1;
+grid-row: 2 / 3;
+}
+
+[part="controls"] [part="zoom-in"] {
+border-end-end-radius: 0;
+border-end-start-radius: 0;
+}
+[part="controls"] [part="zoom-out"] {
+border-block-start: 0;
+border-start-end-radius: 0;
+border-start-start-radius: 0;
+margin-block-start: calc(-1 * var(--helix-space-2xs));
+}
+
+[part="tilt"] {
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-semibold);
+}
+
+[part="tilt"][aria-pressed="true"] {
+background-color: var(--helix-color-primary-surface);
+border-color: var(--helix-color-primary-surface);
+color: var(--helix-color-foreground-on-accent);
+}
+
+[part="tilt"][aria-pressed="true"]:hover {
+background-color: var(--helix-color-primary-surface-hover);
+}
+
+[part="compass"] {
+border-radius: var(--helix-radii-sm);
+display: grid;
+grid-template-areas:
+"rotl   up     rotr"
+"start  north  end"
+".      down   .";
+place-items: center;
+}
+
+[part="rotate-left"] {
+grid-area: rotl;
+}
+[part="rotate-right"] {
+grid-area: rotr;
+}
+[part="face-north"] {
+grid-area: north;
+}
+
+[part="compass"] > :not([part="face-north"]) {
+background-color: transparent;
+block-size: calc(var(--helix-size-control-sm) * 0.75);
+border-color: transparent;
+box-shadow: none;
+font-size: var(--helix-text-xs);
+inline-size: calc(var(--helix-size-control-sm) * 0.75);
+}
+
+[part="compass"]:has(> :not([part="face-north"])) {
+background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
+box-shadow:
+var(--helix-shadow-floating),
+0 0 0 var(--helix-border-floating) var(--helix-color-border);
+}
+
+[part="needle"] {
+block-size: var(--helix-size-icon-md);
+inline-size: var(--helix-size-icon-md);
+transform: rotate(var(--map-needle-turn, 0deg));
+}
+[part="needle"] [data-end="north"] {
+fill: var(--helix-color-danger);
+}
+[part="needle"] [data-end="south"] {
+fill: var(--helix-color-foreground-muted);
+}
+
+[part="layers-menu"] {
+background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
+border: var(--helix-border-floating) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--helix-shadow-floating);
+color: var(--helix-color-foreground);
+display: grid;
+gap: var(--helix-space-sm);
+inline-size: min(calc(var(--helix-size-control-lg) * 6), 70vw);
+inset-block-start: 0;
+inset-inline-end: calc(100% + var(--helix-space-2xs));
+padding: var(--helix-space-sm);
+position: absolute;
+}
+
+[part="layers-menu"][hidden] {
+display: none;
+}
+
+:host([controls-placement^="bottom"]) [part="layers-menu"] {
+inset-block: auto 0;
+}
+
+:host([controls-placement$="start"]) [part="layers-menu"] {
+inset-inline: calc(100% + var(--helix-space-2xs)) auto;
+}
+
+[part="map-types"] {
+display: grid;
+gap: var(--helix-space-xs);
+grid-template-columns: repeat(3, 1fr);
+}
+
+[part="map-type"] {
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: grid;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-2xs);
+justify-items: center;
+position: relative;
+}
+
+[part="map-type"] input {
+block-size: 1px;
+inline-size: 1px;
+margin: 0;
+opacity: 0;
+pointer-events: none;
+position: absolute;
+}
+
+[part="map-type-preview"] {
+aspect-ratio: 4 / 3;
+background-color: var(--helix-color-surface-sunken);
+border: var(--helix-border-thick) solid transparent;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+display: block;
+inline-size: 100%;
+object-fit: cover;
+}
+
+[part="map-type"]:hover,
+[part="map-type"]:has(input:checked) {
+color: var(--helix-color-foreground);
+}
+
+[part="map-type"]:has(input:checked) [part="map-type-preview"] {
+border-color: var(--helix-color-primary-surface);
+}
+
+[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="layer-choices"] {
+display: grid;
+gap: var(--helix-space-xs);
+grid-template-columns: repeat(3, 1fr);
+}
+
+[part="layers-menu"] [part="layer-choice"] {
+align-content: start;
+background-color: transparent;
+block-size: auto;
+border: 0;
+box-shadow: none;
+color: var(--helix-color-foreground-muted);
+display: grid;
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-2xs);
+inline-size: auto;
+justify-items: center;
+padding: 0;
+text-align: center;
+}
+
+[part="layers-menu"] [part="layer-choice"]:hover,
+[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {
+background-color: transparent;
+color: var(--helix-color-foreground);
+}
+
+[part="layers-menu"] [part="layer-choice"]:focus-visible {
+outline: none;
+}
+
+[part="layer-icon"] {
+aspect-ratio: 4 / 3;
+background-color: var(--helix-color-surface-sunken);
+border: var(--helix-border-thick) solid transparent;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+display: block;
+inline-size: 100%;
+padding: var(--helix-space-sm);
+}
+
+[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {
+border-color: var(--helix-color-primary-surface);
+}
+
+[part="layer-choice"]:focus-visible [part="layer-icon"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
 }`);

package/dist/map/terrain/map-terrain.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/map/terrain/map-terrain.css.js

@@ -0,0 +1,12 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+border-top-color: var(
+--map-terrain-highlight-color,
+color-mix(in oklab, var(--helix-color-foreground-media) 25%, transparent)
+);
+color: var(
+--map-terrain-shadow-color,
+color-mix(in oklab, var(--helix-color-surface-media) 40%, transparent)
+);
+display: none;
+}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessMapTerrain } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Hills and mountains on a map, shaded and raised in 3D.
+ *
+ * @description
+ * Shades the slopes with a translucent black on the side away from the light
+ * and a translucent white on the side toward it, so the shading reads over
+ * light and dark themes and over imagery.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Terrain, Hillshade, Elevation, Relief
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-terrain-highlight-color - The color of slopes that face the light.
+ * @cssproperty --map-terrain-shadow-color - The color of slopes that face away from the light.
+ */
+export declare class HelixMapTerrain extends HelixHeadlessMapTerrain {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-terrain': HelixMapTerrain;
+    }
+}

package/dist/map/terrain/map-terrain.js

@@ -0,0 +1,16 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMapTerrain } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-terrain.css.js';
+let HelixMapTerrain = class HelixMapTerrain extends HelixHeadlessMapTerrain {
+    static { this.styles = styles; }
+};
+HelixMapTerrain = __decorate([
+    customElement('helix-map-terrain')
+], HelixMapTerrain);
+export { HelixMapTerrain };