@fusion.dev/helix-core 0.164.0 → 0.166.0

package/custom-elements.json

@@ -15564,6 +15564,14 @@
             "module": "./utils/filter-marks/filter-marks.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "filterKeeps",
+          "declaration": {
+            "name": "filterKeeps",
+            "module": "./utils/filter-marks/filter-marks.js"
+          }
+        },
         {
           "kind": "js",
           "name": "markMatches",
@@ -21908,6 +21916,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",
@@ -27555,6 +27618,37 @@
             }
           ],
           "description": "Marks where `needle` matches in each of `elements`, for `owner`, without\ntouching the elements. An empty needle takes the owner's marks away, which\nis also what an owner leaving the page calls.\n\n**The Custom Highlight API paints a range, and nothing is inserted.** The\nwords are usually the consumer's own light DOM, slotted through as many as\ntwo shadow roots, and wrapping the matched part in a `<mark>` would mean\nrewriting their content: markup they wrote would come back changed. So an\noption holding a link or an icon is marked as readily as one holding a bare\nword. Listbox marks what its filter matched this way, and so every family\nthat filters through one: Select, Combobox, Command and Time Picker.\n\n**The rule that paints it lives in `base.css`**, as\n`::highlight(helix-filter-match)`, rather than in a component's styles. A\nhighlight is styled from the tree its text lives in, and that text lives in\nthe consumer's document.\n\nNothing at all where the API is missing, as on a server, in a test\nenvironment or in an older browser: the text nodes are not walked for an\nanswer nothing can paint."
+        },
+        {
+          "kind": "function",
+          "name": "filterKeeps",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "filter",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "match",
+              "optional": true,
+              "type": {
+                "text": "((text: string, filter: string) => boolean) | undefined"
+              }
+            }
+          ],
+          "description": "Whether a filter keeps an item: its words hold the filter, in any case, or\n`match` says so where the page gave one. An empty filter keeps everything.\n\nOne answer for every family that filters, so Listbox, Command and a\nfilterable Menu keep the same items for the same words, and a `filterMatch`\nthe page writes once means the same thing in each."
         }
       ],
       "exports": [
@@ -27581,6 +27675,14 @@
             "name": "markMatches",
             "module": "src/utils/filter-marks/filter-marks.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "filterKeeps",
+          "declaration": {
+            "name": "filterKeeps",
+            "module": "src/utils/filter-marks/filter-marks.ts"
+          }
         }
       ]
     },
@@ -28842,6 +28944,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 +29017,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 +33311,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.164.0'",
+          "default": "'0.166.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 +33871,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.164.0"
+    "version": "0.166.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/index.d.ts

@@ -83,7 +83,7 @@ export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
 export { exportParts } from './utils/export-parts/export-parts.js';
 export { fillTemplate, labelWith } from './utils/fill-template/fill-template.js';
-export { FILTER_MARK, markMatches, rangeOf } from './utils/filter-marks/filter-marks.js';
+export { FILTER_MARK, filterKeeps, markMatches, rangeOf, } from './utils/filter-marks/filter-marks.js';
 export { focusTarget } from './utils/focus-target/focus-target.js';
 export { deepActiveElement, deepContains, focusableElements, PRESSABLE, pressedOwnControl, } from './utils/focusable-elements/focusable-elements.js';
 export { afterLinkFollowed, followLink, type LinkModifiers, type LinkTarget, } from './utils/follow-link/follow-link.js';

package/dist/index.js

@@ -83,7 +83,7 @@ export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
 export { exportParts } from './utils/export-parts/export-parts.js';
 export { fillTemplate, labelWith } from './utils/fill-template/fill-template.js';
-export { FILTER_MARK, markMatches, rangeOf } from './utils/filter-marks/filter-marks.js';
+export { FILTER_MARK, filterKeeps, markMatches, rangeOf, } from './utils/filter-marks/filter-marks.js';
 export { focusTarget } from './utils/focus-target/focus-target.js';
 export { deepActiveElement, deepContains, focusableElements, PRESSABLE, pressedOwnControl, } from './utils/focusable-elements/focusable-elements.js';
 export { afterLinkFollowed, followLink, } from './utils/follow-link/follow-link.js';

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/filter-marks/filter-marks.d.ts

@@ -34,3 +34,12 @@ export declare const rangeOf: (root: Element, needle: string) => Range[];
  * answer nothing can paint.
  */
 export declare const markMatches: (owner: Element, elements: Iterable<Element>, needle: string) => void;
+/**
+ * Whether a filter keeps an item: its words hold the filter, in any case, or
+ * `match` says so where the page gave one. An empty filter keeps everything.
+ *
+ * One answer for every family that filters, so Listbox, Command and a
+ * filterable Menu keep the same items for the same words, and a `filterMatch`
+ * the page writes once means the same thing in each.
+ */
+export declare const filterKeeps: (text: string, filter: string, match?: ((text: string, filter: string) => boolean) | undefined) => boolean;

package/dist/utils/filter-marks/filter-marks.js

@@ -39,3 +39,4 @@ export const markMatches = (owner, elements, needle) => {
         registry.set(FILTER_MARK, new Highlight(...all));
     }
 };
+export const filterKeeps = (text, filter, match) => filter === '' || (match ? match(text, filter) : text.toLowerCase().includes(filter.toLowerCase()));

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.166.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.164.0';
+export const VERSION = '0.166.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.166.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.166.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.164.0",
-    "@fusion.dev/helix-testing": "0.164.0",
+    "@fusion.dev/helix-cem": "0.166.0",
+    "@fusion.dev/helix-testing": "0.166.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },