@fusion.dev/helix-headless 0.40.0 → 0.41.0

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

@@ -28,7 +28,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * computed and CSS cannot.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Column Chart, Categorical Chart
  * @documentation https://fusion.dev/helix/components/bar-chart
@@ -65,7 +65,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
- * @cssproperty --bar-chart-axis - The color of a single-series axis, taken from that series.
+ * @cssproperty --bar-chart-axis - How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead.
  * @cssproperty --bar-chart-secondary - The color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138.
  * @cssproperty --chart-bar-wash - The gradient a bar would take, named per bar so the
  *   styled tier can point `fill` at it. Drawn whatever the treatment and used only where
@@ -105,30 +105,40 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
     /**
      * Which series are drawn as a line instead of as columns, by name.
      *
-     * Space separated, matched against the column headings the table gives, so a
-     * chart says `lines="Margin"` rather than counting columns. Names because
-     * they are what the table already carries and what the legend already shows:
-     * an index is a fourth place the column order is written down and the first
-     * one to go stale when somebody moves a column.
+     * Separated by whitespace or commas and matched against the column headings
+     * the table gives, so a chart says `lines="Margin"` rather than counting
+     * columns. Names because they are what the table already carries and what the
+     * legend already shows: an index is a fourth place the column order is
+     * written down and the first one to go stale when somebody moves a column.
      *
-     * **A combination chart is one scale, and that is the honest half of it.**
-     * Both marks are measured against the same domain, so a line here says
-     * something comparable to the columns beside it. The usual reason to reach
-     * for a combination chart is the other thing, a count against a percentage on
-     * a second axis, and that is deliberately not this: two scales on one frame
-     * let the author put any two shapes in any relation by choosing the ranges,
-     * and the reader has no way to see it happening.
+     * **This says which mark a series takes and nothing about which scale it is
+     * measured on.** Named here alone, a line shares the columns' domain, so it
+     * says something comparable to the columns beside it.
      *
-     * A line among columns still measures from zero, because the columns do and
-     * they share the axis.
+     * The other half of a combination chart, a count against a percentage on a
+     * scale of its own, is `secondary`, which is a separate property because it
+     * is a separate question and because the two compose: `with-a-second-axis`
+     * ships naming one series in both. The argument for why a second scale is opt
+     * in, and why setting it labels both axes, is written there.
+     *
+     * A line among columns measures from zero, because the columns do and they
+     * share the axis. So does a line on the second scale, which is that scale's
+     * own rule rather than this one's.
      */
     lines?: string;
     /**
      * Which series are measured against a scale of their own, by name.
      *
-     * Space separated and matched the way `lines` is, against the column headings
-     * the table gives. Opt in: absent, every series shares one domain, which is
-     * what makes a chart comparable and is the right default.
+     * Separated and matched the way `lines` is, against the column headings the
+     * table gives. Opt in: absent, every series shares one domain, which is what
+     * makes a chart comparable and is the right default.
+     *
+     * **The scale, and `lines` is the mark.** The two are separate properties
+     * because they answer separate questions and a series usually wants both:
+     * a percentage beside a count is drawn as a line *and* measured on its own
+     * axis, which is what `with-a-second-axis` writes out. Neither implies the
+     * other, so a series can be a line on the shared scale and a column can have
+     * a scale to itself.
      *
      * **Two scales on one frame let an author put any two shapes in any relation
      * by choosing the ranges, and a reader cannot see it happening.** That is not

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

@@ -4,23 +4,17 @@ 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 { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, seriesIndex, seriesNames, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 const HEIGHT = 100;
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     get scaled() {
-        return new Set((this.secondary ?? '')
-            .split(/\s+/)
-            .map((name) => name.trim().toLowerCase())
-            .filter(Boolean));
+        return new Set(seriesNames(this.secondary));
     }
     get lined() {
-        return new Set((this.lines ?? '')
-            .split(/\s+/)
-            .map((name) => name.trim().toLowerCase())
-            .filter(Boolean));
+        return new Set(seriesNames(this.lines));
     }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
@@ -223,7 +217,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             placement: sideways ? (this.pointer.mirrored ? 'left' : 'right') : 'top',
             x: sideways ? `${far}%` : `${across}%`,
             y: sideways ? `${across}%` : `${far}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

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

@@ -17,7 +17,7 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * dropped. Those rows are skipped and the total is of what is left.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Pie Chart, Ring Chart, Share Chart
  * @documentation https://fusion.dev/helix/components/donut-chart
@@ -84,6 +84,14 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * `getComputedStyle`, which is client-only: a server would draw a different
      * ring than the client. A plot's proportions are markup for the same reason
      * `curve` is.
+     *
+     * **And so it does not reflect**, which is the same argument read forward. No
+     * selector on either tier asks about it and none can want to: everything the
+     * thickness decides is arithmetic done here and published as
+     * `--donut-chart-stroke`, which is a number a rule can do sums with where the
+     * word is not. Reflected, it wrote a value onto every host a script had set
+     * it on for nothing to read. `sweep` beside it is the converse and reflects,
+     * because three rules select on it.
      */
     hole?: 'large' | 'none' | 'small';
     /**

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

@@ -165,11 +165,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
                     : 'top',
             x: `${x}%`,
             y: `${y}%`,
-        });
+        }, () => seriesIndex(at));
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixHeadlessDonutChart.prototype, "hole", void 0);
 __decorate([
     property({ reflect: true })

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

@@ -11,7 +11,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `entries` picks which way to read that table. `series` is one entry per data
  * column, named by the header row, which is a line or a bar chart.
  * `categories` is one entry per body row, which is a donut: its slices are the
- * rows and it has no axis to write their names along.
+ * rows and it has no axis to write their names along. `measures` drops the
+ * first data column, which is a scatter.
  *
  * **The table is resolved on the client and there is no server pass.**
  *
@@ -32,8 +33,21 @@ export declare class HelixHeadlessLegend extends HelixElement {
      *
      * Absent is `series`, one entry per data column. `categories` reads one entry
      * per body row instead, for a donut, whose slices are the rows.
+     *
+     * **`measures` is `series` without the first column, and it is for a
+     * scatter.** That chart reads its first numeric column as the measure
+     * *across*, so its first plotted series is the table's second and everything
+     * a legend beside it named was one color out: the across column wearing the
+     * color of the first series drawn, and each real series wearing the next
+     * one's. The across gets no entry rather than a shifted one, because it is an
+     * axis and a scatter already writes its name at the end of the scale under
+     * the plot.
+     *
+     * A legend cannot ask the chart which of these it is, `for` naming the table
+     * they share and not each other, so the consumer says it. That is the same
+     * shape `categories` already has.
      */
