@xsynaptic/sonic-ui 0.24.1 → 0.25.1

package/dist/styles/dial.css

@@ -83,7 +83,8 @@
 		block-size: var(--_sonic-dial-size);
 		touch-action: var(--sonic-touch-action, pan-x);
 		cursor: ns-resize;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		border-radius: 50%;
 	}
 
@@ -130,7 +131,7 @@
 			transparent 0 var(--_sonic-dial-notch-pitch)
 		);
 		border-radius: 50%;
-		mask:
+		-webkit-mask:
 			radial-gradient(
 				closest-side,
 				transparent calc(100% - var(--_sonic-dial-notch-band) * 0.8),
@@ -142,12 +143,25 @@
 				#000 calc(var(--_sonic-dial-sweep) + 2 * var(--_sonic-dial-notch-width)),
 				transparent 0
 			);
-		mask-composite: intersect;
+		        mask:
+			radial-gradient(
+				closest-side,
+				transparent calc(100% - var(--_sonic-dial-notch-band) * 0.8),
+				#000 0 calc(100% - var(--_sonic-dial-notch-band) * 0.25),
+				transparent 0
+			),
+			conic-gradient(
+				from calc(var(--_sonic-dial-start) - var(--_sonic-dial-notch-width)),
+				#000 calc(var(--_sonic-dial-sweep) + 2 * var(--_sonic-dial-notch-width)),
+				transparent 0
+			);
+		-webkit-mask-composite: source-in, xor;
+		        mask-composite: intersect;
 	}
 
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
-		line-height: 1cap;
+		line-height: 0.7em;
 	}
 
 		.sonic-dial-scale > * {
@@ -162,8 +176,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% + 0.15cap))
-				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.105em))
+				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.105em));
 		}
 
 		.sonic-dial-scale > .sonic-scale-tick {
@@ -182,7 +196,8 @@
 		position: absolute;
 		inset: calc(var(--_sonic-dial-scale-band) + var(--_sonic-dial-notch-band));
 		border-radius: 50%;
-		mask: var(--_sonic-arc-mask);
+		-webkit-mask: var(--_sonic-arc-mask);
+		        mask: var(--_sonic-arc-mask);
 	}
 
 	.sonic-dial-ring {
@@ -253,7 +268,8 @@
 
 		display: block;
 		background: none;
-		mask: none;
+		-webkit-mask: none;
+		        mask: none;
 	}
 
 		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before,:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
@@ -279,7 +295,8 @@
 						calc(var(--_sonic-dial-modulation-to, 0) * var(--_sonic-dial-sweep)),
 					transparent 0
 				);
-			mask: var(--_sonic-arc-mask);
+			-webkit-mask: var(--_sonic-arc-mask);
+			        mask: var(--_sonic-arc-mask);
 		}
 
 		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
@@ -312,10 +329,10 @@
 		.sonic-dial-cap::before {
 			inset: 0;
 			background: repeating-conic-gradient(
-				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))) 0,
-				rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief)))
+				color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent) 0,
+				color-mix(in srgb, var(--_sonic-shine) calc(12% * var(--_sonic-relief)), transparent)
 					calc(var(--_sonic-dial-ridge-angle) / 2),
-				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief)))
+				color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent)
 					var(--_sonic-dial-ridge-angle)
 			);
 			rotate: var(--_sonic-dial-angle);
@@ -329,15 +346,15 @@
 						calc(
 							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
 						),
-					rgb(from var(--_sonic-shine) r g b / calc(0.16 * var(--_sonic-relief))),
+					color-mix(in srgb, var(--_sonic-shine) calc(16% * var(--_sonic-relief)), transparent),
 					transparent 12%,
-					rgb(from var(--_sonic-shade) r g b / calc(0.1 * var(--_sonic-relief))) 25%,
+					color-mix(in srgb, var(--_sonic-shade) calc(10% * var(--_sonic-relief)), transparent) 25%,
 					transparent 38%,
