@xsynaptic/sonic-ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,80 @@
+import { appendOnce, checkChildren } from "./owned-control.js";
+import { attachSlots } from "./render.js";
+
+//#region src/lib/mirror-children.ts
+const checkedMirrors = /* @__PURE__ */ new WeakSet();
+const hostSlots = /* @__PURE__ */ new WeakMap();
+const interactive = "a[href], button, input, select, textarea, [tabindex]";
+function unmirrorable(original) {
+	if (!(original instanceof Element)) return void 0;
+	return [original, ...original.querySelectorAll("*")].find((element) => element.matches(interactive) || element.localName.includes("-"));
+}
+function checkMirrored(host, originals) {
+	if (checkedMirrors.has(host.constructor)) return;
+	const [found] = originals.flatMap((original) => unmirrorable(original) ?? []);
+	if (!found) return;
+	checkedMirrors.add(host.constructor);
+	console.warn(`<${host.localName}> copies its children into the control, so the <${found.localName}> inside it loses its listeners and state; keep mirrored children static`);
+}
+function childHolding(host, node) {
+	let current = node;
+	while (current && current.parentNode !== host) current = current.parentNode;
+	return current ?? void 0;
+}
+function isCopiedChange(host, record, { control, isCopied }) {
+	if (record.target === host) return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
+	const child = childHolding(host, record.target);
+	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) {
+	const slots = hostSlots.get(host) ?? attachSlots(host);
+	let copies = /* @__PURE__ */ new Map();
+	hostSlots.set(host, slots);
+	const mirror = (touched) => {
+		appendOnce(host, control);
+		const children = [...host.childNodes].filter((child) => child !== control);
+		const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
+		const kept = copies;
+		const originals = children.filter((child) => isCopied(child));
+		checkMirrored(host, originals);
+		checkChildren(host, 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(host, { childList: true });
+		for (const child of host.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) => isCopiedChange(host, record, {
+			control,
+			isCopied
+		}));
+		if (changes.length === 0) return;
+		if (changes.some((record) => record.target === host)) {
+			mirror();
+			watch();
+		} else mirror(new Set(changes.map((record) => childHolding(host, record.target))));
+	});
+	mirror();
+	watch();
+	signal.addEventListener("abort", () => {
+		observer.disconnect();
+	}, { once: true });
+}
+
+//#endregion
+export { mirrorChildren };
+//# sourceMappingURL=mirror-children.js.map

package/dist/dev/lib/mirror-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror-children.js","names":[],"sources":["../../../src/lib/mirror-children.ts"],"sourcesContent":["import type { MirrorSlots } from '#lib/render.ts';\n\nimport { appendOnce, checkChildren } from '#lib/owned-control.ts';\nimport { attachSlots } from '#lib/render.ts';\n\n// eslint-disable-next-line unicorn/consistent-boolean-name -- the name bundlers and other kits use\ndeclare const __DEV__: boolean;\n\nconst checkedMirrors = new WeakSet<object>();\n\nconst hostSlots = new WeakMap<HTMLElement, MirrorSlots>();\n\nconst interactive = 'a[href], button, input, select, textarea, [tabindex]';\n\ninterface Mirror {\n\tcontrol: Element;\n\tcopy: (original: ChildNode) => Node | undefined;\n\tisCopied?: (child: Node) => boolean;\n\tisPassed?: (child: Node) => boolean;\n\tplace: (copies: Array<Node>) => void;\n}\n\nfunction unmirrorable(original: Node): Element | undefined {\n\tif (!(original instanceof Element)) return undefined;\n\n\treturn [original, ...original.querySelectorAll('*')].find(\n\t\t(element) => element.matches(interactive) || element.localName.includes('-'),\n\t);\n}\n\nfunction checkMirrored(host: HTMLElement, originals: Array<Node>): void {\n\tif (!__DEV__ || checkedMirrors.has(host.constructor)) return;\n\n\tconst [found] = originals.flatMap((original) => unmirrorable(original) ?? []);\n\tif (!found) return;\n\n\tcheckedMirrors.add(host.constructor);\n\tconsole.warn(\n\t\t`<${host.localName}> copies its children into the control, so the <${found.localName}> inside it loses its listeners and state; keep mirrored children static`,\n\t);\n}\n\nfunction childHolding(host: HTMLElement, node: Node): Node | undefined {\n\tlet current: Node | null = node;\n\n\twhile (current && current.parentNode !== host) current = current.parentNode;\n\n\treturn current ?? undefined;\n}\n\nfunction isCopiedChange(\n\thost: HTMLElement,\n\trecord: MutationRecord,\n\t{ control, isCopied }: Required<Pick<Mirror, 'control' | 'isCopied'>>,\n): boolean {\n\tif (record.target === host) {\n\t\treturn (\n\t\t\trecord.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control)\n\t\t);\n\t}\n\n\tconst child = childHolding(host, record.target);\n\n\tif (child === undefined) return false;\n\n\treturn isCopied(child) || (record.type === 'attributes' && record.target === child);\n}\n\nexport function mirrorChildren(\n\thost: HTMLElement,\n\t{ control, copy, isCopied = () => true, isPassed = () => false, place }: Mirror,\n\tsignal: AbortSignal,\n): void {\n\tconst slots = hostSlots.get(host) ?? attachSlots(host);\n\tlet copies = new Map<ChildNode, Node | undefined>();\n\n\thostSlots.set(host, slots);\n\tconst mirror = (touched?: Set<Node | undefined>): void => {\n\t\tappendOnce(host, control);\n\n\t\tconst children = [...host.childNodes].filter((child) => child !== control);\n\t\tconst slotted = children.filter(\n\t\t\t(child): child is Element | Text => child instanceof Element || child instanceof Text,\n\t\t);\n\t\tconst kept = copies;\n\t\tconst originals = children.filter((child) => isCopied(child));\n\n\t\tif (__DEV__) {\n\t\t\tcheckMirrored(host, originals);\n\t\t\tcheckChildren(\n\t\t\t\thost,\n\t\t\t\tchildren.filter((child) => !isCopied(child) && !isPassed(child)),\n\t\t\t);\n\t\t}\n\t\tcopies = new Map(\n\t\t\toriginals.map((original) => [\n\t\t\t\toriginal,\n\t\t\t\ttouched && !touched.has(original) && kept.has(original)\n\t\t\t\t\t? kept.get(original)\n\t\t\t\t\t: copy(original),\n\t\t\t]),\n\t\t);\n\t\tplace([...copies.values()].filter((made) => made !== undefined));\n\t\tslots.shown.assign(...slotted.filter((child) => !isCopied(child)), control);\n\t\tslots.kept.assign(...slotted.filter((child) => isCopied(child)));\n\t};\n\t// Each child is watched, never the control, so a value write wakes nothing\n\tconst watch = (): void => {\n\t\tobserver.disconnect();\n\t\tobserver.observe(host, { childList: true });\n\t\tfor (const child of host.childNodes) {\n\t\t\tif (child === control) continue;\n\n\t\t\tobserver.observe(child, {\n\t\t\t\tattributes: true,\n\t\t\t\tcharacterData: true,\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t});\n\t\t}\n\t};\n\tconst observer = new MutationObserver((records) => {\n\t\tconst changes = records.filter((record) => isCopiedChange(host, record, { control, isCopied }));\n\t\tif (changes.length === 0) return;\n\n\t\tif (changes.some((record) => record.target === host)) {\n\t\t\tmirror();\n\t\t\twatch();\n\t\t} else mirror(new Set(changes.map((record) => childHolding(host, record.target))));\n\t});\n\n\tmirror();\n\twatch();\n\tsignal.addEventListener(\n\t\t'abort',\n\t\t() => {\n\t\t\tobserver.disconnect();\n\t\t},\n\t\t{ once: true },\n\t);\n}\n"],"mappings":"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"}

package/dist/dev/lib/owned-control.js

@@ -0,0 +1,23 @@
+//#region src/lib/owned-control.ts
+const checkedChildren = /* @__PURE__ */ new WeakSet();
+function isContent(child) {
+	if (child instanceof Element) return true;
+	return child instanceof Text && child.data.trim() !== "";
+}
+function appendOnce(host, control) {
+	const [hook] = control.classList;
+	const stale = [...host.children].filter((child) => child !== control && hook !== void 0 && child.classList.contains(hook));
+	for (const child of stale) child.remove();
+	if (control.parentNode !== host) host.append(control);
+}
+function checkChildren(host, undocumented) {
+	if (checkedChildren.has(host.constructor)) return;
+	const found = undocumented.find((child) => isContent(child));
+	if (!found) return;
+	checkedChildren.add(host.constructor);
+	console.warn(`<${host.localName}> uses only the children it documents, so the ${found instanceof Element ? `<${found.localName}>` : "text"} inside it is unsupported`);
+}
+
+//#endregion
+export { appendOnce, checkChildren };
+//# sourceMappingURL=owned-control.js.map

package/dist/dev/lib/owned-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"owned-control.js","names":[],"sources":["../../../src/lib/owned-control.ts"],"sourcesContent":["// eslint-disable-next-line unicorn/consistent-boolean-name -- the name bundlers and other kits use\ndeclare const __DEV__: boolean;\n\nconst checkedChildren = new WeakSet<object>();\n\nfunction isContent(child: Node): boolean {\n\tif (child instanceof Element) return true;\n\n\treturn child instanceof Text && child.data.trim() !== '';\n}\n\nexport function appendOnce(host: HTMLElement, control: Element): void {\n\tconst [hook] = control.classList;\n\tconst stale = [...host.children].filter(\n\t\t(child) => child !== control && hook !== undefined && child.classList.contains(hook),\n\t);\n\n\tfor (const child of stale) child.remove();\n\tif (control.parentNode !== host) host.append(control);\n}\n\nexport function checkChildren(host: HTMLElement, undocumented: Array<Node>): void {\n\tif (!__DEV__ || checkedChildren.has(host.constructor)) return;\n\n\tconst found = undocumented.find((child) => isContent(child));\n\tif (!found) return;\n\n\tcheckedChildren.add(host.constructor);\n\tconsole.warn(\n\t\t`<${host.localName}> uses only the children it documents, so the ${\n\t\t\tfound instanceof Element ? `<${found.localName}>` : 'text'\n\t\t} inside it is unsupported`,\n\t);\n}\n"],"mappings":";AAGA,MAAM,kCAAkB,IAAI,QAAgB;AAE5C,SAAS,UAAU,OAAsB;CACxC,IAAI,iBAAiB,SAAS,OAAO;CAErC,OAAO,iBAAiB,QAAQ,MAAM,KAAK,KAAK,MAAM;AACvD;AAEA,SAAgB,WAAW,MAAmB,SAAwB;CACrE,MAAM,CAAC,QAAQ,QAAQ;CACvB,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,QAC/B,UAAU,UAAU,WAAW,SAAS,UAAa,MAAM,UAAU,SAAS,IAAI,CACpF;CAEA,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO;CACxC,IAAI,QAAQ,eAAe,MAAM,KAAK,OAAO,OAAO;AACrD;AAEA,SAAgB,cAAc,MAAmB,cAAiC;CACjF,IAAgB,gBAAgB,IAAI,KAAK,WAAW,GAAG;CAEvD,MAAM,QAAQ,aAAa,MAAM,UAAU,UAAU,KAAK,CAAC;CAC3D,IAAI,CAAC,OAAO;CAEZ,gBAAgB,IAAI,KAAK,WAAW;CACpC,QAAQ,KACP,IAAI,KAAK,UAAU,gDAClB,iBAAiB,UAAU,IAAI,MAAM,UAAU,KAAK,OACpD,0BACF;AACD"}

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

