@fusion.dev/helix-headless 0.2.0 → 0.4.0

package/dist/slider/root/slider-root.js

@@ -7,140 +7,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * @summary A value chosen from a range by dragging.
- *
- * @description
- * A real `<input type="range">`, so the drag, the arrow keys, Home and End, the
- * page keys and the touch target are all the platform's. Every one of those is
- * a thing a hand-built slider gets wrong, and the last is the one nobody
- * notices: a native range has a hit area larger than its thumb, sized by the
- * platform for a finger.
- *
- * **The value is a string, like every other form control's.** A range submits
- * text and `MixinControllerValue` holds text, so the number is a reading of the
- * value rather than the value itself. `valueAsNumber` is there for anything
- * doing arithmetic on it.
- *
- * **Marks are drawn rather than left to `<datalist>`.** A datalist's ticks
- * cannot be styled at all, and Firefox does not render them for a range at all,
- * so the platform's version is a mark that looks like someone else's design
- * where it appears and no mark where it does not. Drawing them costs the
- * semantics nothing, because a mark is decoration: what a reader can actually
- * land on is `step`, which the input enforces whether or not anything is drawn.
- *
- * `markers` is a count rather than a flag tied to `step`. A flag reads well
- * until a slider from zero to a hundred stepping by one asks for a hundred and
- * one ticks, and then it is either noise or a silent refusal to draw. A number
- * is what the reader sees, so it cannot surprise anyone.
- *
- * **A range is two of them, not a hand-built one.** There is no native
- * two-thumb range, so two are stacked on one track and each thumb keeps its own
- * drag, its own arrow keys, its own Home and End and its own finger-sized hit
- * area. Rebuilding would throw away every argument this component is made of,
- * to gain a second handle.
- *
- * Crossing is stopped in the handler rather than by the bounds, and that is not
- * the obvious way round. Giving the lower input `max` of the upper reads well
- * and breaks the drawing: an input's thumb sits at a fraction of *its own*
- * range, so a lower thumb bounded at the upper one paints against a shorter
- * track and the two stop lining up. Both inputs span the whole range and the
- * values are clamped against each other on the way in.
- *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases Range, Range input
- * @documentation https://helix.fusion.dev/components/slider
- *
- * @event {Event} change - Relayed once the reader has let go.
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the value changes, and cancelable.
- * @event {Event} input - Announced once the value has moved.
- *
- * @csspart control - The range input.
- * @csspart feedback - What is wrong with it.
- * @csspart field - The row: the control and its readout.
- * @csspart hint - Help under the track, while nothing is wrong.
- * @csspart label - The question, over the track.
- * @csspart marker - One mark.
- * @csspart marker-label - The value a mark stands at, when `marker-labels` is set.
- * @csspart markers - The row of marks along the track.
- * @csspart output - The current value, shown beside it.
- *
- * @cssproperty --slider-fraction - The value as a fraction of the range, 0 to 1.
- * @cssproperty --slider-from - Where the filled span starts, as a percentage of the track.
- * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
- * @cssproperty --slider-to - Where the filled span ends, as a percentage of the track.
- */
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
-        /* A consumer's `aria-describedby` names ids in their own tree and the control
-           is in this shadow root, so the reference has to be carried down as an
-           element rather than copied as an id. See `AriaForwardController`: measured
-           in Chrome's own tree, the host held the description and the control the
-           reader is actually on was exposed without it. */
         this.aria = new AriaForwardController(this, {
             target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
         });
-        /** Typed or dragged, so every edit is announced. See `announcesInput`. */
         this.announcesInput = true;
-        /**
-         * Whether each mark says which value it stands at.
-         */
         this.markerLabels = false;
-        /**
-         * How many marks to draw along the track, evenly spaced, ends included.
-         *
-         * `0` or `1` draws none: one mark on a track says nothing about a range.
-         * They are decoration, so they are `aria-hidden`; what a reader can land on
-         * is `step`, which the input enforces regardless.
-         *
-         * **Each one is snapped to a step before it is placed.** Evenly spaced and
-         * on a step are two different things, and asking for four marks across a
-         * hundred in twenty-fives wants them at 0, 33.3, 66.7 and 100: two of those
-         * are places the thumb cannot go. A mark the thumb can never sit on is the
-         * one thing a mark must not be, so the spacing gives way rather than the
-         * step, and marks may come out unevenly spaced when the two disagree. That
-         * is the honest picture of the range being offered.
-         */
         this.markers = 0;
