@xsynaptic/sonic-ui 0.6.0 → 0.8.0

package/dist/styles/envelope.css

@@ -50,6 +50,25 @@
 		clip-path: inset(calc(-1 * var(--_sonic-envelope-inset)));
 	}
 
+	.sonic-envelope-bracket {
+		--_sonic-point-size: calc(
+			2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-ratio)
+		);
+		--_sonic-bracket-size: var(--_sonic-point-size);
+
+		position: absolute;
+		inset: 0;
+		overflow: clip;
+		pointer-events: none;
+		border-radius: inherit;
+
+		&[data-sonic-part='curve'] {
+			--_sonic-point-size: calc(
+				2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio)
+			);
+		}
+	}
+
 	.sonic-envelope-fill {
 		fill: color-mix(in oklab, var(--_sonic-lit) 18%, transparent);
 	}
@@ -69,15 +88,8 @@
 		vector-effect: non-scaling-stroke;
 	}
 
-	:is(.sonic-envelope-handle, .sonic-envelope-curve) {
-		--_sonic-point-ring: var(--_sonic-lit);
-		--_sonic-point-core: var(--_sonic-lit);
-		--_sonic-point-lift: color-mix(in oklab, var(--_sonic-lit) 85%, #fff);
-		--_sonic-point-edge: max(1px, var(--_sonic-point-stroke, 0px));
-		--_sonic-point-halo: transparent;
-		--_sonic-point-bracket: transparent;
-		--_sonic-point-bracket-scale: 0.6;
-
+	:is(.sonic-envelope-handle, .sonic-envelope-curve),
+	.sonic-envelope-bracket::before {
 		position: absolute;
 		inset: auto auto
 			calc(
@@ -88,6 +100,15 @@
 				var(--_sonic-envelope-inset) + var(--_sonic-envelope-x, 0) *
 					(100cqi - 2 * var(--_sonic-envelope-inset)) - var(--_sonic-point-size) / 2
 			);
+	}
+
+	:is(.sonic-envelope-handle, .sonic-envelope-curve) {
+		--_sonic-point-ring: var(--_sonic-lit);
+		--_sonic-point-core: var(--_sonic-lit);
+		--_sonic-point-lift: color-mix(in oklab, var(--_sonic-lit) 85%, #fff);
+		--_sonic-point-edge: max(1px, var(--_sonic-point-stroke, 0px));
+		--_sonic-point-halo: transparent;
+
 		z-index: 1;
 		box-sizing: border-box;
 		inline-size: var(--_sonic-point-size);
@@ -104,21 +125,6 @@
 			background-color 120ms ease-out,
 			border-color 120ms ease-out,
 			box-shadow 120ms ease-out;
-
-		&::after {
-			position: absolute;
-			inset: calc(-0.4 * var(--_sonic-point-size) - 2 * var(--_sonic-point-edge));
-			pointer-events: none;
-			content: '';
-			border: var(--_sonic-point-edge) solid var(--_sonic-point-bracket);
-			border-block-start-color: transparent;
-			border-radius: 50%;
-			rotate: 45deg;
-			scale: var(--_sonic-point-bracket-scale);
-			transition:
-				border-color 120ms ease-out,
-				scale 120ms ease-out;
-		}
 	}
 
 	.sonic-envelope-handle {
@@ -167,12 +173,6 @@
 			var(--_sonic-lit) calc(50% * var(--_sonic-relief)),
 			transparent
 		);
-		--_sonic-point-bracket: color-mix(
-			in oklab,
-			var(--_sonic-lit) calc(100% * (1 - var(--_sonic-relief))),
-			transparent
-		);
-		--_sonic-point-bracket-scale: 1;
 	}
 
 	@media (forced-colors: active) {

package/dist/styles/led.css

@@ -7,10 +7,26 @@
 @layer sonic {
 	.sonic-led {
 		--_sonic-led-size: var(--sonic-led-size, 0.5rem);
-		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, 0.625);
+		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, calc(0.8 - 0.175 * var(--_sonic-relief)));
 		--_sonic-lit-alt: var(--sonic-lit-alt, oklch(79% 0.2 150deg));
 		--_sonic-unit: calc(var(--_sonic-led-size) / 8);
-		--_sonic-led-bezel: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
+		--_sonic-led-modelled: calc(100% * var(--_sonic-relief));
+		--_sonic-led-bezel: var(
+			--sonic-bezel,
+			color-mix(
+				in oklab,
+				color-mix(in oklab, var(--_sonic-unlit) 55%, #000) var(--_sonic-led-modelled),
+				transparent
+			)
+		);
+		--_sonic-lens-glass: var(
+			--sonic-lens,
+			color-mix(
+				in oklab,
+				color-mix(in oklab, var(--_sonic-unlit) 60%, #000) var(--_sonic-led-modelled),
+				color-mix(in oklab, currentcolor 30%, transparent)
+			)
+		);
 
 		position: relative;
 		display: inline-block;

package/dist/styles/material.css

@@ -33,6 +33,7 @@
 		.sonic-segmented,
 		.sonic-slider,
 		.sonic-slider-readout,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-waveform-readout,
 		.sonic-wavestrip,
@@ -58,6 +59,7 @@
 		.sonic-ring,
 		.sonic-segmented-option,
 		.sonic-slider,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -92,6 +94,9 @@
 		);
 		--_sonic-lens-glass: var(--sonic-lens, color-mix(in oklab, var(--_sonic-unlit) 60%, #000));
 		--_sonic-lens: var(--_sonic-lens-glint), var(--_sonic-lens-glass);
+	}
+
+	:is(.sonic-led, .sonic-meter, .sonic-spectrum) {
 		--_sonic-hot: var(--sonic-hot, oklch(70.5% 0.187 48deg));
 		--_sonic-clip: var(--sonic-clip, oklch(63.7% 0.208 25deg));
 	}
@@ -150,6 +155,10 @@
 			color-mix(in oklab, var(--_sonic-focus) 60%, transparent);
 	}
 
+	:is(.sonic-number, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+		--_sonic-ink: var(--_sonic-glass-text);
+	}
+
 	:is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
 		--_sonic-detent-zone: var(--sonic-detent-zone, 8px);
 	}
@@ -172,6 +181,7 @@
 		.sonic-number,
 		.sonic-screen,
 		.sonic-slider-readout,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-waveform-readout,
 		.sonic-wavestrip,
@@ -179,18 +189,42 @@
 		.sonic-xy,
 		.sonic-xy-readout
 	) {
-		--_sonic-glass: var(--sonic-glass, color-mix(in oklab, var(--_sonic-unlit) 45%, #000));
+		--_sonic-glass-slab: color-mix(in oklab, var(--_sonic-unlit) 45%, #000);
+		--_sonic-glass-base: var(
+			--sonic-glass,
+			color-mix(
+				in oklab,
+				var(--_sonic-glass-slab) calc(100% * var(--_sonic-relief)),
+				light-dark(oklch(97% 0.003 286deg), var(--_sonic-glass-slab))
+			)
+		);
+		--_sonic-glass: var(--_sonic-glass-base);
 		--_sonic-glass-fill: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
+				color-mix(
+					in oklab,
+					var(--_sonic-glass) calc(100% - 12% * var(--_sonic-glass-depth, var(--_sonic-relief))),
+					#fff
+				),
 				var(--_sonic-glass)
 			)
 			var(--_sonic-glass);
 		--_sonic-glass-text: var(
 			--sonic-glass-text,
-			color-mix(in oklab, var(--_sonic-glass) 20%, #fff)
+			color-mix(
+				in oklab,
+				var(--_sonic-glass) 20%,
+				oklch(from var(--_sonic-glass) clamp(0, (0.6 - l) * 1000, 1) 0 0deg / 100%)
+			)
+		);
+
+		/* Invalid with the token unset, so the default takes over */
+		--_sonic-glass-edge-set: 1px solid var(--sonic-glass-edge);
+		--_sonic-glass-edge: var(
+			--_sonic-glass-edge-set,
+			calc(1px * (1 - var(--_sonic-relief))) solid
+				color-mix(in oklab, currentcolor 35%, transparent)
 		);
-		--_sonic-glass-edge: 1px solid var(--sonic-glass-edge);
 
 		/* Glass is forced to Canvas like the page, so only a border shows its edge */
 		@media (forced-colors: active) {
@@ -199,7 +233,15 @@
 	}
 
 	/* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
-	:is(.sonic-envelope, .sonic-number, .sonic-screen, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+	:is(
+		.sonic-envelope,
+		.sonic-number,
+		.sonic-screen,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
 		--_sonic-glass-depth: var(--sonic-glass-depth, var(--_sonic-relief));
 		--_sonic-glass-texture: var(--sonic-glass-texture, var(--_sonic-relief));
 		--_sonic-glass-pitch: max(2px, round(2 * var(--_sonic-unit), 1px));
@@ -238,7 +280,7 @@
 				),
 				repeating-linear-gradient(
 					to bottom,
-					rgb(0 0 0 / calc(0.04 * var(--_sonic-glass-texture))) 0
+					rgb(0 0 0 / calc(0.025 * var(--_sonic-glass-texture))) 0
 						calc(var(--_sonic-glass-pitch) / 2),
 					transparent 0 var(--_sonic-glass-pitch)
 				);
@@ -279,31 +321,13 @@
 		}
 	}
 
-	@media (forced-colors: none) {
-		/* A query reads the parent, or a pseudo-element's own element: on a readout itself, 0 leaves the warp on */
-		@container style(--sonic-relief: 1) and (not style(--sonic-glass-texture: 0)) {
-			:is(.sonic-number, .sonic-screen),
-			:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
-				filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w' x='-0.3' y='-0.3' width='1.6' height='1.6' primitiveUnits='objectBoundingBox' color-interpolation-filters='sRGB'%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000'/%3E%3CfeFlood x='.5' y='0' width='.5' height='1' flood-color='%23f00' result='r'/%3E%3CfeFlood x='0' y='.5' width='1' height='.5' flood-color='%230f0' result='g'/%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000' result='k'/%3E%3CfeComposite in='r' in2='g' operator='arithmetic' k2='1' k3='1' result='h'/%3E%3CfeMerge x='0' y='0' width='1' height='1'%3E%3CfeMergeNode in='k'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3CfeGaussianBlur x='0' y='0' width='1' height='1' stdDeviation='0.25'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='a'%3E%3CfeFuncR type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3CfeFuncG type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3CfeFuncG type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='.5 .5 0 0 0 .5 .5 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='f'%3E%3CfeFuncR type='gamma' amplitude='0.333' exponent='2'/%3E%3CfeFuncG type='gamma' exponent='2'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='a' in2='f' operator='arithmetic' k1='1' k3='-.5' k4='.5' result='m'/%3E%3CfeFlood flood-color='%23808080'/%3E%3CfeMerge result='n'%3E%3CfeMergeNode/%3E%3CfeMergeNode in='m'/%3E%3C/feMerge%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.016' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
-			}
-
-			:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
-				--_sonic-glass-bend: calc(0.008 * hypot(100cqi, 100cqb));
-
-				inset: calc(-1 * var(--_sonic-glass-bend));
-				border: var(--_sonic-glass-bend) solid rgb(0 0 0 / 50%);
-				border-radius: calc(var(--_sonic-glass-radius) + var(--_sonic-glass-bend));
-				clip-path: inset(var(--_sonic-glass-bend) round var(--_sonic-glass-radius));
-			}
-		}
-	}
-
 	:is(
 		.sonic-envelope,
 		.sonic-button,
 		.sonic-number,
 		.sonic-screen,
 		.sonic-segmented,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -382,7 +406,11 @@
 		place-items: center;
 		background: var(--_sonic-skirt);
 		border-radius: var(--_sonic-keycap-corner);
-		box-shadow: var(--_sonic-keycap-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
+		box-shadow:
+			var(--_sonic-keycap-drop),
+			var(--_sonic-rim),
+			0 0 0 max(1px, 0.75 * var(--_sonic-unit)) var(--_sonic-blank-edge, transparent),
+			var(--_sonic-focus-shadow);
 		scale: var(--_sonic-keycap-scale);
 		translate: 0 var(--_sonic-keycap-shift);
 		transition: var(--_sonic-press-transition);
@@ -403,6 +431,36 @@
 		}
 	}
 
+	.sonic-xy-bracket,
+	.sonic-envelope-bracket::before {
+		box-sizing: border-box;
+		inline-size: var(--_sonic-bracket-size);
+		block-size: var(--_sonic-bracket-size);
+		pointer-events: none;
+		content: '';
+		border: max(1px, 0.06 * var(--_sonic-bracket-size)) solid
+			color-mix(in oklab, var(--_sonic-glass-text) 45%, transparent);
+		border-radius: 50%;
+		opacity: 0;
+		mask: conic-gradient(
+			from 10deg,
+			#000 0 70deg,
+			transparent 0 180deg,
+			#000 0 250deg,
+			transparent 0
+		);
+		scale: 0.6;
+		transition:
+			opacity 120ms ease-out,
+			scale 120ms ease-out;
+	}
+
+	:state(dragging) > * > .sonic-xy-bracket,
+	:state(dragging) > * > .sonic-envelope-bracket::before {
+		opacity: calc(1 - var(--_sonic-relief));
+		scale: 1;
+	}
+
 	:is(.sonic-meter, .sonic-slider) {
 		--_sonic-groove:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(0.75 * var(--_sonic-unit))
@@ -455,6 +513,7 @@
 		.sonic-xy-readout
 	) {
 		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
+		--_sonic-glass: var(--sonic-readout-glass, var(--_sonic-glass-base));
 
 		box-sizing: border-box;
 		place-items: center;
@@ -470,7 +529,8 @@
 		font-size: calc(0.5 * var(--_sonic-readout-size));
 		font-variant-numeric: tabular-nums;
 		line-height: 1;
-		color: var(--_sonic-glass-text);
+		color: var(--sonic-readout-text, var(--_sonic-glass-text));
+		white-space: nowrap;
 		pointer-events: none;
 		cursor: default;
 		user-select: none;
@@ -567,13 +627,14 @@
 		}
 
 		& > .sonic-scale-tick {
-			background: var(--_sonic-etch);
+			background: var(--sonic-scale, var(--_sonic-etch));
 		}
 	}
 
 	@media (forced-colors: active) {
-		.sonic-scale-tick {
+		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {
 			forced-color-adjust: none;
+			background: var(--_sonic-etch);
 		}
 
 		:is(

package/dist/styles/meter.css

@@ -5,7 +5,7 @@
 }
 
 @property --_sonic-meter-length {
-	syntax: '<length>';
+	syntax: '<length-percentage>';
 	inherits: true;
 	initial-value: 128px;
 }
@@ -55,17 +55,12 @@
 		--_sonic-meter-segment-radius: calc(
 			var(--_sonic-meter-segment) * var(--_sonic-meter-segment-radius-ratio)
 		);
-		--_sonic-meter-segments: round(
-			down,
-			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
-				var(--_sonic-meter-gap),
-			var(--_sonic-meter-pitch)
-		);
 
 		position: relative;
 		flex-shrink: 0;
 		inline-size: var(--_sonic-meter-size);
 		block-size: var(--_sonic-meter-length);
+		container-type: size;
 		background: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
 
@@ -91,21 +86,18 @@
 	}
 
 	:state(ladder) > .sonic-meter {
-		--_sonic-meter-pitch: calc(
-			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
-		);
 		--_sonic-meter-gap: 0px;
-		--_sonic-meter-segments: calc(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset));
-		--_sonic-meter-ladder-radius: calc(
-			min(
-					var(--_sonic-meter-lens),
-					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
-				) /
-				2
-		);
 	}
 
+	/* A percentage length means the parent only on the meter's own box; its parts measure the box */
 	:is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-length: 100cqb;
+		--_sonic-meter-segments: round(
+			down,
+			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
+				var(--_sonic-meter-gap),
+			var(--_sonic-meter-pitch)
+		);
 		--_sonic-meter-span: calc(var(--_sonic-meter-max, 0) - var(--_sonic-meter-min, -60));
 		--_sonic-meter-hot-at: round(
 			clamp(
@@ -177,6 +169,17 @@
 	}
 
 	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-pitch: calc(
+			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
+		);
+		--_sonic-meter-segments: calc(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset));
+		--_sonic-meter-ladder-radius: calc(
+			min(
+					var(--_sonic-meter-lens),
+					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
+				) /
+				2
+		);
 		--_sonic-meter-hot-at: calc(var(--_sonic-meter-hot-segments, 0) * var(--_sonic-meter-pitch));
 		--_sonic-meter-clip-at: calc(var(--_sonic-meter-clip-segments, 0) * var(--_sonic-meter-pitch));
 		--_sonic-meter-segment-mask: radial-gradient(
@@ -193,6 +196,7 @@
 	}
 
 	[orientation='horizontal'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-length: 100cqi;
 		--_sonic-meter-segment-mask:
 			linear-gradient(to right, #000 var(--_sonic-meter-segment), transparent 0) 0
 				var(--_sonic-meter-segment-radius) / var(--_sonic-meter-pitch)

package/dist/styles/panel.css

@@ -20,7 +20,8 @@
 		--_sonic-panel-radius: var(--sonic-panel-radius, 0.75rem);
 		--_sonic-unit: var(--_sonic-panel-depth);
 
-		background: var(--sonic-panel, rgb(255 255 255 / 3%));
+		color: var(--sonic-panel-text, inherit);
+		background: var(--sonic-panel, color-mix(in oklab, currentcolor 3%, transparent));
 		border: 1px solid var(--_sonic-panel-line);
 		border-radius: var(--_sonic-panel-radius);
 		box-shadow:

package/dist/styles/slider.css

@@ -10,6 +10,12 @@
 	initial-value: 128px;
 }
 
+@property --_sonic-slider-groove-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.15;
+}
+
 @property --_sonic-slider-value {
 	syntax: '<number>';
 	inherits: true;
@@ -56,6 +62,7 @@
 			--sonic-buffered,
 			color-mix(in oklab, var(--_sonic-ink) 18%, var(--_sonic-unlit))
 		);
+		--_sonic-slider-scrub: var(--sonic-scrub, color-mix(in oklab, var(--_sonic-lit) 55%, #fff));
 		--_sonic-slider-toward: to right;
 		--_sonic-slider-across: to bottom;
 		--_sonic-slider-cursor: ew-resize;
@@ -69,9 +76,32 @@
 		inline-size: var(--_sonic-slider-length);
 		block-size: var(--_sonic-slider-size);
 		container-type: size;
-		touch-action: pan-y;
+		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
 		user-select: none;
+		transition: --_sonic-slider-groove-ratio 120ms ease-out;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
+	:where(:not(:disabled)) > .sonic-slider:focus-visible,
+	:state(dragging) > .sonic-slider {
+		--_sonic-slider-groove-ratio: var(
+			--sonic-slider-groove-hover-ratio,
+			var(--sonic-slider-groove-ratio, 0.15)
+		);
+	}
+
+	@media (hover: hover) {
+		/* fallow-ignore-next-line code-duplication -- `:hover` and `:focus-visible` split by `(hover: hover)` */
+		:where(:not(:disabled)) > .sonic-slider:hover {
+			--_sonic-slider-groove-ratio: var(
+				--sonic-slider-groove-hover-ratio,
+				var(--sonic-slider-groove-ratio, 0.15)
+			);
+		}
 	}
 
 	[orientation='vertical'] > .sonic-slider {
@@ -82,7 +112,7 @@
 
 		inline-size: var(--_sonic-slider-size);
 		block-size: var(--_sonic-slider-length);
-		touch-action: pan-x;
+		touch-action: var(--sonic-touch-action, pan-x);
 	}
 
 	:state(dragging) > .sonic-slider {
@@ -225,14 +255,16 @@
 	}
 
 	.sonic-slider-groove {
-		--_sonic-slider-lit-low: min(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
-		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
+		--_sonic-slider-lit-to: var(--_sonic-slider-played, var(--_sonic-slider-value, 0));
+		--_sonic-slider-lit-low: min(var(--_sonic-slider-origin, 0), var(--_sonic-slider-lit-to));
+		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-lit-to));
 
 		position: absolute;
 		inset: calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2)
 			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
 			calc(50% - var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2);
 		background:
+			var(--_sonic-slider-scrub-region, none),
 			linear-gradient(
 				var(--_sonic-slider-toward),
 				transparent
@@ -430,7 +462,11 @@
 
 	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
 	:not([orientation='vertical']) > .sonic-slider > .sonic-slider-readout {
-		--_sonic-slider-readout-at: calc(var(--_sonic-slider-cap) / 2 + var(--_sonic-slider-offset));
+		--_sonic-slider-readout-at: calc(
+			var(--_sonic-slider-cap) / 2 +
+				var(--_sonic-slider-readout-value, var(--_sonic-slider-value, 0)) *
+				var(--_sonic-slider-travel)
+		);
 
 		inset-inline: var(--_sonic-slider-readout-at) calc(100cqi - var(--_sonic-slider-readout-at));
 		justify-self: center;
@@ -454,6 +490,7 @@
 
 		.sonic-slider {
 			--_sonic-slider-buffered: color-mix(in srgb, CanvasText 50%, GrayText);
+			--_sonic-slider-scrub: CanvasText;
 		}
 
 		.sonic-slider-groove {

package/dist/styles/spectrum.css

@@ -0,0 +1,105 @@
+@property --_sonic-spectrum-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 96px;
+}
+
+@property --_sonic-spectrum-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 320px;
+}
+
+@property --_sonic-spectrum-lit {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-spectrum-hot {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(250 115 20);
+}
+
+@property --_sonic-spectrum-clip {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(240 70 70);
+}
+
+@property --_sonic-spectrum-grid {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-spectrum-hot-from {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: -12;
+}
+
+@property --_sonic-spectrum-clip-from {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: -3;
+}
+
+@layer sonic {
+	:is(sonic-spectrum, .sonic-spectrum) {
+		--_sonic-spectrum-size: var(--sonic-spectrum-size, 6rem);
+		--_sonic-spectrum-length: var(--sonic-spectrum-length, 20rem);
+	}
+
+	:has(> .sonic-spectrum):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-spectrum:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-spectrum-length);
+		block-size: var(--_sonic-spectrum-size);
+	}
+
+	.sonic-spectrum {
+		--_sonic-unit: calc(var(--_sonic-spectrum-size) / 48);
+		--_sonic-spectrum-lit: var(--_sonic-lit);
+		--_sonic-spectrum-hot: var(--_sonic-hot);
+		--_sonic-spectrum-clip: var(--_sonic-clip);
+		--_sonic-spectrum-grid: color-mix(in oklab, var(--_sonic-glass-text) 20%, transparent);
+		--_sonic-spectrum-hot-from: var(--sonic-spectrum-hot-from, -12);
+		--_sonic-spectrum-clip-from: var(--sonic-spectrum-clip-from, -3);
+
+		inline-size: var(--_sonic-spectrum-length);
+		block-size: var(--_sonic-spectrum-size);
+		padding: calc(var(--_sonic-spectrum-size) * var(--sonic-spectrum-inset-ratio, 0.06));
+
+		/* The canvas's backing size would otherwise feed an intrinsically sized parent */
+		contain: size;
+
+		--_sonic-glass-radius: calc(
+			var(--_sonic-spectrum-size) * var(--sonic-spectrum-radius-ratio, 0.08)
+		);
+
+		border-radius: var(--_sonic-glass-radius);
+	}
+
+	.sonic-spectrum-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */
+	@media (forced-colors: active) {
+		.sonic-spectrum {
+			--_sonic-spectrum-lit: rgb(from CanvasText r g b / 100%);
+			--_sonic-spectrum-hot: rgb(from Highlight r g b / 100%);
+			--_sonic-spectrum-clip: rgb(from Highlight r g b / 100%);
+			--_sonic-spectrum-grid: rgb(from GrayText r g b / 100%);
+		}
+	}
+}

package/dist/styles/switch.css

@@ -230,13 +230,16 @@
 		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
 		aspect-ratio: 1;
 		pointer-events: none;
-		background: radial-gradient(
-			closest-side,
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
-			var(--_sonic-switch-bushing-shade) 48%,
-			var(--_sonic-cap) 70%,
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
-			var(--_sonic-switch-bushing-shade)
+		background: var(
+			--sonic-well,
+			radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
+				var(--_sonic-switch-bushing-shade) 48%,
+				var(--_sonic-cap) 70%,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
+				var(--_sonic-switch-bushing-shade)
+			)
 		);
 		border-radius: 50%;
 		box-shadow: