@fusion.dev/helix-core 0.163.0 → 0.165.0

package/custom-elements.json

@@ -19665,6 +19665,25 @@
               "privacy": "protected",
               "description": "Where focus lands when a neighbor that held it is removed: the dismiss control.",
               "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "present",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handFocusOn",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
           "helix": {}
@@ -19729,6 +19748,27 @@
               "description": "Where focus lands when a neighbor that held it is removed: this\nelement's dismiss control.\n\nA seam for a member whose focus lives elsewhere: a tag in a Tag Group is\na row the arrows move between, so a removed row hands focus to the next\nrow rather than to its remove button.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "present",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether the element is still on the page for a reader, which is what\nthe focus hand-off waits on: connected, for a surface the page removes.\nA surface that hides itself says it is gone once hidden, and calls\n`handFocusOn` then.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handFocusOn",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Hands focus on now, where a dismissal is waiting for this element to\ngo: for a surface that hides itself, once it has."
+            },
             {
               "kind": "method",
               "name": "dismiss",
@@ -21868,6 +21908,61 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "edit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Applies an editing key to the segment, the arrows, Backspace, a digit or\na letter, and says whether it edited anything."
+            },
+            {
+              "kind": "field",
+              "name": "composing",
+              "type": {
+                "text": "[Node, string | null][]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "What the segment's text was when a composition started to write into it."
+            },
+            {
+              "kind": "field",
+              "name": "handleSegmentBeforeInput",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Text a touch keyboard writes into a segment, which arrives as input and\nnot as a key: an on-screen keyboard sends `Unidentified` for its keys,\nso a digit tapped on a phone is read here, as React Aria's segments read\nit. Every input is canceled, so the segment holds only what the field\ndraws in it."
+            },
+            {
+              "kind": "field",
+              "name": "handleSegmentInput",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "collapseSelection",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Keeps the caret at the start of the segment with focus, where Chromium\nfires input for a typed key, and where Android's keyboard does not\ncompose over the segment's text. A selection already there, or outside\nthe segment, is left alone."
+            },
             {
               "kind": "field",
               "name": "handleSegmentKeydown",
@@ -28802,6 +28897,24 @@
           ],
           "description": "A reading in words: `value` written with `options` where they say another\nstyle, and otherwise `share`, from 0 to 1, as a percentage, whole unless\n`options` say more.\n\nMeter and Progress each wrote this, with the value each holds to its range\nand the share of it that is filled."
         },
+        {
+          "kind": "function",
+          "name": "latinDigits",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Text with every decimal digit written in ASCII: Arabic-Indic `١٢٣`, Persian\n`۱۲۳` and Devanagari `१२३` read as `123`. A keyboard in one of those\nlocales types its own digits, and `Number` reads only ASCII."
+        },
         {
           "kind": "function",
           "name": "parseNumber",
@@ -28857,6 +28970,14 @@
             "module": "src/utils/number-format/number-format.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "latinDigits",
+          "declaration": {
+            "name": "latinDigits",
+            "module": "src/utils/number-format/number-format.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "parseNumber",
@@ -33143,7 +33264,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.163.0'",
+          "default": "'0.165.0'",
           "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."
         }
       ],
@@ -33703,6 +33824,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.163.0"
+    "version": "0.165.0"
   }
 }

package/dist/controllers/aria-forward-controller/aria-forward-controller.js

