@xsynaptic/sonic-ui 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @xsynaptic/sonic-ui
 
+## 0.28.0
+
+### Minor Changes
+
+- `--sonic-gloss` scales a cap's sheen apart from `--sonic-relief`: 0 is matte, 1 the default. A slider cap has no sheen until the token is set, so there `1` is not the same as unset.
+- - `<sonic-ticker>`: one line of content that scrolls there and back when it does not fit its box, registered by `./define/ticker` with `ticker.css`, which needs no material sheet. It stands still with an ellipsis under reduced motion, and pauses under a mouse, while a link round it has keyboard focus, off screen, and while `paused` is set. A drag along the line moves the tape; with `cancellable` a drag that strays past `--sonic-cancel-zone`, shared with the wave strip, puts it back. `text` replaces the content. A link among the children is copied and still navigates.
+  - Ticker surface: tokens `--sonic-ticker-rate` (a length a second, `40px`), `--sonic-ticker-hold` (`2s`) and `--sonic-ticker-fade` (`0.75rem`); hook classes `.sonic-ticker` and `.sonic-ticker-tape`; states `data-sonic-overflowing`, `data-sonic-dragging`, `data-sonic-cancelling` and `data-sonic-paused`, and `data-sonic-clipped` naming each end with content past it.
+
+### Patch Changes
+
+- Switch and toggle: the bat and the cap land with a small overshoot, and the switch's flip takes 120ms, up from 90ms.
+- Split: a move the siblings cannot absorb on their own steps is turned back, so the total holds across mixed step grids.
+
 ## 0.27.0
 
 ### Minor Changes

package/README.md

@@ -88,6 +88,7 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `slider.css`    | core, cap, glass, readout, value, groove, scale |
 | `spectrum.css`  | core                                            |
 | `switch.css`    | core, cap                                       |
+| `ticker.css`    |                                                 |
 | `toggle.css`    | core, cap, well, keycap                         |
 | `waveform.css`  | core, cap, glass, readout, value                |
 | `wavestrip.css` | core, cap, glass, readout, value                |

package/dist/default/define/ticker.js

@@ -0,0 +1,7 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicTicker } from "../elements/ticker.js";
+
+//#region src/define/ticker.ts
+defineOnce("sonic-ticker", SonicTicker);
+
+//#endregion

package/dist/default/define.js

@@ -9,6 +9,7 @@ import "./define/slider.js";
 import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
+import "./define/ticker.js";
 import "./define/toggle.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";

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

@@ -48,7 +48,7 @@ var SonicElement = class SonicElement extends HTMLElement {
 			this.#connection = void 0;
 			throw error;
 		}
