@xsynaptic/sonic-ui 0.24.0 → 0.25.1

package/dist/styles/led.css

@@ -19,8 +19,9 @@
 		block-size: var(--_sonic-led-size);
 		background: var(--_sonic-lens-bezel);
 		border-radius: 50%;
+	}
 
-		&::after {
+		.sonic-led::after {
 			position: absolute;
 			inset: calc(var(--_sonic-led-size) * (1 - var(--_sonic-led-lens-ratio)) / 2);
 			content: '';
@@ -29,19 +30,20 @@
 		}
 
 		@media (forced-colors: active) {
+	.sonic-led {
 			--_sonic-lit-ok: Mark;
 			--_sonic-lit-warning: Highlight;
 			--_sonic-lit-danger: Mark;
 
 			forced-color-adjust: none;
 			background: none;
+	}
 
-			&::after {
+			.sonic-led::after {
 				background: GrayText;
 				box-shadow: 0 0 0 1px CanvasText;
 			}
 		}
-	}
 
 	.sonic-led[data-sonic-lit='ok'] {
 		--_sonic-lit: var(--_sonic-lit-ok);
@@ -56,23 +58,18 @@
 	}
 
 	/* Before the lit rule, which a latched button's LED also matches */
-	.sonic-led:is(
-		[data-sonic-lit='idle'],
-		:where(:is([armed], [busy]) > .sonic-button:not(:disabled, [aria-disabled='true'])) *
-	) {
-		&::after {
+		.sonic-led:is([data-sonic-lit='idle'],:where(:is([armed],[busy]) > .sonic-button:not(:disabled,[aria-disabled='true'])) *)::after {
 			background:
 				var(--_sonic-lens-glint),
 				color-mix(in oklab, var(--_sonic-lit) 35%, var(--_sonic-lens-glass));
 		}
 
 		@media (forced-colors: active) {
-			&::after {
+			.sonic-led:is([data-sonic-lit='idle'],:where(:is([armed],[busy]) > .sonic-button:not(:disabled,[aria-disabled='true'])) *)::after {
 				background: GrayText;
 				box-shadow: 0 0 0 1px var(--_sonic-lit);
 			}
 		}
-	}
 
 	.sonic-led:is(
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
@@ -96,8 +93,10 @@
 				transparent
 			),
 			var(--_sonic-lens-bezel);
+	}
 
-		&::after {
+		.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 {
 			background: radial-gradient(
 				closest-side,
 				color-mix(
@@ -110,14 +109,30 @@
 		}
 
 		@media (forced-colors: active) {
+
+	.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)
+	) {
 			background: none;
+	}
 
-			&::after {
+			.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 {
 				background: var(--_sonic-lit);
 				box-shadow: 0 0 0 1px CanvasText;
 			}
 		}
-	}
 
 	:is(.sonic-button:is(:disabled, [aria-disabled='true']), .sonic-segmented-option:disabled)
 		.sonic-led {

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);
 	}
 
@@ -97,13 +107,13 @@
 
 	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position, .sonic-toggle-position) {
 		--_sonic-target-outset: min(0px, calc((100% - var(--sonic-target-size, 100%)) / 2));
+	}
 
-		&::after {
+		:is(.sonic-button,.sonic-segmented-option,.sonic-switch-position,.sonic-toggle-position)::after {
 			position: absolute;
 			inset: var(--_sonic-target-outset);
 			content: '';
 		}
-	}
 
 	@media not (forced-colors: active) {
 		:is(
@@ -141,23 +151,23 @@
 		.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);
+	}
 
-		&: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);
 		}
-	}
 
 	:is(
 			.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,14 +236,14 @@
 			.sonic-segmented-option,
 			.sonic-slider,
 			.sonic-waveform,
-			.sonic-wavestrip
+			.sonic-wavestrip-canvas
 		):focus-visible {
 			outline-offset: 2px;
+		}
 
-			&[data-sonic-pointer-focus] {
+			[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;
 			}
-		}
 
 		:is(
 			.sonic-dial-cap,

package/dist/styles/material/core.css

@@ -49,15 +49,67 @@
 		--_sonic-cast-x: calc(sin(var(--_sonic-light-tilt)) * var(--_sonic-unit));
 		--_sonic-cast-y: calc(cos(var(--_sonic-light-tilt)) * var(--_sonic-unit));
 		--_sonic-snap: 1px;
+	}
 
 		@media (resolution >= 2dppx) {
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-button,
+		.sonic-led,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-panel,
+		.sonic-ring,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
 			--_sonic-snap: 0.5px;
+	}
 		}
 
 		@media (resolution >= 3dppx) {
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-button,
+		.sonic-led,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-panel,
+		.sonic-ring,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
 			--_sonic-snap: calc(1px / 3);
-		}
 	}
+		}
 
 	:is(
 		.sonic-dial,

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));
@@ -49,8 +49,18 @@
 		);
 
 		/* Glass is forced to Canvas like the page, so only a border shows its edge */
