@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/default/elements/envelope.js

@@ -0,0 +1,367 @@
+import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicElement } from "./sonic-element.js";
+import { ReadoutClaim } from "./readout-claim.js";
+import { Readout } from "./readout.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { SonicValueElement, linkValue } from "./value-element.js";
+import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
+import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+
+//#region src/elements/envelope.ts
+const curveStages = [
+	"attack",
+	"decay",
+	"release"
+];
+const bindable = [
+	...adsrStages,
+	"attack-curve",
+	"decay-curve",
+	"release-curve"
+];
+const bindableNames = new Set(bindable);
+function flip(point, isFlipped) {
+	return isFlipped ? {
+		...point,
+		y: -point.y
+	} : point;
+}
+function isParent(node) {
+	return "querySelector" in node;
+}
+const renderEnvelope = template(`
+		<div class="sonic-envelope" aria-hidden="true">
+			<svg class="sonic-envelope-graph" preserveAspectRatio="none" viewBox="0 0 1 1">
+				<path class="sonic-envelope-fill" />
+				<path class="sonic-envelope-line" />
+			</svg>
+			<div class="sonic-envelope-handle" data-sonic-stage="delay" hidden></div>
+			<div class="sonic-envelope-handle" data-sonic-stage="attack" hidden></div>
+			<div class="sonic-envelope-handle" data-sonic-stage="hold" hidden></div>
+			<div class="sonic-envelope-handle" data-sonic-stage="decay" hidden></div>
+			<div class="sonic-envelope-handle" data-sonic-stage="release" hidden></div>
+			<div class="sonic-envelope-curve" data-sonic-stage="attack" hidden></div>
+			<div class="sonic-envelope-curve" data-sonic-stage="decay" hidden></div>
+			<div class="sonic-envelope-curve" data-sonic-stage="release" hidden></div>
+			<div class="sonic-envelope-readout" popover="manual"><span></span></div>
+		</div>
+	`, HTMLDivElement);
+var SonicEnvelope = class extends SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		...bindable,
+		"readout"
+	];
+	get attack() {
+		return this.getAttribute("attack") ?? "";
+	}
+	set attack(id) {
+		this.reflect("attack", id);
+	}
+	get attackCurve() {
+		return this.getAttribute("attack-curve") ?? "";
+	}
+	set attackCurve(id) {
+		this.reflect("attack-curve", id);
+	}
+	get decay() {
+		return this.getAttribute("decay") ?? "";
+	}
+	set decay(id) {
+		this.reflect("decay", id);
+	}
+	get decayCurve() {
+		return this.getAttribute("decay-curve") ?? "";
+	}
+	set decayCurve(id) {
+		this.reflect("decay-curve", id);
+	}
+	get delay() {
+		return this.getAttribute("delay") ?? "";
+	}
+	set delay(id) {
+		this.reflect("delay", id);
+	}
+	get hold() {
+		return this.getAttribute("hold") ?? "";
+	}
+	set hold(id) {
+		this.reflect("hold", id);
+	}
+	get readout() {
+		return this.hasAttribute("readout");
+	}
+	set readout(isOn) {
+		this.reflect("readout", isOn);
+	}
+	get release() {
+		return this.getAttribute("release") ?? "";
+	}
+	set release(id) {
+		this.reflect("release", id);
+	}
+	get releaseCurve() {
+		return this.getAttribute("release-curve") ?? "";
+	}
+	set releaseCurve(id) {
+		this.reflect("release-curve", id);
+	}
+	get sustain() {
+		return this.getAttribute("sustain") ?? "";
+	}
+	set sustain(id) {
+		this.reflect("sustain", id);
+	}
+	#bindings = /* @__PURE__ */ new Map();
+	#claim = new ReadoutClaim(() => {
+		this.#renderReadout();
+	});
+	#envelope = renderEnvelope();
+	#fill = requireChild(this.#envelope, ".sonic-envelope-fill", SVGElement);
+	#graph = requireChild(this.#envelope, ".sonic-envelope-graph", SVGElement);
+	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
+	#pointerDrag;
+	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
+	#shape = adsrShape({});
+	#signal;
+	#waiting = /* @__PURE__ */ new Set();
+	#warned = /* @__PURE__ */ new Set();
+	attributeChangedCallback(name) {
+		if (!this.#signal) return;
+		if (name === "disabled") {
+			this.#pointerDrag?.end();
+			this.#draw();
+			return;
+		}
+		if (bindableNames.has(name)) this.#bind();
+		else this.#renderReadout();
+	}
+	connectedCallback() {
+		this.upgradeProperties(...adsrStages, "attackCurve", "decayCurve", "readout", "releaseCurve");
+		super.connectedCallback();
+	}
+	connect(signal) {
+		const envelope = this.#envelope;
+		this.#signal = signal;
+		this.appendOnce(envelope);
+		this.#bind();
+		this.checkStyles(envelope, "envelope.css");
+		this.#bindPointer(envelope, signal);
+		signal.addEventListener("abort", () => {
+			this.#signal = void 0;
+			this.#unbind();
+		}, { once: true });
+	}
+	#bind() {
+		this.#pointerDrag?.end();
+		this.#unbind();
+		for (const name of bindable) {
+			const element = this.#resolve(name);
+			if (!element) continue;
+			const link = linkValue(element);
+			const unwatch = link.watch(() => {
+				this.#draw();
+			});
+			this.#bindings.set(name, {
+				element,
+				link,
+				unwatch
+			});
+		}
+		this.#draw();
+	}
+	#bindPointer(envelope, signal) {
+		this.#pointerDrag = bindDrag(envelope, {
+			cancel: (drag) => {
+				for (const { binding, from } of drag.drives) binding.link.input(from);
+			},
+			grab: (event) => this.#grab(event),
+			move: (drag, event) => {
+				this.#moveDrag(drag, event);
+			},
+			release: (drag) => {
+				this.#claim.press(false);
+				for (const { binding, from } of drag.drives) {
+					if (binding.link.value() === from) continue;
+					binding.element.dispatchEvent(new Event("change", { bubbles: true }));
+				}
+			},
+			toggle: (isDragging) => {
+				this.toggleState("dragging", isDragging);
+			}
+		}, signal);
+	}
+	#curveDrives(stage) {
+		const binding = this.#bindings.get(`${stage}-curve`);
+		return binding ? [{
+			axis: "y",
+			binding
+		}] : [];
+	}
+	#draw() {
+		const shape = this.#readShape();
+		const path = this.#bindings.size === 0 ? {
+			fill: "",
+			stroke: ""
+		} : adsrPath(shape);
+		this.#shape = shape;
+		this.#line.setAttribute("d", path.stroke);
+		this.#fill.setAttribute("d", path.fill);
+		for (const stage of timeStages) this.#drawPoint(`.sonic-envelope-handle[data-sonic-stage="${stage}"]`, {
+			at: shape.handles.find((point) => point.stage === stage),
+			drives: this.#drives(stage)
+		});
+		for (const stage of curveStages) this.#drawPoint(`.sonic-envelope-curve[data-sonic-stage="${stage}"]`, {
+			at: shape.curveHandles.find((point) => point.stage === stage),
+			drives: this.#curveDrives(stage)
+		});
+		this.#renderReadout();
+	}
+	#drawPoint(selector, point) {
+		const part = requireChild(this.#envelope, selector, HTMLDivElement);
+		const { at, drives } = point;
+		part.hidden = !at;
+		if (!at) return;
+		const isStill = this.isDisabled() || drives.every(({ binding }) => binding.link.isDisabled());
+		part.style.setProperty("--_sonic-envelope-x", String(at.x));
+		part.style.setProperty("--_sonic-envelope-y", String(at.y));
+		part.dataset.sonicAxes = drives.map(({ axis }) => axis).join("");
+		writeAttribute(part, "data-sonic-disabled", isStill ? "" : void 0);
+	}
+	#drives(stage) {
+		const x = this.#bindings.get(stage);
+		const y = stage === "decay" ? this.#bindings.get("sustain") : void 0;
+		return [...x ? [{
+			axis: "x",
+			binding: x
+		}] : [], ...y ? [{
+			axis: "y",
+			binding: y
+		}] : []];
+	}
+	#grab(event) {
+		const pressed = this.#pressed(event);
+		if (!pressed || pressed.drives.length === 0) return void 0;
+		const { drives, isFlipped, part } = pressed;
+		this.#claim.press(true);
+		const box = this.#graph.getBoundingClientRect();
+		const travel = {
+			x: Math.max(1, box.width * this.#shape.share),
+			y: Math.max(1, box.height)
+		};
+		const start = (axis) => {
+			const link = drives.find((drive) => drive.axis === axis)?.binding.link;
+			if (!link) return;
+			const mapping = link.mapping();
+			const from = link.value();
+			return {
+				from,
+				mapping,
+				proportion: mapping.proportionOf(from),
+				travelPx: travel[axis]
+			};
+		};
+		return {
+			drives: drives.map((drive) => ({
+				...drive,
+				from: drive.binding.link.value()
+			})),
+			isFlipped,
+			part,
+			state: startFieldDrag({
+				position: flip(pointerPosition(event), isFlipped),
+				thresholdPx: dragThresholdPx(event.pointerType),
+				x: start("x"),
+				y: start("y")
+			})
+		};
+	}
+	#moveDrag(drag, event) {
+		const mappings = {};
+		for (const { axis, binding } of drag.drives) mappings[axis] = binding.link.mapping();
+		const step = stepFieldDrag(mappings, drag.state, flip(pointerMove(event), drag.isFlipped));
+		drag.state = step.state;
+		if (step.state.isEngaged) this.#claim.reveal("drag");
+		for (const { axis, binding } of drag.drives) {
+			const next = step[axis];
+			if (next !== void 0) binding.link.input(next);
+		}
+		this.#renderReadout();
+	}
+	#pressed(event) {
+		const part = event.target instanceof Element ? event.target.closest(".sonic-envelope-handle, .sonic-envelope-curve") : void 0;
+		const stage = part?.dataset.sonicStage;
+		if (!part || stage === void 0 || this.isDisabled()) return void 0;
+		const isCurveHandle = part.classList.contains("sonic-envelope-curve");
+		return {
+			drives: (isCurveHandle ? this.#curveDrives(stage) : this.#drives(stage)).filter(({ binding }) => !binding.link.isDisabled()),
+			isFlipped: isCurveHandle && stage === "attack",
+			part
+		};
+	}
+	#readShape() {
+		const proportions = {};
+		const curves = {};
+		for (const stage of adsrStages) {
+			const link = this.#bindings.get(stage)?.link;
+			proportions[stage] = link?.mapping().proportionOf(link.value());
+		}
+		for (const stage of curveStages) curves[stage] = this.#bindings.get(`${stage}-curve`)?.link.value();
+		return adsrShape(proportions, curves);
+	}
+	#rebindOnce(key, arrives) {
+		if (this.#waiting.has(key)) return;
+		this.#waiting.add(key);
+		arrives(() => {
+			this.#waiting.delete(key);
+			if (this.#signal) this.#bind();
+		});
+	}
+	#renderReadout() {
+		const drag = this.#pointerDrag?.current();
+		if (!drag) {
+			this.#readout.close();
+			return;
+		}
+		this.#readout.show({
+			anchor: drag.part,
+			isOpen: this.#claim.isRevealed && this.readout,
+			text: drag.drives.map(({ binding }) => binding.element.valueText).join(", ")
+		});
+	}
+	#resolve(name) {
+		const id = this.getAttribute(name);
+		const root = this.getRootNode();
+		if (!id || !isParent(root)) return void 0;
+		const found = root.querySelector(`#${CSS.escape(id)}`);
+		if (found instanceof SonicValueElement) return found;
+		this.#wait(id, found);
+	}
+	#unbind() {
+		for (const { unwatch } of this.#bindings.values()) unwatch();
+		this.#bindings.clear();
+	}
+	#wait(id, found) {
+		const tag = found?.localName;
+		const { ownerDocument } = this;
+		if (tag?.includes("-") && !customElements.get(tag)) {
+			this.#rebindOnce(tag, (rebind) => {
+				customElements.whenDefined(tag).then(rebind);
+			});
+			return;
+		}
+		if (!found && ownerDocument.readyState === "loading") {
+			this.#rebindOnce(ownerDocument, (rebind) => {
+				ownerDocument.addEventListener("DOMContentLoaded", rebind, { once: true });
+			});
+			return;
+		}
+		this.#warn(id);
+	}
+	#warn(id) {}
+};
+
+//#endregion
+export { SonicEnvelope };

