@xsynaptic/sonic-ui 0.18.0 → 0.20.0

package/dist/styles/envelope.css

@@ -24,7 +24,6 @@
 	}
 
 	.sonic-envelope {
-		--_sonic-envelope-radius-ratio: var(--sonic-envelope-radius-ratio, 0.08);
 		--_sonic-envelope-inset-ratio: var(--sonic-envelope-inset-ratio, 0.1);
 		--_sonic-envelope-handle-ratio: var(--sonic-envelope-handle-ratio, 0.14);
 		--_sonic-envelope-handle-stroke-ratio: var(--sonic-envelope-handle-stroke-ratio, 0.025);
@@ -32,12 +31,16 @@
 		--_sonic-envelope-curve-ratio: var(--sonic-envelope-curve-ratio, 0.08);
 		--_sonic-unit: calc(var(--_sonic-envelope-size) / 64);
 		--_sonic-envelope-inset: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-inset-ratio));
-		--_sonic-glass-radius: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-radius-ratio));
 
+		/* fallow-ignore-next-line code-duplication -- a plain box restated, since sheets never import each other */
+		position: relative;
+		display: grid;
+		flex-shrink: 0;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
 		inline-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-aspect-ratio));
 		block-size: var(--_sonic-envelope-size);
 		container-type: size;
-		border-radius: var(--_sonic-glass-radius);
+		user-select: none;
 		isolation: isolate;
 	}
 
@@ -62,7 +65,6 @@
 		inset: 0;
 		overflow: clip;
 		pointer-events: none;
-		border-radius: inherit;
 
 		&[data-sonic-part='curve'] {
 			--_sonic-point-size: calc(
@@ -124,9 +126,9 @@
 				var(--_sonic-point-halo),
 			var(--_sonic-focus-shadow, 0 0 transparent);
 		transition:
-			background-color 120ms ease-out,
-			border-color 120ms ease-out,
-			box-shadow 120ms ease-out;
+			background-color var(--_sonic-fade-duration) ease-out,
+			border-color var(--_sonic-fade-duration) ease-out,
+			box-shadow var(--_sonic-fade-duration) ease-out;
 	}
 
 	.sonic-envelope-handle {
@@ -155,7 +157,7 @@
 
 	:is(.sonic-envelope-curve, .sonic-envelope-handle)[data-sonic-disabled] {
 		--_sonic-point-ring: var(--_sonic-unlit);
-		--_sonic-point-core: var(--_sonic-glass);
+		--_sonic-point-core: var(--_sonic-point-ring);
 
 		cursor: default;
 	}
@@ -169,7 +171,7 @@
 
 	:is(.sonic-envelope-curve, .sonic-envelope-handle):not([data-sonic-disabled]):active {
 		--_sonic-point-ring: var(--_sonic-lit);
-		--_sonic-point-core: var(--_sonic-glass);
+		--_sonic-point-core: var(--_sonic-point-ring);
 		--_sonic-point-halo: color-mix(
 			in oklab,
 			var(--_sonic-lit) calc(50% * var(--_sonic-relief)),
@@ -181,7 +183,6 @@
 		.sonic-envelope {
 			--_sonic-lit: Highlight;
 			--_sonic-unlit: GrayText;
-			--_sonic-glass: Canvas;
 		}
 
 		.sonic-envelope-graph {
@@ -199,6 +200,12 @@
 			--_sonic-point-core: Canvas;
 		}
 
+		/* Spelt as the rules above are, to outrank them */
+		:is(.sonic-envelope-curve, .sonic-envelope-handle)[data-sonic-disabled],
+		:is(.sonic-envelope-curve, .sonic-envelope-handle):not([data-sonic-disabled]):active {
+			--_sonic-point-core: Canvas;
+		}
+
 		.sonic-envelope-fill {
 			fill: none;
 		}

package/dist/styles/led.css

@@ -117,7 +117,11 @@
 		&::after {
 			background: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)), #fff),
+				color-mix(
+					in oklab,
+					var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)),
+					var(--_sonic-shine)
+				),
 				var(--_sonic-lit)
 			);
 		}

package/dist/styles/material/arc.css

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

package/dist/styles/material/bracket.css

@@ -7,7 +7,7 @@
 		pointer-events: none;
 		content: '';
 		border: max(1px, 0.06 * var(--_sonic-bracket-size)) solid
-			color-mix(in oklab, var(--_sonic-glass-text) 45%, transparent);
+			color-mix(in oklab, currentcolor 45%, transparent);
 		border-radius: 50%;
 		opacity: 0;
 		mask: conic-gradient(
@@ -19,8 +19,8 @@
 		);
 		scale: 0.6;
 		transition:
-			opacity 120ms ease-out,
-			scale 120ms ease-out;
+			opacity var(--_sonic-fade-duration) ease-out,
+			scale var(--_sonic-fade-duration) ease-out;
 	}
 
 	:state(dragging) > * > .sonic-xy-bracket,

package/dist/styles/material/cap.css

@@ -23,45 +23,70 @@
 		--_sonic-lit-disabled: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit));
 		--_sonic-skirt: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 30% * var(--_sonic-relief)), #fff),
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 30% * var(--_sonic-relief)),
+				var(--_sonic-shine)
+			),
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 		--_sonic-face: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 15% * var(--_sonic-relief)), #000),
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 10% * var(--_sonic-relief)), #fff)
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 15% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			),
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 10% * var(--_sonic-relief)),
+				var(--_sonic-shine)
+			)
 		);
 		--_sonic-sheen: linear-gradient(
 			105deg,
 			transparent 20%,
-			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))) 45%,
+			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))) 45%,
 			transparent 55%,
-			rgb(0 0 0 / calc(0.06 * var(--_sonic-relief))) 80%
+			rgb(from var(--_sonic-shade) r g b / calc(0.06 * var(--_sonic-relief))) 80%
 		);
 		--_sonic-press-transition:
-			scale 60ms cubic-bezier(0.4, 0, 0.2, 1), translate 60ms cubic-bezier(0.4, 0, 0.2, 1),
-			box-shadow 60ms cubic-bezier(0.4, 0, 0.2, 1);
+			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
+			translate var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
+			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(0 0 0 / calc(0.35 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) var(--_sonic-unit)
-				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief)));
 		--_sonic-rim-width: max(1px, round(0.75 * var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-rim: 0 0 0 var(--_sonic-rim-width)
 			var(
 				--sonic-cap-edge,
-				color-mix(in oklab, var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)), #000)
+				color-mix(
+					in oklab,
+					var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)),
+					var(--_sonic-shade)
+				)
 			);
-		--_sonic-drop-shade: rgb(0 0 0 / calc(0.65 * var(--_sonic-relief)));
+		--_sonic-drop-shade: rgb(from var(--_sonic-shade) r g b / calc(0.65 * var(--_sonic-relief)));
 		--_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);
 	}
 
-	:is(.sonic-number, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+	.sonic-number {
 		--_sonic-ink: var(--_sonic-glass-text);
 	}
 
+	:is(.sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+		--_sonic-ink: currentcolor;
+	}
+
 	:is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
 		--_sonic-lit-off: var(
 			--sonic-dimmed,

package/dist/styles/material/core.css

@@ -32,6 +32,10 @@
 	) {
 		--_sonic-unlit: var(--sonic-unlit, oklch(27.4% 0.005 286deg));
 		--_sonic-relief: var(--sonic-relief, 0);
+		--_sonic-shade: var(--sonic-shade, #000);
+		--_sonic-shine: var(--sonic-shine, #fff);
+		--_sonic-press-duration: var(--sonic-press-duration, 60ms);
+		--_sonic-fade-duration: var(--sonic-fade-duration, 120ms);
 		--_sonic-light-tilt: var(--sonic-light-tilt, 17deg);
 		--_sonic-light-fall: calc(180deg - var(--_sonic-light-tilt));
 		--_sonic-cast-x: calc(sin(var(--_sonic-light-tilt)) * var(--_sonic-unit));

package/dist/styles/material/glass.css

@@ -1,17 +1,12 @@
 @layer sonic.material {
 	:is(
 		.sonic-dial-readout,
-		.sonic-envelope,
 		.sonic-envelope-readout,
 		.sonic-number,
 		.sonic-screen,
 		.sonic-slider-readout,
-		.sonic-spectrum,
-		.sonic-waveform,
 		.sonic-waveform-readout,
-		.sonic-wavestrip,
 		.sonic-wavestrip-readout,
-		.sonic-xy,
 		.sonic-xy-readout
 	) {
 		--_sonic-glass-slab: color-mix(in oklab, var(--_sonic-unlit) 45%, #000);
@@ -29,7 +24,7 @@
 				color-mix(
 					in oklab,
 					var(--_sonic-glass) calc(100% - 12% * var(--_sonic-glass-depth, var(--_sonic-relief))),
-					#fff
+					var(--_sonic-shine)
 				),
 				var(--_sonic-glass)
 			)

package/dist/styles/material/groove.css

@@ -2,9 +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(0 0 0 / calc(0.55 * var(--_sonic-relief))),
-			inset 0 0 calc(0.5 * var(--_sonic-unit)) rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 calc(0.5 * var(--_sonic-unit))
+				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0
-				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
 	}
 }

package/dist/styles/material/keycap.css

@@ -18,11 +18,12 @@
 		);
 		--_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(0 0 0 / calc(0.3 * var(--_sonic-relief)))
+					calc(0.4 * var(--_sonic-unit))
+					rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief)))
 			)
 			drop-shadow(
 				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0
-					rgb(255 255 255 / calc(0.07 * var(--_sonic-relief)))
+					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief)))
 			);
 	}
 

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(255 255 255 / calc(0.1 * var(--_sonic-relief))),
+			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))),
 			transparent 60%
 		);
 		--_sonic-lens-glass: var(--sonic-lens, color-mix(in oklab, var(--_sonic-unlit) 60%, #000));

package/dist/styles/material/pane.css

@@ -7,15 +7,7 @@
 @layer sonic.material {
 	/* 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-spectrum,
-		.sonic-waveform,
-		.sonic-wavestrip,
-		.sonic-xy
-	) {
+	:is(.sonic-number, .sonic-screen) {
 		--_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));
@@ -44,24 +36,25 @@
 			background:
 				linear-gradient(
 					var(--_sonic-light-fall),
-					rgb(255 255 255 / calc(0.07 * var(--_sonic-glass-depth))),
+					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-glass-depth))),
 					transparent 45%
 				),
 				radial-gradient(
 					farthest-corner,
 					transparent 55%,
-					rgb(0 0 0 / calc(0.4 * var(--_sonic-glass-texture)))
+					rgb(from var(--_sonic-shade) r g b / calc(0.4 * var(--_sonic-glass-texture)))
 				),
 				repeating-linear-gradient(
 					to bottom,
-					rgb(0 0 0 / calc(0.025 * var(--_sonic-glass-texture))) 0
+					rgb(from var(--_sonic-shade) r g b / calc(0.025 * var(--_sonic-glass-texture))) 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(0 0 0 / 45%);
+				inset 0 0 calc(3 * var(--_sonic-glass-depth) * var(--_sonic-unit))
+					rgb(from var(--_sonic-shade) r g b / 45%);
 		}
 
 		@media (forced-colors: none) {
@@ -82,6 +75,7 @@
 
 			@media (prefers-reduced-motion: no-preference) {
 				&:is(:focus-visible, :focus-within)::before,
+				&:has(:state(dragging))::before,
 				:state(dragging) > &::before {
 					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 				}

package/dist/styles/material/readout.css

@@ -46,16 +46,16 @@
 		border-radius: calc(0.25 * var(--_sonic-readout-size));
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
-				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
 			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
-				rgb(255 255 255 / calc(0.08 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.08 * var(--_sonic-relief)));
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
 		transition:
-			opacity 120ms ease-out,
-			translate 120ms ease-out,
-			display 120ms allow-discrete,
-			overlay 120ms allow-discrete;
+			opacity var(--_sonic-fade-duration) ease-out,
+			translate var(--_sonic-fade-duration) ease-out,
+			display var(--_sonic-fade-duration) allow-discrete,
+			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 {

package/dist/styles/material/well.css

@@ -1,24 +1,13 @@
 @layer sonic.material {
-	:is(
-		.sonic-envelope,
-		.sonic-button,
-		.sonic-number,
-		.sonic-screen,
-		.sonic-segmented,
-		.sonic-spectrum,
-		.sonic-toggle,
-		.sonic-waveform,
-		.sonic-wavestrip,
-		.sonic-xy
-	) {
+	:is(.sonic-button, .sonic-number, .sonic-screen, .sonic-segmented, .sonic-toggle) {
 		--_sonic-well-depth: var(--_sonic-glass-depth, 1);
 		--_sonic-well:
 			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(0 0 0 / calc(0.6 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.6 * var(--_sonic-relief))),
 			calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-x))
 				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0
-				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
 	}
 }

package/dist/styles/meter.css

@@ -263,18 +263,13 @@
 		position: absolute;
 		inset: 0;
 		content: '';
-		background: linear-gradient(
-				var(--_sonic-light-fall),
-				rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))),
-				transparent 60%
-			)
-			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
+		background: var(--_sonic-lens-glint) 0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
 	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
-				rgb(255 255 255 / calc(0.45 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shine) r g b / calc(0.45 * var(--_sonic-relief))),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;

package/dist/styles/number.css

@@ -31,6 +31,7 @@
 
 	.sonic-number {
 		--_sonic-number-radius-ratio: var(--sonic-number-radius-ratio, 0.15);
+		--_sonic-number-radius-own: calc(var(--_sonic-number-size) * var(--sonic-number-radius-ratio));
 		--_sonic-number-inset-ratio: var(--sonic-number-inset-ratio, 0.2);
 		--_sonic-number-text-ratio: var(--sonic-number-text-ratio, 0.45);
 		--_sonic-number-travel: var(--sonic-number-travel, 160px);
@@ -44,7 +45,10 @@
 		line-height: 1;
 		touch-action: pan-x;
 		cursor: ns-resize;
-		border-radius: calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio));
+		border-radius: var(
+			--_sonic-number-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio)))
+		);
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 

package/dist/styles/panel.css

@@ -29,13 +29,14 @@
 		box-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(255 255 255 / calc(0.07 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief))),
 			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(0 0 0 / calc(0.35 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
 			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(0 0 0 / calc(0.45 * var(--_sonic-relief)));
+				calc(3 * max(0px, var(--_sonic-panel-depth)))
+				rgb(from var(--_sonic-shade) r g b / calc(0.45 * var(--_sonic-relief)));
 	}
 
 	.sonic-panel-title {

package/dist/styles/ring.css

@@ -70,7 +70,7 @@
 	}
 
 	.sonic-ring > * > .sonic-button {
-		--_sonic-button-radius-ratio: 0.5;
+		--_sonic-button-radius-own: calc(var(--_sonic-button-size) / 2);
 		--_sonic-button-face-radius-ratio: 0.5;
 
 		inline-size: var(--_sonic-button-size);

package/dist/styles/screen.css

@@ -9,14 +9,16 @@
 @layer sonic.control {
 	.sonic-screen {
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
-		--_sonic-screen-aspect-ratio: var(--sonic-screen-aspect-ratio, 3);
 		--_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-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
 		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
 
-		inline-size: calc(var(--_sonic-screen-size) * var(--_sonic-screen-aspect-ratio));
-		block-size: var(--_sonic-screen-size);
+		min-block-size: var(--_sonic-screen-size);
 		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
-		border-radius: calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio));
+		border-radius: var(
+			--_sonic-screen-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
+		);
 	}
 }

package/dist/styles/segmented.css

@@ -38,11 +38,18 @@
 			var(--_sonic-segmented-press-scale)
 		);
 		--_sonic-segmented-font-ratio: var(--sonic-segmented-font-ratio, 0.34);
+		--_sonic-segmented-font-own: calc(
+			var(--_sonic-segmented-size) * var(--sonic-segmented-font-ratio)
+		);
 		--_sonic-segmented-padding-ratio: var(--sonic-segmented-padding-ratio, 0.25);
 		--_sonic-segmented-icon-ratio: var(--sonic-segmented-icon-ratio, 0.5);
 		--_sonic-unit: calc(var(--_sonic-segmented-size) / 32);
-		--_sonic-segmented-corner: calc(
-			var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)
+		--_sonic-segmented-radius-own: calc(
+			var(--_sonic-segmented-size) * var(--sonic-segmented-radius-ratio)
+		);
+		--_sonic-segmented-corner: var(
+			--_sonic-segmented-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)))
 		);
 		--_sonic-keycap-depth: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio));
 		--_sonic-segmented-gap: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-gap-ratio));
@@ -75,14 +82,20 @@
 		min-inline-size: calc(var(--_sonic-segmented-size) - 2 * var(--_sonic-segmented-gap));
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-font-ratio));
+		font-size: var(
+			--_sonic-segmented-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-font-ratio))
+			)
+		);
 		line-height: 1;
 		color: var(--_sonic-ink);
 		cursor: pointer;
 		background: transparent;
 		border: 0;
 		border-radius: var(--_sonic-segmented-inner-corner);
-		transition: color 120ms ease-out;
+		transition: color var(--_sonic-fade-duration) ease-out;
 	}
 
 	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled),

package/dist/styles/slider.css

@@ -92,7 +92,7 @@
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
 		user-select: none;
-		transition: --_sonic-slider-groove-ratio 120ms ease-out;
+		transition: --_sonic-slider-groove-ratio var(--_sonic-fade-duration) ease-out;
 
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
@@ -424,7 +424,13 @@
 			var(--_sonic-slider-breadth) * var(--_sonic-slider-indicator-ratio)
 		);
 		--_sonic-slider-bevel: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-bevel-ratio));
-		--_sonic-slider-corner: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-radius-ratio));
+		--_sonic-slider-radius-own: calc(
+			var(--_sonic-slider-breadth) * var(--sonic-slider-radius-ratio)
+		);
+		--_sonic-slider-corner: var(
+			--_sonic-slider-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-radius-ratio)))
+		);
 		--_sonic-slider-indicator-inset: calc(
 			var(--_sonic-slider-bevel) + var(--_sonic-slider-breadth) * 0.1
 		);
@@ -460,7 +466,7 @@
 			background: var(--_sonic-slider-indicator);
 			border-radius: calc(var(--_sonic-slider-indicator-width) / 2);
 			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
-				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
 		}
 	}
 

package/dist/styles/spectrum.css

@@ -71,22 +71,21 @@
 		--_sonic-spectrum-lit: var(--_sonic-lit);
 		--_sonic-spectrum-hot: var(--_sonic-lit-warning);
 		--_sonic-spectrum-clip: var(--_sonic-lit-danger);
-		--_sonic-spectrum-grid: color-mix(in oklab, var(--_sonic-glass-text) 20%, transparent);
+		--_sonic-spectrum-grid: color-mix(in oklab, currentcolor 20%, transparent);
 		--_sonic-spectrum-hot-from: var(--sonic-spectrum-hot-from, -12);
 		--_sonic-spectrum-clip-from: var(--sonic-spectrum-clip-from, -3);
 
+		/* fallow-ignore-next-line code-duplication -- a plain box restated, since sheets never import each other */
+		position: relative;
+		display: grid;
+		flex-shrink: 0;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
 		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);
+		user-select: none;
 	}
 
 	[fill] > .sonic-spectrum,
@@ -100,7 +99,7 @@
 		block-size: 100%;
 	}
 
-	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */
+	/* Opaque, since a system highlight carries alpha that would blend the bars into what is behind them */
 	@media (forced-colors: active) {
 		.sonic-spectrum {
 			--_sonic-spectrum-lit: rgb(from CanvasText r g b / 100%);