@xsynaptic/sonic-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,410 @@
+import { requireChild } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { RangeEntry } from "./range-entry.js";
+import { clampUnit, linearTaper, logTaper, skewTaper } from "../lib/taper.js";
+
+//#region src/elements/range-element.ts
+const fineScale = .1;
+const keyRevealMs = 1e3;
+const pageSteps = 10;
+const revealMs = 250;
+const revealPx = 4;
+const canPopover = "togglePopover" in HTMLElement.prototype;
+let instanceCount = 0;
+const resetKeys = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", -1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", 1],
+	["PageDown", -10],
+	["PageUp", pageSteps]
+]);
+const sliderAttributes = [
+	"aria-disabled",
+	"aria-orientation",
+	"aria-valuemax",
+	"aria-valuemin",
+	"aria-valuenow",
+	"aria-valuetext",
+	"role",
+	"tabindex"
+];
+var SonicRangeElement = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"max",
+		"midpoint",
+		"min",
+		"notched",
+		"origin",
+		"readout",
+		"step",
+		"taper",
+		"value"
+	];
+	get default() {
+		return this.optionalNumberAttribute("default");
+	}
+	set default(value) {
+		this.reflect("default", value);
+	}
+	get dimmed() {
+		return this.hasAttribute("dimmed");
+	}
+	set dimmed(isDimmed) {
+		this.reflect("dimmed", isDimmed);
+	}
+	get doublePress() {
+		return this.getAttribute("double-press") === "reset" ? "reset" : "type";
+	}
+	set doublePress(gesture) {
+		this.reflect("double-press", gesture);
+	}
+	get formatValue() {
+		return this.#formatValue;
+	}
+	set formatValue(format) {
+		this.#formatValue = format;
+		this.render();
+	}
+	get max() {
+		return this.numberAttribute("max", 100);
+	}
+	set max(value) {
+		this.reflect("max", value);
+	}
+	get midpoint() {
+		return this.optionalNumberAttribute("midpoint");
+	}
+	set midpoint(value) {
+		this.reflect("midpoint", value);
+	}
+	get min() {
+		return this.numberAttribute("min", 0);
+	}
+	set min(value) {
+		this.reflect("min", value);
+	}
+	get notched() {
+		return this.hasAttribute("notched");
+	}
+	set notched(isNotched) {
+		this.reflect("notched", isNotched);
+	}
+	get origin() {
+		return this.optionalNumberAttribute("origin");
+	}
+	set origin(value) {
+		this.reflect("origin", value);
+	}
+	get parseValue() {
+		return this.#parseValue;
+	}
+	set parseValue(parse) {
+		this.#parseValue = parse;
+	}
+	get readout() {
+		return this.hasAttribute("readout");
+	}
+	set readout(isShown) {
+		this.reflect("readout", isShown);
+	}
+	get step() {
+		return this.numberAttribute("step", 1);
+	}
+	set step(value) {
+		this.reflect("step", value);
+	}
+	get taper() {
+		return this.getAttribute("taper") === "log" ? "log" : "linear";
+	}
+	set taper(curve) {
+		this.reflect("taper", curve);
+	}
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (this.#drag) return;
+		this.#write(next);
+	}
+	#drag;
+	#entry;
+	#formatValue;
+	#instance = String(instanceCount += 1);
+	#isDirty = false;
+	#keyRevealTimer;
+	#parseValue;
+	#readout;
+	#value = 0;
+	attributeChangedCallback(name) {
+		if (name === "value") {
+			if (this.#drag) return;
+			this.#isDirty = false;
+		}
+		if (name === "disabled" && this.isDisabled()) {
+			this.#entry?.close(false);
+			this.#endDrag();
+		}
+		this.#value = this.#clamp(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
+		this.render();
+	}
+	connectedCallback() {
+		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "formatValue", "parseValue", "value");
+		super.connectedCallback();
+	}
+	bindGestures(control, signal, grab) {
+		const entry = this.#bindEntry(control, signal);
+		control.addEventListener("pointerdown", (event) => {
+			if (event.button !== 0 || this.isDisabled() || entry.isOpen) return;
+			if (event.pointerType === "touch") event.preventDefault();
+			control.focus();
+			if (event.metaKey || event.ctrlKey) {
+				this.#reset();
+				return;
+			}
+			const fromValue = this.#value;
+			const axis = grab(event);
+			if (!axis) return;
+			const startPosition = axis.position(event);
+			const drag = {
+				fromValue,
+				isRevealed: false,
+				lastPosition: startPosition,
+				pointerId: event.pointerId,
+				position: axis.position,
+				rawFraction: this.fraction(this.#value),
+				revealTimer: void 0,
+				startPosition,
+				travelPx: axis.travelPx
+			};
+			drag.revealTimer = setTimeout(() => {
+				this.#reveal(drag);
+			}, revealMs);
+			this.#drag = drag;
+			control.setPointerCapture(event.pointerId);
+			this.toggleState("dragging", true);
+		}, { signal });
+		control.addEventListener("pointermove", (event) => {
+			const drag = this.#drag;
+			if (event.pointerId !== drag?.pointerId) return;
+			const position = drag.position(event);
+			const scale = event.shiftKey ? fineScale : 1;
+			drag.rawFraction = clampUnit(drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale);
+			drag.lastPosition = position;
+			if (Math.abs(position - drag.startPosition) >= revealPx) this.#reveal(drag);
+			this.input(this.valueAt(drag.rawFraction));
+		}, { signal });
+		const endDrag = (event) => {
+			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
+		};
+		control.addEventListener("pointercancel", (event) => {
+			endDrag(event);
+			entry.forgetPress();
+		}, { signal });
+		control.addEventListener("lostpointercapture", endDrag, { signal });
+		control.addEventListener("pointerup", (event) => {
+			if (event.pointerId !== this.#drag?.pointerId) return;
+			this.#endDrag();
+			if (!entry.press(event)) return;
+			if (this.doublePress === "reset") this.#reset();
+			else entry.open();
+		}, { signal });
+		this.#bindKeys(control, entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endDrag();
+			this.#hideForKeys();
+		}, { once: true });
+	}
+	clampRange(next) {
+		return Math.min(this.#max(), Math.max(this.min, next));
+	}
+	fraction(value) {
+		return (this.#taper() ?? linearTaper(this.min, this.#max())).position(value);
+	}
+	input(next) {
+		const previous = this.#value;
+		this.#write(next);
+		if (this.#value === previous) return false;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	originFraction() {
+		return this.fraction(this.origin ?? this.min);
+	}
+	positions() {
+		const positions = Math.round(this.range() / this.step) + 1;
+		if (!this.notched || !Number.isFinite(positions) || positions < 2) return;
+		return positions;
+	}
+	range() {
+		return this.#max() - this.min;
+	}
+	renderAria(control, orientation) {
+		this.writeFormValue(String(this.#value), String(this.#value));
+		if (this.#entry?.isOpen) {
+			for (const name of sliderAttributes) control.removeAttribute(name);
+			this.forwardNaming(control, false);
+			this.#renderReadout();
+			return;
+		}
+		control.setAttribute("role", "slider");
+		control.setAttribute("aria-valuemin", String(this.min));
+		control.setAttribute("aria-valuemax", String(this.#max()));
+		control.setAttribute("aria-valuenow", String(this.#value));
+		if (orientation) control.setAttribute("aria-orientation", orientation);
+		writeAttribute(control, "aria-valuetext", this.#formatValue?.(this.#value));
+		this.forwardNaming(control, true);
+		this.#renderDisabled(control);
+		this.#renderReadout();
+	}
+	restoreState(state) {
+		this.value = Number(state);
+	}
+	valueAt(fraction) {
+		return (this.#taper() ?? linearTaper(this.min, this.#max())).value(fraction);
+	}
+	#bindEntry(control, signal) {
+		const input = requireChild(control, "input", HTMLInputElement);
+		const bubble = requireChild(control, "[popover]", HTMLElement);
+		const anchor = `--sonic-readout-${this.#instance}`;
+		input.id = `sonic-entry-${this.#instance}`;
+		this.#readout = {
+			bubble,
+			text: requireChild(bubble, "span", HTMLElement)
+		};
+		control.style.setProperty("anchor-name", anchor);
+		bubble.style.setProperty("position-anchor", anchor);
+		const entry = new RangeEntry(input, {
+			commit: (text) => {
+				this.#commit((this.#parseValue ?? Number.parseFloat)(text));
+			},
+			text: () => this.#parseValue ? this.#valueText() : String(this.#value),
+			toggle: (isOpen) => {
+				if (isOpen) this.forwardNaming(input, true);
+				this.toggleState("editing", isOpen);
+				this.render();
+			}
+		});
+		this.#entry = entry;
+		entry.bind(control, signal);
+		return entry;
+	}
+	#bindKeys(control, entry, signal) {
+		control.addEventListener("keydown", (event) => {
+			if (this.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				entry.open();
+				return;
+			}
+			const next = this.#keyTarget(event.key);
+			if (next === void 0) return;
+			event.preventDefault();
+			this.#commit(next);
+			this.#revealForKeys();
+		}, { signal });
+		control.addEventListener("blur", () => {
+			this.#hideForKeys();
+		}, { signal });
+	}
+	#clamp(next) {
+		const min = this.min;
+		const step = this.step;
+		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+		return this.clampRange(Number(stepped.toPrecision(12)));
+	}
+	#commit(next) {
+		if (this.input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#endDrag() {
+		const drag = this.#drag;
+		if (!drag) return;
+		clearTimeout(drag.revealTimer);
+		this.#drag = void 0;
+		this.toggleState("dragging", false);
+		this.#renderReadout();
+		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#hideForKeys() {
+		clearTimeout(this.#keyRevealTimer);
+		if (this.#keyRevealTimer === void 0) return;
+		this.#keyRevealTimer = void 0;
+		this.#renderReadout();
+	}
+	#isValueShown() {
+		return (this.#drag?.isRevealed === true || this.#keyRevealTimer !== void 0) && this.readout;
+	}
+	#keyTarget(key) {
+		if (key === "Home") return this.min;
+		if (key === "End") return this.#max();
+		if (resetKeys.has(key)) return this.default;
+		const steps = keySteps.get(key);
+		if (steps === void 0) return void 0;
+		const step = this.step > 0 ? this.step : this.range() / 100;
+		const taper = this.#taper();
+		if (!taper) return this.#value + steps * step;
+		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
+		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
+	}
+	#max() {
+		return Math.max(this.min, this.max);
+	}
+	#renderDisabled(control) {
+		if (this.isDisabled()) {
+			control.setAttribute("aria-disabled", "true");
+			control.removeAttribute("tabindex");
+			return;
+		}
+		control.removeAttribute("aria-disabled");
+		control.setAttribute("tabindex", "0");
+	}
+	#renderReadout() {
+		const readout = this.#readout;
+		if (!readout || !canPopover || !this.isConnected) return;
+		const isEditing = this.#entry?.isOpen === true;
+		readout.text.hidden = isEditing;
+		if (!isEditing) readout.text.textContent = this.#valueText();
+		readout.bubble.togglePopover(isEditing || this.#isValueShown());
+	}
+	#reset() {
+		this.#commit(this.default ?? NaN);
+	}
+	#reveal(drag) {
+		if (drag.isRevealed || this.#drag !== drag) return;
+		drag.isRevealed = true;
+		this.#renderReadout();
+	}
+	#revealForKeys() {
+		clearTimeout(this.#keyRevealTimer);
+		this.#keyRevealTimer = setTimeout(() => {
+			this.#hideForKeys();
+		}, keyRevealMs);
+		this.#renderReadout();
+	}
+	#taper() {
+		if (this.notched) return void 0;
+		const min = this.min;
+		const max = this.#max();
+		return (this.taper === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, this.midpoint ?? NaN);
+	}
+	#valueText() {
+		return this.#formatValue?.(this.#value) ?? String(this.#value);
+	}
+	#write(next) {
+		if (!Number.isFinite(next)) return;
+		this.#isDirty = true;
+		const clamped = this.#clamp(next);
+		if (clamped === this.#value) return;
+		this.#value = clamped;
+		this.render();
+	}
+};
+
+//#endregion
+export { SonicRangeElement };

package/dist/{elements → default/elements}/range-entry.js

@@ -12,6 +12,7 @@ var RangeEntry = class {
 	#input;
 	#isOpen = false;
 	#lastPress;
+	#openedText = "";
 	#options;
 	constructor(input, options) {
 		this.#input = input;
@@ -40,7 +41,7 @@ var RangeEntry = class {
 		this.#isOpen = false;
 		this.#input.hidden = true;
 		this.#options.toggle(false);
-		if (isCommitting) this.#options.commit(this.#input.value);
+		if (isCommitting && this.#input.value !== this.#openedText) this.#options.commit(this.#input.value);
 	}
 	forgetPress() {
 		this.#lastPress = void 0;
@@ -48,7 +49,8 @@ var RangeEntry = class {
 	open() {
 		const input = this.#input;
 		this.#isOpen = true;
-		input.value = this.#options.text();
+		this.#openedText = this.#options.text();
+		input.value = this.#openedText;
 		input.hidden = false;
 		this.#options.toggle(true);
 		input.focus();
@@ -69,5 +71,4 @@ var RangeEntry = class {
 };
 
 //#endregion
-export { RangeEntry };
-//# sourceMappingURL=range-entry.js.map
+export { RangeEntry };

package/dist/default/elements/segmented.js

@@ -0,0 +1,173 @@
+import { template } from "../lib/render.js";
+import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.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">
+			<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();
+	}
+	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);
+	}
+	#select(segment) {
+		const next = segmentValue(segment);
+		if (next === void 0 || next === this.#value) return;
+		this.value = next;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+};
+
+//#endregion
+export { SonicSegmented };

package/dist/{elements → default/elements}/slider.js

@@ -22,7 +22,23 @@ const renderSlider = template(`
 	`, HTMLDivElement);
 var SonicSlider = class extends SonicRangeElement {
 	static observedAttributes = [...SonicRangeElement.observedAttributes, "orientation"];
+	get groovePress() {
+		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
+	}
+	set groovePress(gesture) {
+		this.reflect("groove-press", gesture);
+	}
+	get orientation() {
+		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+	}
+	set orientation(direction) {
+		this.reflect("orientation", direction);
+	}
 	#slider = renderSlider();
+	connectedCallback() {
+		this.upgradeProperties("groovePress", "orientation");
+		super.connectedCallback();
+	}
 	connect(signal) {
 		const slider = this.#slider;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
@@ -32,11 +48,14 @@ var SonicSlider = class extends SonicRangeElement {
 		this.bindGestures(slider, signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
-			if (this.getAttribute("groove-press") === "none") return;
+			if (this.groovePress === "none") return;
 			this.input(this.valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
 			return axis;
 		});
 	}
+	focusTarget() {
+		return this.#slider;
+	}
 	render() {
 		const slider = this.#slider;
 		const positions = this.positions();
@@ -44,12 +63,12 @@ var SonicSlider = class extends SonicRangeElement {
 		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
 		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
 		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
-		this.renderAria(slider, this.#isVertical() ? "vertical" : "horizontal");
+		this.renderAria(slider, this.orientation);
 	}
 	#axis(slider, cap) {
 		const track = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();
-		if (this.#isVertical()) return {
+		if (this.orientation === "vertical") return {
 			position: (event) => -event.clientY,
 			startPx: capBox.height / 2 - track.bottom,
 			travelPx: Math.max(1, track.height - capBox.height)
@@ -60,11 +79,7 @@ var SonicSlider = class extends SonicRangeElement {
 			travelPx: Math.max(1, track.width - capBox.width)
 		};
 	}
-	#isVertical() {
-		return this.getAttribute("orientation") === "vertical";
-	}
 };
 
 //#endregion
-export { SonicSlider };
-//# sourceMappingURL=slider.js.map
+export { SonicSlider };