@fusion.dev/helix-core 0.149.1 → 0.150.0

package/custom-elements.json

@@ -19688,6 +19688,13 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleEditKey",
+              "privacy": "private",
+              "readonly": true,
+              "description": "The first key that moves the caret or edits, while the focused field\nshows its rendering, puts the value in the field before the key acts.\n\nPicking hands focus back to a field that shows `August 5, 2026`, which is\nwhat the reader chose. `Intl` formats and does not parse, so a key that\nedited the rendering wrote text no date could be read from. The caret\nkeeps its place at the start, at the end, or around the whole text, and\ngoes to the end otherwise."
+            },
             {
               "kind": "field",
               "name": "handleFocus",
@@ -20492,7 +20499,7 @@
         },
         {
           "kind": "mixin",
-          "description": "Grafts the segmented field React Aria's DateField and TimeField are, and Web\nAwesome's time input has, onto a picker field: one `spinbutton` for each part\nof the date or the time, in the order the locale writes them.\n\n**Typing into a text field asks the reader to know the format.** Date Input\nand Time Input read ISO, `2026-08-04` and `14:30`, because `Intl` formats and\ndoes not parse, and a reader in Germany who types `4.8.2026` is refused. A\nsegment needs no format: the month is a month, set with digits or the arrow\nkeys, and the layout puts it where the locale does, so the field reads\n`04.08.2026` in German and `08/04/2026` in English with nothing to parse.\n\n**What a segment does with a key**, which is React Aria's: digits fill it and\nmove on once it cannot take another, Up and Down step it and wrap, Home and\nEnd go to its ends, Backspace and Delete empty it, Left and Right move between\nsegments along the line of text, and Alt+Down opens the picker. Each segment\nis a tab stop, as each is in React Aria.\n\n**The value is whole or empty.** A date with no year is no date, so the value\nstays empty while any segment is, and the field reports `badInput` as a\nnative date input does with a half-typed date. The arithmetic is\n`date-segments`, so this draws and listens and nothing else.\n\n**Opt-in, with `segmented`**, because the text field is what every example and\nevery form already holds, and a row of segments draws differently.",
+          "description": "Grafts the segmented field React Aria's DateField and TimeField are, and Web\nAwesome's time input has, onto a picker field: one `spinbutton` for each part\nof the date or the time, in the order the locale writes them.\n\n**Typing into a text field asks the reader to know the format.** Date Input\nand Time Input read ISO, `2026-08-04` and `14:30`, because `Intl` formats and\ndoes not parse, and a reader in Germany who types `4.8.2026` is refused. A\nsegment needs no format: the month is a month, set with digits or the arrow\nkeys, and the layout puts it where the locale does, so the field reads\n`04.08.2026` in German and `08/04/2026` in English with nothing to parse.\n\n**What a segment does with a key**, which is React Aria's: digits fill it and\nmove on once it cannot take another, Up and Down step it and wrap, Page Up\nand Page Down step it by a page, a week of days, five years or fifteen\nminutes, Home and End go to its ends, Backspace and Delete empty it, Left and Right move between\nsegments along the line of text, and Alt+Down opens the picker. Each segment\nis a tab stop, as each is in React Aria.\n\n**The value is whole or empty.** A date with no year is no date, so the value\nstays empty while any segment is, and the field reports `badInput` as a\nnative date input does with a half-typed date. The arithmetic is\n`date-segments`, so this draws and listens and nothing else.\n\n**Opt-in, with `segmented`**, because the text field is what every example and\nevery form already holds, and a row of segments draws differently.",
           "name": "MixinSegmentedField",
           "members": [
             {
@@ -21187,6 +21194,17 @@
                 }
               },
               "description": "What the host does when the last token is asked to go.\n\nThe policy is shared and the mechanism is not: a combobox drops a value out\nof its selection, and a filter field takes a token out of its own list."
+            },
+            {
+              "kind": "method",
+              "name": "tokenElements",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "description": "The tokens the arrow keys move between, in the order they are shown.\n\nEach is an element whose remove button is its `dismiss` part and whose\n`dismiss()` asks it to go, which `Tag` and `FilterInput.Chip` both are.\nNone by default."
             }
           ],
           "helix": {}
@@ -21315,6 +21333,44 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "tokenElements",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "tokenStops",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "description": "The remove button of each token shown that has one, in order."
+            },
+            {
+              "kind": "field",
+              "name": "tokenControl",
+              "type": {
+                "text": "HTMLInputElement | null"
+              },
+              "privacy": "private",
+              "description": "The host's text field.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleTokenKeydown",
+              "privacy": "private",
+              "readonly": true,
+              "description": "The arrow keys between the tokens, and Delete or Backspace on one.\n\nThe arrow toward the end of the line moves to the next token, and past\nthe last into the text with the caret at its start. Delete or Backspace\nasks the focused token to go, as its remove button does, and focus that\nleaves with it comes back to the text."
+            },
             {
               "kind": "method",
               "name": "renderRest",
@@ -25093,7 +25149,7 @@
               }
             }
           ],
-          "description": "What an editing key does to a segment, or `null` for a key that edits\nnothing.\n\nThe arrows step it and wrap, Home and End take it to its lowest and highest,\nBackspace and Delete empty it, a digit is typed as `typeDigit` types it, and\non the meridiem a letter picks the half whose word starts with it. `advance`\nsays the segment is full and focus moves on."
+          "description": "What an editing key does to a segment, or `null` for a key that edits\nnothing.\n\nThe arrows step it and wrap, Page Up and Page Down step it by a page, Home\nand End take it to its lowest and highest, Backspace and Delete empty it, a\ndigit is typed as `typeDigit` types it, and on the meridiem a letter picks\nthe half whose word starts with it. `advance` says the segment is full and\nfocus moves on."
         },
         {
           "kind": "function",
@@ -31407,7 +31463,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.149.1'",
+          "default": "'0.150.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."
         }
       ],
@@ -31967,6 +32023,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.149.1"
+    "version": "0.150.0"
   }
 }

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

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property, state } from 'lit/decorators.js';
+const caretKeys = new Set(['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'End', 'Home']);
 export const MixinPickerEditing = (Base) => {
     class PickerEditingElement extends Base {
         constructor() {
@@ -18,6 +19,37 @@ export const MixinPickerEditing = (Base) => {
             this.handlePress = (event) => {
                 this.pressing = event.type === 'pointerdown' && event.composedPath()[0] === this.control;
             };
+            this.handleEditKey = (event) => {
+                const control = this.control;
+                if (this.editing ||
+                    this.readOnly ||
+                    this.isDisabled ||
+                    !control ||
+                    event.composedPath()[0] !== control ||
+                    event.altKey ||
+                    event.ctrlKey ||
+                    event.metaKey ||
+                    event.isComposing ||
+                    (event.key.length !== 1 && !caretKeys.has(event.key))) {
+                    return;
+                }
+                const shown = control.value.length;
+                const start = control.selectionStart ?? shown;
+                const end = control.selectionEnd ?? shown;
+                this.editing = true;
+                const text = this.display;
+                if (text === control.value) {
+                    return;
+                }
+                control.value = text;
+                if (start === 0 && end === shown) {
+                    control.setSelectionRange(0, text.length);
+                }
+                else {
+                    const at = end === 0 ? 0 : text.length;
+                    control.setSelectionRange(at, at);
+                }
+            };
             this.handleFocus = (event) => {
                 this.editing = !this.returning;
                 const pressed = this.pressing;
@@ -49,12 +81,14 @@ export const MixinPickerEditing = (Base) => {
             this.addEventListener('pointerdown', this.handlePress);
             this.addEventListener('pointercancel', this.handlePress);
             this.addEventListener('click', this.handlePress);
+            this.addEventListener('keydown', this.handleEditKey);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener('pointerdown', this.handlePress);
             this.removeEventListener('pointercancel', this.handlePress);
             this.removeEventListener('click', this.handlePress);
+            this.removeEventListener('keydown', this.handleEditKey);
         }
     }
     __decorate([

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

@@ -62,8 +62,9 @@ export declare class MixinSegmentedFieldInterface {
  * `04.08.2026` in German and `08/04/2026` in English with nothing to parse.
  *
  * **What a segment does with a key**, which is React Aria's: digits fill it and
- * move on once it cannot take another, Up and Down step it and wrap, Home and
- * End go to its ends, Backspace and Delete empty it, Left and Right move between
+ * move on once it cannot take another, Up and Down step it and wrap, Page Up
+ * and Page Down step it by a page, a week of days, five years or fifteen
+ * minutes, Home and End go to its ends, Backspace and Delete empty it, Left and Right move between
  * segments along the line of text, and Alt+Down opens the picker. Each segment
  * is a tab stop, as each is in React Aria.
  *

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

@@ -236,6 +236,7 @@ export const MixinSegmentedField = (Base) => {
             aria-valuenow=${spin ? (shown ?? nothing) : nothing}
             aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)) : nothing}
             aria-disabled=${this.isDisabled ? 'true' : nothing}
+            aria-required=${this.required ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}
             >${text}</span

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

@@ -99,6 +99,14 @@ export declare class MixinTokensInterface {
      * of its selection, and a filter field takes a token out of its own list.
      */
     protected removeLastToken(): void;
+    /**
+     * The tokens the arrow keys move between, in the order they are shown.
+     *
+     * Each is an element whose remove button is its `dismiss` part and whose
+     * `dismiss()` asks it to go, which `Tag` and `FilterInput.Chip` both are.
+     * None by default.
+     */
+    protected tokenElements(): HTMLElement[];
 }
 /**
  * A row of tokens inside a field, and the behavior that goes with it.

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

@@ -8,6 +8,7 @@ import { caretUp } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { drawIcon } from '../../utils/draw-icon/draw-icon.js';
+import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { formatWords, words } from '../../words/words.js';
 export const MixinTokens = (Base) => {
     class TokensElement extends Base {
@@ -22,6 +23,42 @@ export const MixinTokens = (Base) => {
             this.toggleExpanded = () => {
                 this.expanded = !this.expanded;
             };
+            this.handleTokenKeydown = (event) => {
+                if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+                    return;
+                }
+                const stops = this.tokenStops();
+                const path = event.composedPath();
+                const at = stops.findIndex((stop) => path.includes(stop));
+                if (at < 0) {
+                    return;
+                }
+                const step = inlineStep(this, event.key);
+                if (step !== 0) {
+                    event.preventDefault();
+                    const next = stops[at + step];
+                    if (next) {
+                        next.focus();
+                    }
+                    else if (step > 0) {
+                        this.tokenControl?.focus();
+                        this.tokenControl?.setSelectionRange(0, 0);
+                    }
+                    return;
+                }
+                if (event.key !== 'Delete' && event.key !== 'Backspace') {
+                    return;
+                }
+                event.preventDefault();
+                const stop = stops[at];
+                const token = this.tokenElements().find((one) => one.shadowRoot?.contains(stop ?? null));
+                token?.dismiss?.();
+                requestAnimationFrame(() => {
+                    if (!this.matches(':focus-within')) {
+                        this.tokenControl?.focus();
+                    }
+                });
+            };
         }
         static { this.words = ''; }
         get shownLimit() {
@@ -30,6 +67,26 @@ export const MixinTokens = (Base) => {
         renderTokenRow(content, over) {
             return html `<span part="tags">${content}${this.renderRest(over)}</span>`;
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener('keydown', this.handleTokenKeydown);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener('keydown', this.handleTokenKeydown);
+        }
+        tokenElements() {
+            return [];
+        }
+        tokenStops() {
+            return this.tokenElements()
+                .filter((token) => !token.hidden)
+                .map((token) => token.shadowRoot?.querySelector('[part~="dismiss"]'))
+                .filter((stop) => stop !== null && stop !== undefined);
+        }
+        get tokenControl() {
+            return this.renderRoot.querySelector('[part~="control"]');
+        }
         renderRest(over) {
             if (!this.expandable) {
                 return over > 0
@@ -59,6 +116,22 @@ export const MixinTokens = (Base) => {
             return limit > 0 ? Math.max(0, tokens.length - limit) : 0;
         }
         tokenKeydown(event, typed) {
+            const control = event.target;
+            if (inlineStep(this, event.key) === -1 &&
+                !event.shiftKey &&
+                !event.altKey &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                control?.selectionStart === 0 &&
+                control.selectionEnd === 0) {
+                const last = this.tokenStops().at(-1);
+                if (last) {
+                    event.preventDefault();
+                    last.focus();
+                    return true;
+                }
+                return false;
+            }
             if (event.key !== 'Backspace' || typed !== '') {
                 return false;
             }

package/dist/utils/date-segments/date-segments.d.ts

@@ -86,10 +86,11 @@ export interface SegmentKeyState {
  * What an editing key does to a segment, or `null` for a key that edits
  * nothing.
  *
- * The arrows step it and wrap, Home and End take it to its lowest and highest,
- * Backspace and Delete empty it, a digit is typed as `typeDigit` types it, and
- * on the meridiem a letter picks the half whose word starts with it. `advance`
- * says the segment is full and focus moves on.
+ * The arrows step it and wrap, Page Up and Page Down step it by a page, Home
+ * and End take it to its lowest and highest, Backspace and Delete empty it, a
+ * digit is typed as `typeDigit` types it, and on the meridiem a letter picks
+ * the half whose word starts with it. `advance` says the segment is full and
+ * focus moves on.
  */
 export declare const segmentKey: (key: string, { kind, locale, segments, twelve, typed }: SegmentKeyState) => {
     advance: boolean;

package/dist/utils/date-segments/date-segments.js

@@ -119,11 +119,23 @@ export const typeDigit = (segments, kind, typed, digit, twelve) => {
     const next = value >= min ? setSegment(segments, kind, value, twelve) : segments;
     return { advance: full && value >= min, segments: next, typed: full ? '' : text };
 };
+const pageStep = {
+    day: 7,
+    hour: 2,
+    minute: 15,
+    month: 2,
+    second: 15,
+    year: 5,
+};
 export const segmentKey = (key, { kind, locale, segments, twelve, typed }) => {
     const done = (next) => next === undefined ? null : { advance: false, segments: next, typed: '' };
     if (key === 'ArrowUp' || key === 'ArrowDown') {
         return done(stepSegment(segments, kind, key === 'ArrowUp' ? 1 : -1, twelve));
     }
+    if (key === 'PageUp' || key === 'PageDown') {
+        const by = (key === 'PageUp' ? 1 : -1) * (pageStep[kind] ?? 1);
+        return done(stepSegment(segments, kind, by, twelve));
+    }
     if (key === 'Home' || key === 'End') {
         const { max, min } = segmentRange(kind, segments, twelve);
         return done(setSegment(segments, kind, key === 'Home' ? min : max, twelve));

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

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.149.1';
+export const VERSION = '0.150.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.149.1",
+  "version": "0.150.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.149.1"
+    "@fusion.dev/helix-icons": "0.150.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.149.1",
-    "@fusion.dev/helix-testing": "0.149.1",
+    "@fusion.dev/helix-cem": "0.150.0",
+    "@fusion.dev/helix-testing": "0.150.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },