@fusion.dev/helix 0.104.1 → 0.106.0

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

@@ -0,0 +1,239 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_map-position-ink: color-mix(
+in oklab,
+var(--helix-color-foreground) 84%,
+var(--helix-color-surface)
+);
+--_map-position-color: var(--map-position-color, var(--_map-position-ink));
+--_map-position-edge: var(--map-position-edge, var(--helix-color-surface));
+--_map-position-fill: var(--map-position-fill, var(--_map-position-ink));
+--_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;
+block-size: 0;
+display: block;
+inline-size: 0;
+inset-block-start: var(--_map-position-y);
+left: var(--_map-position-x);
+pointer-events: none;
+position: absolute;
+
+z-index: var(--helix-layer-raised);
+}
+
+:host(:not([style*="--_map-position-x"])) {
+visibility: hidden;
+}
+
+[part="position"] {
+display: block;
+left: 0;
+position: absolute;
+top: 0;
+transform: rotateX(var(--_map-position-pitch));
+}
+
+[part="accuracy"] {
+background: color-mix(in oklab, var(--_map-position-color) 12%, transparent);
+block-size: calc(var(--_map-position-radius) * 2);
+border: var(--helix-border-thin) solid
+color-mix(in oklab, var(--_map-position-color) 35%, transparent);
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+inline-size: calc(var(--_map-position-radius) * 2);
+left: 0;
+position: absolute;
+top: 0;
+translate: -50% -50%;
+}
+
+[part="heading"] {
+background: conic-gradient(
+from -45deg,
+transparent 0deg,
+var(--_map-position-color) 30deg 60deg,
+transparent 90deg
+);
+block-size: calc(var(--_map-position-size) * 5);
+border-radius: var(--helix-radii-full);
+display: none;
+inline-size: calc(var(--_map-position-size) * 5);
+left: 0;
+mask: radial-gradient(closest-side, rgb(0 0 0 / 0.32) 20%, transparent);
+position: absolute;
+rotate: var(--_map-position-heading);
+top: 0;
+translate: -50% -50%;
+}
+
+:host([heading]) [part="heading"] {
+display: block;
+}
+
+[part="pulse"] {
+animation: map-position-pulse calc(var(--helix-duration-slow) * 7.5)
+var(--helix-easing-decelerate) infinite;
+background: var(--_map-position-color);
+block-size: var(--_map-position-size);
+border-radius: var(--helix-radii-full);
+inline-size: var(--_map-position-size);
+left: 0;
+opacity: 0;
+position: absolute;
+top: 0;
+translate: -50% -50%;
+}
+
+@keyframes map-position-pulse {
+from {
+opacity: 0.45;
+scale: 1;
+}
+to {
+opacity: 0;
+scale: 3.2;
+}
+}
+
+[part="dot"] {
+background: var(--_map-position-fill);
+block-size: var(--_map-position-size);
+border: var(--helix-border-thick) solid var(--_map-position-edge);
+border-radius: var(--helix-radii-full);
+box-shadow:
+0 0 0 calc(var(--_map-position-size) * 0.3)
+color-mix(in oklab, var(--_map-position-color) 20%, transparent),
+var(--helix-shadow-sm);
+box-sizing: border-box;
+inline-size: var(--_map-position-size);
+left: 0;
+position: absolute;
+top: 0;
+translate: -50% -50%;
+}
+
+[part="arrow"] {
+block-size: calc(var(--_map-position-size) * 1.6);
+display: none;
+filter: drop-shadow(
+0 var(--helix-border-thin) var(--helix-border-thick)
+color-mix(in oklab, var(--helix-color-foreground) 30%, transparent)
+);
+inline-size: calc(var(--_map-position-size) * 1.6);
+left: 0;
+overflow: visible;
+position: absolute;
+rotate: var(--_map-position-heading);
+top: 0;
+translate: -50% -50%;
+}
+
+[part="arrow"] path {
+fill: var(--_map-position-fill);
+paint-order: stroke;
+stroke: none;
+stroke-linejoin: round;
+stroke-width: calc(var(--helix-border-thick) * 1.5);
+}
+
+:host([heading]) [part="arrow"] {
+display: block;
+}
+
+:host([heading]) [part="dot"] {
+display: none;
+}
+
+:host([shape="rounded"]) [part="dot"] {
+border-radius: var(--helix-radii-md);
+}
+
+:host([shape="square"]) [part="dot"] {
+border-radius: var(--helix-radii-none);
+}
+
+:host([shape="diamond"]) [part="dot"] {
+border-radius: var(--helix-radii-none);
+rotate: 45deg;
+scale: 0.85;
+}
+
+:host([shape="ring"]) [part="dot"] {
+background: transparent;
+
+border-color: var(--_map-position-fill);
+border-width: calc(var(--_map-position-size) * 0.25);
+}
+
+:host([separation="outlined"]) [part="dot"] {
+box-shadow: none;
+}
+
+:host([separation="elevated"]) [part="dot"] {
+box-shadow: var(--helix-shadow-md);
+}
+
+:host([separation="filled"]) [part="dot"] {
+border-color: transparent;
+}
+
+:host([separation="plain"]) [part="dot"] {
+border-color: transparent;
+box-shadow: none;
+}
+
+:host([separation="outlined"]) [part="arrow"] path {
+stroke: var(--_map-position-edge);
+}
+
+:host([separation="outlined"]) [part="arrow"],
+:host([separation="plain"]) [part="arrow"] {
+filter: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="pulse"] {
+animation: none;
+}
+}
+
+[part="status"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+:host([tone]) {
+--_map-position-color: var(--_map-position-tone);
+--_map-position-fill: var(--_map-position-tone);
+}
+:host([tone="accent"]) {
+--_map-position-tone: var(--helix-color-accent);
+}
+:host([tone="danger"]) {
+--_map-position-tone: var(--helix-color-danger);
+}
+:host([tone="info"]) {
+--_map-position-tone: var(--helix-color-info);
+}
+:host([tone="neutral"]) {
+--_map-position-tone: var(--helix-color-foreground-muted);
+}
+:host([tone="primary"]) {
+--_map-position-tone: var(--helix-color-primary);
+}
+:host([tone="success"]) {
+--_map-position-tone: var(--helix-color-success);
+}
+:host([tone="warning"]) {
+--_map-position-tone: var(--helix-color-warning);
+}`);

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

@@ -0,0 +1,41 @@
+import { HelixHeadlessMapPosition } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A moving point on a map, such as a vehicle or a person.
+ *
+ * @description
+ * Draws the position in your theme's foreground color with a surface-colored
+ * edge, or in a `tone`. A position with a heading is drawn as an arrow.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Current location, Live position, Tracker, You are here
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-position-color - The color of the halo, direction cone, and pulse when no tone is set.
+ * @cssproperty --map-position-edge - The edge around the point and the arrow.
+ * @cssproperty --map-position-fill - The color of the point and the arrow when no tone is set.
+ * @cssproperty --map-position-size - The point's width.
+ */
+export declare class HelixMapPosition extends HelixHeadlessMapPosition {
+    /**
+     * How the point stands out from the map. Leave unset for an edge, a halo,
+     * and a small shadow. `outlined` has the edge only, `elevated` a larger
+     * shadow, `filled` the halo without an edge, and `plain` none of these.
+     */
+    separation?: 'elevated' | 'filled' | 'outlined' | 'plain';
+    /**
+     * The point's shape. A circle unless set. A position with a heading is
+     * always an arrow.
+     */
+    shape?: 'diamond' | 'ring' | 'rounded' | 'square';
+    /** The position's color. Uses your theme's foreground color unless set. */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-position': HelixMapPosition;
+    }
+}

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

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

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

@@ -16,12 +16,24 @@ position: relative;
 }
 
 [part="viewport"] {
+isolation: isolate;
 min-block-size: 0;
 overflow: hidden;
 position: relative;
 }
 
-[part="viewport"] ::slotted(*) {
+[part="layers"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+padding: var(--helix-space-none);
+position: absolute;
+white-space: nowrap;
+}
+
+[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {
 block-size: 100%;
 inline-size: 100%;
 }
@@ -42,8 +54,247 @@ font-size: var(--helix-text-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 }
 
+:host([material="glass"]) [part="controls"] button {
+backdrop-filter: var(--helix-material-backdrop);
+background-color: var(--viewport-control-background-color, var(--helix-material-translucent));
+}
+
+:host([material="frosted"]) [part="controls"] button {
+backdrop-filter: blur(var(--helix-material-blur-lg));
+background-color: var(
+--viewport-control-background-color,
+var(--helix-material-translucent-strong)
+);
+}
+
+:host([material="transparent"]) [part="controls"] button {
+backdrop-filter: none;
+background-color: var(--viewport-control-background-color, transparent);
+}
+
+:host([material]) [part="controls"] button:hover {
+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/root/map-root.d.ts

@@ -1,16 +1,11 @@
 import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A frame around somebody else's map.
+ * @summary A frame around a map drawn by another library.
  *
  * @description
- * Presentation only: a bordered well with the controls over it, at the corner
- * every map puts them. What the frame is for, and why the controls are buttons
- * rather than arrow keys, is the base class.
- *
- * **The controls do not fade with the chrome.** A reader who has gone still has
- * not stopped needing the only controls this frame offers, so the idle state
- * takes the header and footer a consumer slotted and leaves the buttons alone.
+ * The styled frame: a bordered box with the pan and zoom buttons in its top
+ * corner. The buttons stay visible when the header and footer fade.
  *
  * @since 0.100.0
  * @status experimental
@@ -18,12 +13,18 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
  *
- * @cssproperty --map-background-color - The well behind the map, seen while tiles are on their way.
- * @cssproperty --map-block-size - How tall the frame is. A length, since the map fills it.
- * @cssproperty --map-border-color - Color of the frame's edge.
- * @cssproperty --viewport-control-background-color - The ground under the pan and zoom buttons, one name with `Canvas`.
+ * @cssproperty --map-background-color - The color behind the map while tiles load.
+ * @cssproperty --map-block-size - The frame's height, as a length.
+ * @cssproperty --map-border-color - The frame's border color.
+ * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. Canvas uses the same property.
  */
 export declare class HelixMap extends HelixHeadlessMap {
+    /**
+     * The background of the pan and zoom buttons. Leave unset for solid. `glass`
+     * shows the map through a blur, `frosted` blurs more, and `transparent` has
+     * no background. Your theme sets how see-through each one is.
+     */
+    material?: 'frosted' | 'glass' | 'transparent';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,11 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import { property } from 'lit/decorators.js';
 import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
 import { styles } from './map-root.css.js';
 let HelixMap = class HelixMap extends HelixHeadlessMap {
     static { this.styles = [viewportStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixMap.prototype, "material", void 0);
 HelixMap = __decorate([
     customElement('helix-map')
 ], HelixMap);

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

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