-    entries?: 'categories' | 'series';
+    entries?: 'categories' | 'measures' | 'series';
     /**
      * The id of the table to take the names from.
      *

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

@@ -20,9 +20,10 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     }
     names() {
         const series = this.source.series;
-        return this.entries === 'categories'
-            ? (series[0]?.points.map((point) => point.label) ?? [])
-            : series.map((one) => one.name);
+        if (this.entries === 'categories') {
+            return series[0]?.points.map((point) => point.label) ?? [];
+        }
+        return (this.entries === 'measures' ? series.slice(1) : series).map((one) => one.name);
     }
     render() {
         return html `<ul part="list" role="list">

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

@@ -36,7 +36,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * A reader who wants the numbers gets the numbers, not a described picture.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
@@ -68,6 +68,9 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --chart-terminus-x - Where a series' last reading sits horizontally, as a percentage. Written by the component.
+ * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
     /**
@@ -141,9 +144,20 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * the question a sparkline's single mark answers too.
      *
      * `none` lets the lines stop on their own, which suits a chart read for its
-     * shape rather than for where it finished. The shapes come from
+     * shape rather than for where it finished. `square` is the same mark with its
+     * corners, for a drawing whose neighbors are square, the columns of a table
+     * beside it for instance. `ring` lets the ground through, for a chart drawn
+     * over something busy. `triangle` points along the axis and reads as "and
+     * onward" rather than as a second claim about the data.
+     *
+     * The shapes come from
      * `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
-     * the set is identical wherever one appears.
+     * the set is identical wherever one appears. **Which is why every value is
+     * named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
+     * undocumented until the cohort before this one; this family reads the same
+     * four out of the same sheet and had left two of them unwritten, so the
+     * finding arrived twice. A shared vocabulary wants naming at each door into
+     * it, because a reader arrives at one door and not at the set.
      *
      * `ring` is the one that asks something of the drawing. It leaves a hole and a
      * line ends at the reading, which is the hole's center, so the `<svg>` is

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

@@ -170,7 +170,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
             y: `${tops.length > 0 ? Math.min(...tops) : 0}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

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

@@ -58,7 +58,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * and the bubble is told the page's direction, both being words.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
  * @documentation https://fusion.dev/helix/components/scatter-chart
@@ -121,6 +121,22 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
     private nearest;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * The palette slot a cell of a row is drawn in, which here is shifted by one.
+     *
+     * **A scatter's first plotted series is the table's *second* numeric
+     * column**, the first having been split off as the measure across. So the
+     * mixin's answer, which is right for a chart whose columns are its series in
+     * order, is one too high on every column here and names a color for the
+     * across, which is drawn in none. Left at that, the bubble painted the across
+     * column in series one, the color the points themselves are drawn in, and
+     * gave the series actually plotted series two.
+     *
+     * The across gets no dot at all rather than a shifted one. It is an axis and
+     * not a series: it has a scale under the plot with its name at the end of it,
+     * which is where a reader is told what it is.
+     */
+    seriesOf(cell: number): number | undefined;
     /** Whether the levels across are ruled. */
     protected get rulesX(): boolean;
     /** Whether the levels up are ruled. */

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

@@ -89,6 +89,10 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         this.removeEventListener('pointermove', this.handleMove);
         this.removeEventListener('pointerleave', this.handleLeave);
     }
+    seriesOf(cell) {
+        const depth = this.plottedColumns.indexOf(cell);
+        return depth < 1 ? undefined : seriesIndex(depth - 1);
+    }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
     }
@@ -97,8 +101,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     get field() {
         const rows = this.sourceRows;
-        const width = Math.max(0, ...rows.map((row) => row.cells.length));
-        const columns = Array.from({ length: width }, (_, column) => column).filter((column) => rows.some((row) => row.cells[column]?.value !== undefined));
+        const columns = this.plottedColumns;
         const [across, ...ups] = columns;
         const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
@@ -193,7 +196,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.40.0",
-    "@fusion.dev/helix-icons": "0.40.0",
+    "@fusion.dev/helix-core": "0.41.0",
+    "@fusion.dev/helix-icons": "0.41.0",
     "uqr": "^0.1.3"
   },
   "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",