@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/dev/lib/waveform-buckets.js

@@ -0,0 +1,42 @@
+//#region src/lib/waveform-buckets.ts
+function foldPairs(peaks, fromPair, toPair) {
+	const { samples } = peaks;
+	const channels = Math.max(1, peaks.channels ?? 1);
+	const stride = channels * 2;
+	const pairsTotal = Math.floor(samples.length / stride);
+	let low = 0;
+	let high = 0;
+	for (let pair = Math.max(0, fromPair); pair < Math.min(pairsTotal, toPair); pair += 1) for (let channel = 0; channel < channels; channel += 1) {
+		const at = pair * stride + channel * 2;
+		low = Math.min(low, samples[at] ?? 0);
+		high = Math.max(high, samples[at + 1] ?? 0);
+	}
+	return [low / peaks.fullScale, high / peaks.fullScale];
+}
+function waveformBuckets(peaks, view) {
+	const { pairsPerSecond } = peaks;
+	if (pairsPerSecond <= 0 || view.pixelsPerSecond <= 0) return [];
+	const pxPerPair = view.pixelsPerSecond / pairsPerSecond;
+	const pairs = Math.max(1, Math.round(1 / pxPerPair));
+	const openingPair = view.startSeconds * pairsPerSecond;
+	const first = Math.floor(openingPair / pairs) - 1;
+	const count = Math.ceil(view.width / (pairs * pxPerPair)) + 3;
+	const buckets = [];
+	for (let index = 0; index < count; index += 1) {
+		const fromPair = (first + index) * pairs;
+		const toPair = fromPair + pairs;
+		const [low, high] = foldPairs(peaks, fromPair, toPair);
+		buckets.push({
+			fromPair,
+			high,
+			low,
+			toPair,
+			x: (fromPair - openingPair) * pxPerPair
+		});
+	}
+	return buckets;
+}
+
+//#endregion
+export { waveformBuckets };
+//# sourceMappingURL=waveform-buckets.js.map

