@fusion.dev/helix 0.104.1 → 0.106.0

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

@@ -0,0 +1,340 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_map-marker-color: var(--map-marker-color, var(--helix-color-primary));
+
+--_map-marker-fill: var(--map-marker-color, var(--helix-color-primary-surface));
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
+
+--_map-marker-edge: var(--helix-color-surface);
+--_map-marker-lift: 0px;
+--_map-marker-shadow: var(--helix-shadow-sm);
+--_map-marker-size: var(--map-marker-size, 0.875rem);
+
+--_map-marker-leg: 0px;
+--_map-marker-leg-angle: 0rad;
+--_map-marker-x: 0px;
+--_map-marker-y: 0px;
+block-size: 0;
+display: block;
+inline-size: 0;
+inset-block-start: var(--_map-marker-y);
+left: var(--_map-marker-x);
+position: absolute;
+}
+
+:host(:hover),
+:host(:focus-within) {
+z-index: calc(var(--helix-layer-raised) + 1);
+}
+
+:host(:not([style*="--_map-marker-x"])) {
+visibility: hidden;
+}
+
+:host(:state(behind)) {
+opacity: 0;
+pointer-events: none;
+}
+
+[part="marker"] {
+align-items: center;
+cursor: pointer;
+display: flex;
+gap: var(--helix-space-xs);
+left: 0;
+outline: none;
+
+pointer-events: none;
+position: absolute;
+top: 0;
+transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));
+}
+
+:host(:dir(rtl)) [part="marker"],
+:host(:state(start)) [part="marker"] {
+transform: translate(
+calc(-100% + var(--_map-marker-size) / 2),
+calc(-50% - var(--_map-marker-lift))
+);
+}
+
+:host(:dir(rtl):state(start)) [part="marker"] {
+transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));
+}
+
+:host(:state(start)) [part="marker"] {
+flex-direction: row-reverse;
+}
+
+[part="point"] {
+align-items: center;
+background: var(--_map-marker-color);
+block-size: var(--_map-marker-size);
+border: var(--helix-border-thick) solid var(--_map-marker-edge);
+border-radius: var(--helix-radii-full);
+box-shadow: var(--_map-marker-shadow);
+box-sizing: border-box;
+color: var(--_map-marker-ink);
+display: grid;
+flex: none;
+font-family: var(--helix-font-sans);
+font-size: calc(var(--_map-marker-size) * 0.5);
+font-weight: var(--helix-weight-semibold);
+inline-size: var(--_map-marker-size);
+isolation: isolate;
+justify-items: center;
+line-height: 1;
+pointer-events: auto;
+position: relative;
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(icon)) {
+--_map-marker-size: var(--map-marker-size, 1.375rem);
+}
+
+:host(:state(icon)) [part="point"] {
+background: var(--_map-marker-fill);
+}
+
+:host([shape="rounded"]) [part="point"] {
+border-radius: var(--helix-radii-md);
+}
+
+:host([shape="square"]) [part="point"] {
+border-radius: var(--helix-radii-none);
+}
+
+:host([shape="diamond"]) [part="point"] {
+border-radius: var(--helix-radii-none);
+rotate: 45deg;
+scale: 0.85;
+}
+
+:host([shape="diamond"]) ::slotted(*) {
+rotate: -45deg;
+}
+
+:host([shape="ring"]) [part="point"] {
+background: var(--helix-color-surface);
+border-color: var(--_map-marker-color);
+border-width: calc(var(--_map-marker-size) * 0.18);
+color: var(--_map-marker-color);
+}
+
+:host([shape="pin"]) {
+--_map-marker-lift: calc(var(--_map-marker-size) * 0.72);
+--_map-marker-size: var(--map-marker-size, 1.625rem);
+}
+
+:host([shape="pin"]) [part="point"] {
+background: var(--_map-marker-fill);
+border: 0;
+border-radius: var(--helix-radii-full);
+box-shadow: none;
+}
+
+:host([shape="pin"]) [part="point"]::before {
+background: var(--_map-marker-fill);
+border: var(--helix-border-thick) solid var(--_map-marker-edge);
+border-radius: var(--helix-radii-full) var(--helix-radii-full) var(--helix-radii-full)
+var(--helix-radii-none);
+box-shadow: var(--_map-marker-shadow);
+box-sizing: border-box;
+content: "";
+inset: 0;
+position: absolute;
+rotate: -45deg;
+z-index: var(--helix-layer-beneath);
+}
+
+:host([shape="pin"]) [part="point"]::after {
+background: var(--_map-marker-fill);
+block-size: calc(var(--_map-marker-size) * 0.26);
+border: var(--helix-border-thin) solid var(--_map-marker-edge);
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+content: "";
+inline-size: calc(var(--_map-marker-size) * 0.26);
+left: 50%;
+position: absolute;
+top: calc(50% + var(--_map-marker-lift));
+translate: -50% -50%;
+z-index: calc(var(--helix-layer-beneath) - 1);
+}
+
+:host(:state(cluster)) {
+--_map-marker-lift: 0px;
+--_map-marker-size: var(--map-marker-cluster-size, 1.75rem);
+}
+
+:host(:state(cluster)) [part="point"] {
+background: var(--map-marker-cluster-color, var(--helix-color-primary-surface));
+border: var(--helix-border-thick) solid var(--_map-marker-edge);
+border-radius: var(--helix-radii-full);
+box-shadow:
+0 0 0 calc(var(--_map-marker-size) * 0.18)
+color-mix(
+in oklab,
+var(--map-marker-cluster-color, var(--helix-color-primary-surface)) 28%,
+transparent
+),
+var(--_map-marker-shadow);
+color: var(--helix-color-foreground-on-accent);
+font-size: calc(var(--_map-marker-size) * 0.42);
+font-variant-numeric: tabular-nums;
+rotate: none;
+scale: none;
+}
+
+:host(:state(cluster)) [part="point"]::before,
+:host(:state(cluster)) [part="point"]::after {
+content: none;
+}
+
+:host(:state(fanned))::before {
+--_map-marker-leg-ink: color-mix(
+in oklab,
+var(--helix-color-foreground) 55%,
+var(--helix-color-surface)
+);
+--_map-marker-leg-dot: calc(var(--helix-border-thick) * 1.75);
+
+background:
+radial-gradient(
+circle at calc(100% - var(--_map-marker-leg-dot)) 50%,
+var(--_map-marker-leg-ink) var(--_map-marker-leg-dot),
+transparent calc(var(--_map-marker-leg-dot) + var(--helix-border-thin))
+),
+linear-gradient(var(--_map-marker-leg-ink), var(--_map-marker-leg-ink)) 0 50% / 100%
+var(--helix-border-thick) no-repeat;
+
+block-size: calc((var(--_map-marker-leg-dot) + var(--helix-border-thin)) * 2);
+content: "";
+inline-size: calc(var(--_map-marker-leg) + var(--_map-marker-leg-dot));
+left: 0;
+position: absolute;
+rotate: var(--_map-marker-leg-angle);
+top: 0;
+transform-origin: 0 50%;
+translate: 0 -50%;
+}
+
+:host(:state(clustered)) {
+display: none;
+}
+
+:host([separation="outlined"]) {
+--_map-marker-shadow: none;
+}
+
+:host([separation="elevated"]) {
+--_map-marker-shadow: var(--helix-shadow-md);
+}
+
+:host([separation="filled"]) {
+--_map-marker-edge: transparent;
+--_map-marker-shadow: 0 0 0 calc(var(--_map-marker-size) * 0.3)
+color-mix(in oklab, var(--_map-marker-color) 22%, transparent);
+}
+
+:host([separation="plain"]) {
+--_map-marker-edge: transparent;
+--_map-marker-shadow: none;
+}
+
+[part="label"] {
+
+background: var(--helix-color-surface-overlay);
+border: var(--map-marker-label-border-width, var(--helix-border-floating)) solid
+var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--map-marker-label-shadow, var(--helix-shadow-floating));
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+opacity: 0;
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+pointer-events: none;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+white-space: nowrap;
+}
+
+:host(:state(cluster)) [part="label"] {
+
+inline-size: max-content;
+max-inline-size: 16rem;
+white-space: normal;
+}
+
+:host([material="glass"]) [part="label"] {
+backdrop-filter: var(--helix-material-backdrop);
+background: var(--helix-material-translucent);
+}
+
+:host([material="frosted"]) [part="label"] {
+backdrop-filter: blur(var(--helix-material-blur-lg));
+background: var(--helix-material-translucent-strong);
+}
+
+:host([material="transparent"]) [part="label"] {
+backdrop-filter: none;
+background: transparent;
+}
+
+:host(:hover) [part="label"],
+[part="marker"]:focus-visible [part="label"] {
+opacity: 1;
+}
+
+:host(:hover) [part="point"],
+[part="marker"]:focus-visible [part="point"] {
+transform: scale(1.25);
+}
+
+[part="marker"]:focus-visible [part="point"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([tone="accent"]) {
+--_map-marker-color: var(--helix-color-accent);
+--_map-marker-fill: var(--helix-color-accent-surface);
+}
+:host([tone="danger"]) {
+--_map-marker-color: var(--helix-color-danger);
+--_map-marker-fill: var(--helix-color-danger-surface);
+}
+:host([tone="info"]) {
+--_map-marker-color: var(--helix-color-info);
+--_map-marker-fill: var(--helix-color-info-surface);
+}
+
+:host([tone="neutral"]) {
+--_map-marker-color: var(--helix-color-foreground-muted);
+--_map-marker-fill: var(--helix-color-foreground-muted);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-surface));
+}
+:host([tone="success"]) {
+--_map-marker-color: var(--helix-color-success);
+--_map-marker-fill: var(--helix-color-success-surface);
+}
+:host([tone="warning"]) {
+--_map-marker-color: var(--helix-color-warning);
+--_map-marker-fill: var(--helix-color-warning-surface);
+}
+
+:host(:state(passed)) {
+--_map-marker-color: var(--helix-color-foreground-muted);
+--_map-marker-fill: var(--helix-color-foreground-muted);
+--_map-marker-ink: var(--helix-color-surface);
+--_map-marker-shadow: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="label"],
+[part="point"] {
+transition: none;
+}
+}`);

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

@@ -0,0 +1,51 @@
+import { HelixHeadlessMapMarker } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named place on a map.
+ *
+ * @description
+ * A point in your theme's colors with the place's name beside it. Uses your
+ * primary color unless `tone` sets another.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Map pin, Place, Point of interest
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-marker-cluster-color - A cluster's fill color.
+ * @cssproperty --map-marker-cluster-size - A cluster's width.
+ * @cssproperty --map-marker-color - The point's color when no tone is set.
+ * @cssproperty --map-marker-ink - The color of a letter or icon in the point. Set it with `--map-marker-color` when white is hard to read on your color.
+ * @cssproperty --map-marker-label-border-width - The width of the name's border.
+ * @cssproperty --map-marker-label-shadow - The name's shadow.
+ * @cssproperty --map-marker-size - The point's width.
+ */
+export declare class HelixMapMarker extends HelixHeadlessMapMarker {
+    /**
+     * The background of the name. Leave unset for solid. `glass` shows the map
+     * through a blur, `frosted` blurs more, and `transparent` has no background.
+     */
+    material?: 'frosted' | 'glass' | 'transparent';
+    /**
+     * How the point stands out from the map. Leave unset for a surface-colored
+     * edge and a small shadow. `outlined` has the edge only, `elevated` a larger
+     * shadow, `filled` a soft halo in the marker's color, and `plain` no edge or
+     * shadow.
+     */
+    separation?: 'elevated' | 'filled' | 'outlined' | 'plain';
+    /**
+     * The point's shape. A circle unless set. Use shapes with tones to tell
+     * kinds of places apart. `pin` places the tip of a pin on the location, for
+     * a destination.
+     */
+    shape?: 'diamond' | 'pin' | 'ring' | 'rounded' | 'square';
+    /** The point's color. Uses your primary color unless set. */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-marker': HelixMapMarker;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,82 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+border-color: var(--map-points-casing-color, var(--helix-color-surface));
+color: var(--map-points-color, var(--helix-color-primary-surface));
+
+block-size: 0;
+display: block;
+inline-size: 0;
+inset-block-start: 0;
+left: 0;
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
+pointer-events: none;
+position: absolute;
+}
+
+[part~="place"] {
+block-size: var(--helix-size-control-sm);
+border-radius: var(--helix-radii-full);
+inline-size: var(--helix-size-control-sm);
+left: var(--_map-place-x);
+outline: none;
+position: absolute;
+top: var(--_map-place-y);
+translate: -50% -50%;
+}
+
+[part~="count"] {
+block-size: var(--helix-size-control-lg);
+inline-size: var(--helix-size-control-lg);
+}
+
+[part~="place"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="label"] {
+background: 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);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+inset-inline-start: calc(100% + var(--helix-space-sm));
+opacity: 0;
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+position: absolute;
+top: 50%;
+translate: 0 -50%;
+white-space: nowrap;
+}
+
+[part~="place"]:focus-visible [part="label"] {
+opacity: 1;
+}
+
+:host([tone="accent"]) {
+color: var(--helix-color-accent-surface);
+}
+
+:host([tone="danger"]) {
+color: var(--helix-color-danger-surface);
+}
+
+:host([tone="info"]) {
+color: var(--helix-color-info-surface);
+}
+
+:host([tone="neutral"]) {
+color: var(--helix-color-foreground-muted);
+outline-color: var(--map-points-ink, var(--helix-color-surface));
+}
+
+:host([tone="success"]) {
+color: var(--helix-color-success-surface);
+}
+
+:host([tone="warning"]) {
+color: var(--helix-color-warning-surface);
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessMapPoints } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Thousands of places on a map, loaded from data.
+ *
+ * @description
+ * Draws the points in your theme's colors, with counts in white on your
+ * primary color unless `tone` sets another.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Data layer, GeoJSON layer, Point cloud, Point layer
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-points-casing-color - The edge around each point and count.
+ * @cssproperty --map-points-color - The points' color when no tone is set.
+ * @cssproperty --map-points-ink - The color of the numbers in counts.
+ */
+export declare class HelixMapPoints extends HelixHeadlessMapPoints {
+    /** The points' color. Uses your primary color unless set. */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map-points': HelixMapPoints;
+    }
+}

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

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

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