@fusion.dev/helix 0.40.0 → 0.41.0

package/dist/area-chart/root/area-chart-root.d.ts

@@ -13,11 +13,35 @@ import '../../tooltip/index.js';
  * the bands overlap where they are drawn and a translucent one would show the
  * others through it.
  *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * Both refusals are geometric and both were argued in the stylesheet before
+ * they were argued anywhere a reader looks.
+ *
+ * `emphasis` is which of a family's two marks carries the reading, and here
+ * neither can give way. The fill is the value, a band's thickness being its
+ * amount, and the edge is the boundary, which is why it is drawn at full color
+ * over a pale fill rather than left to two pale fills meeting. Every point on
+ * the axis moves one at the other's expense: `outlined` thins the fill until
+ * the chart is a set of cumulative lines, which is `LineChart` and is the form
+ * this one exists because a reader cannot read shares off; `solid` takes the
+ * fill to the series' own color, which is the edge's color, so the boundary
+ * disappears into the band it bounds. `LineChart` can take the axis because its
+ * wash is optional there, `area` deciding whether one is drawn at all.
+ *
+ * `material` is what reads through a mark, and a band cannot let anything
+ * through. Each is drawn as everything under its top edge with the next one
+ * down covering the rest, so a translucent band shows the bands behind it and
+ * reads as a third color that is in no palette. That is `LineChart`'s recorded
+ * reason for refusing `wash`, met here from the other side. The strength of a
+ * fill is still adjustable and is `--area-chart-fill-strength`, which is a
+ * continuum rather than an axis and is a theme's business rather than a
+ * reader's.
+ *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
- * @aliases Stacked Area Chart, Composition Chart, Stream Chart
+ * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
  * @cssproperty --area-chart-block-size - Height of the drawing.
@@ -25,6 +49,7 @@ import '../../tooltip/index.js';
  * @cssproperty --area-chart-gap - Space between the drawing and its labels.
  * @cssproperty --area-chart-gridline-color - One rule across the plot, under `gridlines`.
  * @cssproperty --area-chart-width - Thickness of a band's top edge, over `--chart-stroke`.
