@xsynaptic/sonic-ui 0.3.0 → 0.4.0

package/dist/default/elements/dial.js

@@ -1,10 +1,11 @@
-import { template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
+import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicRangeElement } from "./range-element.js";
 
 //#region src/elements/dial.ts
 const renderDial = template(`
 		<div class="sonic-dial" role="slider" tabindex="0">
+			<div class="sonic-dial-scale" aria-hidden="true"></div>
 			<div class="sonic-dial-notches"></div>
 			<div class="sonic-dial-ring"></div>
 			<div class="sonic-dial-modulation"></div>
@@ -49,7 +50,7 @@ var SonicDial = class extends SonicRangeElement {
 	}
 	connect(signal) {
 		const dial = this.#dial;
-		this.appendOnce(dial);
+		this.bindScale(dial, requireChild(dial, ".sonic-dial-scale", HTMLDivElement), signal);
 		this.render();
 		this.checkStyles(dial, "dial.css");
 		this.bindGestures(dial, signal, () => ({
@@ -70,6 +71,7 @@ var SonicDial = class extends SonicRangeElement {
 		dial.style.setProperty("--_sonic-dial-modulation-to", String(modulationTo));
 		if (positions === void 0) dial.style.removeProperty("--_sonic-dial-positions");
 		else dial.style.setProperty("--_sonic-dial-positions", String(positions));
+		this.renderScale();
 		this.renderAria(dial);
 	}
 	wraps() {

package/dist/default/elements/key.js

@@ -1,4 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
 
@@ -10,11 +11,19 @@ const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
 var SonicKey = class extends SonicFormElement {
 	static observedAttributes = [
 		...SonicFormElement.observedAttributes,
+		"busy",
 		"momentary",
 		"pressed",
+		"soft-disabled",
 		"toggle",
 		"value"
 	];
+	get busy() {
+		return this.hasAttribute("busy");
+	}
+	set busy(isBusy) {
+		this.reflect("busy", isBusy);
+	}
 	get defaultPressed() {
 		return this.hasAttribute("pressed");
 	}
@@ -35,6 +44,12 @@ var SonicKey = class extends SonicFormElement {
 		this.#pressed = isPressed === true;
 		this.render();
 	}
+	get softDisabled() {
+		return this.hasAttribute("soft-disabled");
+	}
+	set softDisabled(isSoftDisabled) {
+		this.reflect("soft-disabled", isSoftDisabled);
+	}
 	get toggle() {
 		return this.hasAttribute("toggle");
 	}
@@ -53,7 +68,7 @@ var SonicKey = class extends SonicFormElement {
 	#pressed = false;
 	attributeChangedCallback(name) {
 		if (name === "pressed") this.#isDirty = false;
-		if (name === "disabled" && this.isDisabled()) this.#release();
+		if (this.isDisabled() || this.#isSoftDisabled()) this.#release();
 		this.render();
 	}
 	formResetCallback() {
@@ -65,7 +80,7 @@ var SonicKey = class extends SonicFormElement {
 	connect(signal) {
 		const key = this.#key;
 		const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
-		this.upgradeProperties("defaultPressed", "momentary", "toggle", "pressed", "value");
+		this.upgradeProperties("busy", "defaultPressed", "momentary", "softDisabled", "toggle", "pressed", "value");
 		this.mirrorChildren({
 			control: key,
 			copy: (originals) => {
@@ -77,7 +92,12 @@ var SonicKey = class extends SonicFormElement {
 		signal.addEventListener("abort", () => {
 			this.#release();
 		}, { once: true });
-		key.addEventListener("click", () => {
+		key.addEventListener("click", (event) => {
+			if (this.#isSoftDisabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
 			if (!this.toggle) return;
 			this.pressed = !this.pressed;
 			this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -90,6 +110,8 @@ var SonicKey = class extends SonicFormElement {
 	render() {
 		const key = this.#key;
 		key.disabled = this.isDisabled();
+		writeAttribute(key, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
+		writeAttribute(key, "aria-busy", this.busy ? "true" : void 0);
 		key.removeAttribute("aria-pressed");
 		if (this.toggle) key.setAttribute("aria-pressed", String(this.pressed));
 		this.toggleState("pressed", this.pressed);
@@ -124,7 +146,7 @@ var SonicKey = class extends SonicFormElement {
 		}, { signal });
 	}
 	#hold(holder) {
-		if (this.isDisabled() || this.#holder !== void 0) return;
+		if (this.isDisabled() || this.#isSoftDisabled() || this.#holder !== void 0) return;
 		this.#holder = holder;
 		this.pressed = true;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -132,6 +154,9 @@ var SonicKey = class extends SonicFormElement {
 	#isMomentary() {
 		return this.momentary && !this.toggle;
 	}
+	#isSoftDisabled() {
+		return this.softDisabled && !this.isDisabled();
+	}
 	#release() {
 		if (this.#holder === void 0) return;
 		this.#holder = void 0;

package/dist/default/elements/meter.js

@@ -1,5 +1,7 @@
 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";
 
 //#region src/elements/meter.ts
 const renderMeter = template(`
@@ -14,20 +16,30 @@ const holdMs = 1500;
 function toDecibels(amplitude) {
 	return 20 * Math.log10(Math.abs(amplitude));
 }
+function lightsBelow(lights, zone) {
+	return `calc(${lights.map((threshold) => `sign(max(0, var(--_sonic-meter-${zone}-from) - (${String(threshold)})))`).join(" + ")})`;
+}
 var SonicMeter = class extends SonicElement {
 	static observedAttributes = [
 		"disabled",
+		"lights",
 		"max",
-		"min"
+		"min",
+		"origin",
+		"scale"
 	];
 	get level() {
 		return this.#level;
 	}
 	set level(amplitude) {
 		if (!Number.isFinite(amplitude)) return;
-		const decibels = toDecibels(amplitude);
 		const now = performance.now();
 		this.#level = amplitude;
+		if (this.scale === "linear") {
+			this.#render(now);
+			return;
+		}
+		const decibels = toDecibels(amplitude);
 		this.#target = decibels;
 		this.#bar = Math.max(this.#bar, decibels);
 		if (decibels >= this.#peak) {
@@ -38,6 +50,12 @@ var SonicMeter = class extends SonicElement {
 		this.#render(now);
 		this.#schedule(now);
 	}
+	get lights() {
+		return parseNumberList(this.getAttribute("lights"));
+	}
+	set lights(thresholds) {
+		this.reflect("lights", thresholds?.join(" "));
+	}
 	get max() {
 		return this.numberAttribute("max", 0);
 	}
@@ -56,24 +74,39 @@ 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 scale() {
+		return this.getAttribute("scale") === "linear" ? "linear" : "db";
+	}
+	set scale(scale) {
+		this.reflect("scale", scale);
+	}
 	#bar = -Infinity;
 	#clipAt = -Infinity;
 	#frame;
 	#lastFrame;
 	#level = 0;
+	#lights;
 	#meter = renderMeter();
 	#peak = -Infinity;
 	#peakAt = -Infinity;
 	#target = -Infinity;
 	attributeChangedCallback() {
 		const now = performance.now();
+		this.#renderLights();
 		this.#render(now);
 		this.#schedule(now);
 	}
 	connect(signal) {
 		const now = performance.now();
-		this.upgradeProperties("max", "min", "orientation", "level");
+		this.upgradeProperties("lights", "max", "min", "orientation", "origin", "scale", "level");
 		this.appendOnce(this.#meter);
+		this.#renderLights();
 		this.#render(now);
 		this.#schedule(now);
 		this.checkStyles(this.#meter, "meter.css");
@@ -83,21 +116,25 @@ 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;
+	#fraction(level) {
+		const lights = this.#lights;
+		if (lights) return lights.filter((threshold) => threshold <= level).length / lights.length;
+		return linearTaper(this.min, this.max).position(level);
 	}
 	#isSettled(now) {
+		if (this.scale === "linear") return true;
 		const floor = this.min;
 		return this.#bar <= Math.max(this.#target, floor) && this.#peak <= Math.max(this.#bar, floor) && now - this.#clipAt >= holdMs;
 	}
 	#render(now) {
 		const meter = this.#meter;
+		const origin = this.origin === void 0 ? 0 : this.#fraction(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
 		meter.style.setProperty("--_sonic-meter-max", String(this.max));
-		if (this.disabled) {
-			meter.style.setProperty("--_sonic-meter-level", "0");
+		meter.style.setProperty("--_sonic-meter-origin", String(origin));
+		if (this.disabled || this.scale === "linear") {
+			const level = this.disabled ? origin : this.#fraction(this.#level);
+			meter.style.setProperty("--_sonic-meter-level", String(level));
 			meter.style.setProperty("--_sonic-meter-peak", "0");
 			meter.style.setProperty("--_sonic-meter-clipped", "0");
 			return;
@@ -106,6 +143,23 @@ var SonicMeter = class extends SonicElement {
 		meter.style.setProperty("--_sonic-meter-peak", String(this.#fraction(this.#peak)));
 		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
 	}
+	#renderLights() {
+		const meter = this.#meter;
+		const lights = this.lights;
+		this.#lights = lights;
+		this.toggleState("ladder", lights !== void 0);
+		if (!lights) {
+			for (const name of [
+				"count",
+				"hot-lights",
+				"clip-lights"
+			]) meter.style.removeProperty(`--_sonic-meter-${name}`);
+			return;
+		}
+		meter.style.setProperty("--_sonic-meter-count", String(lights.length));
+		meter.style.setProperty("--_sonic-meter-hot-lights", lightsBelow(lights, "hot"));
+		meter.style.setProperty("--_sonic-meter-clip-lights", lightsBelow(lights, "clip"));
+	}
 	#schedule(now) {
 		if (this.#frame !== void 0 || !this.isConnected || this.#isSettled(now)) return;
 		if (this.#lastFrame === void 0) this.#lastFrame = now;

package/dist/default/elements/number.js

@@ -1,6 +1,6 @@
 import { requireChild, template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicRangeElement } from "./range-element.js";
 
 //#region src/elements/number.ts
 const renderNumber = template(`

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

@@ -2,9 +2,15 @@ import { requireChild } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { RangeEntry } from "./range-entry.js";
-import { clampUnit, linearTaper, logTaper, skewTaper, wrapUnit } from "../lib/taper.js";
+import { copyNode } from "../lib/copy-node.js";
+import { passDetent } from "../lib/detent.js";
+import { clamp, clampUnit, trimFloat, wrapUnit } from "../lib/math.js";
+import { nearestEntry, parseNumberList } from "../lib/number-list.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { linearTaper, listTaper, logTaper, skewTaper } from "../lib/taper.js";
 
 //#region src/elements/range-element.ts
+const detentZonePx = 8;
 const fineScale = .1;
 const keyRevealMs = 1e3;
 const pageSteps = 10;
@@ -13,6 +19,7 @@ const revealPx = 4;
 const canPopover = "togglePopover" in HTMLElement.prototype;
 let instanceCount = 0;
 const resetKeys = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+const endKeys = /* @__PURE__ */ new Set(["End", "Home"]);
 const keySteps = /* @__PURE__ */ new Map([
 	["ArrowDown", -1],
 	["ArrowLeft", -1],
@@ -31,9 +38,22 @@ const roleAttributes = [
 	"role",
 	"tabindex"
 ];
+function scaleValue(mark) {
+	const text = mark.dataset.sonicValue?.trim();
+	return text ? Number(text) : NaN;
+}
+function scaleMark(original) {
+	const mark = copyNode(original);
+	if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) return [];
+	if (!Number.isFinite(scaleValue(mark))) return [];
+	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
+	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
+	return [mark];
+}
 var SonicRangeElement = class extends SonicFormElement {
 	static observedAttributes = [
 		...SonicFormElement.observedAttributes,
+		"detent",
 		"max",
 		"midpoint",
 		"min",
@@ -42,7 +62,8 @@ var SonicRangeElement = class extends SonicFormElement {
 		"readout",
 		"step",
 		"taper",
-		"value"
+		"value",
+		"values"
 	];
 	get default() {
 		return this.optionalNumberAttribute("default");
@@ -50,6 +71,12 @@ var SonicRangeElement = class extends SonicFormElement {
 	set default(value) {
 		this.reflect("default", value);
 	}
+	get detent() {
+		return this.optionalNumberAttribute("detent");
+	}
+	set detent(value) {
+		this.reflect("detent", value);
+	}
 	get dimmed() {
 		return this.hasAttribute("dimmed");
 	}
@@ -130,7 +157,14 @@ var SonicRangeElement = class extends SonicFormElement {
 		if (this.#drag) return;
 		this.#write(next);
 	}
+	get values() {
+		return parseNumberList(this.getAttribute("values"));
+	}
+	set values(entries) {
+		this.reflect("values", entries?.join(" "));
+	}
 	#drag;
+	#entries;
 	#entry;
 	#formatValue;
 	#instance = String(instanceCount += 1);
@@ -138,8 +172,10 @@ var SonicRangeElement = class extends SonicFormElement {
 	#keyRevealTimer;
 	#parseValue;
 	#readout;
+	#scale;
 	#value = 0;
 	attributeChangedCallback(name) {
+		this.#entries = parseNumberList(this.getAttribute("values"));
 		if (name === "value") {
 			if (this.#drag) return;
 			this.#isDirty = false;
@@ -152,7 +188,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		this.render();
 	}
 	connectedCallback() {
-		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "formatValue", "parseValue", "value");
+		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "values", "detent", "formatValue", "parseValue", "value");
 		super.connectedCallback();
 	}
 	bindGestures(control, signal, grab) {
@@ -170,6 +206,7 @@ var SonicRangeElement = class extends SonicFormElement {
 			if (!axis) return;
 			const startPosition = axis.position(event);
 			const drag = {
+				detent: this.#detentHold(control, axis.travelPx),
 				fromValue,
 				isRevealed: false,
 				lastPosition: startPosition,
@@ -192,11 +229,10 @@ var SonicRangeElement = class extends SonicFormElement {
 			if (event.pointerId !== drag?.pointerId) return;
 			const position = drag.position(event);
 			const scale = event.shiftKey ? fineScale : 1;
-			const fraction = drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale;
-			drag.rawFraction = this.wraps() ? wrapUnit(fraction) : clampUnit(fraction);
+			const next = this.#move(drag, (position - drag.lastPosition) / drag.travelPx * scale);
 			drag.lastPosition = position;
 			if (Math.abs(position - drag.startPosition) >= revealPx) this.#reveal(drag);
-			this.input(this.valueAt(drag.rawFraction));
+			this.input(next);
 		}, { signal });
 		const endDrag = (event) => {
 			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
@@ -209,7 +245,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		control.addEventListener("pointerup", (event) => {
 			if (event.pointerId !== this.#drag?.pointerId) return;
 			this.#endDrag();
-			if (!entry.press(event)) return;
+			if (!entry.press(event) || this.springTarget() !== void 0) return;
 			if (this.doublePress === "reset") this.#reset();
 			else entry.open();
 		}, { signal });
@@ -219,13 +255,24 @@ var SonicRangeElement = class extends SonicFormElement {
 			this.#hideForKeys();
 		}, { once: true });
 	}
+	bindScale(control, scale, signal) {
+		this.#scale = scale;
+		this.mirrorChildren({
+			control,
+			copy: (originals) => {
+				scale.replaceChildren(...originals.flatMap((original) => scaleMark(original)));
+				this.renderScale();
+			},
+			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]")
+		}, signal);
+	}
 	clampRange(next) {
 		const min = this.min;
-		if (!this.wraps()) return Math.min(this.#max(), Math.max(min, next));
+		if (!this.wraps()) return clamp(next, min, this.#max());
 		const range = this.range();
 		if (range <= 0) return min;
-		const offset = Number((((next - min) % range + range) % range).toPrecision(12));
-		return offset >= range ? min : Number((min + offset).toPrecision(12));
+		const offset = trimFloat(((next - min) % range + range) % range);
+		return offset >= range ? min : trimFloat(min + offset);
 	}
 	controlRole() {
 		return "slider";
@@ -249,10 +296,10 @@ var SonicRangeElement = class extends SonicFormElement {
 		return [Math.min(value, modulated), Math.max(value, modulated)];
 	}
 	originFraction() {
-		return this.fraction(this.origin ?? this.min);
+		return this.fraction(this.restValue());
 	}
 	positions() {
-		const positions = Math.round(this.range() / this.step) + (this.wraps() ? 0 : 1);
+		const positions = this.#entries?.length ?? Math.round(this.range() / this.step) + (this.wraps() ? 0 : 1);
 		if (!this.notched || !Number.isFinite(positions) || positions < 2) return;
 		return positions;
 	}
@@ -267,9 +314,10 @@ var SonicRangeElement = class extends SonicFormElement {
 			this.#renderReadout();
 			return;
 		}
+		const [low, high] = this.#bounds();
 		control.setAttribute("role", this.controlRole());
-		control.setAttribute("aria-valuemin", String(this.min));
-		control.setAttribute("aria-valuemax", String(this.#max()));
+		control.setAttribute("aria-valuemin", String(low));
+		control.setAttribute("aria-valuemax", String(high));
 		control.setAttribute("aria-valuenow", String(this.#value));
 		if (orientation) control.setAttribute("aria-orientation", orientation);
 		writeAttribute(control, "aria-valuetext", this.#formatValue?.(this.#value));
@@ -277,9 +325,21 @@ var SonicRangeElement = class extends SonicFormElement {
 		this.#renderDisabled(control);
 		this.#renderReadout();
 	}
+	renderScale() {
+		const marks = this.#scale?.children ?? [];
+		for (const mark of marks) {
+			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
+			const at = String(this.fraction(this.clampRange(scaleValue(mark))));
+			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
+		}
+	}
 	restoreState(state) {
 		this.value = Number(state);
 	}
+	restValue() {
+		return this.origin ?? this.#bounds()[0];
+	}
+	springTarget() {}
 	valueAt(fraction) {
 		return (this.#taper() ?? linearTaper(this.min, this.#max())).value(fraction);
 	}
@@ -321,6 +381,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		control.addEventListener("keydown", (event) => {
 			if (this.isDisabled() || event.defaultPrevented || event.target !== control) return;
 			if (event.key === "Enter") {
+				if (this.springTarget() !== void 0) return;
 				event.preventDefault();
 				entry.open();
 				return;
@@ -331,21 +392,43 @@ var SonicRangeElement = class extends SonicFormElement {
 			this.#commit(next);
 			this.#revealForKeys();
 		}, { signal });
+		control.addEventListener("keyup", (event) => {
+			if (keySteps.has(event.key) || endKeys.has(event.key)) this.#springBack();
+		}, { signal });
 		control.addEventListener("blur", () => {
 			this.#hideForKeys();
+			this.#springBack();
 		}, { signal });
 	}
+	#bounds() {
+		const entries = this.#entries;
+		return [entries?.[0] ?? this.min, entries?.at(-1) ?? this.#max()];
+	}
 	#clamp(next) {
+		const entries = this.#entries;
+		if (entries) return nearestEntry(entries, next);
 		const min = this.min;
 		const step = this.step;
 		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
-		return this.clampRange(Number(stepped.toPrecision(12)));
+		return this.clampRange(trimFloat(stepped));
 	}
 	#commit(next) {
 		if (this.input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	#detentHold(control, travelPx) {
+		const detent = this.detent;
+		if (detent === void 0) return void 0;
+		const value = this.#clamp(detent);
+		const zonePx = readPxProperty(getComputedStyle(control), "--_sonic-detent-zone", detentZonePx);
+		return {
+			place: this.fraction(value),
+			slack: value === this.#value ? 0 : void 0,
+			value,
+			zone: zonePx / travelPx
+		};
+	}
 	#end(step) {
-		if (!this.wraps()) return this.#max();
+		if (!this.wraps()) return this.#bounds()[1];
 		return this.min + (Math.ceil(this.range() / step) - 1) * step;
 	}
 	#endDrag() {
@@ -356,6 +439,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		this.toggleState("dragging", false);
 		this.#renderReadout();
 		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+		this.#springBack();
 	}
 	#hideForKeys() {
 		clearTimeout(this.#keyRevealTimer);
@@ -367,20 +451,29 @@ var SonicRangeElement = class extends SonicFormElement {
 		return (this.#drag?.isRevealed === true || this.#keyRevealTimer !== void 0) && this.readout;
 	}
 	#keyTarget(key) {
-		if (key === "Home") return this.min;
+		if (key === "Home") return this.#bounds()[0];
 		const step = this.step > 0 ? this.step : this.range() / 100;
 		if (key === "End") return this.#end(step);
 		if (resetKeys.has(key)) return this.default;
 		const steps = keySteps.get(key);
 		if (steps === void 0) return void 0;
-		const taper = this.#taper();
-		if (!taper) return this.#value + steps * step;
-		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
-		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
+		return this.#stopAtDetent(this.#stepBy(steps, step));
 	}
 	#max() {
 		return Math.max(this.min, this.max);
 	}
+	#move(drag, delta) {
+		const { detent } = drag;
+		const to = drag.rawFraction + delta;
+		const next = detent ? passDetent(detent, drag.rawFraction, to) : to;
+		if (detent && next === void 0) {
+			drag.rawFraction = detent.place;
+			return detent.value;
+		}
+		const place = next ?? to;
+		drag.rawFraction = this.wraps() ? wrapUnit(place) : clampUnit(place);
+		return this.valueAt(drag.rawFraction);
+	}
 	#renderDisabled(control) {
 		if (this.isDisabled()) {
 			control.setAttribute("aria-disabled", "true");
@@ -413,7 +506,27 @@ var SonicRangeElement = class extends SonicFormElement {
 		}, keyRevealMs);
 		this.#renderReadout();
 	}
+	#springBack() {
+		const target = this.springTarget();
+		if (target !== void 0) this.#commit(target);
+	}
+	#stepBy(steps, step) {
+		const entries = this.#entries;
+		if (entries) return entries[clamp(entries.indexOf(this.#value) + steps, 0, entries.length - 1)] ?? this.#value;
+		const taper = this.#taper();
+		if (!taper) return this.#value + steps * step;
+		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
+		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
+	}
+	#stopAtDetent(next) {
+		const detent = this.detent;
+		if (detent === void 0) return next;
+		const value = this.#clamp(detent);
+		return (this.#value - value) * (next - value) < 0 ? value : next;
+	}
 	#taper() {
+		const entries = this.#entries;
+		if (entries) return listTaper(entries);
 		if (this.notched || this.wraps()) return void 0;
 		const min = this.min;
 		const max = this.#max();