-					rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief))) 50%,
+					color-mix(in srgb, var(--_sonic-shine) calc(12% * var(--_sonic-relief)), transparent) 50%,
 					transparent 62%,
-					rgb(from var(--_sonic-shade) r g b / calc(0.1 * var(--_sonic-relief))) 75%,
+					color-mix(in srgb, var(--_sonic-shade) calc(10% * var(--_sonic-relief)), transparent) 75%,
 					transparent 88%,
-					rgb(from var(--_sonic-shine) r g b / calc(0.16 * var(--_sonic-relief)))
+					color-mix(in srgb, var(--_sonic-shine) calc(16% * var(--_sonic-relief)), transparent)
 				),
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
@@ -368,7 +385,7 @@
 			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(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent);
 			clip-path: shape(
 				from 0 100%,
 				line to calc(50% - var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip),

package/dist/styles/envelope.css

@@ -40,7 +40,8 @@
 		inline-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-aspect-ratio));
 		block-size: var(--_sonic-envelope-size);
 		container-type: size;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		isolation: isolate;
 	}
 
@@ -55,11 +56,11 @@
 		clip-path: inset(calc(-1 * var(--_sonic-envelope-inset)));
 	}
 
-	.sonic-envelope-bracket {
+	.sonic-envelope-reticle {
 		--_sonic-point-size: calc(
 			2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-ratio)
 		);
-		--_sonic-bracket-size: var(--_sonic-point-size);
+		--_sonic-reticle-size: var(--_sonic-point-size);
 
 		position: absolute;
 		inset: 0;
@@ -67,7 +68,7 @@
 		pointer-events: none;
 	}
 
-		.sonic-envelope-bracket[data-sonic-part='curve'] {
+		.sonic-envelope-reticle[data-sonic-part='curve'] {
 			--_sonic-point-size: calc(
 				2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio)
 			);
@@ -93,7 +94,7 @@
 	}
 
 	:is(.sonic-envelope-handle, .sonic-envelope-curve),
-	.sonic-envelope-bracket::before {
+	.sonic-envelope-reticle::before {
 		position: absolute;
 		inset: auto auto
 			calc(

package/dist/styles/material/arc.css

@@ -13,10 +13,10 @@
 		);
 		--_sonic-arc-shade: radial-gradient(
 			closest-side,
-			rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)))
+			color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent)
 				calc(100% - var(--_sonic-arc-width)),
 			transparent calc(100% - var(--_sonic-arc-width) * 0.4),
-			rgb(from var(--_sonic-shade) r g b / calc(0.25 * var(--_sonic-relief))) 100%
+			color-mix(in srgb, var(--_sonic-shade) calc(25% * var(--_sonic-relief)), transparent) 100%
 		);
 	}
 }

package/dist/styles/material/cap.css

@@ -50,9 +50,9 @@
 		--_sonic-sheen: linear-gradient(
 			calc(var(--_sonic-light-fall) - 58deg),
 			transparent 20%,
-			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))) 45%,
+			color-mix(in srgb, var(--_sonic-shine) calc(10% * var(--_sonic-relief)), transparent) 45%,
 			transparent 55%,
-			rgb(from var(--_sonic-shade) r g b / calc(0.06 * var(--_sonic-relief))) 80%
+			color-mix(in srgb, var(--_sonic-shade) calc(6% * var(--_sonic-relief)), transparent) 80%
 		);
 		--_sonic-press-transition:
 			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
@@ -60,9 +60,9 @@
 			box-shadow var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 		--_sonic-face-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(1.5 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(35% * var(--_sonic-relief)), transparent),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) var(--_sonic-unit)
-				rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shine) calc(12% * var(--_sonic-relief)), transparent);
 		--_sonic-rim-width: max(1px, round(0.75 * var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-rim: 0 0 0 var(--_sonic-rim-width)
 			var(
@@ -73,7 +73,11 @@
 					var(--_sonic-shade)
 				)
 			);
-		--_sonic-drop-shade: rgb(from var(--_sonic-shade) r g b / calc(0.65 * var(--_sonic-relief)));
+		--_sonic-drop-shade: color-mix(
+			in srgb,
+			var(--_sonic-shade) calc(65% * var(--_sonic-relief)),
+			transparent
+		);
 		--_sonic-focus-shadow: 0 0 transparent;
 		--_sonic-focus-glow: 0 0 max(4px, 3 * var(--_sonic-unit)) max(1px, 0.5 * var(--_sonic-unit))
 			color-mix(in oklab, var(--_sonic-focus) calc(60% * var(--_sonic-focus-strength)), transparent);
@@ -84,7 +88,13 @@
 	}
 
 	/* A plain box has no corner of its own, so its focus outline and glow take this one */
-	:is(.sonic-number, .sonic-slider, .sonic-switch-position, .sonic-waveform, .sonic-wavestrip) {
+	:is(
+		.sonic-number,
+		.sonic-slider,
+		.sonic-switch-position,
+		.sonic-waveform,
+		.sonic-wavestrip-canvas
+	) {
 		border-radius: var(--sonic-focus-radius, 0);
 	}
 
@@ -141,14 +151,14 @@
 		.sonic-segmented-option,
 		.sonic-slider,
 		.sonic-waveform,
-		.sonic-wavestrip,
+		.sonic-wavestrip-canvas,
 		.sonic-xy-axis
 	):focus-visible {
 		outline: 2px solid transparent;
 		outline-offset: var(--sonic-focus-outline-offset, -2px);
 	}
 
-		:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip,.sonic-xy-axis):focus-visible:not([data-sonic-pointer-focus]) {
+		:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip-canvas,.sonic-xy-axis):focus-visible:not([data-sonic-pointer-focus]) {
 			--_sonic-cap: var(--_sonic-cap-hover);
 			--_sonic-focus-shadow: var(--_sonic-focus-glow);
 		}
@@ -157,7 +167,7 @@
 			.sonic-number,
 			.sonic-slider,
 			.sonic-waveform,
-			.sonic-wavestrip,
+			.sonic-wavestrip-canvas,
 			.sonic-xy-axis
 		):focus-visible:not([data-sonic-pointer-focus]) {
 		outline: var(--sonic-focus-outline, 2px solid transparent);
@@ -226,12 +236,12 @@
 			.sonic-segmented-option,
 			.sonic-slider,
 			.sonic-waveform,
-			.sonic-wavestrip
+			.sonic-wavestrip-canvas
 		):focus-visible {
 			outline-offset: 2px;
 		}
 
-			[data-sonic-pointer-focus]:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip):focus-visible {
+			[data-sonic-pointer-focus]:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip-canvas):focus-visible {
 				outline-style: none;
 			}
 

package/dist/styles/material/glass.css

@@ -14,7 +14,7 @@
 			color-mix(
 				in oklab,
 				var(--_sonic-glass-slab) calc(100% * var(--_sonic-relief)),
-				light-dark(oklch(97% 0.003 286deg), var(--_sonic-glass-slab))
+				color-mix(in oklab, Canvas 97%, #000)
 			)
 		);
 		--_sonic-glass: var(--_sonic-glass-own, var(--_sonic-glass-base));

package/dist/styles/material/groove.css

@@ -2,10 +2,10 @@
 	:is(.sonic-meter, .sonic-slider) {
 		--_sonic-groove:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(0.75 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent),
 			inset 0 0 calc(0.5 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0
-				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shine) calc(6% * var(--_sonic-relief)), transparent);
 	}
 }

package/dist/styles/material/keycap.css

@@ -19,11 +19,11 @@
 		--_sonic-engraving: drop-shadow(
 				calc(-0.4 * var(--_sonic-cast-x)) calc(-0.4 * var(--_sonic-cast-y))
 					calc(0.4 * var(--_sonic-unit))
-					rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief)))
+					color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent)
 			)
 			drop-shadow(
 				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0
-					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief)))
+					color-mix(in srgb, var(--_sonic-shine) calc(7% * var(--_sonic-relief)), transparent)
 			);
 	}
 

