@fusion.dev/helix-core 0.164.0 → 0.165.0

package/custom-elements.json

@@ -21908,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",
@@ -28842,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",
@@ -28897,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",
@@ -33183,7 +33264,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.164.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."
         }
       ],
@@ -33743,6 +33824,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.164.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-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.164.0";
+export declare const VERSION = "0.165.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.164.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.164.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.164.0"
+    "@fusion.dev/helix-icons": "0.165.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.164.0",
-    "@fusion.dev/helix-testing": "0.164.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"
   },