@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/dist/default/elements/wavestrip.js

@@ -1,10 +1,11 @@
-import { clampProportion } from "../lib/math.js";
+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 { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
+import { RegionLayer } from "./region-layer.js";
 import { stripBars, stripGroove, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
@@ -23,9 +24,10 @@ const lengths = {
 };
 const cancelZonePx = 48;
 const renderWavestrip = template(`
-		<div class="sonic-wavestrip" role="slider" tabindex="0">
-			<canvas class="sonic-wavestrip-canvas" aria-hidden="true"></canvas>
+		<div class="sonic-wavestrip">
+			<canvas class="sonic-wavestrip-canvas" role="slider" tabindex="0"></canvas>
 			<div class="sonic-wavestrip-markers" aria-hidden="true"></div>
+			<div class="sonic-wavestrip-regions"></div>
 			<div class="sonic-wavestrip-readout" popover="manual">
 				<span></span>
 				<input
@@ -63,6 +65,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 	set cancellable(isCancellable) {
 		this.reflect("cancellable", isCancellable);
 	}
+	/** Words a region's `aria-valuetext`; unset, a region speaks its start as the strip speaks a time */
+	get formatSpokenRegion() {
+		return this.#formatSpokenRegion;
+	}
+	set formatSpokenRegion(format) {
+		this.#formatSpokenRegion = format;
+		this.#regions?.render();
+	}
 	/** One amplitude from 0 to 1 per slice of the whole track, any length; resampled to the bars and never normalised */
 	get peaks() {
 		return this.#peaks;
@@ -72,6 +82,25 @@ var SonicWavestrip = class extends SonicWaveElement {
 		this.renderEmpty();
 		this.surface()?.invalidate();
 	}
+	/** A time a release will seek to, drawn as a scrub's edge; a hold or a hover of the strip's own is drawn instead */
+	get preview() {
+		return this.#preview;
+	}
+	set preview(seconds) {
+		this.#preview = Number.isFinite(seconds) ? seconds ?? void 0 : void 0;
+		this.render();
+	}
+	/** Runs once per point marker on each `markers` or `renderMarker` write; the element lasts until the next */
+	get renderMarker() {
+		return this.#renderMarker;
+	}
+	set renderMarker(render) {
+		this.#renderMarker = render;
+		this.#drawMarker = render && ((marker, element) => {
+			render({ ...marker }, element);
+		});
+		if (this.isBound()) this.renderMarkers();
+	}
 	control = renderWavestrip();
 	canvas = requireChild(this.control, ".sonic-wavestrip-canvas", HTMLCanvasElement);
 	colours = colours;
@@ -81,43 +110,75 @@ var SonicWavestrip = class extends SonicWaveElement {
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
+	#drawMarker;
+	#formatSpokenRegion;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	#preview;
+	#regions;
+	#renderMarker;
 	/** Viewport x of a time, clamped to the strip */
 	clientXOf(value) {
 		const { startPx, travelPx } = this.#axis();
 		return startPx + this.mapping().proportionOf(value) * travelPx;
 	}
 	connectedCallback() {
-		this.upgradeProperties("buffered", "cancellable", "peaks");
+		this.upgradeProperties("buffered", "cancellable", "formatSpokenRegion", "peaks", "preview", "renderMarker");
 		super.connectedCallback();
 	}
+	valueFromPoint(clientX, _clientY) {
+		const { startPx, travelPx } = this.#axis();
+		const mapping = this.mapping();
+		return clamp(mapping.valueAt(clampProportion((clientX - startPx) / travelPx)), ...mapping.bounds);
+	}
 	connect(signal) {
 		const { control } = this;
+		this.#regions = new RegionLayer({
+			axis: () => this.#axis(),
+			control,
+			element: this,
+			isDisabled: () => this.isDisabled(),
+			layer: requireChild(control, ".sonic-wavestrip-regions", HTMLDivElement),
+			mapping: () => this.mapping(),
+			outside: () => this.#outside(),
+			seek: (event) => {
+				if (this.input(this.valueFromPoint(event.clientX, event.clientY))) this.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+			speak: ({ end, start }) => this.#formatSpokenRegion?.(start, end) ?? this.spokenText(start) ?? this.notation.format(start)
+		}, signal);
 		super.connect(signal);
 		this.bindHover(control, signal, {
+			changed: () => {
+				if (this.#preview !== void 0) this.render();
+			},
 			place: () => {
 				this.#placeReadout();
 			},
-			valueAt: (event) => {
-				const axis = this.#axis();
-				const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
-				const mapping = this.mapping();
-				return this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at));
-			}
+			valueAt: (event) => this.#markerStartAt(event, this.#axis()) ?? this.mapping().snap(this.valueFromPoint(event.clientX, event.clientY))
 		});
 		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
 		this.#placeReadout();
+		this.#regions?.follow();
 		this.showCurrentMarker(this.scrubState().played);
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
+	focusTarget() {
+		return this.canvas;
+	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.length === 0;
 	}
+	/** The first point marker is the one a press there snaps to */
+	markersInReach(point, widthPx) {
+		const regions = this.markerProportions().flatMap(([from, to], index) => {
+			return this.markerList()[index]?.end !== void 0 && point.x >= from * widthPx && point.x <= to * widthPx ? [index] : [];
+		});
+		return [...this.#markerBand.inReach(point, widthPx), ...regions];
+	}
 	paint(context, frame) {
 		const { look, size } = frame;
 		const strip = this.#stripRegions(size.width);
@@ -134,11 +195,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 		]);
 	}
 	renderMarkers() {
-		this.#markerBand.render(this.markerList(), this.markerProportions());
+		this.#markerBand.render(this.markerList(), this.markerProportions(), this.#drawMarker);
 	}
 	scrubsKeyRepeat() {
 		return true;
 	}
+	usesChild(child) {
+		return child instanceof Element && child.localName === "sonic-region";
+	}
 	#axis() {
 		const box = this.canvas.getBoundingClientRect();
 		return {
@@ -163,6 +227,13 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	#grab(event) {
 		const axis = this.#axis();
+		const marker = this.#markerStartAt(event, axis);
+		const regions = this.#regions;
+		if (regions?.isHeld() === true) {
+			regions.abandon();
+			return;
+		}
+		if (marker === void 0 && regions?.take(event) === true) return void 0;
 		const at = (event.clientX - axis.startPx) / axis.travelPx;
 		const outside = this.#outside();
 		const grabbed = {
@@ -170,16 +241,16 @@ var SonicWavestrip = class extends SonicWaveElement {
 			position: axis.position,
 			travelPx: axis.travelPx
 		};
-		this.input(this.#markerAt(event, axis) ?? this.mapping().valueAt(at));
+		this.input(marker ?? this.valueFromPoint(event.clientX, event.clientY));
 		return outside ? {
 			...grabbed,
 			outside
 		} : grabbed;
 	}
-	#markerAt(event, { startPx, topPx, travelPx }) {
-		const index = this.#markerBand.at({
-			x: event.clientX - startPx,
-			y: event.clientY - topPx
+	#markerStartAt({ clientX, clientY }, { startPx, topPx, travelPx }) {
+		const [index] = this.#markerBand.inReach({
+			x: clientX - startPx,
+			y: clientY - topPx
 		}, travelPx);
 		return index === void 0 ? void 0 : this.markerList()[index]?.start;
 	}
@@ -196,7 +267,9 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#stripRegions(width) {
 		const mapping = this.mapping();
 		const { proportionOf } = mapping;
-		const { played, scrub } = scrubRegions(this.scrubState(), this.value, mapping);
+		const state = this.scrubState();
+		const preview = state.from !== void 0 || this.hoverValue !== void 0 || this.#preview === void 0 ? void 0 : proportionOf(this.#preview);
+		const { played, scrub = preview } = scrubRegions(state, this.value, mapping);
 		return stripRegions({
 			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
 			played,

package/dist/default/elements/xy.js

@@ -30,7 +30,7 @@ const orientations = {
 };
 const renderXy = template(`
 		<div class="sonic-xy">
-			<div class="sonic-xy-bracket" aria-hidden="true"></div>
+			<div class="sonic-xy-reticle" aria-hidden="true"></div>
 			<div class="sonic-xy-field" aria-hidden="true"></div>
 			<div class="sonic-xy-puck">
 				<div class="sonic-xy-axis" data-sonic-axis="x" role="slider" tabindex="0"></div>
@@ -265,6 +265,9 @@ 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)}`;
@@ -404,16 +407,8 @@ var SonicXy = class extends SonicFormElement {
 		}
 	}
 	#renderForm() {
-		const { name, x, y } = this;
-		const state = `${String(x)},${String(y)}`;
-		if (name === "") {
-			this.writeFormValue(null, state);
-			return;
-		}
-		const fields = new FormData();
-		fields.set(`${name}.x`, String(x));
-		fields.set(`${name}.y`, String(y));
-		this.writeFormValue(fields, state);
+		const { x, y } = this;
+		this.writeFormFields([["x", x], ["y", y]], `${String(x)},${String(y)}`);
 	}
 	#renderReadout() {
 		const { isRevealed } = this.#claim;

package/dist/default/index.js

@@ -4,6 +4,7 @@ import { envelopeCurve } from "./lib/envelope-curve.js";
 import { SonicEnvelope } from "./elements/envelope.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
+import { SonicRegion } from "./elements/region.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { SonicSpectrum } from "./elements/spectrum.js";
@@ -17,4 +18,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, 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, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

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

@@ -10,6 +10,17 @@ function deviceBox(entry, css) {
 	if (!device || Math.abs(device.inlineSize - css.inlineSize * dpr) > 1) return void 0;
 	return Math.abs(device.blockSize - css.blockSize * dpr) > 1 ? void 0 : device;
 }
+function canTakeColour(context, colour) {
+	const kept = context.fillStyle;
+	const isKept = (sentinel) => {
+		context.fillStyle = sentinel;
+		context.fillStyle = colour;
+		return context.fillStyle === sentinel;
+	};
+	const isRefused = isKept("#000000") && isKept("#ffffff");
+	context.fillStyle = kept;
+	return !isRefused;
+}
 function readEach(properties, read) {
 	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
 }
@@ -181,7 +192,7 @@ var CanvasSurface = class {
 		const { canvas, colours, lengths = {}, numbers = {} } = this.#options;
 		const styles = getComputedStyle(canvas);
 		return {
-			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color)),
+			colours: readEach(colours, (property) => this.#resolve(styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color))),
 			isReducedMotion: this.#reducedMotion.matches,
 			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0)),
 			numbers: readEach(numbers, (property) => readPxProperty(styles, property, 0))
@@ -209,6 +220,16 @@ var CanvasSurface = class {
 		if (previous.width === 0 || previous.height === 0) this.rebuild();
 		else this.invalidate();
 	}
+	#resolve(colour) {
+		const context = this.#context;
+		if (!context || canTakeColour(context, colour)) return colour;
+		const probe = document.createElement("span");
+		probe.style.color = colour;
+		this.#options.canvas.append(probe);
+		const resolved = getComputedStyle(probe).color;
+		probe.remove();
+		return resolved;
+	}
 	#schedule() {
 		if (this.#options.signal.aborted || this.#frame !== void 0 || !this.#isVisible) return;
 		this.#frame = requestAnimationFrame((frameMs) => {

package/dist/default/lib/clock.js

@@ -1,6 +1,7 @@
 //#region src/lib/clock.ts
 const sign = /^[-−]/;
 function formatClock(seconds) {
+	if (!Number.isFinite(seconds)) return "";
 	const total = Math.floor(Math.abs(seconds));
 	const hours = Math.floor(total / 3600);
 	const minutes = Math.floor(total / 60) % 60;

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

@@ -96,4 +96,4 @@ function stepDrag(mapping, state, move) {
 }
 
 //#endregion
-export { dragThresholdPx, startDrag, stepDrag };
+export { dragThresholdPx, fineFactor, startDrag, stepDrag };

package/dist/default/lib/key-press.js

@@ -3,7 +3,7 @@ function bindKeyPress(root, signal) {
 	let pressed;
 	const release = () => {
 		if (!pressed) return;
-		delete pressed.dataset.sonicPressed;
+		delete pressed.dataset.sonicActive;
 		pressed = void 0;
 	};
 	root.addEventListener("keydown", (event) => {
@@ -12,7 +12,7 @@ function bindKeyPress(root, signal) {
 		if (!(part instanceof HTMLButtonElement) || part.disabled) return;
 		release();
 		pressed = part;
-		part.dataset.sonicPressed = "";
+		part.dataset.sonicActive = "";
 	}, { signal });
 	root.addEventListener("keyup", (event) => {
 		if (event.key === " " || event.key === "Meta") release();

package/dist/default/lib/marker-band.js

@@ -2,7 +2,7 @@ import { readPxProperty } from "./read-px-property.js";
 
 //#region src/lib/marker-band.ts
 const kindPattern = /^[a-z][a-z0-9-]*$/;
-const snapSlopPx = 4;
+const snapMarginPx = 4;
 function isKind(kind) {
 	return kind !== void 0 && kindPattern.test(kind);
 }
@@ -13,45 +13,61 @@ function writeKind(part, kind, fallback) {
 	}
 	part.style.setProperty("--_sonic-marker", `var(--sonic-marker-${kind}, var(${fallback}))`);
 }
-function renderMarker(marker, [from, to], lane) {
+function createPart(marker) {
 	const part = document.createElement("div");
-	part.className = lane === void 0 ? "sonic-wavestrip-region" : "sonic-wavestrip-marker";
-	if (lane !== void 0) part.style.setProperty("--_sonic-marker-lane", String(lane));
-	part.style.setProperty("--_sonic-marker-from", String(from));
-	part.style.setProperty("--_sonic-marker-to", String(to));
+	part.className = marker.end === void 0 ? "sonic-wavestrip-marker" : "sonic-wavestrip-region";
 	writeKind(part, marker.kind, "--_sonic-marker-default");
 	if (marker.dimmed === true) part.dataset.sonicDimmed = "";
 	return part;
 }
 function createMarkerBand(band) {
-	let dots = [];
+	let built;
+	let placed = [];
 	const px = (property) => readPxProperty(getComputedStyle(band), property, 0);
+	function build(markers, draw) {
+		const parts = markers.map((marker) => {
+			const part = createPart(marker);
+			if (draw && marker.end === void 0) {
+				part.style.setProperty("--_sonic-marker-paint", "transparent");
+				draw(marker, part);
+			}
+			return part;
+		});
+		band.replaceChildren(...parts);
+		built = {
+			draw,
+			markers,
+			parts
+		};
+		return parts;
+	}
 	return {
-		at: ({ x, y }, widthPx) => {
+		inReach: (point, widthPx) => {
 			const size = px("--_sonic-marker-size");
 			const step = px("--_sonic-marker-step");
-			const nearest = nearestDot({
-				x,
-				y
-			}, dots.map(({ at, lane }) => ({
+			return centersInReach(point, placed.map(({ at, lane }) => ({
 				x: at * widthPx,
 				y: size / 2 + lane * step
-			})), size / 2 + snapSlopPx);
-			return nearest === void 0 ? void 0 : dots[nearest]?.index;
+			})), size / 2 + snapMarginPx).flatMap((order) => placed[order]?.index ?? []);
 		},
-		render: (markers, proportions) => {
+		render: (markers, proportions, draw) => {
 			const widthPx = band.getBoundingClientRect().width;
 			const points = markers.flatMap((marker, index) => marker.end === void 0 ? [{
 				at: proportions[index]?.[0] ?? 0,
 				index
 			}] : []);
 			const lanes = markerLanes(points.map(({ at }) => at * widthPx), px("--_sonic-marker-step"));
-			dots = points.map((point, order) => ({
+			const parts = built?.markers === markers && built.draw === draw ? built.parts : build(markers, draw);
+			placed = points.map((point, order) => ({
 				...point,
 				lane: lanes[order] ?? 0
 			}));
-			const laneOf = new Map(dots.map(({ index, lane }) => [index, lane]));
-			band.replaceChildren(...markers.map((marker, index) => renderMarker(marker, proportions[index] ?? [0, 0], laneOf.get(index))));
+			for (const [index, part] of parts.entries()) {
+				const [from, to] = proportions[index] ?? [0, 0];
+				part.style.setProperty("--_sonic-marker-from", String(from));
+				part.style.setProperty("--_sonic-marker-to", String(to));
+			}
+			for (const { index, lane } of placed) parts[index]?.style.setProperty("--_sonic-marker-lane", String(lane));
 		}
 	};
 }
@@ -64,17 +80,12 @@ function markerLanes(positions, minDistance) {
 		return lane;
 	});
 }
-function nearestDot(point, dots, reach) {
-	let nearest;
-	let nearestDistance = reach * reach;
-	for (const [index, dot] of dots.entries()) {
-		const distance = (dot.x - point.x) ** 2 + (dot.y - point.y) ** 2;
-		if (distance > nearestDistance) continue;
-		nearest = index;
-		nearestDistance = distance;
-	}
-	return nearest;
+function centersInReach(point, centers, reach) {
+	return centers.map((center, index) => ({
+		distance: (center.x - point.x) ** 2 + (center.y - point.y) ** 2,
+		index
+	})).filter(({ distance }) => distance <= reach * reach).toSorted((first, second) => first.distance - second.distance || second.index - first.index).map(({ index }) => index);
 }
 
 //#endregion
-export { createMarkerBand, isKind, markerLanes, nearestDot, writeKind };
+export { centersInReach, createMarkerBand, isKind, markerLanes, writeKind };

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

@@ -0,0 +1,48 @@
+import { clamp, clampProportion, trimFloat } from "./math.js";
+import { fineFactor } from "./drag-step.js";
+
+//#region src/lib/region-drag.ts
+function regionAt(bodies, x) {
+	const index = bodies.findLastIndex((body) => body !== void 0 && x >= body[0] && x <= body[1]);
+	return index === -1 ? void 0 : index;
+}
+function regionTravel({ end, start }, [low, high]) {
+	return [low, Math.max(low, trimFloat(high - (end - start)))];
+}
+function moveRegionTo(mapping, span, start) {
+	const moved = clamp(mapping.snap(start), ...regionTravel(span, mapping.bounds));
+	return {
+		end: trimFloat(moved + (span.end - span.start)),
+		start: moved
+	};
+}
+function startRegionDrag({ position, ...fixed }) {
+	return {
+		...fixed,
+		isEngaged: false,
+		lastPosition: position,
+		startPosition: position,
+		travelPx: 0
+	};
+}
+function stepRegionDrag(mapping, state, move) {
+	if (!(state.isEngaged || Math.abs(move.position - state.startPosition) >= state.thresholdPx)) return {
+		span: void 0,
+		state
+	};
+	const pace = move.isFine ? fineFactor : 1;
+	const travelPx = state.travelPx + (move.position - state.lastPosition) * pace;
+	const at = mapping.proportionOf(state.from.start) + travelPx / state.widthPx;
+	return {
+		span: moveRegionTo(mapping, state.from, mapping.valueAt(clampProportion(at))),
+		state: {
+			...state,
+			isEngaged: true,
+			lastPosition: move.position,
+			travelPx
+		}
+	};
+}
+
+//#endregion
+export { moveRegionTo, regionAt, regionTravel, startRegionDrag, stepRegionDrag };

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

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

package/dist/dev/define/region.js

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

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

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

package/dist/dev/define.d.ts

@@ -8,6 +8,8 @@ import { SonicMeter } from "./elements/meter.js";
 import "./define/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import "./define/number.js";
+import { SonicRegion } from "./elements/region.js";
+import "./define/region.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import "./define/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
@@ -26,4 +28,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, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };
+export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };

package/dist/dev/define.js

@@ -3,6 +3,7 @@ import "./define/dial.js";
 import "./define/envelope.js";
 import "./define/meter.js";
 import "./define/number.js";
+import "./define/region.js";
 import "./define/segmented.js";
 import "./define/slider.js";
 import "./define/spectrum.js";

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

@@ -35,6 +35,7 @@ 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

@@ -154,6 +154,9 @@ 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(),

package/dist/dev/elements/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/elements/button.ts"],"sourcesContent":["import type { Hold } from '#lib/hold.ts';\n\nimport { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.ts';\nimport { bindHold } from '#lib/hold.ts';\nimport { bindKeyPress } from '#lib/key-press.ts';\nimport { mirrorChildren } from '#lib/mirror-children.ts';\nimport { capturePointer } from '#lib/pointer-drag.ts';\nimport { placeChildren, requireChild, template } from '#lib/render.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare const __DEV__: boolean;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-button': SonicButton;\n\t}\n}\n\nconst renderButton = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-button\" type=\"button\"><span class=\"sonic-button-cap\"></span></button>\n\t`,\n\tHTMLButtonElement,\n);\n\nconst holdKeys = new Set([' ', 'Enter']);\n\nconst popupAttributes = {\n\tcontrols: 'aria-controls',\n\texpanded: 'aria-expanded',\n\tpopup: 'aria-haspopup',\n} as const;\n\nconst pressWhens = new Set(['pressed', 'released']);\n\nexport class SonicButton extends SonicFormElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicFormElement.observedAttributes,\n\t\t...Object.keys(popupAttributes),\n\t\t'busy',\n\t\t'legend',\n\t\t'momentary',\n\t\t'pressed',\n\t\t'soft-disabled',\n\t\t'latching',\n\t\t'value',\n\t];\n\n\tget armed(): boolean {\n\t\treturn this.hasAttribute('armed');\n\t}\n\n\tset armed(isArmed: boolean) {\n\t\tthis.reflect('armed', isArmed);\n\t}\n\n\tget busy(): boolean {\n\t\treturn this.hasAttribute('busy');\n\t}\n\n\tset busy(isBusy: boolean) {\n\t\tthis.reflect('busy', isBusy);\n\t}\n\n\tget defaultPressed(): boolean {\n\t\treturn this.hasAttribute('pressed');\n\t}\n\n\tset defaultPressed(isPressed: boolean) {\n\t\tthis.reflect('pressed', isPressed);\n\t}\n\n\tget latching(): boolean {\n\t\treturn this.hasAttribute('latching');\n\t}\n\n\tset latching(isLatching: boolean) {\n\t\tthis.reflect('latching', isLatching);\n\t}\n\n\t/** Shows the legend child whose `data-sonic-when` has this name */\n\tget legend(): string | undefined {\n\t\treturn this.getAttribute('legend') ?? undefined;\n\t}\n\n\tset legend(name: string | undefined) {\n\t\tthis.reflect('legend', name);\n\t}\n\n\tget momentary(): boolean {\n\t\treturn this.hasAttribute('momentary');\n\t}\n\n\tset momentary(isMomentary: boolean) {\n\t\tthis.reflect('momentary', isMomentary);\n\t}\n\n\tget pressed(): boolean {\n\t\treturn this.#isDirty ? this.#pressed : this.defaultPressed;\n\t}\n\n\tset pressed(isPressed: boolean | undefined) {\n\t\tthis.#isDirty = true;\n\t\tthis.#pressed = isPressed === true;\n\t\tthis.render();\n\t}\n\n\tget softDisabled(): boolean {\n\t\treturn this.hasAttribute('soft-disabled');\n\t}\n\n\tset softDisabled(isSoftDisabled: boolean) {\n\t\tthis.reflect('soft-disabled', isSoftDisabled);\n\t}\n\n\t/** Submitted with the form while a latching button is pressed */\n\tget value(): string {\n\t\treturn this.getAttribute('value') ?? 'on';\n\t}\n\n\tset value(value: string | undefined) {\n\t\tthis.reflect('value', value);\n\t}\n\n\treadonly #button = renderButton();\n\n\t#holding: Hold | undefined;\n\n\t#isDirty = false;\n\n\t#pressed = false;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'pressed') this.#isDirty = false;\n\t\tif (this.isDisabled() || this.#isSoftDisabled()) this.#holding?.release();\n\t\tthis.render();\n\t}\n\n\toverride formResetCallback(): void {\n\t\tthis.attributeChangedCallback('pressed');\n\t}\n\n\tprotected override activate(): void {\n\t\tthis.#button.click();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst button = this.#button;\n\t\tconst cap = requireChild(button, '.sonic-button-cap', HTMLSpanElement);\n\n\t\tthis.upgradeProperties(\n\t\t\t'armed',\n\t\t\t'busy',\n\t\t\t'defaultPressed',\n\t\t\t'legend',\n\t\t\t'momentary',\n\t\t\t'softDisabled',\n\t\t\t'latching',\n\t\t\t'pressed',\n\t\t\t'value',\n\t\t);\n\t\tmirrorChildren(\n\t\t\tthis,\n\t\t\t{\n\t\t\t\tcontrol: button,\n\t\t\t\tcopy: copyNode,\n\t\t\t\tplace: (copies) => {\n\t\t\t\t\tplaceChildren(cap, copies);\n\t\t\t\t\tthis.#showLegend();\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\t\tthis.render();\n\t\tif (__DEV__)\n\t\t\tthis.checkStyles(button, 'button.css', {\n\t\t\t\tproperty: 'padding-inline-start',\n\t\t\t\tratio: '--_sonic-button-padding-ratio',\n\t\t\t\tselector: '.sonic-button-cap > :not(svg, .sonic-led)',\n\t\t\t});\n\n\t\tbutton.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\t// A native disabled button fires no click at all\n\t\t\t\tif (this.#isSoftDisabled()) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!this.latching) return;\n\n\t\t\t\tthis.pressed = !this.pressed;\n\t\t\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindMomentary(button, signal);\n\t\tbindKeyPress(button, signal);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#button;\n\t}\n\n\tprotected render(): void {\n\t\tif (!this.isBound()) return;\n\n\t\tconst button = this.#button;\n\n\t\twriteAttribute(button, 'disabled', this.isDisabled() ? '' : undefined);\n\t\twriteAttribute(button, 'aria-disabled', this.#isSoftDisabled() ? 'true' : undefined);\n\t\twriteAttribute(button, 'aria-busy', this.busy ? 'true' : undefined);\n\t\twriteAttribute(button, 'aria-pressed', this.latching ? String(this.pressed) : undefined);\n\t\tthis.toggleState('pressed', this.pressed);\n\t\tthis.forwardNaming(button, true);\n\t\tthis.#forwardPopup(button);\n\t\tthis.#showLegend();\n\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tconst submitted = this.latching && this.pressed ? this.value : null;\n\n\t\tthis.writeFormValue(submitted, String(this.pressed));\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tif (this.latching) this.pressed = state === 'true';\n\t}\n\n\t#bindMomentary(button: HTMLButtonElement, signal: AbortSignal): void {\n\t\tconst holding = bindHold(\n\t\t\tbutton,\n\t\t\t{\n\t\t\t\tcanHold: () => !this.isDisabled() && !this.#isSoftDisabled(),\n\t\t\t\tleave: 'blur',\n\t\t\t\tonHold: () => {\n\t\t\t\t\tthis.#press(true);\n\t\t\t\t},\n\t\t\t\tonRelease: () => {\n\t\t\t\t\tthis.#press(false);\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\n\t\tthis.#holding = holding;\n\t\tbutton.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tif (event.button !== 0 || !this.#isMomentary()) return;\n\n\t\t\t\tcapturePointer(button, event.pointerId);\n\t\t\t\tholding.hold(event.pointerId);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tbutton.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.repeat || event.defaultPrevented) return;\n\t\t\t\tif (!holdKeys.has(event.key) || !this.#isMomentary()) return;\n\n\t\t\t\tholding.hold(event.key);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\t#forwardPopup(button: HTMLButtonElement): void {\n\t\tfor (const [name, aria] of Object.entries(popupAttributes)) {\n\t\t\twriteAttribute(button, aria, this.getAttribute(name) ?? undefined);\n\t\t}\n\t}\n\n\t#isMomentary(): boolean {\n\t\treturn this.momentary && !this.latching;\n\t}\n\n\t#isSoftDisabled(): boolean {\n\t\treturn this.softDisabled && !this.isDisabled();\n\t}\n\n\t#press(isPressed: boolean): void {\n\t\tthis.pressed = isPressed;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#showLegend(): void {\n\t\tconst legend = this.legend;\n\n\t\tfor (const part of this.#button.querySelectorAll<HTMLElement | SVGElement>(\n\t\t\t':scope > .sonic-button-cap > [data-sonic-when]',\n\t\t)) {\n\t\t\tconst when = part.dataset.sonicWhen ?? '';\n\n\t\t\tpart.toggleAttribute('data-sonic-hidden', !pressWhens.has(when) && when !== legend);\n\t\t}\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/elements/button.ts"],"sourcesContent":["import type { Hold } from '#lib/hold.ts';\n\nimport { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.ts';\nimport { bindHold } from '#lib/hold.ts';\nimport { bindKeyPress } from '#lib/key-press.ts';\nimport { mirrorChildren } from '#lib/mirror-children.ts';\nimport { capturePointer } from '#lib/pointer-drag.ts';\nimport { placeChildren, requireChild, template } from '#lib/render.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare const __DEV__: boolean;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-button': SonicButton;\n\t}\n}\n\nconst renderButton = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-button\" type=\"button\"><span class=\"sonic-button-cap\"></span></button>\n\t`,\n\tHTMLButtonElement,\n);\n\nconst holdKeys = new Set([' ', 'Enter']);\n\nconst popupAttributes = {\n\tcontrols: 'aria-controls',\n\texpanded: 'aria-expanded',\n\tpopup: 'aria-haspopup',\n} as const;\n\nconst pressWhens = new Set(['pressed', 'released']);\n\nexport class SonicButton extends SonicFormElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicFormElement.observedAttributes,\n\t\t...Object.keys(popupAttributes),\n\t\t'busy',\n\t\t'legend',\n\t\t'momentary',\n\t\t'pressed',\n\t\t'soft-disabled',\n\t\t'latching',\n\t\t'value',\n\t];\n\n\tget armed(): boolean {\n\t\treturn this.hasAttribute('armed');\n\t}\n\n\tset armed(isArmed: boolean) {\n\t\tthis.reflect('armed', isArmed);\n\t}\n\n\tget busy(): boolean {\n\t\treturn this.hasAttribute('busy');\n\t}\n\n\tset busy(isBusy: boolean) {\n\t\tthis.reflect('busy', isBusy);\n\t}\n\n\tget defaultPressed(): boolean {\n\t\treturn this.hasAttribute('pressed');\n\t}\n\n\tset defaultPressed(isPressed: boolean) {\n\t\tthis.reflect('pressed', isPressed);\n\t}\n\n\tget latching(): boolean {\n\t\treturn this.hasAttribute('latching');\n\t}\n\n\tset latching(isLatching: boolean) {\n\t\tthis.reflect('latching', isLatching);\n\t}\n\n\t/** Shows the legend child whose `data-sonic-when` has this name */\n\tget legend(): string | undefined {\n\t\treturn this.getAttribute('legend') ?? undefined;\n\t}\n\n\tset legend(name: string | undefined) {\n\t\tthis.reflect('legend', name);\n\t}\n\n\tget momentary(): boolean {\n\t\treturn this.hasAttribute('momentary');\n\t}\n\n\tset momentary(isMomentary: boolean) {\n\t\tthis.reflect('momentary', isMomentary);\n\t}\n\n\tget pressed(): boolean {\n\t\treturn this.#isDirty ? this.#pressed : this.defaultPressed;\n\t}\n\n\tset pressed(isPressed: boolean | undefined) {\n\t\tthis.#isDirty = true;\n\t\tthis.#pressed = isPressed === true;\n\t\tthis.render();\n\t}\n\n\tget softDisabled(): boolean {\n\t\treturn this.hasAttribute('soft-disabled');\n\t}\n\n\tset softDisabled(isSoftDisabled: boolean) {\n\t\tthis.reflect('soft-disabled', isSoftDisabled);\n\t}\n\n\t/** Submitted with the form while a latching button is pressed */\n\tget value(): string {\n\t\treturn this.getAttribute('value') ?? 'on';\n\t}\n\n\tset value(value: string | undefined) {\n\t\tthis.reflect('value', value);\n\t}\n\n\treadonly #button = renderButton();\n\n\t#holding: Hold | undefined;\n\n\t#isDirty = false;\n\n\t#pressed = false;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'pressed') this.#isDirty = false;\n\t\tif (this.isDisabled() || this.#isSoftDisabled()) this.#holding?.release();\n\t\tthis.render();\n\t}\n\n\toverride formResetCallback(): void {\n\t\tthis.attributeChangedCallback('pressed');\n\t}\n\n\tprotected override activate(): void {\n\t\tthis.#button.click();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst button = this.#button;\n\t\tconst cap = requireChild(button, '.sonic-button-cap', HTMLSpanElement);\n\n\t\tthis.upgradeProperties(\n\t\t\t'armed',\n\t\t\t'busy',\n\t\t\t'defaultPressed',\n\t\t\t'legend',\n\t\t\t'momentary',\n\t\t\t'softDisabled',\n\t\t\t'latching',\n\t\t\t'pressed',\n\t\t\t'value',\n\t\t);\n\t\tmirrorChildren(\n\t\t\tthis,\n\t\t\t{\n\t\t\t\tcontrol: button,\n\t\t\t\tcopy: copyNode,\n\t\t\t\tplace: (copies) => {\n\t\t\t\t\tplaceChildren(cap, copies);\n\t\t\t\t\tthis.#showLegend();\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\t\tthis.render();\n\t\tif (__DEV__)\n\t\t\tthis.checkStyles(button, 'button.css', {\n\t\t\t\tproperty: 'padding-inline-start',\n\t\t\t\tratio: '--_sonic-button-padding-ratio',\n\t\t\t\tselector: '.sonic-button-cap > :not(svg, .sonic-led)',\n\t\t\t});\n\n\t\tbutton.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\t// A native disabled button fires no click at all\n\t\t\t\tif (this.#isSoftDisabled()) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!this.latching) return;\n\n\t\t\t\tthis.pressed = !this.pressed;\n\t\t\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindMomentary(button, signal);\n\t\tbindKeyPress(button, signal);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#button;\n\t}\n\n\tprotected render(): void {\n\t\tif (!this.isBound()) return;\n\n\t\tconst button = this.#button;\n\n\t\twriteAttribute(button, 'disabled', this.isDisabled() ? '' : undefined);\n\t\twriteAttribute(button, 'aria-disabled', this.#isSoftDisabled() ? 'true' : undefined);\n\t\twriteAttribute(button, 'aria-busy', this.busy ? 'true' : undefined);\n\t\twriteAttribute(button, 'aria-pressed', this.latching ? String(this.pressed) : undefined);\n\t\tthis.toggleState('pressed', this.pressed);\n\t\tthis.forwardNaming(button, true);\n\t\tthis.#forwardPopup(button);\n\t\tthis.#showLegend();\n\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tconst submitted = this.latching && this.pressed ? this.value : null;\n\n\t\tthis.writeFormValue(submitted, String(this.pressed));\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tif (this.latching) this.pressed = state === 'true';\n\t}\n\n\tprotected override stateTarget(): HTMLElement {\n\t\treturn this.#button;\n\t}\n\n\t#bindMomentary(button: HTMLButtonElement, signal: AbortSignal): void {\n\t\tconst holding = bindHold(\n\t\t\tbutton,\n\t\t\t{\n\t\t\t\tcanHold: () => !this.isDisabled() && !this.#isSoftDisabled(),\n\t\t\t\tleave: 'blur',\n\t\t\t\tonHold: () => {\n\t\t\t\t\tthis.#press(true);\n\t\t\t\t},\n\t\t\t\tonRelease: () => {\n\t\t\t\t\tthis.#press(false);\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\n\t\tthis.#holding = holding;\n\t\tbutton.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tif (event.button !== 0 || !this.#isMomentary()) return;\n\n\t\t\t\tcapturePointer(button, event.pointerId);\n\t\t\t\tholding.hold(event.pointerId);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tbutton.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.repeat || event.defaultPrevented) return;\n\t\t\t\tif (!holdKeys.has(event.key) || !this.#isMomentary()) return;\n\n\t\t\t\tholding.hold(event.key);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\t#forwardPopup(button: HTMLButtonElement): void {\n\t\tfor (const [name, aria] of Object.entries(popupAttributes)) {\n\t\t\twriteAttribute(button, aria, this.getAttribute(name) ?? undefined);\n\t\t}\n\t}\n\n\t#isMomentary(): boolean {\n\t\treturn this.momentary && !this.latching;\n\t}\n\n\t#isSoftDisabled(): boolean {\n\t\treturn this.softDisabled && !this.isDisabled();\n\t}\n\n\t#press(isPressed: boolean): void {\n\t\tthis.pressed = isPressed;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#showLegend(): void {\n\t\tconst legend = this.legend;\n\n\t\tfor (const part of this.#button.querySelectorAll<HTMLElement | SVGElement>(\n\t\t\t':scope > .sonic-button-cap > [data-sonic-when]',\n\t\t)) {\n\t\t\tconst when = part.dataset.sonicWhen ?? '';\n\n\t\t\tpart.toggleAttribute('data-sonic-hidden', !pressWhens.has(when) && when !== legend);\n\t\t}\n\t}\n}\n"],"mappings":"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"}

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

@@ -21,6 +21,7 @@ export declare class SonicDial extends SonicValueElement {
   protected draw(): void;
   protected focusTarget(): HTMLElement;
   protected isWrapping(): boolean;
+  protected stateTarget(): HTMLElement;
 }
 //#endregion
 //# sourceMappingURL=dial.d.ts.map

package/dist/dev/elements/dial.js

@@ -89,6 +89,9 @@ var SonicDial = class extends SonicValueElement {
 	isWrapping() {
 		return this.endless;
 	}
+	stateTarget() {
+		return this.#dial;
+	}
 };
 
 //#endregion