@xsynaptic/sonic-ui 0.27.0 → 0.28.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @xsynaptic/sonic-ui
 
+## 0.28.1
+
+### Patch Changes
+
+- Ticker: setting `text` to the text it already shows no longer sends the tape back to the start, and `disabled` now holds the ticker at rest with no scrolling and no drag.
+
+## 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,331 @@
+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 = ["disabled", "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) {
+		const next = text ?? "";
+		if (this.#holds(next)) return;
+		for (const original of this.#originals()) original.remove();
+		if (next !== "") this.prepend(next);
+	}
+	control = renderTicker();
+	sheet = "ticker.css";
+	sheetToken = "--_sonic-ticker-fade";
+	#drag;
+	#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;
+	#tape = requireChild(this.control, ".sonic-ticker-tape", HTMLSpanElement);
+	#travel = {
+		distance: 0,
+		hold: holdMs,
+		rate: ratePxPerSecond
+	};
+	attributeChangedCallback(name) {
+		if (name === "disabled" && this.isBound()) {
+			this.#drag?.end();
+			this.#run(this.#tape, {
+				from: 0,
+				heading: 1
+			});
+		}
+		this.render();
+	}
+	connect(signal) {
+		const control = this.control;
+		const tape = this.#tape;
+		const measure = () => {
+			this.#measure(tape);
+		};
+		const observer = new ResizeObserver(measure);
+		const drag = this.#bindDrag(tape, signal);
+		this.#drag = drag;
+		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 || this.isDisabled()) 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 });
+	}
+	#holds(text) {
+		const [only, ...rest] = this.#originals();
+		if (only === void 0) return text === "";
+		if (rest.length > 0 || !(only instanceof Text)) return false;
+		return only.data === text;
+	}
+	#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") && !this.isDisabled() ? 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/meter.d.ts

@@ -38,4 +38,5 @@ export declare class SonicMeter extends SonicElement {
   protected connect(signal: AbortSignal): void;
 }
 //#endregion
+export {};
 //# sourceMappingURL=meter.d.ts.map

package/dist/dev/elements/position-group.d.ts

@@ -41,4 +41,5 @@ export declare abstract class SonicPositionGroupElement extends SonicRadioGroupE
   protected springBack(): void;
 }
 //#endregion
+export {};
 //# sourceMappingURL=position-group.d.ts.map

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() {}