@xsynaptic/sonic-ui 0.10.3 → 0.12.0

package/dist/default/elements/switch.js

@@ -1,9 +1,7 @@
-import { clamp } from "../lib/math.js";
-import { writeAttribute } from "../lib/write-attribute.js";
-import { bindHold } from "../lib/hold.js";
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
+import { isUnder, optionValue } from "./radio-group.js";
+import { SonicPositionGroupElement } from "./position-group.js";
 
 //#region src/elements/switch.ts
 const renderSwitch = template(`
@@ -18,166 +16,60 @@ const renderPosition = template(`
 		</button>
 	`, HTMLButtonElement);
 const renderBare = template(`<button class="sonic-switch-position" role="switch" type="button"></button>`, HTMLButtonElement);
-const pressCentreZone = .08;
-function pressedIndex(index, count, offset) {
-	if (count === 2) return index === 0 ? 1 : 0;
-	const side = Math.abs(offset) < pressCentreZone ? 1 : Math.sign(offset);
-	const next = index + side;
-	return next < 0 || next >= count ? index - side : next;
-}
-var SonicSwitch = class extends SonicRadioGroupElement {
-	static observedAttributes = [
-		...SonicRadioGroupElement.observedAttributes,
-		"checked",
-		"orientation"
-	];
-	get checked() {
-		return this.#isDirty ? this.#checked : this.defaultChecked;
-	}
-	set checked(isChecked) {
-		this.#isDirty = true;
-		this.#checked = isChecked === true;
-		this.render();
-	}
-	get defaultChecked() {
-		return this.hasAttribute("checked");
-	}
-	set defaultChecked(isChecked) {
-		this.reflect("checked", isChecked);
-	}
-	get orientation() {
-		return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
-	}
-	set orientation(direction) {
-		this.reflect("orientation", direction);
-	}
-	get value() {
-		const value = super.value;
-		return value === "" && this.#isBare() ? "on" : value;
-	}
-	set value(next) {
-		super.value = next;
-	}
+const pressCenterZone = .08;
+var SonicSwitch = class extends SonicPositionGroupElement {
+	bare = renderBare();
+	defaultOrientation = "vertical";
 	group = renderSwitch();
-	#bare = renderBare();
 	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
-	#checked = false;
-	#holding;
 	#isClickSwallowed = false;
-	#isDirty = false;
-	attributeChangedCallback(name) {
-		if (name === "checked") this.#isDirty = false;
-		if (this.isDisabled()) this.#holding?.release();
-		super.attributeChangedCallback(name);
-	}
-	formResetCallback() {
-		this.#isDirty = false;
-		super.formResetCallback();
-	}
-	activate() {
-		if (this.#isBare()) this.#bare.click();
-		else super.activate();
-	}
-	chooseByClick(option) {
-		super.chooseByClick(option);
-		if (this.#isMomentary(option)) this.#springBack();
-	}
-	chooseByKey(option, event) {
-		if (!this.#isMomentary(option)) {
-			super.chooseByKey(option, event);
-			return;
-		}
-		if (event.repeat) return;
-		this.#hold(option, event.key);
-		option.focus();
-	}
 	claimPress(option, event) {
 		if (this.#isOnBat(event)) return true;
-		if (!this.#isMomentary(option)) return false;
+		const target = this.pressTarget(option);
+		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
 		this.group.setPointerCapture(event.pointerId);
-		this.#hold(option, event.pointerId);
+		this.hold(target, event.pointerId);
 		return true;
 	}
 	connect(signal) {
 		const group = this.group;
-		this.upgradeProperties("defaultChecked", "checked", "orientation");
 		super.connect(signal);
 		this.checkStyles(group, "switch.css");
-		this.#bare.addEventListener("click", (event) => {
+		this.bare.addEventListener("click", (event) => {
 			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
 			this.#isClickSwallowed = false;
-			if (!isSwallowed) this.#setChecked(!this.checked);
+			if (!isSwallowed) this.setChecked(!this.checked);
 		}, { signal });
-		this.#bare.addEventListener("pointerdown", () => {
+		this.bare.addEventListener("pointerdown", () => {
 			this.#isClickSwallowed = false;
 		}, { signal });
 		this.#bindBat(group, signal);
-		this.#holding = bindHold(group, {
-			canHold: () => !this.isDisabled(),
-			leave: "focusout",
-			onHold: () => {
-				this.toggleState("held", true);
-			},
-			onRelease: () => {
-				this.toggleState("held", false);
-				this.#springBack();
-			}
-		}, signal);
-	}
-	focusTarget() {
-		return this.#isBare() ? this.#bare : super.focusTarget();
-	}
-	isWrapping() {
-		return false;
 	}
 	releaseTarget(option) {
-		if (this.#isMomentary(option)) return void 0;
-		const options = this.options();
-		if (options.length === 2 && optionValue(option) === this.value) return options.find((other) => other !== option);
-		return option;
+		const target = this.pressTarget(option);
+		return this.isMomentary(target) || this.isOptionDisabled(target) ? void 0 : target;
 	}
 	render() {
 		if (!this.isBound()) return;
-		const group = this.group;
+		super.render();
 		const options = this.options();
 		if (options.length > 0) {
-			this.#bare.remove();
-			writeAttribute(group, "role", "radiogroup");
-			writeAttribute(group, "data-sonic-position-count", String(options.length));
-			super.render();
-			this.#renderThrow(this.#checkedIndex(options));
+			this.#renderThrow(this.checkedIndex(options));
 			return;
 		}
-		const bare = this.#bare;
-		const isChecked = this.checked;
-		writeAttribute(group, "role", void 0);
-		delete group.dataset.sonicPositionCount;
-		if (bare.parentElement !== group) group.append(bare);
-		writeAttribute(bare, "disabled", this.isDisabled() ? "" : void 0);
-		writeAttribute(bare, "aria-checked", String(isChecked));
-		this.forwardNaming(group, false);
-		this.forwardNaming(bare, true);
 		const onSide = this.orientation === "horizontal" ? 1 : -1;
-		group.style.setProperty("--_sonic-switch-at", String(isChecked ? onSide : -onSide));
-		this.writeFormValue(isChecked ? this.value : null, String(isChecked));
+		this.group.style.setProperty("--_sonic-switch-at", String(this.checked ? onSide : -onSide));
 	}
 	renderOption() {
 		return renderPosition();
 	}
-	restoreState(state) {
-		if (this.#isBare()) this.checked = state === "true";
-		else super.restoreState(state);
-	}
-	#along(event) {
-		return this.orientation === "horizontal" ? event.clientX : event.clientY;
-	}
 	#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 (!(event.target === this.bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
 				return {
 					hasMoved: false,
-					last: this.#along(event),
+					last: this.along(event),
 					width: this.#bat.getBoundingClientRect().width
 				};
 			},
@@ -187,83 +79,57 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 			},
 			move: (press, event) => {
 				if (this.isDisabled()) return;
-				const delta = this.#along(event) - press.last;
+				const delta = this.along(event) - press.last;
 				if (Math.abs(delta) < press.width / 4) return;
 				press.hasMoved = true;
-				press.last = this.#along(event);
+				press.last = this.along(event);
 				this.#throwBy(Math.sign(delta), event.pointerId);
 			}
 		}, signal);
 	}
-	#checkedIndex(options) {
-		return options.findIndex((option) => optionValue(option) === this.value);
-	}
 	#hasSprungFrom(option) {
-		if (!option || !this.#isMomentary(option)) return false;
-		this.#holding?.release();
+		if (!option || !this.isMomentary(option)) return false;
+		this.releaseHold();
 		return this.value !== optionValue(option);
 	}
-	#hold(option, by) {
-		if (this.#holding?.hold(by) === true) this.select(option);
-	}
-	#isBare() {
-		return this.options().length === 0;
-	}
-	#isMomentary(option) {
-		const options = this.options();
-		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
-	}
 	#isOnBat(event) {
 		return isUnder(this.#bat, event.clientX, event.clientY);
 	}
 	#pressBat(event) {
 		const options = this.options();
 		if (options.length === 0) {
-			this.#setChecked(!this.checked);
+			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 option = options[pressedIndex(this.#checkedIndex(options), options.length, offset)];
+		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();
+		if (this.group.matches(":focus-within")) options[this.checkedIndex(options)]?.focus();
 	}
 	#renderThrow(index) {
 		const count = this.options().length;
 		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
 		this.group.style.setProperty("--_sonic-switch-at", String(at));
 	}
-	#setChecked(isChecked) {
-		if (isChecked === this.checked) return;
-		this.checked = isChecked;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#springBack() {
-		const options = this.options();
-		const index = this.#checkedIndex(options);
-		const held = options[index];
-		if (!held || !this.#isMomentary(held)) return;
-		const rest = options[index === 0 ? 1 : index - 1];
-		if (!rest) return;
-		const isFocused = this.group.contains(this.ownerDocument.activeElement);
-		this.select(rest);
-		if (isFocused) rest.focus();
-	}
 	#throwBy(direction, pointerId) {
 		const options = this.options();
 		if (options.length === 0) {
-			this.#setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
+			this.setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
 			return;
 		}
-		const index = this.#checkedIndex(options);
-		const option = options[clamp(index + direction, 0, options.length - 1)];
+		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);
+		if (this.isMomentary(option)) this.hold(option, pointerId);
 		else this.select(option);
 		this.#refocus(options);
 	}

package/dist/default/elements/toggle.js

@@ -0,0 +1,189 @@
+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 { SonicPositionGroupElement } from "./position-group.js";
+import { positionAt, travelFrom } from "../lib/toggle-travel.js";
+
+//#region src/elements/toggle.ts
+const renderToggle = template(`
+		<div class="sonic-toggle">
+			<span aria-hidden="true" class="sonic-toggle-well"></span>
+			<span aria-hidden="true" class="sonic-toggle-cap"></span>
+		</div>
+	`, HTMLDivElement);
+const renderPosition = template(`
+		<button class="sonic-toggle-position" role="radio" type="button">
+			<span class="sonic-toggle-legend"></span>
+		</button>
+	`, HTMLButtonElement);
+const renderBare = template(`<button class="sonic-toggle-position" role="switch" type="button"></button>`, HTMLButtonElement);
+var SonicToggle = class extends SonicPositionGroupElement {
+	bare = renderBare();
+	defaultOrientation = "horizontal";
+	group = renderToggle();
+	#cap = requireChild(this.group, ".sonic-toggle-cap", HTMLSpanElement);
+	#draggedTo;
+	#hasWarnedOfLegends = false;
+	#well = requireChild(this.group, ".sonic-toggle-well", HTMLSpanElement);
+	claimPress() {
+		return true;
+	}
+	connect(signal) {
+		super.connect(signal);
+		this.checkStyles(this.group, "toggle.css");
+		this.bare.addEventListener("click", (event) => {
+			if (event instanceof PointerEvent && event.pointerType !== "") return;
+			this.setChecked(!this.checked);
+		}, { signal });
+		this.#bindCap(signal);
+	}
+	isMirrored(child) {
+		return super.isMirrored(child) || child === this.#fixedLegend();
+	}
+	placeCopies(copies) {
+		const positions = copies.filter((copy) => super.isMirrored(copy));
+		placeChildren(this.#cap, copies.filter((copy) => !positions.includes(copy)));
+		super.placeCopies(positions);
+	}
+	render() {
+		if (!this.isBound()) return;
+		this.group.style.setProperty("--_sonic-toggle-count", String(this.#stopCount()));
+		this.#placeCap(this.#draggedTo ?? this.#restingAt());
+		super.render();
+		for (const [index, option] of this.options().entries()) option.style.setProperty("--_sonic-toggle-index", String(index));
+	}
+	renderOption() {
+		return renderPosition();
+	}
+	#bindCap(signal) {
+		bindDrag(this.group, {
+			grab: (event) => this.#grab(event),
+			lift: (drag, event) => {
+				if (drag.hasMoved || drag.isHolding || this.isDisabled()) return;
+				if (!isUnder(this.group, event.clientX, event.clientY)) return;
+				this.#press(drag.position);
+			},
+			move: (drag, event) => {
+				if (drag.isHolding || this.isDisabled()) return;
+				const pointer = this.along(event);
+				if (!drag.hasMoved && Math.abs(pointer - drag.start) < drag.thresholdPx) return;
+				drag.hasMoved = true;
+				this.toggleState("dragging", true);
+				this.#slideTo(positionAt(drag.travel, pointer), event.pointerId);
+			},
+			release: (drag) => {
+				delete (drag.position ?? this.bare).dataset.sonicPressed;
+				this.#draggedTo = void 0;
+				this.toggleState("dragging", false);
+				this.render();
+			}
+		}, 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 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);
+		return {
+			hasMoved: false,
+			isHolding: this.#holdFrom(position, event.pointerId),
+			position,
+			start: this.along(event),
+			thresholdPx: dragThresholdPx(event.pointerType),
+			travel
+		};
+	}
+	#holdFrom(position, pointerId) {
+		const target = position && this.pressTarget(position);
+		if (!target || !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();
+	}
+	#restingAt() {
+		if (this.isBare()) return this.checked ? this.#onAt() : 1 - this.#onAt();
+		return Math.max(0, this.checkedIndex(this.options()));
+	}
+	#slideTo(at, pointerId) {
+		const crossed = this.options()[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;
+		this.releaseHold();
+		if (this.isOptionDisabled(crossed) || optionValue(crossed) === this.value) return;
+		if (this.isMomentary(crossed)) this.hold(crossed, pointerId);
+		else this.select(crossed);
+		this.#refocus(crossed);
+	}
+	#stopCount() {
+		return this.options().length || 2;
+	}
+	#travel(event, isOnCap) {
+		const [first, last] = this.#enabledEnds();
+		if (first < 0) return void 0;
+		const box = this.#well.getBoundingClientRect();
+		const [start, length, thickness] = this.orientation === "vertical" ? [
+			box.top,
+			box.height,
+			box.width
+		] : [
+			box.left,
+			box.width,
+			box.height
+		];
+		return travelFrom({
+			at: this.#restingAt(),
+			count: this.#stopCount(),
+			first,
+			isOnCap,
+			last,
+			pointer: this.along(event),
+			well: {
+				length,
+				start,
+				thickness
+			}
+		});
+	}
+};
+
+//#endregion
+export { SonicToggle };

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

@@ -72,6 +72,9 @@ var SonicValueElement = class extends SonicFormElement {
 			}
 		});
 	}
+	get cancelling() {
+		return this.hasState("cancelling");
+	}
 	get default() {
 		return this.optionalNumberAttribute("default");
 	}
@@ -97,6 +100,9 @@ var SonicValueElement = class extends SonicFormElement {
 	set doublePress(gesture) {
 		this.reflect("double-press", gesture);
 	}
+	get dragging() {
+		return this.hasState("dragging");
+	}
 	get formatEntry() {
 		return this.#formatEntry;
 	}
@@ -177,6 +183,9 @@ var SonicValueElement = class extends SonicFormElement {
 	set readout(isShown) {
 		this.reflect("readout", isShown);
 	}
+	get revealed() {
+		return this.hasState("revealed");
+	}
 	get spokenStep() {
 		return this.optionalNumberAttribute("spoken-step");
 	}

package/dist/default/elements/waveform.js

@@ -73,9 +73,9 @@ function paintPlaceholders(context, scene) {
 	if (scene.pending.length === 0) return;
 	const { dpr, height, pixelsPerSecond, startSeconds } = scene;
 	const wavelength = placeholderWavelengthPx * dpr;
-	const centre = height / 2;
+	const center = height / 2;
 	const origin = startSeconds * pixelsPerSecond;
-	const waveY = (x) => centre - Math.sin(((x + origin) / wavelength + scene.phase) * 2 * Math.PI) * centre * placeholderAmplitude;
+	const waveY = (x) => center - Math.sin(((x + origin) / wavelength + scene.phase) * 2 * Math.PI) * center * placeholderAmplitude;
 	context.beginPath();
 	for (const [from, to] of scene.pending) {
 		const opening = (from - startSeconds) * pixelsPerSecond;
@@ -100,13 +100,13 @@ function paintWave(context, scene, peaks) {
 	const buckets = waveformBuckets(peaks, scene);
 	const [first] = buckets;
 	if (!first) return;
-	const centre = scene.height / 2;
-	const amplitudePx = centre * amplitudeMargin;
+	const center = scene.height / 2;
+	const amplitudePx = center * amplitudeMargin;
 	context.fillStyle = waveFill(context, scene);
 	context.beginPath();
-	context.moveTo(first.x, centre);
-	for (const bucket of buckets) context.lineTo(bucket.x, centre - bucket.high * amplitudePx);
-	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, centre - bucket.low * amplitudePx);
+	context.moveTo(first.x, center);
+	for (const bucket of buckets) context.lineTo(bucket.x, center - bucket.high * amplitudePx);
+	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, center - bucket.low * amplitudePx);
 	context.closePath();
 	context.fill();
 }
@@ -125,20 +125,22 @@ var SonicWaveform = class extends SonicWaveElement {
 	set peaks(peaks) {
 		this.#peaks = peaks;
 		this.renderEmpty();
-		this.surface()?.invalidate();
+		this.#repaint();
 	}
 	get pending() {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
 	set pending(regions) {
+		const pending = regions ? readRegions(regions) : [];
+		if (String(pending) === String(this.#pending)) return;
 		const listedMs = this.#pendingListedMs;
 		const nowMs = performance.now();
-		this.#pending = regions ? readRegions(regions) : [];
+		this.#pending = pending;
 		this.#pendingListedMs = new Map(this.#pending.map((region) => {
 			const key = region.join(":");
 			return [key, listedMs.get(key) ?? nowMs];
 		}));
-		this.surface()?.invalidate();
+		this.#repaint();
 	}
 	get pendingDelay() {
 		return Math.max(0, this.numberAttribute("pending-delay", 0));
@@ -177,7 +179,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
-		this.#asked = void 0;
+		this.#askedKey = void 0;
 		this.surface()?.invalidate();
 	}
 	get zoom() {
@@ -193,11 +195,13 @@ var SonicWaveform = class extends SonicWaveElement {
 	lengths = {};
 	sheet = "waveform.css";
 	sizeProperty = "--_sonic-waveform-size";
-	#asked;
+	#asked = /* @__PURE__ */ new WeakSet();
+	#askedKey;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
 	#grabbed;
+	#isAsking = false;
 	#kindColours = /* @__PURE__ */ new Map();
 	#paintedKey = "";
 	#peaks;
@@ -220,6 +224,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	connect(signal) {
 		super.connect(signal);
 		this.bindGestures(this.control, signal, () => this.#grab());
+		if (!("fonts" in document)) return;
 		document.fonts.addEventListener("loadingdone", () => {
 			this.renderMarkers();
 		}, { signal });
@@ -287,10 +292,22 @@ var SonicWaveform = class extends SonicWaveElement {
 		this.surface()?.rebuild();
 	}
 	#ask(wanted) {
-		const asked = this.#requestPeaks?.(...wanted);
-		if (!(asked instanceof Promise)) return;
-		this.#asked = asked;
-		this.#repaintAfter(asked);
+		const key = wanted.join(":");
+		if (key === this.#askedKey) return;
+		let asked;
+		this.#askedKey = key;
+		this.#isAsking = true;
+		try {
+			asked = this.#requestPeaks?.(...wanted);
+		} finally {
+			this.#isAsking = false;
+		}
+		const promises = asked instanceof Promise ? [asked] : asked ?? [];
+		for (const promise of promises) {
+			if (this.#asked.has(promise)) continue;
+			this.#asked.add(promise);
+			this.#repaintAfter(promise);
+		}
 	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
@@ -363,11 +380,13 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
+	#repaint() {
+		if (!this.#isAsking) this.#askedKey = void 0;
+		this.surface()?.invalidate();
+	}
 	async #repaintAfter(asked) {
 		await Promise.allSettled([asked]);
-		if (this.#asked !== asked) return;
-		this.#asked = void 0;
-		this.surface()?.invalidate();
+		this.#repaint();
 	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.playback();

package/dist/default/elements/wavestrip.js

@@ -16,6 +16,7 @@ const colours = {
 const lengths = {
 	gapRatio: "--_sonic-wavestrip-bar-gap-ratio",
 	grooveRatio: "--_sonic-wavestrip-groove-ratio",
+	grooveSize: "--_sonic-wavestrip-groove-size",
 	pitch: "--_sonic-wavestrip-bar-pitch",
 	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
 };
@@ -79,6 +80,10 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	clientXOf(value) {
+		const { startPx, travelPx } = this.#axis();
+		return startPx + this.mapping().proportionOf(value) * travelPx;
+	}
 	connectedCallback() {
 		this.upgradeProperties("buffered", "cancellable", "peaks");
 		super.connectedCallback();
@@ -141,7 +146,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#barsFor({ isDirty, look, size }) {
 		if (!isDirty && this.#bars) return this.#bars;
 		const peaks = this.#peaks;
-		const groove = stripGroove(size, look.lengths.grooveRatio);
+		const groove = stripGroove(size, look.lengths);
 		const drawn = groove ? [groove] : [];
 		const bars = peaks && peaks.length > 0 ? stripBars(peaks, size, look.lengths) : drawn;
 		this.#bars = void 0;

package/dist/default/index.js

@@ -9,10 +9,11 @@ import { SonicSlider } from "./elements/slider.js";
 import { SonicSpectrum } from "./elements/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import { SonicSwitch } from "./elements/switch.js";
+import { SonicToggle } from "./elements/toggle.js";
 import { SonicWaveform } from "./elements/waveform.js";
 import { SonicWavestrip } from "./elements/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";
 import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };