@fusion.dev/helix-headless 0.218.0 → 0.219.0

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

@@ -13,6 +13,11 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * depth, each as tall as its value from zero and colored by its series, so
  * one series is a single row of bars and several make a block of them.
  *
+ * **A cell's `data-tone` colors its own bar and writes its value above it**,
+ * such as `data-tone="primary"` on the one reading a chart is about, as on
+ * `Bar Chart`. The value is the cell's own text. Without a tone, a bar takes
+ * its series' color.
+ *
  * **The flat `Bar Chart` is read more exactly.** Measured, a reader judges
  * a 3D bar's value less closely than a flat one's, and a bar can stand
  * behind another. Use this one where the shape across two sets of names
@@ -79,6 +84,8 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * @csspart empty - The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
  * @csspart face - One face of a bar the view shows, shaded by which way it faces.
  * @csspart fallback - The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
+ * @csspart floor - One place on the floor of a `row`, under a bar or where one would stand, drawn as its outline.
+ * @csspart glow - The outline of a bar whose cell names a tone, blurred by 8 CSS pixels and painted under the bar, with no fill until a stylesheet gives it one: a soft glow in the bar's tone.
  * @csspart grid - The box's edges and its grid, in the chart's own drawing.
  * @csspart live - The readout: a polite live region that says the bar the keys moved to. Hide it visually.
  * @csspart loading - The words while `loading` is set and there are no readings.
@@ -90,7 +97,7 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * @csspart summary - The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
  * @csspart table-pages - Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.
- * @csspart tick - A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
+ * @csspart tick - A category's or a series' name, or a value at a tick, along its edge of the box, or a category's name under its place in a `row`, in the chart's own drawing.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
  * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
@@ -107,8 +114,16 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * @csspart tooltip-surface-right - The bubble while it is right of the reading. Set alongside `tooltip-surface`.
  * @csspart tooltip-surface-top - The bubble while it is above the reading. Set alongside `tooltip-surface`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ * @csspart value - The value of a bar whose cell names a tone, written above it in the chart's own drawing.
  *
- * @cssproperty --spatial-bar-chart-shade - How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.
+ * @cssproperty --spatial-bar-chart-shade -How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.
+ * @cssproperty --spatial-bar-chart-tone-accent - The color of a bar whose cell says `data-tone="accent"`.
+ * @cssproperty --spatial-bar-chart-tone-danger - The color of a bar whose cell says `data-tone="danger"`.
+ * @cssproperty --spatial-bar-chart-tone-info - The color of a bar whose cell says `data-tone="info"`.
+ * @cssproperty --spatial-bar-chart-tone-muted - The color of a bar whose cell says `data-tone="muted"`.
+ * @cssproperty --spatial-bar-chart-tone-primary - The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+ * @cssproperty --spatial-bar-chart-tone-success - The color of a bar whose cell says `data-tone="success"`.
+ * @cssproperty --spatial-bar-chart-tone-warning - The color of a bar whose cell says `data-tone="warning"`.
  *
  * @cssstate active - While a bar is shown, under the pointer or the keys.
  * @cssstate drawn - While a renderer has drawn the bars, and the chart's own drawing is hidden.
@@ -122,8 +137,32 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      */
     static words: string;
     /**
-     * Draws no box: no edges, grid, numbers, or names, so the readings stand
-     * alone and fill the plot, as a picture on a product's own page does. The
+     * Grows the bars up from the floor the first time the chart comes into
+     * view with readings, each category a little after the one before it, so
+     * the drawing arrives the way a page's own picture does. The growth is
+     * fast at first, slows to rest, and never passes a bar's value.
+     *
+     * Under `prefers-reduced-motion`, or where the page has paused its motion
+     * through `pauseMotion` or `Motion Toggle`, the bars stand at their height
+     * from the start. A later table draws the bars it already had at their
+     * height, and grows the bars it adds, each from the floor, so a reading that
+     * arrives while the chart is in view arrives the same way.
+     */
+    grow: boolean;
+    /**
+     * Grows the bars again each time the chart comes back into view after it
+     * left it, as a pane does when it is opened again, where `grow` alone grows
+     * them the first time only. Only a chart that grows takes it.
+     *
+     * While it is out of view the bars stand at the floor, so the first frame
+     * after it returns is the start of the growth and never a flash at full
+     * height.
+     */
+    growAgain: boolean;
+    /**
+     * Draws no box: no edges, grid, numbers, or names, and in a `row` no
+     * floor, so the readings stand alone and fill the plot, as a picture on a
+     * product's own page does. The
      * table, the summary, the tooltip, and the keys still carry every value,
      * and a renderer draws no box either.
      */
@@ -135,12 +174,57 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
     openLabel: string;
     /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
     plotLabel: string;
+    /**
+     * Stacks a category's series into one column, each block standing on the
+     * ones before it, so the column is as tall as the category's total, as a
+     * flat `Bar Chart` stacks them.
+     *
+     * Absent stands the series one behind another in depth. Stacked, every
+     * series stands in the front row, so none hides another, and the parts of
+     * one total read together. A negative reading hangs below zero on the
+     * negatives before it. The scale fits the stacks.
+     */
+    stacked: boolean;
     /**
      * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
      * are the number of bars, series, and categories, written in the locale,
      * and `{low}` and `{high}` the lowest and the highest value.
      */
     summaryLabel: string;
+    /**
+     * How the bars stand.
+     *
+     * Unset, they stand on a grid of categories across and series in depth,
+     * in a box the camera looks at from a corner, so the grid recedes at an
+     * angle. `row` lays the categories in a straight line across the page and
+     * turns each bar to the camera, showing its top and two sides, for one row
+     * of readings in a small space such as a pane: turning the view turns each
+     * bar where it stands, and the row stays level. It is the chart's own
+     * drawing that lays the row: a renderer connected through
+     * `@fusion.dev/helix-plot` stands the bars on the grid.
+     *
+     * `diagonal` is the same row climbing to the right as it recedes, each
+     * place a step further back than the one before, as a row of days on a
+     * product's page is drawn: the row rises one part in five across the page
+     * from any turn, and its floor and names climb with it. A row whose bars
+     * have a size climbs at most a quarter of the plot's height, so the bars
+     * of a long row keep theirs.
+     *
+     * **A row draws its floor in place of a box**: each place as an outline a
+     * little wider than its bar, and each category's name under it, as many
+     * names as fit without touching. A name whose bar names a tone is written
+     * first, in that tone. `no-box` leaves the floor and the names out.
+     *
+     * **A `column-gap` on the `fallback` part gives a row's bars one width**,
+     * which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
+     * stands as wide as each of twenty, the row is as long as its bars and
+     * centered, the tallest bar stands as high as the plot has room for and
+     * no taller than the row is long and a quarter again, so one bar stands
+     * as a block, and `fits` says how many bars the plot holds, so a page
+     * can give it the latest of a longer table. It is read when the plot's
+     * size changes.
+     */
+    variant?: 'diagonal' | 'row';
     /** Whether a renderer has drawn the bars, which hides the chart's own drawing. */
     private rendered;
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
@@ -153,6 +237,34 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
     private last;
     /** The bar the keys rested on last, so a change of it can be told. */
     private told;
+    /**
+     * The size of the box the chart's own drawing fills, its font size, and
+     * the bar size the stylesheet asks for, in CSS pixels, once measured: the
+     * names and values are written at that size whatever the drawing's scale.
+     */
+    private room;
+    /** Measures the box the chart's own drawing fills. */
+    private sizes;
+    /**
+     * How far the bars have grown in: waiting to be seen, growing since a
+     * moment, or `undefined` once they stand at their height. `grew` says the
+     * first table has been drawn, so a later one is not grown again.
+     */
+    private growth;
+    private grew;
+    /**
+     * The bars a later table added, by category label, each growing from the
+     * floor: when it started, and its place among the bars that came with it, so
+     * several arriving together follow one another as the first table's do. A
+     * bar leaves the map once it stands.
+     */
+    private readonly fresh;
+    /** The categories of the table drawn last, so a later table's new ones are known. */
+    private drawnLabels;
+    /** Watches for the chart to leave the view, after which `grow-again` has it grow in once more. */
+    private gone;
+    /** Watches for the chart to come into view, which starts the bars growing. */
+    private seen;
     /** Carries a host `aria-labelledby` and `aria-describedby` to the plot. */
     protected readonly aria: AriaForwardController;
     /**
@@ -160,7 +272,7 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * column a series.** A renderer reads it.
      */
     get field(): BarField;
-    /** The field last read, and the rows and columns it was read from. */
+    /** The field last read, and the rows, columns, and series it was read from. */
     private memo;
     /** The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. */
     get active(): number;
@@ -194,6 +306,36 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * the server calls this one.
      */
     protected willUpdate(changed: PropertyValues<this>): void;
+    /** Draws each frame until the bars a later table added stand. */
+    private followFresh;
+    disconnectedCallback(): void;
+    /** The element the size observer watches, so a drawing drawn again is watched again. */
+    private measured;
+    /** Watches the box the chart's own drawing fills, and keeps its size and font size. */
+    private measure;
+    /**
+     * How many categories a `row` or a `diagonal` has room for across the
+     * plot at its bar size, measured as it is read, or
+     * `undefined` where there is no row, no bar size, or nothing drawn to
+     * measure. A page with a longer table gives the chart its latest that
+     * many rows, and says so.
+     */
+    get fits(): number | undefined;
+    /**
+     * A row with a bar size of its own: how many of the drawing's units make a
+     * pixel, so each bar is as wide as asked, and the field with its value axis
+     * as tall as fills the plot's height with the names and the value. Where
+     * the row is too long for the plot, its bars narrow until it fits.
+     */
+    private sized;
+    /** Starts the bars growing once the chart comes into view, and draws each frame until they stand. */
+    private watchGrowth;
+    /**
+     * Under `grow-again`, waits for the chart to leave the view, then puts the
+     * bars back at the floor and waits to be seen, so growing again starts from
+     * the same place the first time did.
+     */
+    private watchExit;
     connectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     /**
@@ -222,7 +364,7 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * drawing, until a renderer has drawn and where none is connected.
      */
     private renderFallback;
-    /** One bar, its faces in its series' color, each shaded by which way it faces. */
+    /** One bar, its faces in its tone's color or its series', each shaded by which way it faces. */
     private renderBar;
     /** The readout: the bar's category, series, and value in words, once the keys have moved to one. */
     private renderLive;

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

@@ -1,10 +1,16 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, CHART_PLOT, customElement, depthOrder, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, motionPaused, reducedMotion, shortNumber, spokenReading, words, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
-import { barsDrawn, barsOf } from '../bars.js';
+import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, TICK_SIZE, turned, } from '../../spatial-scatter-chart/view.js';
+import { barsDrawn, barsOf, climbing, floorOf, grownAt, growTime, heightened, namesOf, paintOrder, rowFits, tallestTimes, widthOf, } from '../bars.js';
+const barSizeOf = (style) => {
+    const size = Number.parseFloat(style.columnGap);
+    return Number.isFinite(size) && size > 0 ? size : undefined;
+};
+const WORD_LINES = 3.6;
+const CLIMB_SHARE = 0.25;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
     ArrowLeft: { across: -1, up: 0 },
@@ -12,12 +18,22 @@ const TURNS = {
     ArrowUp: { across: 0, up: 1 },
 };
 const SERIES = 24;
+const toned = (tone) => tone && /^[a-z][a-z0-9-]*$/.test(tone) ? tone : undefined;
+const around = (frame, points) => {
+    const xs = [frame.x, frame.x + frame.width, ...points.map((point) => point.x)];
+    const ys = [frame.y, frame.y + frame.height, ...points.map((point) => point.y)];
+    const [left, top] = [Math.min(...xs), Math.min(...ys)];
+    return { height: Math.max(...ys) - top, width: Math.max(...xs) - left, x: left, y: top };
+};
 let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.grow = false;
+        this.growAgain = false;
         this.noBox = false;
         this.openLabel = '{category}, {series}: no value';
         this.plotLabel = '3D bar chart';
+        this.stacked = false;
         this.summaryLabel = '{count, plural, one {# bar} other {# bars}} in {series, plural, one {# series} other {# series}} over {categories, plural, one {# category} other {# categories}}, from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
@@ -25,6 +41,8 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
         this.told = -1;
+        this.grew = false;
+        this.fresh = new Map();
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('plot'),
         });
@@ -71,8 +89,14 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     get field() {
         const rows = this.sourceRows;
         const columns = this.plottedColumns;
-        if (this.memo?.rows !== rows || this.memo.columns !== columns) {
-            this.memo = { columns, field: barsOf(rows, columns), rows };
+        const series = this.series;
+        if (this.memo?.rows !== rows ||
+            this.memo.columns !== columns ||
+            this.memo.series !== series ||
+            this.memo.stacked !== this.stacked) {
+            const tones = series.map((one) => new Map(one.points.map((point) => [point.at, toned(point.tone)])));
+            const field = barsOf(rows, columns, this.stacked, (row, depth) => tones[depth]?.get(row));
+            this.memo = { columns, field, rows, series, stacked: this.stacked };
         }
         return this.memo.field;
     }
@@ -99,10 +123,158 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.pointer.grid = Math.max(1, this.field.series.length);
+        const field = this.field;
+        this.pointer.grid = Math.max(1, field.series.length);
+        const labels = new Set(field.categories);
+        const moves = typeof IntersectionObserver === 'function' &&
+            typeof requestAnimationFrame === 'function' &&
+            !reducedMotion() &&
+            !motionPaused();
+        if (this.grow && !this.grew && field.readings > 0) {
+            this.grew = true;
+            this.growth = moves ? {} : undefined;
+        }
+        else if (this.grow && this.grew && field.readings > 0 && this.drawnLabels && moves) {
+            const added = [...labels].filter((label) => !this.drawnLabels?.has(label));
+            if (added.length > 0 && !this.growth) {
+                const since = performance.now();
+                added.forEach((label, index) => {
+                    this.fresh.set(label, { count: added.length, index, since });
+                });
+                this.followFresh();
+            }
+        }
+        if (field.readings > 0) {
+            this.drawnLabels = labels;
+        }
+    }
+    followFresh() {
+        const frame = () => {
+            const now = performance.now();
+            for (const [label, one] of this.fresh) {
+                if (now - one.since >= growTime(one.count)) {
+                    this.fresh.delete(label);
+                }
+            }
+            this.requestUpdate();
+            if (this.fresh.size > 0) {
+                requestAnimationFrame(frame);
+            }
+        };
+        requestAnimationFrame(frame);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.measured = undefined;
+        this.seen?.disconnect();
+        this.seen = undefined;
+        this.gone?.disconnect();
+        this.gone = undefined;
+    }
+    measure() {
+        const box = this.partNamed('fallback');
+        if (!box || box === this.measured || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        this.measured = box;
+        this.sizes?.disconnect();
+        this.sizes = new ResizeObserver(([entry]) => {
+            const { height, width } = entry?.contentRect ?? { height: 0, width: 0 };
+            const style = getComputedStyle(box);
+            const font = Number.parseFloat(style.fontSize) || 16;
+            const bar = barSizeOf(style);
+            const was = this.room;
+            if (was?.width !== width || was.height !== height || was.font !== font || was.bar !== bar) {
+                this.room =
+                    height > 0 && width > 0
+                        ? { font, height, width, ...(bar && bar > 0 ? { bar } : {}) }
+                        : undefined;
+            }
+        });
+        this.sizes.observe(box);
+    }
+    get fits() {
+        const box = this.partNamed('fallback');
+        if (!box || !this.variant || typeof getComputedStyle !== 'function') {
+            return undefined;
+        }
+        const style = getComputedStyle(box);
+        const bar = barSizeOf(style);
+        const width = box.clientWidth;
+        return bar && width > 0 ? rowFits(width, bar) : undefined;
+    }
+    sized(read, projection, layout, room) {
+        const first = barsDrawn(read, projection, layout)[0];
+        if (!first || !room.bar) {
+            return undefined;
+        }
+        const frameOf = (field, grown) => {
+            const floor = this.noBox ? [] : floorOf(field, projection, layout);
+            const drawn = barsDrawn(field, projection, layout, grown);
+            return boundsOf([...drawn.flatMap((bar) => bar.corners), ...floor.flatMap((one) => one.corners)], 0);
+        };
+        const unit = Math.max(widthOf(first) / room.bar, frameOf(read, () => 0).width / Math.max(1, room.width - room.font * 2));
+        const field = climbing(read, room.height * CLIMB_SHARE * unit, frameOf(read, () => 0).width);
+        const low = frameOf(field, () => 0);
+        const high = frameOf(field);
+        const tall = (room.height - room.font * WORD_LINES) * unit;
+        const rises = high.height - low.height;
+        const fills = rises > 0 ? Math.max(0.05, (tall - low.height) / rises) : 1;
+        const times = Math.min(fills, tallestTimes(field, projection, barsDrawn(field, projection, layout)));
+        return { field: heightened(field, times), unit };
+    }
+    watchGrowth() {
+        if (!this.growth || this.growth.since !== undefined || this.seen) {
+            return;
+        }
+        this.seen = new IntersectionObserver(([entry]) => {
+            if (!entry?.isIntersecting || !this.growth) {
+                return;
+            }
+            this.seen?.disconnect();
+            this.seen = undefined;
+            const since = performance.now();
+            this.growth = { since };
+            const length = growTime(this.field.categories.length);
+            const frame = () => {
+                if (this.growth?.since !== since) {
+                    return;
+                }
+                if (performance.now() - since >= length) {
+                    this.growth = undefined;
+                    this.watchExit();
+                    return;
+                }
+                this.requestUpdate();
+                requestAnimationFrame(frame);
+            };
+            requestAnimationFrame(frame);
+        }, { threshold: 0.4 });
+        this.seen.observe(this);
+    }
+    watchExit() {
+        if (!this.growAgain || this.gone) {
+            return;
+        }
+        this.gone = new IntersectionObserver(([entry]) => {
+            if (!entry || entry.isIntersecting) {
+                return;
+            }
+            this.gone?.disconnect();
+            this.gone = undefined;
+            this.fresh.clear();
+            this.growth = {};
+        });
+        this.gone.observe(this);
     }
     connectedCallback() {
         super.connectedCallback();
+        if (this.hasUpdated) {
+            this.measure();
+            this.watchGrowth();
+        }
         this.pointer.axis = 'none';
         this.pointer.onReading = (heard, detail) => {
             const cell = this.field.cells[detail.index];
@@ -116,6 +288,8 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     updated(changed) {
         super.updated(changed);
+        this.measure();
+        this.watchGrowth();
         const field = this.field;
         if (field !== this.last) {
             this.last = field;
@@ -156,14 +330,85 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
       </div>
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
-    renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
-        const bars = barsDrawn(field, view.projection);
+    renderFallback(read, at) {
+        const layout = this.variant ?? 'grid';
+        const lined = layout === 'grid' ? undefined : layout;
+        const bare = this.noBox || lined !== undefined;
+        const view = boxView(read.axes, this.camera, [], bare);
+        const room = this.room;
+        const sized = lined && room?.bar ? this.sized(read, view.projection, lined, room) : undefined;
+        const field = sized?.field ?? read;
+        const full = barsDrawn(field, view.projection, layout);
+        const growth = this.growth;
+        const since = growth?.since;
+        const elapsed = since === undefined ? 0 : performance.now() - since;
+        const categories = field.categories.length;
+        const now = performance.now();
+        const bars = growth
+            ? barsDrawn(field, view.projection, layout, (one) => grownAt(one.across, categories, elapsed))
+            : this.fresh.size > 0
+                ? barsDrawn(field, view.projection, layout, (one) => {
+                    const added = this.fresh.get(one.label);
+                    return added ? grownAt(added.index, added.count, now - added.since) : 1;
+                })
+                : full;
+        const floor = lined && !this.noBox ? floorOf(field, view.projection, lined) : [];
         const active = bars.find((bar) => bar.index === at);
         const cell = field.cells[at];
-        const bounds = this.drag.frame(this.noBox
-            ? boundsOf(bars.flatMap((bar) => bar.corners), 0.1)
-            : view.bounds, view.on([0, 0, 0]));
+        const base = bare
+            ? boundsOf([...full.flatMap((bar) => bar.corners), ...floor.flatMap((one) => one.corners)], 0.1)
+            : view.bounds;
+        const pixelOf = (frame) => sized
+            ? sized.unit
+            : room
+                ? 1 / Math.min(room.width / frame.width, room.height / frame.height)
+                : undefined;
+        const sizeOf = (frame) => {
+            const pixel = pixelOf(frame);
+            return room && pixel !== undefined ? room.font * pixel : TICK_SIZE;
+        };
+        const wordsAt = (size) => {
+            const names = floor.length > 0 ? namesOf(field, floor, size) : [];
+            const values = full.flatMap((bar) => {
+                const one = field.cells[bar.index];
+                const text = one?.tone ? this.sourceRows[one.row]?.cells[one.column]?.text : undefined;
+                return one && text
+                    ? [
+                        {
+                            index: bar.index,
+                            text,
+                            tone: one.tone,
+                            x: bar.drawn.peak.x,
+                            y: bar.drawn.crown - size,
+                        },
+                    ]
+                    : [];
+            });
+            const extents = [...names, ...values].flatMap((word) => {
+                const half = (word.text.length * size * 0.62) / 2;
+                return [
+                    { x: word.x - half, y: word.y - size * 0.7 },
+                    { x: word.x + half, y: word.y + size * 0.7 },
+                ];
+            });
+            return { frame: around(base, extents), names, values };
+        };
+        const first = wordsAt(sizeOf(base));
+        const size = sizeOf(first.frame);
+        const { frame: fits, names, values } = wordsAt(size);
+        const wide = sized && room ? room.width * sized.unit : 0;
+        const high = sized && room ? room.height * sized.unit : 0;
+        const placed = sized && fits.width <= wide + 1e-9 && fits.height <= high + 1e-9
+            ? {
+                height: high,
+                width: wide,
+                x: fits.x + (fits.width - wide) / 2,
+                y: fits.y + (fits.height - high) / 2,
+            }
+            : fits;
+        const bounds = this.drag.frame(placed, view.on([0, 0, 0]));
+        const pixel = pixelOf(bounds);
+        const font = Math.round(size * 10_000) / 10_000;
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
         part="drawing"
@@ -176,15 +421,21 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         @pointerleave=${this.onDrawingLeave}
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
-      >${this.noBox ? nothing : drawBox(view)}${depthOrder(view.projection, bars).map((bar) => svg `${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
-            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
+      >${bars.some((bar) => field.cells[bar.index]?.tone)
+            ? svg `<defs><filter height="160%" id="helix-spatial-bar-chart-glow" width="500%" x="-200%" y="-30%"><feGaussianBlur stdDeviation=${(pixel ?? 0.006) * 8}></feGaussianBlur></filter></defs>`
+            : nothing}${bare ? nothing : drawBox(view)}${floor.map((plate) => svg `<path d=${plate.d} part="floor"></path>`)}${names.map((name) => svg `<text data-tone=${name.tone ?? nothing} dominant-baseline="central" font-size=${font} part="tick" style="${name.tone ? `--chart-series: var(--spatial-bar-chart-tone-${name.tone})` : ''}" text-anchor="middle" x=${shortNumber(name.x)} y=${shortNumber(name.y)}>${name.text}</text>`)}${paintOrder(view.projection, bars).map((bar) => svg `${field.cells[bar.index]?.tone ? svg `<path d=${bar.drawn.outline} fill="none" filter="url(#helix-spatial-bar-chart-glow)" part="glow" style="--chart-series: var(--spatial-bar-chart-tone-${field.cells[bar.index]?.tone})"></path>` : nothing}${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${values.map((value) => {
+            const crown = bars.find((bar) => bar.index === value.index)?.drawn.crown ?? value.y + size;
+            return svg `<text data-tone=${value.tone ?? nothing} dominant-baseline="central" font-size=${font} part="value" text-anchor="middle" x=${shortNumber(value.x)} y=${shortNumber(crown - size)}>${value.text}</text>`;
+        })}${active
+            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.crown}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
     }
     renderBar(field, bar, at) {
-        const depth = field.cells[bar.index]?.depth ?? 0;
+        const one = field.cells[bar.index];
+        const series = ((one?.depth ?? 0) % SERIES) + 1;
         const short = (value) => Math.round(value * 1000) / 1000;
-        return svg `<g data-index=${bar.index} part="bar${bar.index === at ? ' bar-active' : ''}" style="--chart-series: var(--chart-series-${(depth % SERIES) + 1})">${bar.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-bar-chart-shade: ${short(face.darken)}"></path>`)}</g>`;
+        return svg `<g data-index=${bar.index} data-tone=${one?.tone ?? nothing} part="bar${bar.index === at ? ' bar-active' : ''}" style="--chart-series: ${one?.tone ? `var(--spatial-bar-chart-tone-${one.tone}, var(--chart-series-${series}))` : `var(--chart-series-${series})`}">${bar.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-bar-chart-shade: ${short(face.darken)}"></path>`)}</g>`;
     }
     renderLive(field, at) {
         const cell = field.cells[at];
@@ -232,6 +483,12 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "grow", void 0);
+__decorate([
+    property({ attribute: 'grow-again', reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "growAgain", void 0);
 __decorate([
     property({ attribute: 'no-box', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "noBox", void 0);
@@ -243,10 +500,16 @@ __decorate([
     words,
     property({ attribute: 'plot-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "plotLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "stacked", void 0);
 __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "summaryLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSpatialBarChart.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "rendered", void 0);
@@ -256,6 +519,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "place", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "room", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "growth", void 0);
 HelixHeadlessSpatialBarChart = __decorate([
     customElement('helix-headless-spatial-bar-chart')
 ], HelixHeadlessSpatialBarChart);

package/dist/splitter/root/splitter-root.js

@@ -20,6 +20,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     set collapsed(next) {
         const previous = this.collapsed;
         this.collapsedState = next ?? 'none';
+        this.reached = undefined;
         this.requestUpdate('collapsed', previous);
     }
     toPercent(value, fallback) {

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

@@ -60,6 +60,10 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *
  * A tab with `dismissible` can be closed: see `Tabs.Tab`.
  *
+ * **Panels are optional.** A set with none is a strip whose tabs stand for
+ * something the page shows elsewhere: the keys, the selection, `active` and
+ * `helix-activate` work the same, and no tab names a panel it controls.
+ *
  * The `indicator` part moves to the selected tab and carries its place and
  * size, so a mark of your own can be drawn there: style the part, or slot an
  * element into `indicator`, which sits inside the part and reads the same

package/dist/tabs/tab/tab.d.ts

@@ -34,6 +34,7 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
+ * @csspart label - The slot the tab's label is in.
  * @csspart tab - The tab itself.
  *
  * @cssstate selected - While it is the tab selected.