@tremolo-ui/vue 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -1,45 +1,47 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let vue = require("vue");
 let _tremolo_ui_dom = require("@tremolo-ui/dom");
+let _tremolo_ui_dom_internal = require("@tremolo-ui/dom/internal");
 let _tremolo_ui_functions = require("@tremolo-ui/functions");
 //#region src/components/AnimationCanvas/AnimationCanvas.ts
+const animationCanvasProps = {
+	/** Draws a frame. */
+	draw: {
+		type: Function,
+		required: true
+	},
+	/** Sets the canvas up, once, before the first frame. */
+	init: Function,
+	/** Draw on every animation frame. @default true */
+	animate: {
+		type: Boolean,
+		default: true
+	},
+	/** Settings for the 2D context. Read once, when the canvas is created. */
+	options: Object,
+	/** Keep the drawing while the canvas is resized. @default true */
+	reduceFlickering: {
+		type: Boolean,
+		default: true
+	},
+	/** Follow the size of the parent element; `width` and `height` are ignored. */
+	resizable: Boolean,
+	/** Width in CSS pixels, while not `resizable`. @default 100 */
+	width: {
+		type: Number,
+		default: 100
+	},
+	/** Height in CSS pixels, while not `resizable`. @default 100 */
+	height: {
+		type: Number,
+		default: 100
+	}
+};
 /** A `<canvas>` drawn by `draw` on every animation frame. */
 const AnimationCanvas = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "AnimationCanvas",
 	inheritAttrs: false,
-	props: {
-		/** Draws a frame. */
-		draw: {
-			type: Function,
-			required: true
-		},
-		/** Sets the canvas up before the first frame and after a resize. */
-		init: Function,
-		/** Draw on every animation frame. @default true */
-		animate: {
-			type: Boolean,
-			default: true
-		},
-		/** Settings for the 2D context. Read once, when the canvas is created. */
-		options: Object,
-		/** Keep the drawing while the canvas is resized. @default true */
-		reduceFlickering: {
-			type: Boolean,
-			default: true
-		},
-		/** Follow the size of the parent element; `width` and `height` are ignored. */
-		resizable: Boolean,
-		/** Width in CSS pixels, while not `resizable`. @default 100 */
-		width: {
-			type: Number,
-			default: 100
-		},
-		/** Height in CSS pixels, while not `resizable`. @default 100 */
-		height: {
-			type: Number,
-			default: 100
-		}
-	},
+	props: animationCanvasProps,
 	setup(props, { attrs }) {
 		const canvas = (0, vue.ref)(null);
 		const instance = (0, vue.shallowRef)(null);
@@ -110,7 +112,7 @@ function useInstance(target, options, create, update) {
 		flush: "post"
 	});
 	(0, vue.watch)(() => ({ ...(0, vue.toValue)(options) }), (next, previous) => {
-		if (instance) update(instance, (0, _tremolo_ui_dom.replaceOptions)(previous, next));
+		if (instance) update(instance, (0, _tremolo_ui_dom_internal.replaceOptions)(previous, next));
 	}, { flush: "post" });
 	return { current: () => instance };
 }
@@ -138,17 +140,18 @@ function useDropZone(target, options = {}) {
 }
 //#endregion
 //#region src/components/DropZone/DropZone.ts
+const dropZoneProps = {
+	/** Which files to take, as the `accept` attribute of a file input. */
+	accept: String,
+	/** Take every file dropped, rather than the first. */
+	multiple: Boolean,
+	/** Ignore drops. The zone carries `data-disabled`. */
+	disabled: Boolean
+};
 /** A region that takes dropped files. */
 const DropZone = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "DropZone",