package/dist/styles/material/lens.css

@@ -2,7 +2,7 @@
 	:is(.sonic-led, .sonic-meter) {
 		--_sonic-lens-glint: linear-gradient(
 			var(--_sonic-light-fall),
-			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))),
+			color-mix(in srgb, var(--_sonic-shine) calc(10% * var(--_sonic-relief)), transparent),
 			transparent 60%
 		);
 		--_sonic-lens-modelled: calc(100% * var(--_sonic-relief));

package/dist/styles/material/pane.css

@@ -38,25 +38,33 @@
 			background:
 				linear-gradient(
 					var(--_sonic-light-fall),
-					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-glass-depth))),
+					color-mix(in srgb, var(--_sonic-shine) calc(7% * var(--_sonic-glass-depth)), transparent),
 					transparent 45%
 				),
 				radial-gradient(
 					farthest-corner,
 					transparent 55%,
-					rgb(from var(--_sonic-shade) r g b / calc(0.4 * var(--_sonic-glass-texture)))
+					color-mix(
+						in srgb,
+						var(--_sonic-shade) calc(40% * var(--_sonic-glass-texture)),
+						transparent
+					)
 				),
 				repeating-linear-gradient(
 					to bottom,
-					rgb(from var(--_sonic-shade) r g b / calc(0.025 * var(--_sonic-glass-texture))) 0
-						calc(var(--_sonic-glass-pitch) / 2),
+					color-mix(
+							in srgb,
+							var(--_sonic-shade) calc(2.5% * var(--_sonic-glass-texture)),
+							transparent
+						)
+						0 calc(var(--_sonic-glass-pitch) / 2),
 					transparent 0 var(--_sonic-glass-pitch)
 				);
 			border-radius: inherit;
 			box-shadow:
 				var(--_sonic-well),
 				inset 0 0 calc(3 * var(--_sonic-glass-depth) * var(--_sonic-unit))
-					rgb(from var(--_sonic-shade) r g b / 45%);
+					color-mix(in srgb, var(--_sonic-shade) 45%, transparent);
 		}
 
 		@media (forced-colors: none) {

package/dist/styles/material/readout.css

@@ -45,7 +45,8 @@
 		white-space: nowrap;
 		pointer-events: none;
 		cursor: default;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		background: var(--_sonic-glass-fill);
 		border: var(--_sonic-glass-edge);
 		border-radius: var(
@@ -54,9 +55,9 @@
 		);
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-readout-depth))),
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-readout-depth)), transparent),
 			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
-				rgb(from var(--_sonic-shine) r g b / calc(0.08 * var(--_sonic-readout-depth)));
+				color-mix(in srgb, var(--_sonic-shine) calc(8% * var(--_sonic-readout-depth)), transparent);
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
 		transition:

package/dist/styles/material/{bracket.css → reticle.css}

@@ -1,16 +1,23 @@
 @layer sonic.material {
-	.sonic-xy-bracket,
-	.sonic-envelope-bracket::before {
+	.sonic-xy-reticle,
+	.sonic-envelope-reticle::before {
 		box-sizing: border-box;
-		inline-size: var(--_sonic-bracket-size);
-		block-size: var(--_sonic-bracket-size);
+		inline-size: var(--_sonic-reticle-size);
+		block-size: var(--_sonic-reticle-size);
 		pointer-events: none;
 		content: '';
-		border: max(1px, 0.06 * var(--_sonic-bracket-size)) solid
+		border: max(1px, 0.06 * var(--_sonic-reticle-size)) solid
 			color-mix(in oklab, currentcolor 45%, transparent);
 		border-radius: 50%;
 		opacity: 0;
-		mask: conic-gradient(
+		-webkit-mask: conic-gradient(
+			from 10deg,
+			#000 0 70deg,
+			transparent 0 180deg,
+			#000 0 250deg,
+			transparent 0
+		);
+		        mask: conic-gradient(
 			from 10deg,
 			#000 0 70deg,
 			transparent 0 180deg,
@@ -23,8 +30,8 @@
 			scale var(--_sonic-fade-duration) ease-out;
 	}
 
-	:state(dragging) > * > .sonic-xy-bracket,
-	:state(dragging) > * > .sonic-envelope-bracket::before {
+	:state(dragging) > * > .sonic-xy-reticle,
+	:state(dragging) > * > .sonic-envelope-reticle::before {
 		opacity: calc(1 - var(--_sonic-relief));
 		scale: 1;
 	}

package/dist/styles/material/well.css

@@ -12,9 +12,9 @@
 			inset calc(var(--_sonic-well-depth) * var(--_sonic-cast-x))
 				calc(var(--_sonic-well-depth) * var(--_sonic-cast-y))
 				calc(2 * var(--_sonic-well-depth) * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.6 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(60% * var(--_sonic-relief)), transparent),
 			calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-x))
 				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0
-				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shine) calc(6% * var(--_sonic-relief)), transparent);
 	}
 }

package/dist/styles/material.css

@@ -10,6 +10,6 @@
 @import './material/keycap.css';
 @import './material/arc.css';
 @import './material/lens.css';
-@import './material/bracket.css';
+@import './material/reticle.css';
 @import './material/groove.css';
 @import './material/scale.css';

package/dist/styles/meter.css

@@ -167,8 +167,10 @@
 		position: absolute;
 		inset: auto var(--_sonic-meter-inset) var(--_sonic-meter-inset);
 		block-size: calc(var(--_sonic-meter-segments) - var(--_sonic-meter-gap));
-		mask: var(--_sonic-meter-segment-mask);
-		mask-composite: add;
+		-webkit-mask: var(--_sonic-meter-segment-mask);
+		        mask: var(--_sonic-meter-segment-mask);
+		-webkit-mask-composite: source-over;
+		        mask-composite: add;
 	}
 
 	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
@@ -270,7 +272,7 @@
 	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
-				rgb(from var(--_sonic-shine) r g b / calc(0.45 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(45% * var(--_sonic-relief)), transparent),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
@@ -321,7 +323,7 @@
 			var(--_sonic-lit-warning) 0 var(--_sonic-meter-clip-at),
 			var(--_sonic-lit-danger) 0
 		);
-		mask:
+		-webkit-mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
 				transparent var(--_sonic-meter-lit-from),
@@ -331,7 +333,18 @@
 				transparent 0
 			),
 			var(--_sonic-meter-segment-mask);
