@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,11 +4,12 @@ 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 { AriaForwardController, appleTouch, valueAsNumber as asNumber, customElement, fillTemplate, formatNumber, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, valueAsNumber as asNumber, customElement, fillTemplate, formatNumber, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { decimals, formatGrain, strideOf } from '../grain.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
 let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -24,9 +25,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.locale = '';
         this.placeholder = '';
         this.readOnly = false;
-        this.roleDescription = 'number field';
         this.scrub = false;
-        this.step = 1;
         this.valueText = '';
         this.wheel = false;
         this.editing = false;
@@ -58,6 +57,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.scrubFrom = event.clientX;
             this.scrubValue = this.numeric ?? this.min ?? 0;
             this.scrubStart = this.value;
+            this.toggleState('scrubbing', true);
             event.preventDefault();
         };
         this.handleScrubMove = (event) => {
@@ -65,7 +65,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             if (!grip.hasPointerCapture(event.pointerId)) {
                 return;
             }
-            const step = Math.abs(this.step) || 1;
+            const step = this.stride;
             const unit = event.shiftKey ? (this.largeStep ?? 10) * step : step;
             const pitch = event.altKey ? SCRUB_FINE : SCRUB_PITCH;
             const steps = Math.round((event.clientX - this.scrubFrom) / pitch);
@@ -76,7 +76,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.requestValue(next);
             const control = this.control;
             if (control) {
-                restoreValue(control, this.value);
+                restoreValue(control, this.shown);
             }
         };
         this.handleScrubEnd = (event) => {
@@ -85,6 +85,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
                 return;
             }
             grip.releasePointerCapture(event.pointerId);
+            this.toggleState('scrubbing', false);
             if (this.value !== this.scrubStart) {
                 this.announceChange();
             }
@@ -93,7 +94,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             event.stopPropagation();
             const control = event.target;
             this.requestValue(control.value);
-            restoreValue(control, this.value);
+            restoreValue(control, this.shown);
         };
         this.handleBlur = () => {
             this.editing = false;
@@ -138,7 +139,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         };
         this.handleKeypress = (event) => {
             if (event.key === 'Enter' && !event.defaultPrevented) {
-                this.submitImplicitly();
+                submitImplicitly(this.form);
             }
         };
     }
@@ -159,14 +160,31 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return parseNumber(text, this.locale, this.formatOptions);
     }
