@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/default/elements/number.js

@@ -1,6 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { readPxProperty } from "../lib/read-px-property.js";
-import { SonicRangeElement } from "./range-element.js";
+import { SonicValueElement } from "./value-element.js";
 
 //#region src/elements/number.ts
 const renderNumber = template(`
@@ -16,29 +15,43 @@ const renderNumber = template(`
 			/>
 		</div>
 	`, HTMLDivElement);
-const fallbackTravelPx = 160;
-var SonicNumber = class extends SonicRangeElement {
+var SonicNumber = class extends SonicValueElement {
+	get press() {
+		return this.getAttribute("press") === "step" ? "step" : "none";
+	}
+	set press(gesture) {
+		this.reflect("press", gesture);
+	}
 	#number = renderNumber();
 	#digits = requireChild(this.#number, ".sonic-number-value", HTMLSpanElement);
+	connectedCallback() {
+		this.upgradeProperties("press");
+		super.connectedCallback();
+	}
 	connect(signal) {
 		const number = this.#number;
-		this.appendOnce(number);
+		this.keepControl(number, signal);
 		this.render();
 		this.checkStyles(number, "number.css");
 		this.bindGestures(number, signal, () => ({
 			position: (event) => -event.clientY,
-			travelPx: readPxProperty(getComputedStyle(number), "--_sonic-number-travel", fallbackTravelPx)
+			travelPx: this.travelPx(number, "--_sonic-number-travel")
 		}));
 	}
 	controlRole() {
 		return "spinbutton";
 	}
+	draw() {
+		this.#digits.textContent = this.valueText;
+	}
 	focusTarget() {
 		return this.#number;
 	}
-	render() {
-		this.#digits.textContent = this.valueText();
-		this.renderAria(this.#number);
+	tapTarget() {
+		if (this.press !== "step") return void 0;
+		const mapping = this.mapping();
+		const next = mapping.keyTarget("ArrowUp", this.value);
+		return next === void 0 || next === this.value ? mapping.bounds[0] : next;
 	}
 };
 

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

@@ -0,0 +1,183 @@
+import { placeChildren } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.js";
+import { bindDrag } from "../lib/pointer-drag.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;
+}
+function isUnder(option, x, y) {
+	return isInside(option.getBoundingClientRect(), x, y);
+}
+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();
+	}
+	#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() {
+		if (!this.isBound()) return;
+		const options = this.options();
+		const checked = options.find((option) => optionValue(option) === this.#value);
+		const focusable = checked ?? options[0];
+		const isDisabled = this.isDisabled();
+		for (const option of options) {
+			writeAttribute(option, "disabled", isDisabled ? "" : void 0);
+			writeAttribute(option, "aria-checked", String(option === checked));
+			writeAttribute(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) {
+		bindDrag(group, {
+			grab: (event) => {
+				const option = this.optionOf(event.target);
+				if (!option || this.isDisabled() || this.claimPress(option, event)) return;
+				const boxes = this.#optionBoxes();
+				this.#markPressed(option);
+				return {
+					boxes,
+					option
+				};
+			},
+			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();
+			},
+			move: (press, event) => {
+				press.option = press.boxes.find(([, box]) => isInside(box, event.clientX, event.clientY))?.[0];
+				this.#markPressed(press.option);
+			},
+			release: () => {
+				this.#markPressed(void 0);
+			}
+		}, signal);
+	}
+	#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);
+	}
+	#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)];
+	}
+	#markPressed(pressed) {
+		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === pressed);
+	}
+	#optionBoxes() {
+		return this.options().map((option) => [option, option.getBoundingClientRect()]);
+	}
+	#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 (isOpen && text !== void 0 && this.#text.textContent !== text) 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();
 	}
 };