-		mask-composite: intersect, add, add, add, add, add, add;
+		        mask:
+			linear-gradient(
+				var(--_sonic-meter-toward),
+				transparent var(--_sonic-meter-lit-from),
+				#000 0 var(--_sonic-meter-lit),
+				transparent 0 calc(var(--_sonic-meter-peak-hold-edge) - var(--_sonic-meter-pitch)),
+				#000 0 var(--_sonic-meter-peak-hold-edge),
+				transparent 0
+			),
+			var(--_sonic-meter-segment-mask);
+		-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+		        mask-composite: intersect, add, add, add, add, add, add;
 	}
 
 	.sonic-meter-clip {

package/dist/styles/number.css

@@ -47,7 +47,8 @@
 		line-height: 1;
 		touch-action: var(--sonic-touch-action, pan-x);
 		cursor: ns-resize;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 

package/dist/styles/panel.css

@@ -29,14 +29,14 @@
 		box-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(7% * var(--_sonic-relief)), transparent),
 			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(35% * var(--_sonic-relief)), transparent),
 			calc(2 * sin(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
 				calc(2 * cos(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
 				calc(3 * max(0px, var(--_sonic-panel-depth)))
-				rgb(from var(--_sonic-shade) r g b / calc(0.45 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(45% * var(--_sonic-relief)), transparent);
 	}
 
 	.sonic-panel-title {

package/dist/styles/region.css

@@ -0,0 +1,88 @@
+@layer sonic.material, sonic.control;
+
+@layer sonic.control {
+	sonic-region {
+		display: none;
+	}
+
+	.sonic-region {
+		--_sonic-region-paint: var(--sonic-region-bracket, var(--_sonic-marker, var(--_sonic-ink)));
+		--_sonic-region-colour: var(--_sonic-region-paint);
+		--_sonic-region-bracket-width: var(
+			--sonic-region-bracket-width,
+			max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+		);
+
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: calc(var(--_sonic-region-from, 0) * 100%);
+		inline-size: calc((var(--_sonic-region-to, 0) - var(--_sonic-region-from, 0)) * 100%);
+		min-inline-size: calc(2 * var(--_sonic-region-bracket-width));
+		pointer-events: none;
+		border-radius: var(--sonic-region-bracket-radius, calc(2 * var(--_sonic-unit)));
+	}
+
+		.sonic-region:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: var(--sonic-focus-outline-offset, -2px);
+		}
+
+			.sonic-region:focus-visible:not([data-sonic-pointer-focus]) {
+				outline: var(--sonic-focus-outline, 2px solid transparent);
+				box-shadow: var(--_sonic-focus-glow);
+			}
+
+	:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+		--_sonic-region-colour: color-mix(in oklab, var(--_sonic-region-paint) 45%, transparent);
+	}
+
+	.sonic-region-bracket {
+		position: absolute;
+		inset: 0;
+		box-sizing: border-box;
+		background: var(--sonic-region-fill, transparent);
+		border: var(--_sonic-region-bracket-width) solid var(--_sonic-region-colour);
+		border-radius: inherit;
+	}
+
+	.sonic-region[data-sonic-clipped~='start'] {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='start'] > .sonic-region-bracket {
+			border-inline-start-width: 0;
+		}
+
+	.sonic-region[data-sonic-clipped~='end'] {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='end'] > .sonic-region-bracket {
+			border-inline-end-width: 0;
+		}
+
+	@media (forced-colors: active) {
+		.sonic-region {
+			--_sonic-region-colour: CanvasText;
+		}
+
+			.sonic-region:focus-visible {
+				outline-offset: 2px;
+			}
+
+				.sonic-region[data-sonic-pointer-focus]:focus-visible {
+					outline-style: none;
+				}
+
+		:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+			--_sonic-region-colour: GrayText;
+		}
+
+		.sonic-region-bracket {
+			forced-color-adjust: none;
+			background: none;
+		}
+	}
+}

package/dist/styles/ring.css

@@ -50,7 +50,8 @@
 					transparent 0
 				);
 			border-radius: 50%;
-			mask: var(--_sonic-arc-mask);
+			-webkit-mask: var(--_sonic-arc-mask);
+			        mask: var(--_sonic-arc-mask);
 		}
 
 		@media (forced-colors: active) {

package/dist/styles/screen.css

@@ -11,14 +11,16 @@
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
 		--_sonic-screen-radius-ratio: var(--sonic-screen-radius-ratio, 0.15);
 		--_sonic-screen-radius-own: calc(var(--_sonic-screen-size) * var(--sonic-screen-radius-ratio));
+		--_sonic-screen-radius: var(
+			--_sonic-screen-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
+		);
 		--_sonic-screen-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
+		--_sonic-screen-inset: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
 		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
 
 		min-block-size: var(--_sonic-screen-size);
-		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
-		border-radius: var(
-			--_sonic-screen-radius-own,
-			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
-		);
+		padding: var(--_sonic-screen-inset);
+		border-radius: var(--_sonic-screen-radius);
 	}
 }

package/dist/styles/segmented.css

@@ -65,7 +65,8 @@
 		block-size: var(--_sonic-segmented-size);
 		padding: var(--_sonic-segmented-gap);
 		touch-action: pan-y;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		background: var(--_sonic-well-floor);
 		border-radius: var(--_sonic-segmented-corner);
 		box-shadow: var(--_sonic-well);