+ * @cssproperty --chart-stroke - Thickness of a band's top edge, one name across this family, Line Chart and Bar Chart's `lines`, since the three read one shared rule. `--area-chart-width` overrides it here.
  */
 export declare class HelixAreaChart extends HelixHeadlessAreaChart {
     /** The styled tier, so the tooltip this renders is the styled one. */

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

@@ -267,7 +267,6 @@ var(--helix-color-background)
 --_bar-chart-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-[part="bar"][data-material="frosted"],
 :host([material="frosted"]) [part="bar"]:not([data-material]) {
 --_bar-chart-through: calc(0.88 * var(--helix-material-opacity));
 }

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

@@ -11,7 +11,7 @@ import '../../tooltip/index.js';
  * it is measured against.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Column Chart, Categorical Chart
@@ -26,6 +26,7 @@ import '../../tooltip/index.js';
  * @cssproperty --bar-chart-gridline-color - One rule across the plot, under `gridlines`.
  * @cssproperty --bar-chart-line-color - A `lines` series, overriding its series color.
  * @cssproperty --bar-chart-line-width - Thickness of a `lines` series, over `--chart-stroke`.
+ * @cssproperty --chart-stroke - Thickness of a `lines` series, one name across this family, Line Chart and Area Chart's top edge, since the three read one shared rule. `--bar-chart-line-width` overrides it here.
  */
 export declare class HelixBarChart extends HelixHeadlessBarChart {
     /**
@@ -47,6 +48,12 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      * of the series color with that edge on it, and absent is the filled column,
      * per the rule that a reflected property takes no default.
      *
+     * `solid` is that filled column written out. It matches no rule in the sheet
+     * and lands on the base one, which is what the resting value of every axis in
+     * the registry does, and it is worth having so a consumer switching a chart
+     * between treatments has a word for the one it started at rather than having
+     * to remove the attribute.
+     *
      * **It composes with `material` rather than competing with it.** Emphasis
      * decides what is drawn and material decides how much of it comes through, so
      * `glass` thins whatever emphasis put there: the fill on a solid column, the
@@ -109,10 +116,15 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
     /**
      * Which series are drawn as an outline rather than a fill, by name.
      *
-     * Space separated and matched against the column headings the table gives,
-     * the way `lines` and `secondary` are, so a chart says `outlined="Forecast"`
-     * rather than counting columns. Names because they are what the table already
-     * carries and what the legend already shows.
+     * Separated by whitespace or commas and matched against the column headings
+     * the table gives, the way `lines` and `secondary` are, so a chart says
+     * `outlined="Forecast"` rather than counting columns. Names because they are
+     * what the table already carries and what the legend already shows.
+     *
+     * All five read one splitter, `seriesNames` in `core`, because the sentence
+     * above was true of the matching and false of the splitting: these three took
+     * a comma and those two did not, so `lines="Gateway, Billing"` drew no line
+     * and said nothing.
      *
      * **The case this exists for is a series that is not a measurement.** A
      * forecast, a target, a budget: something drawn on the same axis as the

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, seriesIndex } from '@fusion.dev/helix-core';
+import { customElement, seriesIndex, seriesNames } from '@fusion.dev/helix-core';
 import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/bar-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
@@ -15,11 +15,7 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
     static { this.tier = 'helix-'; }
     updated(changed) {
         super.updated(changed);
-        const slots = (list) => new Set((list ?? '')
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map((name) => name.toLowerCase())
-            .flatMap((name) => {
+        const slots = (list) => new Set(seriesNames(list).flatMap((name) => {
             const at = this.series.findIndex((one) => one.name.trim().toLowerCase() === name);
             return at < 0 ? [] : [seriesIndex(at)];
         }));

package/dist/donut-chart/root/donut-chart-root.css.js

@@ -60,7 +60,7 @@ box-sizing: border-box;
 
 container-type: inline-size;
 display: grid;
-inline-size: calc(100% * (var(--_donut-chart-ring) - var(--donut-chart-stroke, 16)) / 100);
+inline-size: calc(100% * (var(--_donut-chart-ring) - 2 * var(--donut-chart-stroke, 16)) / 100);
 place-items: center;
 text-align: center;
 }

package/dist/donut-chart/root/donut-chart-root.d.ts

@@ -23,7 +23,7 @@ import '../../tooltip/index.js';
  * and `large` was drawn larger than the default.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Pie Chart, Ring Chart, Share Chart

package/dist/legend/root/legend-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from '@fusion.dev/helix-core';
+import { customElement, seriesNames } from '@fusion.dev/helix-core';
 import { HelixHeadlessLegend } from '@fusion.dev/helix-headless/legend';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
@@ -14,11 +14,7 @@ let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
     updated(changed) {
         super.updated(changed);
         const showing = this.names().map((name) => name.trim().toLowerCase());
-        const slots = (value) => new Set((value ?? '')
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map((name) => name.toLowerCase())
-            .flatMap((name) => {
+        const slots = (value) => new Set(seriesNames(value).flatMap((name) => {
             const at = showing.indexOf(name);
             return at < 0 ? [] : [at];
         }));

package/dist/line-chart/root/line-chart-root.d.ts

@@ -13,19 +13,28 @@ import '../../tooltip/index.js';
  * lets one drawing fill a narrow card and a wide panel, and without
  * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
  * first and heavy in the second. It rescues strokes and not geometry, which is
- * why the readings are joined by lines and marked by nothing: a circle in a
- * stretched coordinate space is an ellipse, and there is no vector-effect that
- * answers for a shape.
+ * why nothing inside the drawing marks a reading: a circle in a stretched
+ * coordinate space is an ellipse, and there is no vector-effect that answers
+ * for a shape.
+ *
+ * **The last reading of each series is marked, and that is the same rule rather
+ * than an exception to it.** `terminus` draws an HTML element placed over the
+ * plot by percentage instead of a shape inside it, so it keeps its shape at any
+ * width. It is on by default, as a dot, because the column of marks at the far
+ * edge is where a reader looks for "and what is it now".
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
  *
- * @cssproperty --chart-stroke - Thickness of a series drawn as a line, here and on Area
- *   Chart's top edge and Bar Chart's `lines`. Each family's own width hook overrides it.
+ * @cssproperty --chart-stroke - Thickness of a series drawn as a line, one name across this
+ *   family, Area Chart's top edge and Bar Chart's `lines`, since the three read one shared
+ *   rule. Each family's own width hook overrides it.
+ * @cssproperty --chart-terminus-hole - A fill for the middle of a `ring` terminus, which is otherwise open. One name across this family and Sparkline, the two reading one shared sheet.
+ * @cssproperty --chart-terminus-size - Size of the mark on each series' last reading. One name across this family and Sparkline, the two reading one shared sheet.
  * @cssproperty --line-chart-area-opacity - How much of a line's color its wash takes.
  * @cssproperty --line-chart-band-color - The slot the pointer is resting in.
  * @cssproperty --line-chart-block-size - Height of the drawing.

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

@@ -6,7 +6,7 @@ position: relative;
 }
 
 [part="plane"] {
-column-gap: var(--helix-space-xs);
+column-gap: var(--scatter-chart-gap, var(--helix-space-xs));
 display: grid;
 grid-template-areas:
 "y-name y-name"

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

@@ -12,8 +12,32 @@ import '../../tooltip/index.js';
  * dense cluster reads as dense rather than as one blot, and two points that
  * overlap each keep their edge.
  *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * Both refusals come out of that sentence, and both were argued in the
+ * stylesheet before they were argued anywhere a reader looks.
+ *
+ * `emphasis` is how much ink a mark claims, and on a scatter that channel is
+ * already carrying data. The points rest at 0.8 so that where they pile up they
+ * compound: how dark a region is *is* how many rows are in it, which is most of
+ * what a reader is looking at a scatter to see and is the one thing a table of
+ * the same numbers hides. `solid` flattens a dense cluster and a sparse one into
+ * the same picture; `outlined` replaces the pile with overlapping rings, which
+ * reads as texture rather than as count. An axis whose two ends each cost the
+ * drawing its density is not a treatment, it is a second meaning for a property
+ * the chart already spends.
+ *
+ * `material` is the same refusal said once more. Translucency is the density
+ * channel here, so `glass` and `frosted` are two more named stops on a scale
+ * the data is using, and a point admitting the page through is a point that
+ * counts for less than one.
+ *
+ * What stays adjustable is `--scatter-chart-point-opacity`, and it is a
+ * continuum rather than an axis: a chart drawn over a busier ground wants a
+ * different resting density, and that is a fact about the ground rather than a
+ * claim about the points.
+ *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot

package/package.json

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