-		const { boxProbe: box, control, sheet } = this;
+		const { boxProbe: box, control, sheet, sheetToken: token } = this;
 	}
 	connectedMoveCallback() {}
 	disconnectedCallback() {

package/dist/default/elements/ticker.js

@@ -0,0 +1,313 @@
+import { clamp } from "../lib/math.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicElement } from "./sonic-element.js";
+import { copyNode } from "../lib/copy-node.js";
+import { placeChildren, requireChild, template } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { bindDrag, capturePointer } from "../lib/pointer-drag.js";
+import { readMsProperty } from "../lib/read-ms-property.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { outsideCancelZone } from "../lib/cancel-zone.js";
+import { clippedEnds, fadeWidth, legDeparture, legFades, legPosition, tickerLeg } from "../lib/ticker-leg.js";
+
+//#region src/elements/ticker.ts
+const renderTicker = template(`<span class="sonic-ticker"><span class="sonic-ticker-tape"></span></span>`, HTMLSpanElement);
+const fadePx = 12;
+const holdMs = 2e3;
+const ratePxPerSecond = 40;
+var SonicTicker = class extends SonicElement {
+	static observedAttributes = ["paused"];
+	get cancellable() {
+		return this.hasAttribute("cancellable");
+	}
+	set cancellable(isCancellable) {
+		this.reflect("cancellable", isCancellable);
+	}
+	get paused() {
+		return this.hasAttribute("paused");
+	}
+	set paused(isPaused) {
+		this.reflect("paused", isPaused);
+	}
+	get text() {
+		return this.#originals().map((original) => original.textContent).join("");
+	}
+	set text(text) {
+		for (const original of this.#originals()) original.remove();
+		if (text !== void 0 && text !== "") this.prepend(text);
+	}
+	control = renderTicker();
+	sheet = "ticker.css";
+	sheetToken = "--_sonic-ticker-fade";
+	#fade = fadePx;
+	#heading = 1;
+	#isClickSwallowed = false;
+	#isFocusInside = false;
+	#isHovered = false;
+	#isOffScreen = false;
+	#isPressed = false;
+	#mark;
+	#measured = "";
+	#position = 0;
+	#reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+	#running;
+	#travel = {
+		distance: 0,
+		hold: holdMs,
+		rate: ratePxPerSecond
+	};
+	attributeChangedCallback() {
+		this.render();
+	}
+	connect(signal) {
+		const control = this.control;
+		const tape = requireChild(control, ".sonic-ticker-tape", HTMLSpanElement);
+		const measure = () => {
+			this.#measure(tape);
+		};
+		const observer = new ResizeObserver(measure);
+		const drag = this.#bindDrag(tape, signal);
+		this.upgradeProperties("cancellable", "paused", "text");
+		mirrorChildren(this, {
+			canCopyLinks: true,
+			control,
+			copy: copyNode,
+			place: (copies) => {
+				placeChildren(tape, copies);
+				drag.end();
+				this.#measure(tape, {
+					from: 0,
+					heading: 1
+				});
+			}
+		}, signal);
+		this.render();
+		observer.observe(control);
+		observer.observe(tape);
+		if ("fonts" in document) document.fonts.addEventListener("loadingdone", measure, { signal });
+		this.#bindFocus(tape, signal);
+		this.#bindPauses(signal);
+		this.#reducedMotion.addEventListener("change", () => {
+			this.#run(tape);
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+			this.#stop();
+		}, { once: true });
+	}
+	render() {
+		if (!this.isBound()) return;
+		this.toggleState("paused", this.paused);
+		this.#syncPause();
+	}
+	#bindDrag(tape, signal) {
+		const control = this.control;
+		control.addEventListener("click", (event) => {
+			if (!this.#isClickSwallowed) return;
+			this.#isClickSwallowed = false;
+			event.preventDefault();
+			event.stopPropagation();
+		}, {
+			capture: true,
+			signal
+		});
+		this.getRootNode().addEventListener("dragstart", (event) => {
+			if (this.#isPressed) event.preventDefault();
+		}, { signal });
+		return bindDrag(control, {
+			grab: (event) => {
+				if (this.#travel.distance <= 0) return;
+				return {
+					from: 0,
+					isDragging: false,
+					outside: void 0,
+					thresholdPx: dragThresholdPx(event.pointerType),
+					x: event.clientX
+				};
+			},
+			isCaptureLate: true,
+			move: (held, event) => {
+				if (!held.isDragging) {
+					if (Math.abs(event.clientX - held.x) < held.thresholdPx) return;
+					const { from, heading } = this.#where();
+					held.isDragging = true;
+					held.from = from;
+					held.outside = this.cancellable ? outsideCancelZone(control, "--_sonic-ticker-cancel-zone") : void 0;
+					held.x = event.clientX;
+					capturePointer(control, event.pointerId);
+					this.toggleState("dragging", true);
+					this.#stop();
+					this.#heading = heading;
+				}
+				const isOutside = held.outside?.(event) === true;
+				this.toggleState("cancelling", isOutside);
+				this.#place(tape, isOutside ? held.from : held.from - (event.clientX - held.x));
+			},
+			release: (held) => {
+				if (!held.isDragging) return;
+				this.#isClickSwallowed = true;
+				setTimeout(() => {
+					this.#isClickSwallowed = false;
+				}, 0);
+				this.toggleState("dragging", false);
+				this.toggleState("cancelling", false);
+				this.#run(tape);
+			},
+			toggle: (isPressed) => {
+				this.#isPressed = isPressed;
+				this.#syncPause();
+			}
+		}, signal);
+	}
+	#bindFocus(tape, signal) {
+		const control = this.control;
+		control.addEventListener("focusout", (event) => {
+			if (event.relatedTarget instanceof Node && control.contains(event.relatedTarget)) return;
+			control.scrollLeft = 0;
+			this.#isFocusInside = false;
+			this.#run(tape);
+		}, { signal });
+		control.addEventListener("focusin", (event) => {
+			this.#isFocusInside = true;
+			this.#run(tape);
+			if (event.target instanceof Element) event.target.scrollIntoView({ block: "nearest" });
+		}, { signal });
+	}
+	#bindPauses(signal) {
+		const control = this.control;
+		for (const type of ["pointerenter", "pointerleave"]) control.addEventListener(type, (event) => {
+			if (event.pointerType !== "mouse") return;
+			this.#isHovered = type === "pointerenter";
+			this.#syncPause();
+		}, { signal });
+		for (const type of ["focusin", "focusout"]) this.getRootNode().addEventListener(type, () => {
+			this.#syncPause();
+		}, { signal });
+		const view = new IntersectionObserver((entries) => {
+			this.#isOffScreen = entries.at(-1)?.isIntersecting === false;
+			this.#syncPause();
+		});
+		view.observe(control);
+		signal.addEventListener("abort", () => {
+			view.disconnect();
+		}, { once: true });
+	}
+	#isPaused() {
+		return this.paused || this.#isHovered || this.#isPressed || this.#isOffScreen || this.control.closest(":focus-visible") !== null;
+	}
+	#measure(tape, departure) {
+		const control = this.control;
+		const styles = getComputedStyle(control);
+		const box = control.clientWidth - readPxProperty(styles, "padding-left", 0) - readPxProperty(styles, "padding-right", 0);
+		const travel = {
+			distance: Math.max(0, Math.round(tape.offsetWidth - box)),
+			hold: readMsProperty(styles, "--_sonic-ticker-hold", holdMs),
+			rate: readPxProperty(styles, "--_sonic-ticker-rate", ratePxPerSecond)
+		};
+		const fade = readPxProperty(styles, "--_sonic-ticker-fade", fadePx);
+		const measured = [...Object.values(travel), fade].join(" ");
+		if (!departure && measured === this.#measured) return;
+		const from = departure ?? this.#where();
+		this.#fade = fade;
+		this.#measured = measured;
+		this.#travel = travel;
+		this.toggleState("overflowing", travel.distance > 0);
+		this.#run(tape, from);
+	}
+	#originals() {
+		return [...this.childNodes].filter((child) => child !== this.control);
+	}
+	#place(tape, position) {
+		const { distance } = this.#travel;
+		this.#position = clamp(position, 0, distance);
+		tape.style.translate = this.#position > 0 ? `${String(-this.#position)}px` : "";
+		writeAttribute(this.control, "data-sonic-clipped", clippedEnds(this.#position, distance));
+		this.#writeFades(this.#position);
+	}
+	#run(tape, departure = this.#where()) {
+		const leg = !this.#isFocusInside && !this.#reducedMotion.matches && !this.hasState("dragging") ? tickerLeg(this.#travel, departure) : void 0;
+		this.#stop();
+		this.#heading = departure.heading;
+		if (leg) this.#start(tape, leg);
+		else this.#place(tape, this.#isFocusInside ? 0 : departure.from);
+	}
+	#start(tape, leg) {
+		const animation = tape.animate({ translate: [`${String(-leg.from)}px`, `${String(-leg.to)}px`] }, {
+			delay: leg.hold,
+			duration: leg.duration,
+			fill: "both"
+		});
+		animation.addEventListener("finish", () => {
+			this.#run(tape, {
+				from: leg.to,
+				heading: leg.heading
+			});
+		});
+		this.#running = {
+			animation,
+			fades: [],
+			leg
+		};
+		tape.style.translate = "";
+		writeAttribute(this.control, "data-sonic-clipped", clippedEnds(leg.from, this.#travel.distance));
+		this.#syncPause();
+	}
+	#startFades(leg, elapsed) {
+		const fades = legFades(leg, this.#travel.distance, this.#fade);
+		return ["start", "end"].flatMap((end) => {
+			const { delay, duration, widths } = fades[end];
+			if (duration <= 0 || delay + duration <= elapsed) return [];
+			return this.control.animate({ [`--_sonic-ticker-fade-${end}`]: widths.map((width) => `${String(width)}px`) }, {
+				delay: delay - elapsed,
+				duration,
+				fill: "both"
+			});
+		});
+	}
+	#stop() {
+		const running = this.#running;
+		clearTimeout(this.#mark);
+		if (!running) return;
+		for (const fade of running.fades) fade.cancel();
+		running.animation.cancel();
+		this.#running = void 0;
+	}
+	#syncPause() {
+		const running = this.#running;
+		if (!running) return;
+		const { animation, leg } = running;
+		const elapsed = Number(animation.currentTime);
+		clearTimeout(this.#mark);
+		for (const fade of running.fades) fade.cancel();
+		running.fades = [];
+		this.#writeFades(legPosition(leg, elapsed));
+		if (elapsed >= leg.hold) writeAttribute(this.control, "data-sonic-clipped", "start end");
+		if (this.#isPaused()) {
+			animation.pause();
+			return;
+		}
+		if (animation.playState === "paused") animation.play();
+		running.fades = this.#startFades(leg, elapsed);
+		if (elapsed >= leg.hold) return;
+		this.#mark = setTimeout(() => {
+			writeAttribute(this.control, "data-sonic-clipped", "start end");
+		}, leg.hold - elapsed);
+	}
+	#where() {
+		const running = this.#running;
+		if (!running) return {
+			from: this.#position,
+			heading: this.#heading
+		};
+		return legDeparture(running.leg, Number(running.animation.currentTime));
+	}
+	#writeFades(position) {
+		const { style } = this.control;
+		style.setProperty("--_sonic-ticker-fade-start", `${String(fadeWidth(position, this.#fade))}px`);
+		style.setProperty("--_sonic-ticker-fade-end", `${String(fadeWidth(this.#travel.distance - position, this.#fade))}px`);
+	}
+};
+
+//#endregion
+export { SonicTicker };

package/dist/default/elements/wavestrip.js

@@ -1,8 +1,8 @@
 import { clamp, clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { readPxProperty } from "../lib/read-px-property.js";
 import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
+import { outsideCancelZone } from "../lib/cancel-zone.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
 import { RegionLayer } from "./region-layer.js";
@@ -22,7 +22,6 @@ const lengths = {
 	pitch: "--_sonic-wavestrip-bar-pitch",
 	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
 };
-const cancelZonePx = 48;
 const renderWavestrip = template(`
 		<div class="sonic-wavestrip">
 			<canvas class="sonic-wavestrip-canvas" role="slider" tabindex="0"></canvas>
@@ -256,9 +255,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	#outside() {
 		if (!this.cancellable) return void 0;
-		const box = this.control.getBoundingClientRect();
-		const zone = readPxProperty(getComputedStyle(this.control), "--_sonic-cancel-zone", cancelZonePx);
-		return (event) => event.clientY < box.top - zone || event.clientY > box.bottom + zone;
+		return outsideCancelZone(this.control, "--_sonic-cancel-zone");
 	}
 	#placeReadout() {
 		const at = this.mapping().proportionOf(this.readoutValue());

package/dist/default/index.js

@@ -10,6 +10,7 @@ import { SonicSlider } from "./elements/slider.js";
 import { SonicSpectrum } from "./elements/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import { SonicSwitch } from "./elements/switch.js";
+import { SonicTicker } from "./elements/ticker.js";
 import { SonicToggle } from "./elements/toggle.js";
 import { formatClock, parseClock } from "./lib/clock.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -18,4 +19,4 @@ import { SonicXy } from "./elements/xy.js";
 import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicTicker, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

package/dist/default/lib/cancel-zone.js

@@ -0,0 +1,12 @@
+import { readPxProperty } from "./read-px-property.js";
+
+//#region src/lib/cancel-zone.ts
+const cancelZonePx = 48;
+function outsideCancelZone(control, property) {
+	const box = control.getBoundingClientRect();
+	const zone = readPxProperty(getComputedStyle(control), property, cancelZonePx);
+	return (event) => event.clientY < box.top - zone || event.clientY > box.bottom + zone;
+}
+
+//#endregion
+export { outsideCancelZone };

package/dist/default/lib/distribute.js

@@ -187,8 +187,7 @@ function close(members, rule, held) {
 	const { landing, move, mover } = held;
 	const { index } = move;
 	const landed = landing.values[index] ?? mover.value;
-	const targets = moverTargets(members, landing, index);
-	return nearest(targets.flatMap((target) => {
+	return nearest(moverTargets(members, landing, index).flatMap((target) => {
 		const attempt = spread(members, rule, {
 			index,
 			target
@@ -197,7 +196,7 @@ function close(members, rule, held) {
 	}), move, {
 		landed,
 		start: mover.value
-	}) ?? landing.values.with(index, targets[0] ?? landed);
+	}) ?? members.map(({ value }) => value);
 }
 function distribute(members, rule, move) {
 	const landing = spread(members, rule, move);

package/dist/default/lib/mirror-children.js

@@ -14,7 +14,7 @@ function isCopiedChange(host, record, { control, isCopied }) {
 	if (child === void 0) return false;
 	return isCopied(child) || record.type === "attributes" && record.target === child;
 }
-function mirrorChildren(host, { control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
+function mirrorChildren(host, { canCopyLinks = false, control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
 	const slots = hostSlots.get(host) ?? attachSlots(host);
 	let copies = /* @__PURE__ */ new Map();
 	hostSlots.set(host, slots);

package/dist/default/lib/pointer-drag.js

@@ -5,6 +5,7 @@ function capturePointer(target, pointerId) {
 	} catch {}
 }
 function bindDrag(target, handlers, signal) {
+	const isCaptureLate = handlers.isCaptureLate === true;
 	let held;
 	const end = () => {
 		if (!held) return;
@@ -28,14 +29,19 @@ function bindDrag(target, handlers, signal) {
 			pointerId: event.pointerId
 		};
 		handlers.toggle?.(true);
-		capturePointer(target, event.pointerId);
+		if (!isCaptureLate) capturePointer(target, event.pointerId);
 	}, { signal });
 	whileHeld("pointermove", handlers.move);
 	whileHeld("pointercancel", (drag) => {
 		handlers.cancel?.(drag);
 		end();
 	});
-	whileHeld("lostpointercapture", end);
+	whileHeld("lostpointercapture", (_drag, event) => {
+		if (!isCaptureLate || event.target === target) end();
+	});
+	if (isCaptureLate) whileHeld("pointerleave", (_drag, event) => {
+		if (!target.hasPointerCapture(event.pointerId)) end();
+	});
 	whileHeld("pointerup", (drag, event) => {
 		end();
 		handlers.lift?.(drag, event);

package/dist/default/lib/ticker-leg.js

@@ -0,0 +1,54 @@
+import { clamp, clampProportion } from "./math.js";
+
+//#region src/lib/ticker-leg.ts
+const fadeApproach = 3;
+function tickerLeg({ distance, hold: fullHold, rate }, { from, heading, hold = fullHold }) {
+	if (!(distance > 0) || !(rate > 0)) return void 0;
+	const start = clamp(from, 0, distance);
+	const isOutbound = start === (heading > 0 ? distance : 0) ? heading < 0 : heading > 0;
+	const to = isOutbound ? distance : 0;
+	return {
+		duration: Math.abs(to - start) / rate * 1e3,
+		from: start,
+		heading: isOutbound ? 1 : -1,
+		hold: Math.max(0, hold),
+		to
+	};
+}
+function legPosition(leg, elapsed) {
+	return leg.from + (leg.to - leg.from) * clampProportion((elapsed - leg.hold) / leg.duration);
+}
+function legDeparture(leg, elapsed) {
+	return {
+		from: legPosition(leg, elapsed),
+		heading: leg.heading,
+		hold: Math.max(0, leg.hold - elapsed)
+	};
+}
+function clippedEnds(position, distance) {
+	const ends = [...position > 0 ? ["start"] : [], ...position < distance ? ["end"] : []];
+	return ends.length > 0 ? ends.join(" ") : void 0;
+}
+function fadeWidth(past, fade) {
+	return clamp(past / fadeApproach, 0, Math.max(0, fade));
+}
+function legFade(leg, [pastFrom, pastTo], fade) {
+	const reach = Math.max(0, fade) * fadeApproach;
+	const msPerPx = leg.duration / Math.abs(leg.to - leg.from);
+	const from = Math.min(pastFrom, reach);
+	const to = Math.min(pastTo, reach);
+	return {
+		delay: leg.hold + (pastFrom - from) * msPerPx,
+		duration: Math.abs(to - from) * msPerPx,
+		widths: [from / fadeApproach, to / fadeApproach]
+	};
+}
+function legFades(leg, distance, fade) {
+	return {
+		end: legFade(leg, [distance - leg.from, distance - leg.to], fade),
+		start: legFade(leg, [leg.from, leg.to], fade)
+	};
+}
+
+//#endregion
+export { clippedEnds, fadeWidth, legDeparture, legFades, legPosition, tickerLeg };

package/dist/dev/define/ticker.d.ts

@@ -0,0 +1,2 @@
+import { SonicTicker } from "../elements/ticker.js";
+export type { SonicTicker };

package/dist/dev/define/ticker.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicTicker } from "../elements/ticker.js";
+
+//#region src/define/ticker.ts
+defineOnce("sonic-ticker", SonicTicker);
+
+//#endregion
+//# sourceMappingURL=ticker.js.map

package/dist/dev/define/ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.js","names":[],"sources":["../../../src/define/ticker.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicTicker } from '#elements/ticker.ts';\n\ndefineOnce('sonic-ticker', SonicTicker);\n\nexport type { SonicTicker } from '#elements/ticker.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/dev/define.d.ts

@@ -20,6 +20,8 @@ import { SonicSplit } from "./elements/split.js";
 import "./define/split.js";
 import { SonicSwitch } from "./elements/switch.js";
 import "./define/switch.js";
+import { SonicTicker } from "./elements/ticker.js";
+import "./define/ticker.js";
 import { SonicToggle } from "./elements/toggle.js";
 import "./define/toggle.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -28,4 +30,4 @@ import { SonicWavestrip } from "./elements/wavestrip.js";
 import "./define/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";
 import "./define/xy.js";
-export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };
+export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicTicker, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };

package/dist/dev/define.js

@@ -9,6 +9,7 @@ import "./define/slider.js";
 import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
+import "./define/ticker.js";
 import "./define/toggle.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";

package/dist/dev/elements/sonic-element.d.ts

@@ -9,6 +9,7 @@ export declare abstract class SonicElement extends HTMLElement {
   protected readonly control: HTMLElement | undefined;
   protected readonly internals: ElementInternals | undefined;
   protected readonly sheet: string | undefined;
+  protected readonly sheetToken: `--_sonic-${string}` | undefined;
   blur(): void;
   connectedCallback(): void;
   connectedMoveCallback(): void;

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

@@ -49,11 +49,12 @@ var SonicElement = class SonicElement extends HTMLElement {
 			this.#connection = void 0;
 			throw error;
 		}
-		const { boxProbe: box, control, sheet } = this;
+		const { boxProbe: box, control, sheet, sheetToken: token } = this;
 		if (control && sheet !== void 0) checkStyles(this, {
 			box,
 			control,
-			sheet
+			sheet,
+			token
 		});
 	}
 	connectedMoveCallback() {}

package/dist/dev/elements/sonic-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"sonic-element.js","names":[],"sources":["../../../src/elements/sonic-element.ts"],"sourcesContent":["import type { BoxProbe } from '#lib/check-styles.ts';\n\nimport { checkStyles } from '#lib/check-styles.ts';\nimport { toNumber } from '#lib/math.ts';\nimport { appendOnce, checkChildren } from '#lib/owned-control.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare const __DEV__: boolean;\n\nconst namingAttributes = ['aria-describedby', 'aria-label', 'aria-labelledby'];\n\nconst canReferElements = 'ariaLabelledByElements' in Element.prototype;\n\nfunction writeLabelledBy(target: Element, labels: Array<Element>): void {\n\tconst current = target.ariaLabelledByElements;\n\tif (\n\t\tcurrent?.length === labels.length &&\n\t\tlabels.every((label, index) => label === current[index])\n\t) {\n\t\treturn;\n\t}\n\n\ttarget.ariaLabelledByElements = labels;\n}\n\n// eslint-disable-next-line wc/define-tag-after-class-definition -- abstract; only subclasses are defined\nexport abstract class SonicElement extends HTMLElement {\n\tstatic readonly observedAttributes = [...namingAttributes, 'disabled'];\n\n\tstatic #labelCount = 0;\n\n\tget disabled(): boolean {\n\t\treturn this.hasAttribute('disabled');\n\t}\n\n\tset disabled(isDisabled: boolean) {\n\t\tthis.reflect('disabled', isDisabled);\n\t}\n\n\tdeclare protected readonly boxProbe: BoxProbe | undefined;\n\n\tdeclare protected readonly control: HTMLElement | undefined;\n\n\t// happy-dom has no `ElementInternals`\n\tprotected readonly internals =\n\t\t'attachInternals' in HTMLElement.prototype ? this.attachInternals() : undefined;\n\n\tdeclare protected readonly sheet: string | undefined;\n\n\t#connection: AbortController | undefined;\n\n\treadonly #states = new Set<string>();\n\n\tstatic #labelId(label: Element): string {\n\t\tif (label.id === '') {\n\t\t\tSonicElement.#labelCount += 1;\n\t\t\tlabel.id = `sonic-label-${String(SonicElement.#labelCount)}`;\n\t\t}\n\n\t\treturn label.id;\n\t}\n\n\toverride blur(): void {\n\t\tthis.#focused()?.blur();\n\t}\n\n\tconnectedCallback(): void {\n\t\tthis.upgradeProperties('disabled');\n\t\tif (this.#connection) return;\n\n\t\tconst connection = new AbortController();\n\n\t\tthis.#connection = connection;\n\t\ttry {\n\t\t\tthis.connect(connection.signal);\n\t\t} catch (error) {\n\t\t\tconnection.abort();\n\t\t\tthis.#connection = undefined;\n\t\t\tthrow error;\n\t\t}\n\n\t\tconst { boxProbe: box, control, sheet } = this;\n\n\t\tif (__DEV__ && control && sheet !== undefined) checkStyles(this, { box, control, sheet });\n\t}\n\n\tconnectedMoveCallback(): void {\n\t\t// Defined so `moveBefore` from a persisting router keeps every binding\n\t}\n\n\t// Without `moveBefore` (Safari), a persisting router disconnects and reconnects in one task\n\tdisconnectedCallback(): void {\n\t\tconst connection = this.#connection;\n\t\tif (!connection) return;\n\n\t\tqueueMicrotask(() => {\n\t\t\tif (this.isConnected || this.#connection !== connection) return;\n\n\t\t\tconnection.abort();\n\t\t\tthis.#connection = undefined;\n\t\t});\n\t}\n\n\toverride focus(options?: FocusOptions): void {\n\t\tconst target = this.focusTarget();\n\t\tif (!target) {\n\t\t\tsuper.focus(options);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.isDisabled() && !this.#focused()) target.focus(options);\n\t}\n\n\tprotected abstract connect(signal: AbortSignal): void;\n\n\tprotected focusTarget(): HTMLElement | undefined {\n\t\treturn undefined;\n\t}\n\n\tprotected forwardNaming(target: Element, isNamed: boolean): void {\n\t\tconst labels = isNamed ? this.namingLabels() : [];\n\n\t\tfor (const name of namingAttributes) {\n\t\t\t// `ariaLabelledByElements` holds the attribute, empty\n\t\t\tif (name === 'aria-labelledby' && labels.length > 0) continue;\n\n\t\t\tconst value = this.getAttribute(name);\n\n\t\t\twriteAttribute(target, name, isNamed && value !== null ? value : undefined);\n\t\t}\n\t\tif (labels.length > 0) this.#writeLabels(target, labels);\n\t}\n\n\tprotected hasState(state: string): boolean {\n\t\treturn this.#states.has(state);\n\t}\n\n\t// happy-dom matches `:disabled` on no custom element, and an element not form-associated never matches\n\tprotected isBound(): boolean {\n\t\treturn this.#connection !== undefined;\n\t}\n\n\tprotected isDisabled(): boolean {\n\t\treturn this.disabled || this.matches(':disabled');\n\t}\n\n\t// A morph against server HTML, or a stray `innerHTML`, deletes the control\n\tprotected keepControl(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\t\tif (!control) return;\n\n\t\tconst keep = (): void => {\n\t\t\tappendOnce(this, control);\n\t\t\tif (__DEV__)\n\t\t\t\tcheckChildren(\n\t\t\t\t\tthis,\n\t\t\t\t\t[...this.childNodes].filter((child) => child !== control && !this.usesChild(child)),\n\t\t\t\t);\n\t\t};\n\t\tconst observer = new MutationObserver(keep);\n\n\t\tkeep();\n\t\tobserver.observe(this, { childList: true });\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tobserver.disconnect();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprotected namingLabels(): Array<Element> {\n\t\treturn [];\n\t}\n\n\tprotected numberAttribute(name: string, fallback: number): number {\n\t\tconst parsed = toNumber(this.getAttribute(name));\n\n\t\treturn Number.isFinite(parsed) ? parsed : fallback;\n\t}\n\n\tprotected optionalNumberAttribute(name: string): number | undefined {\n\t\tconst value = this.numberAttribute(name, NaN);\n\n\t\treturn Number.isNaN(value) ? undefined : value;\n\t}\n\n\t// Never compared; a host attribute set again resets the value a gesture left dirty\n\tprotected reflect(name: string, value: boolean | null | number | string | undefined): void {\n\t\tif (typeof value !== 'number' && typeof value !== 'string' && value !== true) {\n\t\t\tthis.removeAttribute(name);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setAttribute(name, value === true ? '' : value.toString());\n\t}\n\n\tprotected stateTarget(): Element | undefined {\n\t\treturn this.control;\n\t}\n\n\tprotected toggleState(state: string, isOn: boolean): void {\n\t\tif (isOn) this.#states.add(state);\n\t\telse this.#states.delete(state);\n\t\tthis.stateTarget()?.toggleAttribute(`data-sonic-${state}`, isOn);\n\t}\n\n\t// A property set before upgrade shadows its accessor\n\tprotected upgradeProperties(...names: Array<keyof this>): void {\n\t\tfor (const name of names) {\n\t\t\tif (!Object.hasOwn(this, name)) continue;\n\n\t\t\tconst value = this[name];\n\n\t\t\tReflect.deleteProperty(this, name);\n\t\t\tthis[name] = value;\n\t\t}\n\t}\n\n\tprotected usesChild(_child: Node): boolean {\n\t\treturn false;\n\t}\n\n\t#focused(): HTMLElement | undefined {\n\t\tconst root = this.getRootNode();\n\t\tconst active =\n\t\t\troot instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;\n\n\t\treturn active instanceof HTMLElement && this.contains(active) ? active : undefined;\n\t}\n\n\t#writeLabels(target: Element, labels: Array<Element>): void {\n\t\tif (canReferElements) {\n\t\t\twriteLabelledBy(target, labels);\n\t\t\treturn;\n\t\t}\n\n\t\tconst ids = labels.map((label) => SonicElement.#labelId(label));\n\n\t\twriteAttribute(target, 'aria-labelledby', ids.join(' '));\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"sonic-element.js","names":[],"sources":["../../../src/elements/sonic-element.ts"],"sourcesContent":["import type { BoxProbe } from '#lib/check-styles.ts';\n\nimport { checkStyles } from '#lib/check-styles.ts';\nimport { toNumber } from '#lib/math.ts';\nimport { appendOnce, checkChildren } from '#lib/owned-control.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare const __DEV__: boolean;\n\nconst namingAttributes = ['aria-describedby', 'aria-label', 'aria-labelledby'];\n\nconst canReferElements = 'ariaLabelledByElements' in Element.prototype;\n\nfunction writeLabelledBy(target: Element, labels: Array<Element>): void {\n\tconst current = target.ariaLabelledByElements;\n\tif (\n\t\tcurrent?.length === labels.length &&\n\t\tlabels.every((label, index) => label === current[index])\n\t) {\n\t\treturn;\n\t}\n\n\ttarget.ariaLabelledByElements = labels;\n}\n\n// eslint-disable-next-line wc/define-tag-after-class-definition -- abstract; only subclasses are defined\nexport abstract class SonicElement extends HTMLElement {\n\tstatic readonly observedAttributes = [...namingAttributes, 'disabled'];\n\n\tstatic #labelCount = 0;\n\n\tget disabled(): boolean {\n\t\treturn this.hasAttribute('disabled');\n\t}\n\n\tset disabled(isDisabled: boolean) {\n\t\tthis.reflect('disabled', isDisabled);\n\t}\n\n\tdeclare protected readonly boxProbe: BoxProbe | undefined;\n\n\tdeclare protected readonly control: HTMLElement | undefined;\n\n\t// happy-dom has no `ElementInternals`\n\tprotected readonly internals =\n\t\t'attachInternals' in HTMLElement.prototype ? this.attachInternals() : undefined;\n\n\tdeclare protected readonly sheet: string | undefined;\n\n\tdeclare protected readonly sheetToken: `--_sonic-${string}` | undefined;\n\n\t#connection: AbortController | undefined;\n\n\treadonly #states = new Set<string>();\n\n\tstatic #labelId(label: Element): string {\n\t\tif (label.id === '') {\n\t\t\tSonicElement.#labelCount += 1;\n\t\t\tlabel.id = `sonic-label-${String(SonicElement.#labelCount)}`;\n\t\t}\n\n\t\treturn label.id;\n\t}\n\n\toverride blur(): void {\n\t\tthis.#focused()?.blur();\n\t}\n\n\tconnectedCallback(): void {\n\t\tthis.upgradeProperties('disabled');\n\t\tif (this.#connection) return;\n\n\t\tconst connection = new AbortController();\n\n\t\tthis.#connection = connection;\n\t\ttry {\n\t\t\tthis.connect(connection.signal);\n\t\t} catch (error) {\n\t\t\tconnection.abort();\n\t\t\tthis.#connection = undefined;\n\t\t\tthrow error;\n\t\t}\n\n\t\tconst { boxProbe: box, control, sheet, sheetToken: token } = this;\n\n\t\tif (__DEV__ && control && sheet !== undefined)\n\t\t\tcheckStyles(this, { box, control, sheet, token });\n\t}\n\n\tconnectedMoveCallback(): void {\n\t\t// Defined so `moveBefore` from a persisting router keeps every binding\n\t}\n\n\t// Without `moveBefore` (Safari), a persisting router disconnects and reconnects in one task\n\tdisconnectedCallback(): void {\n\t\tconst connection = this.#connection;\n\t\tif (!connection) return;\n\n\t\tqueueMicrotask(() => {\n\t\t\tif (this.isConnected || this.#connection !== connection) return;\n\n\t\t\tconnection.abort();\n\t\t\tthis.#connection = undefined;\n\t\t});\n\t}\n\n\toverride focus(options?: FocusOptions): void {\n\t\tconst target = this.focusTarget();\n\t\tif (!target) {\n\t\t\tsuper.focus(options);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.isDisabled() && !this.#focused()) target.focus(options);\n\t}\n\n\tprotected abstract connect(signal: AbortSignal): void;\n\n\tprotected focusTarget(): HTMLElement | undefined {\n\t\treturn undefined;\n\t}\n\n\tprotected forwardNaming(target: Element, isNamed: boolean): void {\n\t\tconst labels = isNamed ? this.namingLabels() : [];\n\n\t\tfor (const name of namingAttributes) {\n\t\t\t// `ariaLabelledByElements` holds the attribute, empty\n\t\t\tif (name === 'aria-labelledby' && labels.length > 0) continue;\n\n\t\t\tconst value = this.getAttribute(name);\n\n\t\t\twriteAttribute(target, name, isNamed && value !== null ? value : undefined);\n\t\t}\n\t\tif (labels.length > 0) this.#writeLabels(target, labels);\n\t}\n\n\tprotected hasState(state: string): boolean {\n\t\treturn this.#states.has(state);\n\t}\n\n\t// happy-dom matches `:disabled` on no custom element, and an element not form-associated never matches\n\tprotected isBound(): boolean {\n\t\treturn this.#connection !== undefined;\n\t}\n\n\tprotected isDisabled(): boolean {\n\t\treturn this.disabled || this.matches(':disabled');\n\t}\n\n\t// A morph against server HTML, or a stray `innerHTML`, deletes the control\n\tprotected keepControl(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\t\tif (!control) return;\n\n\t\tconst keep = (): void => {\n\t\t\tappendOnce(this, control);\n\t\t\tif (__DEV__)\n\t\t\t\tcheckChildren(\n\t\t\t\t\tthis,\n\t\t\t\t\t[...this.childNodes].filter((child) => child !== control && !this.usesChild(child)),\n\t\t\t\t);\n\t\t};\n\t\tconst observer = new MutationObserver(keep);\n\n\t\tkeep();\n\t\tobserver.observe(this, { childList: true });\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tobserver.disconnect();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprotected namingLabels(): Array<Element> {\n\t\treturn [];\n\t}\n\n\tprotected numberAttribute(name: string, fallback: number): number {\n\t\tconst parsed = toNumber(this.getAttribute(name));\n\n\t\treturn Number.isFinite(parsed) ? parsed : fallback;\n\t}\n\n\tprotected optionalNumberAttribute(name: string): number | undefined {\n\t\tconst value = this.numberAttribute(name, NaN);\n\n\t\treturn Number.isNaN(value) ? undefined : value;\n\t}\n\n\t// Never compared; a host attribute set again resets the value a gesture left dirty\n\tprotected reflect(name: string, value: boolean | null | number | string | undefined): void {\n\t\tif (typeof value !== 'number' && typeof value !== 'string' && value !== true) {\n\t\t\tthis.removeAttribute(name);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setAttribute(name, value === true ? '' : value.toString());\n\t}\n\n\tprotected stateTarget(): Element | undefined {\n\t\treturn this.control;\n\t}\n\n\tprotected toggleState(state: string, isOn: boolean): void {\n\t\tif (isOn) this.#states.add(state);\n\t\telse this.#states.delete(state);\n\t\tthis.stateTarget()?.toggleAttribute(`data-sonic-${state}`, isOn);\n\t}\n\n\t// A property set before upgrade shadows its accessor\n\tprotected upgradeProperties(...names: Array<keyof this>): void {\n\t\tfor (const name of names) {\n\t\t\tif (!Object.hasOwn(this, name)) continue;\n\n\t\t\tconst value = this[name];\n\n\t\t\tReflect.deleteProperty(this, name);\n\t\t\tthis[name] = value;\n\t\t}\n\t}\n\n\tprotected usesChild(_child: Node): boolean {\n\t\treturn false;\n\t}\n\n\t#focused(): HTMLElement | undefined {\n\t\tconst root = this.getRootNode();\n\t\tconst active =\n\t\t\troot instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;\n\n\t\treturn active instanceof HTMLElement && this.contains(active) ? active : undefined;\n\t}\n\n\t#writeLabels(target: Element, labels: Array<Element>): void {\n\t\tif (canReferElements) {\n\t\t\twriteLabelledBy(target, labels);\n\t\t\treturn;\n\t\t}\n\n\t\tconst ids = labels.map((label) => SonicElement.#labelId(label));\n\n\t\twriteAttribute(target, 'aria-labelledby', ids.join(' '));\n\t}\n}\n"],"mappings":"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"}