@fusion.dev/helix-headless 0.1.0 → 0.3.0

package/dist/kbd/root/kbd-root.js

@@ -7,12 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, HelixShortcutEvent } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * Whether a node is something a reader types into.
- *
- * The input types are the ones that take text. A checkbox and a range are
- * `<input>` and are not typing, so a chord still reaches them.
- */
 const typing = (node) => {
     if (node instanceof HTMLTextAreaElement) {
         return true;
@@ -22,7 +16,6 @@ const typing = (node) => {
     }
     return node instanceof HTMLInputElement && !UNTYPED.has(node.type);
 };
-/** `<input>` types that hold no text, so a bare chord is not competing with one. */
 const UNTYPED = new Set([
     'button',
     'checkbox',
@@ -35,14 +28,6 @@ const UNTYPED = new Set([
     'reset',
     'submit',
 ]);
-/**
- * How each name in a chord is drawn, per platform.
- *
- * Apple keyboards label their modifiers with glyphs and print no separator
- * between them, so `⌘K` is the whole of it. Everywhere else the words are the
- * label and the plus is part of the convention rather than prose, which is why
- * it is the one separator this component supplies.
- */
 const APPLE = {
     alt: '⌥',
     backspace: '⌫',
@@ -81,109 +66,22 @@ const ELSEWHERE = {
     tab: 'Tab',
     up: '↑',
 };
-/** Whether the keyboard in front of the reader labels its modifiers with glyphs. */
 const onApple = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test(navigator.userAgent);
-/**
- * @summary A keyboard key or chord, set inline with text.
- *
- * @description
- * Renders a real `<kbd>`, so the passage still means "press this" to anything
- * reading the markup rather than only to a reader looking at it.
- *
- * **One key per element, with `keys` as the stated exception.** A *sequence* is
- * several of these with the separator written between them as ordinary text,
- * because that separator is prose: it is "then" in a sequence and "plus" in a
- * simultaneous press, and a component that inserted one would have to guess
- * which. `keys` cannot be guessing, since a chord written `mod+k` has said
- * which it is.
- *
- * **`keys` exists because the glyphs were being typed by hand and were wrong.**
- * A literal `⌘K` in a template tells a reader on Windows to press a key their
- * keyboard does not have, and nothing catches it, a string being a string.
- * Given `mod` this renders `⌘K` on Apple and `Ctrl+K` everywhere else.
- *
- * **`within` is what binds it, and it is absent by default.** Without it this
- * draws a key and listens for nothing, which is what every existing use of this
- * component wants. The two values are the two honest lifetimes:
- *
- * - `control` listens within the element's own parent, which is the case this
- *   is mostly for: a hint sitting inside the control it belongs to, where the
- *   shortcut should work while that control has focus and stop existing when
- *   the control does.
- * - `document` listens on the document, for a chord that works from anywhere.
- *
- * **A hidden `kbd` is a dead shortcut, and that is the point rather than a
- * trap.** Binding here ties the key to its own advertisement, so a hint that is
- * not rendered is a shortcut that is not offered. A chord that must outlive its
- * label is a chord whose owner is not a label: give it to whatever owns the
- * action and let this element only describe it.
- *
- * Nothing binds until this upgrades, so a shortcut is not available in the
- * moments before hydration.
- *
- * @since 0.1.0
- * @status stable
- * @category typography
- * @aliases Key, Shortcut, Hotkey
- * @documentation https://helix.fusion.dev/components/kbd
- *
- * @slot - The key's label, where `keys` is not set.
- *
- * @event {HelixShortcutEvent} helix-shortcut - Fired when the chord is pressed, and cancelable.
- *
- * @csspart kbd - The key.
- */
 let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * The chord, written plainly: `mod+k`, `shift+?`, `/`.
-         *
-         * `mod` is the platform's own command modifier, which is the reason to write
-         * a chord here rather than a glyph: it is the one token whose right answer
-         * differs per reader.
-         */
         this.keys = '';
         this.handleKeydown = (event) => {
             const press = event;
-            /* Mid-composition is not a chord. An IME sends keystrokes that belong to
-               the text being composed, and taking one is how a shortcut eats a
-               character the reader was trying to type. */
             if (press.isComposing) {
                 return;
             }
-            /* Neither is a bare character typed into a field, which is the same fault
-               the IME guard above already refuses: the reader meant the key to reach
-               what they are writing in.
-        
-               Only a bare printable chord. `mod+k` is a shortcut a reader expects to
-               work from inside a search field, and `escape` is how they leave it, so a
-               guard over every chord would break the two conventions this is for. It is
-               `/` and `?` that are ambiguous, being both the most conventional
-               shortcuts on the web and characters somebody types.
-        
-               `composedPath()[0]` rather than `target`, which retargets to the host at
-               document level and would need a list of every tag name that holds a field.
-               The path's first entry is the real one, through open shadow roots and
-               through `delegatesFocus`.
-        
-               **`document` only, because `control` has already answered the question.**
-               That binding listens on `this.parentElement`, so it fires only with focus
-               inside the control the badge sits in, and the guard would make a bare
-               printable chord unreachable there by construction: the two are mutually
-               exclusive. `.examples/events.html` is exactly that shape, a `keys="/"`
-               slotted into a `helix-input` telling the reader to put the cursor in the
-               field and press slash, and it would have shipped to the docs site doing
-               nothing. What is ambiguous is `/` competing with every field on the page,
-               which is the `document` case and the only one this refuses. */
             if (this.within === 'document' && this.printable && typing(press.composedPath()[0])) {
                 return;
             }
             if (!this.matches_(press)) {
                 return;
             }
-            /* Announced before it is consumed, so a consumer can refuse it: the key
-               goes on to whatever would have had it wherever this is prevented. */
             const shortcut = new HelixShortcutEvent({ keys: this.keys });
             this.dispatchEvent(shortcut);
             if (!shortcut.defaultPrevented) {
@@ -201,15 +99,11 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        /* The target changes with `within` and the chord changes with `keys`, and
-           the second matters as much as the first: a listener holding the old chord
-           answers to a key the element no longer advertises. */
         if (changed.has('within') || changed.has('keys')) {
             this.deafen();
             this.listen();
         }
     }
-    /** The chord as this reader's keyboard labels it. */
     get label() {
         const names = onApple() ? APPLE : ELSEWHERE;
         const parts = this.keys
@@ -234,13 +128,6 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.listening?.removeEventListener('keydown', this.handleKeydown);
         this.listening = undefined;
     }
-    /**
-     * Whether this chord is one bare character, and so indistinguishable from
-     * typing.
-     *
-     * A single part means no modifier, and one code point means a character
-     * rather than a name: `/` and `?` are printable, `escape` and `enter` are not.
-     */
     get printable() {
         const parts = this.keys
             .split('+')
@@ -248,7 +135,6 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
             .filter((part) => part !== '');
         return parts.length === 1 && [...(parts[0] ?? '')].length === 1;
     }
-    /** Whether a press is this chord, modifiers and all. */
     matches_(press) {
         const parts = this.keys
             .split('+')
@@ -260,9 +146,6 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         const wanted = parts[parts.length - 1] ?? '';
         const modifiers = new Set(parts.slice(0, -1));
         const mod = onApple() ? press.metaKey : press.ctrlKey;
-        /* Every modifier is checked in both directions, so `mod+k` is not answered
-           by `shift+mod+k`: a chord a reader did not press is a chord that should
-           go to whatever did want it. */
         return (press.key.toLowerCase() === wanted &&
             (modifiers.has('mod') ? mod : true) &&
             (modifiers.has('shift') ? press.shiftKey : !press.shiftKey) &&

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

@@ -7,67 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, SourceController } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-/** How many colors the series palette has, and so where it starts over. */
 const PALETTE = 24;
-/**
- * @summary The names a chart draws, each beside the color it is drawn in.
- *
- * @description
- * A legend is a list, so it is a list: not part of a chart, and shared by
- * whichever of them needs one. It takes its entries from the same table the
- * chart reads, through `for`, so the two cannot disagree about how many series
- * there are or what they are called.
- *
- * `entries` picks which way to read that table, and the two ways are the two
- * shapes a chart comes in. `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, named by its row header, which is a donut: its slices are the rows,
- * and it has no axis to write their names along.
- *
- * **The table is resolved on the client and there is no server pass.** `for` is
- * an id and resolving it wants a document, which the server render does not
- * have, so a legend ships empty and fills in on hydration. The table itself is
- * ordinary markup and is served whole, so nothing is missing from the page
- * before then, only from this list.
- *
- * The table is watched, because a legend that goes stale when its data changes
- * is a legend that has to be told, and nothing else in the page would know to
- * tell it.
- *
- * **Not hidden from a screen reader, though the mapping it draws is a color
- * one.** The argument for hiding it is real: the colors mean nothing to a
- * reader who cannot see them, and the names are already in the table. It stays
- * because the cost of being wrong runs one way. A duplicated list of three
- * words is noise; a consumer who took the table out of the accessibility tree
- * and then found the legend hidden too has a chart nobody can read, and neither
- * decision announces itself.
- *
- * @since 0.1.0
- * @status experimental
- * @category charts
- * @aliases Key, Series Key
- * @documentation https://helix.fusion.dev/components/legend
- *
- * @csspart entry - One name and its swatch.
- * @csspart list - The list itself.
- * @csspart name - One series name.
- * @csspart swatch - The color a series is drawn in.
- */
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * The id of the table to take the names from.
-         *
-         * Resolved through `getRootNode()`, so a legend inside another component's
-         * shadow root names a table in that root rather than in the document.
-         *
-         * **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 = '';
-        /* One controller rather than the resolve-and-watch each chart would write
-           out for itself, which drifts into two names for the same lookup. */
         this.source = new SourceController(this);
     }
     willUpdate(changed) {
@@ -75,15 +19,6 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
             this.source.watch();
         }
     }
-    /**
-     * The names, in the order the chart will draw them.
-     *
-     * `protected` rather than private because the styled tier has to match a
-     * per-series treatment against them, the way `BarChart` matches `outlined` and
-     * `subtle` against the headings its table gives. A legend keys a chart, so the
-     * two answer the same question about the same series, and the tier that paints
-     * cannot do that without knowing which entry is which.
-     */
     names() {
         const series = this.source.series;
         return this.entries === 'categories'
@@ -91,14 +26,6 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
             : series.map((one) => one.name);
     }
     render() {
-        /* The index rather than the color, because a color is a token and the
-           headless tier holds none. The styled tier maps one to the other, and it
-           starts over after twenty-four.
-         *
-         * The palette is eight hues in three tones, so a legend of nine repeats the
-         * first hue in a brighter tone rather than repeating a color outright. It
-         * is still a hue collision and a chart with nine series has a worse problem
-         * than the palette does; twenty-four is where it stops being able to help. */
         return html `<ul part="list" role="list">
       ${this.names().map((name, index) => html `<li
           data-series=${(index % PALETTE) + 1}

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

@@ -8,110 +8,28 @@ import { customElement, drawTooltip, extent, HelixElement, linear, linePath, Mix
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-/** The drawing's own coordinates. */
 const WIDTH = 100;
 const HEIGHT = 100;
-/**
- * @summary A series over time as a line, read from a table.
- *
- * @description
- * The chart for a shape rather than for a quantity, which is what decides the
- * one thing a bar chart is not allowed to do.
- *
- * **It measures from its own range and not from zero, deliberately.** `BarChart`
- * refuses that switch because a bar's length *is* its value, so a baseline
- * anywhere else makes the lengths proportional to nothing. A line claims no
- * such thing: it says where the readings went, and forcing zero into the range
- * of a series that moves between 980 and 1020 flattens the entire shape into a
- * rule across the top of the box. The two rules are opposite because the two
- * charts answer opposite questions, and `zero` is here for the case where the
- * distance from nothing is the point.
- *
- * **One scale across every series**, the same as the bar chart, because two
- * series drawn to different scales are two charts sharing a picture.
- *
- * **The labels are HTML beside the drawing rather than `<text>` inside it**, for
- * the reason `BarChart` records: an `<svg>` that fills its box scales its type
- * with everything else, the same `font-size` arriving at 10px in a narrow chart
- * and 43px in a wide one, and there is no non-scaling-font to answer it the way
- * `vector-effect` answers strokes.
- *
- * The table is the accessible representation and this drawing is `aria-hidden`.
- * A reader who wants the numbers gets the numbers, not a described picture.
- *
- * @since 0.1.0
- * @status experimental
- * @category charts
- * @aliases Time Series, Trend Chart, Multi-line Chart
- * @documentation https://helix.fusion.dev/components/line-chart
- *
- * @csspart area - The wash under one line, where `area` is set.
- * @csspart band - The slot the pointer is resting in.
- * @csspart baseline - The rule at zero, where zero is inside the range.
- * @csspart gridline - One rule across the plot, under `gridlines`.
- * @csspart guide - A rule down the reading a pointer is resting on.
- * @csspart label - One reading's name.
- * @csspart labels - The row of reading names.
- * @csspart line - One series.
- * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart plot - The drawing.
- * @csspart svg - The drawing surface the lines and areas sit on.
- * @csspart terminus - The mark on one series' last reading.
- * @csspart tooltip - The bubble, forwarded from `Tooltip`.
- * @csspart tooltip-anchor - The `Tooltip` element itself.
- * @csspart tooltip-cell - One column's name and value inside the tooltip.
- * @csspart tooltip-label - The reading's own name inside the tooltip.
- * @csspart tooltip-name - A column's name inside the tooltip.
- * @csspart tooltip-value - A column's value inside the tooltip.
- */
 let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
-        /**
-         * Whether a wash is drawn under each line.
-         *
-         * Absent is lines alone, which is what suits more than one series: washes
-         * stack and the lower ones are read through the upper. One series over a
-         * ground it should feel like a quantity against is the case for this.
-         */
         this.area = false;
-        /**
-         * Whether zero is forced into the range.
-         *
-         * Absent measures from the data's own extent, which is what a line is for.
-         * Set it where the distance from nothing is the point rather than the shape,
-         * and accept that a series which never approaches zero becomes a flat rule
-         * near the top of the box.
-         */
         this.zero = false;
     }
-    /** Whether the levels are ruled, which is every value but `category`. */
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
-    /** Whether each reading is ruled, which only two values ask for. */
     get rulesCategory() {
         return this.gridlines === 'both' || this.gridlines === 'category';
     }
-    /** The domain every series is drawn against, which the tooltip also needs. */
     range(series) {
         const values = series.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(values.length > 0 ? values : [0]);
         return this.zero ? [Math.min(0, low), Math.max(0, high)] : [low, high];
     }
-    /**
-     * Where each series ends, as percentages of the drawing's own box.
-     *
-     * Percentages rather than user units, for the reason the mark is a `<span>`
-     * rather than a `<circle>`: `preserveAspectRatio="none"` stretches the
-     * coordinate space, so a length in there means two different things depending
-     * on how wide the consumer made the chart. The host's box stretches nothing.
-     */
     ends(series, x, y) {
         return series.flatMap((one, depth) => {
             const last = one.points.at(-1);
-            /* A single reading is a point rather than a line, and a mark on the end of
-               something with no length is a mark on nothing. */
             if (!last || one.points.length < 2) {
                 return [];
             }
@@ -132,40 +50,13 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         }
         const domain = this.range(series);
         const y = linear(domain, [HEIGHT, 0]);
-        /* **A reading sits in the middle of its own slot, not at the edge of the
-           box**, which is what makes the names underneath line up with it.
-         *
-         * Spanning 0 to 100 is the obvious version and is wrong. The labels are a
-         * grid of equal columns, the same row the bar chart uses, so each name is
-         * centered in its share of the width while the readings sit at the
-         * gridlines between those shares: measured, the first name centered at a
-         * twelfth of the width with its point at zero. Every label is off by half
-         * a slot and the error grows toward the middle.
-         *
-         * Insetting by half a slot also means a line chart and a bar chart drawn
-         * from the same table stack, which is the arrangement anybody comparing a
-         * total to its parts wants. The cost is that the line stops short of both
-         * edges, and that is the smaller thing to give up. */
         const slot = WIDTH / readings.length;
         const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, WIDTH - slot / 2]);
         return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}`;
     }
-    /**
-     * The lines themselves, behind a seam the styled tier can move.
-     *
-     * `aria-hidden`, because the table it was read from is the readable version
-     * and a screen reader hearing both hears the same numbers twice.
-     */
     renderPlot(series, x, y, domain) {
-        /* Drawn only where zero is inside the range. A rule at the foot of a chart
-           whose lowest reading is 980 is not the zero line, it is the bottom of the
-           box wearing the zero line's clothes, and a reader takes it for one. */
         const floor = domain[0] <= 0 && domain[1] >= 0 ? y(0) : undefined;
         const ends = this.terminus === 'none' ? [] : this.ends(series, x, y);
-        /* Built here rather than in the sheet, because a stylesheet cannot count
-           series and a mask needs one layer per hole. Each layer is transparent
-           inside its own ring and opaque everywhere else, so intersecting them
-           removes the union of the holes and nothing besides. */
         const holes = this.terminus === 'ring' && ends.length > 0
             ? ends
                 .map((end) => `radial-gradient(circle at ${end.x}% ${end.y}%, #0000 calc(var(--_chart-terminus-inner) - 0.5px), #000 var(--_chart-terminus-inner))`)
@@ -194,22 +85,10 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       ${this.renderTooltip()}
     </div>`;
     }
-    /**
-     * The grid, behind everything, or nothing at all.
-     *
-     * Drawn first so a series is never cut by a rule, and before the baseline so
-     * that where the two coincide the baseline wins: zero is a fact about the
-     * data and a gridline is a ruler, and the reader should see the fact.
-     */
     renderGridlines(x, y, domain, count) {
         if (this.gridlines === undefined) {
             return nothing;
         }
-        /* Through each reading rather than between them. A rule on the boundary
-           divides two catchments, which is a fact about the pointer; a rule on the
-           reading is the line a reader traces down to the label, which is what a
-           category grid is for. The readings sit at slot centers, so the two are
-           half a slot apart and only one of them lands under a point. */
         const down = this.rulesCategory
             ? Array.from({ length: count }, (_, index) => svg `<line part="gridline" x1=${x(index)} x2=${x(index)} y1="0" y2=${HEIGHT} />`)
             : [];
@@ -218,19 +97,6 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             : [];
         return svg `${down}${across}`;
     }
-    /**
-     * The slot the pointer is resting in, drawn behind the drawing.
-     *
-     * A band and not a second rule. The guide says exactly where the reading is
-     * and the band says which share of the width belongs to it, which is what a
-     * reader is actually pointing at: the catchment is a slot wide, so a pointer
-     * a few pixels off the line is still asking about that reading, and without
-     * the band nothing on screen says so.
-     *
-     * The same slot arithmetic the pointer controller resolves with, so the lit
-     * region and the region that answers are the same region by construction
-     * rather than by two files agreeing.
-     */
     renderBand(count) {
         const at = this.pointer.at;
         if (at < 0 || count === 0) {
@@ -239,17 +105,6 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const slot = WIDTH / count;
         return svg `<rect height=${HEIGHT} part="band" width=${slot} x=${at * slot} y="0" />`;
     }
-    /**
-     * A rule down the reading the tooltip is about.
-     *
-     * Without it the tooltip is a box of numbers floating over a drawing, and a
-     * reader has to match its heading against the row of names to find out which
-     * column it means. The rule is the whole of what connects the two, and it
-     * matters most on a line, where there is no marker under the pointer to
-     * stand in for one.
-     *
-     * Drawn before the series so a line is never cut by it.
-     */
     renderGuide(x) {
         const at = this.pointer.at;
         if (at < 0) {
@@ -257,12 +112,6 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         }
         return svg `<line part="guide" x1=${x(at)} x2=${x(at)} y1="0" y2=${HEIGHT} />`;
     }
-    /**
-     * The marks, as elements beside the drawing rather than shapes inside it.
-     *
-     * A seam of its own, so a tier or a consumer's subclass can draw them
-     * differently without reimplementing the plot.
-     */
     renderTermini(ends) {
         if (ends.length === 0) {
             return nothing;
@@ -273,7 +122,6 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
           style=${`--chart-series: var(--chart-series-${end.index}); --chart-terminus-x: ${end.x}%; --chart-terminus-y: ${end.y}%`}
         ></span>`)}`;
     }
-    /** One series, its wash first so the line is drawn over its own fill. */
     renderSeries(one, depth, x, y) {
         const points = one.points.map((point, index) => [x(index), y(point.value)]);
         const path = linePath(points, this.curve ?? 'smooth');
@@ -281,10 +129,6 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return html `${nothing}`;
         }
         const index = seriesIndex(depth);
-        /* Closed along the floor of the box and back, which is what makes it
-           fillable: a `<path>` is filled between its own ends, so an open line
-           fills the region between the stroke and the straight line joining its
-           first point to its last. */
         const first = points[0];
         const last = points.at(-1);
         const wash = `${path}L${last[0]},${HEIGHT}L${first[0]},${HEIGHT}Z`;
@@ -303,33 +147,17 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       style="--chart-series: var(--chart-series-${index})"
     />`;
     }
-    /**
-     * The reading names, as HTML beside the drawing rather than inside it.
-     *
-     * Inside, they would scale with the box, for the reason the class doc gives.
-     */
     renderLabels(readings) {
         return html `<div aria-hidden="true" part="labels">
       ${readings.map((one) => html `<span part="label">${one}</span>`)}
     </div>`;
     }
-    /**
-     * What a pointer resting on a reading shows.
-     *
-     * A seam over `drawTooltip`, which holds the markup every chart shares. The
-     * usual reason to override is arrangement: every cell of the row is already
-     * there, including the columns nothing was plotted from.
-     */
     renderTooltip() {
         const at = this.pointer.at;
         const series = this.series;
         if (at < 0 || series.length === 0) {
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
         }
-        /* Above the topmost series at that reading, so the box never covers the
-           line it is describing. `y` counts down in the drawing, so the smallest is
-           the highest, and no readings at all would make `Math.min` return
-           Infinity. */
         const domain = this.range(series);
         const scale = linear(domain, [HEIGHT, 0]);
         const tops = series