@xsynaptic/sonic-ui 0.26.0 → 0.27.0

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 } = 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/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;
 	}

package/dist/default/elements/wavestrip.js

@@ -157,7 +157,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();

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/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/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/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