package/dist/dev/lib/waveform-buckets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveform-buckets.js","names":[],"sources":["../../../src/lib/waveform-buckets.ts"],"sourcesContent":["// Interleaved min, max per channel per pair; `fullScale` is 128, 32768 or 1\nexport interface WaveformPeaks {\n\tchannels?: number;\n\tfullScale: number;\n\tpairsPerSecond: number;\n\tsamples: Float32Array | Int8Array | Int16Array;\n}\n\ninterface WaveformBucket {\n\tfromPair: number;\n\thigh: number;\n\tlow: number;\n\ttoPair: number;\n\tx: number;\n}\n\ninterface BucketView {\n\tpixelsPerSecond: number;\n\tstartSeconds: number;\n\twidth: number;\n}\n\nfunction foldPairs(peaks: WaveformPeaks, fromPair: number, toPair: number): [number, number] {\n\tconst { samples } = peaks;\n\tconst channels = Math.max(1, peaks.channels ?? 1);\n\tconst stride = channels * 2;\n\tconst pairsTotal = Math.floor(samples.length / stride);\n\tlet low = 0;\n\tlet high = 0;\n\n\tfor (let pair = Math.max(0, fromPair); pair < Math.min(pairsTotal, toPair); pair += 1) {\n\t\tfor (let channel = 0; channel < channels; channel += 1) {\n\t\t\tconst at = pair * stride + channel * 2;\n\n\t\t\tlow = Math.min(low, samples[at] ?? 0);\n\t\t\thigh = Math.max(high, samples[at + 1] ?? 0);\n\t\t}\n\t}\n\n\treturn [low / peaks.fullScale, high / peaks.fullScale];\n}\n\n// Keyed to absolute pairs; keyed to the window, the same samples re-bucket every frame and judder\nexport function waveformBuckets(peaks: WaveformPeaks, view: BucketView): Array<WaveformBucket> {\n\tconst { pairsPerSecond } = peaks;\n\tif (pairsPerSecond <= 0 || view.pixelsPerSecond <= 0) return [];\n\n\tconst pxPerPair = view.pixelsPerSecond / pairsPerSecond;\n\tconst pairs = Math.max(1, Math.round(1 / pxPerPair));\n\tconst openingPair = view.startSeconds * pairsPerSecond;\n\tconst first = Math.floor(openingPair / pairs) - 1;\n\tconst count = Math.ceil(view.width / (pairs * pxPerPair)) + 3;\n\tconst buckets: Array<WaveformBucket> = [];\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst fromPair = (first + index) * pairs;\n\t\tconst toPair = fromPair + pairs;\n\t\tconst [low, high] = foldPairs(peaks, fromPair, toPair);\n\n\t\tbuckets.push({ fromPair, high, low, toPair, x: (fromPair - openingPair) * pxPerPair });\n\t}\n\n\treturn buckets;\n}\n"],"mappings":";AAsBA,SAAS,UAAU,OAAsB,UAAkB,QAAkC;CAC5F,MAAM,EAAE,YAAY;CACpB,MAAM,WAAW,KAAK,IAAI,GAAG,MAAM,YAAY,CAAC;CAChD,MAAM,SAAS,WAAW;CAC1B,MAAM,aAAa,KAAK,MAAM,QAAQ,SAAS,MAAM;CACrD,IAAI,MAAM;CACV,IAAI,OAAO;CAEX,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,YAAY,MAAM,GAAG,QAAQ,GACnF,KAAK,IAAI,UAAU,GAAG,UAAU,UAAU,WAAW,GAAG;EACvD,MAAM,KAAK,OAAO,SAAS,UAAU;EAErC,MAAM,KAAK,IAAI,KAAK,QAAQ,OAAO,CAAC;EACpC,OAAO,KAAK,IAAI,MAAM,QAAQ,KAAK,MAAM,CAAC;CAC3C;CAGD,OAAO,CAAC,MAAM,MAAM,WAAW,OAAO,MAAM,SAAS;AACtD;AAGA,SAAgB,gBAAgB,OAAsB,MAAyC;CAC9F,MAAM,EAAE,mBAAmB;CAC3B,IAAI,kBAAkB,KAAK,KAAK,mBAAmB,GAAG,OAAO,CAAC;CAE9D,MAAM,YAAY,KAAK,kBAAkB;CACzC,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,SAAS,CAAC;CACnD,MAAM,cAAc,KAAK,eAAe;CACxC,MAAM,QAAQ,KAAK,MAAM,cAAc,KAAK,IAAI;CAChD,MAAM,QAAQ,KAAK,KAAK,KAAK,SAAS,QAAQ,UAAU,IAAI;CAC5D,MAAM,UAAiC,CAAC;CAExC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,YAAY,QAAQ,SAAS;EACnC,MAAM,SAAS,WAAW;EAC1B,MAAM,CAAC,KAAK,QAAQ,UAAU,OAAO,UAAU,MAAM;EAErD,QAAQ,KAAK;GAAE;GAAU;GAAM;GAAK;GAAQ,IAAI,WAAW,eAAe;EAAU,CAAC;CACtF;CAEA,OAAO;AACR"}

package/dist/skins/ivory.css

@@ -1,8 +1,7 @@
-/* Ink derived from a pale cap would vanish against it */
 @layer sonic {
 	.sonic-skin-ivory {
 		--sonic-cap: oklch(85.5% 0.024 85deg);
 		--sonic-cap-hover: oklch(90.5% 0.02 85deg);
-		--sonic-mark: oklch(18.5% 0.012 60deg);
+		--sonic-ink: oklch(18.5% 0.012 60deg);
 	}
 }

package/dist/styles/button.css

@@ -0,0 +1,212 @@
+@property --_sonic-button-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 32px;
+}
+
+@keyframes sonic-button-busy {
+	from {
+		opacity: 0.35;
+	}
+}
+
+@layer sonic {
+	:is(sonic-button, .sonic-button) {
+		--_sonic-button-size: var(--sonic-button-size, 2rem);
+		--_sonic-button-aspect-ratio: var(--sonic-button-aspect-ratio, 1);
+	}
+
+	:has(> .sonic-button):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-button:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
+		block-size: var(--_sonic-button-size);
+		overflow: hidden;
+	}
+
+	.sonic-button {
+		--_sonic-button-gap-ratio: var(--sonic-button-gap-ratio, 0);
+		--_sonic-button-radius-ratio: var(--sonic-button-radius-ratio, 0.2);
+		--_sonic-button-bevel-ratio: var(--sonic-button-bevel-ratio, 0.075);
+		--_sonic-button-face-radius-ratio: var(--sonic-button-face-radius-ratio, 0.15);
+		--_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-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));
+		--_sonic-button-gap: calc(var(--_sonic-button-size) * var(--_sonic-button-gap-ratio));
+		--_sonic-keycap-depth: calc(var(--_sonic-button-size) * var(--_sonic-button-depth-ratio));
+
+		position: relative;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
+		block-size: var(--_sonic-button-size);
+		padding: 0;
+		font: inherit;
+		color: var(--_sonic-ink);
+		cursor: pointer;
+		background: var(--_sonic-well-floor);
+		border: 0;
+		border-radius: var(--_sonic-button-corner);
+		box-shadow: var(--_sonic-well);
+		transition: color 120ms ease-out;
+	}
+
+	:where([momentary]) > .sonic-button {
+		touch-action: none;
+	}
+
+	/* 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);
+
+		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
+
+		@media (forced-colors: active) {
+			--_sonic-keycap-glow: transparent;
+		}
+	}
+
+	/* Before the latched rule too; a button with an LED blinks the LED and keeps its legend */
+	:where([busy]) > .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led)) {
+		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
+	}
+
+	.sonic-button:active:where(:not(:disabled, [aria-disabled='true'])),
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
+		--_sonic-keycap-scale: var(--_sonic-button-press-scale);
+		--_sonic-keycap-drop: var(--_sonic-press-drop);
+	}
+
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+
+		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)
+		);
+	}
+
+	.sonic-button:is(:disabled, [aria-disabled='true']) {
+		--_sonic-lit: var(--_sonic-lit-disabled);
+
+		color: var(--_sonic-etch);
+		cursor: default;
+	}
+
+	.sonic-button:not(
+			[aria-pressed='true'],
+			:disabled,
+			[aria-disabled='true'],
+			:where([momentary]:state(pressed), [armed]) > *,
+			:where([busy]) > :not(:has(.sonic-led))
+		):is(:focus-visible, :active) {
+		color: var(--_sonic-ink-lift);
+	}
+
+	@media (hover: hover) {
+		/* fallow-ignore-next-line code-duplication -- `:hover` and `:focus-visible` split by `(hover: hover)` */
+		.sonic-button:not(
+				[aria-pressed='true'],
+				:disabled,
+				[aria-disabled='true'],
+				:where([momentary]:state(pressed), [armed]) > *,
+				:where([busy]) > :not(:has(.sonic-led))
+			):hover {
+			color: var(--_sonic-ink-lift);
+		}
+	}
+
+	.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));
+		--_sonic-keycap-face-corner: calc(
+			var(--_sonic-button-size) * var(--_sonic-button-face-radius-ratio)
+		);
+
+		position: absolute;
+		inset: var(--_sonic-button-gap);
+		gap: calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio) / 2);
+		place-content: center;
+
+		& > .sonic-led {
+			--_sonic-led-size: var(
+				--sonic-led-size,
+				calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio))
+			);
+		}
+
+		& > svg {
+			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-repeat: no-repeat;
+		}
+	}
+
+	.sonic-button-cap:has(> .sonic-led) > svg {
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
+		block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
+	}
+
+	.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));
+	}
+
+	/* fallow-ignore-next-line code-duplication -- one pressed state across the cap's parts */
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-button-cap
+		> [data-sonic-when='released'],
+	.sonic-button:not([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-button-cap
+		> [data-sonic-when='pressed'] {
+		display: none;
+	}
+
+	[busy]
+		> .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led))
+		> .sonic-button-cap
+		> *,
+	[busy] > .sonic-button:not(:disabled, [aria-disabled='true']) .sonic-led::after {
+		animation: sonic-button-busy 500ms ease-in-out infinite alternate;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sonic-button-cap > svg {
+			filter: none;
+			mask: none;
+		}
+
+		.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+			--_sonic-skirt: var(--_sonic-lit);
+			--_sonic-face: var(--_sonic-lit);
+			--_sonic-ink: HighlightText;
+
+			&:is(:disabled, [aria-disabled='true']) {
+				--_sonic-ink: ButtonFace;
+			}
+
+			& .sonic-button-cap > svg {
+				filter: none;
+			}
+		}
+	}
+}

package/dist/styles/controls.css

@@ -1,9 +1,16 @@
 @import './material.css';
 @import './dial.css';
-@import './key.css';
+@import './envelope.css';
+@import './button.css';
 @import './led.css';
+@import './switch.css';
 @import './meter.css';
 @import './number.css';
+@import './panel.css';
+@import './ring.css';
 @import './screen.css';
 @import './segmented.css';
 @import './slider.css';
+@import './waveform.css';
+@import './wavestrip.css';
+@import './xy.css';