package/dist/default/elements/meter.js

@@ -1,40 +1,66 @@
 import { template } from "../lib/render.js";
 import { SonicElement } from "./sonic-element.js";
+import { parseNumberList } from "../lib/number-list.js";
+import { linearTaper } from "../lib/taper.js";
+import { ballisticsRates, fall, rise, stepNeedle } from "../lib/ballistics.js";
 
 //#region src/elements/meter.ts
 const renderMeter = template(`
 		<div aria-hidden="true" class="sonic-meter">
 			<div class="sonic-meter-segments"></div>
-			<div class="sonic-meter-level"></div>
+			<div class="sonic-meter-bar"></div>
 			<div class="sonic-meter-clip"></div>
 		</div>
 	`, HTMLDivElement);
-const releaseDecibelsPerSecond = 20;
 const holdMs = 1500;
+const ballisticsModes = [
+	"peak",
+	"ppm-1",
+	"ppm-2",
+	"vu"
+];
+const settledDecibels = .01;
+const settledAmplitude = 1e-4;
+const settledPerSecond = .01;
 function toDecibels(amplitude) {
 	return 20 * Math.log10(Math.abs(amplitude));
 }
+function toAmplitude(decibels) {
+	return 10 ** (decibels / 20);
+}
+function segmentsBelow(segments, zone) {
+	return `calc(${segments.map((threshold) => `sign(max(0, var(--_sonic-meter-${zone}-from) - (${String(threshold)})))`).join(" + ")})`;
+}
 var SonicMeter = class extends SonicElement {
 	static observedAttributes = [
+		"ballistics",
 		"disabled",
 		"max",
-		"min"
+		"min",
+		"origin",
+		"segments",
+		"value"
 	];
+	get ballistics() {
+		const name = this.getAttribute("ballistics");
+		return ballisticsModes.find((mode) => mode === name) ?? "peak";
+	}
+	set ballistics(mode) {
+		this.reflect("ballistics", mode);
+	}
 	get level() {
 		return this.#level;
 	}
 	set level(amplitude) {
 		if (!Number.isFinite(amplitude)) return;
 		const decibels = toDecibels(amplitude);
-		const now = performance.now();
 		this.#level = amplitude;
 		this.#target = decibels;
-		this.#bar = Math.max(this.#bar, decibels);
-		if (decibels >= this.#peak) {
-			this.#peak = decibels;
-			this.#peakAt = now;
-		}
+		if (this.#isValueShown) return;
+		const now = performance.now();
+		this.#peak = Math.max(this.#peak, decibels);
 		if (decibels >= 0) this.#clipAt = now;
+		this.#step(now, 0);
 		this.#render(now);
 		this.#schedule(now);
 	}
@@ -56,24 +82,57 @@ var SonicMeter = class extends SonicElement {
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get origin() {
+		return this.optionalNumberAttribute("origin");
+	}
+	set origin(value) {
+		this.reflect("origin", value);
+	}
+	get peak() {
+		return this.#peak;
+	}
+	get segments() {
+		return parseNumberList(this.getAttribute("segments"));
+	}
+	set segments(thresholds) {
+		this.reflect("segments", thresholds?.join(" "));
+	}
+	get value() {
+		return this.optionalNumberAttribute("value");
+	}
+	set value(value) {
+		this.reflect("value", value);
+	}
 	#bar = -Infinity;
+	#carryMs = 0;
 	#clipAt = -Infinity;
 	#frame;
+	#isValueShown = false;
 	#lastFrame;
 	#level = 0;
 	#meter = renderMeter();
 	#peak = -Infinity;
-	#peakAt = -Infinity;
+	#peakHold = -Infinity;
+	#peakHoldAt = -Infinity;
+	#segments;
 	#target = -Infinity;
-	attributeChangedCallback() {
+	#velocity = 0;
+	attributeChangedCallback(name) {
 		const now = performance.now();
+		if (name === "ballistics") this.#velocity = 0;
+		else if (name === "value") this.#readValue(now);
+		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
 	}
+	resetPeak() {
+		this.#peak = -Infinity;
+	}
 	connect(signal) {
 		const now = performance.now();
-		this.upgradeProperties("max", "min", "orientation", "level");
+		this.upgradeProperties("ballistics", "max", "min", "orientation", "origin", "segments", "value", "level");
 		this.appendOnce(this.#meter);
+		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
 		this.checkStyles(this.#meter, "meter.css");
@@ -83,40 +142,123 @@ var SonicMeter = class extends SonicElement {
 			this.#lastFrame = void 0;
 		}, { once: true });
 	}
-	#fraction(decibels) {
-		const min = this.min;
-		const range = this.max - min;
-		return range > 0 ? Math.min(1, Math.max(0, (decibels - min) / range)) : 0;
-	}
 	#isSettled(now) {
+		if (this.#isValueShown) return true;
+		if (now - this.#clipAt < holdMs) return false;
+		if (this.ballistics === "vu") return this.#bar === this.#target && this.#velocity === 0;
 		const floor = this.min;
-		return this.#bar <= Math.max(this.#target, floor) && this.#peak <= Math.max(this.#bar, floor) && now - this.#clipAt >= holdMs;
+		return this.#bar >= this.#target && this.#bar <= Math.max(this.#target, floor) && this.#peakHold <= Math.max(this.#bar, floor);
+	}
+	#proportionOf(level) {
+		const segments = this.#segments;
+		if (segments) return segments.filter((threshold) => threshold <= level).length / segments.length;
+		return linearTaper(this.min, this.max).proportionOf(level);
+	}
+	#readValue(now) {
+		const value = this.value;
+		const isValueShown = value !== void 0;
+		if (isValueShown !== this.#isValueShown) {
+			this.#isValueShown = isValueShown;
+			this.resetPeak();
+			if (!isValueShown) this.#step(now, 0);
+		}
+		if (value !== void 0) this.#peak = Math.max(this.#peak, value);
 	}
 	#render(now) {
 		const meter = this.#meter;
+		const origin = this.origin === void 0 ? 0 : this.#proportionOf(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
 		meter.style.setProperty("--_sonic-meter-max", String(this.max));
+		meter.style.setProperty("--_sonic-meter-origin", String(origin));
 		if (this.disabled) {
-			meter.style.setProperty("--_sonic-meter-level", "0");
-			meter.style.setProperty("--_sonic-meter-peak", "0");
-			meter.style.setProperty("--_sonic-meter-clipped", "0");
+			this.#renderStill(origin);
+			return;
+		}
+		const value = this.value;
+		if (value !== void 0) {
+			this.#renderStill(this.#proportionOf(value));
 			return;
 		}
-		meter.style.setProperty("--_sonic-meter-level", String(this.#fraction(this.#bar)));
-		meter.style.setProperty("--_sonic-meter-peak", String(this.#fraction(this.#peak)));
+		const peakHold = this.ballistics === "vu" ? 0 : this.#proportionOf(this.#peakHold);
+		meter.style.setProperty("--_sonic-meter-bar", String(this.#proportionOf(this.#bar)));
+		meter.style.setProperty("--_sonic-meter-peak-hold", String(peakHold));
 		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
 	}
+	#renderSegments() {
+		const meter = this.#meter;
+		const segments = this.segments;
+		this.#segments = segments;
+		this.toggleState("ladder", segments !== void 0);
+		if (!segments) {
+			for (const name of [
+				"count",
+				"hot-segments",
+				"clip-segments"
+			]) meter.style.removeProperty(`--_sonic-meter-${name}`);
+			return;
+		}
+		meter.style.setProperty("--_sonic-meter-count", String(segments.length));
+		meter.style.setProperty("--_sonic-meter-hot-segments", segmentsBelow(segments, "hot"));
+		meter.style.setProperty("--_sonic-meter-clip-segments", segmentsBelow(segments, "clip"));
+	}
+	#renderStill(bar) {
+		const { style } = this.#meter;
+		style.setProperty("--_sonic-meter-bar", String(bar));
+		style.setProperty("--_sonic-meter-peak-hold", "0");
+		style.setProperty("--_sonic-meter-clipped", "0");
+	}
+	#risen(timeConstantMs, elapsedMs) {
+		const target = toAmplitude(this.#target);
+		const risen = toDecibels(rise(toAmplitude(this.#bar), {
+			target,
+			timeConstantMs
+		}, elapsedMs));
+		return this.#target - risen < settledDecibels ? this.#target : risen;
+	}
 	#schedule(now) {
 		if (this.#frame !== void 0 || !this.isConnected || this.#isSettled(now)) return;
 		if (this.#lastFrame === void 0) this.#lastFrame = now;
 		this.#frame = requestAnimationFrame(this.#tick);
 	}
+	#step(now, elapsedMs) {
+		const mode = this.ballistics;
+		if (mode === "vu") {
+			this.#stepNeedle(elapsedMs);
+			return;
+		}
+		const { fallDecibelsPerSecond, riseMs } = ballisticsRates[mode];
+		const floor = Math.max(this.#target, this.min);
+		this.#bar = this.#target > this.#bar ? this.#risen(riseMs, elapsedMs) : fall(this.#bar, {
+			fallDecibelsPerSecond,
+			floor
+		}, elapsedMs);
+		if (this.#bar >= this.#peakHold) {
+			this.#peakHold = this.#bar;
+			this.#peakHoldAt = now;
+		}
+		const pastHoldMs = now - this.#peakHoldAt - holdMs;
+		if (pastHoldMs >= 0) this.#peakHold = fall(this.#peakHold, {
+			fallDecibelsPerSecond,
+			floor: this.#bar
+		}, Math.min(elapsedMs, pastHoldMs));
+	}
+	#stepNeedle(elapsedMs) {
+		const target = toAmplitude(this.#target);
+		const needle = stepNeedle({
+			carryMs: this.#carryMs,
+			position: toAmplitude(this.#bar),
+			velocity: this.#velocity
+		}, target, elapsedMs);
+		const isLanded = Math.abs(needle.position - target) < settledAmplitude && Math.abs(needle.velocity) < settledPerSecond;
+		this.#carryMs = needle.carryMs;
+		this.#velocity = isLanded ? 0 : needle.velocity;
+		this.#bar = isLanded ? this.#target : toDecibels(Math.max(0, needle.position));
+	}
 	#tick = (time) => {
-		const fall = releaseDecibelsPerSecond * Math.max(0, time - (this.#lastFrame ?? time)) / 1e3;
+		const elapsedMs = Math.max(0, time - (this.#lastFrame ?? time));
 		this.#frame = void 0;
 		this.#lastFrame = time;
-		this.#bar = Math.max(this.#target, this.min, this.#bar - fall);
-		if (time - this.#peakAt >= holdMs) this.#peak = Math.max(this.#bar, this.#peak - fall);
+		this.#step(time, elapsedMs);
 		this.#render(time);
 		if (this.#isSettled(time)) {
 			this.#lastFrame = void 0;

package/dist/default/elements/number.js

@@ -1,6 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
-import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicValueElement } from "./value-element.js";
 
 //#region src/elements/number.ts
 const renderNumber = template(`
@@ -16,10 +15,19 @@ const renderNumber = template(`
 			/>
 		</div>
 	`, HTMLDivElement);
-const fallbackTravelPx = 160;
-var SonicNumber = class extends SonicRangeElement {
+var SonicNumber = class extends SonicValueElement {
+	get press() {
+		return this.getAttribute("press") === "step" ? "step" : "none";
+	}
+	set press(gesture) {
+		this.reflect("press", gesture);
+	}
 	#number = renderNumber();
 	#digits = requireChild(this.#number, ".sonic-number-value", HTMLSpanElement);
+	connectedCallback() {
+		this.upgradeProperties("press");
+		super.connectedCallback();
+	}
 	connect(signal) {
 		const number = this.#number;
 		this.appendOnce(number);
@@ -27,18 +35,23 @@ var SonicNumber = class extends SonicRangeElement {
 		this.checkStyles(number, "number.css");
 		this.bindGestures(number, signal, () => ({
 			position: (event) => -event.clientY,
-			travelPx: readPxProperty(getComputedStyle(number), "--_sonic-number-travel", fallbackTravelPx)
+			travelPx: this.travelPx(number, "--_sonic-number-travel")
 		}));
 	}
 	controlRole() {
 		return "spinbutton";
 	}
+	draw() {
+		this.#digits.textContent = this.valueText;
+	}
 	focusTarget() {
 		return this.#number;
 	}
-	render() {
-		this.#digits.textContent = this.valueText();
-		this.renderAria(this.#number);
+	tapTarget() {
+		if (this.press !== "step") return void 0;
+		const mapping = this.mapping();
+		const next = mapping.keyTarget("ArrowUp", this.value);
+		return next === void 0 || next === this.value ? mapping.bounds[0] : next;
 	}
 };