@fusion.dev/helix-core 0.166.0 → 0.168.0

package/custom-elements.json

@@ -6060,6 +6060,99 @@
               },
               "description": "Attaches to the box the first time there is one to attach to."
             },
+            {
+              "kind": "method",
+              "name": "across",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether the scroll axis is the inline one."
+            },
+            {
+              "kind": "method",
+              "name": "scrolled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "box",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "The box's scroll offset from the start of the set."
+            },
+            {
+              "kind": "method",
+              "name": "scrollBox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "box",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Scrolls the box to `to` from the start of the set, and notes it. Sideways\non a right-to-left page the offset counts down from zero."
+            },
+            {
+              "kind": "method",
+              "name": "span",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "box",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "How long the box is along the scroll axis."
+            },
+            {
+              "kind": "method",
+              "name": "length",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "How long an element is along the scroll axis."
+            },
             {
               "kind": "field",
               "name": "handleScroll",
@@ -6078,6 +6171,17 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "scrolledNow",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "description": "The box's scroll offset now, or the last one noted where there is no box."
+            },
             {
               "kind": "method",
               "name": "scrolling",
@@ -6935,6 +7039,44 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/events/before-paste.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are about to be pasted onto a board, and can be refused.\n\nThe board adds the cards and connections in the detail by default, as\n`helix-canvas-node` and `helix-canvas-edge` elements. A page that renders\nits cards from its own state calls `preventDefault()` here and adds the\ndetail's document to that state, through `fromJsonCanvas`.",
+          "name": "HelixBeforePasteEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "eventName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "'helix-before-paste'"
+            }
+          ],
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/events/before-paste.ts"
+          },
+          "helix": {}
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixBeforePasteEvent",
+          "declaration": {
+            "name": "HelixBeforePasteEvent",
+            "module": "src/events/before-paste.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/events/before-pin.ts",
@@ -8096,6 +8238,14 @@
             "module": "./details.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "PasteDetail",
+          "declaration": {
+            "name": "PasteDetail",
+            "module": "./details.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PressDetail",
@@ -8408,6 +8558,14 @@
             "module": "src/events/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixBeforePasteEvent",
+          "declaration": {
+            "name": "HelixBeforePasteEvent",
+            "module": "src/events/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixBeforePinEvent",
@@ -8792,6 +8950,14 @@
             "module": "src/events/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixPastedEvent",
+          "declaration": {
+            "name": "HelixPastedEvent",
+            "module": "src/events/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixPinEvent",
@@ -9888,7 +10054,7 @@
           "type": {
             "text": "ReadonlySet<string>"
           },
-          "default": "new Set( ( 'action activate aura-fallback band before-activate before-change before-close ' + 'before-collapse before-edit before-move before-open before-panel-resize before-pin ' + 'before-reconnect before-relabel before-reorder before-resize before-split before-toggle ' + 'canvas-edit canvas-pan canvas-view canvas-zoom caret clear collapse complete ' + 'connect console copy copy-error create dismiss edit end expand facet filter ' + 'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' + 'graph-signal graph-zoom history load load-more map-cluster map-pan map-part-change ' + 'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pin press ' + 'preview previous range-change read reading-change reading-press reconnect reject ' + 'relabel remove reorder ' + 'reordered resize resized sample-end sample-start scrolled select selected send ' + 'shortcut sort sorted split strands-fallback toggle tour-ask tour-status typing' ) .split(' ') .map((name) => `helix-${name}`), )",
+          "default": "new Set( ( 'action activate aura-fallback band before-activate before-change before-close ' + 'before-collapse before-edit before-move before-open before-panel-resize before-paste before-pin ' + 'before-reconnect before-relabel before-reorder before-resize before-split before-toggle ' + 'canvas-edit canvas-pan canvas-view canvas-zoom caret clear collapse complete ' + 'connect console copy copy-error create dismiss edit end expand facet filter ' + 'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' + 'graph-signal graph-zoom history load load-more map-cluster map-pan map-part-change ' + 'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pasted pin press ' + 'preview previous range-change read reading-change reading-press reconnect reject ' + 'relabel remove reorder ' + 'reordered resize resized sample-end sample-start scrolled select selected send ' + 'shortcut sort sorted split strands-fallback toggle tour-ask tour-status typing' ) .split(' ') .map((name) => `helix-${name}`), )",
           "description": "Every name this library dispatches.\n\nExported so a runtime check can ask whether a name is one of ours without\nkeeping a second list of them. `HelixElement` uses it to tell a consumer that\nthe handler prop they wrote is attached to nothing.\n\n**Written as strings, in a module of its own, and not read off the\nclasses in `registry`.** Every element carries this set through its React\nprop audit, and a set read off the classes kept every class alive in every\nbundle: a Badge shipped all eighty of them. As strings, a family ships the\nclasses it dispatches and no others. `events.pure.spec.ts` holds this list to\nthe classes, so a class added without its name here fails.\n\n**Without the shared `helix-`, and separated by spaces.** Every element carries this\nlist, and as quoted strings each paid its quotes, its comma and the prefix."
         }
       ],
@@ -10017,6 +10183,44 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/events/pasted.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards and connections were pasted onto a board, which now holds them.",
+          "name": "HelixPastedEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "eventName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "'helix-pasted'"
+            }
+          ],
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/events/pasted.ts"
+          },
+          "helix": {}
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixPastedEvent",
+          "declaration": {
+            "name": "HelixPastedEvent",
+            "module": "src/events/pasted.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/events/pin.ts",
@@ -11967,6 +12171,42 @@
               "description": "The message the browser would show for the control, or an empty string.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "updateRunning",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether an update is running, so `runPendingUpdate` never starts one inside another."
+            },
+            {
+              "kind": "method",
+              "name": "performUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "runPendingUpdate",
+              "privacy": "private",
+              "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."
+            },
             {
               "kind": "field",
               "name": "willValidate",
@@ -11984,7 +12224,17 @@
                   "text": "boolean"
                 }
               },