@@ -5,8 +5,8 @@ function bindDrag(target, handlers, signal) {
 		if (!held) return;
 		const { drag } = held;
 		held = void 0;
-		handlers.toggle(false);
-		handlers.release(drag);
+		handlers.toggle?.(false);
+		handlers.release?.(drag);
 	};
 	const whileHeld = (type, handle) => {
 		target.addEventListener(type, (event) => {
@@ -23,15 +23,18 @@ function bindDrag(target, handlers, signal) {
 			pointerId: event.pointerId
 		};
 		target.setPointerCapture(event.pointerId);
-		handlers.toggle(true);
+		handlers.toggle?.(true);
 	}, { signal });
 	whileHeld("pointermove", handlers.move);
 	whileHeld("pointercancel", (drag) => {
-		handlers.cancel(drag);
+		handlers.cancel?.(drag);
 		end();
 	});
 	whileHeld("lostpointercapture", end);
-	whileHeld("pointerup", end);
+	whileHeld("pointerup", (drag, event) => {
+		end();
+		handlers.lift?.(drag, event);
+	});
 	signal.addEventListener("abort", end, { once: true });
 	return {
 		current: () => held?.drag,

package/dist/dev/lib/pointer-drag.js.map

@@ -1 +1 @@
-{"version":3,"file":"pointer-drag.js","names":[],"sources":["../../../src/lib/pointer-drag.ts"],"sourcesContent":["interface DragHandlers<Drag> {\n\tcancel: (drag: Drag) => void;\n\tgrab: (event: PointerEvent) => Drag | undefined;\n\tmove: (drag: Drag, event: PointerEvent) => void;\n\trelease: (drag: Drag) => void;\n\ttoggle: (isDragging: boolean) => void;\n}\n\nexport interface PointerDrag<Drag> {\n\tcurrent: () => Drag | undefined;\n\tend: () => void;\n}\n\nexport function bindDrag<Drag>(\n\ttarget: HTMLElement,\n\thandlers: DragHandlers<Drag>,\n\tsignal: AbortSignal,\n): PointerDrag<Drag> {\n\tlet held: undefined | { drag: Drag; pointerId: number };\n\n\tconst end = (): void => {\n\t\tif (!held) return;\n\n\t\tconst { drag } = held;\n\n\t\theld = undefined;\n\t\thandlers.toggle(false);\n\t\thandlers.release(drag);\n\t};\n\tconst whileHeld = (\n\t\ttype: 'lostpointercapture' | 'pointercancel' | 'pointermove' | 'pointerup',\n\t\thandle: (drag: Drag, event: PointerEvent) => void,\n\t): void => {\n\t\ttarget.addEventListener(\n\t\t\ttype,\n\t\t\t(event) => {\n\t\t\t\tif (held?.pointerId === event.pointerId) handle(held.drag, event);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t};\n\n\ttarget.addEventListener(\n\t\t'pointerdown',\n\t\t(event) => {\n\t\t\tif (event.button !== 0 || (held && held.pointerId !== event.pointerId)) return;\n\n\t\t\tend();\n\n\t\t\tconst drag = handlers.grab(event);\n\t\t\tif (drag === undefined) return;\n\n\t\t\theld = { drag, pointerId: event.pointerId };\n\t\t\ttarget.setPointerCapture(event.pointerId);\n\t\t\thandlers.toggle(true);\n\t\t},\n\t\t{ signal },\n\t);\n\twhileHeld('pointermove', handlers.move);\n\twhileHeld('pointercancel', (drag) => {\n\t\thandlers.cancel(drag);\n\t\tend();\n\t});\n\twhileHeld('lostpointercapture', end);\n\twhileHeld('pointerup', end);\n\tsignal.addEventListener('abort', end, { once: true });\n\n\treturn { current: () => held?.drag, end };\n}\n"],"mappings":";AAaA,SAAgB,SACf,QACA,UACA,QACoB;CACpB,IAAI;CAEJ,MAAM,YAAkB;EACvB,IAAI,CAAC,MAAM;EAEX,MAAM,EAAE,SAAS;EAEjB,OAAO;EACP,SAAS,OAAO,KAAK;EACrB,SAAS,QAAQ,IAAI;CACtB;CACA,MAAM,aACL,MACA,WACU;EACV,OAAO,iBACN,OACC,UAAU;GACV,IAAI,MAAM,cAAc,MAAM,WAAW,OAAO,KAAK,MAAM,KAAK;EACjE,GACA,EAAE,OAAO,CACV;CACD;CAEA,OAAO,iBACN,gBACC,UAAU;EACV,IAAI,MAAM,WAAW,KAAM,QAAQ,KAAK,cAAc,MAAM,WAAY;EAExE,IAAI;EAEJ,MAAM,OAAO,SAAS,KAAK,KAAK;EAChC,IAAI,SAAS,QAAW;EAExB,OAAO;GAAE;GAAM,WAAW,MAAM;EAAU;EAC1C,OAAO,kBAAkB,MAAM,SAAS;EACxC,SAAS,OAAO,IAAI;CACrB,GACA,EAAE,OAAO,CACV;CACA,UAAU,eAAe,SAAS,IAAI;CACtC,UAAU,kBAAkB,SAAS;EACpC,SAAS,OAAO,IAAI;EACpB,IAAI;CACL,CAAC;CACD,UAAU,sBAAsB,GAAG;CACnC,UAAU,aAAa,GAAG;CAC1B,OAAO,iBAAiB,SAAS,KAAK,EAAE,MAAM,KAAK,CAAC;CAEpD,OAAO;EAAE,eAAe,MAAM;EAAM;CAAI;AACzC"}
+{"version":3,"file":"pointer-drag.js","names":[],"sources":["../../../src/lib/pointer-drag.ts"],"sourcesContent":["interface DragHandlers<Drag> {\n\tcancel?: (drag: Drag) => void;\n\tgrab: (event: PointerEvent) => Drag | undefined;\n\tlift?: (drag: Drag, event: PointerEvent) => void;\n\tmove: (drag: Drag, event: PointerEvent) => void;\n\trelease?: (drag: Drag) => void;\n\ttoggle?: (isDragging: boolean) => void;\n}\n\nexport interface PointerDrag<Drag> {\n\tcurrent: () => Drag | undefined;\n\tend: () => void;\n}\n\nexport function bindDrag<Drag>(\n\ttarget: HTMLElement,\n\thandlers: DragHandlers<Drag>,\n\tsignal: AbortSignal,\n): PointerDrag<Drag> {\n\tlet held: undefined | { drag: Drag; pointerId: number };\n\n\tconst end = (): void => {\n\t\tif (!held) return;\n\n\t\tconst { drag } = held;\n\n\t\theld = undefined;\n\t\thandlers.toggle?.(false);\n\t\thandlers.release?.(drag);\n\t};\n\tconst whileHeld = (\n\t\ttype: 'lostpointercapture' | 'pointercancel' | 'pointermove' | 'pointerup',\n\t\thandle: (drag: Drag, event: PointerEvent) => void,\n\t): void => {\n\t\ttarget.addEventListener(\n\t\t\ttype,\n\t\t\t(event) => {\n\t\t\t\tif (held?.pointerId === event.pointerId) handle(held.drag, event);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t};\n\n\ttarget.addEventListener(\n\t\t'pointerdown',\n\t\t(event) => {\n\t\t\tif (event.button !== 0 || (held && held.pointerId !== event.pointerId)) return;\n\n\t\t\tend();\n\n\t\t\tconst drag = handlers.grab(event);\n\t\t\tif (drag === undefined) return;\n\n\t\t\theld = { drag, pointerId: event.pointerId };\n\t\t\ttarget.setPointerCapture(event.pointerId);\n\t\t\thandlers.toggle?.(true);\n\t\t},\n\t\t{ signal },\n\t);\n\twhileHeld('pointermove', handlers.move);\n\twhileHeld('pointercancel', (drag) => {\n\t\thandlers.cancel?.(drag);\n\t\tend();\n\t});\n\twhileHeld('lostpointercapture', end);\n\twhileHeld('pointerup', (drag, event) => {\n\t\tend();\n\t\thandlers.lift?.(drag, event);\n\t});\n\tsignal.addEventListener('abort', end, { once: true });\n\n\treturn { current: () => held?.drag, end };\n}\n"],"mappings":";AAcA,SAAgB,SACf,QACA,UACA,QACoB;CACpB,IAAI;CAEJ,MAAM,YAAkB;EACvB,IAAI,CAAC,MAAM;EAEX,MAAM,EAAE,SAAS;EAEjB,OAAO;EACP,SAAS,SAAS,KAAK;EACvB,SAAS,UAAU,IAAI;CACxB;CACA,MAAM,aACL,MACA,WACU;EACV,OAAO,iBACN,OACC,UAAU;GACV,IAAI,MAAM,cAAc,MAAM,WAAW,OAAO,KAAK,MAAM,KAAK;EACjE,GACA,EAAE,OAAO,CACV;CACD;CAEA,OAAO,iBACN,gBACC,UAAU;EACV,IAAI,MAAM,WAAW,KAAM,QAAQ,KAAK,cAAc,MAAM,WAAY;EAExE,IAAI;EAEJ,MAAM,OAAO,SAAS,KAAK,KAAK;EAChC,IAAI,SAAS,QAAW;EAExB,OAAO;GAAE;GAAM,WAAW,MAAM;EAAU;EAC1C,OAAO,kBAAkB,MAAM,SAAS;EACxC,SAAS,SAAS,IAAI;CACvB,GACA,EAAE,OAAO,CACV;CACA,UAAU,eAAe,SAAS,IAAI;CACtC,UAAU,kBAAkB,SAAS;EACpC,SAAS,SAAS,IAAI;EACtB,IAAI;CACL,CAAC;CACD,UAAU,sBAAsB,GAAG;CACnC,UAAU,cAAc,MAAM,UAAU;EACvC,IAAI;EACJ,SAAS,OAAO,MAAM,KAAK;CAC5B,CAAC;CACD,OAAO,iBAAiB,SAAS,KAAK,EAAE,MAAM,KAAK,CAAC;CAEpD,OAAO;EAAE,eAAe,MAAM;EAAM;CAAI;AACzC"}

package/dist/dev/lib/resample-peaks.js

@@ -11,7 +11,17 @@ function downsample(peaks, count) {
 		for (let source = start; source < end; source += 1) total += peaks[source] ?? 0;
 		resampled.push(total / (end - start));
 	}
-	return resampled;
+	return rescale(resampled, peakOf(peaks));
+}
+function peakOf(peaks) {
+	let loudest = 0;
+	for (const peak of peaks) loudest = Math.max(loudest, peak);
+	return loudest;
+}
+function rescale(bars, loudest) {
+	const tallest = peakOf(bars);
+	if (tallest <= 0) return bars;
+	return bars.map((bar) => bar * loudest / tallest);
 }
 function upsample(peaks, count) {
 	const resampled = [];

package/dist/dev/lib/resample-peaks.js.map

@@ -1 +1 @@
-{"version":3,"file":"resample-peaks.js","names":[],"sources":["../../../src/lib/resample-peaks.ts"],"sourcesContent":["function bucketBounds(sourceLength: number, index: number, count: number): [number, number] {\n\tconst start = Math.floor((index * sourceLength) / count);\n\n\treturn [start, Math.max(start + 1, Math.floor(((index + 1) * sourceLength) / count))];\n}\n\nfunction downsample(peaks: ArrayLike<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst [start, end] = bucketBounds(peaks.length, index, count);\n\t\tlet total = 0;\n\n\t\tfor (let source = start; source < end; source += 1) total += peaks[source] ?? 0;\n\t\tresampled.push(total / (end - start));\n\t}\n\n\treturn resampled;\n}\n\nfunction upsample(peaks: ArrayLike<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\tconst last = peaks.length - 1;\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst sourceIndex = count === 1 ? 0 : (index * last) / (count - 1);\n\t\tconst before = Math.floor(sourceIndex);\n\t\tconst weight = sourceIndex - before;\n\n\t\tresampled.push(\n\t\t\t(peaks[before] ?? 0) * (1 - weight) + (peaks[Math.min(last, before + 1)] ?? 0) * weight,\n\t\t);\n\t}\n\n\treturn resampled;\n}\n\nexport function resamplePeaks(peaks: ArrayLike<number>, count: number): Array<number> {\n\tif (count <= 0 || peaks.length === 0) return [];\n\n\tconst finite = Array.from(peaks, (peak) => (Number.isFinite(peak) ? peak : 0));\n\n\tif (count === finite.length) return finite;\n\tif (count > finite.length) return upsample(finite, count);\n\n\treturn downsample(finite, count);\n}\n"],"mappings":";AAAA,SAAS,aAAa,cAAsB,OAAe,OAAiC;CAC3F,MAAM,QAAQ,KAAK,MAAO,QAAQ,eAAgB,KAAK;CAEvD,OAAO,CAAC,OAAO,KAAK,IAAI,QAAQ,GAAG,KAAK,OAAQ,QAAQ,KAAK,eAAgB,KAAK,CAAC,CAAC;AACrF;AAEA,SAAS,WAAW,OAA0B,OAA8B;CAC3E,MAAM,YAA2B,CAAC;CAElC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,CAAC,OAAO,OAAO,aAAa,MAAM,QAAQ,OAAO,KAAK;EAC5D,IAAI,QAAQ;EAEZ,KAAK,IAAI,SAAS,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,MAAM,WAAW;EAC9E,UAAU,KAAK,SAAS,MAAM,MAAM;CACrC;CAEA,OAAO;AACR;AAEA,SAAS,SAAS,OAA0B,OAA8B;CACzE,MAAM,YAA2B,CAAC;CAClC,MAAM,OAAO,MAAM,SAAS;CAE5B,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,cAAc,UAAU,IAAI,IAAK,QAAQ,QAAS,QAAQ;EAChE,MAAM,SAAS,KAAK,MAAM,WAAW;EACrC,MAAM,SAAS,cAAc;EAE7B,UAAU,MACR,MAAM,WAAW,MAAM,IAAI,WAAW,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,MAAM,KAAK,MAClF;CACD;CAEA,OAAO;AACR;AAEA,SAAgB,cAAc,OAA0B,OAA8B;CACrF,IAAI,SAAS,KAAK,MAAM,WAAW,GAAG,OAAO,CAAC;CAE9C,MAAM,SAAS,MAAM,KAAK,QAAQ,SAAU,OAAO,SAAS,IAAI,IAAI,OAAO,CAAE;CAE7E,IAAI,UAAU,OAAO,QAAQ,OAAO;CACpC,IAAI,QAAQ,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK;CAExD,OAAO,WAAW,QAAQ,KAAK;AAChC"}
+{"version":3,"file":"resample-peaks.js","names":[],"sources":["../../../src/lib/resample-peaks.ts"],"sourcesContent":["function bucketBounds(sourceLength: number, index: number, count: number): [number, number] {\n\tconst start = Math.floor((index * sourceLength) / count);\n\n\treturn [start, Math.max(start + 1, Math.floor(((index + 1) * sourceLength) / count))];\n}\n\nfunction downsample(peaks: ReadonlyArray<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst [start, end] = bucketBounds(peaks.length, index, count);\n\t\tlet total = 0;\n\n\t\tfor (let source = start; source < end; source += 1) total += peaks[source] ?? 0;\n\t\tresampled.push(total / (end - start));\n\t}\n\n\treturn rescale(resampled, peakOf(peaks));\n}\n\nfunction peakOf(peaks: ReadonlyArray<number>): number {\n\tlet loudest = 0;\n\n\tfor (const peak of peaks) loudest = Math.max(loudest, peak);\n\n\treturn loudest;\n}\n\nfunction rescale(bars: Array<number>, loudest: number): Array<number> {\n\tconst tallest = peakOf(bars);\n\tif (tallest <= 0) return bars;\n\n\treturn bars.map((bar) => (bar * loudest) / tallest);\n}\n\nfunction upsample(peaks: ArrayLike<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\tconst last = peaks.length - 1;\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst sourceIndex = count === 1 ? 0 : (index * last) / (count - 1);\n\t\tconst before = Math.floor(sourceIndex);\n\t\tconst weight = sourceIndex - before;\n\n\t\tresampled.push(\n\t\t\t(peaks[before] ?? 0) * (1 - weight) + (peaks[Math.min(last, before + 1)] ?? 0) * weight,\n\t\t);\n\t}\n\n\treturn resampled;\n}\n\nexport function resamplePeaks(peaks: ArrayLike<number>, count: number): Array<number> {\n\tif (count <= 0 || peaks.length === 0) return [];\n\n\tconst finite = Array.from(peaks, (peak) => (Number.isFinite(peak) ? peak : 0));\n\n\tif (count === finite.length) return finite;\n\tif (count > finite.length) return upsample(finite, count);\n\n\treturn downsample(finite, count);\n}\n"],"mappings":";AAAA,SAAS,aAAa,cAAsB,OAAe,OAAiC;CAC3F,MAAM,QAAQ,KAAK,MAAO,QAAQ,eAAgB,KAAK;CAEvD,OAAO,CAAC,OAAO,KAAK,IAAI,QAAQ,GAAG,KAAK,OAAQ,QAAQ,KAAK,eAAgB,KAAK,CAAC,CAAC;AACrF;AAEA,SAAS,WAAW,OAA8B,OAA8B;CAC/E,MAAM,YAA2B,CAAC;CAElC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,CAAC,OAAO,OAAO,aAAa,MAAM,QAAQ,OAAO,KAAK;EAC5D,IAAI,QAAQ;EAEZ,KAAK,IAAI,SAAS,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,MAAM,WAAW;EAC9E,UAAU,KAAK,SAAS,MAAM,MAAM;CACrC;CAEA,OAAO,QAAQ,WAAW,OAAO,KAAK,CAAC;AACxC;AAEA,SAAS,OAAO,OAAsC;CACrD,IAAI,UAAU;CAEd,KAAK,MAAM,QAAQ,OAAO,UAAU,KAAK,IAAI,SAAS,IAAI;CAE1D,OAAO;AACR;AAEA,SAAS,QAAQ,MAAqB,SAAgC;CACrE,MAAM,UAAU,OAAO,IAAI;CAC3B,IAAI,WAAW,GAAG,OAAO;CAEzB,OAAO,KAAK,KAAK,QAAS,MAAM,UAAW,OAAO;AACnD;AAEA,SAAS,SAAS,OAA0B,OAA8B;CACzE,MAAM,YAA2B,CAAC;CAClC,MAAM,OAAO,MAAM,SAAS;CAE5B,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,cAAc,UAAU,IAAI,IAAK,QAAQ,QAAS,QAAQ;EAChE,MAAM,SAAS,KAAK,MAAM,WAAW;EACrC,MAAM,SAAS,cAAc;EAE7B,UAAU,MACR,MAAM,WAAW,MAAM,IAAI,WAAW,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,MAAM,KAAK,MAClF;CACD;CAEA,OAAO;AACR;AAEA,SAAgB,cAAc,OAA0B,OAA8B;CACrF,IAAI,SAAS,KAAK,MAAM,WAAW,GAAG,OAAO,CAAC;CAE9C,MAAM,SAAS,MAAM,KAAK,QAAQ,SAAU,OAAO,SAAS,IAAI,IAAI,OAAO,CAAE;CAE7E,IAAI,UAAU,OAAO,QAAQ,OAAO;CACpC,IAAI,QAAQ,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK;CAExD,OAAO,WAAW,QAAQ,KAAK;AAChC"}

package/dist/dev/lib/time-regions.js

@@ -3,7 +3,10 @@ function readRegions(regions) {
 	if ("start" in regions) return Array.from({ length: regions.length }, (_entry, index) => [regions.start(index), regions.end(index)]);
 	return [...regions].map(([start, end]) => [start, end]);
 }
+function sortedRegions(regions) {
+	return regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];
+}
 
 //#endregion
-export { readRegions };
+export { readRegions, sortedRegions };
 //# sourceMappingURL=time-regions.js.map

package/dist/dev/lib/time-regions.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-regions.js","names":[],"sources":["../../../src/lib/time-regions.ts"],"sourcesContent":["export type TimeRegions = Iterable<readonly [number, number]> | TimeRanges;\n\nexport function readRegions(regions: TimeRegions): Array<[number, number]> {\n\tif ('start' in regions) {\n\t\treturn Array.from({ length: regions.length }, (_entry, index) => [\n\t\t\tregions.start(index),\n\t\t\tregions.end(index),\n\t\t]);\n\t}\n\n\treturn [...regions].map(([start, end]) => [start, end]);\n}\n"],"mappings":";AAEA,SAAgB,YAAY,SAA+C;CAC1E,IAAI,WAAW,SACd,OAAO,MAAM,KAAK,EAAE,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAChE,QAAQ,MAAM,KAAK,GACnB,QAAQ,IAAI,KAAK,CAClB,CAAC;CAGF,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC;AACvD"}
+{"version":3,"file":"time-regions.js","names":[],"sources":["../../../src/lib/time-regions.ts"],"sourcesContent":["export type TimeRegions = Iterable<readonly [number, number]> | TimeRanges;\n\nexport function readRegions(regions: TimeRegions): Array<[number, number]> {\n\tif ('start' in regions) {\n\t\treturn Array.from({ length: regions.length }, (_entry, index) => [\n\t\t\tregions.start(index),\n\t\t\tregions.end(index),\n\t\t]);\n\t}\n\n\treturn [...regions].map(([start, end]) => [start, end]);\n}\n\nexport function sortedRegions(regions: TimeRegions | undefined): Array<[number, number]> {\n\treturn regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];\n}\n"],"mappings":";AAEA,SAAgB,YAAY,SAA+C;CAC1E,IAAI,WAAW,SACd,OAAO,MAAM,KAAK,EAAE,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAChE,QAAQ,MAAM,KAAK,GACnB,QAAQ,IAAI,KAAK,CAClB,CAAC;CAGF,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC;AACvD;AAEA,SAAgB,cAAc,SAA2D;CACxF,OAAO,UAAU,YAAY,OAAO,CAAC,CAAC,UAAU,OAAO,WAAW,MAAM,KAAK,OAAO,EAAE,IAAI,CAAC;AAC5F"}

package/dist/dev/lib/write-attribute.js

@@ -4,6 +4,7 @@ function writeAttribute(element, name, value) {
 		element.removeAttribute(name);
 		return;
 	}
+	if (element.getAttribute(name) === value) return;
 	element.setAttribute(name, value);
 }
 

