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

package/dist/notifications/notification/notification.js

@@ -14,8 +14,8 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
    shifts every attribute after it by one. See `renderTime`. */
 import { html } from 'lit/static-html.js';
 /* Side-effect import, because this template interpolates the family's tag and a
-   custom element registers on import. Both tiers import it, each resolving to
-   its own; `check:composed` enforces that. */
+   custom element registers on import. Both tiers import it, the relative path
+   resolving to each tier's own element. */
 import '../../format-date/index.js';
 /**
  * @summary One thing that happened, which a reader may not have seen yet.
@@ -92,16 +92,16 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixEle
          * Whether a reader may remove it.
          */
         this.dismissible = false;
+        /**
+         * Accessible name for the dismiss control.
+         */
+        this.dismissLabel = 'Dismiss';
         /**
          * Locale for the timestamp.
          *
          * Empty is the runtime's own.
          */
         this.locale = '';
-        /**
-         * Accessible name for the dismiss control.
-         */
-        this.dismissLabel = 'Dismiss';
         /**
          * @internal Read by the list to identify its children across the light DOM,
          * which is cheaper than `instanceof` and is why this is public rather than
@@ -130,18 +130,13 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixEle
      * changes nothing until a new value arrives. `default-read` seeds a state
      * this element then owns.
      *
-     * **Not reflected, and it was until 27 Aug 2026.** The reason given was that
-     * unread is a visual state and a stylesheet has no other way to know, which
-     * is the same reason the four mixins mirror theirs, and the mirror may not be
-     * the property's own attribute: `<helix-notification default-read>`
-     * came back from a server without `read` and gained it on the first update,
-     * which React reports as a hydration mismatch, and a copy of the serialized
-     * element re-parses that attribute as a declaration. `:state(read)` is what
-     * the stylesheet reads now. Found by `hydration.dom.spec.ts` on the day it
-     * learned to mount an element a consumer had configured rather than a bare
-     * one.
-     *
-     *
+     * **Not reflected.** Unread is a visual state, which is why the four mixins
+     * mirror theirs, but the mirror may not be the property's own attribute:
+     * `<helix-notification default-read>` comes back from a server without `read`
+     * and would gain it on the first update, which React reports as a hydration
+     * mismatch, and which a copy of the serialized element re-parses as a
+     * declaration. `:state(read)` is what the stylesheet reads.
+     * `hydration.dom.spec.ts` holds it.
      */
     get read() {
         return this.readState ?? this.defaultRead;
@@ -205,11 +200,11 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixEle
      * it.** A fallback answers a consumer and a seam answers the tier above, which
      * are different people: the styled tier wants an icon here, and with the slot
      * written inline the only way to change it is to reimplement the whole
-     * template. `check:fallbacks` holds that, and moving only the fallback out was
-     * not enough, which is the right rule: the slot is the thing a tier redraws.
+     * template. Moving only the fallback out is not enough: the slot is the thing
+     * a tier redraws.
      *
-     * **The mark is drawn rather than typed, which is what lets it align.** It was
-     * `&times;`, and a character is placed by its font rather than by its box:
+     * **The mark is drawn rather than typed, which is what lets it align.** A
+     * character such as `&times;` is placed by its font rather than by its box:
      * measured against the ghost button beside it at 8x, the cross carried 6
      * pixels of ink to the label's 9.5 and sat 1.5 pixels below its center, in two
      * boxes whose own centers agreed to a tenth of a pixel. No stylesheet can
@@ -246,8 +241,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixEle
      *
      * The tag is interpolated rather than written, so each tier renders its own:
      * the base tier may not name a styled element, and a styled item inherits this
-     * template without having a tag of its own to remind anybody. `check:composed`
-     * holds both halves.
+     * template without having a tag of its own to remind anybody.
      *
      * `exportparts` and no `part` of its own, which is the rule about a part
      * already named for its role: the child publishes `time`, the role here is
@@ -293,12 +287,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessNotification.prototype, "dismissible", void 0);
-__decorate([
-    property()
-], HelixHeadlessNotification.prototype, "locale", void 0);
 __decorate([
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessNotification.prototype, "dismissLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessNotification.prototype, "locale", void 0);
 HelixHeadlessNotification = __decorate([
     customElement('helix-headless-notification')
 ], HelixHeadlessNotification);

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

@@ -6,26 +6,22 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @summary A feed a reader comes back to, made of notifications they may not have seen.
  *
  * @description
- * **Slotted children rather than a data property**, which is the opposite of the
- * choice `helix-data-table` made and correct for the opposite reason. A table's
- * rows are homogeneous values a consumer wants windowed; a notification is a
- * small piece of somebody's own markup, with an avatar and a link and a button
- * in it, and there are tens of them rather than thousands. Writing them out is
- * the web-component reading of a list and lets an item hold anything.
+ * **Slotted children rather than a data property.** A notification is a small
+ * piece of somebody's own markup, with an avatar and a link and a button in it,
+ * and there are tens of them rather than thousands, so writing them out lets an
+ * item hold anything.
  *
- * **The cost is stated rather than discovered: this does not virtualize, and it
- * cannot.** Windowing needs the list to own the data, and here the consumer owns
- * it: N notifications is N elements by construction. That is the same trade
- * `25-data-table.md` §2.2 rejected for a table and accepts here, because the
- * sizes are not comparable. A feed that really does hold thousands wants a data
- * table with a custom cell, and this component will not grow into one.
+ * **This does not virtualize, and it cannot.** Windowing needs the list to own
+ * the data, and here the consumer owns it: N notifications is N elements by
+ * construction. A feed that really does hold thousands wants a data table with a
+ * custom cell, and this component will not grow into one.
  *
  * **Read state is reported, never invented.** Marking read is usually a round
  * trip: this element asks its items and each item asks the consumer, so a
  * refused `helix-read` leaves everything alone and a consumer who owns `read`
  * sees nothing change until they say so. `unread` is derived from the items and
- * reflected, so a stylesheet and a badge can both read it without either of them
- * counting.
+ * written to an attribute, so a stylesheet and a badge can both read it without
+ * either of them counting.
  *
  * @since 0.1.0
  * @status experimental
@@ -72,17 +68,15 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     /**
      * How many items are unread, counted from the items themselves.
      *
-     * Read-only for the reason it is derived: a count the consumer could set is a
-     * second source of truth for something the items already know, and the first
-     * time the two disagreed the badge would be right and the list would not.
+     * Read-only because it is derived: a count the consumer could set is a second
+     * source of truth for something the items already know.
      *
-     * **The attribute is written in `updated` rather than reflected, and the
-     * difference is a bug that shipped.** `@property({ reflect: true })` on a
-     * getter with no setter reflects once: Lit reflects what is in
-     * `changedProperties`, and nothing puts a derived getter there after the first
-     * update. Measured with two items, one marked read: the property answered 1
-     * and the attribute still said 2, so a badge reading the attribute showed a
-     * count for an item the reader had just opened.
+     * **The attribute is written in `updated`, never reflected.**
+     * `@property({ reflect: true })` on a getter with no setter reflects once: Lit
+     * reflects what is in `changedProperties`, and nothing puts a derived getter
+     * there after the first update. Measured with two items, one marked read: the
+     * property answered 1 and the attribute still said 2, so a badge reading the
+     * attribute showed a count for an item the reader had just opened.
      */
     get unread(): number;
     /** The notifications declared as children, in the order they are written. */
@@ -116,11 +110,11 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      *
      * **A fact no item can answer for itself**, which is why it is here. An item
      * knows about its own media slot and nothing about its neighbors, so a feed
-     * where some rows have an avatar and some do not drew two different left
-     * edges for its text and had no way to notice: measured on a four item feed,
-     * the rows without media started their text 32 pixels to the left of the rows
-     * with it. The styled tier turns this into a width; this tier ships no
-     * stylesheet and is unaffected.
+     * where some rows have an avatar and some do not draws two different left
+     * edges for its text: measured on a four item feed, the rows without media
+     * started their text 32 pixels to the left of the rows with it. The styled
+     * tier turns this into a width; this tier ships no stylesheet and is
+     * unaffected.
      *
      * Read off the light DOM rather than off the items, so it does not depend on
      * which children have upgraded by the time this runs.
@@ -129,16 +123,14 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     /**
      * Says on each region whether anything is in it.
      *
-     * **The stylesheet used to ask, and could not.** The rule read
-     * `[part="header"]:not(:has(> slot:has(*)))`, which is two faults at once.
-     * `:has()` may not be nested inside `:has()`, so the selector fails to parse
-     * and the whole rule is discarded; and a slot's assigned nodes are not its DOM
-     * children, so `slot:has(*)` reports whether the slot has *fallback* rather
-     * than whether a consumer filled it, and would have been false either way.
-     * Both verified in a browser: `insertRule` throws a `SyntaxError` on the
-     * first, and an assigned element still leaves `slot.matches(':has(*)')` false.
-     * A feed with no header drew its rule under nothing, and one with no footer
-     * drew another over nothing.
+     * **A stylesheet cannot ask this, and the obvious selector fails twice over.**
+     * `[part="header"]:not(:has(> slot:has(*)))`: `:has()` may not be nested
+     * inside `:has()`, so the selector fails to parse and the whole rule is
+     * discarded; and a slot's assigned nodes are not its DOM children, so
+     * `slot:has(*)` reports whether the slot has *fallback* rather than whether a
+     * consumer filled it, and would have been false either way. Both verified in a
+     * browser: `insertRule` throws a `SyntaxError` on the first, and an assigned
+     * element still leaves `slot.matches(':has(*)')` false.
      *
      * `slotFilled` is what the rest of the library already asks with. It is said
      * on the region inside this shadow root rather than on the host, because an

package/dist/notifications/root/notifications-root.js

@@ -11,26 +11,22 @@ import { property } from 'lit/decorators.js';
  * @summary A feed a reader comes back to, made of notifications they may not have seen.
  *
  * @description
- * **Slotted children rather than a data property**, which is the opposite of the
- * choice `helix-data-table` made and correct for the opposite reason. A table's
- * rows are homogeneous values a consumer wants windowed; a notification is a
- * small piece of somebody's own markup, with an avatar and a link and a button
- * in it, and there are tens of them rather than thousands. Writing them out is
- * the web-component reading of a list and lets an item hold anything.
+ * **Slotted children rather than a data property.** A notification is a small
+ * piece of somebody's own markup, with an avatar and a link and a button in it,
+ * and there are tens of them rather than thousands, so writing them out lets an
+ * item hold anything.
  *
- * **The cost is stated rather than discovered: this does not virtualize, and it
- * cannot.** Windowing needs the list to own the data, and here the consumer owns
- * it: N notifications is N elements by construction. That is the same trade
- * `25-data-table.md` §2.2 rejected for a table and accepts here, because the
- * sizes are not comparable. A feed that really does hold thousands wants a data
- * table with a custom cell, and this component will not grow into one.
+ * **This does not virtualize, and it cannot.** Windowing needs the list to own
+ * the data, and here the consumer owns it: N notifications is N elements by
+ * construction. A feed that really does hold thousands wants a data table with a
+ * custom cell, and this component will not grow into one.
  *
  * **Read state is reported, never invented.** Marking read is usually a round
  * trip: this element asks its items and each item asks the consumer, so a
  * refused `helix-read` leaves everything alone and a consumer who owns `read`
  * sees nothing change until they say so. `unread` is derived from the items and
- * reflected, so a stylesheet and a badge can both read it without either of them
- * counting.
+ * written to an attribute, so a stylesheet and a badge can both read it without
+ * either of them counting.
  *
  * @since 0.1.0
  * @status experimental
@@ -104,17 +100,15 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     /**
      * How many items are unread, counted from the items themselves.
      *
-     * Read-only for the reason it is derived: a count the consumer could set is a
-     * second source of truth for something the items already know, and the first
-     * time the two disagreed the badge would be right and the list would not.
+     * Read-only because it is derived: a count the consumer could set is a second
+     * source of truth for something the items already know.
      *
-     * **The attribute is written in `updated` rather than reflected, and the
-     * difference is a bug that shipped.** `@property({ reflect: true })` on a
-     * getter with no setter reflects once: Lit reflects what is in
-     * `changedProperties`, and nothing puts a derived getter there after the first
-     * update. Measured with two items, one marked read: the property answered 1
-     * and the attribute still said 2, so a badge reading the attribute showed a
-     * count for an item the reader had just opened.
+     * **The attribute is written in `updated`, never reflected.**
+     * `@property({ reflect: true })` on a getter with no setter reflects once: Lit
+     * reflects what is in `changedProperties`, and nothing puts a derived getter
+     * there after the first update. Measured with two items, one marked read: the
+     * property answered 1 and the attribute still said 2, so a badge reading the
+     * attribute showed a count for an item the reader had just opened.
      */
     get unread() {
         return this.items.filter((item) => !item.read).length;
@@ -123,7 +117,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     get items() {
         /* `?? []` is the server. Lit's element shim carries attributes and not a
            tree, so `children` is undefined there, and this getter is reached from
-           `unread`, which is reflected and therefore read during the first update. */
+           `unread` during the first update. */
         return [...(this.children ?? [])].filter((child) => 'isNotification' in child && child.isNotification === true);
     }
     /**
@@ -178,11 +172,11 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
      *
      * **A fact no item can answer for itself**, which is why it is here. An item
      * knows about its own media slot and nothing about its neighbors, so a feed
-     * where some rows have an avatar and some do not drew two different left
-     * edges for its text and had no way to notice: measured on a four item feed,
-     * the rows without media started their text 32 pixels to the left of the rows
-     * with it. The styled tier turns this into a width; this tier ships no
-     * stylesheet and is unaffected.
+     * where some rows have an avatar and some do not draws two different left
+     * edges for its text: measured on a four item feed, the rows without media
+     * started their text 32 pixels to the left of the rows with it. The styled
+     * tier turns this into a width; this tier ships no stylesheet and is
+     * unaffected.
      *
      * Read off the light DOM rather than off the items, so it does not depend on
      * which children have upgraded by the time this runs.
@@ -193,16 +187,14 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     /**
      * Says on each region whether anything is in it.
      *
-     * **The stylesheet used to ask, and could not.** The rule read
-     * `[part="header"]:not(:has(> slot:has(*)))`, which is two faults at once.
-     * `:has()` may not be nested inside `:has()`, so the selector fails to parse
-     * and the whole rule is discarded; and a slot's assigned nodes are not its DOM
-     * children, so `slot:has(*)` reports whether the slot has *fallback* rather
-     * than whether a consumer filled it, and would have been false either way.
-     * Both verified in a browser: `insertRule` throws a `SyntaxError` on the
-     * first, and an assigned element still leaves `slot.matches(':has(*)')` false.
-     * A feed with no header drew its rule under nothing, and one with no footer
-     * drew another over nothing.
+     * **A stylesheet cannot ask this, and the obvious selector fails twice over.**
+     * `[part="header"]:not(:has(> slot:has(*)))`: `:has()` may not be nested
+     * inside `:has()`, so the selector fails to parse and the whole rule is
+     * discarded; and a slot's assigned nodes are not its DOM children, so
+     * `slot:has(*)` reports whether the slot has *fallback* rather than whether a
+     * consumer filled it, and would have been false either way. Both verified in a
+     * browser: `insertRule` throws a `SyntaxError` on the first, and an assigned
+     * element still leaves `slot.matches(':has(*)')` false.
      *
      * `slotFilled` is what the rest of the library already asks with. It is said
      * on the region inside this shadow root rather than on the host, because an
@@ -211,7 +203,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
      */
     markEmpty() {
         /* The header is not empty while this element is drawing its own control into
-           it, which is the case the old selector spelled with a second `:not`. */
+           it. */
         this.markRegion('header', ['header'], '[part="mark-all"]');
         this.markRegion('footer', ['footer']);
     }
@@ -234,21 +226,18 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         super.updated(changed);
         /* Before `markEmpty`, which reads what is assigned: on a feed with no items
            nothing else ever schedules a second update, so a header asked about
-           before its slot was filled stayed hidden for the life of the element. The
-           empty feed is the one state where the header is the only thing on screen,
-           and it was the one state that lost it. */
+           before its slot was filled stays hidden for the life of the element. The
+           empty feed is the one state where the header is the only thing on screen. */
         this.assign();
         this.markEmpty();
         this.markMedia();
         /* Written after the render rather than reflected during it, so it follows
-           every change rather than only the first, and so the server's output and a
-           hydrating consumer's markup agree that neither has it yet. */
-        /* **Zero is the absence of the attribute, not `unread="0"`.** Writing it at
-           rest put an attribute on the host that a consumer's server never sent, and
-           the comment above claimed the opposite: writing in `updated` is not "after
-           hydration", it is the same microtask checkpoint `firstUpdated` runs in,
-           which is exactly how `data-settled` was a bug on three routes. Only a
-           departure from resting writes. */
+           every change rather than only the first.
+    
+           **Zero is the absence of the attribute, not `unread="0"`.** Writing it at
+           rest puts an attribute on the host that a consumer's server never sent,
+           and `updated` is no later than hydration: it is the same microtask
+           checkpoint `firstUpdated` runs in. Only a departure from resting writes. */
         const unread = this.unread > 0 ? String(this.unread) : null;
         if (this.getAttribute('unread') !== unread) {
             if (unread === null) {

package/dist/number-input/root/number-input-root.d.ts

@@ -71,27 +71,19 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * What the browser may autofill here, as one of the platform's own tokens.
      *
      * Empty leaves the attribute off, which is the browser's default and is what
-     * lets autofill work at all. This used to be hardcoded `off`, so a reader
-     * could never have a birthday or a postal code filled in for them and a
-     * consumer had no way to ask for it. See 295.
+     * lets autofill work at all. Hardcoding `off` here is what stops a reader
+     * having a birthday or a postal code filled in for them, with no way for a
+     * consumer to ask for it.
      */
     autocomplete: string;
     /**
-     * Smallest value the reader may reach.
-     *
-     * Absent has no floor.
-     */
-    min?: number;
-    /**
-     * Largest value the reader may reach.
-     *
-     * Absent has no ceiling.
+     * Accessible name for the control that steps down.
      */
-    max?: number;
+    decrementLabel: string;
     /**
-     * How far one step moves.
+     * Accessible name for the control that steps up.
      */
-    step: number;
+    incrementLabel: string;
     /**
      * How far `PageUp` and `PageDown` move.
      *
@@ -100,6 +92,18 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * what a reader wants from a whole key.
      */
     largeStep?: number;
+    /**
+     * Largest value the reader may reach.
+     *
+     * Absent has no ceiling.
+     */
+    max?: number;
+    /**
+     * Smallest value the reader may reach.
+     *
+     * Absent has no floor.
+     */
+    min?: number;
     /**
      * Shown while the field is empty.
      *
@@ -122,13 +126,9 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     scrub: boolean;
     /**
-     * Accessible name for the control that steps down.
-     */
-    decrementLabel: string;
-    /**
-     * Accessible name for the control that steps up.
+     * How far one step moves.
      */
-    incrementLabel: string;
+    step: number;
     /** Focus is delegated to the field, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     private get control();
@@ -164,17 +164,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     /**
      * The label is the surface, which is where the convention already is.
      *
-     * A grip was drawn first, an icon of its own at the leading edge, and it was
-     * a second control in a field that already has three. Every tool that does
+     * Not a grip of its own at the leading edge, which is the obvious answer and
+     * is a second control in a field that already has three. Every tool that does
      * this well drags the *name* of the value: the label is present on every
      * field, costs no chrome, and a reader who wants to know what they are
      * dragging is already looking at it.
      *
      * Overridden rather than handled on the host, because the handlers have to
      * sit on the element that takes the capture. The markup is the mixin's, said
-     * again here, which is the duplication #76 exists to remove: when base
-     * renders break into methods a styled tier can extend, this becomes a call to
-     * `super` with three listeners added.
+     * again here, which is the duplication #76 exists to remove.
      *
      * A label with nothing in it is still nothing. `scrub` on a field whose label
      * is empty leaves no surface, which is honest: there is nowhere to put the
@@ -221,13 +219,13 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * and filling it with `min` would put a number in a form the reader never
      * gave.
      *
-     * **And text that is not a number is left alone, which this cleared at
-     * first.** Typing `2.7e` and tabbing away emptied the field: the reader looks
-     * back and their entry is gone with nothing saying why, and the likeliest
-     * cause is a fat finger on a number they had almost finished. Nothing is lost
-     * by keeping it, because `sync` has already marked it `badInput`, so the field
-     * shows as wrong and the form refuses to submit. Destroying the evidence of a
-     * mistake is not the same as preventing one.
+     * **And text that is not a number is left alone.** Clearing it means typing
+     * `2.7e` and tabbing away empties the field: the reader looks back and their
+     * entry is gone with nothing saying why, and the likeliest cause is a fat
+     * finger on a number they had almost finished. Nothing is lost by keeping it,
+     * because `sync` has already marked it `badInput`, so the field shows as wrong
+     * and the form refuses to submit. Destroying the evidence of a mistake is not
+     * the same as preventing one.
      */
     private readonly handleBlur;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */

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

@@ -107,15 +107,19 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
          * What the browser may autofill here, as one of the platform's own tokens.
          *
          * Empty leaves the attribute off, which is the browser's default and is what
-         * lets autofill work at all. This used to be hardcoded `off`, so a reader
-         * could never have a birthday or a postal code filled in for them and a
-         * consumer had no way to ask for it. See 295.
+         * lets autofill work at all. Hardcoding `off` here is what stops a reader
+         * having a birthday or a postal code filled in for them, with no way for a
+         * consumer to ask for it.
          */
         this.autocomplete = '';
         /**
-         * How far one step moves.
+         * Accessible name for the control that steps down.
          */
-        this.step = 1;
+        this.decrementLabel = 'Decrease';
+        /**
+         * Accessible name for the control that steps up.
+         */
+        this.incrementLabel = 'Increase';
         /**
          * Shown while the field is empty.
          *
@@ -138,13 +142,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
          */
         this.scrub = false;
         /**
-         * Accessible name for the control that steps down.
-         */
-        this.decrementLabel = 'Decrease';
-        /**
-         * Accessible name for the control that steps up.
+         * How far one step moves.
          */
-        this.incrementLabel = 'Increase';
+        this.step = 1;
         /** Where the pointer went down, and what the value was there. */
         this.scrubFrom = 0;
         this.scrubValue = 0;
@@ -228,13 +228,13 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
          * and filling it with `min` would put a number in a form the reader never
          * gave.
          *
-         * **And text that is not a number is left alone, which this cleared at
-         * first.** Typing `2.7e` and tabbing away emptied the field: the reader looks
-         * back and their entry is gone with nothing saying why, and the likeliest
-         * cause is a fat finger on a number they had almost finished. Nothing is lost
-         * by keeping it, because `sync` has already marked it `badInput`, so the field
-         * shows as wrong and the form refuses to submit. Destroying the evidence of a
-         * mistake is not the same as preventing one.
+         * **And text that is not a number is left alone.** Clearing it means typing
+         * `2.7e` and tabbing away empties the field: the reader looks back and their
+         * entry is gone with nothing saying why, and the likeliest cause is a fat
+         * finger on a number they had almost finished. Nothing is lost by keeping it,
+         * because `sync` has already marked it `badInput`, so the field shows as wrong
+         * and the form refuses to submit. Destroying the evidence of a mistake is not
+         * the same as preventing one.
          */
         this.handleBlur = () => {
             const control = this.control;
@@ -270,8 +270,8 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             else if (event.key === 'PageDown') {
                 this.stepDown(true);
                 /* Guarded the way `nudge` is. A read-only field still receives keydown,
-                   so Home on one with a `min` silently rewrote the value that the arrows
-                   beside it correctly refused to touch. */
+                   so an unguarded Home on one with a `min` silently rewrites the value
+                   that the arrows beside it correctly refuse to touch. */
             }
             else if (event.key === 'Home' &&
                 this.min !== undefined &&
@@ -322,9 +322,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const stepped = anchor + Math.round((value - anchor) / step) * step;
         const floored = this.min === undefined ? stepped : Math.max(this.min, stepped);
         const capped = this.max === undefined ? floored : Math.min(this.max, floored);
-        /* Decimal places from the step and the anchor together: a step of 0.25 from
-           an anchor of 0.1 lands on 0.35, which needs two rather than the two the
-           step alone would give by luck. */
+        /* Decimal places from the step and the anchor together: a step of 0.5 from
+           an anchor of 0.25 lands on 0.75, which needs two rather than the one the
+           step alone would give. */
         const places = Math.max(decimals(step), decimals(anchor));
         return Number(capped.toFixed(places));
     }
@@ -365,17 +365,15 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     /**
      * The label is the surface, which is where the convention already is.
      *
-     * A grip was drawn first, an icon of its own at the leading edge, and it was
-     * a second control in a field that already has three. Every tool that does
+     * Not a grip of its own at the leading edge, which is the obvious answer and
+     * is a second control in a field that already has three. Every tool that does
      * this well drags the *name* of the value: the label is present on every
      * field, costs no chrome, and a reader who wants to know what they are
      * dragging is already looking at it.
      *
      * Overridden rather than handled on the host, because the handlers have to
      * sit on the element that takes the capture. The markup is the mixin's, said
-     * again here, which is the duplication #76 exists to remove: when base
-     * renders break into methods a styled tier can extend, this becomes a call to
-     * `super` with three listeners added.
+     * again here, which is the duplication #76 exists to remove.
      *
      * A label with nothing in it is still nothing. `scrub` on a field whose label
      * is empty leaves no surface, which is honest: there is nowhere to put the
@@ -544,17 +542,20 @@ __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "autocomplete", void 0);
 __decorate([
-    property({ type: Number })
-], HelixHeadlessNumberInput.prototype, "min", void 0);
+    property({ attribute: 'decrement-label' })
+], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
+__decorate([
+    property({ attribute: 'increment-label' })
+], HelixHeadlessNumberInput.prototype, "incrementLabel", void 0);
+__decorate([
+    property({ attribute: 'large-step', type: Number })
+], HelixHeadlessNumberInput.prototype, "largeStep", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessNumberInput.prototype, "max", void 0);
 __decorate([
     property({ type: Number })
-], HelixHeadlessNumberInput.prototype, "step", void 0);
-__decorate([
-    property({ attribute: 'large-step', type: Number })
-], HelixHeadlessNumberInput.prototype, "largeStep", void 0);
+], HelixHeadlessNumberInput.prototype, "min", void 0);
 __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "placeholder", void 0);
@@ -565,11 +566,8 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
 __decorate([
-    property({ attribute: 'decrement-label' })
-], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
-__decorate([
-    property({ attribute: 'increment-label' })
-], HelixHeadlessNumberInput.prototype, "incrementLabel", void 0);
+    property({ type: Number })
+], HelixHeadlessNumberInput.prototype, "step", void 0);
 HelixHeadlessNumberInput = __decorate([
     customElement('helix-headless-number-input')
 ], HelixHeadlessNumberInput);