@fusion.dev/helix 0.104.1 → 0.105.0

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

@@ -0,0 +1,234 @@
+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-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;
+}
+
+[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/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,6 +54,28 @@ 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: var(--helix-color-surface-raised);
+}
+
 @media print {
 [part="controls"] {
 display: none;

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;

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

@@ -0,0 +1,25 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+border-color: var(--map-route-casing-color, var(--helix-color-surface));
+color: var(--map-route-color, var(--helix-color-primary));
+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="success"]) {
+color: var(--helix-color-success);
+}
+:host([tone="warning"]) {
+color: var(--helix-color-warning);
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessMapRoute } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A line on a map, such as a route between stops.
+ *
+ * @description
+ * Draws the route in your theme's colors, with a surface-colored casing under
+ * it so it stands out from the roads. Uses your primary color unless `tone`
+ * sets another.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Map line, Path, Polyline
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-route-casing-color - The color of the casing under the route.
+ * @cssproperty --map-route-color - The route's color when no tone is set.
+ */
+export declare class HelixMapRoute extends HelixHeadlessMapRoute {
+    /** The route's color. Uses your primary color unless set. */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /** `dotted` draws the route as dots, for a walk off the road network. */
+    variant?: 'dotted';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-route': HelixMapRoute;
+    }
+}

package/dist/map/route/map-route.js

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

package/dist/shared/viewport/viewport.css.js

@@ -83,8 +83,9 @@ grid-area: full;
 [part="controls"] button {
 align-items: center;
 background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-thin) solid var(--helix-color-border);
+border: var(--helix-border-floating) solid var(--helix-color-border);
 border-radius: var(--helix-radii-sm);
+box-shadow: var(--helix-shadow-floating);
 block-size: var(--helix-size-control-sm);
 color: var(--helix-color-foreground);
 cursor: pointer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.104.1",
+  "version": "0.105.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.104.1",
-    "@fusion.dev/helix-headless": "0.104.1",
-    "@fusion.dev/helix-styles": "0.104.1"
+    "@fusion.dev/helix-core": "0.105.0",
+    "@fusion.dev/helix-headless": "0.105.0",
+    "@fusion.dev/helix-styles": "0.105.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.104.1",
-    "@fusion.dev/helix-testing": "0.104.1",
+    "@fusion.dev/helix-cem": "0.105.0",
+    "@fusion.dev/helix-testing": "0.105.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",