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

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

@@ -39,11 +39,11 @@ const STACK_BELOW = 512;
  * positions at once.
  *
  * **The outer splitter draws it and the nested one announces itself upward.**
- * Built the other way round first, because a splitter already knows where its
- * own divider begins and needs no measurement of the other, and that version was
- * clipped: the crossing lies on the boundary between a pane and the divider
+ * The nested one drawing its own is the tempting version, since it already
+ * knows where its divider begins and needs no measurement of the other, and it
+ * is clipped: the crossing lies on the boundary between a pane and the divider
  * beside it, a handle centered there reaches back over the boundary, and a pane
- * is `overflow: auto`. Exactly half the corner was cut off. The outer separator
+ * is `overflow: auto`. Exactly half the corner is cut off. The outer separator
  * is the one element that already straddles the seam, so the corner belongs in
  * it.
  *
@@ -144,10 +144,6 @@ const STACK_BELOW = 512;
 let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Where the divider starts, where nothing declared it.
-         */
-        this.defaultPosition = 50;
         /**
          * How much of a shut pane is still shown, as a percentage.
          *
@@ -157,6 +153,22 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
          * consumer's to set.
          */
         this.collapsedSize = 0;
+        /**
+         * Accessible name for the handle where two dividers cross.
+         */
+        this.cornerLabel = 'Resize both';
+        /**
+         * Where the divider starts, where nothing declared it.
+         */
+        this.defaultPosition = 50;
+        /**
+         * Accessible name for the divider.
+         */
+        this.label = 'Resize panes';
+        /**
+         * Nearest it may come to the end, on the same terms as `min`.
+         */
+        this.max = 100;
         /**
          * Nearest the divider may come to the start.
          *
@@ -177,22 +189,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
          * passes through.
          */
         this.min = 0;
-        /**
-         * Nearest it may come to the end, on the same terms as `min`.
-         */
-        this.max = 100;
         /**
          * How far one arrow press moves it, as a percentage.
          */
         this.step = 2;
-        /**
-         * Accessible name for the divider.
-         */
-        this.label = 'Resize panes';
-        /**
-         * Accessible name for the handle where two dividers cross.
-         */
-        this.cornerLabel = 'Resize both';
         /** The position, whoever set it, and `undefined` until somebody has. */
         this.positionState = undefined;
         /** The collapse, whoever set it, and `undefined` until somebody has. */
@@ -294,12 +294,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             }
             this.origin = null;
             this.dragging = false;
-            /* Nothing moved, so nothing is announced.
-               Every press on the divider used to settle, which dispatched a change
-               carrying the position it already had: a plain click rewrote a consumer's
-               stored value from a gesture that moved nothing. Harmless where the value
-               round-trips exactly, and not where it does not, which is any consumer
-               storing pixels and dividing by a box. */
+            /* Nothing moved, so nothing is announced. Settling on every press would
+               dispatch a change carrying the position it already had, so a plain click
+               rewrites a consumer's stored value from a gesture that moved nothing:
+               harmless where the value round-trips exactly, and not where it does not,
+               which is any consumer storing pixels and dividing by a box. */
             if (this.reached === undefined) {
                 return;
             }
@@ -314,19 +313,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
          * for its bounds. The other two arrows are left alone and the page scrolls
          * under them as it would anywhere else.
          *
-         * *Corrected 18 Aug 2026. This said "both axes, always", on the reasoning
-         * `KeyboardNavigationController` uses for a set of items: a reader who guesses
-         * the wrong arrow gets nothing. The code has never done it, and measuring the
-         * three tab stops of a nested pair is what turned that up, so the prose was
-         * describing a decision nobody implemented.*
-         *
-         * *Leaving it as one axis, because nesting is what settles it. Taking all four
-         * would mean `ArrowLeft` moving a horizontal divider up and down, which is not
-         * a reader being helped past a guess, it is an arrow that does not go the way
-         * it points. And the guess it was protecting against is answered better by the
-         * corner: there, all four arrows are live and each moves the divider it points
-         * along, which is the only place in a splitter where a second axis means
-         * anything.*
+         * **Not all four, which is the tempting version.** Taking every arrow would
+         * mean `ArrowLeft` moving a horizontal divider up and down: not a reader
+         * being helped past a wrong guess, an arrow that does not go the way it
+         * points. A reader who guesses wrong is answered better by the corner, where
+         * all four are live and each moves the divider it points along, which is the
+         * only place in a splitter where a second axis means anything.
          */
         this.handleKeydown = (event) => {
             const back = this.vertical ? 'ArrowUp' : 'ArrowLeft';
@@ -358,10 +350,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         /**
          * Both of them, because the corner moves both.
          *
-         * It needs its own handler now. Inside the separator this came free by
-         * bubbling, and moving the corner out to sit against the host for the stacking
-         * reason took the double click with it: the divider reset and the crossing
-         * did not. Reported.
+         * Its own handler, because the corner is a sibling of the separator rather
+         * than a child of it, for the stacking reason in the stylesheet, so nothing
+         * reaches the separator's own double click by bubbling.
          */
         this.handleCornerDoubleClick = (event) => {
             const crossing = this.crossings[Number(event.currentTarget.dataset.cross)];
@@ -472,8 +463,6 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
      * Reading gives where it is; writing declares it the consumer's, and
      * `default-position` seeds one this element owns. The same accessor pair
      * `Pagination.page` and the calendar's `month` carry.
-     *
-     *
      */
     get position() {
         const shut = this.collapsed;
@@ -485,12 +474,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     set position(next) {
         const previous = this.position;
         this.positionState = next;
-        /* The consumer has spoken, so the drag stops standing in for them.
-           Without this the divider flashed back: `dragging` goes false on
-           `pointerup`, `showing` fell straight back to the position they had set
-           before the gesture, and it was drawn there for the frame it took them to
-           answer the announcement. Snapping to where it started and then jumping to
-           where it was dropped, on every drag. */
+        /* The consumer has spoken, so the drag stops standing in for them. Without
+           this the divider flashes back: `showing` falls to the position set before
+           the gesture and is drawn there for the frame it takes them to answer the
+           announcement, snapping to where the drag started and then jumping to
+           where it was dropped. */
         this.reached = undefined;
         this.requestUpdate('position', previous);
     }
@@ -506,8 +494,6 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
      *
      * It overrides `min` and `max`, which is the point of it. Those keep a sliver
      * of a pane during a drag; this is the thing that says the sliver can go.
-     *
-     *
      */
     get collapsed() {
         const held = this.collapsedState;
@@ -569,14 +555,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
      * The position to draw, which is not always the position to report.
      *
      * A controlled splitter applies nothing, so `position` holds still for the
-     * whole gesture and the divider stayed where it was until the pointer came up
-     * and the consumer answered: it jumped to the end rather than following the
-     * hand. Reported as resizing that was not seamless and did not work as it had.
+     * whole gesture: drawn from it, the divider stays where it was until the
+     * pointer comes up and the consumer answers, jumping to the end rather than
+     * following the hand.
      *
-     * So a drag draws itself. The number is not announced until it settles, which
-     * is the rule that has not changed, and the consumer's answer takes over the
-     * moment they give one. It is what the sandbox did for itself before it used
-     * this component: write the size on every pointer move, tell anyone once.
+     * So a drag draws itself. The number is still not announced until it settles,
+     * and the consumer's answer takes over the moment they give one.
      */
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
@@ -602,17 +586,6 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             this.move(next);
         }
     }
-    /*
-     * The collapse a settled position amounts to, if any.
-     *
-     * So that a pane dragged shut and a pane shut by a consumer's button are the
-     * same state. Left apart, a reader could drag the panel closed and the button
-     * offering to reopen it would read as already open.
-     *
-     * No separate threshold. Landing on the collapsed size *is* the gesture, and
-     * `clamp` puts every overshoot exactly on the bound, so the default of zero
-     * latches on any drag that runs off the end.
-     */
     /** The collapsed size, held inside the range a percentage can be. */
     get sliver() {
         return Math.min(100, Math.max(0, this.collapsedSize));
@@ -620,11 +593,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     /**
      * Whether the divider is against an edge with nothing beside it.
      *
-     * Geometry, not state, which is the second answer here: it asked whether the
-     * pane was `collapsed`, and a divider driven to the edge by a consumer setting
-     * `position` is just as flush and drew a line anyway. What the stylesheet
-     * needs to know is whether there is a pane on both sides, and that is a fact
-     * about where the divider is however it got there.
+     * Geometry, not state. Asking whether the pane is `collapsed` is the wrong
+     * question: a divider driven to the edge by a consumer setting `position` is
+     * just as flush and would still get a line drawn. What the stylesheet needs
+     * to know is whether there is a pane on both sides, which is a fact about
+     * where the divider is however it got there.
      *
      * Still not the same question as `collapsed`: a pane shut to a sliver has a
      * boundary worth drawing, and one shut to nothing has the container's own edge
@@ -633,6 +606,14 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     get flush() {
         return this.sliver === 0 && this.shutAt(this.position) !== undefined;
     }
+    /**
+     * The collapse a settled position amounts to, if any, so a pane dragged shut
+     * and a pane shut by a consumer's button are the same state.
+     *
+     * No separate threshold. Landing on the collapsed size *is* the gesture, and
+     * `clamp` puts every overshoot exactly on the bound, so the default of zero
+     * latches on any drag that runs off the end.
+     */
     shutAt(position) {
         const size = this.sliver;
         if (position <= size) {
@@ -695,11 +676,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         const wanted = this.clamp(next);
         /* Where the gesture has reached, recorded before anything decides whether to
            apply it. A controlled splitter applies nothing, so its `position` is
-           whatever the consumer last said, and settling at *that* announces the
-           number it already had: the drag ended where it began and the divider never
-           moved. Reported as a splitter that could not be dragged at all, and it was
-           every controlled one. The keyboard was fine because it computes its next
-           position rather than reading it back. */
+           whatever the consumer last said, and settling at *that* would announce
+           the number it already had: the drag ends where it began and the divider
+           never moves. Only the pointer is exposed to it, the keyboard computing
+           its next position rather than reading it back. */
         this.reached = wanted;
         if (wanted === this.position) {
             return;
@@ -754,16 +734,16 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     }
     /** Puts the divider back where the markup put it. */
     reset() {
-        /* `default-position`, not the position at first render, which is what this
-           read and which is only the same thing when nobody owns the position. A
-           consumer who does owns what it was on that first frame too, and theirs can
-           be a number they cannot compute yet: the sandbox sizes its panel in pixels
-           and has no box to divide by until it has rendered once, so the divider
-           recorded "panel closed" as home and a double click on the crossing shut
-           the panel instead of restoring it. Reported.
+        /* `default-position`, never the position captured at first render. Those
+           are the same only when nobody owns the position: a consumer who does owns
+           what it was on that first frame too, and theirs can be a number they
+           cannot compute yet, as the sandbox's is, sizing its panel in pixels with
+           no box to divide by until it has rendered once. Home would then be
+           "panel closed" and a double click would shut the panel rather than
+           restore it.
     
-           Declared rather than remembered, so it is a value a consumer can state and
-           change, and it needs no capture at all. */
+           Declared rather than remembered, so it is a value a consumer can state
+           and change, and it needs no capture at all. */
         const home = this.clamp(this.defaultPosition);
         this.move(home);
         this.settle(home);
@@ -809,13 +789,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
      *
      * `parentElement` first, so a splitter does not find itself.
      *
-     * **By identity rather than by tag, which `closestInstance` exists for and
-     * counts this file in its own documentation.** It matched
-     * `'helix-splitter, helix-headless-splitter'`, and only `@fusion.dev/helix` registers
-     * the first of those: a headless package naming a styled one by string. Under
-     * any third tag, which is exactly what subclassing a headless element is for and
-     * what `helix/styled` itself does, the lookup returned null and a nested
-     * splitter had no corner, with no error anywhere.
+     * **By identity rather than by tag, which is what `closestInstance` exists
+     * for.** A selector like `'helix-splitter, helix-headless-splitter'` names a
+     * styled tag from a headless package and misses any third tag, which is
+     * exactly what subclassing a headless element produces: the lookup returns
+     * null, the nested splitter gets no corner, and nothing reports an error.
      *
      * It also crosses shadow boundaries, which `closest` does not: a splitter
      * slotted into another component's shadow root has a `parentNode` chain
@@ -835,18 +813,14 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     /**
      * Keeps a gesture on the corner to itself.
      *
-     * The corner was a child of the separator first, and every one of its events
-     * bubbled there, so the separator started its own drag from the same press.
-     * That is worse than moving twice: the separator calls `setPointerCapture`,
-     * which retargets every later pointer event to *it*, so the corner's
-     * `pointerup` never arrived, its origin was never cleared, and it went on
-     * resizing with no button held. Reported as resizing without a press.
+     * The stop is not redundant with the corner being a sibling of the separator.
+     * Should a press on the corner ever reach the separator, the separator calls
+     * `setPointerCapture`, which retargets every later pointer event to *it*: the
+     * corner's `pointerup` never arrives, its origin is never cleared, and it
+     * goes on resizing with no button held. Worse than moving twice.
      *
-     * The corner is a sibling now, for the stacking reason in the stylesheet, so
-     * nothing reaches the separator by bubbling. This stays because the fix should
-     * not depend on where the element happens to sit, and `preventDefault` is
-     * still needed either way: a drag across a pane would otherwise select the
-     * text under it.
+     * `preventDefault` is needed either way: a drag across a pane would otherwise
+     * select the text under it.
      */
     leaveSeparator(event) {
         event.stopPropagation();
@@ -860,8 +834,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             /* The width watch too, and it belongs here for a plainer reason than the
                one above: `disconnectedCallback` drops the observer on every move, so
                a splitter reordered in the DOM would stop watching its own width and
-               `auto` would freeze on whatever it last saw. `check:observers` is what
-               said so. */
+               `auto` would freeze on whatever it last saw. */
             this.watchWidth();
             this.findOuter();
         }
@@ -983,14 +956,14 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     }
 };
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessSplitter.prototype, "orientation", void 0);
+    property({ attribute: 'collapsed-size', type: Number })
+], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "position", null);
 __decorate([
-    property({ attribute: 'default-position', type: Number })
-], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
+    property({ attribute: 'corner-label' })
+], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "collapsed", null);
@@ -998,23 +971,23 @@ __decorate([
     property({ attribute: 'default-collapsed' })
 ], HelixHeadlessSplitter.prototype, "defaultCollapsed", void 0);
 __decorate([
-    property({ attribute: 'collapsed-size', type: Number })
-], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
+    property({ attribute: 'default-position', type: Number })
+], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
 __decorate([
     property()
-], HelixHeadlessSplitter.prototype, "min", void 0);
+], HelixHeadlessSplitter.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessSplitter.prototype, "step", void 0);
 __decorate([
     property()
-], HelixHeadlessSplitter.prototype, "label", void 0);
+], HelixHeadlessSplitter.prototype, "min", void 0);
 __decorate([
-    property({ attribute: 'corner-label' })
-], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
+    property({ reflect: true })
+], HelixHeadlessSplitter.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSplitter.prototype, "step", void 0);
 __decorate([
     state()
 ], HelixHeadlessSplitter.prototype, "reached", void 0);

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

@@ -9,11 +9,6 @@ import { type TemplateResult } from 'lit';
  * lands on the number either way, because the number is the loud thing; a
  * reader hearing it needs to know what it counts before hearing how many.
  *
- * This paragraph said the opposite, value first and label after, on a render
- * that has always emitted the label slot first: the description was published
- * to two tiers and shipped into the generated types, and the component was
- * right and the sentence was wrong.
- *
  * Both are bare slots. An element whose only job is to assign itself a slot on
  * connect gives its own host an attribute after upgrade, which a React
  * consumer's server markup never had.
@@ -49,8 +44,8 @@ export declare class HelixHeadlessStat extends HelixElement {
      * the host the moment the element upgrades, and the host is markup the
      * consumer rendered: React compares what it rendered against what is there and
      * reports a hydration mismatch. The absent attribute is the column, which the
-     * stylesheet reads as the base case. The existing server spec caught this,
-     * being the one that asserts the host carries nothing nobody wrote.
+     * stylesheet reads as the base case, and the server spec asserts the host
+     * carries nothing nobody wrote.
      */
     direction?: 'column-reverse' | 'row' | 'row-reverse';
     protected render(): TemplateResult;

package/dist/stat/root/stat-root.js

@@ -16,11 +16,6 @@ import { property } from 'lit/decorators.js';
  * lands on the number either way, because the number is the loud thing; a
  * reader hearing it needs to know what it counts before hearing how many.
  *
- * This paragraph said the opposite, value first and label after, on a render
- * that has always emitted the label slot first: the description was published
- * to two tiers and shipped into the generated types, and the component was
- * right and the sentence was wrong.
- *
  * Both are bare slots. An element whose only job is to assign itself a slot on
  * connect gives its own host an attribute after upgrade, which a React
  * consumer's server markup never had.

package/dist/steps/step/step.d.ts

@@ -11,11 +11,10 @@ import '../../button/index.js';
  * hit area and no meaning: the accessible name would be the text either way,
  * and what is pressable would stop being the same shape as what is readable.
  *
- * It is `helix-button`, not a `<button>` this element resets and dresses. The
- * hover wash, the focus ring, the disabled treatment and the way the label sits
- * against an icon are all decisions the button already carries, and a second
- * copy of them here is a second copy to keep in step. `ghost` is the quiet
- * shape: transparent until it is pointed at.
+ * It is `helix-button`, not a `<button>` this element resets and dresses: the
+ * hover wash, the focus ring and the disabled treatment are decisions the
+ * button already carries. `ghost` is the quiet shape, transparent until it is
+ * pointed at.
  *
  * It says nothing about where a reader may go. Every step is pressable and
  * announces itself with `helix-select`; refusing the ones ahead is `disabled`,
@@ -33,11 +32,10 @@ import '../../button/index.js';
  * accessibility tree would carry marks that are not there, and the markup would
  * say three things about a stage that is one.
  *
- * Numbering is a separate question and belongs to the tier above. `numeric`
- * hides the mark and shows a CSS counter, which the browser resolves at layout,
- * so the digit costs no script and is right in the server's markup however the
- * steps are ordered. Nothing here knows which appearance is in use, and does
- * not need to.
+ * Numbering belongs to the tier above. `numeric` hides the mark and shows a CSS
+ * counter, which the browser resolves at layout, so the digit costs no script
+ * and is right in the server's markup however the steps are ordered. Nothing
+ * here knows which appearance is in use.
  *
  * **`complete` and `current` are separate, and both can be false.** A stage
  * that is neither is one the reader has not reached, which is the majority of
@@ -106,16 +104,14 @@ export declare class HelixHeadlessStep extends HelixElement {
      * center for the one they are standing on, a bare check for one that is done.
      * The first two are one shape filling in, which is the progression, and the
      * check is the only mark that leaves the family because finishing is the only
-     * state that is not a position in the sequence.
+     * state that is not a position in the sequence. A coin around the check would
+     * put two of the three inside the same container and leave hue doing the work
+     * of telling them apart.
      *
-     * What went was the coin around the check: a filled disc carrying a check
-     * beside a filled disc carrying a ring put two of the three inside the same
-     * container, and left hue doing most of the work of telling them apart.
-     *
-     * The bare check is `Timeline`'s, deliberately: the two components report the
-     * same kind of thing, a sequence with marks down it, and a check floating on
-     * a hairline in one beside a check inside a green coin in the other was two
-     * answers to one question. Timeline's rings came off the same day.
+     * The bare check matches `Timeline`, deliberately: the two components report
+     * the same kind of thing, a sequence with marks down it, and a check on a
+     * hairline in one beside a check inside a coin in the other is two answers to
+     * one question.
      */
     protected renderMarker(): TemplateResult;
     protected willUpdate(changed: PropertyValues): void;
@@ -123,11 +119,10 @@ export declare class HelixHeadlessStep extends HelixElement {
      * The step's own label, which is a control because a step can be gone to, behind a seam the styled tier can move.
      *
      * A method rather than a fragment inline, so a tier above can render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * wrap this one, or leave it out, without reimplementing the whole template.
+     * The tag is interpolated rather than written, so `tier` resolves it: this
+     * renders the headless element, and a styled subclass that sets `tier`
+     * renders the styled one from the same template.
      */
     protected renderLabel(): TemplateResult;
     protected render(): TemplateResult;

package/dist/steps/step/step.js

@@ -12,7 +12,7 @@ import { html } from 'lit/static-html.js';
 /* Side-effect import, because this renders a button and a custom element
    registers on import. The path is relative, so this registers the base button
    and the styled file's identical import registers the styled one; `tier` picks
-   which name the template asks for. `check:composed` enforces both. */
+   which name the template asks for. */
 import '../../button/index.js';
 /**
  * @summary One stage in a sequence.
@@ -24,11 +24,10 @@ import '../../button/index.js';
  * hit area and no meaning: the accessible name would be the text either way,
  * and what is pressable would stop being the same shape as what is readable.
  *
- * It is `helix-button`, not a `<button>` this element resets and dresses. The
- * hover wash, the focus ring, the disabled treatment and the way the label sits
- * against an icon are all decisions the button already carries, and a second
- * copy of them here is a second copy to keep in step. `ghost` is the quiet
- * shape: transparent until it is pointed at.
+ * It is `helix-button`, not a `<button>` this element resets and dresses: the
+ * hover wash, the focus ring and the disabled treatment are decisions the
+ * button already carries. `ghost` is the quiet shape, transparent until it is
+ * pointed at.
  *
  * It says nothing about where a reader may go. Every step is pressable and
  * announces itself with `helix-select`; refusing the ones ahead is `disabled`,
@@ -46,11 +45,10 @@ import '../../button/index.js';
  * accessibility tree would carry marks that are not there, and the markup would
  * say three things about a stage that is one.
  *
- * Numbering is a separate question and belongs to the tier above. `numeric`
- * hides the mark and shows a CSS counter, which the browser resolves at layout,
- * so the digit costs no script and is right in the server's markup however the
- * steps are ordered. Nothing here knows which appearance is in use, and does
- * not need to.
+ * Numbering belongs to the tier above. `numeric` hides the mark and shows a CSS
+ * counter, which the browser resolves at layout, so the digit costs no script
+ * and is right in the server's markup however the steps are ordered. Nothing
+ * here knows which appearance is in use.
  *
  * **`complete` and `current` are separate, and both can be false.** A stage
  * that is neither is one the reader has not reached, which is the majority of
@@ -127,16 +125,14 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
      * center for the one they are standing on, a bare check for one that is done.
      * The first two are one shape filling in, which is the progression, and the
      * check is the only mark that leaves the family because finishing is the only
-     * state that is not a position in the sequence.
+     * state that is not a position in the sequence. A coin around the check would
+     * put two of the three inside the same container and leave hue doing the work
+     * of telling them apart.
      *
-     * What went was the coin around the check: a filled disc carrying a check
-     * beside a filled disc carrying a ring put two of the three inside the same
-     * container, and left hue doing most of the work of telling them apart.
-     *
-     * The bare check is `Timeline`'s, deliberately: the two components report the
-     * same kind of thing, a sequence with marks down it, and a check floating on
-     * a hairline in one beside a check inside a green coin in the other was two
-     * answers to one question. Timeline's rings came off the same day.
+     * The bare check matches `Timeline`, deliberately: the two components report
+     * the same kind of thing, a sequence with marks down it, and a check on a
+     * hairline in one beside a check inside a coin in the other is two answers to
+     * one question.
      */
     renderMarker() {
         const icon = this.complete ? check : this.current ? record : circle;
@@ -155,11 +151,10 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
      * The step's own label, which is a control because a step can be gone to, behind a seam the styled tier can move.
      *
      * A method rather than a fragment inline, so a tier above can render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * wrap this one, or leave it out, without reimplementing the whole template.
+     * The tag is interpolated rather than written, so `tier` resolves it: this
+     * renders the headless element, and a styled subclass that sets `tier`
+     * renders the styled one from the same template.
      */
     renderLabel() {
         return html `<${this.tag('button')}
@@ -175,13 +170,13 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     render() {
         /* Two half lines, one either side of the mark, rather than one line running
            the whole way to the next step.
-           A single line was tried twice. Drawn to the next marker it has to know
-           how far away that is, which is the next step's size, and a step knows
-           only its own. Drawn across the gap alone it is a stub. Two halves need
-           neither: each reaches from the mark to its own step's edge and half the
-           gap beyond, so it meets the one coming the other way in the middle of the
-           gap and the rule reads as continuous however wide the steps are or how
-           differently they are filled.
+           A single line drawn to the next marker has to know how far away that is,
+           which is the next step's size, and a step knows only its own; drawn
+           across the gap alone it is a stub. Two halves need neither: each reaches
+           from the mark to its own step's edge and half the gap beyond, so it meets
+           the one coming the other way in the middle of the gap and the rule reads
+           as continuous however wide the steps are or how differently they are
+           filled.
            The first has nothing on its leading side and the last nothing on its
            trailing one, which `:host(:first-child)` and `:host(:last-child)` say
            with no index and no parent counting its children. */

package/dist/switch/root/switch-root.js

@@ -91,8 +91,8 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
     }
     /** Returns the switch to the state its markup declared. */
     formResetCallback() {
-        // `resetChecked` drops both halves now, the consumer's and the element's,
-        // so there is nothing to clear before it.
+        // `resetChecked` drops both halves, the consumer's and the element's, so
+        // there is nothing to clear before it.
         this.resetChecked();
     }
     updated(changed) {