@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

package/dist/input/root/input-root.js

@@ -33,19 +33,12 @@ import { property, state } from 'lit/decorators.js';
  * here guesses. What this adds is the anchor, so `reportValidity` points the
  * bubble at the input rather than at the host.
  *
- * `pattern`, `minlength` and `maxlength` are forwarded with them. They were
- * promised by this paragraph and did not exist, so a consumer following the
- * sentence wrote an attribute on the host that reached no input and constrained
- * nothing: the field looked as though it were checked and was not.
+ * `pattern`, `minlength` and `maxlength` are forwarded with them.
  *
- * **`clearable` and `reveal` are the field's, not the consumer's.** The `end`
- * slot used to be the answer to both, which meant every consumer of
- * `type="search"` built the same button and every consumer of
- * `type="password"` either built the same toggle or shipped a field a reader
- * cannot check what they typed into. Neither is a slot's worth of variation:
- * one empties the value, the other flips the type, and both want the same
- * position, the same size and the same disabled behavior. The slot stays for
- * what actually varies, a unit or a prefix.
+ * **`clearable` and `reveal` are the field's, not the consumer's.** Neither is
+ * a slot's worth of variation: one empties the value, the other flips the type,
+ * and both want the same position, the same size and the same disabled
+ * behavior. The `end` slot stays for what actually varies, a unit or a prefix.
  *
  * Both opt in rather than following from `type`, and are booleans that default
  * to false. A Lit boolean property that defaults to *true* cannot be turned off
@@ -72,7 +65,6 @@ import { property, state } from 'lit/decorators.js';
  * @csspart feedback - What is wrong with it.
  * @csspart field - The box holding everything.
  * @csspart hint - Help under the field, while nothing is wrong.
- * @csspart icon - A glyph this component draws.
  * @csspart label - The question, over the field.
  * @csspart reveal - The button that shows and hides a password.
  */
@@ -96,54 +88,6 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
          * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
          */
         this.autocomplete = '';
-        /**
-         * Shown while the field is empty.
-         *
-         * Not a label: it goes when typing starts.
-         */
-        this.placeholder = '';
-        /**
-         * Whether the field refuses input while still submitting its value.
-         *
-         * **`readonly`, which is the platform's spelling, and it was `read-only`
-         * until 28 Aug 2026.** A camelCase property needs an explicit `attribute`
-         * and the library had been answering that question two ways: thirteen
-         * attributes kept the name HTML uses (`crossorigin`, `maxlength`,
-         * `formnovalidate`, `dirname` and the rest) and five dash-cased a word the
-         * platform writes as one. `readonly` was the only one on both lists, this
-         * spelling on `Rating` and `read-only` on the eight other fields, so one
-         * library shipped both and each was inert on the other's families.
-         *
-         * The cost of the dash-cased form is the one this repository keeps writing
-         * down about attributes: nothing warns. `<helix-input readonly>` is what
-         * anybody who has written HTML types, it parsed to no property at all, and
-         * the field stayed editable with no error anywhere. Measured before the
-         * rename: `readOnly` came back `false`.
-         *
-         * Taken now for the reason [#213](../../../../../docs/19-queue.md) gives
-         * about the part it renamed for the same kind of reason: there is no
-         * `helix-v` tag, so no consumer is holding the old spelling, and this is free
-         * today and a deprecation after the first release.
-         * `check:attribute-names` holds it from here.
-         */
-        this.readOnly = false;
-        /**
-         * What the field accepts, which decides the keyboard and the validation.
-         *
-         * **Not reflected**, and it was. Reflection exists so a selector can reach a
-         * value, and no stylesheet in this repository selects on `type`: what it did
-         * instead was write `type="text"` onto every `<helix-input>` ever rendered,
-         * an attribute no consumer's markup had. That is precisely the fault `Button`
-         * had with `href`, `target` and `rel`, written up in the area rules as the
-         * reason the rule exists, and this was the last property in the library still
-         * doing it. Audited: ten reflected attributes have no selector anywhere, and
-         * this is the only one of them with a value that puts itself on the host.
-         *
-         * Nothing reads it from the attribute either. The real `<input>` inside takes
-         * it as a property binding, which is what makes the keyboard and the
-         * validation follow.
-         */
-        this.type = 'text';
         /**
          * Whether the field offers a button that empties it.
          *
@@ -158,20 +102,36 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
          */
         this.clearLabel = 'Clear';
         /**
-         * Whether a password field offers a toggle that shows what was typed.
+         * A regular expression the value has to match, as the platform reads it.
          *
-         * Ignored on every other type. A reveal on an email field would be a button
-         * that does nothing visible, and guarding it here rather than asking the
-         * consumer not to means the property can be set once on a component that
-         * changes type.
+         * Forwarded rather than checked here, which is the whole reason validity is
+         * the platform's: the browser knows what a `pattern` means, anchors it at both
+         * ends, and produces the message in the reader's own language.
          */
