@fusion.dev/helix 0.198.0 → 0.199.0

package/dist/element-events.generated.js

@@ -208,6 +208,7 @@ registerElementEvents({
     ],
     'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-meter': ['helix-band'],
+    'helix-motion-toggle': ['change'],
     'helix-notification': ['helix-dismiss', 'helix-read'],
     'helix-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
@@ -263,6 +264,12 @@ registerElementEvents({
     ],
     'helix-slider': ['change', 'helix-before-change', 'input'],
     'helix-sparkline': ['helix-reading-change', 'helix-reading-press'],
+    'helix-spatial-bar-chart': [
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+    ],
     'helix-spatial-heatmap': [
         'change',
         'helix-before-change',
@@ -272,6 +279,12 @@ registerElementEvents({
         'helix-reading-press',
         'helix-resize',
     ],
+    'helix-spatial-ribbon-chart': [
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+    ],
     'helix-spatial-scatter-chart': [
         'helix-plot-change',
         'helix-plot-turn',
@@ -284,6 +297,12 @@ registerElementEvents({
         'helix-reading-change',
         'helix-reading-press',
     ],
+    'helix-spatial-treemap': [
+        'helix-plot-change',
+        'helix-plot-turn',
+        'helix-reading-change',
+        'helix-reading-press',
+    ],
     'helix-speed-dial': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-speed-dial-item': ['helix-select'],
     'helix-splitter': [

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="region"] {background-color: var(--graph-background-color, var(--helix-color-surface-sunken));block-size: var(--graph-block-size, 32rem);border: var(--helix-border-thin) solid var(--graph-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;container-type: inline-size;display: grid;grid-template-rows: auto minmax(0, 1fr) auto;overflow: hidden;position: relative}[part="body"] {display: grid;grid-template-columns: minmax(0, 1fr) var(--graph-panel-size, 18rem);min-block-size: 0}[part="stage"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="viewport"] {inset: 0;position: absolute}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="panel"] {background-color: var(--graph-panel-background-color, var(--helix-color-surface));border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--graph-panel-color, var(--helix-color-foreground));display: grid;grid-template-columns: minmax(0, 1fr);grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}@container (inline-size < 40rem) {[part="body"] {grid-template-columns: minmax(0, 1fr);grid-template-rows: minmax(0, 3fr) minmax(0, 2fr)}[part="panel"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);border-inline-start: none}}:host([no-panel]) [part="body"] {grid-template-columns: minmax(0, 1fr);grid-template-rows: minmax(0, 1fr);position: relative}:host([no-panel]) [part="panel"] {border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);inline-size: min(var(--graph-panel-size, 18rem), calc(100% - var(--helix-space-sm) * 2));inset-block: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);overflow: hidden;position: absolute;z-index: 1}:host([no-panel]) [part="panel"][hidden] {display: none}:host([no-panel]) [part="body"]:has([part="panel"]:not([hidden])) [part="controls"] {inset-inline-end: calc(min(var(--graph-panel-size, 18rem), 100%) + var(--helix-space-sm) * 2)}[part="notes-toggle"] {grid-area: notes}[part="notes-toggle"] svg {block-size: 1em;inline-size: 1em}[part="controls"]:has([part="notes-toggle"]):not(:has([part="pan-up"])) {grid-template-areas: "zoomin" "zoomout" "notes" "full"}[part="controls"]:has([part="notes-toggle"]):has([part="pan-up"]) {grid-template-areas: ".      up    .      zoomin" "start  .     end    zoomout" ".      down  .      notes" ".      .     .      full"}[part="legend"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));position: absolute}:host([controls-placement="bottom-start"]) [part="legend"] {inset-inline: auto var(--helix-space-sm)}@container (inline-size < 40rem) {[part="legend"] {flex-wrap: nowrap;inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));overflow-x: auto;padding: var(--helix-space-2xs);scrollbar-width: none}}[part~="legend-item"] {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-tight);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);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);white-space: nowrap}[part~="legend-item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="legend-item"]:nth-child(24n + 1) {--_graph-swatch: var(--helix-color-series-1)}[part~="legend-item"]:nth-child(24n + 2) {--_graph-swatch: var(--helix-color-series-2)}[part~="legend-item"]:nth-child(24n + 3) {--_graph-swatch: var(--helix-color-series-3)}[part~="legend-item"]:nth-child(24n + 4) {--_graph-swatch: var(--helix-color-series-4)}[part~="legend-item"]:nth-child(24n + 5) {--_graph-swatch: var(--helix-color-series-5)}[part~="legend-item"]:nth-child(24n + 6) {--_graph-swatch: var(--helix-color-series-6)}[part~="legend-item"]:nth-child(24n + 7) {--_graph-swatch: var(--helix-color-series-7)}[part~="legend-item"]:nth-child(24n + 8) {--_graph-swatch: var(--helix-color-series-8)}[part~="legend-item"]:nth-child(24n + 9) {--_graph-swatch: var(--helix-color-series-9)}[part~="legend-item"]:nth-child(24n + 10) {--_graph-swatch: var(--helix-color-series-10)}[part~="legend-item"]:nth-child(24n + 11) {--_graph-swatch: var(--helix-color-series-11)}[part~="legend-item"]:nth-child(24n + 12) {--_graph-swatch: var(--helix-color-series-12)}[part~="legend-item"]:nth-child(24n + 13) {--_graph-swatch: var(--helix-color-series-13)}[part~="legend-item"]:nth-child(24n + 14) {--_graph-swatch: var(--helix-color-series-14)}[part~="legend-item"]:nth-child(24n + 15) {--_graph-swatch: var(--helix-color-series-15)}[part~="legend-item"]:nth-child(24n + 16) {--_graph-swatch: var(--helix-color-series-16)}[part~="legend-item"]:nth-child(24n + 17) {--_graph-swatch: var(--helix-color-series-17)}[part~="legend-item"]:nth-child(24n + 18) {--_graph-swatch: var(--helix-color-series-18)}[part~="legend-item"]:nth-child(24n + 19) {--_graph-swatch: var(--helix-color-series-19)}[part~="legend-item"]:nth-child(24n + 20) {--_graph-swatch: var(--helix-color-series-20)}[part~="legend-item"]:nth-child(24n + 21) {--_graph-swatch: var(--helix-color-series-21)}[part~="legend-item"]:nth-child(24n + 22) {--_graph-swatch: var(--helix-color-series-22)}[part~="legend-item"]:nth-child(24n + 23) {--_graph-swatch: var(--helix-color-series-23)}[part~="legend-item"]:nth-child(24n + 24) {--_graph-swatch: var(--helix-color-series-24)}[part~="legend-item"][data-tone="accent"] {--_graph-swatch: var(--helix-color-accent)}[part~="legend-item"][data-tone="danger"] {--_graph-swatch: var(--helix-color-danger)}[part~="legend-item"][data-tone="info"] {--_graph-swatch: var(--helix-color-info)}[part~="legend-item"][data-tone="neutral"] {--_graph-swatch: var(--helix-color-foreground-muted)}[part~="legend-item"][data-tone="primary"] {--_graph-swatch: var(--helix-color-primary)}[part~="legend-item"][data-tone="success"] {--_graph-swatch: var(--helix-color-success)}[part~="legend-item"][data-tone="warning"] {--_graph-swatch: var(--helix-color-warning)}[part="legend-swatch"] {block-size: var(--helix-space-xs);border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);box-sizing: border-box;background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));flex: 0 0 auto;inline-size: var(--helix-space-xs)}[part~="legend-item-hidden"] {color: var(--helix-color-foreground-subtle)}[part~="legend-item-hidden"] [part="legend-swatch"] {background-color: transparent}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs)}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto}[part="filter-icon"] svg, slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs)}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle)}[part="search-field"]:focus-visible {outline: none}[part="search"]:has([part="search-field"]:focus-visible), [part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs))}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm)}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs)}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none}[part~="note"]:hover, [part="list"]:focus-visible [part~="note-cursor"], [part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {--_graph-wash: var(--graph-note-hover-color, light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)));background-image: linear-gradient(var(--_graph-wash), var(--_graph-wash))}[part="note-name"] {flex: 0 1 auto;max-inline-size: 70%;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="note-relation"] {color: var(--graph-note-relation-color, var(--helix-color-foreground-muted));flex: 1 1 0;font-size: var(--helix-text-xs);min-inline-size: 0;overflow: hidden;text-align: end;text-overflow: ellipsis;white-space: nowrap}[part~="note-selected"] {background-color: var(--graph-note-selected-background-color, var(--helix-color-surface-sunken))}[part~="note-selected"] [part="note-name"] {font-weight: var(--graph-note-selected-weight, var(--helix-weight-semibold))}[part="header"], [part="footer"] {min-inline-size: 0}@media (forced-colors: active) {[part~="legend-item-hidden"] {color: GrayText}[part="legend-swatch"] {forced-color-adjust: none}[part="list"]:focus-visible [part~="note-cursor"], [part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="note-selected"], [part~="note-selected"] [part="note-relation"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none}}@media print {:host {print-color-adjust: economy}}`);
+export const styles = createSheet(`:host {display: contents}[part="region"] {background-color: var(--graph-background-color, var(--helix-color-surface-sunken));block-size: var(--graph-block-size, 32rem);border: var(--helix-border-thin) solid var(--graph-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;container-type: inline-size;display: grid;grid-template-rows: auto minmax(0, 1fr) auto;overflow: hidden;position: relative}[part="body"] {display: grid;grid-template-columns: minmax(0, 1fr) var(--graph-panel-size, 18rem);min-block-size: 0}[part="stage"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="viewport"] {inset: 0;position: absolute}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="panel"] {background-color: var(--graph-panel-background-color, var(--helix-color-surface));border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--graph-panel-color, var(--helix-color-foreground));display: grid;grid-template-columns: minmax(0, 1fr);grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}@container (inline-size < 40rem) {[part="body"] {grid-template-columns: minmax(0, 1fr);grid-template-rows: minmax(0, 3fr) minmax(0, 2fr)}[part="panel"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);border-inline-start: none}}:host([no-panel]) [part="body"] {grid-template-columns: minmax(0, 1fr);grid-template-rows: minmax(0, 1fr);position: relative}:host([no-panel]) [part="panel"] {border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);inline-size: min(var(--graph-panel-size, 18rem), calc(100% - var(--helix-space-sm) * 2));inset-block: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);overflow: hidden;position: absolute;z-index: 1}:host([no-panel]) [part="panel"][hidden] {display: none}:host([no-panel]) [part="body"]:has([part="panel"]:not([hidden])) [part="controls"] {inset-inline-end: calc(min(var(--graph-panel-size, 18rem), 100%) + var(--helix-space-sm) * 2)}[part="notes-toggle"] {grid-area: notes}[part="notes-toggle"] svg {block-size: 1em;inline-size: 1em}[part="controls"]:has([part="notes-toggle"]):not(:has([part="pan-up"])) {grid-template-areas: "zoomin" "zoomout" "notes" "full"}[part="controls"]:has([part="notes-toggle"]):has([part="pan-up"]) {grid-template-areas: ".      up    .      zoomin" "start  .     end    zoomout" ".      down  .      notes" ".      .     .      full"}[part="legend"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));position: absolute}:host([controls-placement="bottom-start"]) [part="legend"] {inset-inline: auto var(--helix-space-sm)}@container (inline-size < 40rem) {[part="legend"] {flex-wrap: nowrap;inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));overflow-x: auto;padding: var(--helix-space-2xs);scrollbar-width: none}}[part~="legend-item"] {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-tight);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);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);white-space: nowrap}[part~="legend-item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="legend-item"]:nth-child(24n + 1) {--_graph-swatch: var(--helix-color-series-1)}[part~="legend-item"]:nth-child(24n + 2) {--_graph-swatch: var(--helix-color-series-2)}[part~="legend-item"]:nth-child(24n + 3) {--_graph-swatch: var(--helix-color-series-3)}[part~="legend-item"]:nth-child(24n + 4) {--_graph-swatch: var(--helix-color-series-4)}[part~="legend-item"]:nth-child(24n + 5) {--_graph-swatch: var(--helix-color-series-5)}[part~="legend-item"]:nth-child(24n + 6) {--_graph-swatch: var(--helix-color-series-6)}[part~="legend-item"]:nth-child(24n + 7) {--_graph-swatch: var(--helix-color-series-7)}[part~="legend-item"]:nth-child(24n + 8) {--_graph-swatch: var(--helix-color-series-8)}[part~="legend-item"]:nth-child(24n + 9) {--_graph-swatch: var(--helix-color-series-9)}[part~="legend-item"]:nth-child(24n + 10) {--_graph-swatch: var(--helix-color-series-10)}[part~="legend-item"]:nth-child(24n + 11) {--_graph-swatch: var(--helix-color-series-11)}[part~="legend-item"]:nth-child(24n + 12) {--_graph-swatch: var(--helix-color-series-12)}[part~="legend-item"]:nth-child(24n + 13) {--_graph-swatch: var(--helix-color-series-13)}[part~="legend-item"]:nth-child(24n + 14) {--_graph-swatch: var(--helix-color-series-14)}[part~="legend-item"]:nth-child(24n + 15) {--_graph-swatch: var(--helix-color-series-15)}[part~="legend-item"]:nth-child(24n + 16) {--_graph-swatch: var(--helix-color-series-16)}[part~="legend-item"]:nth-child(24n + 17) {--_graph-swatch: var(--helix-color-series-17)}[part~="legend-item"]:nth-child(24n + 18) {--_graph-swatch: var(--helix-color-series-18)}[part~="legend-item"]:nth-child(24n + 19) {--_graph-swatch: var(--helix-color-series-19)}[part~="legend-item"]:nth-child(24n + 20) {--_graph-swatch: var(--helix-color-series-20)}[part~="legend-item"]:nth-child(24n + 21) {--_graph-swatch: var(--helix-color-series-21)}[part~="legend-item"]:nth-child(24n + 22) {--_graph-swatch: var(--helix-color-series-22)}[part~="legend-item"]:nth-child(24n + 23) {--_graph-swatch: var(--helix-color-series-23)}[part~="legend-item"]:nth-child(24n + 24) {--_graph-swatch: var(--helix-color-series-24)}[part~="legend-item"][data-tone="accent"] {--_graph-swatch: var(--helix-color-accent)}[part~="legend-item"][data-tone="danger"] {--_graph-swatch: var(--helix-color-danger)}[part~="legend-item"][data-tone="info"] {--_graph-swatch: var(--helix-color-info)}[part~="legend-item"][data-tone="neutral"] {--_graph-swatch: var(--helix-color-foreground-muted)}[part~="legend-item"][data-tone="primary"] {--_graph-swatch: var(--helix-color-primary)}[part~="legend-item"][data-tone="success"] {--_graph-swatch: var(--helix-color-success)}[part~="legend-item"][data-tone="warning"] {--_graph-swatch: var(--helix-color-warning)}[part="legend-swatch"] {block-size: var(--helix-space-xs);border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);box-sizing: border-box;background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));flex: 0 0 auto;inline-size: var(--helix-space-xs)}[part~="legend-item-hidden"] {color: var(--helix-color-foreground-subtle)}[part~="legend-item-hidden"] [part="legend-swatch"] {background-color: transparent}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs)}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto}[part="filter-icon"] svg, slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs)}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle)}[part="search-field"]:focus-visible {outline: none}[part="search"]:has([part="search-field"]:focus-visible), [part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs))}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm)}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs)}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none}[part~="note"]:hover, [part="list"]:focus-visible [part~="note-cursor"], [part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {--_graph-wash: var(--graph-note-hover-color, light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)));background-image: linear-gradient(var(--_graph-wash), var(--_graph-wash))}[part="note-name"] {flex: 0 1 auto;max-inline-size: 70%;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="note-relation"] {color: var(--graph-note-relation-color, var(--helix-color-foreground-muted));flex: 1 1 0;font-size: var(--helix-text-xs);min-inline-size: 0;overflow: hidden;text-align: end;text-overflow: ellipsis;white-space: nowrap}[part~="note-selected"] {background-color: var(--graph-note-selected-background-color, var(--helix-color-surface-sunken))}[part~="note-selected"] [part="note-name"] {font-weight: var(--graph-note-selected-weight, var(--helix-weight-semibold))}[part="header"], [part="footer"] {min-inline-size: 0}@media (forced-colors: active) {[part~="legend-item-hidden"] {color: GrayText}[part="legend-swatch"] {forced-color-adjust: none}[part="list"]:focus-visible [part~="note-cursor"], [part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="note-selected"], [part~="note-selected"] [part="note-relation"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none}}@media print {:host {print-color-adjust: economy}}:host(:state(settling-unseen)) [part="viewport"] ::slotted(*) {visibility: hidden}[part="settling"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset-block-start: 50%;inset-inline: 0;position: absolute;text-align: center;translate: 0 -50%}[part="stop-layout"] {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);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);min-block-size: var(--helix-size-control-sm);padding-inline: var(--helix-space-sm);position: absolute;z-index: var(--helix-layer-raised)}[part="stop-layout"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, var(--viewport-control-background-color, var(--helix-color-surface-overlay)))}[part="stop-layout"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));--_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative}[part~="cell"] {background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width)}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between}[part="tooltip-name"] {opacity: 0.72}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium)}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin)}[part~="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1)}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin)}[part~="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1)}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick)) var(--heatmap-selected-color, var(--helix-color-primary))}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium)}[part="live"], [part="overview"], [part="selection"], [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="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs)}[part="summary"] {text-align: center}[part="end"] {text-align: end}[part="footer"][data-empty] {display: none}[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~="cell"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1)}}@media (forced-colors: active) {[part~="cell"] {forced-color-adjust: none;outline: var(--helix-border-thin) solid CanvasText;outline-offset: calc(var(--helix-border-thin) * -1)}[part~="cell-active"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-border-thin)}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--helix-border-thick) Highlight}}`);
+export const styles = createSheet(`:host {--_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));--_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative}[part~="cell"] {--_heatmap-paint: var(--heatmap-tone, var(--helix-color-surface-sunken));background-color: color-mix(in oklab, var(--_heatmap-fill, var(--_heatmap-paint)) calc(var(--_heatmap-area, 1) * var(--_heatmap-through, 1) * 100%), transparent);border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width)}:host([emphasis="outlined"]) [part~="cell"]:not([part~="cell-selected"]), :host([emphasis="subtle"]) [part~="cell"]:not([part~="cell-selected"]) {box-shadow: inset 0 0 0 var(--helix-border-thin) color-mix(in oklab, var(--_heatmap-paint) calc(var(--_heatmap-through, 1) * 100%), transparent)}:host([emphasis="outlined"]) [part~="cell"] {--_heatmap-fill: color-mix(in oklab, var(--_heatmap-paint) 60%, var(--helix-color-background))}:host([emphasis="subtle"]) [part~="cell"] {--_heatmap-area: 0.2}:host([material="glass"]) {--_heatmap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_heatmap-through: calc(0.88 * var(--helix-material-opacity))}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between}[part="tooltip-name"] {opacity: 0.72}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium)}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin)}[part~="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1)}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin)}[part~="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1)}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick)) var(--heatmap-selected-color, var(--helix-color-primary))}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium)}[part="live"], [part="overview"], [part="selection"], [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="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs)}[part="summary"] {text-align: center}[part="end"] {text-align: end}[part="footer"][data-empty] {display: none}[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~="cell"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1)}}@media (forced-colors: active) {[part~="cell"] {forced-color-adjust: none;outline: var(--helix-border-thin) solid CanvasText;outline-offset: calc(var(--helix-border-thin) * -1)}[part~="cell-active"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-border-thin)}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--helix-border-thick) Highlight}}`);

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

@@ -19,6 +19,7 @@ import '../../tooltip/index.js';
  * @since 0.1.0
  * @status stable
  * @category charts
+ * @groups charts
  * @documentation https://fusion.dev/helix/components/heatmap
  *
  * @slot end - Below the strip, at the trailing edge.
@@ -71,6 +72,25 @@ import '../../tooltip/index.js';
 export declare class HelixHeatmap extends HelixHeadlessHeatmap {
     static tier: string;
     static styles: CSSResultGroup;
+    /**
+     * How strongly the cells are drawn, as on every chart.
+     *
+     * `outlined` is a cell as its edge in its tone over a fill faded toward the
+     * page, and `subtle` a faint wash of the tone under the same edge. Absent is
+     * the filled cell, per the rule that a reflected property takes no default,
+     * and `solid` writes it out.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The ring on the cell 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';
     /**
      * The starting estimate of the gap this stylesheet draws, used until the
      * strip is measured.

package/dist/heatmap/root/heatmap-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
+import { property } from 'lit/decorators.js';
 import { styles } from './heatmap-root.css.js';
 import '../../tooltip/index.js';
 let HelixHeatmap = class HelixHeatmap extends HelixHeadlessHeatmap {
@@ -12,6 +13,12 @@ let HelixHeatmap = class HelixHeatmap extends HelixHeadlessHeatmap {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixHeatmap.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeatmap.prototype, "material", void 0);
 HelixHeatmap = __decorate([
     customElement('helix-heatmap')
 ], HelixHeatmap);

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
+export * from './motion-toggle/index.js';
 export * from './navigation/index.js';
 export * from './notifications/index.js';
 export * from './number-input/index.js';
@@ -88,9 +89,12 @@ export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
+export * from './spatial-bar-chart/index.js';
 export * from './spatial-heatmap/index.js';
+export * from './spatial-ribbon-chart/index.js';
 export * from './spatial-scatter-chart/index.js';
 export * from './spatial-surface-chart/index.js';
+export * from './spatial-treemap/index.js';
 export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';

package/dist/index.js

@@ -60,6 +60,7 @@ export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
+export * from './motion-toggle/index.js';
 export * from './navigation/index.js';
 export * from './notifications/index.js';
 export * from './number-input/index.js';
@@ -83,9 +84,12 @@ export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';
 export * from './sparkline/index.js';
+export * from './spatial-bar-chart/index.js';
 export * from './spatial-heatmap/index.js';
+export * from './spatial-ribbon-chart/index.js';
 export * from './spatial-scatter-chart/index.js';
 export * from './spatial-surface-chart/index.js';
+export * from './spatial-treemap/index.js';
 export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';

package/dist/motion-toggle/index.d.ts

@@ -0,0 +1 @@
+export { HelixMotionToggle } from './root/motion-toggle-root.js';

package/dist/motion-toggle/index.js

@@ -0,0 +1 @@
+export { HelixMotionToggle } from './root/motion-toggle-root.js';

package/dist/motion-toggle/root/motion-toggle-root.css.d.ts

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

package/dist/motion-toggle/root/motion-toggle-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: inline-block}[part="button"] {align-items: center;background-color: var(--motion-toggle-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);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);justify-content: center;min-block-size: var(--helix-size-control-sm);min-inline-size: var(--helix-size-control-sm);padding: 0 var(--helix-space-xs)}[part="icon"] {display: inline-flex}[part="icon"] svg, [part="icon"] ::slotted(*) {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm)}[part="button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, var(--motion-toggle-background-color, var(--helix-color-surface-overlay)))}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(paused)) [part="button"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 16%, var(--motion-toggle-background-color, var(--helix-color-surface-overlay)))}@media print {:host {display: none}}@media (forced-colors: active) {[part="button"] {border-color: ButtonText}:host(:state(paused)) [part="button"] {background-color: Highlight;color: HighlightText}}`);

package/dist/motion-toggle/root/motion-toggle-root.d.ts

@@ -0,0 +1,26 @@
+import { HelixHeadlessMotionToggle } from '@fusion.dev/helix-headless/motion-toggle';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A button that pauses every motion on the page that starts by itself, and lets it run again.
+ *
+ * @description
+ * A quiet square button, as the controls over a map are, with the pause icon
+ * while motion runs and the play icon while it is paused. Text slotted into
+ * it stands beside the icon.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category actions
+ * @documentation https://fusion.dev/helix/components/motion-toggle
+ *
+ * @cssproperty --motion-toggle-background-color - The button's fill. Defaults to the floating overlay surface.
+ */
+export declare class HelixMotionToggle extends HelixHeadlessMotionToggle {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-motion-toggle': HelixMotionToggle;
+    }
+}

package/dist/motion-toggle/root/motion-toggle-root.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMotionToggle } from '@fusion.dev/helix-headless/motion-toggle';
+import { styles } from './motion-toggle-root.css.js';
+let HelixMotionToggle = class HelixMotionToggle extends HelixHeadlessMotionToggle {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixMotionToggle = __decorate([
+    customElement('helix-motion-toggle')
+], HelixMotionToggle);
+export { HelixMotionToggle };

package/dist/spatial-bar-chart/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialBarChart } from './root/spatial-bar-chart-root.js';

