@fusion.dev/helix-core 0.177.0 → 0.177.2

package/custom-elements.json

@@ -12298,13 +12298,13 @@
             {
               "kind": "method",
               "name": "runPendingUpdate",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Runs an update that is on its way, so the verdict read next is the one\nfor what the control holds now.\n\n**A control reports its verdict as it updates, and an update waits for a\nmicrotask**, so a script that wrote `value` and asked at once was answered\nabout the value before: measured on Time Input, `value = '18:00'` past a\n`max` of 17:00 and `checkValidity()` returned true until `updateComplete`.\nA native control answers about the value it was just given, so the\nquestions a script can ask run the pending update first. Lit's\n`performUpdate` is the documented way to run one synchronously."
+              "description": "Runs an update that is on its way, so the verdict read next is the one\nfor what the control holds now.\n\n**A control reports its verdict as it updates, and an update waits for a\nmicrotask**, so a script that wrote `value` and asked at once was answered\nabout the value before: measured on Time Input, `value = '18:00'` past a\n`max` of 17:00 and `checkValidity()` returned true until `updateComplete`.\nA native control answers about the value it was just given, so the\nquestions a script can ask run the pending update first. Lit's\n`performUpdate` is the documented way to run one synchronously.\n\nProtected for a control that submits on its own, which has to hand the\nform the verdict for what it holds now: Pin Input's `autosubmit`."
             },
             {
               "kind": "field",
@@ -12415,6 +12415,24 @@
               "privacy": "private",
               "description": "Stops listening for the labels in this control's tree."
             },
+            {
+              "kind": "method",
+              "name": "formAssociatedCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement | null"
+                  }
+                }
+              ],
+              "description": "Called by the browser when the control's form changes: watches the new\nform's `checkValidity()`, as connecting does for the form it starts in."
+            },
             {
               "kind": "field",
               "name": "form",
@@ -21044,6 +21062,17 @@
               "privacy": "protected",
               "readonly": true,
               "description": "A press that focuses the field opens the picker.\n\nA reader who presses into this control is choosing, and making them find\nthe trigger afterwards is a second action for something they have already\nasked for. Typing still works with it up, because the picker follows the\nfield rather than the other way round. Focus by Tab or by `focus()` opens\nnothing: see the mixin's note.\n\n**Only where focus arrived from outside this element**, which is the whole\nof the difficulty: picking shuts the panel and puts the caret back in the\nfield, so an unguarded version reopens the picker the reader just\nanswered. `relatedTarget` is where focus came from, so a hand-off from the\npicker or the trigger is left alone and only a genuine arrival opens\nanything. `returning` covers the hand-off `relatedTarget` cannot see, and\n`MixinPickerField` says why.\n\nOn the input rather than on the field, too. Focus does not bubble, so a\nlistener there covers the text and not the trigger, which is what keeps\npressing the trigger from opening the panel on focus and then shutting it\nagain on the click."
+            },
+            {
+              "kind": "method",
+              "name": "selectOnArrival",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Selects the text a reader tabbed into, once the field shows it for\nediting, as Tab into a native `<input>` holding text selects all of it,\nfrom either side. Not when this element hands the caret back itself.\n\n**After the update**, because focus is what turns editing on, and the\ntext the field then writes put the caret at its end. Measured in\nChromium before this: Tab into a Time Input holding `14:30` left the\nselection at 5 to 5, and typing `9am` gave `14:309am`. A press keeps\nits caret where the pointer put it."
             }
           ],
           "attributes": [
@@ -21361,7 +21390,7 @@
               "kind": "field",
               "name": "handleTriggerClick",
               "type": {
-                "text": "() => void"
+                "text": "(event?: Event) => void"
               },
               "privacy": "protected",
               "readonly": true,
@@ -21619,6 +21648,17 @@
               "readonly": true,
               "description": "Escape and Tab pressed inside the panel, which `handleKeydown` never\nhears.\n\nA family binds `handleKeydown` on the field, and the surface is the\nfield's sibling, so a key pressed in the grid or the list went past it to\nthe document, where the dismissal closed the panel and left focus on a\ncell that was no longer shown. Measured: focus fell to the body. Here the\nkey is taken on the host, and focus goes back to the text.\n\n**Tab stays in the panel**, which is the APG date picker dialog and\nReact Aria's popover: the panel is a dialog, so Tab from its last control\ngoes to its first and Shift+Tab from its first goes to its last. Tab from\nthe grid left the dialog for the page behind it while the dialog stayed\nopen. Escape, a pick, or a press outside leaves it."
             },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Escape's close, which hands focus back to the control that opened the\npanel: the trigger after its press, which is the APG date picker\ndialog's rule, and the field otherwise.\n\n**Here rather than in each family.** Color Input had the rule alone, and\nDate Input and Time Input, on the same code, put focus in the text after\nthe trigger's press: one control before where the reader had been."
+            },
             {
               "kind": "field",
               "name": "handleFocusOut",
@@ -21643,6 +21683,16 @@
               "default": "false",
               "description": "Whether the trigger opened the panel, so focus moves into the picker."
             },
+            {
+              "kind": "field",
+              "name": "pressedOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the trigger's press opened the panel that is open now, so Escape returns there."
+            },
             {
               "kind": "field",
               "name": "handleKeypress",
@@ -33929,7 +33979,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.177.0'",
+          "default": "'0.177.2'",
           "description": "The version of the package this file ships in.\n\n**Written by `fusion/scripts/version.mjs`** wherever it writes the package's\n`package.json`, and stamped back into the repository beside it after a\nrelease, so the two never disagree; a spec beside this holds them to it.\nNothing else in the running code knows which release it is."
         }
       ],
@@ -34565,6 +34615,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.177.0"
+    "version": "0.177.2"
   }
 }

package/dist/helix-form-element/helix-form-element.d.ts

@@ -228,8 +228,11 @@ export declare class HelixFormElement extends HelixElement {
      * A native control answers about the value it was just given, so the
      * questions a script can ask run the pending update first. Lit's
      * `performUpdate` is the documented way to run one synchronously.
+     *
+     * Protected for a control that submits on its own, which has to hand the
+     * form the verdict for what it holds now: Pin Input's `autosubmit`.
      */
-    private runPendingUpdate;
+    protected runPendingUpdate(): void;
     /** Whether the control is checked when its form is submitted. */
     get willValidate(): boolean;
     /**
@@ -246,8 +249,10 @@ export declare class HelixFormElement extends HelixElement {
      * required `<input>` checked from a script fires `invalid` and does not match
      * `:user-invalid`, measured in Chromium. Every layer that takes `invalid` as
      * a reader's attempt asks this first, so a script that checks an untouched
-     * field does not mark it wrong. A submission, `reportValidity()`, and the
-     * reader's own edits still do.
+     * field does not mark it wrong. The same holds for `form.checkValidity()`,
+     * which fires `invalid` on every control in the form and marks no native
+     * one. A submission, `reportValidity()`, and the reader's own edits still
+     * mark it.
      */
     protected get checkingValidity(): boolean;
     /**
@@ -290,6 +295,11 @@ export declare class HelixFormElement extends HelixElement {
     private unwatchLabels;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Called by the browser when the control's form changes: watches the new
+     * form's `checkValidity()`, as connecting does for the form it starts in.
+     */
+    formAssociatedCallback(form: HTMLFormElement | null): void;
     /**
      * @internal Whether this control is a field that counts against implicit
      * submission: a single line of text, as `<input type="text">` is. Read by

package/dist/helix-form-element/helix-form-element.js

@@ -41,6 +41,24 @@ const firstTabStop = (node) => {
     }
     return null;
 };
+let formChecks = 0;
+const watchedForms = new WeakSet();
+const watchFormChecks = (form) => {
+    if (!form || watchedForms.has(form)) {
+        return;
+    }
+    watchedForms.add(form);
+    const check = form.checkValidity;
+    form.checkValidity = function checkValidity() {
+        formChecks += 1;
+        try {
+            return check.call(this);
+        }
+        finally {
+            formChecks -= 1;
+        }
+    };
+};
 export class HelixFormElement extends HelixElement {
     static { this.formAssociated = true; }
     get isDisabled() {
@@ -172,7 +190,7 @@ export class HelixFormElement extends HelixElement {
         }
     }
     get checkingValidity() {
-        return this.checkInProgress;
+        return this.checkInProgress || formChecks > 0;
     }
     reportValidity() {
         this.runPendingUpdate();
@@ -198,6 +216,7 @@ export class HelixFormElement extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        watchFormChecks(this.internals.form);
         this.addEventListener('click', this.focusFromLabel);
         this.addEventListener('invalid', this.refreshAnchor);
         this.unwatchLabels = watchLabels(this, () => this.requestUpdate());
@@ -209,6 +228,9 @@ export class HelixFormElement extends HelixElement {
         this.unwatchLabels?.();
         this.unwatchLabels = undefined;
     }
+    formAssociatedCallback(form) {
+        watchFormChecks(form);
+    }
     get blocksImplicitSubmission() {
         return false;
     }

package/dist/mixins/mixin-picker-editing/mixin-picker-editing.js

@@ -55,10 +55,11 @@ export const MixinPickerEditing = (Base) => {
                 const pressed = this.pressing;
                 this.pressing = false;
                 const from = event.relatedTarget;
-                if (!pressed || this.open || this.isDisabled || this.returning) {
-                    return;
+                const inside = from instanceof Node && Boolean(this.renderRoot?.contains?.(from));
+                if (!pressed && !this.returning) {
+                    this.selectOnArrival();
                 }
-                if (from instanceof Node && this.renderRoot?.contains?.(from)) {
+                if (!pressed || this.open || this.isDisabled || this.returning || inside) {
                     return;
                 }
                 this.requestOpen(true);
@@ -90,6 +91,15 @@ export const MixinPickerEditing = (Base) => {
             this.removeEventListener('click', this.handlePress);
             this.removeEventListener('keydown', this.handleEditKey);
         }
+        selectOnArrival() {
+            void this.updateComplete.then(() => {
+                const control = this.control;
+                const root = this.renderRoot;
+                if (control && root?.activeElement === control) {
+                    control.select();
+                }
+            });
+        }
     }
     __decorate([
         property({ attribute: 'readonly', reflect: true, type: Boolean })

package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts

@@ -56,7 +56,7 @@ export declare class MixinPickerFieldInterface {
      * The trigger's press: opens the panel with focus in the picker, or closes
      * it.
      */
-    protected readonly handleTriggerClick: () => void;
+    protected readonly handleTriggerClick: (event?: Event) => void;
     /** Enter in the text submits the form, as it does in a native text field. */
     protected readonly handleKeypress: (event: KeyboardEvent) => void;
     /**

package/dist/mixins/mixin-picker-field/mixin-picker-field.js

@@ -30,8 +30,7 @@ export const MixinPickerField = (Base) => {
             this.handleKeydown = (event) => {
                 if (event.key === 'Escape' && this.open) {
                     event.stopPropagation();
-                    this.requestOpen(false);
-                    this.returnFocus();
+                    this.dismiss();
                     return;
                 }
                 const fromText = event.composedPath()[0] === this.control;
@@ -73,8 +72,7 @@ export const MixinPickerField = (Base) => {
                 }
                 event.stopPropagation();
                 event.preventDefault();
-                this.requestOpen(false);
-                this.returnFocus();
+                this.dismiss();
             };
             this.handleFocusOut = (event) => {
                 const to = event.relatedTarget;
@@ -91,14 +89,17 @@ export const MixinPickerField = (Base) => {
                 this.announceChange();
             };
             this.fromTrigger = false;
+            this.pressedOpen = false;
             this.handleKeypress = (event) => {
                 if (event.key === 'Enter' && !event.defaultPrevented) {
                     submitImplicitly(this.form);
                 }
             };
-            this.handleTriggerClick = () => {
-                this.fromTrigger = !this.open;
+            this.handleTriggerClick = (event) => {
+                const opening = !this.open;
+                this.fromTrigger = opening;
                 this.toggleOpen();
+                this.pressedOpen = event !== undefined && opening && this.open;
             };
             this.returning = false;
         }
@@ -147,6 +148,18 @@ export const MixinPickerField = (Base) => {
             }
             this.refreshFeedback();
         }
+        dismiss() {
+            const trigger = this.pressedOpen ? this.partNamed('trigger') : null;
+            this.pressedOpen = false;
+            this.requestOpen(false);
+            if (trigger) {
+                this.returning = true;
+                trigger.focus();
+                this.returning = false;
+                return;
+            }
+            this.returnFocus();
+        }
         get blocksImplicitSubmission() {
             return this.control !== null;
         }
@@ -186,6 +199,9 @@ export const MixinPickerField = (Base) => {
                     this.partNamed('picker')?.focus();
                 }
                 this.fromTrigger = false;
+                if (!this.open) {
+                    this.pressedOpen = false;
+                }
             }
             this.sync();
         }

package/dist/utils/number-format/number-format.js

@@ -32,8 +32,9 @@ export const parseNumber = (text, locale = '', options) => {
     const parts = format.formatToParts(-12345.6);
     const one = format.formatToParts(1);
     const of = (type, from = parts) => from.filter((part) => part.type === type).map((part) => part.value);
-    const group = of('group')[0] ?? ',';
-    const decimal = of('decimal')[0] ?? '.';
+    const plain = formatter(locale, undefined).formatToParts(-12345.6);
+    const group = of('group')[0] ?? of('group', plain)[0] ?? ',';
+    const decimal = of('decimal')[0] ?? of('decimal', plain)[0] ?? '.';
     const named = (from) => [
         ...of('currency', from),
         ...of('percentSign', from),

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.177.0";
+export declare const VERSION = "0.177.2";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.177.0';
+export const VERSION = '0.177.2';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.177.0",
+  "version": "0.177.2",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -68,11 +68,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.177.0"
+    "@fusion.dev/helix-icons": "0.177.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.177.0",
-    "@fusion.dev/helix-testing": "0.177.0",
+    "@fusion.dev/helix-cem": "0.177.2",
+    "@fusion.dev/helix-testing": "0.177.2",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },