@xsynaptic/sonic-ui 0.2.0 → 0.4.0

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 } 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],
@@ -21,7 +28,7 @@ const keySteps = /* @__PURE__ */ new Map([
 	["PageDown", -10],
 	["PageUp", pageSteps]
 ]);
-const sliderAttributes = [
+const roleAttributes = [
 	"aria-disabled",
 	"aria-orientation",
 	"aria-valuemax",
@@ -31,9 +38,22 @@ const sliderAttributes = [
 	"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,10 +229,10 @@ var SonicRangeElement = class extends SonicFormElement {
 			if (event.pointerId !== drag?.pointerId) return;
 			const position = drag.position(event);
 			const scale = event.shiftKey ? fineScale : 1;
-			drag.rawFraction = clampUnit(drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale);
+			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();
@@ -208,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 });
@@ -218,8 +255,27 @@ 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) {
-		return Math.min(this.#max(), Math.max(this.min, next));
+		const min = this.min;
+		if (!this.wraps()) return clamp(next, min, this.#max());
+		const range = this.range();
+		if (range <= 0) return min;
+		const offset = trimFloat(((next - min) % range + range) % range);
+		return offset >= range ? min : trimFloat(min + offset);
+	}
+	controlRole() {
+		return "slider";
 	}
 	fraction(value) {
 		return (this.#taper() ?? linearTaper(this.min, this.#max())).position(value);
@@ -234,11 +290,16 @@ var SonicRangeElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	modulationFractions(amount) {
+		const value = this.fraction(this.#value);
+		const modulated = this.fraction(this.#value + amount);
+		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) + 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;
 	}
@@ -248,14 +309,15 @@ var SonicRangeElement = class extends SonicFormElement {
 	renderAria(control, orientation) {
 		this.writeFormValue(String(this.#value), String(this.#value));
 		if (this.#entry?.isOpen) {
-			for (const name of sliderAttributes) control.removeAttribute(name);
+			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
 			this.#renderReadout();
 			return;
 		}
-		control.setAttribute("role", "slider");
-		control.setAttribute("aria-valuemin", String(this.min));
-		control.setAttribute("aria-valuemax", String(this.#max()));
+		const [low, high] = this.#bounds();
+		control.setAttribute("role", this.controlRole());
+		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));
@@ -263,28 +325,48 @@ 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);
 	}
+	valueText() {
+		return this.#formatValue?.(this.#value) ?? String(this.#value);
+	}
+	wraps() {
+		return false;
+	}
 	#bindEntry(control, signal) {
 		const input = requireChild(control, "input", HTMLInputElement);
-		const bubble = requireChild(control, "[popover]", HTMLElement);
-		const anchor = `--sonic-readout-${this.#instance}`;
+		const bubble = control.querySelector("[popover]");
 		input.id = `sonic-entry-${this.#instance}`;
-		this.#readout = {
-			bubble,
-			text: requireChild(bubble, "span", HTMLElement)
-		};
-		control.style.setProperty("anchor-name", anchor);
-		bubble.style.setProperty("position-anchor", anchor);
+		if (bubble) {
+			const anchor = `--sonic-readout-${this.#instance}`;
+			this.#readout = {
+				bubble,
+				text: requireChild(bubble, "span", HTMLElement)
+			};
+			control.style.setProperty("anchor-name", anchor);
+			bubble.style.setProperty("position-anchor", anchor);
+		}
 		const entry = new RangeEntry(input, {
 			commit: (text) => {
 				this.#commit((this.#parseValue ?? Number.parseFloat)(text));
 			},
-			text: () => this.#parseValue ? this.#valueText() : String(this.#value),
+			text: () => this.#parseValue ? this.valueText() : String(this.#value),
 			toggle: (isOpen) => {
 				if (isOpen) this.forwardNaming(input, true);
 				this.toggleState("editing", isOpen);
@@ -299,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;
@@ -309,19 +392,45 @@ 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.#bounds()[1];
+		return this.min + (Math.ceil(this.range() / step) - 1) * step;
+	}
 	#endDrag() {
 		const drag = this.#drag;
 		if (!drag) return;
@@ -330,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);
@@ -341,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 === "End") return this.#max();
+		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 step = this.step > 0 ? this.step : this.range() / 100;
-		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");
@@ -369,7 +488,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		if (!readout || !canPopover || !this.isConnected) return;
 		const isEditing = this.#entry?.isOpen === true;
 		readout.text.hidden = isEditing;
-		if (!isEditing) readout.text.textContent = this.#valueText();
+		if (!isEditing) readout.text.textContent = this.valueText();
 		readout.bubble.togglePopover(isEditing || this.#isValueShown());
 	}
 	#reset() {
@@ -387,15 +506,32 @@ 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() {
-		if (this.notched) return void 0;
+		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();
 		return (this.taper === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, this.midpoint ?? NaN);
 	}
-	#valueText() {
-		return this.#formatValue?.(this.#value) ?? String(this.#value);
-	}
 	#write(next) {
 		if (!Number.isFinite(next)) return;
 		this.#isDirty = true;

package/dist/default/elements/slider.js

@@ -2,10 +2,21 @@ import { requireChild, template } from "../lib/render.js";
 import { SonicRangeElement } from "./range-element.js";
 
 //#region src/elements/slider.ts
+function readRanges(ranges) {
+	if ("start" in ranges) return Array.from({ length: ranges.length }, (_entry, index) => [ranges.start(index), ranges.end(index)]);
+	return [...ranges].map(([start, end]) => [start, end]);
+}
+function grooveStop(fraction) {
+	if (fraction <= 0) return "0%";
+	if (fraction >= 1) return "100%";
+	return `calc(${String(fraction)} * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) / 2)`;
+}
 const renderSlider = template(`
 		<div class="sonic-slider" role="slider" tabindex="0">
+			<div class="sonic-slider-scale" aria-hidden="true"></div>
 			<div class="sonic-slider-marks"></div>
 			<div class="sonic-slider-groove"></div>
+			<div class="sonic-slider-modulation"></div>
 			<div class="sonic-slider-cap"></div>
 			<div class="sonic-slider-readout" popover="manual">
 				<span></span>
@@ -21,28 +32,53 @@ const renderSlider = template(`
 		</div>
 	`, HTMLDivElement);
 var SonicSlider = class extends SonicRangeElement {
-	static observedAttributes = [...SonicRangeElement.observedAttributes, "orientation"];
+	static observedAttributes = [
+		...SonicRangeElement.observedAttributes,
+		"modulation",
+		"orientation",
+		"spring"
+	];
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(ranges) {
+		this.#buffered = ranges ? readRanges(ranges).toSorted((first, second) => first[0] - second[0]) : [];
+		this.render();
+	}
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
 	}
 	set groovePress(gesture) {
 		this.reflect("groove-press", gesture);
 	}
+	get modulation() {
+		return this.numberAttribute("modulation", 0);
+	}
+	set modulation(amount) {
+		this.reflect("modulation", amount);
+	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
 	}
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get spring() {
+		return this.hasAttribute("spring");
+	}
+	set spring(isSpring) {
+		this.reflect("spring", isSpring);
+	}
+	#buffered = [];
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("groovePress", "orientation");
+		this.upgradeProperties("buffered", "groovePress", "modulation", "orientation", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		const slider = this.#slider;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
-		this.appendOnce(slider);
+		this.bindScale(slider, requireChild(slider, ".sonic-slider-scale", HTMLDivElement), signal);
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
@@ -59,12 +95,20 @@ var SonicSlider = class extends SonicRangeElement {
 	render() {
 		const slider = this.#slider;
 		const positions = this.positions();
+		const [modulationFrom, modulationTo] = this.modulationFractions(this.modulation);
 		slider.style.setProperty("--_sonic-slider-value", String(this.fraction(this.value)));
 		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
+		slider.style.setProperty("--_sonic-slider-modulation-from", String(modulationFrom));
+		slider.style.setProperty("--_sonic-slider-modulation-to", String(modulationTo));
 		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
 		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
+		this.#renderBuffered(slider);
+		this.renderScale();
 		this.renderAria(slider, this.orientation);
 	}
+	springTarget() {
+		return this.spring ? this.restValue() : void 0;
+	}
 	#axis(slider, cap) {
 		const track = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();
@@ -79,6 +123,22 @@ var SonicSlider = class extends SonicRangeElement {
 			travelPx: Math.max(1, track.width - capBox.width)
 		};
 	}
+	#renderBuffered(slider) {
+		if (this.#buffered.length === 0) {
+			slider.style.removeProperty("--_sonic-slider-buffered-ranges");
+			return;
+		}
+		const stops = this.#buffered.flatMap(([start, end]) => {
+			const from = grooveStop(this.fraction(Math.min(start, end)));
+			const to = grooveStop(this.fraction(Math.max(start, end)));
+			return [
+				`transparent ${from}`,
+				`var(--_sonic-slider-buffered) ${from} ${to}`,
+				`transparent ${to}`
+			];
+		});
+		slider.style.setProperty("--_sonic-slider-buffered-ranges", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
+	}
 };
 
 //#endregion

package/dist/default/index.js

@@ -1,8 +1,9 @@
 import { SonicDial } from "./elements/dial.js";
 import { SonicKey } from "./elements/key.js";
 import { SonicMeter } from "./elements/meter.js";
+import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicDial, SonicKey, SonicMeter, SonicSegmented, SonicSlider, formatPercent, parsePercent };
+export { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, formatPercent, parsePercent };

package/dist/default/lib/detent.js

@@ -0,0 +1,17 @@
+//#region src/lib/detent.ts
+function isAcross(from, to, place) {
+	return from !== place && (from - place) * (to - place) <= 0;
+}
+function passDetent(hold, from, to) {
+	if (hold.slack === void 0 && !isAcross(from, to, hold.place)) return to;
+	const slack = (hold.slack ?? 0) + to - hold.place;
+	if (Math.abs(slack) <= hold.zone) {
+		hold.slack = slack;
+		return;
+	}
+	hold.slack = void 0;
+	return hold.place + slack - Math.sign(slack) * hold.zone;
+}
+
+//#endregion
+export { passDetent };

package/dist/default/lib/math.js

@@ -0,0 +1,16 @@
+//#region src/lib/math.ts
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function clampUnit(fraction) {
+	return clamp(fraction, 0, 1);
+}
+function wrapUnit(fraction) {
+	return fraction - Math.floor(fraction);
+}
+function trimFloat(value) {
+	return Number(value.toPrecision(12));
+}
+
+//#endregion
+export { clamp, clampUnit, trimFloat, wrapUnit };

package/dist/default/lib/number-list.js

@@ -0,0 +1,14 @@
+//#region src/lib/number-list.ts
+function parseNumberList(text) {
+	if (text === null) return void 0;
+	const entries = [...new Set(text.split(/[\s,]+/).filter(Boolean).map(Number).filter((entry) => Number.isFinite(entry)))].toSorted((first, second) => first - second);
+	return entries.length >= 2 ? entries : void 0;
+}
+function nearestEntry(entries, value) {
+	let nearest = entries[0] ?? value;
+	for (const entry of entries) if (Math.abs(entry - value) < Math.abs(nearest - value)) nearest = entry;
+	return nearest;
+}
+
+//#endregion
+export { nearestEntry, parseNumberList };

package/dist/default/lib/taper.js

@@ -1,7 +1,6 @@
+import { clampUnit } from "./math.js";
+
 //#region src/lib/taper.ts
-function clampUnit(fraction) {
-	return Math.min(1, Math.max(0, fraction));
-}
 function linearTaper(min, max) {
 	const range = max - min;
 	return {
@@ -27,6 +26,20 @@ function skewTaper(min, max, midpoint) {
 		value: (position) => min + range * clampUnit(position) ** (1 / skew)
 	};
 }
+function listTaper(entries) {
+	const last = entries.length - 1;
+	return {
+		position: (value) => {
+			const above = entries.findIndex((entry) => entry >= value);
+			if (above === -1) return 1;
+			const high = entries[above];
+			const low = entries[above - 1];
+			if (high === void 0 || low === void 0) return 0;
+			return (above - 1 + (value - low) / (high - low)) / last;
+		},
+		value: (position) => entries[Math.round(clampUnit(position) * last)] ?? NaN
+	};
+}
 
 //#endregion
-export { clampUnit, linearTaper, logTaper, skewTaper };
+export { linearTaper, listTaper, logTaper, skewTaper };

package/dist/dev/define/number.d.ts

@@ -0,0 +1,2 @@
+import { SonicNumber } from "../elements/number.js";
+export type { SonicNumber };

package/dist/dev/define/number.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicNumber } from "../elements/number.js";
+
+//#region src/define/number.ts
+defineOnce("sonic-number", SonicNumber);
+
+//#endregion
+//# sourceMappingURL=number.js.map

package/dist/dev/define/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":[],"sources":["../../../src/define/number.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicNumber } from '#elements/number.ts';\n\ndefineOnce('sonic-number', SonicNumber);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicNumber } from '#elements/number.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/dev/define.d.ts

@@ -4,8 +4,10 @@ import { SonicKey } from "./elements/key.js";
 import "./define/key.js";
 import { SonicMeter } from "./elements/meter.js";
 import "./define/meter.js";
+import { SonicNumber } from "./elements/number.js";
+import "./define/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import "./define/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import "./define/slider.js";
-export type { SonicDial, SonicKey, SonicMeter, SonicSegmented, SonicSlider };
+export type { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider };

package/dist/dev/define.js

@@ -1,5 +1,6 @@
 import "./define/dial.js";
 import "./define/key.js";
 import "./define/meter.js";
+import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";