@@ -12,6 +12,7 @@ const STATES = [
     'aria-controls',
     'aria-invalid',
     'aria-pressed',
+    'aria-required',
 ];
 export class AriaForwardController {
     get label() {

package/dist/mixins/mixin-dismissible/mixin-dismissible.d.ts

@@ -15,6 +15,8 @@ export declare class DismissibleElement {
     protected dismissEvent(): HelixDismissEvent;
     /** Where focus lands when a neighbor that held it is removed: the dismiss control. */
     protected get returnFocusTo(): HTMLElement | null;
+    protected get present(): boolean;
+    protected handFocusOn(): void;
 }
 /**
  * Grafts `dismissible`, its label, and the event that says so.

package/dist/mixins/mixin-dismissible/mixin-dismissible.js

@@ -29,6 +29,16 @@ export const MixinDismissible = (Base) => {
         get returnFocusTo() {
             return this.shadowRoot?.querySelector('[part~="dismiss"]') ?? null;
         }
+        get present() {
+            return this.isConnected;
+        }
+        handFocusOn() {
+            const settle = this.handOff;
+            if (settle) {
+                this.forgetFocus?.();
+                requestAnimationFrame(() => settle(true));
+            }
+        }
         dismiss() {
             const inside = deepContains(this, deepActiveElement());
             const neighbors = inside ? this.neighbors() : [];
@@ -70,7 +80,8 @@ export const MixinDismissible = (Base) => {
             this.forgetFocus?.();
             const settle = (late) => {
                 const active = document.activeElement;
-                if (this.isConnected || (active !== null && active !== document.body)) {
+                const dropped = active === null || active === document.body || deepContains(this, active);
+                if (this.present || !dropped) {
                     return;
                 }
                 for (const neighbor of neighbors) {
@@ -101,11 +112,7 @@ export const MixinDismissible = (Base) => {
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            const settle = this.handOff;
-            if (settle) {
-                this.forgetFocus?.();
-                requestAnimationFrame(() => settle(true));
-            }
+            this.handFocusOn();
         }
     }
     __decorate([

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

@@ -8,6 +8,7 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { isPartial, isTwelveHourLayout, segmentKey, segmentLayout, segmentName, segmentRange, segmentsOf, segmentsValue, segmentText, segmentValueText, shownValue, } from '../../utils/date-segments/date-segments.js';
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
+import { latinDigits } from '../../utils/number-format/number-format.js';
 import { appleTouch } from '../../utils/platform/platform.js';
 import { verdictFlags } from '../../utils/verdict-flags/verdict-flags.js';
 import { formatWords, words } from '../../words/words.js';
@@ -27,11 +28,59 @@ export const MixinSegmentedField = (Base) => {
             this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
             this.entered = undefined;
             this.opener = undefined;
+            this.composing = [];
+            this.handleSegmentBeforeInput = (event) => {
+                const element = event.currentTarget;
+                if (event.inputType === 'insertCompositionText') {
+                    this.composing = [...element.childNodes].map((node) => [node, node.nodeValue]);
+                    return;
+                }
+                event.preventDefault();
+                if (event.inputType === 'deleteContentBackward' ||
+                    event.inputType === 'deleteContentForward') {
+                    this.typed = '';
+                    this.edit(element, 'Backspace');
+                    return;
+                }
+                for (const character of latinDigits(event.data ?? '')) {
+                    this.edit(element, character);
+                }
+            };
+            this.handleSegmentInput = (event) => {
+                const element = event.currentTarget;
+                const { data, inputType } = event;
+                if (inputType !== 'insertCompositionText') {
+                    return;
+                }
+                const kept = new Set(this.composing.map(([node]) => node));
+                for (const node of [...element.childNodes]) {
+                    if (!kept.has(node)) {
+                        node.remove();
+                    }
+                }
+                for (const [node, text] of this.composing) {
+                    node.nodeValue = text;
+                }
+                this.composing = [];
+                if (element.dataset.segment === 'dayPeriod' && data) {
+                    this.edit(element, data.slice(-1));
+                }
+            };
+            this.collapseSelection = () => {
+                const root = this.renderRoot;
+                const active = this.segmentElements.find((one) => one === root?.activeElement);
+                const selection = document.getSelection();
+                const at = selection?.anchorNode;
+                if (active &&
+                    selection &&
+                    at &&
+                    active.contains(at) &&
+                    !(at === active && selection.isCollapsed && selection.anchorOffset === 0)) {
+                    selection.collapse(active, 0);
+                }
+            };
             this.handleSegmentKeydown = (event) => {
                 const element = event.currentTarget;
-                const kind = element.dataset.segment;
-                const row = Number(element.dataset.row ?? 0);
-                const twelve = isTwelveHourLayout(this.layout);
                 if (event.key === 'ArrowDown' && event.altKey) {
                     event.preventDefault();
                     this.opener = element;
@@ -56,36 +105,23 @@ export const MixinSegmentedField = (Base) => {
                     this.typed = '';
                     return;
                 }
-                if (this.readOnly || this.isDisabled) {
-                    return;
-                }
-                const edit = segmentKey(event.key, {
-                    kind,
-                    locale: this.segmentLocale,
-                    segments: this.parts[row] ?? {},
-                    system: this.segmentSystem,
-                    twelve,
-                    typed: this.typed,
-                });
-                if (edit) {
+                if (this.edit(element, latinDigits(event.key))) {
                     event.preventDefault();
-                    this.typed = edit.typed;
-                    this.take(row, edit.segments);
-                    if (edit.advance) {
-                        this.moveFocus(element, 1);
-                    }
                 }
             };
             this.handleSegmentsFocusIn = (event) => {
                 this.typed = '';
+                document.getSelection()?.collapse(event.target, 0);
                 if (!this.segmentElements.includes(event.relatedTarget)) {
                     this.entered = this.value;
+                    document.addEventListener('selectionchange', this.collapseSelection);
                 }
             };
             this.handleSegmentsFocusOut = (event) => {
                 if (this.segmentElements.includes(event.relatedTarget)) {
                     return;
                 }
+                document.removeEventListener('selectionchange', this.collapseSelection);
                 if (this.entered !== undefined && this.entered !== this.value) {
                     this.announceChange();
                 }
@@ -174,6 +210,29 @@ export const MixinSegmentedField = (Base) => {
             const all = this.segmentElements;
             all[all.indexOf(from) + by]?.focus();
         }
+        edit(element, key) {
+            if (this.readOnly || this.isDisabled) {
+                return false;
+            }
+            const row = Number(element.dataset.row ?? 0);
+            const edit = segmentKey(key, {
+                kind: element.dataset.segment,
+                locale: this.segmentLocale,
+                segments: this.parts[row] ?? {},
+                system: this.segmentSystem,
+                twelve: isTwelveHourLayout(this.layout),
+                typed: this.typed,
+            });
+            if (!edit) {
+                return false;
+            }
+            this.typed = edit.typed;
+            this.take(row, edit.segments);
+            if (edit.advance) {
+                this.moveFocus(element, 1);
+            }
+            return true;
+        }
         willUpdate(changed) {
             super.willUpdate(changed);
             const own = this.own;
@@ -196,6 +255,7 @@ export const MixinSegmentedField = (Base) => {
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener('click', this.handleLabelPress);
+            document.removeEventListener('selectionchange', this.collapseSelection);
         }
         get blocksImplicitSubmission() {
             return this.segmentsShown || super.blocksImplicitSubmission;
@@ -260,7 +320,10 @@ export const MixinSegmentedField = (Base) => {
             data-segment=${kind}
             role=${spin ? 'spinbutton' : 'textbox'}
             tabindex=${this.isDisabled ? '-1' : '0'}
-            inputmode=${kind === 'dayPeriod' ? nothing : 'numeric'}
+            contenteditable=${editable ? 'true' : nothing}
+            spellcheck=${editable ? 'false' : nothing}
+            autocorrect=${editable ? 'off' : nothing}
+            inputmode=${kind === 'dayPeriod' || !editable ? nothing : 'numeric'}
             enterkeyhint=${editable ? 'next' : nothing}
             aria-label=${named === id ? segmentName(kind, locale) : `${segmentName(kind, locale)},`}
             aria-labelledby=${named === id ? nothing : named}
@@ -273,6 +336,8 @@ export const MixinSegmentedField = (Base) => {
             aria-required=${this.required ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}
+            @beforeinput=${this.handleSegmentBeforeInput}
+            @input=${this.handleSegmentInput}
             >${text}</span
           >`;
                 })}`;

package/dist/utils/number-format/number-format.d.ts

@@ -25,6 +25,12 @@ export declare const formatPercent: (share: number, locale?: string) => string;
  * and the share of it that is filled.
  */
 export declare const readingText: (value: number, share: number, locale?: string, options?: Intl.NumberFormatOptions) => string;
+/**
+ * Text with every decimal digit written in ASCII: Arabic-Indic `١٢٣`, Persian
+ * `۱۲۳` and Devanagari `१२३` read as `123`. A keyboard in one of those
+ * locales types its own digits, and `Number` reads only ASCII.
+ */
+export declare const latinDigits: (text: string) => string;
 /**
  * Reads a number written in a locale with the same options it is shown with,
  * or `null` where the text is no number.

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

@@ -14,6 +14,14 @@ export const formatPercent = (share, locale = '') => formatNumber(share, locale,
 export const readingText = (value, share, locale = '', options) => options && options.style !== 'percent'
     ? formatNumber(value, locale, options)
     : formatNumber(share, locale, options ?? WHOLE_PERCENT);
+export const latinDigits = (text) => text.replace(/\p{Nd}/gu, (digit) => {
+    const point = digit.codePointAt(0) ?? 0;
+    let zero = point;
+    while (/\p{Nd}/u.test(String.fromCodePoint(zero - 1))) {
+        zero -= 1;
+    }
+    return String((point - zero) % 10);
+});
 const grouped = (text, separator, decimal) => {
     const whole = (text.split(decimal)[0] ?? '').replace(/^[+-]/u, '');
     return new RegExp(`^\\d{1,3}(${literal(separator)}\\d{3})+$`, 'u').test(whole);
@@ -36,7 +44,7 @@ export const parseNumber = (text, locale = '', options) => {
         .filter(Boolean)
         .sort((a, b) => b.length - a.length);
     const percent = options?.style === 'percent' && /[%\u066a\u2030]/u.test(text);
-    let read = text.replace(/[\s\u00a0\u202f]/gu, '');
+    let read = latinDigits(text).replace(/[\s\u00a0\u202f\u061c\u200e\u200f]/gu, '');
     for (const one of dropped) {
         read = read.replace(new RegExp(literal(one), 'gu'), '');
     }

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.163.0";
+export declare const VERSION = "0.165.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.163.0';
+export const VERSION = '0.165.0';

package/package.json

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