-        /**
-         * The largest value the reader can choose.
-         */
         this.max = 100;
-        /**
-         * The smallest value the reader can choose.
-         */
         this.min = 0;
-        /**
-         * Whether there are two thumbs and the value is a pair.
-         *
-         * The pair is one string, `"10,50"`, which is what a form submits and what
-         * `MixinControllerValue` already holds. `valueAsNumber` reads the lower of
-         * the two, since a range has no single number.
-         */
         this.range = false;
-        /**
-         * Whether the chosen value is shown beside the track.
-         */
         this.showValue = false;
         this.handleInput = (event) => {
-            // Stopped for the reason `Input.handleInput` gives: the inner control's own
-            // `input` is composed and would reach a consumer beside this element's.
             event.stopPropagation();
             const control = event.target;
             if (this.range) {
                 const [start, end] = this.bounds;
                 const moved = Number(control.value);
-                /* Clamped against the other thumb rather than bounded by it, for the
-                   reason the class says: bounding shortens the input's own range and the
-                   two thumbs stop sharing a track. */
                 const pair = control.dataset.thumb === 'start'
                     ? [Math.min(moved, end), end]
                     : [start, Math.max(moved, start)];
@@ -149,58 +34,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                 return;
             }
             const next = control.value;
-            /* Through the mixin, like the other native-backed controls. The thumb has
-               already moved either way, so wherever the answer does not follow it has
-               to be put back: a refusal and a consumer who owns the value are the same
-               situation seen from here. */
             this.requestValue(next);
             restoreValue(control, this.value);
         };
-        /** Relayed, because `change` does not cross a shadow boundary on its own. */
         this.handleChange = (event) => {
             event.stopPropagation();
             this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
         };
-        /** How far one press of an arrow key moves it. */
         this.step = 1;
     }
-    /**
-     * How many characters the readout has to be able to hold, widest case.
-     *
-     * **A number that grows a digit makes the track jump.** The output sizes to
-     * its text, so a range crossing 99 to 100 widens by a character and the row
-     * gives that width back out of the track: the handle moves while the value
-     * has not, which reads as the control drifting under the pointer. `3ch` was
-     * the floor and covers a plain value up to three digits, and a range says
-     * "35 to 100", which is ten.
-     *
-     * Widest rather than current, so the box never changes size at all. Measured
-     * off the bounds because that is what the readout can ever say: the longer of
-     * the two ends, twice, plus the four of " to " when both are shown. Negative
-     * bounds are covered by measuring the rendered string rather than the digits,
-     * since the sign is a character like any other.
-     *
-     * `tabular-nums` is on the part already and is the other half of this: equal
-     * digit widths keep a same-length number from shifting inside the box the
-     * same way a different-length one shifted the box.
-     */
     get reserve() {
         const widest = Math.max(String(this.min).length, String(this.max).length);
         return this.range ? widest * 2 + ' to '.length : widest;
     }
-    /**
-     * How many decimals the step is written to, so a label is not float noise.
-     *
-     * `min + index * step` on a fractional step prints `0.30000000000000004`,
-     * which is arithmetic being honest and a label being wrong. Rounding back to
-     * the step's own precision is what the reader asked for when they wrote it.
-     */
     get precision() {
         return String(this.step).split('.')[1]?.length ?? 0;
     }
-    /**
-     * The values the marks stand at, evenly spaced, each snapped to a step.
-     */
     get markerValues() {
         const span = this.max - this.min;
         if (this.markers < 2 || span <= 0) {
@@ -210,42 +59,19 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         const snapped = Array.from({ length: this.markers }, (_, at) => {
             const raw = this.min + (at / (this.markers - 1)) * span;
             const snappedAt = Math.min(this.max, Math.max(this.min, this.min + Math.round((raw - this.min) / step) * step));
-            // Back to the step's own precision, or a fractional step prints
-            // `0.30000000000000004` on a marker label.
             return Number(snappedAt.toFixed(this.precision));
         });
         return [...new Set(snapped)];
     }
-    /**
-     * The chosen value as a number, for anything doing arithmetic on it.
-     *
-     * @reference https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber HTMLInputElement.valueAsNumber
-     */
     get valueAsNumber() {
         const parsed = Number.parseFloat(this.value);
         return Number.isNaN(parsed) ? this.min : parsed;
     }
-    /** Focus is delegated to the control, so the host is never the target. */
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
     }; }