package/dist/dev/lib/write-attribute.js.map

@@ -1 +1 @@
-{"version":3,"file":"write-attribute.js","names":[],"sources":["../../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CAEA,QAAQ,aAAa,MAAM,KAAK;AACjC"}
+{"version":3,"file":"write-attribute.js","names":[],"sources":["../../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\tif (element.getAttribute(name) === value) return;\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CACA,IAAI,QAAQ,aAAa,IAAI,MAAM,OAAO;CAE1C,QAAQ,aAAa,MAAM,KAAK;AACjC"}

package/dist/skins/amber.css

@@ -0,0 +1,8 @@
+@layer sonic {
+	.sonic-skin-amber {
+		--sonic-relief: 1;
+		--sonic-cap: oklch(37% 0.012 286deg);
+		--sonic-cap-hover: oklch(44.2% 0.015 286deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
+	}
+}

package/dist/skins/flat.css

@@ -0,0 +1,26 @@
+@layer sonic {
+	.sonic-skin-flat {
+		--sonic-relief: 0;
+		--sonic-lit: oklch(58% 0.19 255deg);
+		--sonic-unlit: oklch(84% 0.006 255deg);
+		--sonic-cap: oklch(93% 0.004 255deg);
+		--sonic-cap-hover: oklch(97% 0.004 255deg);
+		--sonic-cap-edge: oklch(72% 0.01 255deg);
+		--sonic-well: var(--sonic-unlit);
+		--sonic-well-lit: var(--sonic-lit);
+		--sonic-bezel: oklch(96% 0.003 255deg);
+		--sonic-lens: var(--sonic-unlit);
+		--sonic-led-lens-ratio: 0.8;
+		--sonic-waveform-edge: var(--sonic-lit);
+		--sonic-ink: oklch(27% 0.012 255deg);
+		--sonic-focus: oklch(52% 0.21 255deg);
+		--sonic-glass: oklch(97% 0.003 255deg);
+		--sonic-glass-text: oklch(27% 0.012 255deg);
+		--sonic-glass-edge: oklch(84% 0.006 255deg);
+		--sonic-glass-texture: 0;
+		--sonic-panel: oklch(98.5% 0.002 255deg);
+		--sonic-panel-text: oklch(27% 0.012 255deg);
+		--sonic-button-depth-ratio: 0;
+		--sonic-segmented-depth-ratio: 0;
+	}
+}

package/dist/skins/ivory.css

@@ -1,5 +1,6 @@
 @layer sonic {
 	.sonic-skin-ivory {
+		--sonic-relief: 1;
 		--sonic-cap: oklch(85.5% 0.024 85deg);
 		--sonic-cap-hover: oklch(90.5% 0.02 85deg);
 		--sonic-ink: oklch(18.5% 0.012 60deg);

package/dist/skins/lime.css

@@ -1,9 +1,11 @@
 @layer sonic {
 	.sonic-skin-lime {
+		--sonic-relief: 1;
 		--sonic-lit: oklch(83.8% 0.205 118deg);
 		--sonic-unlit: oklch(28.6% 0.0203 237deg);
 		--sonic-cap: oklch(32.4% 0.0229 237deg);
 		--sonic-cap-hover: oklch(37.2% 0.025 237deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
 		--sonic-dial-ring-ratio: 0.05;
 		--sonic-dial-gap-ratio: 0.1;
 	}

package/dist/skins/slate.css

@@ -1,9 +1,11 @@
 @layer sonic {
 	.sonic-skin-slate {
+		--sonic-relief: 1;
 		--sonic-lit: oklch(79.7% 0.134 212deg);
 		--sonic-unlit: oklch(27.9% 0.037 260deg);
 		--sonic-cap: oklch(37.2% 0.039 257deg);
 		--sonic-cap-hover: oklch(44.6% 0.037 257deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
 		--sonic-dial-ring-ratio: 0.12;
 		--sonic-dial-gap-ratio: 0.07;
 	}

package/dist/styles/button.css

@@ -37,7 +37,7 @@
 		--_sonic-button-icon-ratio: var(--sonic-button-icon-ratio, 0.5);
 		--_sonic-button-led-ratio: var(--sonic-button-led-ratio, 0.2);
 		--_sonic-button-led-icon-ratio: var(--sonic-button-led-icon-ratio, 0.35);
-		--_sonic-button-depth-ratio: var(--sonic-button-depth-ratio, 0.03);
+		--_sonic-button-depth-ratio: var(--sonic-button-depth-ratio, calc(0.03 * var(--_sonic-relief)));
 		--_sonic-button-press-scale: var(--sonic-button-press-scale, 0.985);
 		--_sonic-unit: calc(var(--_sonic-button-size) / 32);
 		--_sonic-button-corner: calc(var(--_sonic-button-size) * var(--_sonic-button-radius-ratio));
@@ -65,7 +65,11 @@
 
 	/* Before the latched rule, which must win unchanged */
 	:where([armed]) > .sonic-button:not(:disabled, [aria-disabled='true']) {
-		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 8%, transparent);
+		--_sonic-keycap-glow: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(8% * var(--_sonic-relief)),
+			transparent
+		);
 
 		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
 
@@ -87,13 +91,24 @@
 	}
 
 	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
-		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+		--_sonic-keycap-glow: var(--_sonic-keycap-lit-glow);
 
 		color: var(--_sonic-lit);
-		background: linear-gradient(
-			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-lit) 25%, #000),
-			color-mix(in oklab, var(--_sonic-lit) 60%, #000)
+		background: var(
+			--sonic-well-lit,
+			linear-gradient(
+				var(--_sonic-light-fall),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 25%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 60%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				)
+			)
 		);
 	}
 
@@ -127,6 +142,37 @@
 		}
 	}
 
+	.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):focus-visible {
+		color: var(--sonic-lit-hover, var(--_sonic-lit));
+	}
+
+	@media (hover: hover) {
+		.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):hover {
+			color: var(--sonic-lit-hover, var(--_sonic-lit));
+		}
+	}
+
+	.sonic-button:not(:has(> .sonic-button-cap > :not(.sonic-led))) {
+		/* Invalid with both tokens unset, which is the one case that draws */
+		--_sonic-blank-edge-off: color-mix(
+			in oklab,
+			var(--sonic-cap-edge, var(--sonic-cap)) 0%,
+			transparent
+		);
+		--_sonic-blank-edge: var(
+			--_sonic-blank-edge-off,
+			color-mix(in oklab, currentcolor 35%, transparent)
+		);
+
+		&:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+			--_sonic-blank-edge: var(--_sonic-blank-edge-off, currentcolor);
+		}
+
+		@media (forced-colors: active) {
+			--_sonic-blank-edge: transparent;
+		}
+	}
+
 	.sonic-button-cap {
 		--_sonic-keycap-corner: max(0px, var(--_sonic-button-corner) - var(--_sonic-button-gap));
 		--_sonic-keycap-bevel: calc(var(--_sonic-button-size) * var(--_sonic-button-bevel-ratio));
@@ -150,7 +196,11 @@
 			inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
 			block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
 			filter: var(--_sonic-engraving);
-			mask-image: linear-gradient(var(--_sonic-light-fall), #000 15%, rgb(0 0 0 / 60%));
+			mask-image: linear-gradient(
+				var(--_sonic-light-fall),
+				#000 15%,
+				rgb(0 0 0 / calc(1 - 0.4 * var(--_sonic-relief)))
+			);
 			mask-repeat: no-repeat;
 		}
 	}
@@ -163,8 +213,7 @@
 	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
 		.sonic-button-cap
 		> svg {
-		filter: var(--_sonic-engraving)
-			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
+		filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
 	}
 
 	/* fallow-ignore-next-line code-duplication -- one pressed state across the cap's parts */

package/dist/styles/dial.css

@@ -145,6 +145,7 @@
 
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
+		line-height: 1cap;
 
 		& > * {
 			--_sonic-dial-scale-angle: calc(
@@ -158,8 +159,8 @@
 
 			inset: calc(50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-scale-radius)) auto auto
 				calc(50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-scale-radius));
-			translate: calc(-50% + var(--_sonic-dial-scale-sin) * 50%)
-				calc(-50% - var(--_sonic-dial-scale-cos) * 50%);
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.15cap))
+				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
 		}
 
 		& > .sonic-scale-tick {
@@ -310,9 +311,10 @@
 		&::before {
 			inset: 0;
 			background: repeating-conic-gradient(
-				rgb(0 0 0 / 30%) 0,
-				rgb(255 255 255 / 12%) calc(var(--_sonic-dial-ridge-angle) / 2),
-				rgb(0 0 0 / 30%) var(--_sonic-dial-ridge-angle)
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) 0,
+				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)))
+					calc(var(--_sonic-dial-ridge-angle) / 2),
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) var(--_sonic-dial-ridge-angle)
 			);
 			rotate: var(--_sonic-dial-angle);
 		}
