@xsynaptic/sonic-ui 0.17.0 → 0.19.0

package/dist/default/elements/switch.js

@@ -1,6 +1,7 @@
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { isUnder, optionValue } from "./radio-group.js";
+import { soleStep } from "../lib/positions.js";
+import { isUnder } from "./radio-group.js";
 import { SonicPositionGroupElement } from "./position-group.js";
 
 //#region src/elements/switch.ts
@@ -23,9 +24,9 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 	group = renderSwitch();
 	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
 	#isClickSwallowed = false;
-	claimPress(option, event) {
+	claimPress(index, event) {
 		if (this.#isOnBat(event)) return true;
-		const target = this.pressTarget(option);
+		const target = this.pressTarget(index);
 		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
 		this.group.setPointerCapture(event.pointerId);
 		this.hold(target, event.pointerId);
@@ -34,7 +35,6 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 	connect(signal) {
 		const group = this.group;
 		super.connect(signal);
-		this.checkStyles(group, "switch.css", ["cap"]);
 		this.bare.addEventListener("click", (event) => {
 			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
 			this.#isClickSwallowed = false;
@@ -45,20 +45,14 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 		}, { signal });
 		this.#bindBat(group, signal);
 	}
-	releaseTarget(option) {
-		const target = this.pressTarget(option);
+	releaseTarget(index) {
+		const target = this.pressTarget(index);
 		return this.isMomentary(target) || this.isOptionDisabled(target) ? void 0 : target;
 	}
 	render() {
 		if (!this.isBound()) return;
 		super.render();
-		const options = this.options();
-		if (options.length > 0) {
-			this.#renderThrow(this.checkedIndex(options));
-			return;
-		}
-		const onSide = this.orientation === "horizontal" ? 1 : -1;
-		this.group.style.setProperty("--_sonic-switch-at", String(this.checked ? onSide : -onSide));
+		this.#renderThrow(this.checkedIndex());
 	}
 	renderOption() {
 		return renderPosition();
@@ -66,7 +60,7 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 	#bindBat(group, signal) {
 		bindDrag(group, {
 			grab: (event) => {
-				if (!(event.target === this.bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
+				if (!(this.pressedIndex(event.target) >= 0) || this.isDisabled() || !this.#isOnBat(event)) return;
 				return {
 					hasMoved: false,
 					last: this.along(event),
@@ -87,51 +81,41 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 			}
 		}, signal);
 	}
-	#hasSprungFrom(option) {
-		if (!option || !this.isMomentary(option)) return false;
+	#hasSprungFrom(index) {
+		if (!this.isMomentary(index)) return false;
 		this.releaseHold();
-		return this.value !== optionValue(option);
+		return !this.isChecked(index);
 	}
 	#isOnBat(event) {
 		return isUnder(this.#bat, event.clientX, event.clientY);
 	}
 	#pressBat(event) {
-		const options = this.options();
-		if (options.length === 0) {
-			this.setChecked(!this.checked);
-			return;
-		}
-		const box = this.#bat.getBoundingClientRect();
-		const [start, size] = this.orientation === "horizontal" ? [box.left, box.width] : [box.top, box.height];
-		const offset = (this.along(event) - start) / size - .5;
-		const index = this.checkedIndex(options);
-		const side = Math.abs(offset) < pressCenterZone ? 1 : Math.sign(offset);
-		const toward = this.stepFrom(index, side);
-		const option = toward && toward !== options[index] ? toward : this.stepFrom(index, -side);
-		if (!option) return;
-		this.chooseByClick(option);
-		this.#refocus(options);
-	}
-	#refocus(options) {
-		if (this.group.matches(":focus-within")) options[this.checkedIndex(options)]?.focus();
+		const from = this.checkedIndex();
+		const target = soleStep(this.positions(), from) ?? this.#sideStep(from, event);
+		if (target === void 0) return;
+		this.chooseByClick(target);
+		this.refocusAt(this.checkedIndex());
 	}
 	#renderThrow(index) {
-		const count = this.options().length;
+		const count = this.positions().length;
 		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
 		this.group.style.setProperty("--_sonic-switch-at", String(at));
 	}
+	#sideStep(from, event) {
+		const box = this.#bat.getBoundingClientRect();
+		const [start, size] = this.orientation === "horizontal" ? [box.left, box.width] : [box.top, box.height];
+		const offset = (this.along(event) - start) / size - .5;
+		const side = Math.abs(offset) < pressCenterZone ? 1 : Math.sign(offset);
+		const toward = this.stepFrom(from, side);
+		return toward !== void 0 && toward !== from ? toward : this.stepFrom(from, -side);
+	}
 	#throwBy(direction, pointerId) {
-		const options = this.options();
-		if (options.length === 0) {
-			this.setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
-			return;
-		}
-		const index = this.checkedIndex(options);
-		const option = this.stepFrom(index, direction);
-		if (!option || option === options[index] || this.#hasSprungFrom(options[index])) return;
-		if (this.isMomentary(option)) this.hold(option, pointerId);
-		else this.select(option);
-		this.#refocus(options);
+		const from = this.checkedIndex();
+		const target = this.stepFrom(from, direction);
+		if (target === void 0 || target === from || this.#hasSprungFrom(from)) return;
+		if (this.isMomentary(target)) this.hold(target, pointerId);
+		else this.select(target);
+		this.refocusAt(this.checkedIndex());
 	}
 };
 

package/dist/default/elements/toggle.js

@@ -1,7 +1,8 @@
 import { placeChildren, requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
-import { isUnder, optionValue } from "./radio-group.js";
+import { enabledEnds } from "../lib/positions.js";
+import { isUnder } from "./radio-group.js";
 import { SonicPositionGroupElement } from "./position-group.js";
 import { positionAt, travelFrom } from "../lib/toggle-travel.js";
 
@@ -31,11 +32,6 @@ var SonicToggle = class extends SonicPositionGroupElement {
 	}
 	connect(signal) {
 		super.connect(signal);
-		this.checkStyles(this.group, "toggle.css", [
-			"cap",
-			"well",
-			"keycap"
-		]);
 		this.bare.addEventListener("click", (event) => {
 			if (event instanceof PointerEvent && event.pointerType !== "") return;
 			this.setChecked(!this.checked);
@@ -52,7 +48,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 	}
 	render() {
 		if (!this.isBound()) return;
-		this.group.style.setProperty("--_sonic-toggle-count", String(this.#stopCount()));
+		this.group.style.setProperty("--_sonic-toggle-count", String(this.positions().length));
 		this.#placeCap(this.#draggedTo ?? this.#restingAt());
 		super.render();
 		for (const [index, option] of this.options().entries()) option.style.setProperty("--_sonic-toggle-index", String(index));
@@ -77,7 +73,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 				this.#slideTo(positionAt(drag.travel, pointer), event.pointerId);
 			},
 			release: (drag) => {
-				delete (drag.position ?? this.bare).dataset.sonicPressed;
+				delete drag.marked.dataset.sonicPressed;
 				this.#draggedTo = void 0;
 				this.toggleState("dragging", false);
 				this.render();
@@ -85,25 +81,21 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		}, signal);
 	}
 	#checkLegends() {}
-	#enabledEnds() {
-		if (this.isBare()) return [0, 1];
-		const options = this.options();
-		const isEnabled = (option) => !this.isOptionDisabled(option);
-		return [options.findIndex(isEnabled), options.findLastIndex(isEnabled)];
-	}
 	#fixedLegend() {
 		return [...this.children].find((child) => child !== this.group && !super.isMirrored(child));
 	}
 	#grab(event) {
-		const position = this.optionOf(event.target);
-		if (this.isDisabled() || !position && event.target !== this.bare) return void 0;
+		const position = this.pressedIndex(event.target);
+		if (this.isDisabled() || position < 0) return void 0;
 		const isOnCap = isUnder(this.#cap, event.clientX, event.clientY);
 		const travel = this.#travel(event, isOnCap);
-		if (!travel || this.#isBlocked(position, isOnCap)) return void 0;
-		(position ?? this.bare).toggleAttribute("data-sonic-pressed", true);
+		if (!travel || !isOnCap && this.isOptionDisabled(position)) return void 0;
+		const marked = this.options()[position] ?? this.bare;
+		marked.toggleAttribute("data-sonic-pressed", true);
 		return {
 			hasMoved: false,
 			isHolding: this.#holdFrom(position, event.pointerId),
+			marked,
 			position,
 			start: this.along(event),
 			thresholdPx: dragThresholdPx(event.pointerType),
@@ -111,57 +103,36 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		};
 	}
 	#holdFrom(position, pointerId) {
-		const target = position && this.pressTarget(position);
-		if (!target || !this.isMomentary(target) || this.isOptionDisabled(target)) return false;
+		const target = this.pressTarget(position);
+		if (!this.isMomentary(target) || this.isOptionDisabled(target)) return false;
 		this.hold(target, pointerId);
 		return true;
 	}
-	#isBlocked(position, isOnCap) {
-		return !isOnCap && position !== void 0 && this.isOptionDisabled(position);
-	}
-	#onAt() {
-		return this.orientation === "vertical" ? 0 : 1;
-	}
 	#placeCap(at) {
 		this.group.style.setProperty("--_sonic-toggle-at", String(at));
 	}
 	#press(position) {
-		if (!position) {
-			this.setChecked(!this.checked);
-			return;
-		}
 		const target = this.pressTarget(position);
 		if (this.isOptionDisabled(target)) return;
 		this.select(target);
-		this.#refocus(target);
-	}
-	#refocus(position) {
-		if (this.group.matches(":focus-within")) position.focus();
+		this.refocusAt(target);
 	}
 	#restingAt() {