package/dist/spatial-bar-chart/index.js

@@ -0,0 +1 @@
+export { HelixSpatialBarChart } from './root/spatial-bar-chart-root.js';

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.d.ts

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

package/dist/spatial-bar-chart/root/spatial-bar-chart-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-bar-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~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-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="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-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -0,0 +1,49 @@
+import { HelixHeadlessSpatialBarChart } from '@fusion.dev/helix-headless/spatial-bar-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.
+ *
+ * @description
+ * Each series takes a series color from the theme, as every chart's series
+ * does, and each face of a bar is that color darkened by how far it turns
+ * from the light. The chart draws the bars 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-bar-chart
+ *
+ * @cssproperty --spatial-bar-chart-block-size - How tall the plot is.
+ */
+export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * How strongly the bars are drawn, as on every chart.
+     *
+     * `outlined` is a bar as its edges in its series' color over faces faded
+     * toward the page, and `subtle` the same edges over a faint wash, which
+     * shows the bars behind it. Absent is the filled bar, per the rule that a
+     * reflected property takes no default, and `solid` writes it out. A
+     * renderer draws the bars the same way.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The outline on the bar 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-bar-chart': HelixSpatialBarChart;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialBarChart } from '@fusion.dev/helix-headless/spatial-bar-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-bar-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialBarChart = class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSpatialBarChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixSpatialBarChart.prototype, "material", void 0);
+HelixSpatialBarChart = __decorate([
+    customElement('helix-spatial-bar-chart')
+], HelixSpatialBarChart);
+export { HelixSpatialBarChart };

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [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="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"], [part="end"] {inset-block-start: 0;position: absolute;white-space: nowrap}[part="start"] {inset-inline-start: 0}[part="end"] {inset-inline-end: 0}[part="start"][data-placed], [part="end"][data-placed] {inset-block-start: var(--spatial-heatmap-label-y);inset-inline-end: auto;inset-inline-start: var(--spatial-heatmap-label-x)}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[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~="cell"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);
+export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="cell"] > * {fill: var(--_spatial-heatmap-fill, var(--_spatial-heatmap-face));fill-opacity: calc(var(--_spatial-heatmap-area, 1) * var(--_spatial-heatmap-through, 1));stroke: var(--_spatial-heatmap-line, var(--_spatial-heatmap-edge));stroke-opacity: var(--_spatial-heatmap-through, 1)}:host([emphasis="outlined"]) [part~="cell"] > * {--_spatial-heatmap-fill: color-mix(in oklab, var(--_spatial-heatmap-face) 60%, var(--helix-color-background));--_spatial-heatmap-line: var(--_spatial-heatmap-face)}:host([emphasis="subtle"]) [part~="cell"] > * {--_spatial-heatmap-area: 0.2;--_spatial-heatmap-line: var(--_spatial-heatmap-face)}:host([material="glass"]) {--_spatial-heatmap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-heatmap-through: calc(0.88 * var(--helix-material-opacity))}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [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="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"], [part="end"] {inset-block-start: 0;position: absolute;white-space: nowrap}[part="start"] {inset-inline-start: 0}[part="end"] {inset-inline-end: 0}[part="start"][data-placed], [part="end"][data-placed] {inset-block-start: var(--spatial-heatmap-label-y);inset-inline-end: auto;inset-inline-start: var(--spatial-heatmap-label-x)}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[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~="cell"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);

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

@@ -17,6 +17,7 @@ import '../../tooltip/index.js';
  * @since 0.190.0
  * @status experimental
  * @category charts
+ * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-heatmap
  *
  * @cssproperty --spatial-heatmap-cell-size - The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit.
@@ -27,6 +28,26 @@ import '../../tooltip/index.js';
 export declare class HelixSpatialHeatmap extends HelixHeadlessSpatialHeatmap {
     static tier: string;
     static styles: CSSResultGroup;
+    /**
+     * How strongly the prisms are drawn, as on every chart.
+     *
+     * `outlined` is a prism as its edges in its tone over faces faded toward the
+     * page, and `subtle` a faint wash of the tone under the same edges, which
+     * shows the prisms behind it. Absent is the filled prism, per the rule that
+     * a reflected property takes no default, and `solid` writes it out. A
+     * renderer draws the prisms the same way.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The ring on the prism 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';
     /**
      * The smallest cell, in CSS pixels, before the strip draws fewer columns.
      * `gap` is two pixels at that size, so a prism covers five sixths of its cell.

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

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

package/dist/spatial-ribbon-chart/index.d.ts

@@ -0,0 +1 @@
+export { HelixSpatialRibbonChart } from './root/spatial-ribbon-chart-root.js';

package/dist/spatial-ribbon-chart/index.js

@@ -0,0 +1 @@
+export { HelixSpatialRibbonChart } from './root/spatial-ribbon-chart-root.js';

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.css.d.ts

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

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-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-ribbon-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~="ribbon"] {--_spatial-ribbon-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-ribbon-chart-face: oklch(from var(--_spatial-ribbon-chart-color) calc(l - var(--spatial-ribbon-chart-shade, 0) * 0.5) c h);--_spatial-ribbon-chart-edge: oklch(from var(--_spatial-ribbon-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-ribbon-chart-fill, var(--_spatial-ribbon-chart-face));fill-opacity: calc(var(--_spatial-ribbon-chart-area, 1) * var(--_spatial-ribbon-chart-through, 1));stroke: var(--_spatial-ribbon-chart-line, var(--_spatial-ribbon-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-ribbon-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-ribbon-chart-fill: color-mix(in oklab, var(--_spatial-ribbon-chart-face) 60%, var(--helix-color-background));--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-ribbon-chart-area: 0.2;--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([material="glass"]) {--_spatial-ribbon-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-ribbon-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="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-ribbon-chart/root/spatial-ribbon-chart-root.d.ts

@@ -0,0 +1,49 @@
+import { HelixHeadlessSpatialRibbonChart } from '@fusion.dev/helix-headless/spatial-ribbon-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A chart that draws each series as a ribbon in three dimensions, its top following the values, for several series over one set of places.
+ *
+ * @description
+ * Each series takes a series color from the theme, as every chart's series
+ * does, and each face of a ribbon is that color darkened by how far it turns
+ * from the light. The chart draws the ribbons 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-ribbon-chart
+ *
+ * @cssproperty --spatial-ribbon-chart-block-size - How tall the plot is.
+ */
+export declare class HelixSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * How strongly the ribbons are drawn, as on every chart.
+     *
+     * `outlined` is a ribbon as its edges in its series' color over faces
+     * faded toward the page, and `subtle` the same edges over a faint wash,
+     * which shows the ribbons behind it. Absent is the filled ribbon, per the
+     * rule that a reflected property takes no default, and `solid` writes it
+     * out. A renderer draws the ribbons 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 {
+        'helix-spatial-ribbon-chart': HelixSpatialRibbonChart;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpatialRibbonChart } from '@fusion.dev/helix-headless/spatial-ribbon-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-ribbon-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixSpatialRibbonChart = class HelixSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSpatialRibbonChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixSpatialRibbonChart.prototype, "material", void 0);
+HelixSpatialRibbonChart = __decorate([
+    customElement('helix-spatial-ribbon-chart')
+], HelixSpatialRibbonChart);
+export { HelixSpatialRibbonChart };

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

@@ -1,2 +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-scatter-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~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);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~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {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 {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-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="drop-line"] {opacity: 0.45;stroke: var(--chart-series, var(--helix-color-primary));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="point"] {fill: var(--_spatial-scatter-chart-fill, var(--chart-series, var(--helix-color-primary)));fill-opacity: calc(var(--_spatial-scatter-chart-area, 1) * var(--_spatial-scatter-chart-through, 1));stroke: var(--_spatial-scatter-chart-line, var(--helix-color-surface-sunken));stroke-opacity: var(--_spatial-scatter-chart-through, 1);stroke-width: var(--_spatial-scatter-chart-weight, var(--helix-border-thin));vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part~="point"] {--_spatial-scatter-chart-fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 60%, var(--helix-color-background));--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([emphasis="subtle"]) [part~="point"] {--_spatial-scatter-chart-area: 0.2;--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([material="glass"]) {--_spatial-scatter-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-scatter-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~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="drop-line"] {stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

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

@@ -12,6 +12,7 @@ import '../../tooltip/index.js';
  * @since 0.190.0
  * @status experimental
  * @category charts
+ * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-scatter-chart
  *
  * @cssproperty --spatial-scatter-chart-block-size - How tall the plot is.
@@ -19,6 +20,25 @@ import '../../tooltip/index.js';
 export declare class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
     static tier: string;
     static styles: CSSResultGroup;
+    /**
+     * How strongly the points are drawn, as on every chart.
+     *
+     * `outlined` is a point as a ring in its group's color over a dot faded
+     * toward the page, and `subtle` the same ring over a faint dot. Absent is
+     * the filled dot, per the rule that a reflected property takes no default,
+     * and `solid` writes it out. A renderer draws the points the same way.
+     *
+     * It composes with `material`: emphasis decides what is drawn, and material
+     * how much of it comes through. The ring on the point 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 {