package/dist/styles/dial.css

@@ -27,37 +27,36 @@
 
 	sonic-dial:not(:defined, [hidden]) {
 		display: block;
+		visibility: hidden;
 		flex-shrink: 0;
 		inline-size: var(--_sonic-dial-size);
 		block-size: var(--_sonic-dial-size);
+		overflow: hidden;
 	}
 
 	.sonic-dial {
 		--_sonic-dial-ring-ratio: var(--sonic-dial-ring-ratio, 0.075);
 		--_sonic-dial-gap-ratio: var(--sonic-dial-gap-ratio, 0.05);
-		--_sonic-dial-pointer-ratio: var(--sonic-dial-pointer-ratio, 0.06);
-
-		/* 0 for a straight bar */
-		--_sonic-dial-pointer-taper: var(--sonic-dial-pointer-taper, 0.5);
-
-		/* A fraction of the knob's angle */
+		--_sonic-dial-indicator-ratio: var(--sonic-dial-indicator-ratio, 0.06);
+		--_sonic-dial-indicator-taper: var(--sonic-dial-indicator-taper, 0.5);
 		--_sonic-dial-face-drift: var(--sonic-dial-face-drift, 0.1);
 		--_sonic-dial-notch-ratio: var(--sonic-dial-notch-ratio, 0.1);
-
-		/* Centred on six o'clock */
+		--_sonic-dial-scale-ratio: var(--sonic-dial-scale-ratio, 0.2);
+		--_sonic-dial-scale-font-ratio: var(--sonic-dial-scale-font-ratio, 0.175);
 		--_sonic-dial-sweep: var(--sonic-dial-sweep, 300deg);
-		--_sonic-dial-segment: var(--sonic-dial-segment, 30deg);
+		--_sonic-dial-dot: var(--sonic-dial-dot, 30deg);
 		--_sonic-dial-ridge-pitch: var(--sonic-dial-ridge-pitch, 4px);
 		--_sonic-dial-travel: var(--sonic-dial-travel, 160px);
 		--_sonic-unit: calc(var(--_sonic-dial-size) / 40);
 		--_sonic-dial-lit: var(--_sonic-lit);
 		--_sonic-dial-notch-band: 0px;
+		--_sonic-dial-scale-band: 0px;
 		--_sonic-dial-notch-ends: 1;
 		--_sonic-dial-start: calc(180deg + (1turn - var(--_sonic-dial-sweep)) / 2);
 		--_sonic-dial-angle: calc(var(--_sonic-dial-value, 0) * var(--_sonic-dial-sweep));
 		--_sonic-dial-ring-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-ring-ratio));
 		--_sonic-dial-cap-inset: calc(
-			var(--_sonic-dial-notch-band) + var(--_sonic-dial-size) *
+			var(--_sonic-dial-scale-band) + var(--_sonic-dial-notch-band) + var(--_sonic-dial-size) *
 				(var(--_sonic-dial-ring-ratio) + var(--_sonic-dial-gap-ratio))
 		);
 
@@ -80,7 +79,7 @@
 		flex-shrink: 0;
 		inline-size: var(--_sonic-dial-size);
 		block-size: var(--_sonic-dial-size);
-		touch-action: none;
+		touch-action: pan-x;
 		cursor: ns-resize;
 		user-select: none;
 		border-radius: 50%;
@@ -99,6 +98,10 @@
 		--_sonic-dial-notch-band: calc(var(--_sonic-dial-size) * var(--_sonic-dial-notch-ratio));
 	}
 