+	}
 		@media (forced-colors: active) {
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-screen,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
 			--_sonic-glass-edge: 1px solid CanvasText;
-		}
 	}
+		}
 }

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)
 			);
 	}
 
@@ -77,8 +77,9 @@
 		scale: var(--_sonic-keycap-scale);
 		translate: 0 var(--_sonic-keycap-shift);
 		transition: var(--_sonic-press-transition);
+	}
 
-		&::before {
+		:is(.sonic-button-cap,.sonic-segmented-cap,.sonic-toggle-cap)::before {
 			position: absolute;
 			inset: var(--_sonic-keycap-bevel);
 			content: '';
@@ -89,8 +90,7 @@
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		& > * {
+		:is(.sonic-button-cap,.sonic-segmented-cap,.sonic-toggle-cap) > * {
 			position: relative;
 		}
-	}
 }

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

@@ -21,12 +21,16 @@
 		color: var(--_sonic-glass-text);
 		background: var(--_sonic-glass-fill);
 		border: var(--_sonic-glass-edge);
+	}
 
 		@media (forced-colors: active) {
+
+	.sonic-screen {
 			--_sonic-glass-texture: 0;
+	}
 		}
 
-		&::after {
+		.sonic-screen::after {
 			position: absolute;
 			inset: 0;
 			pointer-events: none;
@@ -34,30 +38,38 @@
 			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) {
 			/* No var() beside the tile, which would parse the url() again on every style recalculation */
-			&::before {
+			.sonic-screen::before {
 				position: absolute;
 				inset: 0;
 				color: color-mix(in oklab, var(--_sonic-glass-text) 7.5%, transparent);
@@ -72,17 +84,15 @@
 			}
 
 			@media (prefers-reduced-motion: no-preference) {
-				&:is(:focus-visible, :focus-within)::before,
-				&:has(:state(dragging))::before {
+				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has(:state(dragging))::before {
 					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 				}
 
 				@media (hover: hover) {
-					&:hover::before {
+					.sonic-screen:hover::before {
 						animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 					}
 				}
 			}
 		}
-	}
 }

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:
@@ -66,30 +67,42 @@
 			overlay var(--_sonic-fade-duration) allow-discrete;
 
 		/* Grid only while open; engines keep the flip a closed readout took against a filtered ancestor */
-		&:popover-open {
+	}
+		:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 			display: grid;
 			opacity: 1;
 			translate: 0;
+		}
 
 			@starting-style {
+		:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 				opacity: 0;
 				translate: 0 calc(0.15 * var(--_sonic-readout-size));
-			}
 		}
+			}
 
 		@media (prefers-reduced-motion: reduce) {
-			translate: 0;
 
-			&:popover-open {
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
+			translate: 0;
+	}
 				@starting-style {
+
+			:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 					translate: 0;
-				}
 			}
+				}
 		}
 
-		:state(editing) > :is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) > & {
+		: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) {
 			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 {
+	:state(dragging) > * > .sonic-xy-reticle,
+	:state(dragging) > * > .sonic-envelope-reticle::before {
 		opacity: calc(1 - var(--_sonic-relief));
 		scale: 1;
 	}

package/dist/styles/material/scale.css

@@ -5,21 +5,21 @@
 		line-height: 1;
 		white-space: nowrap;
 		pointer-events: none;
+	}
 
-		& > * {
+		:is(.sonic-dial-scale,.sonic-slider-scale) > * {
 			position: absolute;
 		}
 
-		& svg {
+		:is(.sonic-dial-scale,.sonic-slider-scale) svg {
 			display: block;
 			inline-size: 1em;
 			block-size: 1em;
 		}
 
-		& > .sonic-scale-tick {
+		:is(.sonic-dial-scale,.sonic-slider-scale) > .sonic-scale-tick {
 			background: var(--sonic-scale, var(--_sonic-etch));
 		}
-	}
 
 	@media (forced-colors: active) {
 		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {

package/dist/styles/material/value.css

@@ -23,21 +23,30 @@
 		text-align: center;
 		background: transparent;
 		border: 0;
+	}
 
-		&::selection {
+		:is(.sonic-dial-entry,.sonic-number-entry,.sonic-slider-entry,.sonic-waveform-entry,.sonic-wavestrip-entry)::selection {
 			color: var(--sonic-entry-selection, var(--_sonic-lit));
 			background: transparent;
 		}
 
-		&:focus-visible {
+		:is(.sonic-dial-entry,.sonic-number-entry,.sonic-slider-entry,.sonic-waveform-entry,.sonic-wavestrip-entry):focus-visible {
 			outline: 2px solid transparent;
 			outline-offset: -2px;
 		}
 
 		@supports (field-sizing: content) {
+
+	:is(
+		.sonic-dial-entry,
+		.sonic-number-entry,
+		.sonic-slider-entry,
+		.sonic-waveform-entry,
+		.sonic-wavestrip-entry
+	) {
 			inline-size: auto;
 			min-inline-size: 3ch;
 			field-sizing: content;
-		}
 	}
+		}
 }

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';