-	props: {
-		/** Which files to take, as the `accept` attribute of a file input. */
-		accept: String,
-		/** Take every file dropped, rather than the first. */
-		multiple: Boolean,
-		/** Ignore drops. The zone carries `data-disabled`. */
-		disabled: Boolean
-	},
+	props: dropZoneProps,
 	emits: {
 		/** The dropped files that satisfy `accept`. */
 		drop: (files, _event) => Array.isArray(files),
@@ -189,6 +192,18 @@ function useFileInputContext() {
 }
 //#endregion
 //#region src/components/FileInput/FileInput.ts
+const fileInputProps = {
+	/**
+	* Which files to take: extensions, MIME types and type groups. It is
+	* checked again when the files arrive, since the picker only takes it as
+	* a hint.
+	*/
+	accept: String,
+	/** Let several files be picked at once. */
+	multiple: Boolean,
+	/** Make the input unusable. The parts carry `data-disabled`. */
+	disabled: Boolean
+};
 /**
 * Picks files. The control is the native file input, out of sight but in the
 * tab order, with `FileInputTrigger` as its label.
@@ -196,18 +211,7 @@ function useFileInputContext() {
 const FileInput = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "FileInput",
 	inheritAttrs: false,
-	props: {
-		/**
-		* Which files to take: extensions, MIME types and type groups. It is
-		* checked again when the files arrive, since the picker only takes it as
-		* a hint.
-		*/
-		accept: String,
-		/** Let several files be picked at once. */
-		multiple: Boolean,
-		/** Make the input unusable. The parts carry `data-disabled`. */
-		disabled: Boolean
-	},
+	props: fileInputProps,
 	emits: {
 		/** The picked files that satisfy `accept`. */
 		change: (files) => Array.isArray(files),
@@ -224,7 +228,7 @@ const FileInput = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		function onChange(event) {
 			const input = event.target;
-			const { accepted, rejected } = (0, _tremolo_ui_dom.partitionByAccept)(Array.from(input.files ?? []), props.accept);
+			const { accepted, rejected } = (0, _tremolo_ui_dom_internal.partitionByAccept)(Array.from(input.files ?? []), props.accept);
 			input.value = "";
 			if (accepted.length > 0) emit("change", accepted);
 			if (rejected.length > 0) emit("reject", rejected);
@@ -240,7 +244,7 @@ const FileInput = /* @__PURE__ */ (0, vue.defineComponent)({
 				accept: props.accept,
 				multiple: props.multiple,
 				disabled: props.disabled,
-				style: _tremolo_ui_dom.visuallyHiddenStyle,
+				style: _tremolo_ui_dom_internal.visuallyHiddenStyle,
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				"aria-describedby": ariaDescribedby,
@@ -292,7 +296,37 @@ function useDragValue(target, options) {
 * `@tremolo-ui/dom`.
 */
 function useWheel(target, onWheel, options = {}) {
-	useInstance(target, options, (element, opts) => (0, _tremolo_ui_dom.createWheel)(element, (event) => onWheel(event), opts), (instance, next) => instance.update(next));
+	useInstance(target, options, (element, opts) => (0, _tremolo_ui_dom.createWheel)(element, {
+		...opts,
+		onWheel: (event) => onWheel(event)
+	}), (instance, next) => instance.update(next));
+}
+//#endregion
+//#region src/components/_util/change-gesture.ts
+/**
+* The core's change gesture, reporting the control's value: the start gets
+* the value before the change, the end the last one the control emitted.
+* `modelValue` lags behind until the parent renders, and a drag ends in the
+* same event as its last change, so the component reports each value it
+* emits through `changed`.
+*/
+function useChangeGesture(options) {
+	let last = options.value();
+	const gesture = (0, _tremolo_ui_dom.createChangeGesture)({
+		onStart: (source) => {
+			last = options.value();
+			options.onStart(last, source);
+		},
+		onEnd: (source) => options.onEnd(last, source)
+	});
+	(0, vue.watchEffect)(() => gesture.update({ endDelay: options.endDelay() }));
+	(0, vue.watch)(options.inactive, (inactive) => {
+		if (inactive) gesture.end();
+	});
+	(0, vue.onScopeDispose)(() => gesture.end());
+	return Object.assign(gesture, { changed: (value) => {
+		last = value;
+	} });
 }
 //#endregion
 //#region src/components/_util/useCheckSteps.ts
@@ -306,85 +340,108 @@ function useCheckSteps(options) {
 	try {
 		if (process.env.NODE_ENV === "production") return;
 		(0, vue.watchEffect)(() => {
-			for (const warning of (0, _tremolo_ui_dom.checkSteps)(options())) console.warn(warning);
+			for (const warning of (0, _tremolo_ui_dom_internal.checkSteps)(options())) console.warn(warning);
 		});
 	} catch {}
 }
 //#endregion
 //#region src/components/Knob/Knob.ts
+const knobProps = {
+	/** The current value. Bind it with `v-model`. */
+	modelValue: {
+		type: Number,
+		required: true
+	},
+	/** The value with the knob turned all the way down. */
+	min: {
+		type: Number,
+		required: true
+	},
+	/** The value with the knob turned all the way up. */
+	max: {
+		type: Number,
+		required: true
+	},
+	/** Granularity of the value. @default 1 */
+	step: {
+		type: Number,
+		default: 1
+	},
+	/** How the value is distributed across the travel. @default linearScale */
+	scale: {
+		type: Object,
+		default: () => _tremolo_ui_functions.linearScale
+	},
+	/**
+	* The value a double click restores. `null` turns the double click off.
+	* @default startValue
+	*/
+	resetValue: {
+		type: Number,
+		default: void 0
+	},
+	/** Where the active arc starts. @default min */
+	startValue: Number,
+	/** Width and height of the knob. Sets `--knob-size`. */
+	size: [Number, String],
+	/** The cursor to show while dragging. @default 'grabbing' */
+	dragCursor: {
+		type: String,
+		default: "grabbing"
+	},
+	/** How much one notch of the wheel moves the value. `null` turns it off. */
+	wheel: {
+		type: [Array, Object],
+		default: () => _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS
+	},
+	/** How much one arrow key press moves the value. `null` turns it off. */
+	keyboard: {
+		type: [Array, Object],
+		default: () => _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS
+	},
+	/** How much a drag moves the value, per modifier key. */
+	dragSensitivity: {
+		type: [Number, Object],
+		default: () => _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY
+	},
+	/** Hide the cursor while dragging and read the movement directly. */
+	pointerLock: Boolean,
+	/** Make the knob unchangeable and remove it from the tab order. */
+	disabled: Boolean,
+	/** Make the knob unchangeable while leaving it focusable. */
+	readonly: Boolean,
+	/**
+	* How long after the last wheel notch or arrow key a change counts as over,
+	* in milliseconds, for `change-end`.
+	* @default 500
+	*/
+	changeEndDelay: {
+		type: Number,
+		default: 500
+	},
+	/** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+	angleRange: {
+		type: Number,
+		default: 270
+	}
+};
 /**
 * Interactive rotary knob, drawn in SVG by `KnobSVGRoot` and the parts inside
 * it. Bind the value with `v-model`.
 */
 const Knob = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Knob",
-	props: {
-		/** The current value. Bind it with `v-model`. */
-		modelValue: {
-			type: Number,
-			required: true
-		},
-		/** The value with the knob turned all the way down. */
-		min: {
-			type: Number,
-			required: true
-		},
-		/** The value with the knob turned all the way up. */
-		max: {
-			type: Number,
-			required: true
-		},
-		/** Granularity of the value. @default 1 */
-		step: {
-			type: Number,
-			default: 1
-		},
-		/** How the value is distributed across the travel. @default linearScale */
-		scale: {
-			type: Object,
-			default: () => _tremolo_ui_functions.linearScale
-		},
-		/** The value a double click restores. @default min */
-		defaultValue: Number,
-		/** Where the active arc starts. @default min */
-		startValue: Number,
-		/** Width and height of the knob. Sets `--knob-size`. */
-		size: [Number, String],
-		/** The cursor to show while dragging. @default { cursor: 'grabbing' } */
-		externalStyles: Object,
-		/** How much one notch of the wheel moves the value. `null` turns it off. */
-		wheel: {
-			type: [Array, Object],
-			default: () => _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS
-		},
-		/** How much one arrow key press moves the value. `null` turns it off. */
-		keyboard: {
-			type: [Array, Object],
-			default: () => _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS
-		},
-		/** How much a drag moves the value, per modifier key. */
-		dragSensitivity: {
-			type: [Number, Object],
-			default: () => _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY
-		},
-		/** Hide the cursor while dragging and read the movement directly. */
-		pointerLock: Boolean,
-		/** Restore `defaultValue` on a double click. @default true */
-		enableDoubleClickDefault: {
-			type: Boolean,
-			default: true
-		},
-		/** Make the knob unchangeable and remove it from the tab order. */
-		disabled: Boolean,
-		/** Make the knob unchangeable while leaving it focusable. */
-		readonly: Boolean,
-		/** How far the knob turns from `min` to `max`, in degrees. @default 270 */
-		angleRange: {
-			type: Number,
-			default: 270
-		}
+	props: knobProps,
+	emits: {
+		"update:modelValue": (value) => typeof value === "number",
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => typeof value === "number"
 	},
-	emits: { "update:modelValue": (value) => typeof value === "number" },
 	setup(props, { slots, emit, expose }) {
 		const root = (0, vue.ref)(null);
 		const dragging = (0, vue.ref)(false);
@@ -435,7 +492,17 @@ const Knob = /* @__PURE__ */ (0, vue.defineComponent)({
 				return angles.value;
 			}
 		});
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(next);
+			emit("update:modelValue", next);
+		};
 		useDragValue(root, () => ({
 			axis: [range.value, {
 				...range.value,
@@ -443,11 +510,11 @@ const Knob = /* @__PURE__ */ (0, vue.defineComponent)({
 			}],
 			mapping: (0, _tremolo_ui_dom.relativeMapping)({
 				pixelRange: 100,
-				sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(props.dragSensitivity, state.event).value
+				sensitivity: (state) => (0, _tremolo_ui_dom_internal.selectModifier)(props.dragSensitivity, state.event).value
 			}),
 			getValue: () => [props.modelValue, props.modelValue],
 			threshold: 1,
-			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "grabbing",
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			pointerLock: inactive.value ? false : props.pointerLock,
 			shouldStart: () => !inactive.value,
 			onChange: (v) => {
@@ -455,17 +522,20 @@ const Knob = /* @__PURE__ */ (0, vue.defineComponent)({
 			},
 			onDragStart: () => {
 				dragging.value = true;
+				if (!inactive.value) gesture.hold("pointer");
 			},
 			onDragEnd: () => {
 				dragging.value = false;
+				gesture.end();
 			}
 		}));
 		useWheel(root, (event) => {
 			if (!props.wheel || inactive.value) return;
-			const direction = (0, _tremolo_ui_dom.wheelDirection)(event);
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event);
 			if (direction === null) return;
 			event.preventDefault();
-			change((0, _tremolo_ui_dom.applyDelta)(props.modelValue, direction, props.wheel, range.value, event));
+			gesture.pulse("wheel");
+			change((0, _tremolo_ui_dom_internal.applyDelta)(props.modelValue, direction, props.wheel, range.value, event));
 		}, { requireFocus: true });
 		expose({
 			/** Move the focus to the knob. */
@@ -487,16 +557,17 @@ const Knob = /* @__PURE__ */ (0, vue.defineComponent)({
 			"data-disabled": props.disabled ? "" : void 0,
 			"data-readonly": props.readonly ? "" : void 0,
 			"data-dragging": dragging.value ? "" : void 0,
-			style: { "--knob-size": (0, _tremolo_ui_dom.cssLength)(props.size) },
+			style: { "--knob-size": (0, _tremolo_ui_dom_internal.cssLength)(props.size) },
 			onKeydown: (event) => {
 				if (!props.keyboard || inactive.value) return;
-				const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+				const direction = (0, _tremolo_ui_dom_internal.arrowKeyDirection)(event.key);
 				if (direction === null) return;
 				event.preventDefault();
-				change((0, _tremolo_ui_dom.applyDelta)(props.modelValue, direction, props.keyboard, range.value, event));
+				gesture.pulse("keyboard");
+				change((0, _tremolo_ui_dom_internal.applyDelta)(props.modelValue, direction, props.keyboard, range.value, event));
 			},
 			onDblclick: () => {
-				if (!inactive.value && props.enableDoubleClickDefault) change(props.defaultValue ?? props.min);
+				if (!inactive.value && props.resetValue !== null) gesture.instant("doubleClick", () => change(props.resetValue ?? props.startValue ?? props.min));
 			}
 		}, slots.default?.());
 	}
@@ -602,54 +673,55 @@ const KnobSVGRoot = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Knob/KnobThumb.ts
+const knobThumbProps = {
+	/** Fill colour of the circle. @default 'currentColor' */
+	color: {
+		type: String,
+		default: "currentColor"
+	},
+	/** Colour of the line that points at the value. @default 'currentColor' */
+	lineColor: {
+		type: String,
+		default: "currentColor"
+	},
+	/** Diameter of the circle, as a percentage of the knob. @default 84 */
+	size: {
+		type: Number,
+		default: 84
+	},
+	/** Thickness of the line, as a percentage of the knob. @default 6 */
+	lineWeight: {
+		type: Number,
+		default: 6
+	},
+	/** How far down the line reaches, as a percentage. @default 35 */
+	lineLength: {
+		type: Number,
+		default: 35
+	},
+	/** Classes for the line that points at the value. */
+	classes: Object
+};
 /** The circle that turns with the value, and the line on it that points at it. */
 const KnobThumb = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "KnobThumb",
-	props: {
-		/** Fill colour of the circle. @default 'currentColor' */
-		thumb: {
-			type: String,
-			default: "currentColor"
-		},
-		/** Colour of the line that points at the value. @default 'currentColor' */
-		thumbLine: {
-			type: String,
-			default: "currentColor"
-		},
-		/** Diameter of the circle, as a percentage of the knob. @default 84 */
-		thumbSize: {
-			type: Number,
-			default: 84
-		},
-		/** Thickness of the line, as a percentage of the knob. @default 6 */
-		thumbLineWeight: {
-			type: Number,
-			default: 6
-		},
-		/** How far down the line reaches, as a percentage. @default 35 */
-		thumbLineLength: {
-			type: Number,
-			default: 35
-		},
-		/** Classes for the line that points at the value. */
-		classes: Object
-	},
+	props: knobThumbProps,
 	setup(props) {
 		checkPlacement("KnobThumb", "KnobSVGRoot");
 		const knob = useKnobContext();
 		return () => (0, vue.h)("svg", null, [(0, vue.h)("circle", {
 			cx: "50%",
 			cy: "50%",
-			r: `${props.thumbSize / 2}%`,
-			fill: props.thumb
+			r: `${props.size / 2}%`,
+			fill: props.color
 		}), (0, vue.h)("line", {
-			class: props.classes?.thumbLine,
+			class: props.classes?.line,
 			x1: "50%",
-			y1: `${(_tremolo_ui_dom.KNOB_VIEWBOX_SIZE - (0, _tremolo_ui_functions.clamp)(props.thumbSize, 0, 100)) / 2}%`,
+			y1: `${(_tremolo_ui_dom.KNOB_VIEWBOX_SIZE - (0, _tremolo_ui_functions.clamp)(props.size, 0, 100)) / 2}%`,
 			x2: "50%",
-			y2: `${props.thumbLineLength}%`,
-			stroke: props.thumbLine,
-			"stroke-width": `${props.thumbLineWeight}%`,
+			y2: `${props.lineLength}%`,
+			stroke: props.lineColor,
+			"stroke-width": `${props.lineWeight}%`,
 			style: {
 				transform: `rotate(${knob.angles.r1 + knob.angles.p * knob.angleRange}deg)`,
 				transformOrigin: "50% 50%"
@@ -664,6 +736,7 @@ const NumberInputKey = Symbol("NumberInput");
 function useNumberInputContext() {
 	return injectContext(NumberInputKey, "NumberInput");
 }
+const NumberInputGestureKey = Symbol("NumberInputGesture");
 /** @internal Whether the drag on `NumberInputStepper` has moved the value. */
 const StepperKey = Symbol("NumberInputStepper");
 //#endregion
@@ -685,74 +758,99 @@ const dragSensitivityProp = {
 };
 //#endregion
 //#region src/components/NumberInput/NumberInput.ts
+const numberInputProps = {
+	/** The current value. Bind it with `v-model`. */
+	modelValue: {
+		type: Number,
+		required: true
+	},
+	/** The lowest value. Leave it out for no lower end. */
+	min: Number,
+	/** The highest value. Leave it out for no upper end. */
+	max: Number,
+	/** Granularity of the value. @default 1 */
+	step: {
+		type: Number,
+		default: 1
+	},
+	/** How the value is distributed, for a `normalized` amount. */
+	scale: {
+		type: Object,
+		default: () => _tremolo_ui_functions.linearScale
+	},
+	/** The text shown for a value. @default String */
+	format: {
+		type: Function,
+		default: String
+	},
+	/** Read a value back out of the text. Has to undo `format`. */
+	parse: {
+		type: Function,
+		default: _tremolo_ui_dom_internal.parseNumberText
+	},
+	/** Keep the value within `min` and `max` when committed or stepped. */
+	clampValue: {
+		type: Boolean,
+		default: true
+	},
+	wheel: wheelProp,
+	keyboard: keyboardProp,
+	dragSensitivity: dragSensitivityProp,
+	/** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
+	drag: {
+		type: Number,
+		default: 1
+	},
+	/** Hide the cursor while dragging the stepper. */
+	pointerLock: Boolean,
+	/** The cursor to show while dragging the stepper. @default 'ns-resize' */
+	dragCursor: {
+		type: String,
+		default: "ns-resize"
+	},
+	/** Select the text when the field takes focus. @default 'none' */
+	selectOnFocus: {
+		type: String,
+		default: "none"
+	},
+	/** Show the plain value while the field has focus. */
+	unformatOnFocus: Boolean,
+	/** Put the caret back at the same digit after an arrow key step. */
+	keepCaretOnStep: Boolean,
+	/** Commit and leave the field on Enter. @default true */
+	blurOnEnter: {
+		type: Boolean,
+		default: true
+	},
+	/** Make the input unchangeable and remove it from the tab order. */
+	disabled: Boolean,
+	/** Make the value unchangeable while leaving the field focusable. */
+	readonly: Boolean,
+	/**
+	* How long after the last wheel notch, arrow key or typed character a change
+	* counts as over, in milliseconds, for `change-end`.
+	* @default 500
+	*/
+	changeEndDelay: {
+		type: Number,
+		default: 500
+	}
+};
 /** Input with some useful functions for entering numbers. Bind it with `v-model`. */
 const NumberInput = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "NumberInput",
-	props: {
-		/** The current value. Bind it with `v-model`. */
-		modelValue: {
-			type: Number,
-			required: true
-		},
-		/** The lowest value. Leave it out for no lower end. */
-		min: Number,
-		/** The highest value. Leave it out for no upper end. */
-		max: Number,
-		/** Granularity of the value. @default 1 */
-		step: {
-			type: Number,
-			default: 1
-		},
-		/** How the value is distributed, for a `normalized` amount. */
-		scale: {
-			type: Object,
-			default: () => _tremolo_ui_functions.linearScale
-		},
-		/** The text shown for a value. @default String */
-		format: {
-			type: Function,
-			default: String
-		},
-		/** Read a value back out of the text. Has to undo `format`. */
-		parse: {
-			type: Function,
-			default: _tremolo_ui_dom.parseNumberText
-		},
-		/** Keep the value within `min` and `max` when committed or stepped. */
-		clampValue: {
-			type: Boolean,
-			default: true
-		},
-		wheel: wheelProp,
-		keyboard: keyboardProp,
-		dragSensitivity: dragSensitivityProp,
-		/** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
-		drag: {
-			type: Number,
-			default: 1
-		},
-		/** Hide the cursor while dragging the stepper. */
-		pointerLock: Boolean,
-		/** Select the text when the field takes focus. @default 'none' */
-		selectOnFocus: {
-			type: String,
-			default: "none"
-		},
-		/** Show the plain value while the field has focus. */
-		unformatOnFocus: Boolean,
-		/** Put the caret back at the same digit after an arrow key step. */
-		keepCaretOnStep: Boolean,
-		/** Commit and leave the field on Enter. @default true */
-		blurOnEnter: {
-			type: Boolean,
-			default: true
-		},
-		/** Make the input unchangeable and remove it from the tab order. */
-		disabled: Boolean,
-		/** Make the value unchangeable while leaving the field focusable. */
-		readonly: Boolean
+	props: numberInputProps,
+	emits: {
+		"update:modelValue": (value) => typeof value === "number",
+		/**
+		* A change of the value started — a press on a stepper, the first wheel
+		* notch, arrow key or typed character — with the value before it and what
+		* it is made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => typeof value === "number"
 	},
-	emits: { "update:modelValue": (value) => typeof value === "number" },
 	setup(props, { slots, emit, expose }) {
 		const root = (0, vue.ref)(null);
 		/**
@@ -762,14 +860,14 @@ const NumberInput = /* @__PURE__ */ (0, vue.defineComponent)({
 		const draft = (0, vue.ref)(null);
 		let input = null;
 		const inactive = (0, vue.computed)(() => props.disabled || props.readonly);
-		const ranges = (0, vue.computed)(() => (0, _tremolo_ui_dom.numberInputRanges)({
+		const ranges = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.numberInputRanges)({
 			min: props.min,
 			max: props.max,
 			step: props.step,
 			scale: props.scale,
 			clampValue: props.clampValue
 		}));
-		const bounds = (0, vue.computed)(() => (0, _tremolo_ui_dom.numberInputBounds)(props.modelValue, {
+		const bounds = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.numberInputBounds)(props.modelValue, {
 			min: props.min,
 			max: props.max,
 			clampValue: props.clampValue
@@ -787,11 +885,40 @@ const NumberInput = /* @__PURE__ */ (0, vue.defineComponent)({
 			wheel: props.wheel,
 			format: props.format
 		}));
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
 		function changeValue(next) {
 			if (inactive.value) return;
 			draft.value = null;
-			if (next !== props.modelValue) emit("update:modelValue", next);
+			if (next === props.modelValue) return;
+			gesture.changed(next);
+			emit("update:modelValue", next);
 		}
+		let pressed = false;
+		(0, vue.provide)(NumberInputGestureKey, {
+			press: () => {
+				if (inactive.value) return;
+				gesture.hold("pointer");
+				if (pressed) return;
+				pressed = true;
+				const release = () => {
+					pressed = false;
+					gesture.end();
+					window.removeEventListener("pointerup", release);
+					window.removeEventListener("pointercancel", release);
+				};
+				window.addEventListener("pointerup", release);
+				window.addEventListener("pointercancel", release);
+			},
+			key: () => {
+				if (!inactive.value) gesture.pulse("keyboard");
+			}
+		});
 		(0, vue.provide)(NumberInputKey, {
 			get value() {
 				return props.modelValue;
@@ -823,6 +950,9 @@ const NumberInput = /* @__PURE__ */ (0, vue.defineComponent)({
 			get pointerLock() {
 				return props.pointerLock;
 			},
+			get dragCursor() {
+				return props.dragCursor;
+			},
 			get selectOnFocus() {
 				return props.selectOnFocus;
 			},
@@ -857,29 +987,40 @@ const NumberInput = /* @__PURE__ */ (0, vue.defineComponent)({
 				if (inactive.value) return;
 				draft.value = next;
 				const parsed = props.parse(next);
-				if (Number.isFinite(parsed)) emit("update:modelValue", parsed);
+				if (!Number.isFinite(parsed)) return;
+				if (parsed !== props.modelValue) {
+					gesture.pulse("keyboard");
+					gesture.changed(parsed);
+				}
+				emit("update:modelValue", parsed);
 			},
 			commitDraft: () => {
 				if (draft.value === null || inactive.value) return;
-				const committed = (0, _tremolo_ui_dom.commitNumberInputText)(draft.value, props.parse, {
+				const committed = (0, _tremolo_ui_dom_internal.commitNumberInputText)(draft.value, props.parse, {
 					min: props.min,
 					max: props.max,
 					clampValue: props.clampValue
 				});
-				if (committed === null) draft.value = null;
-				else changeValue(committed);
+				if (committed === null) {
+					draft.value = null;
+					return;
+				}
+				if (committed !== props.modelValue) gesture.pulse("keyboard");
+				changeValue(committed);
+				gesture.end();
 			},
 			changeValue,
-			nudge: (direction, option, modifiers) => changeValue((0, _tremolo_ui_dom.nudgeNumberInput)(props.modelValue, direction, option, ranges.value, modifiers)),
+			nudge: (direction, option, modifiers) => changeValue((0, _tremolo_ui_dom_internal.nudgeNumberInput)(props.modelValue, direction, option, ranges.value, modifiers)),
 			setInput: (element) => {
 				input = element;
 			}
 		});
 		useWheel(root, (event) => {
-			const direction = (0, _tremolo_ui_dom.wheelDirection)(event);
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event);
 			if (!props.wheel || inactive.value || direction === null) return;
 			event.preventDefault();
-			changeValue((0, _tremolo_ui_dom.nudgeNumberInput)(props.modelValue, direction, props.wheel, ranges.value, event));
+			gesture.pulse("wheel");
+			changeValue((0, _tremolo_ui_dom_internal.nudgeNumberInput)(props.modelValue, direction, props.wheel, ranges.value, event));
 		}, { requireFocus: true });
 		expose({
 			focus: () => {
@@ -917,9 +1058,11 @@ function stepperButton(name, direction) {
 		setup(_, { slots }) {
 			const field = useNumberInputContext();
 			const stepper = (0, vue.inject)(StepperKey, null);
+			const gesture = (0, vue.inject)(NumberInputGestureKey, null);
 			const blocked = (0, vue.computed)(() => field.disabled || (direction > 0 ? field.atMax : field.atMin));
 			const press = useLongPress({ onPress: () => {
 				if (field.disabled || field.readonly) return;
+				gesture?.press();
 				if (stepper?.moved()) return;
 				field.nudge(direction, ["raw", field.step]);
 			} });
@@ -960,6 +1103,7 @@ const NumberInputField = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "NumberInputField",
 	setup(_, { expose }) {
 		const field = useNumberInputContext();
+		const gesture = (0, vue.inject)(NumberInputGestureKey, null);
 		const input = (0, vue.ref)(null);
 		const focused = (0, vue.ref)(false);
 		(0, vue.watchEffect)(() => field.setInput(input.value));
@@ -973,18 +1117,19 @@ const NumberInputField = /* @__PURE__ */ (0, vue.defineComponent)({
 			const span = field.selectOnFocus === "all" ? {
 				start: 0,
 				end: element.value.length
-			} : (0, _tremolo_ui_dom.numberSpan)(element.value);
+			} : (0, _tremolo_ui_dom_internal.numberSpan)(element.value);
 			if (span) element.setSelectionRange(span.start, span.end);
 		}
 		async function step(direction, event) {
 			const element = event.currentTarget;
 			const from = element.value;
-			const offset = field.keepCaretOnStep && element.selectionStart !== null ? (0, _tremolo_ui_dom.caretDecimalOffset)(from, element.selectionStart) : null;
+			const offset = field.keepCaretOnStep && element.selectionStart !== null ? (0, _tremolo_ui_dom_internal.caretDecimalOffset)(from, element.selectionStart) : null;
+			gesture?.key();
 			field.nudge(direction, field.keyboard, event);
 			if (offset === null) return;
 			await (0, vue.nextTick)();
 			if (element.value === from) return;
-			const caret = (0, _tremolo_ui_dom.caretAtDecimalOffset)(element.value, offset);
+			const caret = (0, _tremolo_ui_dom_internal.caretAtDecimalOffset)(element.value, offset);
 			element.setSelectionRange(caret, caret);
 		}
 		expose({
@@ -1045,6 +1190,7 @@ const NumberInputStepper = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "NumberInputStepper",
 	setup(_, { slots }) {
 		const field = useNumberInputContext();
+		const gesture = (0, vue.inject)(NumberInputGestureKey, null);
 		const el = (0, vue.ref)(null);
 		let instance = null;
 		const enabled = (0, vue.computed)(() => field.drag !== null && !field.disabled && !field.readonly);
@@ -1052,11 +1198,12 @@ const NumberInputStepper = /* @__PURE__ */ (0, vue.defineComponent)({
 			range: field.rawRange,
 			pixels: field.drag ?? 1,
 			sensitivity: field.dragSensitivity,
-			pointerLock: field.pointerLock
+			pointerLock: field.pointerLock,
+			cursor: field.dragCursor
 		});
 		(0, vue.watch)([el, enabled], ([element, on], _, onCleanup) => {
 			if (!element || !on) return;
-			const current = (0, _tremolo_ui_dom.createStepperDrag)(element, {
+			const current = (0, _tremolo_ui_dom_internal.createStepperDrag)(element, {
 				...options(),
 				getValue: () => field.value,
 				onChange: (next) => field.changeValue(next)
@@ -1072,70 +1219,76 @@ const NumberInputStepper = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		(0, vue.watch)(options, (next) => instance?.update(next));
 		(0, vue.provide)(StepperKey, { moved: () => instance?.moved() ?? false });
-		return () => (0, vue.h)("div", { ref: el }, slots.default?.());
+		return () => (0, vue.h)("div", {
+			ref: el,
+			onPointerdown: () => {
+				if (enabled.value) gesture?.press();
+			}
+		}, slots.default?.());
 	}
 });
 //#endregion
 //#region src/components/Piano/Piano.ts
+const pianoProps = {
+	/** The notes drawn, from `first` to `last`. */
+	noteRange: {
+		type: Object,
+		required: true
+	},
+	/** Let a pointer slide from one key to the next. @default true */
+	glissando: {
+		type: Boolean,
+		default: true
+	},
+	/** Highest note that can sound. @default 127 */
+	midiMax: {
+		type: Number,
+		default: 127
+	},
+	/** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
+	keyboardShortcuts: Object,
+	/** Where keyboard shortcuts listen. @default 'root' */
+	keyboardShortcutsScope: {
+		type: String,
+		default: "root"
+	},
+	/** Follow the width of the parent element. */
+	resizable: Boolean,
+	/** Width of a white key in pixels. @default 40 */
+	whiteKeyWidth: {
+		type: Number,
+		default: 40
+	},
+	/** Space between two white keys, in pixels. @default 1 */
+	keyGap: {
+		type: Number,
+		default: 1
+	},
+	/** Width of a black key, as a fraction of a white one. @default 0.65 */
+	blackKeyWidthRatio: {
+		type: Number,
+		default: .65
+	},
+	/** Height of a black key, as a fraction of the keyboard. @default 0.6 */
+	blackKeyHeightRatio: {
+		type: Number,
+		default: .6
+	},
+	/** Classes for the label inside each key. */
+	classes: Object,
+	/**
+	* Extra attributes for one key, by note. The geometry of the key is
+	* applied after the returned style and cannot be overridden.
+	*/
+	keyProps: Function
+};
 /**
 * Customizable piano. The keys are drawn by the component; what goes inside
 * one is the `label` slot, which receives the note and its state.
 */
 const Piano = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Piano",
-	props: {
-		/** The notes drawn, from `first` to `last`. */
-		noteRange: {
-			type: Object,
-			required: true
-		},
-		/** Let a pointer slide from one key to the next. @default true */
-		glissando: {
-			type: Boolean,
-			default: true
-		},
-		/** Highest note that can sound. @default 127 */
-		midiMax: {
-			type: Number,
-			default: 127
-		},
-		/** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
-		keyboardShortcuts: Object,
-		/** Where keyboard shortcuts listen. @default 'root' */
-		keyboardShortcutsScope: {
-			type: String,
-			default: "root"
-		},
-		/** Follow the width of the parent element. */
-		resizable: Boolean,
-		/** Width of a white key in pixels. @default 40 */
-		whiteKeyWidth: {
-			type: Number,
-			default: 40
-		},
-		/** Space between two white keys, in pixels. @default 1 */
-		keyGap: {
-			type: Number,
-			default: 1
-		},
-		/** Width of a black key, as a fraction of a white one. @default 0.65 */
-		blackKeyWidthRatio: {
-			type: Number,
-			default: .65
-		},
-		/** Height of a black key, as a fraction of the keyboard. @default 0.6 */
-		blackKeyHeightRatio: {
-			type: Number,
-			default: .6
-		},
-		/** Classes for the label inside each key. */
-		classes: Object,
-		/**
-		* Extra attributes for one key, by note. The geometry of the key is
-		* applied after the returned style and cannot be overridden.
-		*/
-		keyProps: Function
-	},
+	props: pianoProps,
 	emits: {
 		/** A note started sounding. */
 		playNote: (note, _velocity) => typeof note === "number",
@@ -1148,7 +1301,7 @@ const Piano = /* @__PURE__ */ (0, vue.defineComponent)({
 		const activeNotes = (0, vue.ref)([]);
 		/** Set while `resizable` is on, measured from the parent. */
 		const resizedKeyWidth = (0, vue.ref)(null);
-		const notes = (0, vue.computed)(() => (0, _tremolo_ui_dom.getNoteRangeArray)(props.noteRange));
+		const notes = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.getNoteRangeArray)(props.noteRange));
 		const layout = (0, vue.computed)(() => ({
 			noteRange: props.noteRange,
 			whiteKeyWidth: props.resizable ? resizedKeyWidth.value ?? props.whiteKeyWidth : props.whiteKeyWidth,
@@ -1196,7 +1349,7 @@ const Piano = /* @__PURE__ */ (0, vue.defineComponent)({
 			const parent = element.parentElement;
 			if (!parent) throw new Error("doesn't have a parent element.");
 			const observer = new ResizeObserver(() => {
-				resizedKeyWidth.value = (0, _tremolo_ui_dom.fitWhiteKeyWidth)(element.clientWidth, {
+				resizedKeyWidth.value = (0, _tremolo_ui_dom_internal.fitWhiteKeyWidth)(element.clientWidth, {
 					noteRange: {
 						first,
 						last
@@ -1227,7 +1380,7 @@ const Piano = /* @__PURE__ */ (0, vue.defineComponent)({
 			"data-resizable": props.resizable ? "" : void 0,
 			style: {
 				position: "relative",
-				width: props.resizable ? "100%" : `${(0, _tremolo_ui_dom.pianoWidth)(layout.value)}px`
+				width: props.resizable ? "100%" : `${(0, _tremolo_ui_dom_internal.pianoWidth)(layout.value)}px`
 			}
 		}, notes.value.map((note, index) => {
 			const state = {
@@ -1257,7 +1410,7 @@ const Piano = /* @__PURE__ */ (0, vue.defineComponent)({
 					keyStyle,
 					{
 						left: `${(0, _tremolo_ui_dom.notePosition)(note, layout.value)}px`,
-						width: `${white ? layout.value.whiteKeyWidth : (0, _tremolo_ui_dom.blackKeyWidth)(layout.value)}px`,
+						width: `${white ? layout.value.whiteKeyWidth : (0, _tremolo_ui_dom_internal.blackKeyWidth)(layout.value)}px`,
 						height: white ? "100%" : `${props.blackKeyHeightRatio * 100}%`
 					}
 				]
@@ -1275,42 +1428,46 @@ function usePointsEditorContext() {
 //#endregion
 //#region src/components/PointsEditor/PointsEditor.ts
 const EMPTY = [];
+const pointsEditorProps = {
+	/** Make the points unchangeable and remove them from the tab order. */
+	disabled: Boolean,
+	/** Make the points unmovable. */
+	readonly: Boolean,
+	/** The cursor to show while dragging a point. @default 'grabbing' */
+	dragCursor: {
+		type: String,
+		default: "grabbing"
+	},
+	/** How much one wheel notch moves the focused point. */
+	wheel: {
+		type: [Array, Object],
+		default: () => _tremolo_ui_dom_internal.POINTS_EDITOR_DEFAULT_WHEEL
+	},
+	/** How much one arrow key press moves a point. */
+	keyboard: {
+		type: [Array, Object],
+		default: () => _tremolo_ui_dom_internal.POINTS_EDITOR_DEFAULT_KEYBOARD
+	},
+	/** How much a drag moves a point, per modifier key. */
+	dragSensitivity: {
+		type: [Number, Object],
+		default: () => _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY
+	},
+	/**
+	* Let points be selected, and a selection be moved as one. A selection
+	* updates several points in the same tick.
+	*/
+	selectable: Boolean,
+	/** Ids of the selected points. Bind it with `v-model:selection`. */
+	selection: Array
+};
 /**
 * Multiple point controller. Bind the selection with `v-model:selection` to
 * hold it yourself; the editor keeps its own otherwise.
 */
 const PointsEditor = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "PointsEditor",
-	props: {
-		/** Make the points unchangeable and remove them from the tab order. */
-		disabled: Boolean,
-		/** Make the points unmovable. */
-		readonly: Boolean,
-		/** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
-		externalStyles: Object,
-		/** How much one wheel notch moves the focused point. */
-		wheel: {
-			type: [Array, Object],
-			default: () => _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_WHEEL
-		},
-		/** How much one arrow key press moves a point. */
-		keyboard: {
-			type: [Array, Object],
-			default: () => _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_KEYBOARD
-		},
-		/** How much a drag moves a point, per modifier key. */
-		dragSensitivity: {
-			type: [Number, Object],
-			default: () => _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY
-		},
-		/**
-		* Let points be selected, and a selection be moved as one. A selection
-		* updates several points in the same tick.
-		*/
-		selectable: Boolean,
-		/** Ids of the selected points. Bind it with `v-model:selection`. */
-		selection: Array
-	},
+	props: pointsEditorProps,
 	emits: { "update:selection": (selection) => Array.isArray(selection) },
 	setup(props, { slots, emit }) {
 		const ownSelection = (0, vue.shallowRef)(props.selection ?? []);
@@ -1347,8 +1504,8 @@ const PointsEditor = /* @__PURE__ */ (0, vue.defineComponent)({
 			get dragSensitivity() {
 				return props.dragSensitivity;
 			},
-			get cursor() {
-				return props.externalStyles?.cursor ?? "grabbing";
+			get dragCursor() {
+				return props.dragCursor;
 			},
 			get selectable() {
 				return props.selectable;
@@ -1404,7 +1561,7 @@ const PointsEditorContainer = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.watch)([el, selecting], ([element, on], _, onCleanup) => {
 			if (!element || !on) return;
 			const drag = (0, _tremolo_ui_dom.createDragValue)(element, {
-				axis: _tremolo_ui_dom.POINT_AXIS,
+				axis: _tremolo_ui_dom_internal.POINT_AXIS,
 				mapping: (0, _tremolo_ui_dom.elementMapping)(() => element),
 				shouldStart: (event) => !points.editor.isPointElement(event.target),
 				onDragStart: ([x, y], state) => points.editor.beginSelectionBox({
@@ -1423,7 +1580,7 @@ const PointsEditorContainer = /* @__PURE__ */ (0, vue.defineComponent)({
 			flush: "post"
 		});
 		useWheel(el, (event) => {
-			const move = (0, _tremolo_ui_dom.wheelMove)(event);
+			const move = (0, _tremolo_ui_dom_internal.wheelMove)(event);
 			if (!move) return;
 			const axis = move.axis === 0 ? "x" : "y";
 			if (points.editor.nudgeFocusedPoint(axis, move.direction, event)) event.preventDefault();
@@ -1451,59 +1608,76 @@ function visuallyHiddenRangeInput(props) {
 	return (0, vue.h)("input", {
 		...props,
 		type: "range",
-		style: _tremolo_ui_dom.visuallyHiddenStyle
+		style: _tremolo_ui_dom_internal.visuallyHiddenStyle
 	});
 }
 //#endregion
 //#region src/components/PointsEditor/PointsEditorPoint.ts
 const perAxis = (setting, axis) => typeof setting === "string" ? setting : setting?.[axis];
+const pointsEditorPointProps = {
+	/** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+	modelValue: {
+		type: Object,
+		required: true
+	},
+	/** How the selection refers to this point. One is generated when left out. */
+	id: String,
+	/** The lowest position the point can take, per axis. */
+	min: Object,
+	/** The highest position the point can take, per axis. */
+	max: Object,
+	/** Sets `--color`, for the theme to colour the point with. */
+	color: String,
+	/** Overrides the `disabled` of `PointsEditor`. */
+	disabled: {
+		type: Boolean,
+		default: void 0
+	},
+	/** Overrides the `readonly` of `PointsEditor`. */
+	readonly: {
+		type: Boolean,
+		default: void 0
+	},
+	/**
+	* How long after the last wheel notch or arrow key a change counts as over,
+	* in milliseconds, for `change-end`.
+	* @default 500
+	*/
+	changeEndDelay: {
+		type: Number,
+		default: 500
+	},
+	/** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+	wheel: {
+		type: [Array, Object],
+		default: void 0
+	},
+	/** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+	keyboard: {
+		type: [Array, Object],
+		default: void 0
+	},
+	/** The accessible name of each axis, or one for both. */
+	ariaLabel: [String, Object],
+	/** What the value of each axis means, or one for both. */
+	ariaValuetext: [String, Object]
+};
 /** One point, bound with `v-model` as `{ x, y }` from 0 to 1. */
 const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "PointsEditorPoint",
 	inheritAttrs: false,
-	props: {
-		/** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
-		modelValue: {
-			type: Object,
-			required: true
-		},
-		/** How the selection refers to this point. One is generated when left out. */
-		id: String,
-		/** The lowest position the point can take, per axis. */
-		min: Object,
-		/** The highest position the point can take, per axis. */
-		max: Object,
-		/** Sets `--color`, for the theme to colour the point with. */
-		color: String,
-		/** Overrides the `disabled` of `PointsEditor`. */
-		disabled: {
-			type: Boolean,
-			default: void 0
-		},
-		/** Overrides the `readonly` of `PointsEditor`. */
-		readonly: {
-			type: Boolean,
-			default: void 0
-		},
-		/** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
-		wheel: {
-			type: [Array, Object],
-			default: void 0
-		},
-		/** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
-		keyboard: {
-			type: [Array, Object],
-			default: void 0
-		},
-		/** The accessible name of each axis, or one for both. */
-		ariaLabel: [String, Object],
-		/** What the value of each axis means, or one for both. */
-		ariaValuetext: [String, Object]
-	},
+	props: pointsEditorPointProps,
 	emits: {
 		"update:modelValue": (value) => typeof value === "object",
-		dragStart: (value) => typeof value === "object",
-		dragEnd: (value) => typeof value === "object"
+		/**
+		* A change of this point started — a drag on it, the first wheel notch or
+		* arrow key while it has the focus — with where it is and what the change
+		* is made with. The points that move along with a selection report
+		* through `update:modelValue` only.
+		*/
+		changeStart: (value, _source) => typeof value === "object",
+		/** The change ended, with where the point is. */
+		changeEnd: (value, _source) => typeof value === "object"
 	},
 	setup(props, { slots, attrs, emit }) {
 		const points = usePointsEditorContext();
@@ -1515,7 +1689,14 @@ const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 		const inactive = (0, vue.computed)(() => disabled.value || readonly.value);
 		const wheel = (0, vue.computed)(() => props.wheel === void 0 ? points.wheel : props.wheel);
 		const keyboard = (0, vue.computed)(() => props.keyboard === void 0 ? points.keyboard : props.keyboard);
-		const current = (0, vue.computed)(() => (0, _tremolo_ui_dom.clampPoint)(props.modelValue, props.min, props.max));
+		const current = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.clampPoint)(props.modelValue, props.min, props.max));
+		const gesture = useChangeGesture({
+			value: () => current.value,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
 		const el = (0, vue.ref)(null);
 		const x = (0, vue.ref)(null);
 		const dragging = (0, vue.ref)(false);
@@ -1524,9 +1705,13 @@ const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 			min: props.min,
 			max: props.max,
 			readonly: inactive.value,
-			onChange: (next) => emit("update:modelValue", next),
+			onChange: (next) => {
+				gesture.changed(next);
+				emit("update:modelValue", next);
+			},
 			element: el.value,
-			wheel: wheel.value
+			wheel: wheel.value,
+			beforeWheel: () => gesture.pulse("wheel")
 		});
 		(0, vue.watch)(id, (key, _, onCleanup) => onCleanup(points.editor.registerPoint(key, read)), { immediate: true });
 		/** Where the pointer was when the drag started. */
@@ -1534,9 +1719,9 @@ const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.watch)(el, (element, _, onCleanup) => {
 			if (!element) return;
 			const drag = (0, _tremolo_ui_dom.createDragValue)(element, {
-				axis: _tremolo_ui_dom.POINT_AXIS,
-				mapping: (0, _tremolo_ui_dom.elementMapping)(() => points.container, { sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(points.dragSensitivity, state.event).value }),
-				cursor: inactive.value ? void 0 : points.cursor,
+				axis: _tremolo_ui_dom_internal.POINT_AXIS,
+				mapping: (0, _tremolo_ui_dom.elementMapping)(() => points.container, { sensitivity: (state) => (0, _tremolo_ui_dom_internal.selectModifier)(points.dragSensitivity, state.event).value }),
+				cursor: inactive.value ? void 0 : points.dragCursor,
 				shouldStart: () => !disabled.value,
 				onChange: ([px, py]) => {
 					if (origin) points.editor.movePointDrag({
@@ -1552,15 +1737,15 @@ const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 					};
 					dragging.value = true;
 					x.value?.focus();
-					if (!inactive.value) emit("dragStart", current.value);
+					if (!inactive.value) gesture.hold("pointer");
 				},
 				onDragEnd: () => {
 					origin = null;
 					dragging.value = false;
-					if (!inactive.value) emit("dragEnd", current.value);
+					gesture.end();
 				}
 			});
-			const stop = (0, vue.watch)(() => inactive.value ? void 0 : points.cursor, (cursor) => drag.update({ cursor }));
+			const stop = (0, vue.watch)(() => inactive.value ? void 0 : points.dragCursor, (cursor) => drag.update({ cursor }));
 			onCleanup(() => {
 				stop();
 				drag.destroy();
@@ -1621,10 +1806,11 @@ const PointsEditorPoint = /* @__PURE__ */ (0, vue.defineComponent)({
 						if (!disabled.value && event.target === event.currentTarget) x.value?.focus();
 					},
 					onKeydown: (event) => {
-						const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+						const move = (0, _tremolo_ui_dom_internal.arrowKeyMove)(event.key);
 						if (!move) return;
 						event.preventDefault();
 						if (inactive.value || !keyboard.value) return;
+						gesture.pulse("keyboard");
 						points.editor.nudgePoint(id.value, move.axis === 0 ? "x" : "y", move.direction, keyboard.value, event);
 					}
 				}, {
@@ -1674,62 +1860,85 @@ function useSliderContext() {
 }
 //#endregion
 //#region src/components/Slider/Slider.ts
+const sliderProps = {
+	/** The current value. Bind it with `v-model`. */
+	modelValue: {
+		type: Number,
+		required: true
+	},
+	/** The value at the start of the travel. */
+	min: {
+		type: Number,
+		required: true
+	},
+	/** The value at the end of the travel. */
+	max: {
+		type: Number,
+		required: true
+	},
+	/** Granularity of the value. @default 1 */
+	step: {
+		type: Number,
+		default: 1
+	},
+	/** How the value is distributed across the travel. @default linearScale */
+	scale: {
+		type: Object,
+		default: () => _tremolo_ui_functions.linearScale
+	},
+	/**
+	* Which way the slider runs. A vertical slider grows upwards.
+	* @default 'horizontal'
+	*/
+	orientation: {
+		type: String,
+		default: "horizontal"
+	},
+	/** Grow the value the other way. */
+	reverse: Boolean,
+	/** The cursor to show while dragging. @default 'pointer' */
+	dragCursor: {
+		type: String,
+		default: "pointer"
+	},
+	wheel: wheelProp,
+	keyboard: keyboardProp,
+	dragSensitivity: dragSensitivityProp,
+	/** Make the slider unchangeable and remove it from the tab order. */
+	disabled: Boolean,
+	/** Make the value unchangeable. */
+	readonly: Boolean,
+	/**
+	* How long after the last wheel notch or arrow key a change counts as over,
+	* in milliseconds, for `change-end`.
+	* @default 500
+	*/
+	changeEndDelay: {
+		type: Number,
+		default: 500
+	}
+};
 /** Customizable slider. Bind the value with `v-model`. */
 const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Slider",
-	props: {
-		/** The current value. Bind it with `v-model`. */
-		modelValue: {
-			type: Number,
-			required: true
-		},
-		/** The value at the start of the travel. */
-		min: {
-			type: Number,
-			required: true
-		},
-		/** The value at the end of the travel. */
-		max: {
-			type: Number,
-			required: true
-		},
-		/** Granularity of the value. @default 1 */
-		step: {
-			type: Number,
-			default: 1
-		},
-		/** How the value is distributed across the travel. @default linearScale */
-		scale: {
-			type: Object,
-			default: () => _tremolo_ui_functions.linearScale
-		},
-		/** Run the slider vertically, with the value growing upwards. */
-		vertical: Boolean,
-		/** Grow the value the other way. */
-		reverse: Boolean,
-		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
-		externalStyles: Object,
-		wheel: wheelProp,
-		keyboard: keyboardProp,
-		dragSensitivity: dragSensitivityProp,
-		/** Make the slider unchangeable and remove it from the tab order. */
-		disabled: Boolean,
-		/** Make the value unchangeable. */
-		readonly: Boolean
-	},
+	props: sliderProps,
 	emits: {
 		"update:modelValue": (value) => typeof value === "number",
-		/** A drag started, with the value where the track was pressed. */
-		dragStart: (value) => typeof value === "number",
-		/** The drag ended, with the value it ended on. */
-		dragEnd: (value) => typeof value === "number"
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => typeof value === "number"
 	},
 	setup(props, { slots, emit, expose }) {
 		const root = (0, vue.ref)(null);
 		let track = null;
 		let thumb = null;
 		const inactive = (0, vue.computed)(() => props.disabled || props.readonly);
-		const displayReversed = (0, vue.computed)(() => props.vertical !== props.reverse);
+		const vertical = (0, vue.computed)(() => props.orientation === "vertical");
+		const displayReversed = (0, vue.computed)(() => vertical.value !== props.reverse);
 		const percent = (0, vue.computed)(() => (0, _tremolo_ui_dom.valuePercent)(props.modelValue, {
 			min: props.min,
 			max: props.max,
@@ -1748,7 +1957,17 @@ const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 			keyboard: props.keyboard,
 			wheel: props.wheel
 		}));
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(next);
+			emit("update:modelValue", next);
+		};
 		(0, vue.provide)(SliderKey, {
 			get value() {
 				return props.modelValue;
@@ -1765,8 +1984,8 @@ const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 			get scale() {
 				return props.scale;
 			},
-			get vertical() {
-				return props.vertical;
+			get orientation() {
+				return props.orientation;
 			},
 			get reverse() {
 				return props.reverse;
@@ -1788,31 +2007,30 @@ const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 				thumb = input;
 			}
 		});
-		const valueOf = (v) => v[props.vertical ? 1 : 0];
+		const valueOf = (v) => v[vertical.value ? 1 : 0];
 		useDragValue(root, () => ({
 			axis: axis.value,
-			mapping: (0, _tremolo_ui_dom.elementMapping)(() => track, { sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(props.dragSensitivity, state.event).value }),
-			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "pointer",
+			mapping: (0, _tremolo_ui_dom.elementMapping)(() => track, { sensitivity: (state) => (0, _tremolo_ui_dom_internal.selectModifier)(props.dragSensitivity, state.event).value }),
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			shouldStart: () => !inactive.value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
 				if (!inactive.value) change(valueOf(v));
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive.value) return;
+				gesture.hold("pointer");
 				thumb?.focus();
-				emit("dragStart", valueOf(v));
 			},
-			onDragEnd: (v) => {
-				if (!inactive.value) emit("dragEnd", valueOf(v));
-			}
+			onDragEnd: () => gesture.end()
 		}));
 		useWheel(root, (event) => {
 			if (!props.wheel || inactive.value) return;
-			const direction = (0, _tremolo_ui_dom.wheelDirection)(event, { horizontal: !props.vertical });
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event, { horizontal: !vertical.value });
 			if (direction === null) return;
 			event.preventDefault();
-			change((0, _tremolo_ui_dom.applyDelta)(props.modelValue, props.reverse ? -direction : direction, props.wheel, axis.value, event));
+			gesture.pulse("wheel");
+			change((0, _tremolo_ui_dom_internal.applyDelta)(props.modelValue, props.reverse ? -direction : direction, props.wheel, axis.value, event));
 		}, { requireFocus: true });
 		expose({
 			/** Move the focus to the thumb. */
@@ -1826,15 +2044,16 @@ const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 			ref: root,
 			role: "group",
 			tabindex: -1,
-			"data-orientation": props.vertical ? "vertical" : "horizontal",
+			"data-orientation": props.orientation,
 			"data-disabled": props.disabled ? "" : void 0,
 			"data-readonly": props.readonly ? "" : void 0,
 			onKeydown: (event) => {
-				const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+				const direction = (0, _tremolo_ui_dom_internal.arrowKeyDirection)(event.key);
 				if (direction === null) return;
 				event.preventDefault();
 				if (!props.keyboard || inactive.value) return;
-				change((0, _tremolo_ui_dom.applyDelta)(props.modelValue, props.reverse ? -direction : direction, props.keyboard, axis.value, event));
+				gesture.pulse("keyboard");
+				change((0, _tremolo_ui_dom_internal.applyDelta)(props.modelValue, props.reverse ? -direction : direction, props.keyboard, axis.value, event));
 			},
 			onFocus: () => {
 				if (!props.disabled) thumb?.focus();
@@ -1845,43 +2064,44 @@ const Slider = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Slider/SliderMarksOption.ts
+const sliderMarksOptionProps = {
+	/** Where the mark sits, on the same scale as the thumb. */
+	value: {
+		type: Number,
+		required: true
+	},
+	/** Draw the mark itself. @default true */
+	mark: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	* Text shown next to the mark. Leave it out to show the value; `null`
+	* leaves the label out.
+	*/
+	label: {
+		type: [
+			Number,
+			String,
+			null
+		],
+		default: void 0
+	},
+	/** Thickness of the mark. Sets `--thickness`. */
+	thickness: [Number, String],
+	/** Length of the mark. Sets `--length`. */
+	length: [Number, String],
+	/** Space between the mark and the label. Sets `--gap`. */
+	gap: [Number, String],
+	/** Classes for the mark and the label inside the option. */
+	classes: Object,
+	/** Styles for the mark and the label inside the option. */
+	styles: Object
+};
 /** One mark along the slider, and its label. */
 const SliderMarksOption = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "SliderMarksOption",
-	props: {
-		/** Where the mark sits, on the same scale as the thumb. */
-		value: {
-			type: Number,
-			required: true
-		},
-		/** Draw the mark itself. @default true */
-		mark: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* Text shown next to the mark. Leave it out to show the value; `null`
-		* leaves the label out.
-		*/
-		label: {
-			type: [
-				Number,
-				String,
-				null
-			],
-			default: void 0
-		},
-		/** Thickness of the mark. Sets `--thickness`. */
-		thickness: [Number, String],
-		/** Length of the mark. Sets `--length`. */
-		length: [Number, String],
-		/** Space between the mark and the label. Sets `--gap`. */
-		gap: [Number, String],
-		/** Classes for the mark and the label inside the option. */
-		classes: Object,
-		/** Styles for the mark and the label inside the option. */
-		styles: Object
-	},
+	props: sliderMarksOptionProps,
 	setup(props) {
 		const slider = useSliderContext();
 		checkPlacement("SliderMarksOption", "SliderMarks");
@@ -1889,20 +2109,20 @@ const SliderMarksOption = /* @__PURE__ */ (0, vue.defineComponent)({
 			min: slider.min,
 			max: slider.max,
 			scale: slider.scale
-		}, slider.vertical !== slider.reverse));
+		}, slider.orientation === "vertical" !== slider.reverse));
 		return () => {
-			const orientation = slider.vertical ? "vertical" : "horizontal";
+			const orientation = slider.orientation;
 			return (0, vue.h)("div", {
 				"data-orientation": orientation,
 				style: {
-					"--thickness": (0, _tremolo_ui_dom.cssLength)(props.thickness),
-					"--length": (0, _tremolo_ui_dom.cssLength)(props.length),
-					"--gap": (0, _tremolo_ui_dom.cssLength)(props.gap),
+					"--thickness": (0, _tremolo_ui_dom_internal.cssLength)(props.thickness),
+					"--length": (0, _tremolo_ui_dom_internal.cssLength)(props.length),
+					"--gap": (0, _tremolo_ui_dom_internal.cssLength)(props.gap),
 					position: "absolute",
-					translate: slider.vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
+					translate: slider.orientation === "vertical" ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
 					zIndex: 10,
-					left: slider.vertical ? void 0 : `${percent.value}%`,
-					top: slider.vertical ? `${percent.value}%` : void 0
+					left: slider.orientation === "vertical" ? void 0 : `${percent.value}%`,
+					top: slider.orientation === "vertical" ? `${percent.value}%` : void 0
 				}
 			}, [props.mark ? (0, vue.h)("div", {
 				class: props.classes?.mark,
@@ -1917,35 +2137,36 @@ const SliderMarksOption = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Slider/SliderMarks.ts
+const sliderMarksProps = {
+	/** Space between the marks and the track. Sets `--gap`. */
+	gap: [Number, String],
+	/**
+	* Build the marks instead of writing `SliderMarksOption` out: a number
+	* puts one every that many, `'step'` one every `step`. The default slot
+	* is ignored while it is set.
+	*/
+	options: [
+		String,
+		Number,
+		Object
+	]
+};
 /** The marks along the slider: written out as options, or built from `options`. */
 const SliderMarks = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "SliderMarks",
-	props: {
-		/** Space between the marks and the track. Sets `--gap`. */
-		gap: [Number, String],
-		/**
-		* Build the marks instead of writing `SliderMarksOption` out: a number
-		* puts one every that many, `'step'` one every `step`. The default slot
-		* is ignored while it is set.
-		*/
-		options: [
-			String,
-			Number,
-			Object
-		]
-	},
+	props: sliderMarksProps,
 	setup(props, { slots }) {
 		const slider = useSliderContext();
 		providePlacement("SliderMarks");
 		const marks = (0, vue.computed)(() => {
 			if (props.options === void 0) return [];
-			const list = (0, _tremolo_ui_dom.sliderMarks)(props.options, slider.min, slider.max, slider.step);
-			return slider.vertical !== slider.reverse ? list.reverse() : list;
+			const list = (0, _tremolo_ui_dom_internal.sliderMarks)(props.options, slider.min, slider.max, slider.step);
+			return slider.orientation === "vertical" !== slider.reverse ? list.reverse() : list;
 		});
 		return () => (0, vue.h)("div", {
-			"data-orientation": slider.vertical ? "vertical" : "horizontal",
+			"data-orientation": slider.orientation,
 			style: {
-				"--gap": (0, _tremolo_ui_dom.cssLength)(props.gap),
+				"--gap": (0, _tremolo_ui_dom_internal.cssLength)(props.gap),
 				position: "relative"
 			}
 		}, props.options !== void 0 ? marks.value.map(({ value, mark, label }) => (0, vue.h)(SliderMarksOption, {
@@ -1958,6 +2179,9 @@ const SliderMarks = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Slider/SliderThumb.ts
+const sliderThumbProps = { 
+/** Sets `--color`, for the theme to colour the thumb with. */
+color: String };
 /**
 * The thumb, placed at the value. The ARIA (`aria-label` and friends) lands
 * on the range input inside it, which is the control and takes the focus.
@@ -1965,9 +2189,7 @@ const SliderMarks = /* @__PURE__ */ (0, vue.defineComponent)({
 const SliderThumb = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "SliderThumb",
 	inheritAttrs: false,
-	props: { 
-	/** Sets `--color`, for the theme to colour the thumb with. */
-color: String },
+	props: sliderThumbProps,
 	setup(props, { slots, attrs, expose }) {
 		const slider = useSliderContext();
 		checkPlacement("SliderThumb", "SliderTrack");
@@ -1995,8 +2217,8 @@ color: String },
 					},
 					style,
 					{
-						top: slider.vertical ? `${slider.percent}%` : "50%",
-						left: slider.vertical ? "50%" : `${slider.percent}%`
+						top: slider.orientation === "vertical" ? `${slider.percent}%` : "50%",
+						left: slider.orientation === "vertical" ? "50%" : `${slider.percent}%`
 					}
 				]
 			}, [visuallyHiddenRangeInput({
@@ -2007,7 +2229,7 @@ color: String },
 				step: slider.step,
 				disabled: slider.disabled,
 				"aria-readonly": slider.readonly,
-				"aria-orientation": slider.vertical ? "vertical" : "horizontal",
+				"aria-orientation": slider.orientation,
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				"aria-describedby": ariaDescribedby,
@@ -2026,19 +2248,20 @@ color: String },
 });
 //#endregion
 //#region src/components/Slider/SliderTrack.ts
+const sliderTrackProps = {
+	/** How long the track is along the axis the slider runs. Sets `--length`. */
+	length: [Number, String],
+	/** How thick the track is across that axis. Sets `--thickness`. */
+	thickness: [Number, String],
+	/** Colour of the part from `min` to the value. Sets `--active-color`. */
+	activeColor: String,
+	/** Colour of the rest of the track. Sets `--inactive-color`. */
+	inactiveColor: String
+};
 /** The track the thumb runs along, and what the pointer is measured against. */
 const SliderTrack = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "SliderTrack",
-	props: {
-		/** How long the track is along the axis the slider runs. Sets `--length`. */
-		length: [Number, String],
-		/** How thick the track is across that axis. Sets `--thickness`. */
-		thickness: [Number, String],
-		/** Colour of the part from `min` to the value. Sets `--active`. */
-		active: String,
-		/** Colour of the rest of the track. Sets `--inactive`. */
-		inactive: String
-	},
+	props: sliderTrackProps,
 	setup(props, { slots }) {
 		const slider = useSliderContext();
 		providePlacement("SliderTrack");
@@ -2048,13 +2271,13 @@ const SliderTrack = /* @__PURE__ */ (0, vue.defineComponent)({
 		return () => (0, vue.h)("div", {
 			ref: el,
 			"data-disabled": slider.disabled ? "" : void 0,
-			"data-orientation": slider.vertical ? "vertical" : "horizontal",
-			"data-flipped": slider.vertical !== slider.reverse ? "" : void 0,
+			"data-orientation": slider.orientation,
+			"data-flipped": slider.orientation === "vertical" !== slider.reverse ? "" : void 0,
 			style: {
-				"--active": props.active,
-				"--inactive": props.inactive,
-				"--length": (0, _tremolo_ui_dom.cssLength)(props.length),
-				"--thickness": (0, _tremolo_ui_dom.cssLength)(props.thickness),
+				"--active-color": props.activeColor,
+				"--inactive-color": props.inactiveColor,
+				"--length": (0, _tremolo_ui_dom_internal.cssLength)(props.length),
+				"--thickness": (0, _tremolo_ui_dom_internal.cssLength)(props.thickness),
 				"--percent": `${slider.percent}%`,
 				position: "relative"
 			}
@@ -2070,68 +2293,86 @@ function useXYPadContext() {
 }
 //#endregion
 //#region src/components/XYPad/XYPad.ts
+const xyPadProps = {
+	/** The current value as `[x, y]`. Bind it with `v-model`. */
+	modelValue: {
+		type: Array,
+		required: true
+	},
+	/** The value at the start of the travel, per axis. */
+	min: {
+		type: [Number, Array],
+		required: true
+	},
+	/** The value at the end of the travel, per axis. */
+	max: {
+		type: [Number, Array],
+		required: true
+	},
+	/** Granularity of the value, per axis. @default 1 */
+	step: {
+		type: [Number, Array],
+		default: 1
+	},
+	/** How the value is distributed, per axis. @default linearScale */
+	scale: {
+		type: [Object, Array],
+		default: () => _tremolo_ui_functions.linearScale
+	},
+	/** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
+	reverse: {
+		type: [Boolean, Array],
+		default: false
+	},
+	/** The cursor to show while dragging. @default 'pointer' */
+	dragCursor: {
+		type: String,
+		default: "pointer"
+	},
+	wheel: wheelProp,
+	keyboard: keyboardProp,
+	dragSensitivity: dragSensitivityProp,
+	/** Make the pad unchangeable and remove it from the tab order. */
+	disabled: Boolean,
+	/** Make the value unchangeable. */
+	readonly: Boolean,
+	/**
+	* How long after the last wheel notch or arrow key a change counts as over,
+	* in milliseconds, for `change-end`.
+	* @default 500
+	*/
+	changeEndDelay: {
+		type: Number,
+		default: 500
+	}
+};
 /**
 * Two-dimensional slider. The per-axis settings are `[x, y]` tuples, and a
 * plain value applies to both axes. Bind the value with `v-model`.
 */
 const XYPad = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "XYPad",
-	props: {
-		/** The current value as `[x, y]`. Bind it with `v-model`. */
-		modelValue: {
-			type: Array,
-			required: true
-		},
-		/** The value at the start of the travel, per axis. */
-		min: {
-			type: [Number, Array],
-			required: true
-		},
-		/** The value at the end of the travel, per axis. */
-		max: {
-			type: [Number, Array],
-			required: true
-		},
-		/** Granularity of the value, per axis. @default 1 */
-		step: {
-			type: [Number, Array],
-			default: 1
-		},
-		/** How the value is distributed, per axis. @default linearScale */
-		scale: {
-			type: [Object, Array],
-			default: () => _tremolo_ui_functions.linearScale
-		},
-		/** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
-		reverse: {
-			type: [Boolean, Array],
-			default: false
-		},
-		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
-		externalStyles: Object,
-		wheel: wheelProp,
-		keyboard: keyboardProp,
-		dragSensitivity: dragSensitivityProp,
-		/** Make the pad unchangeable and remove it from the tab order. */
-		disabled: Boolean,
-		/** Make the value unchangeable. */
-		readonly: Boolean
-	},
+	props: xyPadProps,
 	emits: {
 		"update:modelValue": (value) => Array.isArray(value),
-		dragStart: (value) => Array.isArray(value),
-		dragEnd: (value) => Array.isArray(value)
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => Array.isArray(value),
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => Array.isArray(value)
 	},
 	setup(props, { slots, emit, expose }) {
 		const root = (0, vue.ref)(null);
 		let area = null;
 		let thumb = null;
 		const inactive = (0, vue.computed)(() => props.disabled || props.readonly);
-		const min = (0, vue.computed)(() => (0, _tremolo_ui_dom.toXY)(props.min));
-		const max = (0, vue.computed)(() => (0, _tremolo_ui_dom.toXY)(props.max));
-		const step = (0, vue.computed)(() => (0, _tremolo_ui_dom.toXY)(props.step));
-		const scale = (0, vue.computed)(() => (0, _tremolo_ui_dom.toXY)(props.scale));
-		const reverse = (0, vue.computed)(() => (0, _tremolo_ui_dom.toXY)(props.reverse));
+		const min = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.toXY)(props.min));
+		const max = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.toXY)(props.max));
+		const step = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.toXY)(props.step));
+		const scale = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.toXY)(props.scale));
+		const reverse = (0, vue.computed)(() => (0, _tremolo_ui_dom_internal.toXY)(props.reverse));
 		const percent = (0, vue.computed)(() => [0, 1].map((i) => (0, _tremolo_ui_dom.valuePercent)(props.modelValue[i], {
 			min: min.value[i],
 			max: max.value[i],
@@ -2151,11 +2392,21 @@ const XYPad = /* @__PURE__ */ (0, vue.defineComponent)({
 			keyboard: props.keyboard,
 			wheel: props.wheel
 		}));
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(next);
+			emit("update:modelValue", next);
+		};
 		/** Move one axis by one press of `option`, in screen coordinates. */
 		function nudge({ axis: i, direction }, option, modifiers) {
 			const value = props.modelValue;
-			const next = (0, _tremolo_ui_dom.applyDelta)(value[i], reverse.value[i] ? -direction : direction, option, axis.value[i], modifiers);
+			const next = (0, _tremolo_ui_dom_internal.applyDelta)(value[i], reverse.value[i] ? -direction : direction, option, axis.value[i], modifiers);
 			change(i === 0 ? [next, value[1]] : [value[0], next]);
 		}
 		(0, vue.provide)(XYPadKey, {
@@ -2196,27 +2447,26 @@ const XYPad = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		useDragValue(root, () => ({
 			axis: axis.value,
-			mapping: (0, _tremolo_ui_dom.elementMapping)(() => area, { sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(props.dragSensitivity, state.event).value }),
+			mapping: (0, _tremolo_ui_dom.elementMapping)(() => area, { sensitivity: (state) => (0, _tremolo_ui_dom_internal.selectModifier)(props.dragSensitivity, state.event).value }),
 			updateOnPointerDown: true,
-			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "pointer",
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			shouldStart: () => !inactive.value,
 			onChange: (v) => {
 				if (!inactive.value) change(v);
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive.value) return;
+				gesture.hold("pointer");
 				thumb?.focus();
-				emit("dragStart", v);
 			},
-			onDragEnd: (v) => {
-				if (!inactive.value) emit("dragEnd", v);
-			}
+			onDragEnd: () => gesture.end()
 		}));
 		useWheel(root, (event) => {
 			if (!props.wheel || inactive.value) return;
-			const move = (0, _tremolo_ui_dom.wheelMove)(event);
+			const move = (0, _tremolo_ui_dom_internal.wheelMove)(event);
 			if (!move) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			nudge(move, props.wheel, event);
 		}, { requireFocus: true });
 		expose({
@@ -2232,10 +2482,13 @@ const XYPad = /* @__PURE__ */ (0, vue.defineComponent)({
 			"data-disabled": props.disabled ? "" : void 0,
 			"data-readonly": props.readonly ? "" : void 0,
 			onKeydown: (event) => {
-				const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+				const move = (0, _tremolo_ui_dom_internal.arrowKeyMove)(event.key);
 				if (!move) return;
 				event.preventDefault();
-				if (props.keyboard && !inactive.value) nudge(move, props.keyboard, event);
+				if (props.keyboard && !inactive.value) {
+					gesture.pulse("keyboard");
+					nudge(move, props.keyboard, event);
+				}
 			},
 			onFocus: () => {
 				if (!props.disabled) thumb?.focus();
@@ -2263,22 +2516,23 @@ const XYPadArea = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/XYPad/XYPadThumb.ts
+const xyPadThumbProps = {
+	/** Sets `--color`, for the theme to colour the thumb with. */
+	color: String,
+	/** The accessible name of each axis, as `[x, y]`. */
+	ariaLabel: [String, Array],
+	/** The ids of what labels each axis, as `[x, y]` or one for both. */
+	ariaLabelledby: [String, Array],
+	/** The ids of what describes each axis, as `[x, y]` or one for both. */
+	ariaDescribedby: [String, Array],
+	/** What the value of each axis means, as `[x, y]` or one for both. */
+	ariaValuetext: [String, Array]
+};
 /** The thumb, placed at the value, with one range input per axis inside. */
 const XYPadThumb = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "XYPadThumb",
 	inheritAttrs: false,
-	props: {
-		/** Sets `--color`, for the theme to colour the thumb with. */
-		color: String,
-		/** The accessible name of each axis, as `[x, y]`. */
-		ariaLabel: [String, Array],
-		/** The ids of what labels each axis, as `[x, y]` or one for both. */
-		ariaLabelledby: [String, Array],
-		/** The ids of what describes each axis, as `[x, y]` or one for both. */
-		ariaDescribedby: [String, Array],
-		/** What the value of each axis means, as `[x, y]` or one for both. */
-		ariaValuetext: [String, Array]
-	},
+	props: xyPadThumbProps,
 	setup(props, { slots, attrs, expose }) {
 		const pad = useXYPadContext();
 		checkPlacement("XYPadThumb", "XYPadArea");
@@ -2296,7 +2550,7 @@ const XYPadThumb = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		});
 		function input(axis) {
-			const labels = (0, _tremolo_ui_dom.toXY)(props.ariaLabel);
+			const labels = (0, _tremolo_ui_dom_internal.toXY)(props.ariaLabel);
 			return visuallyHiddenRangeInput({
 				ref: axis === 0 ? x : y,
 				"data-axis": axis === 0 ? "x" : "y",
@@ -2308,9 +2562,9 @@ const XYPadThumb = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-readonly": pad.readonly,
 				"aria-orientation": axis === 0 ? "horizontal" : "vertical",
 				"aria-label": labels[axis] ?? (axis === 0 ? "x" : "y"),
-				"aria-labelledby": (0, _tremolo_ui_dom.toXY)(props.ariaLabelledby)[axis],
-				"aria-describedby": (0, _tremolo_ui_dom.toXY)(props.ariaDescribedby)[axis],
-				"aria-valuetext": (0, _tremolo_ui_dom.toXY)(props.ariaValuetext)[axis],
+				"aria-labelledby": (0, _tremolo_ui_dom_internal.toXY)(props.ariaLabelledby)[axis],
+				"aria-describedby": (0, _tremolo_ui_dom_internal.toXY)(props.ariaDescribedby)[axis],
+				"aria-valuetext": (0, _tremolo_ui_dom_internal.toXY)(props.ariaValuetext)[axis],
 				onInput: (event) => {
 					const target = event.target;
 					if (pad.readonly) {