@xsynaptic/sonic-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,185 @@
+import { placeChildren } from "../lib/render.js";
+import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.js";
+
+//#region src/elements/radio-group.ts
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", 1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", -1]
+]);
+function isUnder(option, x, y) {
+	const box = option.getBoundingClientRect();
+	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
+}
+function optionValue(option) {
+	return option.querySelector("[data-sonic-value]")?.dataset.sonicValue;
+}
+var SonicRadioGroupElement = class extends SonicFormElement {
+	static observedAttributes = [...SonicFormElement.observedAttributes, "value"];
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (next === this.#value) return;
+		this.#value = next;
+		this.render();
+	}
+	#press;
+	#value = "";
+	attributeChangedCallback(name) {
+		if (name === "value") this.#value = this.getAttribute("value") ?? "";
+		this.render();
+	}
+	chooseByClick(option) {
+		this.select(option);
+	}
+	chooseByKey(option, _event) {
+		this.select(option);
+		option.focus();
+	}
+	claimPress(_option, _event) {
+		return false;
+	}
+	connect(signal) {
+		const group = this.group;
+		this.upgradeProperties("value");
+		this.mirrorChildren({
+			control: group,
+			copy: copyNode,
+			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+			place: (copies) => {
+				this.#copyOptions(copies);
+			}
+		}, signal);
+		group.addEventListener("click", (event) => {
+			if (event instanceof PointerEvent && event.pointerType !== "") return;
+			const option = this.optionOf(event.target);
+			if (option) this.chooseByClick(option);
+		}, { signal });
+		this.#bindPress(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;
+			event.preventDefault();
+			this.chooseByKey(next, event);
+		}, { signal });
+	}
+	focusTarget() {
+		return this.options().find((option) => option.tabIndex === 0);
+	}
+	isWrapping() {
+		return true;
+	}
+	optionOf(target) {
+		if (!(target instanceof Element)) return void 0;
+		const option = target.closest("[role=\"radio\"]");
+		return option instanceof HTMLButtonElement && option.parentElement === this.group ? option : void 0;
+	}
+	options() {
+		return [...this.group.children].filter((child) => child instanceof HTMLButtonElement && child.getAttribute("role") === "radio");
+	}
+	releaseTarget(option) {
+		return option;
+	}
+	render() {
+		const options = this.options();
+		const checked = options.find((option) => optionValue(option) === this.#value);
+		const focusable = checked ?? options[0];
+		for (const option of options) {
+			option.disabled = this.isDisabled();
+			option.setAttribute("aria-checked", String(option === checked));
+			option.tabIndex = option === focusable ? 0 : -1;
+		}
+		this.forwardNaming(this.group, true);
+		this.writeFormValue(checked ? this.#value : null, this.#value);
+	}
+	restoreState(state) {
+		this.value = state;
+	}
+	select(option) {
+		const next = optionValue(option);
+		if (next === void 0 || next === this.#value) return;
+		this.value = next;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#bindPress(group, signal) {
+		const isOwn = (event) => event.pointerId === this.#press?.pointerId;
+		const release = (event) => {
+			if (isOwn(event)) this.#hold(void 0);
+		};
+		group.addEventListener("pointerdown", (event) => {
+			const option = this.optionOf(event.target);
+			if (!option || event.button !== 0 || this.isDisabled()) return;
+			if (this.claimPress(option, event)) return;
+			group.setPointerCapture(event.pointerId);
+			this.#hold({
+				option,
+				pointerId: event.pointerId
+			});
+		}, { signal });
+		group.addEventListener("pointermove", (event) => {
+			if (!isOwn(event)) return;
+			this.#hold({
+				option: this.options().find((option) => isUnder(option, event.clientX, event.clientY)),
+				pointerId: event.pointerId
+			});
+		}, { signal });
+		group.addEventListener("pointerup", (event) => {
+			const pressed = isOwn(event) ? this.#press?.option : void 0;
+			release(event);
+			if (!pressed || this.isDisabled()) return;
+			const option = this.releaseTarget(pressed);
+			if (!option) return;
+			this.select(option);
+			if (group.matches(":focus-within")) option.focus();
+		}, { signal });
+		group.addEventListener("pointercancel", release, { signal });
+		group.addEventListener("lostpointercapture", release, { signal });
+		signal.addEventListener("abort", () => {
+			this.#hold(void 0);
+		}, { once: true });
+	}
+	#copyOptions(copies) {
+		const group = this.group;
+		const options = this.options();
+		const focused = this.optionOf(group.querySelector(":scope > :focus"));
+		const focusedValue = focused && optionValue(focused);
+		for (const [index, copy] of copies.entries()) {
+			let option = options[index];
+			if (!option) {
+				option = this.renderOption();
+				group.append(option);
+			}
+			if (option.firstElementChild) placeChildren(option.firstElementChild, [copy]);
+		}
+		for (const option of options.slice(copies.length)) option.remove();
+		this.render();
+		if (focused) this.#refocus(focused, focusedValue);
+	}
+	#hold(press) {
+		this.#press = press;
+		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === press?.option);
+	}
+	#keyTarget(option, key) {
+		const options = this.options();
+		if (key === "Home") return options[0];
+		if (key === "End") return options.at(-1);
+		const step = keySteps.get(key);
+		if (step === void 0) return void 0;
+		const index = options.indexOf(option) + step;
+		if (this.isWrapping()) return options[(index + options.length) % options.length];
+		return options[Math.min(Math.max(index, 0), options.length - 1)];
+	}
+	#refocus(focused, value) {
+		const options = this.options();
+		const next = options.find((option) => optionValue(option) === value) ?? options.find((option) => option.tabIndex === 0);
+		if (next !== focused) next?.focus();
+	}
+};
+
+//#endregion
+export { SonicRadioGroupElement, isUnder, optionValue };

package/dist/default/elements/readout-claim.js

@@ -0,0 +1,81 @@
+//#region src/elements/readout-claim.ts
+const keyRevealMs = 1e3;
+const revealMs = 250;
+var ReadoutClaim = class {
+	get isRevealed() {
+		return this.#isDragging || this.#keyTimer !== void 0;
+	}
+	#holdTimer;
+	#hover;
+	#isDismissed = false;
+	#isDragging = false;
+	#isEditing = false;
+	#keyTimer;
+	#onLapse;
+	constructor(onLapse) {
+		this.#onLapse = onLapse;
+	}
+	conceal(by) {
+		if (by === "drag") {
+			const wasDragging = this.#isDragging;
+			clearTimeout(this.#holdTimer);
+			this.#isDragging = false;
+			return wasDragging;
+		}
+		clearTimeout(this.#keyTimer);
+		const wasTimed = this.#keyTimer !== void 0;
+		this.#keyTimer = void 0;
+		return wasTimed;
+	}
+	dismiss() {
+		const wasHovered = this.#hover !== void 0;
+		this.#hover = void 0;
+		this.#isDismissed = wasHovered || this.#isDismissed;
+		return wasHovered;
+	}
+	edit(isOpen) {
+		this.#isEditing = isOpen;
+		if (isOpen) this.#hover = void 0;
+	}
+	hover(value) {
+		if (value === void 0) this.#isDismissed = false;
+		if (this.#isDismissed || this.#isEditing || this.isRevealed) return;
+		this.#hover = value;
+	}
+	press(isDown) {
+		this.conceal("drag");
+		if (!isDown) {
+			this.#onLapse();
+			return;
+		}
+		this.#holdTimer = setTimeout(() => {
+			this.reveal("drag");
+			this.#onLapse();
+		}, 250);
+	}
+	reveal(by) {
+		this.#hover = void 0;
+		if (by === "drag") {
+			this.#isDragging = true;
+			return;
+		}
+		clearTimeout(this.#keyTimer);
+		this.#keyTimer = setTimeout(() => {
+			this.#keyTimer = void 0;
+			this.#onLapse();
+		}, keyRevealMs);
+	}
+	shown(current, isReadout) {
+		if (this.#isEditing) return {
+			isOpen: true,
+			value: void 0
+		};
+		return {
+			isOpen: (this.isRevealed || this.#hover !== void 0) && isReadout,
+			value: this.#hover ?? current
+		};
+	}
+};
+
+//#endregion
+export { ReadoutClaim };

package/dist/default/elements/readout.js

@@ -0,0 +1,35 @@
+import { requireChild } from "../lib/render.js";
+
+//#region src/elements/readout.ts
+const canPopover = "togglePopover" in HTMLElement.prototype;
+let readoutCount = 0;
+var Readout = class {
+	#anchor;
+	#bubble;
+	#name = `--sonic-readout-${String(readoutCount += 1)}`;
+	#text;
+	constructor(bubble) {
+		this.#bubble = bubble;
+		this.#text = requireChild(bubble, "span", HTMLElement);
+		bubble.style.setProperty("position-anchor", this.#name);
+	}
+	close() {
+		this.#toggle(false);
+	}
+	show({ anchor, isOpen, text }) {
+		if (anchor !== this.#anchor) {
+			this.#anchor?.style.removeProperty("anchor-name");
+			anchor.style.setProperty("anchor-name", this.#name);
+			this.#anchor = anchor;
+		}
+		this.#text.hidden = text === void 0;
+		if (text !== void 0) this.#text.textContent = text;
+		this.#toggle(isOpen);
+	}
+	#toggle(isOpen) {
+		if (canPopover && this.#bubble.isConnected) this.#bubble.togglePopover(isOpen);
+	}
+};
+
+//#endregion
+export { Readout };

package/dist/default/elements/segmented.js

@@ -1,171 +1,21 @@
 import { template } from "../lib/render.js";
-import { SonicFormElement } from "./form-element.js";
-import { copyNode } from "../lib/copy-node.js";
+import { SonicRadioGroupElement } from "./radio-group.js";
 
 //#region src/elements/segmented.ts
 const renderSegmented = template(`<div class="sonic-segmented" role="radiogroup"></div>`, HTMLDivElement);
-const renderSegment = template(`
-		<button class="sonic-segmented-segment" role="radio" type="button">
+const renderOption = template(`
+		<button class="sonic-segmented-option" role="radio" type="button">
 			<span class="sonic-segmented-cap"></span>
 		</button>
 	`, HTMLButtonElement);
-const keySteps = /* @__PURE__ */ new Map([
-	["ArrowDown", 1],
-	["ArrowLeft", -1],
-	["ArrowRight", 1],
-	["ArrowUp", -1]
-]);
-function isUnder(segment, x, y) {
-	const box = segment.getBoundingClientRect();
-	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
-}
-function segmentValue(segment) {
-	return segment.querySelector("[data-sonic-value]")?.dataset.sonicValue;
-}
-var SonicSegmented = class extends SonicFormElement {
-	static observedAttributes = [...SonicFormElement.observedAttributes, "value"];
-	get value() {
-		return this.#value;
-	}
-	set value(next) {
-		if (next === this.#value) return;
-		this.#value = next;
-		this.render();
-	}
-	#press;
-	#segmented = renderSegmented();
-	#value = "";
-	attributeChangedCallback(name) {
-		if (name === "value") this.#value = this.getAttribute("value") ?? "";
-		this.render();
-	}
+var SonicSegmented = class extends SonicRadioGroupElement {
+	group = renderSegmented();
 	connect(signal) {
-		const segmented = this.#segmented;
-		this.upgradeProperties("value");
-		this.mirrorChildren({
-			control: segmented,
-			copy: (options) => {
-				this.#copyOptions(options);
-			},
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]")
-		}, signal);
-		this.checkStyles(segmented, "segmented.css");
-		segmented.addEventListener("click", (event) => {
-			if (event instanceof PointerEvent && event.pointerType !== "") return;
-			const segment = this.#segmentOf(event.target);
-			if (segment) this.#select(segment);
-		}, { signal });
-		this.#bindPress(segmented, signal);
-		segmented.addEventListener("keydown", (event) => {
-			if (event.defaultPrevented) return;
-			const segment = this.#segmentOf(event.target);
-			const next = segment && this.#keyTarget(segment, event.key);
-			if (!next) return;
-			event.preventDefault();
-			this.#select(next);
-			next.focus();
-		}, { signal });
-	}
-	focusTarget() {
-		return this.#segments().find((segment) => segment.tabIndex === 0);
-	}
-	render() {
-		const segmented = this.#segmented;
-		const segments = this.#segments();
-		const checked = segments.find((segment) => segmentValue(segment) === this.#value);
-		const focusable = checked ?? segments[0];
-		for (const segment of segments) {
-			segment.disabled = this.isDisabled();
-			segment.setAttribute("aria-checked", String(segment === checked));
-			segment.tabIndex = segment === focusable ? 0 : -1;
-		}
-		this.forwardNaming(segmented, true);
-		this.writeFormValue(checked ? this.#value : null, this.#value);
-	}
-	restoreState(state) {
-		this.value = state;
-	}
-	#bindPress(segmented, signal) {
-		const isOwn = (event) => event.pointerId === this.#press?.pointerId;
-		const release = (event) => {
-			if (isOwn(event)) this.#hold(void 0);
-		};
-		segmented.addEventListener("pointerdown", (event) => {
-			const segment = this.#segmentOf(event.target);
-			if (!segment || event.button !== 0 || this.isDisabled()) return;
-			segmented.setPointerCapture(event.pointerId);
-			this.#hold({
-				pointerId: event.pointerId,
-				segment
-			});
-		}, { signal });
-		segmented.addEventListener("pointermove", (event) => {
-			if (!isOwn(event)) return;
-			this.#hold({
-				pointerId: event.pointerId,
-				segment: this.#segments().find((segment) => isUnder(segment, event.clientX, event.clientY))
-			});
-		}, { signal });
-		segmented.addEventListener("pointerup", (event) => {
-			const segment = isOwn(event) ? this.#press?.segment : void 0;
-			release(event);
-			if (!segment || this.isDisabled()) return;
-			this.#select(segment);
-			if (segmented.matches(":focus-within")) segment.focus();
-		}, { signal });
-		segmented.addEventListener("pointercancel", release, { signal });
-		segmented.addEventListener("lostpointercapture", release, { signal });
-		signal.addEventListener("abort", () => {
-			this.#hold(void 0);
-		}, { once: true });
-	}
-	#copyOptions(options) {
-		const segmented = this.#segmented;
-		const segments = this.#segments();
-		const focused = this.#segmentOf(segmented.querySelector(":scope > :focus"));
-		const focusedValue = focused && segmentValue(focused);
-		for (const [index, option] of options.entries()) {
-			let segment = segments[index];
-			if (!segment) {
-				segment = renderSegment();
-				segmented.append(segment);
-			}
-			segment.firstElementChild?.replaceChildren(copyNode(option));
-		}
-		for (const segment of segments.slice(options.length)) segment.remove();
-		this.render();
-		if (focused) this.#refocus(focused, focusedValue);
-	}
-	#hold(press) {
-		this.#press = press;
-		for (const segment of this.#segments()) segment.toggleAttribute("data-sonic-pressed", segment === press?.segment);
-	}
-	#keyTarget(segment, key) {
-		const segments = this.#segments();
-		if (key === "Home") return segments[0];
-		if (key === "End") return segments.at(-1);
-		const step = keySteps.get(key);
-		if (step === void 0) return void 0;
-		return segments[(segments.indexOf(segment) + step + segments.length) % segments.length];
-	}
-	#refocus(focused, value) {
-		const segments = this.#segments();
-		const next = segments.find((segment) => segmentValue(segment) === value) ?? segments.find((segment) => segment.tabIndex === 0);
-		if (next !== focused) next?.focus();
-	}
-	#segmentOf(target) {
-		if (!(target instanceof Element)) return void 0;
-		const segment = target.closest(".sonic-segmented-segment");
-		return segment instanceof HTMLButtonElement && segment.parentElement === this.#segmented ? segment : void 0;
-	}
-	#segments() {
-		return [...this.#segmented.children].filter((child) => child instanceof HTMLButtonElement);
+		super.connect(signal);
+		this.checkStyles(this.group, "segmented.css");
 	}
-	#select(segment) {
-		const next = segmentValue(segment);
-		if (next === void 0 || next === this.#value) return;
-		this.value = next;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
+	renderOption() {
+		return renderOption();
 	}
 };
 

package/dist/default/elements/slider.js

@@ -1,10 +1,16 @@
 import { requireChild, template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
+import { SonicValueElement } from "./value-element.js";
 
 //#region src/elements/slider.ts
+function grooveStop(proportion) {
+	if (proportion <= 0) return "0%";
+	if (proportion >= 1) return "100%";
+	return `calc(${String(proportion)} * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) / 2)`;
+}
 const renderSlider = template(`
 		<div class="sonic-slider" role="slider" tabindex="0">
-			<div class="sonic-slider-marks"></div>
+			<div class="sonic-slider-scale" aria-hidden="true"></div>
+			<div class="sonic-slider-notches"></div>
 			<div class="sonic-slider-groove"></div>
 			<div class="sonic-slider-modulation"></div>
 			<div class="sonic-slider-cap"></div>
@@ -21,11 +27,12 @@ const renderSlider = template(`
 			</div>
 		</div>
 	`, HTMLDivElement);
-var SonicSlider = class extends SonicRangeElement {
+var SonicSlider = class extends SonicValueElement {
 	static observedAttributes = [
-		...SonicRangeElement.observedAttributes,
+		...SonicValueElement.observedAttributes,
 		"modulation",
-		"orientation"
+		"orientation",
+		"spring"
 	];
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
@@ -39,60 +46,90 @@ var SonicSlider = class extends SonicRangeElement {
 	set modulation(amount) {
 		this.reflect("modulation", amount);
 	}
+	get modulationValue() {
+		return this.readModulationValue();
+	}
+	set modulationValue(value) {
+		this.writeModulationValue(this.#slider, "slider", value);
+	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
 	}
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get spring() {
+		return this.hasAttribute("spring");
+	}
+	set spring(isSpring) {
+		this.reflect("spring", isSpring);
+	}
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("groovePress", "modulation", "orientation");
+		this.upgradeProperties("groovePress", "modulationValue", "modulation", "orientation", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		const slider = this.#slider;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
-		this.appendOnce(slider);
+		this.bindScale(slider, requireChild(slider, ".sonic-slider-scale", HTMLDivElement), signal);
+		slider.addEventListener("transitionend", (event) => {
+			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
+		}, { signal });
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
 			if (this.groovePress === "none") return;
-			this.input(this.valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
+			this.input(this.mapping().valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
 			return axis;
 		});
 	}
+	controlOrientation() {
+		return this.orientation;
+	}
+	draw() {
+		this.writeProportions(this.#slider, "slider", this.modulation);
+		this.#renderBuffered(this.#slider);
+	}
 	focusTarget() {
 		return this.#slider;
 	}
-	render() {
-		const slider = this.#slider;
-		const positions = this.positions();
-		const [modulationFrom, modulationTo] = this.modulationFractions(this.modulation);
-		slider.style.setProperty("--_sonic-slider-value", String(this.fraction(this.value)));
-		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
-		slider.style.setProperty("--_sonic-slider-modulation-from", String(modulationFrom));
-		slider.style.setProperty("--_sonic-slider-modulation-to", String(modulationTo));
-		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
-		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
-		this.renderAria(slider, this.orientation);
+	springTarget() {
+		return this.spring ? this.originValue() : void 0;
 	}
 	#axis(slider, cap) {
-		const track = slider.getBoundingClientRect();
+		const box = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();
-		if (this.orientation === "vertical") return {
+		return this.orientation === "vertical" ? {
 			position: (event) => -event.clientY,
-			startPx: capBox.height / 2 - track.bottom,
-			travelPx: Math.max(1, track.height - capBox.height)
-		};
-		return {
+			startPx: capBox.height / 2 - box.bottom,
+			travelPx: Math.max(1, box.height - capBox.height)
+		} : {
 			position: (event) => event.clientX,
-			startPx: track.left + capBox.width / 2,
-			travelPx: Math.max(1, track.width - capBox.width)
+			startPx: box.left + capBox.width / 2,
+			travelPx: Math.max(1, box.width - capBox.width)
 		};
 	}
+	#renderBuffered(slider) {
+		const buffered = this.buffered;
+		if (buffered.length === 0) {
+			slider.style.removeProperty("--_sonic-slider-buffered-regions");
+			return;
+		}
+		const { proportionOf } = this.mapping();
+		const stops = buffered.flatMap(([start, end]) => {
+			const from = grooveStop(proportionOf(Math.min(start, end)));
+			const to = grooveStop(proportionOf(Math.max(start, end)));
+			return [
+				`transparent ${from}`,
+				`var(--_sonic-slider-buffered) ${from} ${to}`,
+				`transparent ${to}`
+			];
+		});
+		slider.style.setProperty("--_sonic-slider-buffered-regions", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
+	}
 };
 
 //#endregion