@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -16,6 +16,15 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * band. `optimum` sets the preferred band. The band next to it is fair, and the
  * band two away is poor.
  *
+ * The band is a custom state on the meter, `good`, `fair` or `poor`, beside
+ * `over` and `under` for a value past an end, so a page styles the meter
+ * around the fill as well as the fill.
+ *
+ * **`live` says the reading when it moves into another band**, such as "92%,
+ * Poor", in a polite region, for a meter whose value changes while a reader is
+ * on the page: a disk filling or a battery draining. The band's word comes from
+ * `band-labels`.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -24,6 +33,8 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  *
  * @slot label - A visible label. Its words name the meter in place of `label`.
  *
+ * @event {HelixBandEvent} helix-band - Fired when the reading moves into another band, with the band it is in now, or `''` where it is in none. Not sent on the first render, since a meter that arrives in a band has not moved.
+ *
  * @csspart groove - The unfilled circle, in `ring` and `arc`.
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
@@ -31,6 +42,7 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @csspart indicator-over - The fill while the value is above `max`. Set alongside `indicator`.
  * @csspart indicator-poor - The fill while the reading is two bands from the good band. Set alongside `indicator`.
  * @csspart indicator-under - The fill while the value is below `min`. Set alongside `indicator`.
+ * @csspart live - A polite region that says the reading as it moves into another band, under `live`, rendered from the first time it does. Hide it visually.
  * @csspart tick - A mark at `low` or at `high`.
  * @csspart track - The whole range, or the drawing in `ring` and `arc`.
  * @csspart value - The reading as text, shown when `show-value` is set.
@@ -39,6 +51,12 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @cssproperty --meter-at - Where a bound sits on a linear track, as a percentage.
  * @cssproperty --meter-fraction - The value as a fraction of the range, 0 to 1.
  * @cssproperty --meter-sweep - How much of the circle the arc covers, as a path length.
+ *
+ * @cssstate fair - The reading is in a band next to the good band.
+ * @cssstate good - The reading is in the good band.
+ * @cssstate over - The value is above `max`.
+ * @cssstate poor - The reading is two bands from the good band.
+ * @cssstate under - The value is below `min`.
  */
 export declare class HelixHeadlessMeter extends HelixElement {
     /**
@@ -71,6 +89,28 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * no reader.
      */
     band?: MeterBand;
+    /**
+     * The words each band is said with under `live`, by its name, written as
+     * JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+     *
+     * A band left out keeps its default: "Good", "Fair" or "Poor".
+     */
+    bandLabels: Partial<Record<MeterBand, string>>;
+    /**
+     * `Intl.NumberFormat` options the reading is written with, as React Aria's
+     * Meter and ProgressBar take them: a unit, a currency, or a number of
+     * decimals. Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-meter value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-meter>
+     * ```
+     *
+     * A `percent` style writes the share of the range, and any other the value
+     * itself, so the example says "18 GB", and a value past an end as it is.
+     * Absent is a whole percentage. The words are announced as well as shown.
+     * `value-text` still wins.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * Bottom of the high band.
      *
@@ -84,6 +124,15 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * shows, so the name and the label cannot disagree.
      */
     label: string;
+    /**
+     * Says the reading in a polite `live` region each time it moves into
+     * another band, with the band's word, such as "92%, Poor".
+     *
+     * For a meter whose value changes while it is on screen. Off by default,
+     * because a meter that reads a fixed level has nothing new to say. A meter
+     * with no bands says nothing.
+     */
+    live: boolean;
     /**
      * The locale the percentage is written in, such as `fr` for `72 %`.
      *
@@ -156,6 +205,13 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * fair summary of a task and a poor one of a quantity.
      */
     valueText: string;
+    /** The region `live` speaks in, rendered from the first time it does. */
+    private readonly status;
+    /**
+     * The band at the last update, so a move into another one is heard once:
+     * an empty string for none, and undefined before the first update.
+     */
+    private lastBand;
     /** The range, clamped so `max` is never at or below `min`. */
     private get span();
     /** The reading, pulled into the range. */
@@ -199,9 +255,14 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * keeps an unbanded meter from being painted as good news.
      */
     private get computedBand();
-    /** What the reading says, which is the consumer's words or a percentage. */
+    /**
+     * What the reading says: the consumer's words, or the reading in
+     * `format-options`, a share of the range for a percent and the value for
+     * anything else.
+     */
     private get text();
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /**
      * The same reading, drawn round.
      *

package/dist/meter/root/meter-root.js

@@ -4,31 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixBandEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const percents = new Map();
-const percent = (share, locale) => {
-    let format = percents.get(locale);
-    if (!format) {
-        format = new Intl.NumberFormat(locale || undefined, {
-            maximumFractionDigits: 0,
-            style: 'percent',
-        });
-        percents.set(locale, format);
-    }
-    return format.format(share);
-};
+const BAND_WORDS = { fair: 'Fair', good: 'Good', poor: 'Poor' };
 let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     constructor() {
         super(...arguments);
+        this.bandLabels = {};
         this.label = 'Meter';
+        this.live = false;
         this.locale = '';
         this.max = 100;
         this.min = 0;
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.status = new StatusController(this);
         this.renamed = () => {
             this.requestUpdate();
         };
@@ -80,7 +72,8 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         return distance === 0 ? 'good' : distance === 1 ? 'fair' : 'poor';
     }
     get text() {
-        return this.valueText || percent(this.ratio, this.locale);
+        return (this.valueText ||
+            readingText(Number.isFinite(this.value) ? this.value : this.span.min, this.ratio, this.locale, this.formatOptions));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -90,7 +83,27 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
         this.internals.ariaValueText =
-            this.valueText || (this.beyond ? percent(this.ratio, this.locale) : null);
+            this.valueText || this.formatOptions !== undefined || this.beyond ? this.text : null;
+        const band = this.computedBand;
+        const beyond = this.beyond;
+        this.toggleState('fair', band === 'fair');
+        this.toggleState('good', band === 'good');
+        this.toggleState('poor', band === 'poor');
+        this.toggleState('over', beyond === 'over');
+        this.toggleState('under', beyond === 'under');
+    }
+    updated(changed) {
+        super.updated(changed);
+        const band = this.computedBand;
+        const moved = this.lastBand !== undefined && (band ?? '') !== this.lastBand;
+        this.lastBand = band ?? '';
+        if (!moved) {
+            return;
+        }
+        this.dispatchEvent(new HelixBandEvent({ band: band ?? '' }));
+        if (band && this.live) {
+            this.status.say(`${this.text}, ${this.bandLabels[band] ?? BAND_WORDS[band]}`);
+        }
     }
     renderRound() {
         const bounds = this.thresholds;
@@ -138,18 +151,27 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
               style="--meter-fraction: ${this.fraction}"
             ></div>
           </div>`}
-      ${this.showValue ? html `<span part="value">${this.text}</span>` : nothing}`;
+      ${this.showValue ? html `<span part="value">${this.text}</span>` : nothing}${drawStatus(this.status)}`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "band", void 0);
+__decorate([
+    property({ attribute: 'band-labels', converter: wordsConverter })
+], HelixHeadlessMeter.prototype, "bandLabels", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessMeter.prototype, "formatOptions", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMeter.prototype, "high", void 0);
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMeter.prototype, "live", void 0);
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "locale", void 0);

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

@@ -36,8 +36,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/navigation
  *
  * @slot - The destinations, as your own links.
+ * @slot indicator - A marker of your own, drawn inside the `indicator` part, where the current destination's place and size reach it.
  *
- * @csspart indicator - The marker that moves to the current destination.
+ * @csspart indicator - The marker that moves to the current destination. It carries the destination's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed.
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {

package/dist/navigation/root/navigation-root.js

@@ -53,7 +53,7 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
         });
     }
     get items() {
-        const slot = this.renderRoot.querySelector('slot');
+        const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []);
     }
     watch() {
@@ -80,7 +80,7 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     }
     render() {
         return html `<nav part="nav" aria-label=${this.label}>
-      <div part="indicator" aria-hidden="true"></div>
+      <div part="indicator" aria-hidden="true"><slot name="indicator"></slot></div>
       <slot @slotchange=${() => this.watch()}></slot>
     </nav>`;
     }

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotificationGroup } from '../group/notification-group.js';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
@@ -32,7 +32,8 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * **`load-more` adds a button after the list** that sends `helix-load-more`,
  * for a feed that holds one page of a longer list. Append the next page, set
  * `loading` while it is on its way, and take `load-more` off once there is
- * nothing more. The button is hidden while the feed is loading.
+ * nothing more. While the feed is loading the button stays, so focus stays on
+ * it, and it is `aria-disabled` and sends nothing.
  *
  * @since 0.1.0
  * @status stable
@@ -41,8 +42,10 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @documentation https://fusion.dev/helix/components/notifications
  *
  * @slot - The notifications.
+ * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own. The live region still says `empty-text`.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
+ * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader. The live region still says `loading-text`.
  *
  * @event {HelixDismissEvent} helix-dismiss - Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader presses the `load-more` button, asking for the next page of the feed.
@@ -55,8 +58,10 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is loading.
  * @csspart mark-all - The control that marks everything read.
- * @csspart more - The button after the list that asks for more, while `load-more` is set and the feed is not loading.
+ * @csspart more - The button after the list that asks for more, while `load-more` is set. It is `aria-disabled` while the feed is loading.
  *
+ * @cssstate empty - While the feed holds no notification and is not loading. Never on the server, which cannot count the rows.
+ * @cssstate loading - While `loading` is set.
  * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
 export declare class HelixHeadlessNotifications extends HelixHeadlessNotifications_base {
@@ -219,6 +224,11 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The empty or the loading line, each around a slot of the same name whose
+     * fallback is the words, so a page can put its own in.
+     */
+    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
     /**
      * Says whether anything in the feed has media, so every item can hold the
      * column open whether or not it has one of its own.
@@ -260,7 +270,13 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
-    /** Asks for the next page, for the `load-more` button. */
+    /**
+     * Asks for the next page, for the `load-more` button, unless a page is
+     * already on its way.
+     *
+     * The button stays while the feed is loading, marked `aria-disabled`, so
+     * focus stays on it: removed, it took focus with it to the body.
+     */
     private readonly askForMore;
     /**
      * Marks everything read, and keeps focus in the feed.

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

@@ -54,7 +54,9 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
         };
         this.askForMore = () => {
-            this.dispatchEvent(new HelixLoadMoreEvent());
+            if (!this.loading) {
+                this.dispatchEvent(new HelixLoadMoreEvent());
+            }
         };
         this.handleMarkAll = (event) => {
             const button = event.currentTarget;
@@ -137,7 +139,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             return;
         }
         list.assign(...this.rows);
-        for (const name of ['header', 'footer']) {
+        for (const name of ['header', 'footer', 'empty', 'loading']) {
             const slot = root?.querySelector?.(`slot[name="${name}"]`);
             slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
         }
@@ -151,9 +153,9 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     rove() {
         const rows = this.reachable;
         const stop = rovingStop(rows, this.stopRow);
-        const direct = this.rows;
-        for (const row of this.items) {
-            const position = direct.indexOf(row) + 1;
+        const items = this.items;
+        for (const row of items) {
+            const position = items.indexOf(row) + 1;
             whenHydrated(row, () => {
                 row.stop = row === stop;
                 row.position = this.total === undefined ? 0 : position;
@@ -176,6 +178,16 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Notifications', role: 'region' });
+        this.toggleState('loading', this.loading);
+        this.toggleState('empty', !this.loading && this.childrenKnown && this.items.length === 0);
+    }
+    renderStatus(hasContent) {
+        if (!this.loading && hasContent) {
+            return nothing;
+        }
+        return this.loading
+            ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
+            : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
     }
     markMedia() {
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));
@@ -210,13 +222,23 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             </button>`
             : nothing}
       </div>
-      <div part="list" role="list" aria-busy=${this.loading ? 'true' : nothing}>
+      <div
+        part="list"
+        role="list"
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.label || nothing}
+      >
         <slot name="items" @slotchange=${this.handleSlotChange}></slot>
         ${this.renderStatus(hasItems)}
       </div>
       ${this.renderLive(hasItems)}
-      ${this.loadMore && !this.loading
-            ? html `<button part="more" type="button" @click=${this.askForMore}>
+      ${this.loadMore
+            ? html `<button
+              part="more"
+              type="button"
+              aria-disabled=${this.loading ? 'true' : nothing}
+              @click=${this.askForMore}
+            >
               ${this.loadMoreLabel}
             </button>`
             : nothing}

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

@@ -0,0 +1,28 @@
+/**
+ * The steps a number field takes when `step` is not set, read off its format.
+ *
+ * React Aria's NumberField does not round a typed number to whole steps when
+ * no step is given: it keeps the fraction the format shows. A field showing
+ * dollars keeps cents, and one showing a percent steps by one percent.
+ */
+/**
+ * The smallest amount a format shows, which is the grid a typed number is
+ * rounded to when no `step` is set: `0.01` for a currency in dollars, `0.001`
+ * for a plain decimal, and `0.01` for a whole percent, since a percent shows
+ * the number a hundred times over.
+ */
+export declare const formatGrain: (locale: string, options: Intl.NumberFormatOptions) => number;
+/**
+ * How far one press moves when no `step` is set: one percent for a percent,
+ * as React Aria does, and one otherwise.
+ */
+export declare const strideOf: (options: Intl.NumberFormatOptions | undefined) => number;
+/**
+ * How many decimal places a number is written with.
+ *
+ * Read off the string rather than computed, because the question is about how
+ * the consumer wrote the step and not about what the binary can represent.
+ * `1e-7` is handled separately: its string form has no dot at all, so counting
+ * after one would say zero and round every result to a whole number.
+ */
+export declare const decimals: (value: number) => number;

package/dist/number-input/grain.js

@@ -0,0 +1,14 @@
+export const formatGrain = (locale, options) => {
+    const { maximumFractionDigits = 0 } = new Intl.NumberFormat(locale || undefined, options).resolvedOptions();
+    const places = maximumFractionDigits + (options.style === 'percent' ? 2 : 0);
+    return Number(`1e-${places}`);
+};
+export const strideOf = (options) => options?.style === 'percent' ? 0.01 : 1;
+export const decimals = (value) => {
+    const text = String(value);
+    const exponent = /e-(\d+)$/.exec(text);
+    if (exponent) {
+        return Number(exponent[1]);
+    }
+    return (text.split('.')[1] ?? '').length;
+};

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

@@ -25,9 +25,10 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * The locale's group separators are read in every field, so `1,234` is a
  * number in `en-US`.
  *
- * On iOS and iPadOS the field is a text field described as a number field,
- * with no `role="spinbutton"`, which VoiceOver reads as a slider you cannot
- * type in. React Aria's NumberField does the same.
+ * On iOS and iPadOS the field is a plain text field, with no
+ * `role="spinbutton"`, which VoiceOver reads as a slider you cannot type in,
+ * and no role description, so VoiceOver says the field is required. React
+ * Aria's NumberField does the same.
  *
  * Validity follows the platform's rules: `min`, `max`, and `step` are checked
  * and reported through the host's own `setValidity`, under the platform's flag
@@ -36,6 +37,19 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * Stepping is separate from typing, so a number is not corrected while you type
  * it.
  *
+ * **Keyboard.** The field is one tab stop, and the stepper buttons are not in
+ * the tab order.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Up, Down | Steps the value up or down by `step`. |
+ * | Page Up, Page Down | Steps by `large-step` steps, ten by default. |
+ * | Home, End | Goes to `min` or `max`, where there is one. Without one, moves the caret. |
+ * | Enter | Commits the typed number and submits the form, as a native field does. |
+ *
+ * The field has `role="spinbutton"` with `aria-valuenow`, `aria-valuemin`,
+ * `aria-valuemax`, and the formatted text in `aria-valuetext`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -63,6 +77,7 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart label - The label above the field. It is also the grip you drag when `scrub` is set.
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate scrubbing - The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
  */
 export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_base {
     protected readonly aria: AriaForwardController;
@@ -154,11 +169,6 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Prevents editing. The value is still submitted with the form.
      */
     readOnly: boolean;
-    /**
-     * What the field is described as on iOS and iPadOS, where it carries no
-     * spinbutton role. See the class description.
-     */
-    roleDescription: string;
     /**
      * Makes the label a grip that changes the value when it is dragged.
      *
@@ -173,8 +183,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     /**
      * How far one step moves. A value off the step grid, counted from `min`, is
      * invalid, as it is in a native number field.
+     *
+     * Unset, a step moves by one, or by one percent under a percent format, and
+     * a typed number is rounded to the smallest amount `format-options` shows
+     * rather than to whole steps, as React Aria's NumberField does: a field
+     * showing dollars keeps the cents typed into it. Without `format-options`
+     * the grid is whole numbers, as in a native number field.
      */
-    step: number;
+    step?: number;
     /**
      * The message the browser shows when the number is off the step grid, with
      * `{below}` and `{above}` filled in with the nearest valid values.
@@ -213,6 +229,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();
+    /** The grain last read off the format, with the locale and options it was read for. */
+    private grainOf?;
+    /** How far one press moves: `step`, or the stride the format implies. */
+    private get stride();
+    /**
+     * The grid a typed number is rounded to: `step` where it is set, and
+     * otherwise the smallest amount the format shows, or whole numbers.
+     */
+    private get grid();
     /** Whether `value` is on the step grid, counted from `min`. */
     private onStep;
     /**