@xsynaptic/sonic-ui 0.5.0 → 0.6.1

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

@@ -1,4 +1,5 @@
-import { attachSlots } from "../lib/render.js";
+import { toNumber } from "../lib/math.js";
+import { appendOnce } from "../lib/owned-control.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
 //#region src/elements/sonic-element.ts
@@ -22,7 +23,6 @@ var SonicElement = class extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#slots;
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -30,13 +30,14 @@ var SonicElement = class extends HTMLElement {
 		this.upgradeProperties("disabled");
 		if (this.#connection) return;
 		const connection = new AbortController();
+		this.#connection = connection;
 		try {
 			this.connect(connection.signal);
 		} catch (error) {
 			connection.abort();
+			this.#connection = void 0;
 			throw error;
 		}
-		this.#connection = connection;
 	}
 	connectedMoveCallback() {}
 	disconnectedCallback() {
@@ -56,12 +57,6 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	appendOnce(control) {
-		const [hook] = control.classList;
-		const stale = [...this.children].filter((child) => child !== control && hook !== void 0 && child.classList.contains(hook));
-		for (const child of stale) child.remove();
-		if (control.parentNode !== this) this.append(control);
-	}
 	checkStyles(control, sheet) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
@@ -73,36 +68,19 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (labels.length > 0) writeLabelledBy(target, labels);
 	}
+	isBound() {
+		return this.#connection !== void 0;
+	}
 	isDisabled() {
 		return this.disabled || this.matches(":disabled");
 	}
-	mirrorChildren({ control, copy, isCopied = () => true, place }, signal) {
-		const slots = this.#slots ?? attachSlots(this);
-		let copies = /* @__PURE__ */ new Map();
-		this.#slots = slots;
-		const mirror = (touched) => {
-			this.appendOnce(control);
-			const children = [...this.childNodes].filter((child) => child !== control);
-			const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
-			const kept = copies;
-			copies = new Map(children.filter((child) => isCopied(child)).map((original) => [original, touched && !touched.has(original) && kept.has(original) ? kept.get(original) : copy(original)]));
-			place([...copies.values()].filter((made) => made !== void 0));
-			slots.shown.assign(...slotted.filter((child) => !isCopied(child)), control);
-			slots.kept.assign(...slotted.filter((child) => isCopied(child)));
+	keepControl(control, signal) {
+		const keep = () => {
+			appendOnce(this, control);
 		};
-		const observer = new MutationObserver((records) => {
-			const changes = records.filter((record) => this.#isCopiedChange(record, control, isCopied));
-			if (changes.length === 0) return;
-			if (changes.some((record) => record.target === this)) mirror();
-			else mirror(new Set(changes.map((record) => this.#childHolding(record.target))));
-		});
-		mirror();
-		observer.observe(this, {
-			attributes: true,
-			characterData: true,
-			childList: true,
-			subtree: true
-		});
+		const observer = new MutationObserver(keep);
+		keep();
+		observer.observe(this, { childList: true });
 		signal.addEventListener("abort", () => {
 			observer.disconnect();
 		}, { once: true });
@@ -111,9 +89,7 @@ var SonicElement = class extends HTMLElement {
 		return [];
 	}
 	numberAttribute(name, fallback) {
-		const attribute = this.getAttribute(name);
-		if (attribute === null || attribute.trim() === "") return fallback;
-		const parsed = Number(attribute);
+		const parsed = toNumber(this.getAttribute(name));
 		return Number.isFinite(parsed) ? parsed : fallback;
 	}
 	optionalNumberAttribute(name) {
@@ -121,11 +97,11 @@ var SonicElement = class extends HTMLElement {
 		return Number.isNaN(value) ? void 0 : value;
 	}
 	reflect(name, value) {
-		if (value === true) {
-			this.setAttribute(name, "");
+		if (typeof value !== "number" && typeof value !== "string" && value !== true) {
+			this.removeAttribute(name);
 			return;
 		}
-		writeAttribute(this, name, value === false || value === null ? void 0 : value?.toString());
+		this.setAttribute(name, value === true ? "" : value.toString());
 	}
 	toggleState(state, isOn) {
 		if (isOn) this.internals?.states.add(state);
@@ -139,25 +115,11 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
-	#childHolding(node) {
-		let current = node;
-		while (current && current.parentNode !== this) current = current.parentNode;
-		return current ?? void 0;
-	}
 	#focused() {
 		const root = this.getRootNode();
 		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
 		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
 	}
-	#isCopiedChange(record, control, isCopied) {
-		if (record.target === this) {
-			if (record.type === "attributes") return false;
-			return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
-		}
-		const child = this.#childHolding(record.target);
-		if (child === void 0 || child === control) return false;
-		return isCopied(child) || record.type === "attributes" && record.target === child;
-	}
 };
 
 //#endregion

package/dist/default/elements/switch.js

@@ -1,7 +1,8 @@
 import { clamp } from "../lib/math.js";
-import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { bindHold } from "../lib/hold.js";
+import { requireChild, template } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
 
 //#region src/elements/switch.ts
@@ -60,7 +61,6 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 	group = renderSwitch();
 	#bare = renderBare();
 	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
-	#batPress;
 	#checked = false;
 	#holding;
 	#isClickSwallowed = false;
@@ -92,7 +92,7 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		option.focus();
 	}
 	claimPress(option, event) {
-		if (this.#grabBat(event)) return true;
+		if (this.#isOnBat(event)) return true;
 		if (!this.#isMomentary(option)) return false;
 		this.group.setPointerCapture(event.pointerId);
 		this.#hold(option, event.pointerId);
@@ -108,9 +108,8 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 			this.#isClickSwallowed = false;
 			if (!isSwallowed) this.#setChecked(!this.checked);
 		}, { signal });
-		this.#bare.addEventListener("pointerdown", (event) => {
+		this.#bare.addEventListener("pointerdown", () => {
 			this.#isClickSwallowed = false;
-			if (event.button === 0 && !this.isDisabled()) this.#grabBat(event);
 		}, { signal });
 		this.#bindBat(group, signal);
 		this.#holding = bindHold(group, {
@@ -138,12 +137,13 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		return option;
 	}
 	render() {
+		if (!this.isBound()) return;
 		const group = this.group;
 		const options = this.options();
 		if (options.length > 0) {
 			this.#bare.remove();
 			writeAttribute(group, "role", "radiogroup");
-			group.dataset.sonicPositionCount = String(options.length);
+			writeAttribute(group, "data-sonic-position-count", String(options.length));
 			super.render();
 			this.#renderThrow(this.#checkedIndex(options));
 			return;
@@ -153,8 +153,8 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		writeAttribute(group, "role", void 0);
 		delete group.dataset.sonicPositionCount;
 		if (bare.parentElement !== group) group.append(bare);
-		bare.disabled = this.isDisabled();
-		bare.setAttribute("aria-checked", String(isChecked));
+		writeAttribute(bare, "disabled", this.isDisabled() ? "" : void 0);
+		writeAttribute(bare, "aria-checked", String(isChecked));
 		this.forwardNaming(group, false);
 		this.forwardNaming(bare, true);
 		const onSide = this.orientation === "horizontal" ? 1 : -1;
@@ -172,41 +172,32 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		return this.orientation === "horizontal" ? event.clientX : event.clientY;
 	}
 	#bindBat(group, signal) {
-		const drop = (event) => {
-			if (event.pointerId === this.#batPress?.pointerId) this.#batPress = void 0;
-		};
-		group.addEventListener("pointermove", (event) => {
-			const press = this.#batPress;
-			if (press?.pointerId !== event.pointerId || this.isDisabled()) return;
-			const delta = this.#along(event) - press.last;
-			if (Math.abs(delta) < this.#bat.getBoundingClientRect().width / 4) return;
-			press.hasMoved = true;
-			press.last = this.#along(event);
-			this.#throwBy(Math.sign(delta), event.pointerId);
-		}, { signal });
-		group.addEventListener("pointerup", (event) => {
-			const press = this.#batPress;
-			if (press?.pointerId !== event.pointerId) return;
-			this.#batPress = void 0;
-			if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
-			this.#isClickSwallowed = true;
-		}, { signal });
-		group.addEventListener("pointercancel", drop, { signal });
-		group.addEventListener("lostpointercapture", drop, { signal });
+		bindDrag(group, {
+			grab: (event) => {
+				if (!(event.target === this.#bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
+				return {
+					hasMoved: false,
+					last: this.#along(event),
+					width: this.#bat.getBoundingClientRect().width
+				};
+			},
+			lift: (press, event) => {
+				if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
+				this.#isClickSwallowed = true;
+			},
+			move: (press, event) => {
+				if (this.isDisabled()) return;
+				const delta = this.#along(event) - press.last;
+				if (Math.abs(delta) < press.width / 4) return;
+				press.hasMoved = true;
+				press.last = this.#along(event);
+				this.#throwBy(Math.sign(delta), event.pointerId);
+			}
+		}, signal);
 	}
 	#checkedIndex(options) {
 		return options.findIndex((option) => optionValue(option) === this.value);
 	}
-	#grabBat(event) {
-		if (!isUnder(this.#bat, event.clientX, event.clientY)) return false;
-		this.group.setPointerCapture(event.pointerId);
-		this.#batPress = {
-			hasMoved: false,
-			last: this.#along(event),
-			pointerId: event.pointerId
-		};
-		return true;
-	}
 	#hasSprungFrom(option) {
 		if (!option || !this.#isMomentary(option)) return false;
 		this.#holding?.release();
@@ -222,6 +213,9 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		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;
 	}
+	#isOnBat(event) {
+		return isUnder(this.#bat, event.clientX, event.clientY);
+	}
 	#pressBat(event) {
 		const options = this.options();
 		if (options.length === 0) {