@xsynaptic/sonic-ui 0.5.0 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # @xsynaptic/sonic-ui
 
-Native custom elements for audio interfaces. Each control renders in the light DOM, drawn in CSS, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
+Native custom elements for audio interfaces. Each control renders in the light DOM, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
 
 Early and unstable: any 0.x release may break the API.
 
@@ -23,4 +23,6 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
+Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.
+
 Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/dat.js

@@ -16,6 +16,7 @@ function readDatHeader(buffer) {
 	if (channels < 1) throw new Error("A .dat header names no channels");
 	const sampleRate = view.getInt32(8, true);
 	const samplesPerPixel = view.getInt32(12, true);
+	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
 	return {
 		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
 		channels,
@@ -34,15 +35,15 @@ function datByteRange(header, fromPair, toPair) {
 	const pairBytes = header.channels * 2 * header.bits / 8;
 	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
 }
-function readDatSamples(header, body) {
-	return header.bits === 8 ? new Int8Array(body) : new Int16Array(body, 0, Math.floor(body.byteLength / 2));
+function readDatSamples(header, body, byteOffset = 0) {
+	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
 }
-function readDatPeaks(header, body) {
+function readDatPeaks(header, body, byteOffset = 0) {
 	return {
 		channels: header.channels,
 		fullScale: header.bits === 8 ? 128 : 32768,
 		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body)
+		samples: readDatSamples(header, body, byteOffset)
 	};
 }
 

package/dist/default/define/button.js

@@ -1,5 +1,5 @@
-import { defineOnce } from "../elements/define-once.js";
 import { SonicButton } from "../elements/button.js";
+import { defineOnce } from "../elements/define-once.js";
 
 //#region src/define/button.ts
 defineOnce("sonic-button", SonicButton);

package/dist/default/define.js

@@ -1,12 +1,12 @@
+import "./define/button.js";
 import "./define/dial.js";
 import "./define/envelope.js";
-import "./define/button.js";
-import "./define/switch.js";
 import "./define/meter.js";
 import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";
 import "./define/split.js";
+import "./define/switch.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";
 import "./define/xy.js";

package/dist/default/elements/button.js

@@ -113,12 +113,12 @@ var SonicButton = class extends SonicFormElement {
 		return this.#button;
 	}
 	render() {
+		if (!this.isBound()) return;
 		const button = this.#button;
-		button.disabled = this.isDisabled();
+		writeAttribute(button, "disabled", this.isDisabled() ? "" : void 0);
 		writeAttribute(button, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
 		writeAttribute(button, "aria-busy", this.busy ? "true" : void 0);
-		button.removeAttribute("aria-pressed");
-		if (this.latching) button.setAttribute("aria-pressed", String(this.pressed));
+		writeAttribute(button, "aria-pressed", this.latching ? String(this.pressed) : void 0);
 		this.toggleState("pressed", this.pressed);
 		this.forwardNaming(button, true);
 		const submitted = this.latching && this.pressed ? this.value : null;

package/dist/default/elements/envelope.js

@@ -4,10 +4,10 @@ import { SonicElement } from "./sonic-element.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 
 //#region src/elements/envelope.ts
 const curveStages = [
@@ -31,10 +31,22 @@ function flip(point, isFlipped) {
 function isParent(node) {
 	return "querySelector" in node;
 }
+const emptyPath = {
+	fill: "",
+	floor: {
+		from: 0,
+		to: 0
+	},
+	stroke: ""
+};
+function stageParts(envelope, hook, stages) {
+	return new Map(stages.map((stage) => [stage, requireChild(envelope, `.${hook}[data-sonic-stage="${stage}"]`, HTMLDivElement)]));
+}
 const renderEnvelope = template(`
 		<div class="sonic-envelope" aria-hidden="true">
 			<svg class="sonic-envelope-graph" preserveAspectRatio="none" viewBox="0 0 1 1">
 				<path class="sonic-envelope-fill" />
+				<rect class="sonic-envelope-fill sonic-envelope-floor" y="1" />
 				<path class="sonic-envelope-line" />
 			</svg>
 			<div class="sonic-envelope-handle" data-sonic-stage="delay" hidden></div>
@@ -119,8 +131,12 @@ var SonicEnvelope = class extends SonicElement {
 		this.#renderReadout();
 	});
 	#envelope = renderEnvelope();
+	#curveHandles = stageParts(this.#envelope, "sonic-envelope-curve", curveStages);
 	#fill = requireChild(this.#envelope, ".sonic-envelope-fill", SVGElement);
+	#floor = requireChild(this.#envelope, ".sonic-envelope-floor", SVGElement);
 	#graph = requireChild(this.#envelope, ".sonic-envelope-graph", SVGElement);
+	#handles = stageParts(this.#envelope, "sonic-envelope-handle", timeStages);
+	#isDriving = false;
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#pointerDrag;
 	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
@@ -145,7 +161,7 @@ var SonicEnvelope = class extends SonicElement {
 	connect(signal) {
 		const envelope = this.#envelope;
 		this.#signal = signal;
-		this.appendOnce(envelope);
+		this.keepControl(envelope, signal);
 		this.#bind();
 		this.checkStyles(envelope, "envelope.css");
 		this.#bindPointer(envelope, signal);
@@ -162,7 +178,7 @@ var SonicEnvelope = class extends SonicElement {
 			if (!element) continue;
 			const link = linkValue(element);
 			const unwatch = link.watch(() => {
-				this.#draw();
+				if (!this.#isDriving) this.#draw();
 			});
 			this.#bindings.set(name, {
 				element,
@@ -202,32 +218,30 @@ var SonicEnvelope = class extends SonicElement {
 	}
 	#draw() {
 		const shape = this.#readShape();
-		const path = this.#bindings.size === 0 ? {
-			fill: "",
-			stroke: ""
-		} : adsrPath(shape);
+		const path = this.#bindings.size === 0 ? emptyPath : adsrPath(shape);
 		this.#shape = shape;
-		this.#line.setAttribute("d", path.stroke);
-		this.#fill.setAttribute("d", path.fill);
-		for (const stage of timeStages) this.#drawPoint(`.sonic-envelope-handle[data-sonic-stage="${stage}"]`, {
+		writeAttribute(this.#line, "d", path.stroke);
+		writeAttribute(this.#fill, "d", path.fill);
+		writeAttribute(this.#floor, "x", String(path.floor.from));
+		writeAttribute(this.#floor, "width", String(path.floor.to - path.floor.from));
+		for (const [stage, part] of this.#handles) this.#drawPoint(part, {
 			at: shape.handles.find((point) => point.stage === stage),
 			drives: this.#drives(stage)
 		});
-		for (const stage of curveStages) this.#drawPoint(`.sonic-envelope-curve[data-sonic-stage="${stage}"]`, {
+		for (const [stage, part] of this.#curveHandles) this.#drawPoint(part, {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
 		this.#renderReadout();
 	}
-	#drawPoint(selector, point) {
-		const part = requireChild(this.#envelope, selector, HTMLDivElement);
+	#drawPoint(part, point) {
 		const { at, drives } = point;
-		part.hidden = !at;
+		writeAttribute(part, "hidden", at ? void 0 : "");
 		if (!at) return;
 		const isStill = this.isDisabled() || drives.every(({ binding }) => binding.link.isDisabled());
 		part.style.setProperty("--_sonic-envelope-x", String(at.x));
 		part.style.setProperty("--_sonic-envelope-y", String(at.y));
-		part.dataset.sonicAxes = drives.map(({ axis }) => axis).join("");
+		writeAttribute(part, "data-sonic-axes", drives.map(({ axis }) => axis).join(""));
 		writeAttribute(part, "data-sonic-disabled", isStill ? "" : void 0);
 	}
 	#drives(stage) {
@@ -284,11 +298,13 @@ var SonicEnvelope = class extends SonicElement {
 		const step = stepFieldDrag(mappings, drag.state, flip(pointerMove(event), drag.isFlipped));
 		drag.state = step.state;
 		if (step.state.isEngaged) this.#claim.reveal("drag");
+		this.#isDriving = true;
 		for (const { axis, binding } of drag.drives) {
 			const next = step[axis];
 			if (next !== void 0) binding.link.input(next);
 		}
-		this.#renderReadout();
+		this.#isDriving = false;
+		this.#draw();
 	}
 	#pressed(event) {
 		const part = event.target instanceof Element ? event.target.closest(".sonic-envelope-handle, .sonic-envelope-curve") : void 0;

package/dist/default/elements/meter.js

@@ -1,3 +1,4 @@
+import { toNumber } from "../lib/math.js";
 import { template } from "../lib/render.js";
 import { SonicElement } from "./sonic-element.js";
 import { parseNumberList } from "../lib/number-list.js";
@@ -51,7 +52,8 @@ var SonicMeter = class extends SonicElement {
 	get level() {
 		return this.#level;
 	}
-	set level(amplitude) {
+	set level(level) {
+		const amplitude = toNumber(level);
 		if (!Number.isFinite(amplitude)) return;
 		const decibels = toDecibels(amplitude);
 		this.#level = amplitude;
@@ -121,7 +123,8 @@ var SonicMeter = class extends SonicElement {
 		const now = performance.now();
 		if (name === "ballistics") this.#velocity = 0;
 		else if (name === "value") this.#readValue(now);
-		this.#renderSegments();
+		this.#segments = this.segments;
+		if (name === "segments") this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
 	}
@@ -131,7 +134,7 @@ var SonicMeter = class extends SonicElement {
 	connect(signal) {
 		const now = performance.now();
 		this.upgradeProperties("ballistics", "max", "min", "orientation", "origin", "segments", "value", "level");
-		this.appendOnce(this.#meter);
+		this.keepControl(this.#meter, signal);
 		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
@@ -165,6 +168,7 @@ var SonicMeter = class extends SonicElement {
 		if (value !== void 0) this.#peak = Math.max(this.#peak, value);
 	}
 	#render(now) {
+		if (!this.isBound()) return;
 		const meter = this.#meter;
 		const origin = this.origin === void 0 ? 0 : this.#proportionOf(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
@@ -185,9 +189,9 @@ var SonicMeter = class extends SonicElement {
 		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
 	}
 	#renderSegments() {
+		if (!this.isBound()) return;
 		const meter = this.#meter;
-		const segments = this.segments;
-		this.#segments = segments;
+		const segments = this.#segments;
 		this.toggleState("ladder", segments !== void 0);
 		if (!segments) {
 			for (const name of [
@@ -226,9 +230,9 @@ var SonicMeter = class extends SonicElement {
 			this.#stepNeedle(elapsedMs);
 			return;
 		}
-		const { fallDecibelsPerSecond, riseMs } = ballisticsRates[mode];
+		const { fallDecibelsPerSecond, riseTimeConstantMs } = ballisticsRates[mode];
 		const floor = Math.max(this.#target, this.min);
-		this.#bar = this.#target > this.#bar ? this.#risen(riseMs, elapsedMs) : fall(this.#bar, {
+		this.#bar = this.#target > this.#bar ? this.#risen(riseTimeConstantMs, elapsedMs) : fall(this.#bar, {
 			fallDecibelsPerSecond,
 			floor
 		}, elapsedMs);

package/dist/default/elements/number.js

@@ -30,7 +30,7 @@ var SonicNumber = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const number = this.#number;
-		this.appendOnce(number);
+		this.keepControl(number, signal);
 		this.render();
 		this.checkStyles(number, "number.css");
 		this.bindGestures(number, signal, () => ({

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

@@ -1,6 +1,8 @@
 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([
@@ -9,10 +11,12 @@ const keySteps = /* @__PURE__ */ new Map([
 	["ArrowRight", 1],
 	["ArrowUp", -1]
 ]);
-function isUnder(option, x, y) {
-	const box = option.getBoundingClientRect();
+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;
 }
@@ -26,7 +30,6 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.#value = next;
 		this.render();
 	}
-	#press;
 	#value = "";
 	attributeChangedCallback(name) {
 		if (name === "value") this.#value = this.getAttribute("value") ?? "";
@@ -86,13 +89,15 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		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) {
-			option.disabled = this.isDisabled();
-			option.setAttribute("aria-checked", String(option === checked));
-			option.tabIndex = option === focusable ? 0 : -1;
+			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);
@@ -107,41 +112,32 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		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 });
+		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;
@@ -160,10 +156,6 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		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];
@@ -174,6 +166,12 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		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);

package/dist/default/elements/readout.js

@@ -23,7 +23,7 @@ var Readout = class {
 			this.#anchor = anchor;
 		}
 		this.#text.hidden = text === void 0;
-		if (text !== void 0) this.#text.textContent = text;
+		if (isOpen && text !== void 0 && this.#text.textContent !== text) this.#text.textContent = text;
 		this.#toggle(isOpen);
 	}
 	#toggle(isOpen) {

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

@@ -1,3 +1,4 @@
+import { toNumber } from "../lib/math.js";
 import { attachSlots } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
@@ -30,13 +31,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 +58,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 +69,64 @@ 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) {
+	keepControl(control, signal) {
+		const keep = () => {
+			this.#appendOnce(control);
+			this.#checkChildren([...this.childNodes].filter((child) => child !== control));
+		};
+		const observer = new MutationObserver(keep);
+		keep();
+		observer.observe(this, { childList: true });
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	mirrorChildren({ control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
 		const slots = this.#slots ?? attachSlots(this);
 		let copies = /* @__PURE__ */ new Map();
 		this.#slots = slots;
 		const mirror = (touched) => {
-			this.appendOnce(control);
+			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)]));
+			const originals = children.filter((child) => isCopied(child));
+			this.#checkMirrored(originals);
+			this.#checkChildren(children.filter((child) => !isCopied(child) && !isPassed(child)));
+			copies = new Map(originals.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)));
 		};
+		const watch = () => {
+			observer.disconnect();
+			observer.observe(this, { childList: true });
+			for (const child of this.childNodes) {
+				if (child === control) continue;
+				observer.observe(child, {
+					attributes: true,
+					characterData: true,
+					childList: true,
+					subtree: true
+				});
+			}
+		};
 		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))));
+			if (changes.some((record) => record.target === this)) {
+				mirror();
+				watch();
+			} else mirror(new Set(changes.map((record) => this.#childHolding(record.target))));
 		});
 		mirror();
-		observer.observe(this, {
-			attributes: true,
-			characterData: true,
-			childList: true,
-			subtree: true
-		});
+		watch();
 		signal.addEventListener("abort", () => {
 			observer.disconnect();
 		}, { once: true });
@@ -111,9 +135,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 +143,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,6 +161,14 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
+	#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);
+	}
+	#checkChildren(undocumented) {}
+	#checkMirrored(originals) {}
 	#childHolding(node) {
 		let current = node;
 		while (current && current.parentNode !== this) current = current.parentNode;
@@ -150,12 +180,9 @@ var SonicElement = class extends HTMLElement {
 		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);
-		}
+		if (record.target === this) 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;
+		if (child === void 0) return false;
 		return isCopied(child) || record.type === "attributes" && record.target === child;
 	}
 };