@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/dist/styles/dial.css

@@ -83,11 +83,12 @@
 		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%;
 	}
 
-	:state(dragging) > .sonic-dial {
+	.sonic-dial[data-sonic-dragging] {
 		--_sonic-cap: var(--_sonic-cap-hover);
 	}
 
@@ -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 {
@@ -236,7 +251,7 @@
 		display: none;
 	}
 
-	:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+	.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation {
 		--_sonic-dial-modulation-value-angle: calc(
 			var(--_sonic-dial-modulation-value, 0) * var(--_sonic-dial-sweep)
 		);
@@ -253,17 +268,18 @@
 
 		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 {
+		:is(.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation)::before,:is(.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation)::after {
 			position: absolute;
 			inset: 0;
 			content: '';
 			border-radius: 50%;
 		}
 
-		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before {
+		:is(.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation)::before {
 			background:
 				conic-gradient(
 					from var(--_sonic-dial-start),
@@ -279,10 +295,11 @@
 						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 {
+		:is(.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation)::after {
 			background: linear-gradient(
 					var(--_sonic-dial-modulation-tick),
 					var(--_sonic-dial-modulation-tick)
@@ -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),
@@ -397,7 +414,7 @@
 			--_sonic-dial-modulation: CanvasText;
 		}
 
-		:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+		.sonic-dial[data-sonic-modulated] > .sonic-dial-modulation {
 			--_sonic-dial-modulation-range: GrayText;
 			--_sonic-dial-modulation-tick: CanvasText;
 		}

package/dist/styles/envelope.css

@@ -6,6 +6,12 @@
 	initial-value: 80px;
 }
 
+@property --_sonic-point-edge {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	:is(sonic-envelope, .sonic-envelope) {
 		--_sonic-envelope-size: var(--sonic-envelope-size, 5rem);
@@ -40,7 +46,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 +62,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 +74,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 +100,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/led.css

@@ -75,7 +75,7 @@
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
 		:where(
 				.sonic-button:is([aria-pressed='true'], [aria-expanded='true']),
-				[momentary]:state(pressed) > .sonic-button,
+				[momentary] > .sonic-button[data-sonic-pressed],
 				.sonic-segmented-option[aria-checked='true'],
 				.sonic-toggle:has(
 					> [role='switch'][aria-checked='true'],
@@ -83,7 +83,7 @@
 				)
 			)
 			*,
-		:where(:state(at-origin):not(:disabled) > .sonic-led)
+		:where(:not(:disabled):has(> [data-sonic-at-origin]) > .sonic-led)
 	) {
 		background:
 			radial-gradient(
@@ -95,8 +95,8 @@
 			var(--_sonic-lens-bezel);
 	}
 
-		.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
-			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
+		.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary] > .sonic-button[data-sonic-pressed],.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:not(:disabled):has( > [data-sonic-at-origin]) > .sonic-led))::after {
 			background: radial-gradient(
 				closest-side,
 				color-mix(
@@ -114,7 +114,7 @@
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
 		:where(
 				.sonic-button:is([aria-pressed='true'], [aria-expanded='true']),
-				[momentary]:state(pressed) > .sonic-button,
+				[momentary] > .sonic-button[data-sonic-pressed],
 				.sonic-segmented-option[aria-checked='true'],
 				.sonic-toggle:has(
 					> [role='switch'][aria-checked='true'],
@@ -122,13 +122,13 @@
 				)
 			)
 			*,
-		:where(:state(at-origin):not(:disabled) > .sonic-led)
+		:where(:not(:disabled):has(> [data-sonic-at-origin]) > .sonic-led)
 	) {
 			background: none;
 	}
 
-			.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
-			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
+			.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary] > .sonic-button[data-sonic-pressed],.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:not(:disabled):has( > [data-sonic-at-origin]) > .sonic-led))::after {
 				background: var(--_sonic-lit);
 				box-shadow: 0 0 0 1px CanvasText;
 			}

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

@@ -1,3 +1,9 @@
+@property --_sonic-rim-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.material {
 	:is(
 		.sonic-dial,
@@ -50,9 +56,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 +66,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 +79,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 +94,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 +157,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 +173,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);
@@ -173,8 +189,13 @@
 		}
 	}
 
-	:state(editing)
-		> :is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+	:is(
+		.sonic-dial,
+		.sonic-number,
+		.sonic-slider,
+		.sonic-waveform,
+		.sonic-wavestrip
+	)[data-sonic-editing] {
 		--_sonic-cap: var(--_sonic-cap-hover);
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 	}
@@ -226,12 +247,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

@@ -1,3 +1,9 @@
+@property --_sonic-glass-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 2px;
+}
+
 @keyframes sonic-glass-breathe {
 	to {
 		opacity: calc(0.4 * min(1, var(--_sonic-glass-texture)));
@@ -38,25 +44,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) {
@@ -76,7 +90,7 @@
 			}
 
 			@media (prefers-reduced-motion: no-preference) {
-				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has(:state(dragging))::before {
+				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has([data-sonic-dragging])::before {
 					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 				}
 

package/dist/styles/material/readout.css

@@ -4,6 +4,12 @@
 	initial-value: 24px;
 }
 
+@property --_sonic-readout-shine-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.material {
 	:is(.sonic-dial, .sonic-envelope, .sonic-slider, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
 		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
@@ -26,8 +32,10 @@
 		--_sonic-glass-own: var(--sonic-readout-glass);
 		--_sonic-glass-edge-colour-own: var(--sonic-readout-edge);
 		--_sonic-glass-edge-width-own: var(--sonic-readout-edge-width);
+		--_sonic-readout-shine-width: max(1px, round(var(--_sonic-unit), var(--_sonic-snap)));
 
 		box-sizing: border-box;
+		display: none;
 		place-items: center;
 		min-inline-size: calc(1.75 * var(--_sonic-readout-size));
 		block-size: var(--_sonic-readout-size);
@@ -45,7 +53,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 +63,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))),
-			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-shade) calc(55% * var(--_sonic-readout-depth)), transparent),
+			inset 0 0 0 var(--_sonic-readout-shine-width)
+				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:
@@ -100,7 +109,7 @@
 				}
 		}
 
-		:state(editing) > :is(.sonic-dial,.sonic-slider,.sonic-waveform,.sonic-wavestrip) > :is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout) {
+		[data-sonic-editing]:is(.sonic-dial,.sonic-slider,.sonic-waveform,.sonic-wavestrip) > :is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout) {
 			pointer-events: auto;
 			cursor: text;
 		}

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 {
+	[data-sonic-dragging] > .sonic-xy-reticle,
+	[data-sonic-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';