@xsynaptic/sonic-ui 0.26.0 → 0.28.0

package/dist/default/elements/wavestrip.js

@@ -1,8 +1,8 @@
 import { clamp, clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { readPxProperty } from "../lib/read-px-property.js";
 import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
+import { outsideCancelZone } from "../lib/cancel-zone.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
 import { RegionLayer } from "./region-layer.js";
@@ -22,7 +22,6 @@ const lengths = {
 	pitch: "--_sonic-wavestrip-bar-pitch",
 	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
 };
-const cancelZonePx = 48;
 const renderWavestrip = template(`
 		<div class="sonic-wavestrip">
 			<canvas class="sonic-wavestrip-canvas" role="slider" tabindex="0"></canvas>
@@ -157,7 +156,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 			},
 			valueAt: (event) => this.#markerStartAt(event, this.#axis()) ?? this.mapping().snap(this.valueFromPoint(event.clientX, event.clientY))
 		});
-		this.bindGestures(control, signal, (event) => this.#grab(event));
+		this.bindGestures(signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
@@ -256,9 +255,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	#outside() {
 		if (!this.cancellable) return void 0;
-		const box = this.control.getBoundingClientRect();
-		const zone = readPxProperty(getComputedStyle(this.control), "--_sonic-cancel-zone", cancelZonePx);
-		return (event) => event.clientY < box.top - zone || event.clientY > box.bottom + zone;
+		return outsideCancelZone(this.control, "--_sonic-cancel-zone");
 	}
 	#placeReadout() {
 		const at = this.mapping().proportionOf(this.readoutValue());

package/dist/default/elements/xy.js

@@ -3,10 +3,7 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { Readout } from "./readout.js";
-import { ReadoutClaim } from "./readout-claim.js";
-import { createDoublePress } from "../lib/double-press.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
-import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { resetKeys } from "../lib/value-mapping.js";
 import { createValueModel } from "../lib/value-model.js";
 import { pointerPosition } from "../lib/field.js";
@@ -203,26 +200,26 @@ var SonicXy = class extends SonicFormElement {
 	set yTaper(curve) {
 		this.reflect("y-taper", curve);
 	}
-	#claim = new ReadoutClaim(() => {
-		this.#renderReadout();
-	});
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
+	control = renderXy();
+	sheet = "xy.css";
 	#currentAxis = "x";
-	#doublePress = createDoublePress();
-	#xy = renderXy();
-	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
+	#field = requireChild(this.control, ".sonic-xy-field", HTMLDivElement);
 	#formatValue;
 	#gesture;
-	#isRevealed = false;
 	#models = {
 		x: createValueModel(() => this.#spec("x")),
 		y: createValueModel(() => this.#spec("y"))
 	};
 	#parts = {
-		x: requireChild(this.#xy, "[data-sonic-axis=\"x\"]", HTMLDivElement),
-		y: requireChild(this.#xy, "[data-sonic-axis=\"y\"]", HTMLDivElement)
+		x: requireChild(this.control, "[data-sonic-axis=\"x\"]", HTMLDivElement),
+		y: requireChild(this.control, "[data-sonic-axis=\"y\"]", HTMLDivElement)
 	};
-	#puck = requireChild(this.#xy, ".sonic-xy-puck", HTMLDivElement);
-	#readout = new Readout(requireChild(this.#xy, ".sonic-xy-readout", HTMLDivElement));
+	#puck = requireChild(this.control, ".sonic-xy-puck", HTMLDivElement);
+	#readout = new Readout(requireChild(this.control, ".sonic-xy-readout", HTMLDivElement));
 	attributeChangedCallback(name) {
 		if ((name === "x" || name === "y") && this.#gesture?.current()) return;
 		if (name === "disabled" && this.isDisabled()) this.#gesture?.end();
@@ -237,8 +234,8 @@ var SonicXy = class extends SonicFormElement {
 		this.#respec(...axes);
 	}
 	connect(signal) {
-		const xy = this.#xy;
-		this.keepControl(xy, signal);
+		const xy = this.control;
+		this.keepControl(signal);
 		this.render();
 		this.#bindPointer(xy, signal);
 		this.#bindKeys(xy, signal);
@@ -248,7 +245,7 @@ var SonicXy = class extends SonicFormElement {
 	}
 	render() {
 		if (!this.isBound()) return;
-		const { style } = this.#xy;
+		const { style } = this.control;
 		for (const axis of axes) {
 			const model = this.#models[axis];
 			const mapping = model.mapping();
@@ -265,9 +262,6 @@ var SonicXy = class extends SonicFormElement {
 		this.x = x;
 		this.y = y;
 	}
-	stateTarget() {
-		return this.#xy;
-	}
 	#axisText(axis) {
 		const { value } = this.#models[axis];
 		return `${this.getAttribute(`${axis}-label`) ?? axis.toUpperCase()} ${this.#formatValue?.(value, axis) ?? String(value)}`;
@@ -278,49 +272,47 @@ var SonicXy = class extends SonicFormElement {
 			const move = keyMoves.get(event.key);
 			if (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;
 			event.preventDefault();
-			this.#claim.reveal("keys");
-			this.#renderReadout();
+			this.#gesture?.revealKeys();
 			if (move) this.#keyTo(...move);
 			else this.#reset();
 		}, { signal });
 		xy.addEventListener("focusout", (event) => {
 			if (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;
-			if (this.#claim.conceal("keys")) this.#renderReadout();
+			this.#gesture?.concealKeys();
 		}, { signal });
 		signal.addEventListener("abort", () => {
-			if (this.#claim.conceal("keys")) this.#renderReadout();
+			this.#gesture?.concealKeys();
 		}, { once: true });
 	}
 	#bindPointer(xy, signal) {
 		xy.addEventListener("mousedown", (event) => {
 			event.preventDefault();
 		}, { signal });
-		xy.addEventListener("pointercancel", () => {
-			this.#doublePress.forget();
-		}, { signal });
 		this.#gesture = bindFieldGesture(xy, {
-			claim: this.#claim,
+			element: this,
 			grab: (event) => {
-				if (this.isDisabled() || isMenuPress(event)) return;
+				if (this.isDisabled()) return;
 				focusByPointer(this.focusTarget());
-				if (!isResetPress(event)) {
-					this.toggleState("dragging", true);
-					return this.#grab(event);
-				}
-				this.#reset();
+				this.toggleState("dragging", true);
+				return this.#grab(event);
 			},
 			input: (_hold, next) => {
-				if (!this.#input(next)) this.#renderReadout();
-			},
-			lift: (_hold, event) => {
-				if (!this.#doublePress.press(event) || this.doublePress !== "reset") return;
-				this.#reset();
+				this.#input(next);
 			},
 			release: (_hold, moved) => {
 				if (moved.length > 0) this.dispatchEvent(new Event("change", { bubbles: true }));
 			},
-			toggle: (isDragging) => {
-				this.toggleState("dragging", isDragging);
+			renderReadout: () => {
+				this.#renderReadout();
+			},
+			reset: () => {
+				if (this.isDisabled()) return;
+				focusByPointer(this.focusTarget());
+				this.#reset();
+			},
+			resetsOnDoublePress: () => this.doublePress === "reset",
+			toggle: (state, isOn) => {
+				this.toggleState(state, isOn);
 			}
 		}, signal);
 	}
@@ -411,16 +403,11 @@ var SonicXy = class extends SonicFormElement {
 		this.writeFormFields([["x", x], ["y", y]], `${String(x)},${String(y)}`);
 	}
 	#renderReadout() {
-		const { isRevealed } = this.#claim;
 		this.#readout.show({
 			anchor: this.#puck,
-			isOpen: isRevealed && this.readout,
+			isOpen: this.#gesture?.isRevealed() === true && this.readout,
 			text: this.#valueText("x")
 		});
-		if (isRevealed === this.#isRevealed) return;
-		this.#isRevealed = isRevealed;
-		this.toggleState("revealed", isRevealed);
-		this.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
 	}
 	#reset() {
 		this.#commit({

package/dist/default/index.js

@@ -10,6 +10,7 @@ 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 { SonicTicker } from "./elements/ticker.js";
 import { SonicToggle } from "./elements/toggle.js";
 import { formatClock, parseClock } from "./lib/clock.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -18,4 +19,4 @@ 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, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicTicker, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

package/dist/default/lib/cancel-zone.js

@@ -0,0 +1,12 @@
+import { readPxProperty } from "./read-px-property.js";
+
+//#region src/lib/cancel-zone.ts
+const cancelZonePx = 48;
+function outsideCancelZone(control, property) {
+	const box = control.getBoundingClientRect();
+	const zone = readPxProperty(getComputedStyle(control), property, cancelZonePx);
+	return (event) => event.clientY < box.top - zone || event.clientY > box.bottom + zone;
+}
+
+//#endregion
+export { outsideCancelZone };

package/dist/default/lib/canvas-surface.js

@@ -254,6 +254,18 @@ var CanvasSurface = class {
 function bindSurface(options) {
 	return new CanvasSurface(options);
 }
+function bindControlSurface(options) {
+	const { control, fill, sizeProperty, ...surfaceOptions } = options;
+	const surface = bindSurface({
+		...surfaceOptions,
+		fill: {
+			control,
+			sizeProperty
+		}
+	});
+	surface.setFill(fill);
+	return surface;
+}
 
 //#endregion
-export { bindSurface };
+export { bindControlSurface, bindSurface };

package/dist/default/lib/distribute.js

@@ -187,8 +187,7 @@ function close(members, rule, held) {
 	const { landing, move, mover } = held;
 	const { index } = move;
 	const landed = landing.values[index] ?? mover.value;
-	const targets = moverTargets(members, landing, index);
-	return nearest(targets.flatMap((target) => {
+	return nearest(moverTargets(members, landing, index).flatMap((target) => {
 		const attempt = spread(members, rule, {
 			index,
 			target
@@ -197,7 +196,7 @@ function close(members, rule, held) {
 	}), move, {
 		landed,
 		start: mover.value
-	}) ?? landing.values.with(index, targets[0] ?? landed);
+	}) ?? members.map(({ value }) => value);
 }
 function distribute(members, rule, move) {
 	const landing = spread(members, rule, move);

package/dist/default/lib/mirror-children.js

@@ -14,7 +14,7 @@ function isCopiedChange(host, record, { control, isCopied }) {
 	if (child === void 0) return false;
 	return isCopied(child) || record.type === "attributes" && record.target === child;
 }
-function mirrorChildren(host, { control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
+function mirrorChildren(host, { canCopyLinks = false, control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
 	const slots = hostSlots.get(host) ?? attachSlots(host);
 	let copies = /* @__PURE__ */ new Map();
 	hostSlots.set(host, slots);

package/dist/default/lib/pointer-drag.js

@@ -5,6 +5,7 @@ function capturePointer(target, pointerId) {
 	} catch {}
 }
 function bindDrag(target, handlers, signal) {
+	const isCaptureLate = handlers.isCaptureLate === true;
 	let held;
 	const end = () => {
 		if (!held) return;
@@ -28,14 +29,19 @@ function bindDrag(target, handlers, signal) {
 			pointerId: event.pointerId
 		};
 		handlers.toggle?.(true);
-		capturePointer(target, event.pointerId);
+		if (!isCaptureLate) capturePointer(target, event.pointerId);
 	}, { signal });
 	whileHeld("pointermove", handlers.move);
 	whileHeld("pointercancel", (drag) => {
 		handlers.cancel?.(drag);
 		end();
 	});
-	whileHeld("lostpointercapture", end);
+	whileHeld("lostpointercapture", (_drag, event) => {
+		if (!isCaptureLate || event.target === target) end();
+	});
+	if (isCaptureLate) whileHeld("pointerleave", (_drag, event) => {
+		if (!target.hasPointerCapture(event.pointerId)) end();
+	});
 	whileHeld("pointerup", (drag, event) => {
 		end();
 		handlers.lift?.(drag, event);

package/dist/default/lib/render.js

@@ -1,7 +1,7 @@
 //#region src/lib/render.ts
 function requireChild(root, selector, child) {
 	const found = root.querySelector(selector);
-	if (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);
+	if (!(found instanceof child)) throw new TypeError(`A template is missing its ${selector}`);
 	return found;
 }
 function template(html, root) {
@@ -9,7 +9,7 @@ function template(html, root) {
 	parsed.innerHTML = html;
 	return () => {
 		const clone = document.importNode(parsed.content, true).firstElementChild;
-		if (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);
+		if (!(clone instanceof root)) throw new TypeError(`A template's root is not a ${root.name}`);
 		return clone;
 	};
 }

package/dist/default/lib/ticker-leg.js

@@ -0,0 +1,54 @@
+import { clamp, clampProportion } from "./math.js";
+
+//#region src/lib/ticker-leg.ts
+const fadeApproach = 3;
+function tickerLeg({ distance, hold: fullHold, rate }, { from, heading, hold = fullHold }) {
+	if (!(distance > 0) || !(rate > 0)) return void 0;
+	const start = clamp(from, 0, distance);
+	const isOutbound = start === (heading > 0 ? distance : 0) ? heading < 0 : heading > 0;
+	const to = isOutbound ? distance : 0;
+	return {
+		duration: Math.abs(to - start) / rate * 1e3,
+		from: start,
+		heading: isOutbound ? 1 : -1,
+		hold: Math.max(0, hold),
+		to
+	};
+}
+function legPosition(leg, elapsed) {
+	return leg.from + (leg.to - leg.from) * clampProportion((elapsed - leg.hold) / leg.duration);
+}
+function legDeparture(leg, elapsed) {
+	return {
+		from: legPosition(leg, elapsed),
+		heading: leg.heading,
+		hold: Math.max(0, leg.hold - elapsed)
+	};
+}
+function clippedEnds(position, distance) {
+	const ends = [...position > 0 ? ["start"] : [], ...position < distance ? ["end"] : []];
+	return ends.length > 0 ? ends.join(" ") : void 0;
+}
+function fadeWidth(past, fade) {
+	return clamp(past / fadeApproach, 0, Math.max(0, fade));
+}
+function legFade(leg, [pastFrom, pastTo], fade) {
+	const reach = Math.max(0, fade) * fadeApproach;
+	const msPerPx = leg.duration / Math.abs(leg.to - leg.from);
+	const from = Math.min(pastFrom, reach);
+	const to = Math.min(pastTo, reach);
+	return {
+		delay: leg.hold + (pastFrom - from) * msPerPx,
+		duration: Math.abs(to - from) * msPerPx,
+		widths: [from / fadeApproach, to / fadeApproach]
+	};
+}
+function legFades(leg, distance, fade) {
+	return {
+		end: legFade(leg, [distance - leg.from, distance - leg.to], fade),
+		start: legFade(leg, [leg.from, leg.to], fade)
+	};
+}
+
+//#endregion
+export { clippedEnds, fadeWidth, legDeparture, legFades, legPosition, tickerLeg };

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

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

package/dist/dev/define/ticker.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.js","names":[],"sources":["../../../src/define/ticker.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicTicker } from '#elements/ticker.ts';\n\ndefineOnce('sonic-ticker', SonicTicker);\n\nexport type { SonicTicker } from '#elements/ticker.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/dev/define.d.ts

@@ -20,6 +20,8 @@ import { SonicSplit } from "./elements/split.js";
 import "./define/split.js";
 import { SonicSwitch } from "./elements/switch.js";
 import "./define/switch.js";
+import { SonicTicker } from "./elements/ticker.js";
+import "./define/ticker.js";
 import { SonicToggle } from "./elements/toggle.js";
 import "./define/toggle.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -28,4 +30,4 @@ import { SonicWavestrip } from "./elements/wavestrip.js";
 import "./define/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";
 import "./define/xy.js";
-export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };
+export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicTicker, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };

package/dist/dev/define.js

@@ -9,6 +9,7 @@ import "./define/slider.js";
 import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
+import "./define/ticker.js";
 import "./define/toggle.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";

package/dist/dev/elements/{display-element.d.ts → analyser-element.d.ts}

@@ -1,8 +1,8 @@
 import { SonicElement } from "./sonic-element.js";
 import { Decibels } from "../lib/units.js";
 import { Surface, SurfaceFrame } from "../lib/canvas-surface.js";
-//#region src/elements/display-element.d.ts
-export declare abstract class SonicDisplayElement<Colour extends string, Numeric extends string = never> extends SonicElement {
+//#region src/elements/analyser-element.d.ts
+export declare abstract class SonicAnalyserElement<Colour extends string, Numeric extends string = never> extends SonicElement {
   #private;
   static readonly observedAttributes: string[];
   get analyser(): AnalyserNode | undefined;
@@ -31,4 +31,4 @@ export declare abstract class SonicDisplayElement<Colour extends string, Numeric
   protected surface(): Surface | undefined;
 }
 //#endregion
-//# sourceMappingURL=display-element.d.ts.map
+//# sourceMappingURL=analyser-element.d.ts.map

package/dist/dev/elements/{display-element.js → analyser-element.js}

@@ -1,8 +1,8 @@
 import { SonicElement } from "./sonic-element.js";
-import { bindSurface } from "../lib/canvas-surface.js";
+import { bindControlSurface } from "../lib/canvas-surface.js";
 
-//#region src/elements/display-element.ts
-var SonicDisplayElement = class extends SonicElement {
+//#region src/elements/analyser-element.ts
+var SonicAnalyserElement = class extends SonicElement {
 	static observedAttributes = [
 		...SonicElement.observedAttributes,
 		"fill",
@@ -55,22 +55,19 @@ var SonicDisplayElement = class extends SonicElement {
 	}
 	connect(signal) {
 		const control = this.control;
-		this.keepControl(control, signal);
-		this.#surface = bindSurface({
+		this.keepControl(signal);
+		this.#surface = bindControlSurface({
 			canvas: this.canvas,
 			colours: this.colours,
-			fill: {
-				control,
-				sizeProperty: this.sizeProperty
-			},
+			control,
+			fill: this.fill,
 			numbers: this.numbers,
 			paint: (context, frame) => {
 				this.#paint(context, frame);
 			},
-			signal
+			signal,
+			sizeProperty: this.sizeProperty
 		});
-		this.checkStyles(control, this.sheet);
-		this.#surface.setFill(this.fill);
 	}
 	surface() {
 		return this.#surface;
@@ -88,5 +85,5 @@ var SonicDisplayElement = class extends SonicElement {
 };
 
 //#endregion
-export { SonicDisplayElement };
-//# sourceMappingURL=display-element.js.map
+export { SonicAnalyserElement };
+//# sourceMappingURL=analyser-element.js.map

package/dist/dev/elements/analyser-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyser-element.js","names":[],"sources":["../../../src/elements/analyser-element.ts"],"sourcesContent":["import type { Surface, SurfaceFrame } from '#lib/canvas-surface.ts';\nimport type { Decibels } from '#lib/units.ts';\n\nimport { SonicElement } from '#elements/sonic-element.ts';\nimport { bindControlSurface } from '#lib/canvas-surface.ts';\n\nexport abstract class SonicAnalyserElement<\n\tColour extends string,\n\tNumeric extends string = never,\n> extends SonicElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicElement.observedAttributes,\n\t\t'fill',\n\t\t'max',\n\t\t'min',\n\t];\n\n\tget analyser(): AnalyserNode | undefined {\n\t\treturn this.#analyser;\n\t}\n\n\tset analyser(node: AnalyserNode | null | undefined) {\n\t\tthis.#analyser = node ?? undefined;\n\t\tthis.#surface?.requestFrame();\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget fill(): boolean {\n\t\treturn this.hasAttribute('fill');\n\t}\n\n\tset fill(isFilling: boolean) {\n\t\tthis.reflect('fill', isFilling);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget max(): Decibels {\n\t\treturn this.numberAttribute('max', 0);\n\t}\n\n\tset max(decibels: number | undefined) {\n\t\tthis.reflect('max', decibels);\n\t}\n\n\tget min(): Decibels {\n\t\treturn this.numberAttribute('min', -90);\n\t}\n\n\tset min(decibels: number | undefined) {\n\t\tthis.reflect('min', decibels);\n\t}\n\n\tprotected abstract readonly canvas: HTMLCanvasElement;\n\n\tprotected abstract readonly colours: Record<Colour, `--_sonic-${string}`>;\n\n\tprotected abstract override readonly control: HTMLElement;\n\n\tprotected abstract readonly numbers: Record<Numeric, `--_sonic-${string}`>;\n\n\tprotected abstract override readonly sheet: string;\n\n\tprotected abstract readonly sizeProperty: `--_sonic-${string}`;\n\n\t#analyser: AnalyserNode | undefined;\n\n\t#buffer = new Float32Array(0);\n\n\t#surface: Surface | undefined;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'fill') this.#surface?.setFill(this.fill);\n\t\tthis.#surface?.invalidate();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('analyser', 'fill', 'max', 'min');\n\t\tsuper.connectedCallback();\n\t}\n\n\t/** One level per bin, as `AnalyserNode.getFloatFrequencyData` fills it */\n\tpush(decibels: Float32Array): void {\n\t\tthis.receive(decibels);\n\t\tthis.#surface?.requestFrame();\n\t}\n\n\trepaint(): void {\n\t\tthis.#surface?.rebuild();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\n\t\tthis.keepControl(signal);\n\t\tthis.#surface = bindControlSurface({\n\t\t\tcanvas: this.canvas,\n\t\t\tcolours: this.colours,\n\t\t\tcontrol,\n\t\t\tfill: this.fill,\n\t\t\tnumbers: this.numbers,\n\t\t\tpaint: (context, frame) => {\n\t\t\t\tthis.#paint(context, frame);\n\t\t\t},\n\t\t\tsignal,\n\t\t\tsizeProperty: this.sizeProperty,\n\t\t});\n\t}\n\n\tprotected abstract paint(\n\t\tcontext: CanvasRenderingContext2D,\n\t\tframe: SurfaceFrame<Colour, never, Numeric>,\n\t): void;\n\n\tprotected abstract pull(analyser: AnalyserNode, buffer: Float32Array<ArrayBuffer>): void;\n\n\tprotected abstract receive(frame: Float32Array): void;\n\n\tprotected surface(): Surface | undefined {\n\t\treturn this.#surface;\n\t}\n\n\t// The node never signals that sound came back, so every paint pulls\n\t#paint(context: CanvasRenderingContext2D, frame: SurfaceFrame<Colour, never, Numeric>): void {\n\t\tconst analyser = this.isDisabled() ? undefined : this.#analyser;\n\n\t\tif (analyser) {\n\t\t\tif (this.#buffer.length !== analyser.frequencyBinCount) {\n\t\t\t\tthis.#buffer = new Float32Array(analyser.frequencyBinCount);\n\t\t\t}\n\t\t\tthis.pull(analyser, this.#buffer);\n\t\t\tthis.receive(this.#buffer);\n\t\t}\n\t\tthis.paint(context, frame);\n\t\tif (analyser) this.#surface?.requestFrame();\n\t}\n}\n"],"mappings":";;;;AAMA,IAAsB,uBAAtB,cAGU,aAAa;CACtB,OAAyB,qBAAqB;EAC7C,GAAG,aAAa;EAChB;EACA;EACA;CACD;CAEA,IAAI,WAAqC;EACxC,OAAO,KAAK;CACb;CAEA,IAAI,SAAS,MAAuC;EACnD,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU,aAAa;CAC7B;CAGA,IAAI,OAAgB;EACnB,OAAO,KAAK,aAAa,MAAM;CAChC;CAEA,IAAI,KAAK,WAAoB;EAC5B,KAAK,QAAQ,QAAQ,SAAS;CAC/B;CAGA,IAAI,MAAgB;EACnB,OAAO,KAAK,gBAAgB,OAAO,CAAC;CACrC;CAEA,IAAI,IAAI,UAA8B;EACrC,KAAK,QAAQ,OAAO,QAAQ;CAC7B;CAEA,IAAI,MAAgB;EACnB,OAAO,KAAK,gBAAgB,OAAO,GAAG;CACvC;CAEA,IAAI,IAAI,UAA8B;EACrC,KAAK,QAAQ,OAAO,QAAQ;CAC7B;CAcA;CAEA,0BAAU,IAAI,aAAa,CAAC;CAE5B;CAEA,yBAAyB,MAAoB;EAC5C,IAAI,SAAS,QAAQ,KAAK,UAAU,QAAQ,KAAK,IAAI;EACrD,KAAK,UAAU,WAAW;CAC3B;CAEA,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,YAAY,QAAQ,OAAO,KAAK;EACvD,MAAM,kBAAkB;CACzB;;CAGA,KAAK,UAA8B;EAClC,KAAK,QAAQ,QAAQ;EACrB,KAAK,UAAU,aAAa;CAC7B;CAEA,UAAgB;EACf,KAAK,UAAU,QAAQ;CACxB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,UAAU,KAAK;EAErB,KAAK,YAAY,MAAM;EACvB,KAAK,WAAW,mBAAmB;GAClC,QAAQ,KAAK;GACb,SAAS,KAAK;GACd;GACA,MAAM,KAAK;GACX,SAAS,KAAK;GACd,QAAQ,SAAS,UAAU;IAC1B,KAAK,OAAO,SAAS,KAAK;GAC3B;GACA;GACA,cAAc,KAAK;EACpB,CAAC;CACF;CAWA,AAAU,UAA+B;EACxC,OAAO,KAAK;CACb;CAGA,OAAO,SAAmC,OAAmD;EAC5F,MAAM,WAAW,KAAK,WAAW,IAAI,SAAY,KAAK;EAEtD,IAAI,UAAU;GACb,IAAI,KAAK,QAAQ,WAAW,SAAS,mBACpC,KAAK,UAAU,IAAI,aAAa,SAAS,iBAAiB;GAE3D,KAAK,KAAK,UAAU,KAAK,OAAO;GAChC,KAAK,QAAQ,KAAK,OAAO;EAC1B;EACA,KAAK,MAAM,SAAS,KAAK;EACzB,IAAI,UAAU,KAAK,UAAU,aAAa;CAC3C;AACD"}

package/dist/dev/elements/button.d.ts

@@ -1,3 +1,4 @@
+import { BoxProbe } from "../lib/check-styles.js";
 import { SonicFormElement } from "./form-element.js";
 //#region src/elements/button.d.ts
 declare global {
@@ -28,6 +29,9 @@ export declare class SonicButton extends SonicFormElement {
   /** Submitted with the form while a latching button is pressed */
   get value(): string;
   set value(value: string | undefined);
+  protected readonly boxProbe: BoxProbe;
+  protected readonly control: HTMLButtonElement;
+  protected readonly sheet = "button.css";
   attributeChangedCallback(name: string): void;
   formResetCallback(): void;
   protected activate(): void;
@@ -35,7 +39,6 @@ export declare class SonicButton extends SonicFormElement {
   protected focusTarget(): HTMLElement;
   protected render(): void;
   protected restoreState(state: string): void;
-  protected stateTarget(): HTMLElement;
 }
 //#endregion
 //# sourceMappingURL=button.d.ts.map

package/dist/dev/elements/button.js

@@ -88,7 +88,13 @@ var SonicButton = class extends SonicFormElement {
 	set value(value) {
 		this.reflect("value", value);
 	}
-	#button = renderButton();
+	boxProbe = {
+		property: "padding-inline-start",
+		ratio: "--_sonic-button-padding-ratio",
+		selector: ".sonic-button-cap > :not(svg, .sonic-led)"
+	};
+	control = renderButton();
+	sheet = "button.css";
 	#holding;
 	#isDirty = false;
 	#pressed = false;
@@ -101,10 +107,10 @@ var SonicButton = class extends SonicFormElement {
 		this.attributeChangedCallback("pressed");
 	}
 	activate() {
-		this.#button.click();
+		this.control.click();
 	}
 	connect(signal) {
-		const button = this.#button;
+		const button = this.control;
 		const cap = requireChild(button, ".sonic-button-cap", HTMLSpanElement);
 		this.upgradeProperties("armed", "busy", "defaultPressed", "legend", "momentary", "softDisabled", "latching", "pressed", "value");
 		mirrorChildren(this, {
@@ -116,11 +122,6 @@ var SonicButton = class extends SonicFormElement {
 			}
 		}, signal);
 		this.render();
-		this.checkStyles(button, "button.css", {
-			property: "padding-inline-start",
-			ratio: "--_sonic-button-padding-ratio",
-			selector: ".sonic-button-cap > :not(svg, .sonic-led)"
-		});
 		button.addEventListener("click", (event) => {
 			if (this.#isSoftDisabled()) {
 				event.preventDefault();
@@ -135,11 +136,11 @@ var SonicButton = class extends SonicFormElement {
 		bindKeyPress(button, signal);
 	}
 	focusTarget() {
-		return this.#button;
+		return this.control;
 	}
 	render() {
 		if (!this.isBound()) return;
-		const button = this.#button;
+		const button = this.control;
 		writeAttribute(button, "disabled", this.isDisabled() ? "" : void 0);
 		writeAttribute(button, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
 		writeAttribute(button, "aria-busy", this.busy ? "true" : void 0);
@@ -154,9 +155,6 @@ var SonicButton = class extends SonicFormElement {
 	restoreState(state) {
 		if (this.latching) this.pressed = state === "true";
 	}
-	stateTarget() {
-		return this.#button;
-	}
 	#bindMomentary(button, signal) {
 		const holding = bindHold(button, {
 			canHold: () => !this.isDisabled() && !this.#isSoftDisabled(),
@@ -195,7 +193,7 @@ var SonicButton = class extends SonicFormElement {
 	}
 	#showLegend() {
 		const legend = this.legend;
-		for (const part of this.#button.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
+		for (const part of this.control.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
 			const when = part.dataset.sonicWhen ?? "";
 			part.toggleAttribute("data-sonic-hidden", !pressWhens.has(when) && when !== legend);
 		}