+    get stride() {
+        return Math.abs(this.step ?? 0) || strideOf(this.formatOptions);
+    }
+    get grid() {
+        const step = Math.abs(this.step ?? 0);
+        const options = this.formatOptions;
+        if (step || !options) {
+            return step || 1;
+        }
+        const [locale, read, grain] = this.grainOf ?? [];
+        if (locale === this.locale && read === options && grain !== undefined) {
+            return grain;
+        }
+        const fresh = formatGrain(this.locale, options);
+        this.grainOf = [this.locale, options, fresh];
+        return fresh;
+    }
     onStep(value) {
-        const step = Math.abs(this.step) || 1;
+        const step = this.grid;
         const anchor = this.min ?? 0;
         const steps = (value - anchor) / step;
         return Math.abs(steps - Math.round(steps)) < 1e-9;
     }
     clamp(value) {
-        const step = Math.abs(this.step) || 1;
+        const step = this.grid;
         const anchor = this.min ?? 0;
         const stepped = anchor + Math.round((value - anchor) / step) * step;
         const floored = this.min === undefined ? stepped : Math.max(this.min, stepped);
@@ -178,7 +196,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         if (this.isDisabled || this.readOnly) {
             return;
         }
-        const step = Math.abs(this.step) || 1;
+        const step = this.stride;
         const from = this.numeric ?? this.min ?? 0;
         const next = this.clamp(this.numeric === null ? from : from + steps * step);
         this.land(String(next));
@@ -188,7 +206,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const applied = this.requestValue(next);
         const control = this.control;
         if (control) {
-            restoreValue(control, this.value);
+            restoreValue(control, this.shown);
         }
         if (applied && this.value !== before) {
             this.announceChange();
@@ -224,7 +242,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         const before = this.value;
         this.requestValue(String(this.clamp(parsed)));
-        restoreValue(control, this.value);
+        restoreValue(control, this.shown);
         return this.value !== before;
     }
     sync() {
@@ -254,7 +272,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }), control);
         }
         else if (parsed !== null && !this.onStep(parsed)) {
-            const step = Math.abs(this.step) || 1;
+            const step = this.grid;
             const anchor = this.min ?? 0;
             const below = this.clamp(anchor + Math.floor((parsed - anchor) / step) * step);
             const above = this.clamp(anchor + Math.ceil((parsed - anchor) / step) * step);
@@ -317,7 +335,6 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           .value=${this.shown}
           type="text"
           role=${this.touchApple ? nothing : 'spinbutton'}
-          aria-roledescription=${this.touchApple ? this.roleDescription : nothing}
           inputmode="decimal"
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
@@ -411,9 +428,6 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);
-__decorate([
-    property({ attribute: 'role-description' })
-], HelixHeadlessNumberInput.prototype, "roleDescription", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
@@ -436,11 +450,3 @@ HelixHeadlessNumberInput = __decorate([
     customElement('helix-headless-number-input')
 ], HelixHeadlessNumberInput);
 export { HelixHeadlessNumberInput };
-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/object-inspector/root/object-inspector-root.d.ts

@@ -15,13 +15,30 @@ import { type Row } from '../rows.js';
  * works with server rendering and with React hydration, which skips object
  * properties. `value` wins when both are set.
  *
- * The tree is one tab stop. Up and Down move between rows, Right opens a branch
- * or moves into it, Left closes it or moves to its parent, and Home and End
- * move to the first and last rows. Typing moves to the next row whose key
- * starts with what was typed, and `*` opens every branch beside the active
- * row. Focus stays on the tree, and `aria-activedescendant` marks the active
- * row. Each row carries its real level, position, and set size, including in
- * a windowed tree.
+ * **Keyboard.** The tree is one tab stop, and focus moves from row to row.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves to the next or the previous row. |
+ * | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. |
+ * | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. |
+ * | Home, End | Moves to the first or the last row. |
+ * | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. |
+ * | Enter, Space | Opens or closes a branch. |
+ * | `*` | Opens every branch beside the active row. |
+ * | A letter or a word | Moves to the next row whose key starts with what you typed. |
+ * | Command+C, Control+C | Copies the active row, where no text is selected. |
+ *
+ * The tree is a `treegrid`, as React Aria's Tree is: each entry is a `row` with
+ * one cell, and carries its real level, position, and set size, including in a
+ * windowed tree. Nothing in it is chosen, so no row carries `aria-selected`,
+ * and a focused row is not announced as selected.
+ *
+ * A reader opening or closing a branch sends `helix-before-open` or
+ * `helix-before-close`, which you can cancel, and then `toggle` with
+ * `newState` and `oldState`, as `<details>` does. The branch is the active
+ * row, and `expanded` holds every open branch. `*` asks once for all the
+ * branches it opens. A script writing `expanded` or `active` sends nothing.
  *
  * `active` is the active row's path, written the way a JSON Pointer writes it:
  * the empty string for the root and `/meta/tags/0` for an entry under it.
@@ -60,9 +77,12 @@ import { type Row } from '../rows.js';
  *
  * @event {HelixActivateEvent} helix-activate - The active row moved, by a key or a click. The detail's `value` is its path.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixBeforeCloseEvent} helix-before-close - A reader is about to close the active branch. Cancelable: cancel it to keep the branch open.
+ * @event {HelixBeforeOpenEvent} helix-before-open - A reader is about to open the active branch, or `*` the branches beside it. Cancelable: cancel it to keep them closed.
  * @event {HelixCopyEvent} helix-copy - A value was put on the clipboard, from the copy button or the keyboard.
  * @event {HelixFilterEvent} helix-filter - Text was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was.
  * @event {HelixFilteredEvent} helix-filtered - The filter field changed `filter`, which now holds the text.
+ * @event {ToggleEvent} toggle - A reader opened or closed a branch, with `newState` and `oldState`. `expanded` holds every open branch.
  *
  * @csspart after - The space the rows below the drawn rows would take, when `windowed` is set.
  * @csspart before - The space the rows above the drawn rows would take, when `windowed` is set.
@@ -71,6 +91,7 @@ import { type Row } from '../rows.js';
  * @csspart copy-button - The button inside the copy control.
  * @csspart copy-live - The live region inside the copy button, which says its `pending-label` when the copy becomes pending under focus.
  * @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
+ * @csspart copy-spinner - The ring the copy button turns while it is pending.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.
  * @csspart copy-tooltip-arrow - The tooltip's arrow, pointing at the copy button.
@@ -90,14 +111,14 @@ import { type Row } from '../rows.js';
  * @csspart live - How many entries a filter matched, in a region that screen readers announce when it changes. Drawn from the first filter on. Visually hidden in the styled tier.
  * @csspart null - A `null`.
  * @csspart number - A number.
- * @csspart row - One entry, as a tree item.
- * @csspart row-active - The entry the keyboard is on. Set alongside `row`.
+ * @csspart row - One entry, as a row of the tree grid, which takes focus.
+ * @csspart row-active - The entry the keyboard is on, which holds the tab stop. Set alongside `row`.
  * @csspart row-match - An entry whose key or value holds the filter. Set alongside `row`.
  * @csspart search-field - The field that sets `filter`, with `filterable`.
  * @csspart string - A string, in quotes.
  * @csspart summary - The brackets that stand for a branch's contents.
  * @csspart toggle - The caret on a branch. It points down when the branch is open and sideways when it is closed.
- * @csspart tree - The tree, which is the element that receives focus.
+ * @csspart tree - The tree grid that holds the rows.
  *
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
@@ -230,8 +251,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private found;
     /** Set by a keyboard move, so the next render brings the active row into view. */
     private revealing;
+    /** Set by a reader's move, so the next render moves focus to the active row. */
+    private focusing;
+    /** Whether a row held focus as this update began, so a row the render moved gets it back. */
+    private hadFocus;
     /** What has been typed toward a key, and when the last letter came. */
-    private typed;
+    private readonly typed;
     /** The branches of the last value seen, by path, so a new value can tell old ones from new. */
     private branches;
     /** Carries a host `aria-label` and `aria-labelledby` to the tree, which is what takes focus. */
@@ -266,16 +291,17 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** Opens the branches around each path, where the value has them. */
     private openAround;
     protected willUpdate(changed: PropertyValues): void;
-    /**
-     * Where the active row goes once the rows have moved: onto `path` where it
-     * is still shown, onto the first match where a filter just hid it, and
-     * otherwise onto the nearest branch around it that is.
-     */
-    private place;
     /** Says how many entries the filter matched, and nothing for an empty one. */
     private tell;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Moves focus to the active row, once it is drawn.
+     *
+     * After a reader's move only, so a script writing `active` does not take
+     * focus from wherever the reader is.
+     */
+    private focusActive;
     private load;
     /**
      * Brings the active row into the box.
@@ -292,6 +318,20 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private reveal;
     /** What copying takes: a branch as indented JSON, a string as itself. */
     private copyable;
+    /**
+     * Asks to open or close branches, and then does and says so:
+     * `helix-before-open` or `helix-before-close`, which a listener can cancel,
+     * then `toggle`. A reader's act only. Returns whether they moved.
+     */
+    private requestOpen;
+    /**
+     * Says a branch opened or closed under the platform's own name and in its
+     * shape: `toggle` with `newState` and `oldState`, not bubbling, as
+     * `<details>` sends it and as the open mixin does for the families whose
+     * open state it owns. A real `ToggleEvent` where the platform has one, and a
+     * plain event carrying the same two fields where it does not.
+     */
+    private announceToggle;
     private toggle;
     /**
      * Moves the active row, asking first: `helix-before-activate` with the path,
@@ -299,21 +339,24 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      */
     private move;
     private readonly handleKeydown;
-    /** Opens every branch at the active row's level under the same parent, as `*` asks. */
-    private openSiblings;
     /**
-     * Moves to the next row whose key starts with what was typed.
-     *
-     * Letters typed within half a second of each other run together, so `me`
-     * finds `meta` past `message`. A repeated single letter cycles through the
-     * keys that start with it.
+     * Moves to the next row whose key starts with what was typed, through core's
+     * `Typeahead`: letters within half a second run together, so `me` finds
+     * `meta` past `message`, and a repeated letter cycles through the keys that
+     * start with it.
      */
     private typeahead;
+    /**
+     * How many rows Page Down and Page Up move: the rows that fit in the tree's
+     * box, or in the window where the box does not scroll, less one, so the row
+     * at one edge lands at the other.
+     */
+    private pageRows;
     /** A press opens or closes the row it lands on, once that row is the active one. */
     private handleRowClick;
     /** Text typed in the filter field, asked for before the tree narrows to it. */
     private readonly handleFilterInput;
-    /** Down from the filter field goes to the tree, where the matches are. */
+    /** Down from the filter field goes to the active row, where the matches are. */
     private readonly handleFilterKeydown;
     private renderValue;
     /**
@@ -321,17 +364,29 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      *
      * **`row-active` and no attribute beside it.** Which row the keys are on is
      * drawn by a sheet and by nothing else: the accessibility tree hears it from
-     * `aria-activedescendant` on the tree, which points at this row's id, so an
-     * attribute would be a second spelling with no reader. The name is the one a
-     * consumer can reach, nothing being able to follow `::part()` with an
-     * attribute selector.
+     * focus, which the row holds, so an attribute would be a second spelling with
+     * no reader. The name is the one a consumer can reach, nothing being able to
+     * follow `::part()` with an attribute selector.
      *
-     * **`aria-selected="false"` on every row**, because nothing here is chosen.
-     * Chromium takes the active descendant of a single-selection tree as selected
-     * when no row says otherwise, so every arrow press was also announced as a
-     * selection. An explicit false is the one thing that turns that off.
+     * **A `row` of a `treegrid` with one cell, focused itself, and no
+     * `aria-selected`**, because nothing here is chosen. Chromium takes the
+     * focused item of a single-selection `tree` as selected, by focus or by
+     * `aria-activedescendant` (measured), so every arrow press was also announced
+     * as a selection, and `aria-selected="false"` on every row was the one way to
+     * turn it off. A row of a tree grid is not selected by focus, which is why
+     * React Aria's Tree is one. The cell is `display: contents`, so the row lays
+     * out its text as it did.
      */
     private renderRow;
+    /** Whether a row of the tree holds focus. */
+    private hasFocusedRow;
+    /**
+     * A row that takes focus some other way than the keys, from a script or a
+     * screen reader, becomes the active row, so focus and the keys agree.
+     */
+    private readonly handleFocusIn;
+    /** A row kept drawn for focus is let go once focus leaves it. */
+    private readonly handleFocusOut;
     /** The copy button, behind the seam Code Block's uses, so each tier renders its own. */
     protected renderCopyButton(row: Row | undefined): TemplateResult;
     protected render(): TemplateResult;