-		if (this.isBare()) return this.checked ? this.#onAt() : 1 - this.#onAt();
-		return Math.max(0, this.checkedIndex(this.options()));
+		return Math.max(0, this.checkedIndex());
 	}
 	#slideTo(at, pointerId) {
-		const crossed = this.options()[Math.round(at)];
+		const crossed = Math.round(at);
 		this.#draggedTo = at;
 		this.#placeCap(at);
-		if (this.isBare()) {
-			this.setChecked(Math.round(at) === this.#onAt());
-			return;
-		}
-		if (!crossed || optionValue(crossed) === this.value) return;
+		if (this.isChecked(crossed)) return;
 		this.releaseHold();
-		if (this.isOptionDisabled(crossed) || optionValue(crossed) === this.value) return;
+		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return;
 		if (this.isMomentary(crossed)) this.hold(crossed, pointerId);
 		else this.select(crossed);
-		this.#refocus(crossed);
-	}
-	#stopCount() {
-		return this.options().length || 2;
+		this.refocusAt(crossed);
 	}
 	#travel(event, isOnCap) {
-		const [first, last] = this.#enabledEnds();
+		const [first, last] = enabledEnds(this.positions());
 		if (first < 0) return void 0;
 		const box = this.#well.getBoundingClientRect();
 		const [start, length, thickness] = this.orientation === "vertical" ? [
@@ -175,7 +146,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		];
 		return travelFrom({
 			at: this.#restingAt(),
-			count: this.#stopCount(),
+			count: this.positions().length,
 			first,
 			isOnCap,
 			last,

package/dist/default/elements/value-element.js

@@ -1,13 +1,12 @@
-import { clamp, toNumber, trimFloat } from "../lib/math.js";
+import { toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { Readout } from "./readout.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { parseNumberList } from "../lib/number-list.js";
-import { valueMapping } from "../lib/value-mapping.js";
 import { ValueGestures } from "./value-gestures.js";
-import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
 import { bindHoverPreview } from "../lib/hover-preview.js";
+import { createValueModel } from "../lib/value-model.js";
 
 //#region src/elements/value-element.ts
 const fallbackTravelPx = 160;
@@ -56,20 +55,7 @@ var SonicValueElement = class extends SonicFormElement {
 			input: (next, isMover = false) => (isMover || !element.#isHeld()) && element.input(next),
 			isDisabled: () => element.isDisabled(),
 			isHeld: () => element.#isHeld(),
-			land: (resolve) => {
-				element.#land = resolve;
-			},
-			limit: (bounds) => {
-				element.#limit = bounds;
-			},
-			mapping: () => element.mapping(),
-			value: () => element.#cell.value,
-			watch: (listener) => {
-				element.#watchers.add(listener);
-				return () => {
-					element.#watchers.delete(listener);
-				};
-			}
+			model: element.#model
 		});
 	}
 	get cancelling() {
@@ -177,6 +163,7 @@ var SonicValueElement = class extends SonicFormElement {
 	get pointerType() {
 		return this.#gestures?.pointerType();
 	}
+	/** The values a stepped control stops at, spaced evenly along the travel whatever their spacing */
 	get positions() {
 		return parseNumberList(this.getAttribute("positions"));
 	}
@@ -192,6 +179,7 @@ var SonicValueElement = class extends SonicFormElement {
 	get revealed() {
 		return this.hasState("revealed");
 	}
+	/** Rounds the value assistive technology hears, in value units; the value itself is untouched */
 	get spokenStep() {
 		return this.optionalNumberAttribute("spoken-step");
 	}
@@ -211,7 +199,7 @@ var SonicValueElement = class extends SonicFormElement {
 		this.reflect("taper", curve);
 	}
 	get value() {
-		return this.#cell.value;
+		return this.#model.value;
 	}
 	set value(next) {
 		if (next === void 0 || next === null) {
@@ -220,17 +208,17 @@ var SonicValueElement = class extends SonicFormElement {
 		}
 		const value = toNumber(next);
 		if (this.#isHeld()) {
-			this.heldWrite(value);
+			this.#writeHeld(value);
 			return;
 		}
-		if (setAsked(this.#cell, this.mapping(), value)) this.render();
+		if (this.#model.write(value)) this.render();
 	}
 	get valueText() {
-		return this.#textFor(this.#cell.value);
+		return this.#textFor(this.#model.value);
 	}
-	#cell = {
-		asked: void 0,
-		value: 0
+	notation = {
+		format: String,
+		parse: Number.parseFloat
 	};
 	#formatEntry;
 	#formatSpokenValue;
@@ -239,25 +227,16 @@ var SonicValueElement = class extends SonicFormElement {
 	#heldAt;
 	#hover;
 	#instance = String(instanceCount += 1);
-	#land;
-	#limit;
-	#mapping;
+	#model = createValueModel(() => this.#spec());
 	#parseValue;
-	#positions;
 	#readout;
-	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
-		this.#mapping = void 0;
-		this.#positions = parseNumberList(this.getAttribute("positions"));
-		if (name === "value") {
-			if (this.#isHeld()) {
-				this.heldWrite(this.numberAttribute("value", this.min));
-				return;
-			}
-			this.#cell.asked = void 0;
+		if (name === "value" && this.#isHeld()) {
+			this.#writeHeld(this.numberAttribute("value", this.min));
+			return;
 		}
 		if (name === "disabled" && this.isDisabled()) this.#gestures?.end();
-		resnap(this.#cell, this.mapping(), this.numberAttribute("value", this.min));
+		this.#model.respec(this.numberAttribute("value", this.min), { forgetAsk: name === "value" });
 		if (proportionAttributes.has(name) && this.isBound()) this.proportionsChanged();
 		this.render();
 	}
@@ -287,26 +266,23 @@ var SonicValueElement = class extends SonicFormElement {
 				this.forwardNaming(target, isNamed);
 			},
 			hasEntry: () => this.entry !== "none",
-			holdChanged: () => {
-				this.#renderHold();
-			},
 			input: (next) => this.input(next),
 			isDisabled: () => this.isDisabled(),
 			keyStep: () => this.keyStep,
-			land: (target, direction) => this.#land?.(target, direction) ?? target,
-			limit: () => this.#limit,
-			mapping: () => this.mapping(),
-			parse: (text) => (this.#parseValue ?? Number.parseFloat)(text),
+			model: this.#model,
+			parse: (text) => (this.#parseValue ?? this.notation.parse)(text),
 			render: () => {
 				this.render();
 			},
+			scrubChanged: () => {
+				this.#renderHold();
+			},
 			scrubsKeyRepeat: () => this.scrubsKeyRepeat(),
 			springTarget: () => this.springTarget(),
 			tapTarget: () => this.tapTarget(),
 			toggleState: (state, isOn) => {
 				this.toggleState(state, isOn);
-			},
-			value: () => this.#cell.value
+			}
 		}, control);
 		this.#gestures.bind(signal, grab);
 		control.addEventListener("pointerup", (event) => {
@@ -322,7 +298,7 @@ var SonicValueElement = class extends SonicFormElement {
 			dismiss: () => {
 				this.render();
 			},
-			isTaken: () => this.#isEditing() || this.isRevealed(),
+			isTaken: () => this.#isEditing() || this.#isRevealed(),
 			show: () => {
 				if (!this.readout) return;
 				this.renderReadout();
@@ -335,60 +311,32 @@ var SonicValueElement = class extends SonicFormElement {
 	controlRole() {
 		return "slider";
 	}
-	heldFrom() {
-		return this.#gestures?.heldFrom();
-	}
-	heldWrite(next) {
-		this.#heldAt = next;
-	}
-	holdChanged() {}
 	input(next) {
-		const previous = this.#cell.value;
-		const target = this.#limit ? clamp(next, ...this.#limit) : next;
-		if (moveTo(this.#cell, this.mapping(), target)) this.render();
-		if (this.#cell.value === previous) return false;
+		const previous = this.#model.value;
+		if (this.#model.input(next)) this.render();
+		if (this.#model.value === previous) return false;
 		this.dispatchEvent(new Event("input", {
 			bubbles: true,
 			composed: true
 		}));
 		return true;
 	}
-	isRevealed() {
-		return this.#gestures?.isRevealed() === true;
-	}
 	isWrapping() {
 		return false;
 	}
 	mapping() {
-		if (this.#mapping) return this.#mapping;
-		const { detent, midpoint } = this;
-		this.#mapping = valueMapping({
-			...detent === void 0 ? {} : { detent },
-			...this.#positions ? { positions: this.#positions } : {},
-			max: this.max,
-			...midpoint === void 0 ? {} : { midpoint },
-			isNotched: this.notched,
-			isWrapping: this.isWrapping(),
-			min: this.min,
-			step: this.step,
-			taper: this.taper
-		});
-		return this.#mapping;
+		return this.#model.mapping();
 	}
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
-	playback() {
-		const from = this.heldFrom();
-		return from === void 0 ? this.#cell.value : this.#heldAt ?? from;
-	}
 	proportionsChanged() {}
 	readoutValue() {
-		return this.#shown().value ?? this.#cell.value;
+		return this.#shown().value ?? this.#model.value;
 	}
 	render() {
 		if (this.isBound()) this.#renderControl();
-		for (const listener of this.#watchers) listener();
+		this.#model.notify();
 	}
 	renderReadout() {
 		const readout = this.#readout;
@@ -404,18 +352,27 @@ var SonicValueElement = class extends SonicFormElement {
 	restoreState(state) {
 		this.value = Number(state);
 	}
+	scrubChanged() {}
 	scrubsKeyRepeat() {
 		return false;
 	}
+	scrubState() {
+		const from = this.#gestures?.scrubFrom();
+		return {
+			from,
+			isRevealed: this.#isRevealed(),
+			played: from === void 0 ? this.#model.value : this.#heldAt ?? from
+		};
+	}
 	springTarget() {}
 	tapTarget() {}
 	travelPx(control, property) {
 		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
 	}
 	#entryText() {
-		const value = this.#cell.value;
+		const value = this.#model.value;
 		if (this.#formatEntry) return this.#formatEntry(value);
-		if (!this.#parseValue) return String(value);
+		if (!this.#parseValue) return this.notation.format(value);
 		return this.valueText;
 	}
 	#isEditing() {
@@ -424,8 +381,11 @@ var SonicValueElement = class extends SonicFormElement {
 	#isHeld() {
 		return this.#gestures?.isHeld() === true;
 	}
+	#isRevealed() {
+		return this.#gestures?.isRevealed() === true;
+	}
 	#renderAria(control, orientation) {
-		this.writeFormValue(String(this.#cell.value), String(this.#cell.value));
+		this.writeFormValue(String(this.#model.value), String(this.#model.value));
 		if (this.#isEditing()) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
@@ -438,15 +398,15 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "aria-valuemax", String(high));
 		writeAttribute(control, "aria-valuenow", String(this.#spokenNow()));
 		if (orientation) writeAttribute(control, "aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#spokenNow()));
+		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak)?.(this.#spokenNow()));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
 		this.renderReadout();
 	}
 	#renderControl() {
-		if (this.#isEditing() || this.isRevealed()) this.#hover?.clear();
+		if (this.#isEditing() || this.#isRevealed()) this.#hover?.clear();
 		this.draw();
-		this.toggleState("at-origin", !this.isWrapping() && this.#cell.value === this.mapping().snap(this.originValue()));
+		this.toggleState("at-origin", !this.isWrapping() && this.#model.value === this.mapping().snap(this.originValue()));
 		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
@@ -456,29 +416,47 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "tabindex", isDisabled ? void 0 : stop);
 	}
 	#renderHold() {
-		if (this.heldFrom() === void 0) this.#heldAt = void 0;
+		if (this.#gestures?.scrubFrom() === void 0) this.#heldAt = void 0;
 		this.#hover?.restore();
 		this.renderReadout();
-		this.holdChanged();
+		this.scrubChanged();
 	}
 	#shown() {
 		if (this.#isEditing()) return {
 			isOpen: true,
 			value: void 0
 		};
-		const isRevealed = this.isRevealed();
+		const isRevealed = this.#isRevealed();
 		const preview = isRevealed ? void 0 : this.#hover?.value();
 		return {
 			isOpen: (isRevealed || preview !== void 0) && this.readout,
-			value: preview ?? this.#cell.value
+			value: preview ?? this.#model.value
+		};
+	}
+	#spec() {
+		const { detent, midpoint, positions } = this;
+		return {
+			...detent === void 0 ? {} : { detent },
+			...positions ? { positions } : {},
+			max: this.max,
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: this.notched,
+			isWrapping: this.isWrapping(),
+			min: this.min,
+			step: this.step,
+			taper: this.taper
 		};
 	}
 	#spokenNow() {
 		const step = this.spokenStep;
-		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#cell.value / step) * step) : this.#cell.value;
+		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#model.value / step) * step) : this.#model.value;
 	}
 	#textFor(value) {
-		return this.#formatValue?.(value) ?? String(value);
+		return (this.#formatValue ?? this.notation.format)(value);
+	}
+	#writeHeld(next) {
+		this.#heldAt = next;
+		this.scrubChanged();
 	}
 };