@xsynaptic/sonic-ui 0.26.0 → 0.28.0

package/dist/default/elements/slider.js

@@ -86,9 +86,14 @@ var SonicSlider = class extends SonicValueElement {
 	set spring(isSpring) {
 		this.reflect("spring", isSpring);
 	}
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
+	control = renderSlider();
+	sheet = "slider.css";
 	#buffered = [];
-	#slider = renderSlider();
-	#modulation = createModulation(this.#slider, "slider", (isModulated) => {
+	#modulation = createModulation(this.control, "slider", (isModulated) => {
 		this.toggleState("modulated", isModulated);
 	});
 	connectedCallback() {
@@ -96,7 +101,7 @@ var SonicSlider = class extends SonicValueElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
-		const slider = this.#slider;
+		const slider = this.control;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
 		bindScale(this, {
 			control: slider,
@@ -118,7 +123,7 @@ var SonicSlider = class extends SonicValueElement {
 			}
 		});
 		this.render();
-		this.bindGestures(slider, signal, (event) => {
+		this.bindGestures(signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
 			if (this.groovePress === "none") return;
@@ -136,12 +141,9 @@ var SonicSlider = class extends SonicValueElement {
 			origin: this.originValue(),
 			value: this.value
 		});
-		this.#renderBuffered(this.#slider);
-		this.#renderScrub(this.#slider);
-		this.#placeReadout(this.#slider);
-	}
-	focusTarget() {
-		return this.#slider;
+		this.#renderBuffered(this.control);
+		this.#renderScrub(this.control);
+		this.#placeReadout(this.control);
 	}
 	scrubChanged() {
 		if (this.scrub) this.render();
@@ -152,9 +154,6 @@ var SonicSlider = class extends SonicValueElement {
 	springTarget() {
 		return this.spring ? this.originValue() : void 0;
 	}
-	stateTarget() {
-		return this.#slider;
-	}
 	#axis(slider, cap) {
 		const box = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();

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

@@ -48,6 +48,7 @@ var SonicElement = class SonicElement extends HTMLElement {
 			this.#connection = void 0;
 			throw error;
 		}
+		const { boxProbe: box, control, sheet, sheetToken: token } = this;
 	}
 	connectedMoveCallback() {}
 	disconnectedCallback() {
@@ -67,7 +68,6 @@ var SonicElement = class SonicElement extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	checkStyles(control, sheet, box) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
 		const labels = isNamed ? this.namingLabels() : [];
@@ -87,7 +87,9 @@ var SonicElement = class SonicElement extends HTMLElement {
 	isDisabled() {
 		return this.disabled || this.matches(":disabled");
 	}
-	keepControl(control, signal) {
+	keepControl(signal) {
+		const control = this.control;
+		if (!control) return;
 		const keep = () => {
 			appendOnce(this, control);
 		};
@@ -116,7 +118,9 @@ var SonicElement = class SonicElement extends HTMLElement {
 		}
 		this.setAttribute(name, value === true ? "" : value.toString());
 	}
-	stateTarget() {}
+	stateTarget() {
+		return this.control;
+	}
 	toggleState(state, isOn) {
 		if (isOn) this.#states.add(state);
 		else this.#states.delete(state);
@@ -133,8 +137,6 @@ var SonicElement = class SonicElement extends HTMLElement {
 	usesChild(_child) {
 		return false;
 	}
-	#checkBox(control, checked, box) {}
-	#checkHost(checked) {}
 	#focused() {
 		const root = this.getRootNode();
 		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;

package/dist/default/elements/spectrum.js

@@ -1,5 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { SonicDisplayElement } from "./display-element.js";
+import { SonicAnalyserElement } from "./analyser-element.js";
 import { columnEdges, columnLevels, gridColumns, gridRows, levelRows, loudestBin, zoneRows } from "../lib/spectrum-columns.js";
 import { areSettled, createLevels, receiveLevels, stepLevels } from "../lib/spectrum-levels.js";
 
@@ -71,9 +71,9 @@ function paintHolds(context, { look, rowOf }, { bars, holds }) {
 	context.fillStyle = look.colours.lit;
 	context.fill();
 }
-var SonicSpectrum = class extends SonicDisplayElement {
+var SonicSpectrum = class extends SonicAnalyserElement {
 	static observedAttributes = [
-		...SonicDisplayElement.observedAttributes,
+		...SonicAnalyserElement.observedAttributes,
 		"frequency-max",
 		"frequency-min",
 		"grid",

package/dist/default/elements/switch.js

@@ -20,20 +20,25 @@ const renderBare = template(`<button class="sonic-switch-position" role="switch"
 const pressCenterZone = .08;
 var SonicSwitch = class extends SonicPositionGroupElement {
 	bare = renderBare();
+	boxProbe = {
+		property: "padding-top",
+		selector: ".sonic-switch-label"
+	};
+	control = renderSwitch();
 	defaultOrientation = "vertical";
-	group = renderSwitch();
-	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
+	sheet = "switch.css";
+	#bat = requireChild(this.control, ".sonic-switch-bat", HTMLSpanElement);
 	#isClickSwallowed = false;
 	claimPress(index, event) {
 		if (this.#isOnBat(event)) return true;
 		const target = this.pressTarget(index);
 		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
-		capturePointer(this.group, event.pointerId);
+		capturePointer(this.control, event.pointerId);
 		this.hold(target, event.pointerId);
 		return true;
 	}
 	connect(signal) {
-		const group = this.group;
+		const group = this.control;
 		super.connect(signal);
 		this.bare.addEventListener("click", (event) => {
 			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
@@ -70,7 +75,7 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 			lift: (press, event) => {
 				this.#isClickSwallowed = true;
 				if (press.hasMoved || this.isDisabled()) return;
-				if (!isUnder(this.group, event.clientX, event.clientY)) return;
+				if (!isUnder(this.control, event.clientX, event.clientY)) return;
 				this.#pressBat(event);
 			},
 			move: (press, event) => {
@@ -101,7 +106,7 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 	#renderThrow(index) {
 		const count = this.positions().length;
 		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
-		this.group.style.setProperty("--_sonic-switch-at", String(at));
+		this.control.style.setProperty("--_sonic-switch-at", String(at));
 	}
 	#sideStep(from, event) {
 		const box = this.#bat.getBoundingClientRect();

package/dist/default/elements/ticker.js

@@ -0,0 +1,313 @@
+import { clamp } from "../lib/math.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicElement } from "./sonic-element.js";
+import { copyNode } from "../lib/copy-node.js";
+import { placeChildren, requireChild, template } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { bindDrag, capturePointer } from "../lib/pointer-drag.js";
+import { readMsProperty } from "../lib/read-ms-property.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { outsideCancelZone } from "../lib/cancel-zone.js";
+import { clippedEnds, fadeWidth, legDeparture, legFades, legPosition, tickerLeg } from "../lib/ticker-leg.js";
+
+//#region src/elements/ticker.ts
+const renderTicker = template(`<span class="sonic-ticker"><span class="sonic-ticker-tape"></span></span>`, HTMLSpanElement);
+const fadePx = 12;
+const holdMs = 2e3;
+const ratePxPerSecond = 40;
+var SonicTicker = class extends SonicElement {
+	static observedAttributes = ["paused"];
+	get cancellable() {
+		return this.hasAttribute("cancellable");
+	}
+	set cancellable(isCancellable) {
+		this.reflect("cancellable", isCancellable);
+	}
+	get paused() {
+		return this.hasAttribute("paused");
+	}
+	set paused(isPaused) {
+		this.reflect("paused", isPaused);
+	}
+	get text() {
+		return this.#originals().map((original) => original.textContent).join("");
+	}
+	set text(text) {
+		for (const original of this.#originals()) original.remove();
+		if (text !== void 0 && text !== "") this.prepend(text);
+	}
+	control = renderTicker();
+	sheet = "ticker.css";
+	sheetToken = "--_sonic-ticker-fade";
+	#fade = fadePx;
+	#heading = 1;
+	#isClickSwallowed = false;
+	#isFocusInside = false;
+	#isHovered = false;
+	#isOffScreen = false;
+	#isPressed = false;
+	#mark;
+	#measured = "";
+	#position = 0;
+	#reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+	#running;
+	#travel = {
+		distance: 0,
+		hold: holdMs,
+		rate: ratePxPerSecond
+	};
+	attributeChangedCallback() {
+		this.render();
+	}
+	connect(signal) {
+		const control = this.control;
+		const tape = requireChild(control, ".sonic-ticker-tape", HTMLSpanElement);
+		const measure = () => {
+			this.#measure(tape);
+		};
+		const observer = new ResizeObserver(measure);
+		const drag = this.#bindDrag(tape, signal);
+		this.upgradeProperties("cancellable", "paused", "text");
+		mirrorChildren(this, {
+			canCopyLinks: true,
+			control,
+			copy: copyNode,
+			place: (copies) => {
+				placeChildren(tape, copies);
+				drag.end();
+				this.#measure(tape, {
+					from: 0,
+					heading: 1
+				});
+			}
+		}, signal);
+		this.render();
+		observer.observe(control);
+		observer.observe(tape);
+		if ("fonts" in document) document.fonts.addEventListener("loadingdone", measure, { signal });
+		this.#bindFocus(tape, signal);
+		this.#bindPauses(signal);
+		this.#reducedMotion.addEventListener("change", () => {
+			this.#run(tape);
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+			this.#stop();
+		}, { once: true });
+	}
+	render() {
+		if (!this.isBound()) return;
+		this.toggleState("paused", this.paused);
+		this.#syncPause();
+	}
+	#bindDrag(tape, signal) {
+		const control = this.control;
+		control.addEventListener("click", (event) => {
+			if (!this.#isClickSwallowed) return;
+			this.#isClickSwallowed = false;
+			event.preventDefault();
+			event.stopPropagation();
+		}, {
+			capture: true,
+			signal
+		});
+		this.getRootNode().addEventListener("dragstart", (event) => {
+			if (this.#isPressed) event.preventDefault();
+		}, { signal });
+		return bindDrag(control, {
+			grab: (event) => {
+				if (this.#travel.distance <= 0) return;
+				return {
+					from: 0,
+					isDragging: false,
+					outside: void 0,
+					thresholdPx: dragThresholdPx(event.pointerType),
+					x: event.clientX
+				};
+			},
+			isCaptureLate: true,
+			move: (held, event) => {
+				if (!held.isDragging) {
+					if (Math.abs(event.clientX - held.x) < held.thresholdPx) return;
+					const { from, heading } = this.#where();
+					held.isDragging = true;
+					held.from = from;
+					held.outside = this.cancellable ? outsideCancelZone(control, "--_sonic-ticker-cancel-zone") : void 0;
+					held.x = event.clientX;
+					capturePointer(control, event.pointerId);
+					this.toggleState("dragging", true);
+					this.#stop();
+					this.#heading = heading;
+				}
+				const isOutside = held.outside?.(event) === true;
+				this.toggleState("cancelling", isOutside);
+				this.#place(tape, isOutside ? held.from : held.from - (event.clientX - held.x));
+			},
+			release: (held) => {
+				if (!held.isDragging) return;
+				this.#isClickSwallowed = true;
+				setTimeout(() => {
+					this.#isClickSwallowed = false;
+				}, 0);
+				this.toggleState("dragging", false);
+				this.toggleState("cancelling", false);
+				this.#run(tape);
+			},
+			toggle: (isPressed) => {
+				this.#isPressed = isPressed;
+				this.#syncPause();
+			}
+		}, signal);
+	}
+	#bindFocus(tape, signal) {
+		const control = this.control;
+		control.addEventListener("focusout", (event) => {
+			if (event.relatedTarget instanceof Node && control.contains(event.relatedTarget)) return;
+			control.scrollLeft = 0;
+			this.#isFocusInside = false;
+			this.#run(tape);
+		}, { signal });
+		control.addEventListener("focusin", (event) => {
+			this.#isFocusInside = true;
+			this.#run(tape);
+			if (event.target instanceof Element) event.target.scrollIntoView({ block: "nearest" });
+		}, { signal });
+	}
+	#bindPauses(signal) {
+		const control = this.control;
+		for (const type of ["pointerenter", "pointerleave"]) control.addEventListener(type, (event) => {
+			if (event.pointerType !== "mouse") return;
+			this.#isHovered = type === "pointerenter";
+			this.#syncPause();
+		}, { signal });
+		for (const type of ["focusin", "focusout"]) this.getRootNode().addEventListener(type, () => {
+			this.#syncPause();
+		}, { signal });
+		const view = new IntersectionObserver((entries) => {
+			this.#isOffScreen = entries.at(-1)?.isIntersecting === false;
+			this.#syncPause();
+		});
+		view.observe(control);
+		signal.addEventListener("abort", () => {
+			view.disconnect();
+		}, { once: true });
+	}
+	#isPaused() {
+		return this.paused || this.#isHovered || this.#isPressed || this.#isOffScreen || this.control.closest(":focus-visible") !== null;
+	}
+	#measure(tape, departure) {
+		const control = this.control;
+		const styles = getComputedStyle(control);
+		const box = control.clientWidth - readPxProperty(styles, "padding-left", 0) - readPxProperty(styles, "padding-right", 0);
+		const travel = {
+			distance: Math.max(0, Math.round(tape.offsetWidth - box)),
+			hold: readMsProperty(styles, "--_sonic-ticker-hold", holdMs),
+			rate: readPxProperty(styles, "--_sonic-ticker-rate", ratePxPerSecond)
+		};
+		const fade = readPxProperty(styles, "--_sonic-ticker-fade", fadePx);
+		const measured = [...Object.values(travel), fade].join(" ");
+		if (!departure && measured === this.#measured) return;
+		const from = departure ?? this.#where();
+		this.#fade = fade;
+		this.#measured = measured;
+		this.#travel = travel;
+		this.toggleState("overflowing", travel.distance > 0);
+		this.#run(tape, from);
+	}
+	#originals() {
+		return [...this.childNodes].filter((child) => child !== this.control);
+	}
+	#place(tape, position) {
+		const { distance } = this.#travel;
+		this.#position = clamp(position, 0, distance);
+		tape.style.translate = this.#position > 0 ? `${String(-this.#position)}px` : "";
+		writeAttribute(this.control, "data-sonic-clipped", clippedEnds(this.#position, distance));
+		this.#writeFades(this.#position);
+	}
+	#run(tape, departure = this.#where()) {
+		const leg = !this.#isFocusInside && !this.#reducedMotion.matches && !this.hasState("dragging") ? tickerLeg(this.#travel, departure) : void 0;
+		this.#stop();
+		this.#heading = departure.heading;
+		if (leg) this.#start(tape, leg);
+		else this.#place(tape, this.#isFocusInside ? 0 : departure.from);
+	}
+	#start(tape, leg) {
+		const animation = tape.animate({ translate: [`${String(-leg.from)}px`, `${String(-leg.to)}px`] }, {
+			delay: leg.hold,
+			duration: leg.duration,
+			fill: "both"
+		});
+		animation.addEventListener("finish", () => {
+			this.#run(tape, {
+				from: leg.to,
+				heading: leg.heading
+			});
+		});
+		this.#running = {
+			animation,
+			fades: [],
+			leg
+		};
+		tape.style.translate = "";
+		writeAttribute(this.control, "data-sonic-clipped", clippedEnds(leg.from, this.#travel.distance));
+		this.#syncPause();
+	}
+	#startFades(leg, elapsed) {
+		const fades = legFades(leg, this.#travel.distance, this.#fade);
+		return ["start", "end"].flatMap((end) => {
+			const { delay, duration, widths } = fades[end];
+			if (duration <= 0 || delay + duration <= elapsed) return [];
+			return this.control.animate({ [`--_sonic-ticker-fade-${end}`]: widths.map((width) => `${String(width)}px`) }, {
+				delay: delay - elapsed,
+				duration,
+				fill: "both"
+			});
+		});
+	}
+	#stop() {
+		const running = this.#running;
+		clearTimeout(this.#mark);
+		if (!running) return;
+		for (const fade of running.fades) fade.cancel();
+		running.animation.cancel();
+		this.#running = void 0;
+	}
+	#syncPause() {
+		const running = this.#running;
+		if (!running) return;
+		const { animation, leg } = running;
+		const elapsed = Number(animation.currentTime);
+		clearTimeout(this.#mark);
+		for (const fade of running.fades) fade.cancel();
+		running.fades = [];
+		this.#writeFades(legPosition(leg, elapsed));
+		if (elapsed >= leg.hold) writeAttribute(this.control, "data-sonic-clipped", "start end");
+		if (this.#isPaused()) {
+			animation.pause();
+			return;
+		}
+		if (animation.playState === "paused") animation.play();
+		running.fades = this.#startFades(leg, elapsed);
+		if (elapsed >= leg.hold) return;
+		this.#mark = setTimeout(() => {
+			writeAttribute(this.control, "data-sonic-clipped", "start end");
+		}, leg.hold - elapsed);
+	}
+	#where() {
+		const running = this.#running;
+		if (!running) return {
+			from: this.#position,
+			heading: this.#heading
+		};
+		return legDeparture(running.leg, Number(running.animation.currentTime));
+	}
+	#writeFades(position) {
+		const { style } = this.control;
+		style.setProperty("--_sonic-ticker-fade-start", `${String(fadeWidth(position, this.#fade))}px`);
+		style.setProperty("--_sonic-ticker-fade-end", `${String(fadeWidth(this.#travel.distance - position, this.#fade))}px`);
+	}
+};
+
+//#endregion
+export { SonicTicker };

package/dist/default/elements/toggle.js

@@ -22,12 +22,18 @@ const renderBare = template(`<button class="sonic-toggle-position" role="switch"
 const pressTolerance = 2;
 var SonicToggle = class extends SonicPositionGroupElement {
 	bare = renderBare();
+	boxProbe = {
+		property: "margin-top",
+		ratio: "--_sonic-toggle-gap-ratio",
+		selector: ".sonic-toggle-cap"
+	};
+	control = renderToggle();
 	defaultOrientation = "horizontal";
-	group = renderToggle();
-	#cap = requireChild(this.group, ".sonic-toggle-cap", HTMLSpanElement);
+	sheet = "toggle.css";
+	#cap = requireChild(this.control, ".sonic-toggle-cap", HTMLSpanElement);
 	#draggedTo;
 	#hasWarnedOfLegends = false;
-	#well = requireChild(this.group, ".sonic-toggle-well", HTMLSpanElement);
+	#well = requireChild(this.control, ".sonic-toggle-well", HTMLSpanElement);
 	claimPress() {
 		return true;
 	}
@@ -49,7 +55,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 	}
 	render() {
 		if (!this.isBound()) return;
-		this.group.style.setProperty("--_sonic-toggle-count", String(this.positions().length));
+		this.control.style.setProperty("--_sonic-toggle-count", String(this.positions().length));
 		this.#placeCap(this.#draggedTo ?? this.#restingAt());
 		super.render();
 		for (const [index, option] of this.options().entries()) option.style.setProperty("--_sonic-toggle-index", String(index));
@@ -58,11 +64,11 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		return renderPosition();
 	}
 	#bindCap(signal) {
-		bindDrag(this.group, {
+		bindDrag(this.control, {
 			grab: (event) => this.#grab(event),
 			lift: (drag, event) => {
 				if (!drag.isPress || drag.isHolding || this.isDisabled()) return;
-				if (!isUnder(this.group, event.clientX, event.clientY)) return;
+				if (!isUnder(this.control, event.clientX, event.clientY)) return;
 				this.#press(drag.position);
 			},
 			move: (drag, event) => {
@@ -85,7 +91,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 	}
 	#checkLegends() {}
 	#fixedLegend() {
-		return [...this.children].find((child) => child !== this.group && !super.isMirrored(child));
+		return [...this.children].find((child) => child !== this.control && !super.isMirrored(child));
 	}
 	#grab(event) {
 		const position = this.pressedIndex(event.target);
@@ -113,7 +119,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		return true;
 	}
 	#placeCap(at) {
-		this.group.style.setProperty("--_sonic-toggle-at", String(at));
+		this.control.style.setProperty("--_sonic-toggle-at", String(at));
 	}
 	#press(position) {
 		const target = this.pressTarget(position);

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

@@ -251,7 +251,8 @@ var SonicValueElement = class extends SonicFormElement {
 	abandonHold() {
 		this.#gestures?.abandon();
 	}
-	bindGestures(control, signal, grab) {
+	bindGestures(signal, grab) {
+		const control = this.control;
 		const bubble = control.querySelector("[popover]");
 		if (bubble) this.#readout = {
 			anchor: control,
@@ -316,6 +317,9 @@ var SonicValueElement = class extends SonicFormElement {
 	controlRole() {
 		return "slider";
 	}
+	focusTarget() {
+		return this.control;
+	}
 	input(next) {
 		const previous = this.#model.value;
 		if (this.#model.input(next)) this.render();
@@ -374,8 +378,12 @@ var SonicValueElement = class extends SonicFormElement {
 	}
 	springTarget() {}
 	tapTarget() {}
-	travelPx(control, property) {
-		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
+	upwardAxis(travelProperty) {
+		const styles = getComputedStyle(this.control);
+		return {
+			position: (event) => -event.clientY,
+			travelPx: Math.max(1, readPxProperty(styles, travelProperty, fallbackTravelPx))
+		};
 	}
 	#entryText() {
 		const value = this.#model.value;

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

@@ -1,5 +1,5 @@
 import { SonicValueElement } from "./value-element.js";
-import { bindSurface } from "../lib/canvas-surface.js";
+import { bindControlSurface } from "../lib/canvas-surface.js";
 import { formatClock, parseClock } from "../lib/clock.js";
 import { spokenDuration } from "../lib/spoken-duration.js";
 
@@ -32,6 +32,10 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.renderMarkers();
 		this.render();
 	}
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
 	notation = {
 		format: formatClock,
 		parse: parseClock,
@@ -65,15 +69,13 @@ var SonicWaveElement = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const control = this.control;
-		this.keepControl(control, signal);
+		this.keepControl(signal);
 		this.renderEmpty();
-		this.#surface = bindSurface({
+		this.#surface = bindControlSurface({
 			canvas: this.canvas,
 			colours: this.colours,
-			fill: {
-				control,
-				sizeProperty: this.sizeProperty
-			},
+			control,
+			fill: this.fill,
 			lengths: this.lengths,
 			numbers: this.numbers,
 			paint: (context, frame) => {
@@ -82,10 +84,10 @@ var SonicWaveElement = class extends SonicValueElement {
 			resize: () => {
 				this.renderMarkers();
 			},
-			signal
+			signal,
+			sizeProperty: this.sizeProperty
 		});
 		this.render();
-		this.#surface.setFill(this.fill);
 	}
 	markerList() {
 		return this.#markers;
@@ -113,9 +115,6 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.#current = current;
 		this.dispatchEvent(new Event("sonic-marker", { bubbles: true }));
 	}
-	stateTarget() {
-		return this.control;
-	}
 	surface() {
 		return this.#surface;
 	}

package/dist/default/elements/waveform.js

@@ -231,7 +231,7 @@ var SonicWaveform = class extends SonicWaveElement {
 			}
 		};
 		this.#zoomGesture = bindZoom(this.control, zoomTarget, signal);
-		this.bindGestures(this.control, signal, () => this.#grab());
+		this.bindGestures(signal, () => this.#grab());
 		bindZoomKeys(this.control, zoomTarget, signal);
 		if (!("fonts" in document)) return;
 		document.fonts.addEventListener("loadingdone", () => {
@@ -243,9 +243,6 @@ var SonicWaveform = class extends SonicWaveElement {
 		surface?.requestFrame();
 		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
-	focusTarget() {
-		return this.control;
-	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;
 	}