@zag-js/number-input 2.0.0-next.0 → 2.0.0-next.2

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './number-input.anatomy.mjs';
 export { connect } from './number-input.connect.mjs';
 export { machine } from './number-input.machine.mjs';
 export { props, splitProps } from './number-input.props.mjs';
-export { NumberInputApi as Api, ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.mjs';
+export { NumberInputApi as Api, DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, RootState, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './number-input.anatomy.js';
 export { connect } from './number-input.connect.js';
 export { machine } from './number-input.machine.js';
 export { props, splitProps } from './number-input.props.js';
-export { NumberInputApi as Api, ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.js';
+export { NumberInputApi as Api, DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, RootState, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/number-input.connect.js

@@ -38,6 +38,7 @@ var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var import_number_input = require("./number-input.anatomy.js");
 var dom = __toESM(require("./number-input.dom.js"));
+var import_number_input2 = require("./number-input.translations.js");
 function connect(service, normalize) {
   const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
@@ -49,7 +50,19 @@ function connect(service, normalize) {
   const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
-  const translations = prop("translations");
+  const translations = (0, import_utils.mergeWithDefault)(import_number_input2.defaultTranslations, prop("translations"));
+  function getRootState() {
+    return { disabled, focused, invalid, scrubbing };
+  }
+  function getInputState() {
+    return { disabled, invalid, readOnly, scrubbing };
+  }
+  function getIncrementTriggerState() {
+    return { disabled: isIncrementDisabled };
+  }
+  function getDecrementTriggerState() {
+    return { disabled: isDecrementDisabled };
+  }
   return {
     focused,
     scrubbing,
@@ -58,34 +71,36 @@ function connect(service, normalize) {
     value: computed("formattedValue"),
     valueAsNumber: computed("valueAsNumber"),
     setValue(value) {
-      send({ type: "VALUE.SET", value });
+      send({ type: "VALUE.SET", value, src: "script" });
     },
     clearValue() {
-      send({ type: "VALUE.CLEAR" });
+      send({ type: "VALUE.CLEAR", src: "script" });
     },
     increment() {
-      send({ type: "VALUE.INCREMENT" });
+      send({ type: "VALUE.INCREMENT", src: "script" });
     },
     decrement() {
-      send({ type: "VALUE.DECREMENT" });
+      send({ type: "VALUE.DECREMENT", src: "script" });
     },
     setToMax() {
-      send({ type: "VALUE.SET", value: prop("max") });
+      send({ type: "VALUE.SET", value: prop("max"), src: "script" });
     },
     setToMin() {
-      send({ type: "VALUE.SET", value: prop("min") });
+      send({ type: "VALUE.SET", value: prop("min"), src: "script" });
     },
     focus() {
       dom.getInputEl(scope)?.focus();
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...import_number_input.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(rootState.scrubbing)
       });
     },
     getLabelProps() {
@@ -129,7 +144,9 @@ function connect(service, normalize) {
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
       });
     },
+    getInputState,
     getInputProps() {
+      const inputState = getInputState();
       return normalize.input({
         ...import_number_input.parts.input.attrs(scope.id),
         dir: prop("dir"),
@@ -140,11 +157,11 @@ function connect(service, normalize) {
         defaultValue: computed("formattedValue"),
         pattern: prop("formatOptions") ? void 0 : prop("pattern"),
         inputMode: prop("inputMode"),
-        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        disabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        readOnly,
+        "aria-invalid": (0, import_dom_query.ariaAttr)(inputState.invalid),
+        "data-invalid": (0, import_dom_query.dataAttr)(inputState.invalid),
+        disabled: inputState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(inputState.disabled),
+        readOnly: inputState.readOnly,
         required: prop("required"),
         autoComplete: "off",
         autoCorrect: "off",
@@ -155,16 +172,16 @@ function connect(service, normalize) {
         "aria-valuemax": prop("max"),
         "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
         "aria-valuetext": computed("valueText"),
-        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(inputState.scrubbing),
         onFocus() {
           send({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          send({ type: "INPUT.BLUR" });
+          send({ type: "INPUT.BLUR", src: "input-blur" });
         },
         onInput(event) {
           const selection = (0, import_cursor.recordCursor)(event.currentTarget, scope);
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection, src: "input-change" });
         },
         onBeforeInput(event) {
           try {
@@ -181,33 +198,47 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if ((0, import_dom_query.isComposingEvent)(event)) return;
-          const step = (0, import_dom_query.getEventStep)(event, {
+          const step = (0, import_dom_query.getEventStepValue)(event, {
             step: prop("step"),
             largeStep: prop("largeStep"),
             smallStep: prop("smallStep")
           });
           const keyMap = {
             ArrowUp() {
-              send({ type: "INPUT.ARROW_UP", step });
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             ArrowDown() {
-              send({ type: "INPUT.ARROW_DOWN", step });
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageUp() {
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageDown() {
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             Home() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
-              send({ type: "INPUT.HOME" });
+              send({ type: "INPUT.HOME", src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             End() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
-              send({ type: "INPUT.END" });
+              send({ type: "INPUT.END", src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             Enter(event2) {
               const selection = (0, import_cursor.recordCursor)(event2.currentTarget, scope);
-              send({ type: "INPUT.ENTER", selection });
+              send({ type: "INPUT.ENTER", selection, src: "keyboard" });
             }
           };
           const exec = keyMap[event.key];
@@ -215,21 +246,28 @@ function connect(service, normalize) {
         }
       });
     },
+    getDecrementTriggerState,
     getDecrementTriggerProps() {
+      const decrementTriggerState = getDecrementTriggerState();
       return normalize.button({
         ...import_number_input.parts.decrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        disabled: isDecrementDisabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(isDecrementDisabled),
+        disabled: decrementTriggerState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(decrementTriggerState.disabled),
         "aria-label": translations.decrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onPointerDown(event) {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           if (!(0, import_dom_query.isLeftClick)(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "decrement",
+            pointerType: event.pointerType,
+            src: "decrement-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -238,28 +276,38 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         },
         onPointerLeave() {
-          if (isDecrementDisabled) return;
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+          if (decrementTriggerState.disabled) return;
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", src: "decrement-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         }
       });
     },
+    getIncrementTriggerState,
     getIncrementTriggerProps() {
+      const incrementTriggerState = getIncrementTriggerState();
       return normalize.button({
         ...import_number_input.parts.incrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        disabled: isIncrementDisabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(isIncrementDisabled),
+        disabled: incrementTriggerState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(incrementTriggerState.disabled),
         "aria-label": translations.incrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onPointerDown(event) {
-          if (isIncrementDisabled || !(0, import_dom_query.isLeftClick)(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          if (incrementTriggerState.disabled || !(0, import_dom_query.isLeftClick)(event)) return;
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "increment",
+            pointerType: event.pointerType,
+            src: "increment-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -268,10 +316,13 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         },
         onPointerLeave(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         }
       });
     },

package/dist/number-input.connect.mjs

@@ -3,7 +3,7 @@ import {
   ariaAttr,
   dataAttr,
   getEventPoint,
-  getEventStep,
+  getEventStepValue,
   getWindow,
   MAX_Z_INDEX,
   isComposingEvent,
@@ -12,10 +12,11 @@ import {
   raf,
   setCaretToEnd
 } from "@zag-js/dom-query";
-import { roundToDpr, toPx } from "@zag-js/utils";
+import { mergeWithDefault, roundToDpr, toPx } from "@zag-js/utils";
 import { recordCursor } from "./cursor.mjs";
 import { parts } from "./number-input.anatomy.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 function connect(service, normalize) {
   const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
@@ -27,7 +28,19 @@ function connect(service, normalize) {
   const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
-  const translations = prop("translations");
+  const translations = mergeWithDefault(defaultTranslations, prop("translations"));
+  function getRootState() {
+    return { disabled, focused, invalid, scrubbing };
+  }
+  function getInputState() {
+    return { disabled, invalid, readOnly, scrubbing };
+  }
+  function getIncrementTriggerState() {
+    return { disabled: isIncrementDisabled };
+  }
+  function getDecrementTriggerState() {
+    return { disabled: isDecrementDisabled };
+  }
   return {
     focused,
     scrubbing,
@@ -36,34 +49,36 @@ function connect(service, normalize) {
     value: computed("formattedValue"),
     valueAsNumber: computed("valueAsNumber"),
     setValue(value) {
-      send({ type: "VALUE.SET", value });
+      send({ type: "VALUE.SET", value, src: "script" });
     },
     clearValue() {
-      send({ type: "VALUE.CLEAR" });
+      send({ type: "VALUE.CLEAR", src: "script" });
     },
     increment() {
-      send({ type: "VALUE.INCREMENT" });
+      send({ type: "VALUE.INCREMENT", src: "script" });
     },
     decrement() {
-      send({ type: "VALUE.DECREMENT" });
+      send({ type: "VALUE.DECREMENT", src: "script" });
     },
     setToMax() {
-      send({ type: "VALUE.SET", value: prop("max") });
+      send({ type: "VALUE.SET", value: prop("max"), src: "script" });
     },
     setToMin() {
-      send({ type: "VALUE.SET", value: prop("min") });
+      send({ type: "VALUE.SET", value: prop("min"), src: "script" });
     },
     focus() {
       dom.getInputEl(scope)?.focus();
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-focus": dataAttr(focused),
-        "data-invalid": dataAttr(invalid),
-        "data-scrubbing": dataAttr(scrubbing)
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-focus": dataAttr(rootState.focused),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-scrubbing": dataAttr(rootState.scrubbing)
       });
     },
     getLabelProps() {
@@ -107,7 +122,9 @@ function connect(service, normalize) {
         "data-scrubbing": dataAttr(scrubbing)
       });
     },
+    getInputState,
     getInputProps() {
+      const inputState = getInputState();
       return normalize.input({
         ...parts.input.attrs(scope.id),
         dir: prop("dir"),
@@ -118,11 +135,11 @@ function connect(service, normalize) {
         defaultValue: computed("formattedValue"),
         pattern: prop("formatOptions") ? void 0 : prop("pattern"),
         inputMode: prop("inputMode"),
-        "aria-invalid": ariaAttr(invalid),
-        "data-invalid": dataAttr(invalid),
-        disabled,
-        "data-disabled": dataAttr(disabled),
-        readOnly,
+        "aria-invalid": ariaAttr(inputState.invalid),
+        "data-invalid": dataAttr(inputState.invalid),
+        disabled: inputState.disabled,
+        "data-disabled": dataAttr(inputState.disabled),
+        readOnly: inputState.readOnly,
         required: prop("required"),
         autoComplete: "off",
         autoCorrect: "off",
@@ -133,16 +150,16 @@ function connect(service, normalize) {
         "aria-valuemax": prop("max"),
         "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
         "aria-valuetext": computed("valueText"),
-        "data-scrubbing": dataAttr(scrubbing),
+        "data-scrubbing": dataAttr(inputState.scrubbing),
         onFocus() {
           send({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          send({ type: "INPUT.BLUR" });
+          send({ type: "INPUT.BLUR", src: "input-blur" });
         },
         onInput(event) {
           const selection = recordCursor(event.currentTarget, scope);
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection, src: "input-change" });
         },
         onBeforeInput(event) {
           try {
@@ -159,33 +176,47 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if (isComposingEvent(event)) return;
-          const step = getEventStep(event, {
+          const step = getEventStepValue(event, {
             step: prop("step"),
             largeStep: prop("largeStep"),
             smallStep: prop("smallStep")
           });
           const keyMap = {
             ArrowUp() {
-              send({ type: "INPUT.ARROW_UP", step });
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             ArrowDown() {
-              send({ type: "INPUT.ARROW_DOWN", step });
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
+            },
+            PageUp() {
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageDown() {
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
             },
             Home() {
               if (isModifierKey(event)) return;
-              send({ type: "INPUT.HOME" });
+              send({ type: "INPUT.HOME", src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             End() {
               if (isModifierKey(event)) return;
-              send({ type: "INPUT.END" });
+              send({ type: "INPUT.END", src: "keyboard" });
               event.preventDefault();
+              event.stopPropagation();
             },
             Enter(event2) {
               const selection = recordCursor(event2.currentTarget, scope);
-              send({ type: "INPUT.ENTER", selection });
+              send({ type: "INPUT.ENTER", selection, src: "keyboard" });
             }
           };
           const exec = keyMap[event.key];
@@ -193,21 +224,28 @@ function connect(service, normalize) {
         }
       });
     },
+    getDecrementTriggerState,
     getDecrementTriggerProps() {
+      const decrementTriggerState = getDecrementTriggerState();
       return normalize.button({
         ...parts.decrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        disabled: isDecrementDisabled,
-        "data-disabled": dataAttr(isDecrementDisabled),
+        disabled: decrementTriggerState.disabled,
+        "data-disabled": dataAttr(decrementTriggerState.disabled),
         "aria-label": translations.decrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": dataAttr(scrubbing),
         onPointerDown(event) {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           if (!isLeftClick(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "decrement",
+            pointerType: event.pointerType,
+            src: "decrement-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -216,28 +254,38 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         },
         onPointerLeave() {
-          if (isDecrementDisabled) return;
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+          if (decrementTriggerState.disabled) return;
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", src: "decrement-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         }
       });
     },
+    getIncrementTriggerState,
     getIncrementTriggerProps() {
+      const incrementTriggerState = getIncrementTriggerState();
       return normalize.button({
         ...parts.incrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        disabled: isIncrementDisabled,
-        "data-disabled": dataAttr(isIncrementDisabled),
+        disabled: incrementTriggerState.disabled,
+        "data-disabled": dataAttr(incrementTriggerState.disabled),
         "aria-label": translations.incrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": dataAttr(scrubbing),
         onPointerDown(event) {
-          if (isIncrementDisabled || !isLeftClick(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          if (incrementTriggerState.disabled || !isLeftClick(event)) return;
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "increment",
+            pointerType: event.pointerType,
+            src: "increment-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -246,10 +294,13 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         },
         onPointerLeave(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         }
       });
     },