-    /**
-     * The pair, as numbers, in order.
-     *
-     * Falls back to the whole range rather than to zero, so a range slider given
-     * no value opens fully wide instead of pinned shut at its own minimum, which
-     * is what a filter with nothing filtered out looks like.
-     */
     get bounds() {
-        /* A lone number is not a range, so it is not read as one.
-         *
-         * An untouched range slider does not hold an empty string: the native input
-         * reports its own midpoint and the mixin takes it, so `value` came back as
-         * "50" on a slider from 10 to 90 and reading that as the lower thumb put a
-         * filter half shut before anyone touched it. Only a pair is a pair, and
-         * anything else opens fully wide, which is what "nothing filtered out"
-         * looks like. */
         const parts = this.value.split(',');
         const from = Number.parseFloat(parts[0] ?? '');
         const to = Number.parseFloat(parts[1] ?? '');
@@ -254,7 +80,6 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return [Math.min(from, to), Math.max(from, to)];
     }
-    /** Where one value sits along the track, as a fraction of it. */
     along(at) {
         const span = this.max - this.min;
         if (span === 0) {
@@ -262,30 +87,10 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
-    /** Reports the value. */
     sync() {
         this.internals.setFormValue(this.value);
         this.refreshFeedback();
     }
-    /**
-     * How far along the track the thumb sits, as a fraction.
-     *
-     * Arithmetic rather than a measurement, because the browser already knows
-     * where it drew the handle and measuring it would be a guess at that.
-     *
-     * **Sanitized here, never read back off the control.** Asking the input for
-     * its value reads well, a range clamping and snapping whatever it is given,
-     * and the timing defeats it: `fraction` is evaluated inside `render()` and the
-     * `style` binding carrying it is committed *before* the `.value` binding below
-     * it, so it reads the value this very render is about to replace. The fill
-     * ends up a render behind the thumb, and on the first pass it reads the seeded
-     * midpoint and stays there: stable and off by half a track, which reads as a
-     * drawing bug rather than a timing one.
-     *
-     * So the same two operations a range performs are done here: snap to the step
-     * from `min`, then clamp to the bounds. Nothing is read from the tree, so
-     * there is no order for this to be on the wrong side of.
-     */
     get fraction() {
         const span = this.max - this.min;
         if (span === 0) {
@@ -293,15 +98,6 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return this.along(this.snapped(this.valueAsNumber));
     }
-    /**
-     * A value snapped to the step, counted from `min` the way a range counts it.
-     *
-     * `min` rather than zero is the whole of it: a slider from `0.2` with a step
-     * of `0.05` can land on `0.2`, `0.25` and so on, and snapping against zero
-     * would offer `0.2` and `0.25` too but round the ones between to the wrong
-     * side. `precision` is what keeps `0.30000000000000004` off the track, the
-     * same guard the marker labels already use.
-     */
     snapped(at) {
         if (!(this.step > 0)) {
             return at;
@@ -311,16 +107,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        /* A range with no value starts in the middle, which is the platform's own
-           rule and is what the control will show whether or not this agrees. Seeded
-           here so the value the form would submit matches the thumb from the first
-           render rather than from the first drag. */
         if (!this.hasUpdated && this.value === '') {
-            /* Onto `defaultValue`, never onto `value`. `defaultValue` is where the
-               markup's intent lives and where a reset returns to, and "no value given"
-               is exactly a fact about the markup. Writing `value` would record the
-               midpoint as something the reader chose, so a form reset would return to
-               it rather than clearing it. */
             this.defaultValue = String(this.min + (this.max - this.min) / 2);
         }
     }
@@ -329,33 +116,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.sync();
     }
     render() {
-        /* The range's bounds are written before its value below, and that order is
-           the whole of this element's correctness on a wide scale. Lit commits
-           bindings in template order, and a range clamps whatever is assigned to the
-           bounds it holds at that moment: with the value first, a slider from 0 to
-           360 given 225 took the default max of 100, clamped to 100, and drew its
-           handle at 100/360.
-    
-           The symptom is the fill and the handle disagreeing, because they are
-           computed from different things: the fill is arithmetic on this element's
-           property, and the handle is the platform's reading of the input's own
-           clamped value. It appears on any slider with a max above 100, and the
-           fill being right is what makes it read as a drawing bug rather than a
-           value one. */
         const [start, end] = this.bounds;
-        /* One input per thumb, each spanning the whole range so both read against
-           the same track. The lower one paints the fill and the upper one's track
-           is transparent, because two stacked tracks would paint the ramp twice. */
-        /* **The lower thumb answers to `control`, and it has to answer to
-           something.** `MixinField.renderLabel` writes `<label for="control">` for
-           every field in the library, so a range branch that does not render that id
-           ships a label pointing at nothing: pressing the words focuses no thumb and
-           the `<output for>` beside it names a missing element too. Valid markup
-           that reaches nothing and says nothing.
-    
-           The lower one, because a label forwards a press to the first control it
-           names and the reader expects the start of the range. The upper takes
-           `control-end`, which is what the readout lists alongside it. */
         const thumb = (which, at) => html `<input
         part="control"
         id=${which === 'start' ? 'control' : 'control-end'}
@@ -372,25 +133,6 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         @input=${this.handleInput}
         @change=${this.handleChange}
       />`;
-        /* `data-markers` mirrors "there are marks" for the stylesheet.
-         *
-         * `markers` does not reflect, so a marker layout hung off `:host([markers])`
-         * draws nothing for `slider.markers = 5`: only the attribute written in the
-         * markup works, and the property that is the documented API silently does
-         * not.
-         *
-         * Reflecting the count instead would put `markers="0"` on every slider, an
-         * attribute the server's markup does not have and one that selector would
-         * match, drawing the layout for no marks. So the boolean fact is mirrored
-         * to a `data-` name, which is the rule this library already follows for
-         * state: the stylesheet wants to know whether there are marks, not how
-         * many. How many is what `markerValues` answers, and `< 2` is where it
-         * already draws the line.
-         *
-         * A `/*` and written here, because it describes this binding and not a
-         * member. Nothing catches an unclosed block, only one sitting on another,
-         * so a `/**` that swallows the member below it ships as that member's
-         * description. */
         return html `${this.renderLabel()}
     <div
       part="field"
@@ -426,15 +168,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
-      ${
-        /* Hidden from the accessibility tree, like the markers above it.
-         *
-         * A bare `<output>` maps to `role="status"` with an implicit polite
-         * live region, so every intermediate value during a drag was announced
-         * on top of the range's own value announcement: a reader dragging from
-         * 10 to 60 heard both twice, fifty times. It repeats what the control
-         * already reports, which is the definition of decoration. */
-        this.showValue
+      ${this.showValue
             ? html `<output
               part="output"
               for=${this.range ? 'control control-end' : 'control'}

package/dist/sparkline/root/sparkline-root.js

@@ -7,99 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, extent, HelixElement, linear, linePath, SourceController, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * The drawing's own coordinates, which the `viewBox` maps onto whatever box CSS
- * gives it. Round numbers so a `d` attribute is readable in the inspector.
- */
 const BOX = { height: 32, width: 100 };
-/** Splits on whitespace or commas, and keeps only what is a number. */
 const readValues = (input) => input
     .split(/[\s,]+/)
     .filter((one) => one !== '')
     .map(Number)
     .filter((one) => Number.isFinite(one));
-/**
- * @summary A line with no axes, for the shape of a series beside the number it belongs to.
- *
- * @description
- * The one chart here that takes its numbers from an attribute, and the reversal
- * is deliberate. Every other chart reads a table because a reader might want to
- * interrogate it; nobody interrogates the squiggle next to a figure. A
- * fourteen-row table behind a bare trend line is fourteen dates read aloud in
- * place of the one sentence that carries the meaning, so `values` is the list
- * and `label` is the sentence.
- *
- * That is the library's own rule rather than a second data channel: a content
- * property is its slot's fallback, which is why `Tooltip` takes `content` and
- * `Avatar` takes `name`. `for` stays for the sparkline that genuinely has a
- * table behind it, and it wins where both are given.
- *
- * **No label means decorative, and that is a choice rather than an oversight.**
- * A sparkline beside a stat that already says "Sessions, 1,102" has nothing of
- * its own to announce, and an unnamed `role="img"` announces "graphic" and
- * stops. So an unlabeled sparkline is `aria-hidden`, and a labeled one is an
- * image named by its sentence.
- *
- * It goes *beside* a `Stat` rather than inside one: a change beside a figure is
- * a second fact, which is what `Stat`'s own spec says. `Trend` composes the same
- * way.
- *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
- *
- * @since 0.1.0
- * @status experimental
- * @category charts
- * @aliases Micro Chart, Trend Line, Inline Chart
- * @documentation https://helix.fusion.dev/components/sparkline
- *
- * @csspart area - The region between the line and the bottom of its range.
- * @csspart bar - One column, under `plot="bar"`.
- * @csspart line - The path itself.
- * @csspart svg - The drawing.
- * @csspart terminus - The mark on the last value.
- * @csspart wash-end - The far stop of the area's gradient.
- * @csspart wash-start - The stop of the area's gradient that meets the line.
- *
- * @cssproperty --chart-terminus-x - Where the last point sits horizontally, as a percentage.
- * @cssproperty --chart-terminus-y - Where the last point sits vertically, as a percentage.
- */
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * The id of a table to read instead, when there is one behind the line.
-         *
-         * The first column of numbers is the series drawn. This wins over `values`,
-         * because a table is the readable representation and a list of numbers in an
-         * attribute is not.
-         *
-         * **In React this arrives as a property and not as an attribute**, the way
-         * `Tooltip.for` does, so it does not reflect and nothing styles on it.
-         */
         this.for = '';
-        /**
-         * What the line says, in a sentence.
-         *
-         * "Sessions rose from 1,240 to 1,318 and fell to 1,102 over fourteen days" is
-         * the accessible representation of a sparkline, and a list of the fourteen
-         * numbers is not. Absent, the drawing is hidden from a screen reader rather
-         * than announced without a name.
-         */
         this.label = '';
-        /**
-         * The numbers, separated by whitespace or by commas.
-         *
-         * Both separators, so `values="1240 1318"` and an array assigned to the
-         * property both work: assigning `[1240, 1318]` stringifies to `1240,1318`,
-         * and a string is what survives React's hydration where an array property
-         * does not.
-         */
         this.values = '';
-        /* One controller rather than the resolve-and-watch each chart had written
-           out for itself. */
         this.source = new SourceController(this);
     }
     willUpdate(changed) {
@@ -107,7 +26,6 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             this.source.watch();
         }
     }
-    /** The series to draw: the table if there is one, the attribute otherwise. */
     #points() {
         const series = this.source.series;
         return series.length > 0
@@ -116,75 +34,26 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     }
     render() {
         const points = this.#points();
-        /* Two points minimum, because one is not a trend and zero is not a line.
-           An `<svg>` given a `d` of `M NaN,NaN` draws nothing and reports nothing,
-           so the empty case is stated here rather than left to look like a bug. */
         const x = linear([0, Math.max(points.length - 1, 1)], [0, BOX.width]);
-        /* **A bar measures from zero and a line measures from its own range**, and
-           that is a correctness difference rather than a preference. A bar's
-           *length* is the value, so a baseline anywhere but zero makes the lengths
-           proportional to nothing. Drawn over the data's extent, the smallest
-           reading lands exactly on the floor and its column has no height at all:
-           seven readings between 1,102 and 1,408 come out as six columns and a gap,
-           which looks like missing data and is really a scale saying the minimum is
-           nothing.
-    
-           The zero is included at both ends, so a series that goes negative gets a
-           baseline inside the box and its columns hang below it. */
         const [low, high] = extent(points.length > 0 ? points : [0]);
         const y = this.plot === 'bar'
             ? linear([Math.min(0, low), Math.max(0, high)], [BOX.height, 0])
             : linear([low, high], [BOX.height, 0]);
         const coordinates = points.map((value, index) => [x(index), y(value)]);
         const path = this.plot === 'bar' ? '' : linePath(coordinates, this.curve ?? 'smooth');
-        /* The same line closed down to the floor of its own range, which is where
-           the wash goes. Its own path rather than a fill on the line, because a
-           closed path strokes its closing edges too: filling the line itself would
-           draw a rule along the bottom of the box and up both sides.
-    
-           The floor is the smallest reading and not a true zero, because the scale
-           runs over the data's own extent. */
-        /* Asked negatively, because absent *is* an area here and the class doc
-           above says why. This is the one property in the family where the resting
-           arrangement is not the plainest thing, so the test has to answer true for
-           the value nobody set, and `=== 'area'` would answer false. */
         const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
             ? `${path}L${BOX.width},${BOX.height}L0,${BOX.height}Z`
             : '';
-        /* One column per reading, inset so neighbors do not touch.
-         *
-         * A rect rather than a thick stroked line, because a bar has two ends and a
-         * stroke has a cap: `stroke-linecap` would round or square both ends of
-         * every column together, and the floor end should always be flat.
-         *
-         * The width is a share of the slot rather than a fixed number, so a series
-         * of seven and a series of forty both fill the box. Fourteen percent of the
-         * gap is the smallest separation that still reads as separate columns at
-         * the sizes a sparkline is drawn at, and it comes off the slot rather than
-         * off the bar so a two-reading series does not get two enormous slabs. */
         const slot = BOX.width / Math.max(points.length, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
             ? points.map((value, index) => ({
-                /* From the baseline to the reading, whichever of the two is
-                   higher up the box. A reading of exactly zero is a column of no
-                   height, which paints nothing, and that is the honest drawing of
-                   nothing rather than a hairline implying something. */
                 height: Math.abs(floor - y(value)),
                 width: slot * 0.72,
                 x: index * slot + slot * 0.14,
                 y: Math.min(floor, y(value)),
             }))
             : [];
-        /* Where the series ended, as percentages of the box.
-         *
-         * Read twice, by the mark and by the drawing, which is why it is a local
-         * rather than two literals. The mark sits on it; the drawing has the same
-         * disc taken out of it, so a `ring` is a hole rather than a lid. A custom
-         * property would be the tidier channel and there is nowhere to put one:
-         * they inherit down and never sideways, the two elements are siblings, and
-         * the host cannot be styled from a template without a wrapper element that
-         * carries nothing else. */
         const end = points.length < 2
             ? undefined
             : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / BOX.height) * 100}%`;
@@ -197,33 +66,13 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         style=${end ?? nothing}
         viewBox="0 0 ${BOX.width} ${BOX.height}"
       >
-        ${
-        /* The ramp the area is poured with, drawn here because a gradient is
-           an element and elements are this tier's business, and colored
-           above because a color is not. Measured rather than assumed: a
-           fragment id inside a shadow root resolves within that root, so two
-           sparklines on a page carrying the same id stay independent, and CSS
-           `fill: url(#...)` reaches it as readily as the attribute does. */
-        svg `<defs>
+        ${svg `<defs>
             <linearGradient id="sparkline-wash" x1="0" x2="0" y1="0" y2="1">
               <stop offset="0" part="wash-start" />
               <stop offset="1" part="wash-end" />
             </linearGradient>
           </defs>`}
-        ${
-        /* `svg` and not `html`, because a nested template is parsed on its
-           own and this one has no `<svg>` around it to be parsed inside.
-           `<path>` read as standalone HTML becomes an unknown element in the
-           XHTML namespace: it takes the part, takes the `d`, inherits the
-           stroke, and draws nothing at all, because only an element in the
-           SVG namespace has geometry. Measured by `getBBox` throwing, which
-           is the shortest way to ask an element whether it is really SVG.
-
-           Every spec written against this passed while it drew nothing. They
-           asserted the `d` attribute, the part, the ARIA and the computed
-           `vector-effect`, and all of those are true of an HTML element
-           wearing the same name. */
-        path === '' ? nothing : svg `<path d=${path} part="line" />`}
+        ${path === '' ? nothing : svg `<path d=${path} part="line" />`}
         ${area === '' ? nothing : svg `<path d=${area} part="area" />`}
         ${bars.map((bar) => svg `<rect
               height=${bar.height}
@@ -233,17 +82,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
               y=${bar.y}
             />`)}
       </svg>
-      ${
-        /* The mark on the last value, as an element beside the drawing rather
-           than a `<circle>` inside it. `preserveAspectRatio="none"` is what lets
-           the line fill any box, and it distorts everything in that coordinate
-           space with it: a circle in there is an ellipse whose squash depends on
-           how wide the consumer made it. Percentages of the host are the same
-           two numbers in a space nothing stretches. */
-        /* A line ends somewhere and a row of columns does not, so a bar plot
-           draws no terminus: the last column already is the last reading, and a
-           dot on top of it would be a second mark saying the same thing. */
-        points.length < 2 || this.plot === 'bar'
+      ${points.length < 2 || this.plot === 'bar'
             ? nothing
             : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}`;
     }