-        this.reveal = false;
+        this.pattern = '';
         /**
-         * What the reveal toggle is called.
+         * Shown while the field is empty.
          *
-         * The state is `aria-pressed`, not this.
+         * Not a label: it goes when typing starts.
          */
-        this.revealLabel = 'Show password';
+        this.placeholder = '';
+        /**
+         * Whether the field refuses input while still submitting its value.
+         *
+         * **The attribute is `readonly`, which is the platform's spelling.** A
+         * camelCase property needs an explicit `attribute`, and dash-casing a word
+         * HTML writes as one costs what an attribute always costs here: nothing
+         * warns. `<helix-input readonly>` is what anybody who has written HTML types;
+         * against `read-only` it parses to no property at all, and the field stays
+         * editable with no error anywhere. Measured on the dash-cased form, `readOnly`
+         * came back `false`.
+         *
+         * A part was renamed for
+         * the same kind of reason: there is no `helix-v` tag, so no consumer is
+         * holding the old spelling, and this is free today and a deprecation after
+         * the first release.
+         */
+        this.readOnly = false;
         /**
          * Whether the password is currently showing.
          *
@@ -196,8 +156,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
                beside the one the mixin announces: measured in Chrome 148, one keystroke
                produced `helix-before-change`, this element's own `input`, and the inner
                control's, so `onInput` ran twice and one of the two carried the value
-               from before the change. `handleChange` two methods down has always done
-               this; the pair was half applied. */
+               from before the change. `handleChange` two methods down does the same. */
             event.stopPropagation();
             const control = event.target;
             const next = control.value;
@@ -234,18 +193,34 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
         };
         /**
-         * A regular expression the value has to match, as the platform reads it.
+         * Whether a password field offers a toggle that shows what was typed.
+         *
+         * Ignored on every other type. A reveal on an email field would be a button
+         * that does nothing visible, and guarding it here rather than asking the
+         * consumer not to means the property can be set once on a component that
+         * changes type.
+         */
+        this.reveal = false;
+        /**
+         * What the reveal toggle is called.
+         *
+         * The state is `aria-pressed`, not this.
+         */
+        this.revealLabel = 'Show password';
+        /**
+         * What the field accepts, which decides the keyboard and the validation.
          *
-         * The class documentation promised `pattern` and `minlength` "and the rest"
-         * were set on the real input, and no such properties existed: a consumer
-         * following that sentence wrote an attribute on the host, it reached no input,
-         * and the field constrained nothing while looking as though it did.
+         * **Not reflected.** Reflection exists so a selector can reach a value, and
+         * no stylesheet in this repository selects on `type`. Reflecting it writes
+         * `type="text"` onto every `<helix-input>` ever rendered, an attribute no
+         * consumer's markup has, which is the fault the area rules write up under
+         * `Button`'s `href`, `target` and `rel`.
          *
-         * Forwarded rather than checked here, which is the whole reason validity is
-         * the platform's: the browser knows what a `pattern` means, anchors it at both
-         * ends, and produces the message in the reader's own language.
+         * Nothing reads it from the attribute either. The real `<input>` inside takes
+         * it as a property binding, which is what makes the keyboard and the
+         * validation follow.
          */
