@fusion.dev/helix 0.198.0 → 0.199.0

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialScatterChart } from '@fusion.dev/helix-headless/spatial-scatter-chart';
+import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-scatter-chart-root.css.js';
@@ -9,6 +10,12 @@ let HelixSpatialScatterChart = class HelixSpatialScatterChart extends HelixHeadl
     static { this.tier = 'helix-'; }
     static { this.styles = [seriesStyles, tooltipStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSpatialScatterChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixSpatialScatterChart.prototype, "material", void 0);
 HelixSpatialScatterChart = __decorate([
     customElement('helix-spatial-scatter-chart')
 ], HelixSpatialScatterChart);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-fill, var(--_spatial-surface-chart-lit));fill-opacity: calc(var(--_spatial-surface-chart-area, 1) * var(--_spatial-surface-chart-through, 1));stroke: var(--_spatial-surface-chart-line, var(--_spatial-surface-chart-rule));stroke-linejoin: round;stroke-opacity: var(--_spatial-surface-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="contour"] {--_spatial-surface-chart-contour: oklch(from color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low)) calc(l + clamp(-0.18, (0.6 - l) * 1000, 0.22)) c h);fill: none;stroke: var(--_spatial-surface-chart-contour);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-surface-chart-fill: color-mix(in oklab, var(--_spatial-surface-chart-lit) 60%, var(--helix-color-background));--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-surface-chart-area: 0.2;--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([material="glass"]) {--_spatial-surface-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-surface-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="contour"] {stroke: CanvasText}[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -13,6 +13,7 @@ import '../../tooltip/index.js';
  * @since 0.190.0
  * @status experimental
  * @category charts
+ * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-surface-chart
  *
  * @cssproperty --spatial-surface-chart-block-size - How tall the plot is.
@@ -22,6 +23,27 @@ import '../../tooltip/index.js';
 export declare class HelixSpatialSurfaceChart extends HelixHeadlessSpatialSurfaceChart {
     static tier: string;
     static styles: CSSResultGroup;
+    /**
+     * How strongly the surface is drawn, as on every chart.
+     *
+     * `outlined` is a wireframe in the ramp's colors over a surface faded toward
+     * the page, and `subtle` the same wireframe over a faint surface that the
+     * grid behind shows through, so a reading the surface hid from this side can
+     * be seen. Absent is the filled surface, per the rule that a reflected
+     * property takes no default, and `solid` writes it out. A renderer draws the
+     * surface the same way.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The ring on the reading the keys rest on
+     * keeps its own ink.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * How much of each mark comes through, as on every chart: `glass` admits the
+     * most of what is behind it, `frosted` less, and absent is opaque. The
+     * strength is the theme's, scaled by `--helix-material-opacity`.
+     */
+    material?: 'frosted' | 'glass';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialSurfaceChart } from '@fusion.dev/helix-headless/spatial-surface-chart';
+import { property } from 'lit/decorators.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-surface-chart-root.css.js';
 import '../../tooltip/index.js';
@@ -8,6 +9,12 @@ let HelixSpatialSurfaceChart = class HelixSpatialSurfaceChart extends HelixHeadl
     static { this.tier = 'helix-'; }
     static { this.styles = [tooltipStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSpatialSurfaceChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixSpatialSurfaceChart.prototype, "material", void 0);
 HelixSpatialSurfaceChart = __decorate([
     customElement('helix-spatial-surface-chart')
 ], HelixSpatialSurfaceChart);

package/dist/spatial-treemap/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialTreemap } from './root/spatial-treemap-root.js';

package/dist/spatial-treemap/index.js

@@ -0,0 +1 @@
+export { HelixSpatialTreemap } from './root/spatial-treemap-root.js';

package/dist/spatial-treemap/root/spatial-treemap-root.css.d.ts

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

package/dist/spatial-treemap/root/spatial-treemap-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-treemap/root/spatial-treemap-root.d.ts

@@ -0,0 +1,49 @@
+import { HelixHeadlessSpatialTreemap } from '@fusion.dev/helix-headless/spatial-treemap';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure.
+ *
+ * @description
+ * Each group takes a series color from the theme, as every chart's series
+ * does, and each face of a block is that color darkened by how far it turns
+ * from the light. The chart draws the blocks in 3D in SVG, and
+ * `@fusion.dev/helix-plot` can draw them with three.js.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @documentation https://fusion.dev/helix/components/spatial-treemap
+ *
+ * @cssproperty --spatial-treemap-block-size - How tall the plot is.
+ */
+export declare class HelixSpatialTreemap extends HelixHeadlessSpatialTreemap {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * How strongly the blocks are drawn, as on every chart.
+     *
+     * `outlined` is a block as its edges in its group's color over faces faded
+     * toward the page, and `subtle` the same edges over a faint wash, which
+     * shows the blocks behind it. Absent is the filled block, per the rule that a
+     * reflected property takes no default, and `solid` writes it out. A
+     * renderer draws the blocks the same way.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The outline on the block the keys rest on
+     * keeps its own ink.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * How much of each mark comes through, as on every chart: `glass` admits the
+     * most of what is behind it, `frosted` less, and absent is opaque. The
+     * strength is the theme's, scaled by `--helix-material-opacity`.
+     */
+    material?: 'frosted' | 'glass';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-spatial-treemap': HelixSpatialTreemap;
+    }
+}

package/dist/spatial-treemap/root/spatial-treemap-root.js

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialTreemap } from '@fusion.dev/helix-headless/spatial-treemap';
+import { property } from 'lit/decorators.js';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './spatial-treemap-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialTreemap = class HelixSpatialTreemap extends HelixHeadlessSpatialTreemap {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSpatialTreemap.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixSpatialTreemap.prototype, "material", void 0);
+HelixSpatialTreemap = __decorate([
+    customElement('helix-spatial-treemap')
+], HelixSpatialTreemap);
+export { HelixSpatialTreemap };