@@ -325,15 +327,15 @@
 						calc(
 							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
 						),
-					rgb(255 255 255 / 16%),
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief))),
 					transparent 12%,
-					rgb(0 0 0 / 10%) 25%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 25%,
 					transparent 38%,
-					rgb(255 255 255 / 12%) 50%,
+					rgb(255 255 255 / calc(0.12 * var(--_sonic-relief))) 50%,
 					transparent 62%,
-					rgb(0 0 0 / 10%) 75%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 75%,
 					transparent 88%,
-					rgb(255 255 255 / 16%)
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief)))
 				),
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
@@ -351,6 +353,9 @@
 			--_sonic-dial-indicator-width: calc(
 				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
 			);
+			--_sonic-dial-indicator-tip: calc(
+				var(--_sonic-dial-indicator-width) * (1 - var(--_sonic-dial-indicator-taper)) / 2
+			);
 
 			position: absolute;
 			inset-block-start: 6%;
@@ -360,12 +365,15 @@
 			content: '';
 			background: var(--_sonic-ink);
 			border-radius: calc(var(--_sonic-dial-indicator-width) / 2);
-			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
-			clip-path: polygon(
-				calc(50% * var(--_sonic-dial-indicator-taper)) 0,
-				calc(100% - 50% * var(--_sonic-dial-indicator-taper)) 0,
-				100% 100%,
-				0 100%
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
+			clip-path: shape(
+				from 0 100%,
+				line to calc(50% - var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip),
+				arc to calc(50% + var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip) of
+					var(--_sonic-dial-indicator-tip) cw,
+				line to 100% 100%,
+				close
 			);
 			translate: -50% 0;
 		}