-        this.pattern = '';
+        this.type = 'text';
     }
     /**
      * The type the real input is given, which is not always the type asked for.
@@ -275,7 +250,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
      * the boundary. An insert-at-cursor toolbar, a format button, a mask that
      * repositions the caret after rewriting the value, all of them need this and
      * none of them could be written. Textarea gained the same surface for the same
-     * reason. See 295.
+     * reason.
      *
      * Zero before there is a control, which is where an empty field's caret would
      * be anyway.
@@ -396,12 +371,10 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
       />
       <slot name="end"></slot>
       <!-- In the tab order, unlike the browser's own search clear, which is not
-           reachable by keyboard at all. That is defensible for a native control
-           a reader can empty with select-all and Delete, and less so for one
-           whose only affordance is an icon: a control that exists on screen and
-           cannot be reached is one a keyboard reader is told about and cannot
-           use. It only exists while there is a value, so the extra stop appears
-           exactly when there is something to do with it. -->
+           reachable by keyboard at all: a control whose only affordance is an
+           icon and that cannot be reached is one a keyboard reader is told
+           about and cannot use. It only exists while there is a value, so the
+           extra stop appears exactly when there is something to do with it. -->
       ${this.showsClear
             ? html `<button
               part="clear"
@@ -433,6 +406,21 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessInput.prototype, "clearable", void 0);
+__decorate([
+    property({ attribute: 'clear-label' })
+], HelixHeadlessInput.prototype, "clearLabel", void 0);
+__decorate([
+    property({ attribute: 'maxlength', type: Number })
+], HelixHeadlessInput.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'minlength', type: Number })
+], HelixHeadlessInput.prototype, "minLength", void 0);
+__decorate([
+    property()
+], HelixHeadlessInput.prototype, "pattern", void 0);
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "placeholder", void 0);
@@ -440,32 +428,17 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessInput.prototype, "readOnly", void 0);
 __decorate([
-    property()
-], HelixHeadlessInput.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessInput.prototype, "clearable", void 0);
-__decorate([
-    property({ attribute: 'clear-label' })
-], HelixHeadlessInput.prototype, "clearLabel", void 0);
+    state()
+], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "reveal", void 0);
 __decorate([
     property({ attribute: 'reveal-label' })
 ], HelixHeadlessInput.prototype, "revealLabel", void 0);
-__decorate([
-    state()
-], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
     property()
-], HelixHeadlessInput.prototype, "pattern", void 0);
-__decorate([
-    property({ attribute: 'minlength', type: Number })
-], HelixHeadlessInput.prototype, "minLength", void 0);
-__decorate([
-    property({ attribute: 'maxlength', type: Number })
-], HelixHeadlessInput.prototype, "maxLength", void 0);
+], HelixHeadlessInput.prototype, "type", void 0);
 HelixHeadlessInput = __decorate([
     customElement('helix-headless-input')
 ], HelixHeadlessInput);

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

@@ -29,13 +29,6 @@ import { type TemplateResult } from 'lit';
  *   the control does.
  * - `document` listens on the document, for a chord that works from anywhere.
  *
- * *Corrected 25 Aug 2026: this said `scope`, `self` and `global` until then,
- * naming a property that has never existed under that name. The rename is
- * explained on the property itself, twenty lines below, and this paragraph
- * above it went on teaching the old one. A reader who trusted the class doc
- * wrote an attribute that binds nothing, which is also what an unset `within`
- * does, so nothing about the mistake looked like one.*
- *
  * **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
@@ -87,6 +80,14 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private listen;
     private deafen;
     private readonly handleKeydown;
+    /**
+     * 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.
+     */
+    private get printable();
     /** Whether a press is this chord, modifiers and all. */
     private matches_;
     protected render(): TemplateResult;

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

@@ -7,15 +7,41 @@ 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;
+    }
+    if (node instanceof HTMLElement && node.isContentEditable) {
+        return true;
+    }
+    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',
+    'color',
+    'file',
+    'hidden',
+    'image',
+    'radio',
+    'range',
+    '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. That is the
- * one separator this component is willing to supply: the class docstring says
- * a separator between keys is prose because it is "then" in a sequence and
- * "plus" in a simultaneous press, and `keys` is only ever the second of those.
+ * 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: '⌥',
@@ -86,13 +112,6 @@ const onApple = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/
  *   the control does.
  * - `document` listens on the document, for a chord that works from anywhere.
  *
- * *Corrected 25 Aug 2026: this said `scope`, `self` and `global` until then,
- * naming a property that has never existed under that name. The rename is
- * explained on the property itself, twenty lines below, and this paragraph
- * above it went on teaching the old one. A reader who trusted the class doc
- * wrote an attribute that binds nothing, which is also what an unset `within`
- * does, so nothing about the mistake looked like one.*
- *
  * **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
@@ -133,6 +152,33 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
             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;
             }
@@ -188,6 +234,20 @@ 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('+')
+            .map((part) => part.trim())
+            .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

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

@@ -26,7 +26,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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 colours mean nothing to a
+ * 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

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

@@ -7,7 +7,7 @@ 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 colours the series palette has, and so where it starts over. */
+/** 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.
@@ -35,7 +35,7 @@ const PALETTE = 24;
  * 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 colours mean nothing to a
+ * 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
@@ -66,9 +66,8 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
          * `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 had written
-           out for itself. Three copies had already drifted into two names for the
-           same lookup. */
+        /* 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) {

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

@@ -67,22 +67,19 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
     /**
      * How the line gets from one reading to the next.
      *
-     * **`smooth` is the resting curve.** *Changed 21 Aug 2026, reversing the
-     * argument this comment used to make.* Joining the readings claims nothing in
-     * between, which is true and is why `straight` still exists: a straight
-     * segment asserts nothing about the values between two readings, and a curve
-     * invents them. What settles it the other way is that the invention is
-     * bounded. The interpolation is monotone cubic, so it never leaves the band
+     * **`smooth` is the resting curve.** A curve invents the values between two
+     * readings, which is why `straight` still exists, but the invention is
+     * bounded: the interpolation is monotone cubic, so it never leaves the band
      * the data sets and never introduces a peak or a trough the series does not
-     * have, and within that bound the smoothed line is the easier one to follow
-     * across a long series. `straight` becomes the deliberate claim.
+     * have. Within that bound the smoothed line is the easier one to follow
+     * across a long series, and `straight` becomes the deliberate claim.
      *
-     * **Still absent rather than defaulted on the property**, because a
-     * reflecting property with a default writes its attribute onto every host
-     * anybody renders, including the ones nobody configured.
+     * **Absent rather than defaulted on the property**, because a reflecting
+     * property with a default writes its attribute onto every host anybody
+     * renders, including the ones nobody configured.
      * `line-chart-root.ssr.spec.ts` asserts the host carries only what the
-     * consumer wrote, and caught that the first time. The default therefore lives
-     * where the path is built, as `curve ?? 'smooth'`.
+     * consumer wrote. The default therefore lives where the path is built, as
+     * `curve ?? 'smooth'`.
      *
      * `step` claims the opposite of both, that a reading holds until the next.
      */
@@ -101,12 +98,11 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * through each reading, which is what lets a point be traced down to its
      * label across a wide chart. `both` draws both.
      *
-     * **A bare `gridlines` means `value`**, and so does anything unrecognised.
-     * Written out, the attribute a consumer reaches for first should be the grid
-     * they meant, and a typo should fall back to the useful half rather than to
-     * nothing at all: an unrecognised value that draws no rules is
-     * indistinguishable from the attribute being absent, which is the one thing
-     * a reader cannot debug.
+     * **A bare `gridlines` means `value`**, and so does anything unrecognized.
+     * The attribute a consumer reaches for first should be the grid they meant,
+     * and a typo should fall back to the useful half rather than to nothing at
+     * all: an unrecognized value that draws no rules is indistinguishable from
+     * the attribute being absent, which is the one thing a reader cannot debug.
      *
      * Furniture rather than data, so the rules are inside the `aria-hidden` plot
      * and reach no reader through the table.
@@ -116,17 +112,6 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
     protected get rulesValue(): boolean;
     /** Whether each reading is ruled, which only two values ask for. */
     protected get rulesCategory(): boolean;
-    /**
-     * 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.
-     */
-    zero: boolean;
-    /** The domain every series is drawn against, which the tooltip also needs. */
-    private range;
     /**
      * The shape of the mark on each series' last reading.
      *
@@ -151,6 +136,17 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * layers; a single `mask-image` would only ever cut the last one.
      */
     terminus?: 'none' | 'ring' | 'square' | 'triangle';
+    /** The domain every series is drawn against, which the tooltip also needs. */
+    private range;
+    /**
+     * 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.
+     */
+    zero: boolean;
     /**
      * Where each series ends, as percentages of the drawing's own box.
      *

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

@@ -135,12 +135,12 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         /* **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 what this did first. 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 sat at
-         * the gridlines between those shares: measured, the first name centered at a
-         * twelfth of the width with its point at zero. Every label was off by half
-         * a slot and the error grew toward the middle.
+         * 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
@@ -208,7 +208,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         /* 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 centres, so the two are
+           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} />`)
@@ -353,12 +353,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLineChart.prototype, "gridlines", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessLineChart.prototype, "zero", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "terminus", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLineChart.prototype, "zero", void 0);
 HelixHeadlessLineChart = __decorate([
     customElement('helix-headless-line-chart')
 ], HelixHeadlessLineChart);