@xsynaptic/sonic-ui 0.17.0 → 0.19.0

package/dist/default/elements/position-group.js

@@ -1,8 +1,13 @@
 import { writeAttribute } from "../lib/write-attribute.js";
 import { bindHold } from "../lib/hold.js";
+import { isMomentaryAt, pressTarget, restOf } from "../lib/positions.js";
 import { SonicRadioGroupElement, optionValue } from "./radio-group.js";
 
 //#region src/elements/position-group.ts
+const latching = {
+	isDisabled: false,
+	isMomentary: false
+};
 var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	static observedAttributes = [
 		...SonicRadioGroupElement.observedAttributes,
@@ -56,21 +61,22 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	along(event) {
 		return this.orientation === "vertical" ? event.clientY : event.clientX;
 	}
-	checkedIndex(options) {
-		return options.findIndex((option) => optionValue(option) === this.value);
+	checkedIndex() {
+		if (this.isBare()) return this.checked ? this.onIndex() : 1 - this.onIndex();
+		return this.options().findIndex((option) => optionValue(option) === this.value);
 	}
-	chooseByClick(option) {
-		super.chooseByClick(option);
-		if (this.isMomentary(option)) this.springBack();
+	chooseByClick(index) {
+		super.chooseByClick(index);
+		if (this.isMomentary(index)) this.springBack();
 	}
-	chooseByKey(option, event) {
-		if (!this.isMomentary(option)) {
-			super.chooseByKey(option, event);
+	chooseByKey(index, event) {
+		if (!this.isMomentary(index)) {
+			super.chooseByKey(index, event);
 			return;
 		}
 		if (event.repeat) return;
-		this.hold(option, event.key);
-		option.focus();
+		this.hold(index, event.key);
+		this.options()[index]?.focus();
 	}
 	connect(signal) {
 		this.upgradeProperties("defaultChecked", "checked", "orientation");
@@ -90,23 +96,33 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	focusTarget() {
 		return this.isBare() ? this.bare : super.focusTarget();
 	}
-	hold(option, by) {
-		if (this.#holding?.hold(by) === true) this.select(option);
+	hold(index, by) {
+		if (this.#holding?.hold(by) === true) this.select(index);
 	}
 	isBare() {
 		return this.options().length === 0;
 	}
-	isMomentary(option) {
-		const options = this.options();
-		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
+	isChecked(index) {
+		const option = this.options()[index];
+		return option ? optionValue(option) === this.value : index === this.checkedIndex();
+	}
+	isMomentary(index) {
+		return isMomentaryAt(this.positions(), index);
 	}
 	isWrapping() {
 		return false;
 	}
-	pressTarget(option) {
-		const options = this.options();
-		const index = this.checkedIndex(options);
-		return (options.length === 2 && index >= 0 ? options[1 - index] : void 0) ?? option;
+	onIndex() {
+		return this.orientation === "vertical" ? 0 : 1;
+	}
+	positions() {
+		return this.isBare() ? [latching, latching] : super.positions();
+	}
+	pressedIndex(target) {
+		return target === this.bare ? 0 : this.indexOf(target);
+	}
+	pressTarget(index) {
+		return pressTarget(this.positions(), this.checkedIndex(), index);
 	}
 	releaseHold() {
 		this.#holding?.release();
@@ -128,21 +144,21 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 		if (this.isBare()) this.checked = state === "true";
 		else super.restoreState(state);
 	}
+	select(index) {
+		if (this.isBare()) this.setChecked(index === this.onIndex());
+		else super.select(index);
+	}
 	setChecked(isChecked) {
 		if (isChecked === this.checked) return;
 		this.checked = isChecked;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	springBack() {
-		const options = this.options();
-		const index = this.checkedIndex(options);
-		const held = options[index];
-		if (!held || !this.isMomentary(held)) return;
-		const rest = options[index === 0 ? 1 : index - 1];
-		if (!rest) return;
+		const rest = restOf(this.positions(), this.checkedIndex());
+		if (rest === void 0) return;
 		const isFocused = this.group.contains(this.ownerDocument.activeElement);
 		this.select(rest);
-		if (isFocused) rest.focus();
+		if (isFocused) this.options()[rest]?.focus();
 	}
 	#renderBare() {
 		const group = this.group;

package/dist/default/elements/radio-group.js

@@ -1,4 +1,3 @@
-import { clamp } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
@@ -6,14 +5,9 @@ import { bindKeyPress } from "../lib/key-press.js";
 import { placeChildren } from "../lib/render.js";
 import { mirrorChildren } from "../lib/mirror-children.js";
 import { bindDrag } from "../lib/pointer-drag.js";
+import { keyTarget, stepFrom } from "../lib/positions.js";
 
 //#region src/elements/radio-group.ts
-const keySteps = /* @__PURE__ */ new Map([
-	["ArrowDown", 1],
-	["ArrowLeft", -1],
-	["ArrowRight", 1],
-	["ArrowUp", -1]
-]);
 function isInside(box, x, y) {
 	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
 }
@@ -38,14 +32,14 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		if (name === "value") this.#value = this.getAttribute("value") ?? "";
 		this.render();
 	}
-	chooseByClick(option) {
-		this.select(option);
+	chooseByClick(index) {
+		this.select(index);
 	}
-	chooseByKey(option, _event) {
-		this.select(option);
-		option.focus();
+	chooseByKey(index, _event) {
+		this.select(index);
+		this.options()[index]?.focus();
 	}
-	claimPress(_option, _event) {
+	claimPress(_index, _event) {
 		return false;
 	}
 	connect(signal) {
@@ -61,16 +55,19 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		}, signal);
 		group.addEventListener("click", (event) => {
 			if (event instanceof PointerEvent && event.pointerType !== "") return;
-			const option = this.optionOf(event.target);
-			if (option) this.chooseByClick(option);
+			const index = this.indexOf(event.target);
+			if (index !== -1) this.chooseByClick(index);
 		}, { signal });
 		this.#bindPress(group, signal);
 		bindKeyPress(group, signal);
 		group.addEventListener("keydown", (event) => {
 			if (event.defaultPrevented) return;
-			const option = this.optionOf(event.target);
-			const next = option && this.#keyTarget(option, event.key);
-			if (!next) return;
+			const index = this.indexOf(event.target);
+			const next = index === -1 ? void 0 : keyTarget(this.positions(), index, {
+				isWrapping: this.isWrapping(),
+				key: event.key
+			});
+			if (next === void 0) return;
 			event.preventDefault();
 			this.chooseByKey(next, event);
 		}, { signal });
@@ -78,11 +75,15 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	focusTarget() {
 		return this.options().find((option) => option.tabIndex === 0);
 	}
+	indexOf(target) {
+		const option = this.optionOf(target);
+		return option ? this.options().indexOf(option) : -1;
+	}
 	isMirrored(child) {
 		return child instanceof Element && child.matches("[data-sonic-value]");
 	}
-	isOptionDisabled(option) {
-		return option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-disabled") === true;
+	isOptionDisabled(index) {
+		return this.positions()[index]?.isDisabled !== false;
 	}
 	isWrapping() {
 		return true;
@@ -98,14 +99,27 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	placeCopies(copies) {
 		this.#copyOptions(copies);
 	}
-	releaseTarget(option) {
-		return option;
+	positions() {
+		return this.options().map((option) => {
+			const child = option.querySelector("[data-sonic-value]");
+			return {
+				isDisabled: child?.hasAttribute("data-sonic-disabled") === true,
+				isMomentary: child?.hasAttribute("data-sonic-momentary") === true
+			};
+		});
+	}
+	refocusAt(index) {
+		if (this.group.matches(":focus-within")) this.options()[index]?.focus();
+	}
+	releaseTarget(index) {
+		return index;
 	}
 	render() {
 		if (!this.isBound()) return;
 		const options = this.options();
+		const positions = this.positions();
 		const checked = options.find((option) => optionValue(option) === this.#value);
-		const enabled = this.isDisabled() ? [] : options.filter((option) => !this.isOptionDisabled(option));
+		const enabled = this.isDisabled() ? [] : options.filter((_option, index) => positions[index]?.isDisabled === false);
 		const focusable = enabled.find((option) => option === checked) ?? enabled[0];
 		for (const option of options) {
 			writeAttribute(option, "disabled", enabled.includes(option) ? void 0 : "");
@@ -118,45 +132,42 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	restoreState(state) {
 		this.value = state;
 	}
-	select(option) {
-		const next = optionValue(option);
+	select(index) {
+		const option = this.options()[index];
+		const next = option && optionValue(option);
 		if (next === void 0 || next === this.#value) return;
 		this.value = next;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	stepFrom(from, step) {
-		const options = this.options();
-		let index = from;
-		for (const _ of options) {
-			const next = index + step;
-			index = this.isWrapping() ? (next + options.length) % options.length : clamp(next, 0, options.length - 1);
-			const option = options[index];
-			if (option && !this.isOptionDisabled(option)) return option;
-		}
+		return stepFrom(this.positions(), from, {
+			isWrapping: this.isWrapping(),
+			step
+		});
 	}
 	#bindPress(group, signal) {
 		bindDrag(group, {
 			grab: (event) => {
-				const option = this.optionOf(event.target);
-				if (!option || this.isDisabled() || this.isOptionDisabled(option)) return;
-				if (this.claimPress(option, event)) return;
+				const index = this.indexOf(event.target);
+				if (index === -1 || this.isDisabled() || this.isOptionDisabled(index)) return;
+				if (this.claimPress(index, event)) return;
 				const boxes = this.#optionBoxes();
-				this.#markPressed(option);
+				this.#markPressed(index);
 				return {
 					boxes,
-					option
+					index
 				};
 			},
 			lift: (press) => {
-				if (!press.option || this.isDisabled()) return;
-				const option = this.releaseTarget(press.option);
-				if (!option) return;
-				this.select(option);
-				if (group.matches(":focus-within")) option.focus();
+				if (press.index === void 0 || this.isDisabled()) return;
+				const index = this.releaseTarget(press.index);
+				if (index === void 0) return;
+				this.select(index);
+				this.refocusAt(index);
 			},
 			move: (press, event) => {
-				press.option = press.boxes.find(([, box]) => isInside(box, event.clientX, event.clientY))?.[0];
-				this.#markPressed(press.option);
+				press.index = press.boxes.find(([, box]) => isInside(box, event.clientX, event.clientY))?.[0];
+				this.#markPressed(press.index);
 			},
 			release: () => {
 				this.#markPressed(void 0);
@@ -180,20 +191,12 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.render();
 		if (focused) this.#refocus(focused, focusedValue);
 	}
-	#keyTarget(option, key) {
-		const options = this.options();
-		const isEnabled = (other) => !this.isOptionDisabled(other);
-		if (key === "Home") return options.find((other) => isEnabled(other));
-		if (key === "End") return options.findLast((other) => isEnabled(other));
-		const step = keySteps.get(key);
-		if (step === void 0) return void 0;
-		return this.stepFrom(options.indexOf(option), step) ?? option;
-	}
 	#markPressed(pressed) {
-		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === pressed);
+		for (const [index, option] of this.options().entries()) option.toggleAttribute("data-sonic-pressed", index === pressed);
 	}
 	#optionBoxes() {
-		return this.options().filter((option) => !this.isOptionDisabled(option)).map((option) => [option, option.getBoundingClientRect()]);
+		const positions = this.positions();
+		return this.options().flatMap((option, index) => positions[index]?.isDisabled === false ? [[index, option.getBoundingClientRect()]] : []);
 	}
 	#refocus(focused, value) {
 		const options = this.options();

package/dist/default/elements/scale.js

@@ -17,9 +17,9 @@ function scaleMark(original) {
 	return mark;
 }
 function bindScale(element, { control, marks }, signal) {
-	const { mapping, watch } = linkValue(element);
+	const { model } = linkValue(element);
 	const render = () => {
-		const { proportionOf } = mapping();
+		const { proportionOf } = model.mapping();
 		for (const mark of marks.children) {
 			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
 			const at = String(proportionOf(scaleValue(mark)));
@@ -36,7 +36,7 @@ function bindScale(element, { control, marks }, signal) {
 			render();
 		}
 	}, signal);
-	signal.addEventListener("abort", watch(render), { once: true });
+	signal.addEventListener("abort", model.watch(render), { once: true });
 }
 
 //#endregion

package/dist/default/elements/segmented.js

@@ -12,11 +12,6 @@ var SonicSegmented = class extends SonicRadioGroupElement {
 	group = renderSegmented();
 	connect(signal) {
 		super.connect(signal);
-		this.checkStyles(this.group, "segmented.css", [
-			"well",
-			"keycap",
-			["cap", ".sonic-segmented-option"]
-		]);
 	}
 	renderOption() {
 		return renderOption();

package/dist/default/elements/slider.js

@@ -3,6 +3,7 @@ import { requireChild, template } from "../lib/render.js";
 import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
+import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
 
 //#region src/elements/slider.ts
@@ -39,6 +40,7 @@ var SonicSlider = class extends SonicValueElement {
 		"scrub",
 		"spring"
 	];
+	/** Loaded spans, in the slider's own values */
 	get buffered() {
 		return this.#buffered.map(([start, end]) => [start, end]);
 	}
@@ -52,12 +54,14 @@ var SonicSlider = class extends SonicValueElement {
 	set groovePress(gesture) {
 		this.reflect("groove-press", gesture);
 	}
+	/** How far a modulation source can push the value, in value units; signed */
 	get modulation() {
 		return this.numberAttribute("modulation", 0);
 	}
 	set modulation(amount) {
 		this.reflect("modulation", amount);
 	}
+	/** Where the value is right now with modulation applied; a property only, cheap to write every frame, fires nothing */
 	get modulationValue() {
 		return this.#modulation.value();
 	}
@@ -114,13 +118,6 @@ var SonicSlider = class extends SonicValueElement {
 			}
 		});
 		this.render();
-		this.checkStyles(slider, "slider.css", [
-			"cap",
-			"readout",
-			"value",
-			"groove",
-			["glass", ".sonic-slider-readout"]
-		]);
 		this.bindGestures(slider, signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
@@ -146,11 +143,7 @@ var SonicSlider = class extends SonicValueElement {
 	focusTarget() {
 		return this.#slider;
 	}
-	heldWrite(next) {
-		super.heldWrite(next);
-		if (this.scrub) this.render();
-	}
-	holdChanged() {
+	scrubChanged() {
 		if (this.scrub) this.render();
 	}
 	scrubsKeyRepeat() {
@@ -199,18 +192,16 @@ var SonicSlider = class extends SonicValueElement {
 	}
 	#renderScrub(slider) {
 		const { style } = slider;
-		const { proportionOf } = this.mapping();
-		const isHeld = this.scrub && this.heldFrom() !== void 0;
-		const played = proportionOf(this.playback());
-		const scrubbed = proportionOf(this.value);
-		if (isHeld) style.setProperty("--_sonic-slider-played", String(played));
+		const state = this.scrubState();
+		const { played, scrub } = scrubRegions(state, this.value, this.mapping());
+		if (this.scrub && state.from !== void 0) style.setProperty("--_sonic-slider-played", String(played));
 		else style.removeProperty("--_sonic-slider-played");
-		if (played === scrubbed || !isHeld || !this.isRevealed()) {
+		if (scrub === void 0 || !this.scrub) {
 			style.removeProperty("--_sonic-slider-scrub-region");
 			return;
 		}
-		const from = grooveStop(Math.min(played, scrubbed));
-		const to = grooveStop(Math.max(played, scrubbed));
+		const from = grooveStop(Math.min(played, scrub));
+		const to = grooveStop(Math.max(played, scrub));
 		style.setProperty("--_sonic-slider-scrub-region", `linear-gradient(var(--_sonic-slider-toward), transparent ${from}, var(--_sonic-slider-scrub) ${from} ${to}, transparent ${to})`);
 	}
 };

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

@@ -58,7 +58,7 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	checkStyles(control, sheet, material = []) {}
+	checkStyles(control, sheet, { box, material }) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
 		const labels = isNamed ? this.namingLabels() : [];
@@ -124,6 +124,8 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
+	#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/split.js

@@ -22,7 +22,7 @@ function gridLimits(mapping, [low, high]) {
 	return [bottom < low - gridSlop ? mapping.keyTarget("ArrowRight", bottom) ?? bottom : bottom, top > high + gridSlop ? mapping.keyTarget("ArrowLeft", top) ?? top : top];
 }
 function modelOf(member, value, isFree) {
-	const mapping = member.link.mapping();
+	const mapping = member.link.model.mapping();
 	const [first, last] = mapping.bounds;
 	return {
 		isFree,
@@ -46,6 +46,7 @@ var SonicSplit = class extends SonicElement {
 	set mode(name) {
 		this.reflect("mode", name);
 	}
+	/** What the members add up to; unset, it is their sum when they connect */
 	get total() {
 		return this.optionalNumberAttribute("total");
 	}
@@ -105,7 +106,7 @@ var SonicSplit = class extends SonicElement {
 	}
 	#compensate() {
 		this.#isQueued = false;
-		for (const mover of this.#members) if (mover.link.value() !== mover.seen) this.#move(mover);
+		for (const mover of this.#members) if (mover.link.model.value !== mover.seen) this.#move(mover);
 	}
 	#find() {
 		const found = [];
@@ -121,18 +122,18 @@ var SonicSplit = class extends SonicElement {
 	}
 	#join(element) {
 		const link = linkValue(element);
-		const unwatch = link.watch(() => {
+		const unwatch = link.model.watch(() => {
 			if (this.#isWriting || this.#isQueued) return;
 			this.#isQueued = true;
 			queueMicrotask(() => {
 				if (this.#isQueued) this.#compensate();
 			});
 		});
-		link.land((target, direction) => this.#land(element, target, direction));
+		link.model.setLanding((target, direction) => this.#land(element, target, direction));
 		return {
 			element,
 			link,
-			seen: link.value(),
+			seen: link.model.value,
 			unwatch
 		};
 	}
@@ -155,7 +156,7 @@ var SonicSplit = class extends SonicElement {
 		for (const [index, member] of this.#members.entries()) {
 			const model = this.#model(values, member);
 			const value = values[index] ?? member.seen;
-			member.link.limit(isLocked(member) ? [value, value] : gridLimits(member.link.mapping(), splitLimits(model, index, this.#total)));
+			member.link.model.setLimit(isLocked(member) ? [value, value] : gridLimits(member.link.model.mapping(), splitLimits(model, index, this.#total)));
 		}
 	}
 	#model(values, mover) {
@@ -177,7 +178,7 @@ var SonicSplit = class extends SonicElement {
 			total: this.#total
 		}, {
 			index,
-			target: mover.link.value()
+			target: mover.link.model.value
 		}), mover);
 		this.#limit();
 	}
@@ -187,7 +188,7 @@ var SonicSplit = class extends SonicElement {
 		const snapshot = this.#snapshot;
 		if (snapshot?.mover.element !== event.target) return;
 		this.#snapshot = void 0;
-		const changed = this.#members.filter((member, index) => member !== snapshot.mover && member.link.value() !== snapshot.values[index]);
+		const changed = this.#members.filter((member, index) => member !== snapshot.mover && member.link.model.value !== snapshot.values[index]);
 		queueMicrotask(() => {
 			this.#isWriting = true;
 			try {
@@ -213,8 +214,8 @@ var SonicSplit = class extends SonicElement {
 	#unbind() {
 		for (const { link, unwatch } of this.#members) {
 			unwatch();
-			link.land(void 0);
-			link.limit(void 0);
+			link.model.setLanding(void 0);
+			link.model.setLimit(void 0);
 		}
 		this.#members = [];
 		this.#snapshot = void 0;
@@ -234,14 +235,14 @@ var SonicSplit = class extends SonicElement {
 		try {
 			for (const [index, member] of this.#members.entries()) {
 				const value = values[index];
-				if (value === void 0 || value === member.link.value()) continue;
-				member.link.limit(void 0);
+				if (value === void 0 || value === member.link.model.value) continue;
+				member.link.model.setLimit(void 0);
 				member.link.input(value, member === mover);
 			}
 		} finally {
 			this.#isWriting = false;
 		}
-		for (const member of this.#members) member.seen = member.link.value();
+		for (const member of this.#members) member.seen = member.link.model.value;
 	}
 };