+	:has(> [data-sonic-value]) > .sonic-dial {
+		--_sonic-dial-scale-band: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-ratio));
+	}
+
 	/* Set on `--_sonic-dial-lit`, since `--_sonic-lit` cannot reference itself */
 	[dimmed] > .sonic-dial {
 		--_sonic-dial-lit: var(--_sonic-lit-off);
@@ -113,11 +116,12 @@
 	.sonic-dial-notches {
 		--_sonic-dial-notch-width: atan2(var(--_sonic-unit), var(--_sonic-dial-size) / 2);
 		--_sonic-dial-notch-pitch: calc(
-			var(--_sonic-dial-sweep) / (var(--_sonic-dial-positions, 2) - var(--_sonic-dial-notch-ends))
+			var(--_sonic-dial-sweep) /
+				(var(--_sonic-dial-position-count, 2) - var(--_sonic-dial-notch-ends))
 		);
 
 		position: absolute;
-		inset: 0;
+		inset: var(--_sonic-dial-scale-band);
 		background: repeating-conic-gradient(
 			from calc(var(--_sonic-dial-start) - var(--_sonic-dial-notch-width) / 2),
 			var(--_sonic-etch) 0 var(--_sonic-dial-notch-width),
@@ -139,36 +143,56 @@
 		mask-composite: intersect;
 	}
 
+	.sonic-dial-scale {
+		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
+
+		& > * {
+			--_sonic-dial-scale-angle: calc(
+				var(--_sonic-dial-start) + var(--_sonic-scale-at, 0) * var(--_sonic-dial-sweep)
+			);
+			--_sonic-dial-scale-sin: sin(var(--_sonic-dial-scale-angle));
+			--_sonic-dial-scale-cos: cos(var(--_sonic-dial-scale-angle));
+			--_sonic-dial-scale-radius: calc(
+				var(--_sonic-dial-size) / 2 - var(--_sonic-dial-scale-band) + var(--_sonic-unit)
+			);
+
+			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%);
+		}
+
+		& > .sonic-scale-tick {
+			--_sonic-dial-tick-length: calc(var(--_sonic-dial-scale-band) * 0.4);
+
+			inline-size: var(--_sonic-unit);
+			block-size: var(--_sonic-dial-tick-length);
+			rotate: var(--_sonic-dial-scale-angle);
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-tick-length) / 2)
+				calc(-50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-tick-length) / 2);
+		}
+	}
+
 	:is(.sonic-dial-ring, .sonic-dial-modulation) {
+		--_sonic-arc-width: var(--_sonic-dial-ring-width);
+
 		position: absolute;
-		inset: var(--_sonic-dial-notch-band);
+		inset: calc(var(--_sonic-dial-scale-band) + var(--_sonic-dial-notch-band));
 		border-radius: 50%;
-		mask: radial-gradient(
-			closest-side,
-			transparent calc(100% - var(--_sonic-dial-ring-width) - 0.5px),
-			#000 calc(100% - var(--_sonic-dial-ring-width)),
-			#000 calc(100% - var(--_sonic-dial-band-inset) - 0.5px),
-			transparent calc(100% - var(--_sonic-dial-band-inset))
-		);
+		mask: var(--_sonic-arc-mask);
 	}
 
 	.sonic-dial-ring {
-		--_sonic-dial-band-inset: 0px;
+		--_sonic-arc-inset: 0px;
 		--_sonic-dial-lit-from: calc(
 			min(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
 		);
 		--_sonic-dial-lit-to: calc(
 			max(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
 		);
-		--_sonic-dial-ring-shade: radial-gradient(
-			closest-side,
-			rgb(0 0 0 / 55%) calc(100% - var(--_sonic-dial-ring-width)),
-			transparent calc(100% - var(--_sonic-dial-ring-width) * 0.4),
-			rgb(0 0 0 / 25%) 100%
-		);
 
 		background:
-			var(--_sonic-dial-ring-shade),
+			var(--_sonic-arc-shade),
 			conic-gradient(
 				from var(--_sonic-dial-start),
 				var(--_sonic-unlit) var(--_sonic-dial-lit-from),
@@ -180,11 +204,10 @@
 
 	[endless] > .sonic-dial > .sonic-dial-ring {
 		background:
-			var(--_sonic-dial-ring-shade),
+			var(--_sonic-arc-shade),
 			conic-gradient(
-				from
-					calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle) - var(--_sonic-dial-segment) / 2),
-				var(--_sonic-dial-lit) var(--_sonic-dial-segment),
+				from calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle) - var(--_sonic-dial-dot) / 2),
+				var(--_sonic-dial-lit) var(--_sonic-dial-dot),
 				var(--_sonic-unlit) 0
 			);
 	}
@@ -194,7 +217,7 @@
 			--sonic-modulation,
 			color-mix(in oklab, var(--_sonic-dial-lit) 60%, #000)
 		);
-		--_sonic-dial-band-inset: calc(var(--_sonic-dial-ring-width) * 0.55);
+		--_sonic-arc-inset: calc(var(--_sonic-dial-ring-width) * 0.55);
 
 		background: conic-gradient(
 			from var(--_sonic-dial-start),
@@ -210,6 +233,62 @@
 		display: none;
 	}
 