-              "description": "Returns whether the control is valid, and fires `invalid` on it when it is\nnot."
+              "description": "Returns whether the control is valid, and fires `invalid` on it when it is\nnot. The control shows no message for it: `reportValidity()` does that."
+            },
+            {
+              "kind": "field",
+              "name": "checkInProgress",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether `checkValidity()` is running, set only for the `invalid` it fires."
             },
             {
               "kind": "method",
@@ -12423,21 +12673,6 @@
                 "name": "HelixElement",
                 "module": "src/helix-element/helix-element.ts"
               }
-            },
-            {
-              "kind": "method",
-              "name": "performUpdate",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
             }
           ],
           "events": [],
@@ -13476,6 +13711,14 @@
             "module": "./events/events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixBeforePasteEvent",
+          "declaration": {
+            "name": "HelixBeforePasteEvent",
+            "module": "./events/events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixBeforePinEvent",
@@ -13860,6 +14103,14 @@
             "module": "./events/events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixPastedEvent",
+          "declaration": {
+            "name": "HelixPastedEvent",
+            "module": "./events/events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixPinEvent",
@@ -14180,6 +14431,14 @@
             "module": "./events/events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "PasteDetail",
+          "declaration": {
+            "name": "PasteDetail",
+            "module": "./events/events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PressDetail",
@@ -20275,7 +20534,7 @@
               },
               "privacy": "private",
               "default": "false",
-              "description": "Whether the reader has had a go at the field yet.\n\n**Not `:user-invalid`**, which is the platform's own answer to \"is this\nfield wrong *yet*\" and cannot work here, for a structural reason rather\nthan a browser bug: it tracks interaction with the element it is on, and\nnobody interacts with this element. The reader types into an `<input>`\ninside its shadow root, so the host's interaction flag is never set and\nthe selector never matches. Measured after submitting an invalid required\nfield and again after editing one and leaving it: false both times, while\n`:invalid` matched both times.\n\nSo the moments are listened for instead, and both of them demonstrably\nreach the host: `invalid` when a form is submitted with this control\nfailing, and `change` when the reader has edited and committed. Focus\nalone is deliberately not one of them. Tabbing past an empty required\nfield should not be answered with an error.\n\n**A composite control has to construct its own `change`, and this mixin\ndeliberately does not do it for them.** A native `change` is\n`composed: false`, so a control built from several inner inputs never\nrelays one to its host: `Input` gets this free from its one control,\nwhile a `PinInput` of four boxes has no inner `change` that means the\ncode is entered, so a half-entered code is never `touched` and can never\nsay what is wrong with it.\n\n**The obvious shared fix is for `touched` to take a `focusout`, and it is\nthe wrong one**, because it is the paragraph above undone: a `focusout`\nfires on the reader who tabbed past and typed nothing, which is exactly\nthe case this refuses to call an error. What a composite needs is not a\nfocus moment, it is the native meaning of `change`, \"edited, then left\",\nand the editing half is the part a mixin up here cannot see.\n\n**Nor is there one shape to extract yet.** The two composites solve it\ndifferently and both are right: `PinInput` is focus-driven, taking a\nbaseline when focus arrives from outside the row and announcing on the\nway out if it moved, and `DateInput` is value-driven, stopping its inner\n`change` and announcing once the date itself moves. Only one of them has\na leaving moment at all, so generalizing from the pair is generalizing\nfrom one. The trigger for lifting it is a third control that needs the\nfocus-driven shape, at which point what moves up is the\nbaseline-and-commit pair rather than `touched`."
+              "description": "Whether the reader has had a go at the field yet.\n\n**Not `:user-invalid`**, which is the platform's own answer to \"is this\nfield wrong *yet*\" and cannot work here, for a structural reason rather\nthan a browser bug: it tracks interaction with the element it is on, and\nnobody interacts with this element. The reader types into an `<input>`\ninside its shadow root, so the host's interaction flag is never set and\nthe selector never matches. Measured after submitting an invalid required\nfield and again after editing one and leaving it: false both times, while\n`:invalid` matched both times.\n\nSo the moments are listened for instead, and both of them demonstrably\nreach the host: `invalid` when a form is submitted with this control\nfailing, and `change` when the reader has edited and committed. The\n`invalid` a script's `checkValidity()` fires is not one of them, as it\nis not for a native control. Focus\nalone is deliberately not one of them. Tabbing past an empty required\nfield should not be answered with an error.\n\n**A composite control has to construct its own `change`, and this mixin\ndeliberately does not do it for them.** A native `change` is\n`composed: false`, so a control built from several inner inputs never\nrelays one to its host: `Input` gets this free from its one control,\nwhile a `PinInput` of four boxes has no inner `change` that means the\ncode is entered, so a half-entered code is never `touched` and can never\nsay what is wrong with it.\n\n**The obvious shared fix is for `touched` to take a `focusout`, and it is\nthe wrong one**, because it is the paragraph above undone: a `focusout`\nfires on the reader who tabbed past and typed nothing, which is exactly\nthe case this refuses to call an error. What a composite needs is not a\nfocus moment, it is the native meaning of `change`, \"edited, then left\",\nand the editing half is the part a mixin up here cannot see.\n\n**Nor is there one shape to extract yet.** The two composites solve it\ndifferently and both are right: `PinInput` is focus-driven, taking a\nbaseline when focus arrives from outside the row and announcing on the\nway out if it moved, and `DateInput` is value-driven, stopping its inner\n`change` and announcing once the date itself moves. Only one of them has\na leaving moment at all, so generalizing from the pair is generalizing\nfrom one. The trigger for lifting it is a third control that needs the\nfocus-driven shape, at which point what moves up is the\nbaseline-and-commit pair rather than `touched`."
             },
             {
               "kind": "field",
@@ -21564,7 +21823,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, 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.",
+          "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 take off its\nlast digit or move back from an empty segment, 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": [
             {
@@ -21941,6 +22200,25 @@
               ],
               "description": "Applies an editing key to the segment, the arrows, Backspace, a digit or\na letter, and says whether it edited anything."
             },
+            {
+              "kind": "method",
+              "name": "erase",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Takes the last digit off the segment, or moves to the segment before it\nwhere this one is already empty, as React Aria's segments do. A reader\nclearing a date from its end holds Backspace and it empties right to\nleft."
+            },
             {
               "kind": "field",
               "name": "composing",
@@ -26611,7 +26889,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, 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."
+          "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 take off its\nlast digit and empty it from the last one, 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",
@@ -33311,7 +33589,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.166.0'",
+          "default": "'0.168.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."
         }
       ],
@@ -33871,6 +34149,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.166.0"
+    "version": "0.168.0"
   }
 }

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -13,6 +13,13 @@ export interface VirtualizeOptions {
      * its own size. Zero by default.
      */
     gap?: () => number;
+    /**
+     * Whether the set runs across the box, scrolled sideways. The scroll axis is
+     * then the inline one: offsets are `scrollLeft` from the start of the line,
+     * which runs right to left on a right-to-left page, and items are measured
+     * by their width. Down the box by default.
+     */
+    horizontal?: () => boolean;
     /**
      * Rows kept either side of what fits, so a scroll reveals something drawn
      * rather than something blank. Four by default.
@@ -206,9 +213,24 @@ export declare class VirtualizeController implements ReactiveController {
     hostDisconnected(): void;
     /** Attaches to the box the first time there is one to attach to. */
     private watch;
+    /** Whether the scroll axis is the inline one. */
+    private across;
+    /** The box's scroll offset from the start of the set. */
+    private scrolled;
+    /**
+     * Scrolls the box to `to` from the start of the set, and notes it. Sideways
+     * on a right-to-left page the offset counts down from zero.
+     */
+    private scrollBox;
+    /** How long the box is along the scroll axis. */
+    private span;
+    /** How long an element is along the scroll axis. */
+    private length;
     private readonly handleScroll;
     private readonly handleTouchStart;
     private readonly handleTouchEnd;
+    /** The box's scroll offset now, or the last one noted where there is no box. */
+    private scrolledNow;
     /**
      * Whether the reader is scrolling: a finger is on the box, the box moved
      * within the last 150 milliseconds, or it has moved and its `scroll` event

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -21,7 +21,7 @@ export class VirtualizeController {
             if (box) {
                 this.noteClamp(box);
             }
-            const top = box?.scrollTop ?? 0;
+            const top = box ? this.scrolled(box) : 0;
             if (top !== this.lastTop) {
                 this.heading = top > this.lastTop ? 1 : -1;
                 this.lastTop = top;
@@ -90,29 +90,53 @@ export class VirtualizeController {
         box.addEventListener('touchend', this.handleTouchEnd, { passive: true });
         box.addEventListener('touchcancel', this.handleTouchEnd, { passive: true });
         box.addEventListener('scrollend', this.handleTouchEnd, { passive: true });
-        this.lastTop = box.scrollTop;
+        this.lastTop = this.scrolled(box);
         box.setAttribute('data-virtual', '');
         this.watching = true;
     }
+    across() {
+        return this.options.horizontal?.() ?? false;
+    }
+    scrolled(box) {
+        return this.across() ? Math.abs(box.scrollLeft) : box.scrollTop;
+    }
+    scrollBox(box, to) {
+        if (this.across()) {
+            box.scrollLeft = getComputedStyle(box).direction === 'rtl' ? -to : to;
+        }
+        else {
+            box.scrollTop = to;
+        }
+        this.lastTop = this.scrolled(box);
+    }
+    span(box) {
+        return this.across() ? box.clientWidth : box.clientHeight;
+    }
+    length(element) {
+        const box = element.getBoundingClientRect();
+        return this.across() ? box.width : box.height;
+    }
+    scrolledNow() {
+        const box = this.options.container();
+        return box ? this.scrolled(box) : this.lastTop;
+    }
     scrolling() {
-        return (this.touching ||
-            this.resting !== undefined ||
-            (this.options.container()?.scrollTop ?? this.lastTop) !== this.lastTop);
+        return this.touching || this.resting !== undefined || this.scrolledNow() !== this.lastTop;
     }
     noteClamp(box) {
         const was = this.lastTop;
         if (!this.touching &&
-            box.scrollTop < was &&
-            box.scrollTop >= box.scrollHeight - box.clientHeight - 1) {
-            this.lastTop = box.scrollTop;
+            this.scrolled(box) < was &&
+            this.scrolled(box) >=
+                (this.across() ? box.scrollWidth : box.scrollHeight) - this.span(box) - 1) {
+            this.lastTop = this.scrolled(box);
         }
         return was;
     }
     square() {
         const box = this.options.container();
         if (this.drift > 0 && box) {
-            box.scrollTop -= this.drift;
-            this.lastTop = box.scrollTop;
+            this.scrollBox(box, this.scrolled(box) - this.drift);
         }
         else if (this.drift !== 0) {
             this.owed -= this.drift;
@@ -121,10 +145,10 @@ export class VirtualizeController {
         this.drift = 0;
     }
     offset(box) {
-        return box.scrollTop + this.owed - this.drift;
+        return this.scrolled(box) + this.owed - this.drift;
     }
     lead(box) {
-        return this.heading === 0 ? 0 : box.clientHeight;
+        return this.heading === 0 ? 0 : this.span(box);
     }
     measure() {
         this.watch();
@@ -168,7 +192,7 @@ export class VirtualizeController {
         const extra = Math.ceil(this.lead(box) / size);
         const at = Math.min(Math.floor(this.offset(box) / size), total);
         const first = Math.max(0, at - overscan - (this.heading < 0 ? extra : 0));
-        const fits = Math.ceil(box.clientHeight / size) + overscan * 2 + (this.heading === 0 ? 0 : extra);
+        const fits = Math.ceil(this.span(box) / size) + overscan * 2 + (this.heading === 0 ? 0 : extra);
         const last = Math.min(total, first + fits);
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
@@ -183,7 +207,7 @@ export class VirtualizeController {
         const estimate = Math.max(1, this.options.estimate());
         const heights = new Map();
         for (const { element, index } of this.options.rows?.() ?? []) {
-            heights.set(index, (heights.get(index) ?? 0) + element.getBoundingClientRect().height);
+            heights.set(index, (heights.get(index) ?? 0) + this.length(element));
         }
         const seen = [...heights.values()].filter((height) => height > 0);
         if (seen.length === 0) {
@@ -196,9 +220,8 @@ export class VirtualizeController {
             this.sample = { estimate, size };
             if (Math.abs(size - was) >= 0.5) {
                 const box = this.options.container();
-                if (box && box.scrollTop > 0) {
-                    box.scrollTop = (box.scrollTop / was) * size;
-                    this.lastTop = box.scrollTop;
+                if (box && this.scrolled(box) > 0) {
+                    this.scrollBox(box, (this.scrolled(box) / was) * size);
                 }
                 this.settling = 0;
                 if (!uneven) {
@@ -219,7 +242,7 @@ export class VirtualizeController {
         const lead = this.lead(box);
         const from = this.heading < 0 ? top - lead : top;
         const first = Math.max(0, this.heights.indexAt(from, total) - overscan);
-        const bottom = top + box.clientHeight + (this.heading > 0 ? lead : 0);
+        const bottom = top + this.span(box) + (this.heading > 0 ? lead : 0);
         let last = this.heights.indexAt(top, total);
         while (last < total && this.heights.before(last, total) < bottom) {
             last += 1;
@@ -239,7 +262,7 @@ export class VirtualizeController {
             return { first: 0, last: 0 };
         }
         const top = Math.max(0, this.offset(box));
-        const bottom = top + box.clientHeight;
+        const bottom = top + this.span(box);
         if (!this.measuring()) {
             const size = this.line();
             const first = Math.min(Math.floor(top / size), total);
@@ -259,15 +282,16 @@ export class VirtualizeController {
             return 0;
         }
         const length = this.measuring() ? this.heights.total(total) : total * this.line();
-        return Math.max(0, length - Math.max(0, this.offset(box)) - box.clientHeight);
+        return Math.max(0, length - Math.max(0, this.offset(box)) - this.span(box));
     }
     endInSight(length = Math.max(0, this.options.count())) {
+        const box = this.options.container();
         if (this.options.count() <= 0 ||
             !endInSight({
                 askedAt: this.askedAt,
                 count: length,
                 remaining: this.remaining(),
-                screen: this.options.container()?.clientHeight ?? 0,
+                screen: box ? this.span(box) : 0,
             })) {
             return false;
         }
@@ -289,8 +313,7 @@ export class VirtualizeController {
         if (this.owed !== 0) {
             const box = this.options.container();
             if (box) {
-                box.scrollTop += this.owed;
-                this.lastTop = box.scrollTop;
+                this.scrollBox(box, this.scrolled(box) + this.owed);
             }
             this.owed = 0;
         }
@@ -313,7 +336,7 @@ export class VirtualizeController {
         const was = this.heights.before(anchor, total);
         let news = false;
         for (const { element, index } of rows) {
-            if (this.heights.record(index, element.getBoundingClientRect().height + this.gap())) {
+            if (this.heights.record(index, this.length(element) + this.gap())) {
                 news = true;
             }
         }
@@ -327,8 +350,7 @@ export class VirtualizeController {
                 this.drift -= moved;
             }
             else {
-                box.scrollTop = from + moved;
-                this.lastTop = box.scrollTop;
+                this.scrollBox(box, from + moved);
             }
         }
         this.measure();
@@ -358,7 +380,9 @@ export class VirtualizeController {
         }
         const top = this.offsetOf(index);
         const size = this.sizeOf(index);
-        const room = box.clientHeight - inset;
+        const span = this.span(box);
+        const at = this.scrolled(box);
+        const room = span - inset;
         let to;
         if (align === 'start') {
             to = top;
@@ -367,24 +391,25 @@ export class VirtualizeController {
             to = top - inset - (room - size) / 2;
         }
         else if (align === 'end') {
-            to = top + size + inset - box.clientHeight;
+            to = top + size + inset - span;
         }
-        else if (top < box.scrollTop) {
+        else if (top < at) {
             to = top;
         }
-        else if (top + size + inset > box.scrollTop + box.clientHeight) {
-            to = top + size + inset - box.clientHeight;
+        else if (top + size + inset > at + span) {
+            to = top + size + inset - span;
         }
         else {
             return;
         }
         const next = Math.max(0, to);
         if (behavior && typeof box.scrollTo === 'function') {
-            box.scrollTo({ behavior, top: next });
+            const across = this.across();
+            const rtl = across && getComputedStyle(box).direction === 'rtl';
+            box.scrollTo(across ? { behavior, left: rtl ? -next : next } : { behavior, top: next });
         }
         else {
-            box.scrollTop = next;
-            this.lastTop = box.scrollTop;
+            this.scrollBox(box, next);
             this.target = index;
         }
     }

package/dist/events/before-paste.d.ts

@@ -0,0 +1,13 @@
+import type { PasteDetail } from './details.js';
+/**
+ * Cards are about to be pasted onto a board, and can be refused.
+ *
+ * The board adds the cards and connections in the detail by default, as
+ * `helix-canvas-node` and `helix-canvas-edge` elements. A page that renders
+ * its cards from its own state calls `preventDefault()` here and adds the
+ * detail's document to that state, through `fromJsonCanvas`.
+ */
+export declare class HelixBeforePasteEvent extends CustomEvent<PasteDetail> {
+    static readonly eventName = "helix-before-paste";
+    constructor(detail: PasteDetail);
+}

package/dist/events/before-paste.js

@@ -0,0 +1,11 @@
+export class HelixBeforePasteEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-paste'; }
+    constructor(detail) {
+        super(HelixBeforePasteEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/details.d.ts

@@ -62,6 +62,45 @@ export interface ConnectDetail {
     /** The side nearest where they let go, where they let go over a card. */
     toSide?: 'top' | 'right' | 'bottom' | 'left' | undefined;
 }
+/** A side of a card, as JSON Canvas names it. */
+type PasteSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * What a paste adds to a board: a JSON Canvas document whose ids the board
+ * does not hold yet, its cards moved clear of the ones they were copied from.
+ * The shape is the format's, which `fromJsonCanvas` reads.
+ */
+export interface PasteDetail {
+    document: {
+        edges?: Array<{
+            color?: string | undefined;
+            fromEnd?: 'none' | 'arrow' | undefined;
+            fromNode: string;
+            fromSide?: PasteSide | undefined;
+            id: string;
+            label?: string | undefined;
+            path?: 'curve' | 'straight' | 'step' | undefined;
+            toEnd?: 'none' | 'arrow' | undefined;
+            toNode: string;
+            toSide?: PasteSide | undefined;
+        }>;
+        nodes?: Array<{
+            background?: string | undefined;
+            backgroundStyle?: 'cover' | 'ratio' | 'repeat' | undefined;
+            color?: string | undefined;
+            file?: string | undefined;
+            height: number;
+            id: string;
+            label?: string | undefined;
+            subpath?: string | undefined;
+            text?: string | undefined;
+            type: 'text' | 'file' | 'link' | 'group';
+            url?: string | undefined;
+            width: number;
+            x: number;
+            y: number;
+        }>;
+    };
+}
 /** Where a connection's ends are going, and where they were. */
 export interface ReconnectDetail {
     /** The connection's name, where it has one. */
@@ -522,3 +561,4 @@ export interface ShortcutDetail {
      */
     keys: string;
 }
+export {};

package/dist/events/events.d.ts

@@ -40,6 +40,7 @@ import { HelixBeforeEditEvent } from './before-edit.js';
 import { HelixBeforeMoveEvent } from './before-move.js';
 import { HelixBeforeOpenEvent } from './before-open.js';
 import { HelixBeforePanelResizeEvent } from './before-panel-resize.js';
+import { HelixBeforePasteEvent } from './before-paste.js';
 import { HelixBeforePinEvent } from './before-pin.js';
 import { HelixBeforeReconnectEvent } from './before-reconnect.js';
 import { HelixBeforeRelabelEvent } from './before-relabel.js';
@@ -88,6 +89,7 @@ import { HelixMoveEvent } from './move.js';
 import { HelixNavigateEvent } from './navigate.js';
 import { HelixNextEvent } from './next.js';
 import { HelixPanelResizeEvent } from './panel-resize.js';
+import { HelixPastedEvent } from './pasted.js';
 import { HelixPinEvent } from './pin.js';
 import { HelixPressEvent } from './press.js';
 import { HelixPreviewEvent } from './preview.js';
@@ -119,9 +121,9 @@ import { HelixToggleEvent } from './toggle.js';
 import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
-export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, StrandsFallbackDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
+export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PasteDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, StrandsFallbackDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 /**
  * Every event class, and the one place a new one is registered: a class in a
  * module of its own, imported above, and named here and in `names.ts`.
@@ -147,6 +149,7 @@ declare const registry: {
     readonly HelixBeforeMoveEvent: typeof HelixBeforeMoveEvent;
     readonly HelixBeforeOpenEvent: typeof HelixBeforeOpenEvent;
     readonly HelixBeforePanelResizeEvent: typeof HelixBeforePanelResizeEvent;
+    readonly HelixBeforePasteEvent: typeof HelixBeforePasteEvent;
     readonly HelixBeforePinEvent: typeof HelixBeforePinEvent;
     readonly HelixBeforeReconnectEvent: typeof HelixBeforeReconnectEvent;
     readonly HelixBeforeRelabelEvent: typeof HelixBeforeRelabelEvent;
@@ -195,6 +198,7 @@ declare const registry: {
     readonly HelixNavigateEvent: typeof HelixNavigateEvent;
     readonly HelixNextEvent: typeof HelixNextEvent;
     readonly HelixPanelResizeEvent: typeof HelixPanelResizeEvent;
+    readonly HelixPastedEvent: typeof HelixPastedEvent;
     readonly HelixPinEvent: typeof HelixPinEvent;
     readonly HelixPressEvent: typeof HelixPressEvent;
     readonly HelixPreviewEvent: typeof HelixPreviewEvent;

package/dist/events/events.js

@@ -10,6 +10,7 @@ import { HelixBeforeEditEvent } from './before-edit.js';
 import { HelixBeforeMoveEvent } from './before-move.js';
 import { HelixBeforeOpenEvent } from './before-open.js';
 import { HelixBeforePanelResizeEvent } from './before-panel-resize.js';
+import { HelixBeforePasteEvent } from './before-paste.js';
 import { HelixBeforePinEvent } from './before-pin.js';
 import { HelixBeforeReconnectEvent } from './before-reconnect.js';
 import { HelixBeforeRelabelEvent } from './before-relabel.js';
@@ -58,6 +59,7 @@ import { HelixMoveEvent } from './move.js';
 import { HelixNavigateEvent } from './navigate.js';
 import { HelixNextEvent } from './next.js';
 import { HelixPanelResizeEvent } from './panel-resize.js';
+import { HelixPastedEvent } from './pasted.js';
 import { HelixPinEvent } from './pin.js';
 import { HelixPressEvent } from './press.js';
 import { HelixPreviewEvent } from './preview.js';
@@ -90,7 +92,7 @@ import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 const registry = {
     HelixActionEvent,
     HelixActivateEvent,
@@ -104,6 +106,7 @@ const registry = {
     HelixBeforeMoveEvent,
     HelixBeforeOpenEvent,
     HelixBeforePanelResizeEvent,
+    HelixBeforePasteEvent,
     HelixBeforePinEvent,
     HelixBeforeReconnectEvent,
     HelixBeforeRelabelEvent,
@@ -152,6 +155,7 @@ const registry = {
     HelixNavigateEvent,
     HelixNextEvent,
     HelixPanelResizeEvent,
+    HelixPastedEvent,
     HelixPinEvent,
     HelixPressEvent,
     HelixPreviewEvent,

package/dist/events/names.js

@@ -1,11 +1,11 @@
 export const helixEventNames = new Set(('action activate aura-fallback band before-activate before-change before-close ' +
-    'before-collapse before-edit before-move before-open before-panel-resize before-pin ' +
+    'before-collapse before-edit before-move before-open before-panel-resize before-paste before-pin ' +
     'before-reconnect before-relabel before-reorder before-resize before-split before-toggle ' +
     'canvas-edit canvas-pan canvas-view canvas-zoom caret clear collapse complete ' +
     'connect console copy copy-error create dismiss edit end expand facet filter ' +
     'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' +
     'graph-signal graph-zoom history load load-more map-cluster map-pan map-part-change ' +
-    'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pin press ' +
+    'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pasted pin press ' +
     'preview previous range-change read reading-change reading-press reconnect reject ' +
     'relabel remove reorder ' +
     'reordered resize resized sample-end sample-start scrolled select selected send ' +

package/dist/events/pasted.d.ts

@@ -0,0 +1,6 @@
+import type { PasteDetail } from './details.js';
+/** Cards and connections were pasted onto a board, which now holds them. */
+export declare class HelixPastedEvent extends CustomEvent<PasteDetail> {
+    static readonly eventName = "helix-pasted";
+    constructor(detail: PasteDetail);
+}

package/dist/events/pasted.js

@@ -0,0 +1,11 @@
+export class HelixPastedEvent extends CustomEvent {
+    static { this.eventName = 'helix-pasted'; }
+    constructor(detail) {
+        super(HelixPastedEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

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

@@ -214,13 +214,42 @@ export declare class HelixFormElement extends HelixElement {
     get validity(): ValidityState;
     /** The message the browser would show for the control, or an empty string. */
     get validationMessage(): string;
+    /** Whether an update is running, so `runPendingUpdate` never starts one inside another. */
+    private updateRunning;
+    protected performUpdate(): void;
+    /**
+     * Runs an update that is on its way, so the verdict read next is the one
+     * for what the control holds now.
+     *
+     * **A control reports its verdict as it updates, and an update waits for a
+     * microtask**, so a script that wrote `value` and asked at once was answered
+     * about the value before: measured on Time Input, `value = '18:00'` past a
+     * `max` of 17:00 and `checkValidity()` returned true until `updateComplete`.
+     * 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.
+     */
+    private runPendingUpdate;
     /** Whether the control is checked when its form is submitted. */
     get willValidate(): boolean;
     /**
      * Returns whether the control is valid, and fires `invalid` on it when it is
-     * not.
+     * not. The control shows no message for it: `reportValidity()` does that.
      */
     checkValidity(): boolean;
+    /** Whether `checkValidity()` is running, set only for the `invalid` it fires. */
+    private checkInProgress;
+    /**
+     * @internal Whether the `invalid` firing now comes from `checkValidity()`.
+     *
+     * **Such an `invalid` reports and shows nothing**, as on a native control: a
+     * 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.
+     */
+    protected get checkingValidity(): boolean;
     /**
      * Returns whether the control is valid, and when it is not, fires `invalid`
      * and shows the browser's message at the control.

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

@@ -85,6 +85,8 @@ export class HelixFormElement extends HelixElement {
         this.reported = { anchor: undefined, flags: {}, message: '' };
         this.customValidity = '';
         this.appliedFeedback = '';
+        this.updateRunning = false;
+        this.checkInProgress = false;
         this.focusFromLabel = (event) => {
             if (!event.isTrusted || event.composedPath()[0] !== this || this.isDisabled) {
                 return;
@@ -135,18 +137,45 @@ export class HelixFormElement extends HelixElement {
         return this.focusTarget ?? anchor;
     }
     get validity() {
+        this.runPendingUpdate();
         return this.internals.validity;
     }
     get validationMessage() {
+        this.runPendingUpdate();
         return this.internals.validationMessage;
     }
+    performUpdate() {
+        this.updateRunning = true;
+        try {
+            super.performUpdate();
+        }
+        finally {
+            this.updateRunning = false;
+        }
+    }
+    runPendingUpdate() {
+        if (this.hasUpdated && this.isUpdatePending && !this.updateRunning) {
+            this.performUpdate();
+        }
+    }
     get willValidate() {
         return this.internals.willValidate;
     }
     checkValidity() {
-        return this.internals.checkValidity();
+        this.runPendingUpdate();
+        this.checkInProgress = true;
+        try {
+            return this.internals.checkValidity();
+        }
+        finally {
+            this.checkInProgress = false;
+        }
+    }
+    get checkingValidity() {
+        return this.checkInProgress;
     }
     reportValidity() {
+        this.runPendingUpdate();
         this.applyValidity();
         return this.internals.reportValidity();
     }

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { type TokenColor, TokenColorController, } from './controllers/token-colo
 export { UpgradeController, type UpgradeOptions, } from './controllers/upgrade-controller/upgrade-controller.js';
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReadingDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type StrandsFallbackDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PasteDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReadingDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type StrandsFallbackDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';

package/dist/index.js

@@ -34,7 +34,7 @@ export { TokenColorController, } from './controllers/token-color-controller/toke
 export { UpgradeController, } from './controllers/upgrade-controller/upgrade-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';

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

@@ -164,7 +164,11 @@ export const MixinField = (Base) => {
             const touch = () => {
                 this.touched = true;
             };
-            this.addEventListener('invalid', touch);
+            this.addEventListener('invalid', () => {
+                if (!this.checkingValidity) {
+                    touch();
+                }
+            });
             this.addEventListener('change', touch);
             this.renderRoot.addEventListener('slotchange', this.noteSlotted);
             auditName(this, () => this.namedControl, 'Give it a `label`, an `aria-label`, words in its label, or a `<label for>` that names it.', () => this.labeled ||

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

@@ -34,7 +34,11 @@ export const MixinPickerFeedback = (Base) => {
             const touch = () => {
                 this.touched = true;
             };
-            this.addEventListener('invalid', touch);
+            this.addEventListener('invalid', () => {
+                if (!this.checkingValidity) {
+                    touch();
+                }
+            });
             this.addEventListener('change', touch);
         }
         get validityFeedback() {

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

@@ -76,7 +76,8 @@ export declare class MixinSegmentedFieldInterface {
  * **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, 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
+ * minutes, Home and End go to its ends, Backspace and Delete take off its
+ * last digit or move back from an empty segment, 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

@@ -38,8 +38,7 @@ export const MixinSegmentedField = (Base) => {
                 event.preventDefault();
                 if (event.inputType === 'deleteContentBackward' ||
                     event.inputType === 'deleteContentForward') {
-                    this.typed = '';
-                    this.edit(element, 'Backspace');
+                    this.erase(element);
                     return;
                 }
                 for (const character of latinDigits(event.data ?? '')) {
@@ -105,6 +104,11 @@ export const MixinSegmentedField = (Base) => {
                     this.typed = '';
                     return;
                 }
+                if (event.key === 'Backspace' || event.key === 'Delete') {
+                    event.preventDefault();
+                    this.erase(element);
+                    return;
+                }
                 if (this.edit(element, latinDigits(event.key))) {
                     event.preventDefault();
                 }
@@ -233,6 +237,15 @@ export const MixinSegmentedField = (Base) => {
             }
             return true;
         }
+        erase(element) {
+            if (this.edit(element, 'Backspace')) {
+                return;
+            }
+            if (!this.readOnly && !this.isDisabled) {
+                this.typed = '';
+                this.moveFocus(element, -1);
+            }
+        }
         willUpdate(changed) {
             super.willUpdate(changed);
             const own = this.own;

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

@@ -91,7 +91,8 @@ export interface SegmentKeyState {
  * nothing.
  *
  * 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
+ * and End take it to its lowest and highest, Backspace and Delete take off its
+ * last digit and empty it from the last one, 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.

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

@@ -185,7 +185,15 @@ export const segmentKey = (key, { kind, locale, segments, system, twelve, typed
         return done(setSegment(segments, kind, key === 'Home' ? min : max, twelve, system));
     }
     if (key === 'Backspace' || key === 'Delete') {
-        return done(setSegment(segments, kind, undefined, twelve, system));
+        const shown = shownValue(kind, segments, twelve);
+        if (shown === undefined || Number.isNaN(shown)) {
+            return null;
+        }
+        const left = kind === 'dayPeriod' ? '' : String(shown).slice(0, -1);
+        const rest = Number(left);
+        return left === '' || rest === 0
+            ? done(setSegment(segments, kind, undefined, twelve, system))
+            : { advance: false, segments: setSegment(segments, kind, rest, twelve, system), typed: left };
     }
     if (/^\d$/.test(key) && kind !== 'dayPeriod') {
         return typeDigit(segments, kind, typed, key, twelve, system);

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

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.166.0';
+export const VERSION = '0.168.0';

package/package.json

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