+	:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+		--_sonic-dial-modulation-value-angle: calc(
+			var(--_sonic-dial-modulation-value, 0) * var(--_sonic-dial-sweep)
+		);
+		--_sonic-dial-modulation-range: color-mix(
+			in oklab,
+			var(--_sonic-dial-modulation) 50%,
+			transparent
+		);
+		--_sonic-dial-modulation-tick: color-mix(
+			in oklab,
+			var(--sonic-modulation, var(--_sonic-dial-lit)) 55%,
+			#fff
+		);
+
+		display: block;
+		background: none;
+		mask: none;
+
+		&::before,
+		&::after {
+			position: absolute;
+			inset: 0;
+			content: '';
+			border-radius: 50%;
+		}
+
+		&::before {
+			background:
+				conic-gradient(
+					from var(--_sonic-dial-start),
+					transparent min(var(--_sonic-dial-angle), var(--_sonic-dial-modulation-value-angle)),
+					var(--_sonic-dial-modulation) 0
+						max(var(--_sonic-dial-angle), var(--_sonic-dial-modulation-value-angle)),
+					transparent 0
+				),
+				conic-gradient(
+					from var(--_sonic-dial-start),
+					transparent calc(var(--_sonic-dial-modulation-from, 0) * var(--_sonic-dial-sweep)),
+					var(--_sonic-dial-modulation-range) 0
+						calc(var(--_sonic-dial-modulation-to, 0) * var(--_sonic-dial-sweep)),
+					transparent 0
+				);
+			mask: var(--_sonic-arc-mask);
+		}
+
+		&::after {
+			background: linear-gradient(
+					var(--_sonic-dial-modulation-tick),
+					var(--_sonic-dial-modulation-tick)
+				)
+				50% 0 / var(--_sonic-unit) var(--_sonic-dial-ring-width) no-repeat;
+			rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-modulation-value-angle));
+		}
+	}
+
 	.sonic-dial-cap {
 		position: absolute;
 		inset: var(--_sonic-dial-cap-inset);
@@ -261,7 +340,7 @@
 		}
 	}
 
-	.sonic-dial-pointer {
+	.sonic-dial-indicator {
 		position: absolute;
 		inset: var(--_sonic-dial-cap-inset);
 		pointer-events: none;
@@ -269,20 +348,22 @@
 		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
 
 		&::before {
-			--_sonic-dial-pointer-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-pointer-ratio));
+			--_sonic-dial-indicator-width: calc(
+				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
+			);
 
 			position: absolute;
 			inset-block-start: 6%;
 			inset-inline-start: 50%;
-			inline-size: var(--_sonic-dial-pointer-width);
+			inline-size: var(--_sonic-dial-indicator-width);
 			block-size: 34%;
 			content: '';
 			background: var(--_sonic-ink);
-			border-radius: calc(var(--_sonic-dial-pointer-width) / 2);
+			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-pointer-taper)) 0,
-				calc(100% - 50% * var(--_sonic-dial-pointer-taper)) 0,
+				calc(50% * var(--_sonic-dial-indicator-taper)) 0,
+				calc(100% - 50% * var(--_sonic-dial-indicator-taper)) 0,
 				100% 100%,
 				0 100%
 			);
@@ -290,29 +371,34 @@
 		}
 	}
 
-	:disabled > .sonic-dial > .sonic-dial-pointer::before {
+	:disabled > .sonic-dial > .sonic-dial-indicator::before {
 		background: var(--_sonic-etch);
 	}
 
 	@media (forced-colors: active) {
-		:is(.sonic-dial-notches, .sonic-dial-ring, .sonic-dial-modulation, .sonic-dial-pointer) {
+		:is(.sonic-dial-notches, .sonic-dial-ring, .sonic-dial-modulation, .sonic-dial-indicator) {
 			forced-color-adjust: none;
 		}
 
 		.sonic-dial-ring {
-			--_sonic-dial-ring-shade: none;
+			--_sonic-arc-shade: none;
 		}
 
 		.sonic-dial-modulation {
 			--_sonic-dial-modulation: CanvasText;
 		}
 
+		:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+			--_sonic-dial-modulation-range: GrayText;
+			--_sonic-dial-modulation-tick: CanvasText;
+		}
+
 		.sonic-dial-cap::before,
 		.sonic-dial-cap::after {
 			display: none;
 		}
 
-		.sonic-dial-pointer::before {
+		.sonic-dial-indicator::before {
 			box-shadow: none;
 		}
 	}