@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/styles/dial.css

@@ -37,20 +37,14 @@
 	.sonic-dial {
 		--_sonic-dial-ring-ratio: var(--sonic-dial-ring-ratio, 0.075);
 		--_sonic-dial-gap-ratio: var(--sonic-dial-gap-ratio, 0.05);
-		--_sonic-dial-pointer-ratio: var(--sonic-dial-pointer-ratio, 0.06);
-
-		/* 0 for a straight bar */
-		--_sonic-dial-pointer-taper: var(--sonic-dial-pointer-taper, 0.5);
-
-		/* A fraction of the knob's angle */
+		--_sonic-dial-indicator-ratio: var(--sonic-dial-indicator-ratio, 0.06);
+		--_sonic-dial-indicator-taper: var(--sonic-dial-indicator-taper, 0.5);
 		--_sonic-dial-face-drift: var(--sonic-dial-face-drift, 0.1);
 		--_sonic-dial-notch-ratio: var(--sonic-dial-notch-ratio, 0.1);
 		--_sonic-dial-scale-ratio: var(--sonic-dial-scale-ratio, 0.2);
 		--_sonic-dial-scale-font-ratio: var(--sonic-dial-scale-font-ratio, 0.175);
-
-		/* Centred on six o'clock */
 		--_sonic-dial-sweep: var(--sonic-dial-sweep, 300deg);
-		--_sonic-dial-segment: var(--sonic-dial-segment, 30deg);
+		--_sonic-dial-dot: var(--sonic-dial-dot, 30deg);
 		--_sonic-dial-ridge-pitch: var(--sonic-dial-ridge-pitch, 4px);
 		--_sonic-dial-travel: var(--sonic-dial-travel, 160px);
 		--_sonic-unit: calc(var(--_sonic-dial-size) / 40);
@@ -85,7 +79,7 @@
 		flex-shrink: 0;
 		inline-size: var(--_sonic-dial-size);
 		block-size: var(--_sonic-dial-size);
-		touch-action: none;
+		touch-action: pan-x;
 		cursor: ns-resize;
 		user-select: none;
 		border-radius: 50%;
@@ -122,7 +116,8 @@
 	.sonic-dial-notches {
 		--_sonic-dial-notch-width: atan2(var(--_sonic-unit), var(--_sonic-dial-size) / 2);
 		--_sonic-dial-notch-pitch: calc(
-			var(--_sonic-dial-sweep) / (var(--_sonic-dial-positions, 2) - var(--_sonic-dial-notch-ends))
+			var(--_sonic-dial-sweep) /
+				(var(--_sonic-dial-position-count, 2) - var(--_sonic-dial-notch-ends))
 		);
 
 		position: absolute;
@@ -150,8 +145,8 @@
 
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
+		line-height: 1cap;
 
-		/* The near edge hugs the band's inner edge, and each mark grows outward along its angle */
 		& > * {
 			--_sonic-dial-scale-angle: calc(
 				var(--_sonic-dial-start) + var(--_sonic-scale-at, 0) * var(--_sonic-dial-sweep)
@@ -164,8 +159,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%)
-				calc(-50% - var(--_sonic-dial-scale-cos) * 50%);
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.15cap))
+				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
 		}
 
 		& > .sonic-scale-tick {
@@ -180,35 +175,25 @@
 	}
 
 	:is(.sonic-dial-ring, .sonic-dial-modulation) {
+		--_sonic-arc-width: var(--_sonic-dial-ring-width);
+
 		position: absolute;
 		inset: calc(var(--_sonic-dial-scale-band) + var(--_sonic-dial-notch-band));
 		border-radius: 50%;
-		mask: radial-gradient(
-			closest-side,
-			transparent calc(100% - var(--_sonic-dial-ring-width) - 0.5px),
-			#000 calc(100% - var(--_sonic-dial-ring-width)),
-			#000 calc(100% - var(--_sonic-dial-band-inset) - 0.5px),
-			transparent calc(100% - var(--_sonic-dial-band-inset))
-		);
+		mask: var(--_sonic-arc-mask);
 	}
 
 	.sonic-dial-ring {
-		--_sonic-dial-band-inset: 0px;
+		--_sonic-arc-inset: 0px;
 		--_sonic-dial-lit-from: calc(
 			min(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
 		);
 		--_sonic-dial-lit-to: calc(
 			max(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
 		);
-		--_sonic-dial-ring-shade: radial-gradient(
-			closest-side,
-			rgb(0 0 0 / 55%) calc(100% - var(--_sonic-dial-ring-width)),
-			transparent calc(100% - var(--_sonic-dial-ring-width) * 0.4),
-			rgb(0 0 0 / 25%) 100%
-		);
 
 		background:
-			var(--_sonic-dial-ring-shade),
+			var(--_sonic-arc-shade),
 			conic-gradient(
 				from var(--_sonic-dial-start),
 				var(--_sonic-unlit) var(--_sonic-dial-lit-from),
@@ -220,11 +205,10 @@
 
 	[endless] > .sonic-dial > .sonic-dial-ring {
 		background:
-			var(--_sonic-dial-ring-shade),
+			var(--_sonic-arc-shade),
 			conic-gradient(
-				from
-					calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle) - var(--_sonic-dial-segment) / 2),
-				var(--_sonic-dial-lit) var(--_sonic-dial-segment),
+				from calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle) - var(--_sonic-dial-dot) / 2),
+				var(--_sonic-dial-lit) var(--_sonic-dial-dot),
 				var(--_sonic-unlit) 0
 			);
 	}
@@ -234,7 +218,7 @@
 			--sonic-modulation,
 			color-mix(in oklab, var(--_sonic-dial-lit) 60%, #000)
 		);
-		--_sonic-dial-band-inset: calc(var(--_sonic-dial-ring-width) * 0.55);
+		--_sonic-arc-inset: calc(var(--_sonic-dial-ring-width) * 0.55);
 
 		background: conic-gradient(
 			from var(--_sonic-dial-start),
@@ -250,6 +234,62 @@
 		display: none;
 	}
 
+	:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+		--_sonic-dial-modulation-value-angle: calc(
+			var(--_sonic-dial-modulation-value, 0) * var(--_sonic-dial-sweep)
+		);
+		--_sonic-dial-modulation-range: color-mix(
+			in oklab,
+			var(--_sonic-dial-modulation) 50%,
+			transparent
+		);
+		--_sonic-dial-modulation-tick: color-mix(
+			in oklab,
+			var(--sonic-modulation, var(--_sonic-dial-lit)) 55%,
+			#fff
+		);
+
+		display: block;
+		background: none;
+		mask: none;
+
+		&::before,
+		&::after {
+			position: absolute;
+			inset: 0;
+			content: '';
+			border-radius: 50%;
+		}
+
+		&::before {
+			background:
+				conic-gradient(
+					from var(--_sonic-dial-start),
+					transparent min(var(--_sonic-dial-angle), var(--_sonic-dial-modulation-value-angle)),
+					var(--_sonic-dial-modulation) 0
+						max(var(--_sonic-dial-angle), var(--_sonic-dial-modulation-value-angle)),
+					transparent 0
+				),
+				conic-gradient(
+					from var(--_sonic-dial-start),
+					transparent calc(var(--_sonic-dial-modulation-from, 0) * var(--_sonic-dial-sweep)),
+					var(--_sonic-dial-modulation-range) 0
+						calc(var(--_sonic-dial-modulation-to, 0) * var(--_sonic-dial-sweep)),
+					transparent 0
+				);
+			mask: var(--_sonic-arc-mask);
+		}
+
+		&::after {
+			background: linear-gradient(
+					var(--_sonic-dial-modulation-tick),
+					var(--_sonic-dial-modulation-tick)
+				)
+				50% 0 / var(--_sonic-unit) var(--_sonic-dial-ring-width) no-repeat;
+			rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-modulation-value-angle));
+		}
+	}
+
 	.sonic-dial-cap {
 		position: absolute;
 		inset: var(--_sonic-dial-cap-inset);
@@ -271,9 +311,10 @@
 		&::before {
 			inset: 0;
 			background: repeating-conic-gradient(
-				rgb(0 0 0 / 30%) 0,
-				rgb(255 255 255 / 12%) calc(var(--_sonic-dial-ridge-angle) / 2),
-				rgb(0 0 0 / 30%) var(--_sonic-dial-ridge-angle)
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) 0,
+				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)))
+					calc(var(--_sonic-dial-ridge-angle) / 2),
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) var(--_sonic-dial-ridge-angle)
 			);
 			rotate: var(--_sonic-dial-angle);
 		}
@@ -286,22 +327,22 @@
 						calc(
 							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
 						),
-					rgb(255 255 255 / 16%),
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief))),
 					transparent 12%,
-					rgb(0 0 0 / 10%) 25%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 25%,
 					transparent 38%,
-					rgb(255 255 255 / 12%) 50%,
+					rgb(255 255 255 / calc(0.12 * var(--_sonic-relief))) 50%,
 					transparent 62%,
-					rgb(0 0 0 / 10%) 75%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 75%,
 					transparent 88%,
-					rgb(255 255 255 / 16%)
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief)))
 				),
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
 		}
 	}
 
-	.sonic-dial-pointer {
+	.sonic-dial-indicator {
 		position: absolute;
 		inset: var(--_sonic-dial-cap-inset);
 		pointer-events: none;
@@ -309,50 +350,63 @@
 		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
 
 		&::before {
-			--_sonic-dial-pointer-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-pointer-ratio));
+			--_sonic-dial-indicator-width: calc(
+				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
+			);
+			--_sonic-dial-indicator-tip: calc(
+				var(--_sonic-dial-indicator-width) * (1 - var(--_sonic-dial-indicator-taper)) / 2
+			);
 
 			position: absolute;
 			inset-block-start: 6%;
 			inset-inline-start: 50%;
-			inline-size: var(--_sonic-dial-pointer-width);
+			inline-size: var(--_sonic-dial-indicator-width);
 			block-size: 34%;
 			content: '';
 			background: var(--_sonic-ink);
-			border-radius: calc(var(--_sonic-dial-pointer-width) / 2);
-			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
-			clip-path: polygon(
-				calc(50% * var(--_sonic-dial-pointer-taper)) 0,
-				calc(100% - 50% * var(--_sonic-dial-pointer-taper)) 0,
-				100% 100%,
-				0 100%
+			border-radius: calc(var(--_sonic-dial-indicator-width) / 2);
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
+			clip-path: shape(
+				from 0 100%,
+				line to calc(50% - var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip),
+				arc to calc(50% + var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip) of
+					var(--_sonic-dial-indicator-tip) cw,
+				line to 100% 100%,
+				close
 			);
 			translate: -50% 0;
 		}
 	}
 
-	:disabled > .sonic-dial > .sonic-dial-pointer::before {
+	:disabled > .sonic-dial > .sonic-dial-indicator::before {
 		background: var(--_sonic-etch);
 	}
 
 	@media (forced-colors: active) {
-		:is(.sonic-dial-notches, .sonic-dial-ring, .sonic-dial-modulation, .sonic-dial-pointer) {
+		:is(.sonic-dial-notches, .sonic-dial-ring, .sonic-dial-modulation, .sonic-dial-indicator) {
 			forced-color-adjust: none;
 		}
 
 		.sonic-dial-ring {
-			--_sonic-dial-ring-shade: none;
+			--_sonic-arc-shade: none;
 		}
 
 		.sonic-dial-modulation {
 			--_sonic-dial-modulation: CanvasText;
 		}
 
+		:state(modulated) > .sonic-dial > .sonic-dial-modulation {
+			--_sonic-dial-modulation-range: GrayText;
+			--_sonic-dial-modulation-tick: CanvasText;
+		}
+
 		.sonic-dial-cap::before,
 		.sonic-dial-cap::after {
 			display: none;
 		}
 
-		.sonic-dial-pointer::before {
+		.sonic-dial-indicator::before {
 			box-shadow: none;
 		}
 	}

package/dist/styles/envelope.css

@@ -0,0 +1,204 @@
+@property --_sonic-envelope-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 80px;
+}
+
+@layer sonic {
+	:is(sonic-envelope, .sonic-envelope) {
+		--_sonic-envelope-size: var(--sonic-envelope-size, 5rem);
+		--_sonic-envelope-aspect-ratio: var(--sonic-envelope-aspect-ratio, 3);
+	}
+
+	:has(> .sonic-envelope):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-envelope:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-aspect-ratio));
+		block-size: var(--_sonic-envelope-size);
+	}
+
+	.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);
+		--_sonic-envelope-line-ratio: var(--sonic-envelope-line-ratio, 0.03);
+		--_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));
+
+		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);
+		isolation: isolate;
+	}
+
+	.sonic-envelope-graph {
+		position: absolute;
+		inset: var(--_sonic-envelope-inset);
+		z-index: 1;
+		inline-size: calc(100% - 2 * var(--_sonic-envelope-inset));
+		block-size: calc(100% - 2 * var(--_sonic-envelope-inset));
+		overflow: visible;
+		pointer-events: none;
+		clip-path: inset(calc(-1 * var(--_sonic-envelope-inset)));
+	}
+
+	.sonic-envelope-fill {
+		fill: color-mix(in oklab, var(--_sonic-lit) 18%, transparent);
+	}
+
+	.sonic-envelope-floor {
+		height: calc(
+			1px * var(--_sonic-envelope-inset-ratio) / (1 - 2 * var(--_sonic-envelope-inset-ratio))
+		);
+	}
+
+	.sonic-envelope-line {
+		fill: none;
+		stroke: var(--_sonic-lit);
+		stroke-width: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-line-ratio));
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		vector-effect: non-scaling-stroke;
+	}
+
+	:is(.sonic-envelope-handle, .sonic-envelope-curve) {
+		--_sonic-point-ring: var(--_sonic-lit);
+		--_sonic-point-core: var(--_sonic-lit);
+		--_sonic-point-lift: color-mix(in oklab, var(--_sonic-lit) 85%, #fff);
+		--_sonic-point-edge: max(1px, var(--_sonic-point-stroke, 0px));
+		--_sonic-point-halo: transparent;
+		--_sonic-point-bracket: transparent;
+		--_sonic-point-bracket-scale: 0.6;
+
+		position: absolute;
+		inset: auto auto
+			calc(
+				var(--_sonic-envelope-inset) + var(--_sonic-envelope-y, 0) *
+					(100cqb - 2 * var(--_sonic-envelope-inset)) - var(--_sonic-point-size) / 2
+			)
+			calc(
+				var(--_sonic-envelope-inset) + var(--_sonic-envelope-x, 0) *
+					(100cqi - 2 * var(--_sonic-envelope-inset)) - var(--_sonic-point-size) / 2
+			);
+		z-index: 1;
+		box-sizing: border-box;
+		inline-size: var(--_sonic-point-size);
+		block-size: var(--_sonic-point-size);
+		touch-action: none;
+		background: var(--_sonic-point-core);
+		border: var(--_sonic-point-edge) solid var(--_sonic-point-ring);
+		border-radius: 50%;
+		box-shadow:
+			0 0 calc(0.5 * var(--_sonic-point-size)) calc(0.05 * var(--_sonic-point-size))
+				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;
+
+		&::after {
+			position: absolute;
+			inset: calc(-0.4 * var(--_sonic-point-size) - 2 * var(--_sonic-point-edge));
+			pointer-events: none;
+			content: '';
+			border: var(--_sonic-point-edge) solid var(--_sonic-point-bracket);
+			border-block-start-color: transparent;
+			border-radius: 50%;
+			rotate: 45deg;
+			scale: var(--_sonic-point-bracket-scale);
+			transition:
+				border-color 120ms ease-out,
+				scale 120ms ease-out;
+		}
+	}
+
+	.sonic-envelope-handle {
+		--_sonic-point-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-ratio));
+		--_sonic-point-stroke: calc(
+			var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-stroke-ratio)
+		);
+
+		cursor: grab;
+	}
+
+	.sonic-envelope-curve {
+		--_sonic-point-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio));
+		--_sonic-point-core: var(--_sonic-point-ring);
+
+		cursor: ns-resize;
+	}
+
+	.sonic-envelope-handle[data-sonic-axes='x'] {
+		cursor: ew-resize;
+	}
+
+	.sonic-envelope-handle[data-sonic-axes='y'] {
+		cursor: ns-resize;
+	}
+
+	:is(.sonic-envelope-curve, .sonic-envelope-handle)[data-sonic-disabled] {
+		--_sonic-point-ring: var(--_sonic-unlit);
+		--_sonic-point-core: var(--_sonic-glass);
+
+		cursor: default;
+	}
+
+	@media (hover: hover) {
+		:is(.sonic-envelope-curve, .sonic-envelope-handle):not([data-sonic-disabled]):hover {
+			--_sonic-point-ring: var(--_sonic-point-lift);
+			--_sonic-point-core: var(--_sonic-point-lift);
+		}
+	}
+
+	: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-halo: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(50% * var(--_sonic-relief)),
+			transparent
+		);
+		--_sonic-point-bracket: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(100% * (1 - var(--_sonic-relief))),
+			transparent
+		);
+		--_sonic-point-bracket-scale: 1;
+	}
+
+	@media (forced-colors: active) {
+		.sonic-envelope {
+			--_sonic-lit: Highlight;
+			--_sonic-unlit: GrayText;
+			--_sonic-glass: Canvas;
+		}
+
+		.sonic-envelope-graph {
+			forced-color-adjust: none;
+		}
+
+		:is(.sonic-envelope-curve, .sonic-envelope-handle) {
+			--_sonic-point-ring: CanvasText;
+			--_sonic-point-lift: Highlight;
+
+			forced-color-adjust: none;
+		}
+
+		.sonic-envelope-handle {
+			--_sonic-point-core: Canvas;
+		}
+
+		.sonic-envelope-fill {
+			fill: none;
+		}
+	}
+}

package/dist/styles/led.css

@@ -10,7 +10,7 @@
 		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, 0.625);
 		--_sonic-lit-alt: var(--sonic-lit-alt, oklch(79% 0.2 150deg));
 		--_sonic-unit: calc(var(--_sonic-led-size) / 8);
-		--_sonic-led-bezel: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
+		--_sonic-led-bezel: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
 
 		position: relative;
 		display: inline-block;
@@ -30,6 +30,8 @@
 
 		@media (forced-colors: active) {
 			--_sonic-lit-alt: Mark;
+			--_sonic-hot: Highlight;
+			--_sonic-clip: Mark;
 
 			forced-color-adjust: none;
 			background: none;
@@ -45,19 +47,47 @@
 		--_sonic-lit: var(--_sonic-lit-alt);
 	}
 
+	.sonic-led[data-sonic-lit='hot'] {
+		--_sonic-lit: var(--_sonic-hot);
+	}
+
+	.sonic-led[data-sonic-lit='clip'] {
+		--_sonic-lit: var(--_sonic-clip);
+	}
+
+	/* Before the lit rule, which a latched button's LED also matches */
 	.sonic-led:is(
-		[data-sonic-lit],
+		[data-sonic-lit='dim'],
+		: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 {
+				background: GrayText;
+				box-shadow: 0 0 0 1px var(--_sonic-lit);
+			}
+		}
+	}
+
+	.sonic-led:is(
+		[data-sonic-lit]:where(:not([data-sonic-lit='dim'])),
 		:where(
-				.sonic-key[aria-pressed='true'],
-				[momentary]:state(pressed) > .sonic-key,
-				.sonic-segmented-segment[aria-checked='true']
+				.sonic-button[aria-pressed='true'],
+				[momentary]:state(pressed) > .sonic-button,
+				.sonic-segmented-option[aria-checked='true']
 			)
-			*
+			*,
+		:where(:state(at-origin):not(:disabled) > .sonic-led)
 	) {
 		background:
 			radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) 60%, transparent)
+				color-mix(in oklab, var(--_sonic-lit) calc(60% * var(--_sonic-relief)), transparent)
 					calc(var(--_sonic-led-lens-ratio) * 100%),
 				transparent
 			),
@@ -66,7 +96,7 @@
 		&::after {
 			background: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) 55%, #fff),
+				color-mix(in oklab, var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)), #fff),
 				var(--_sonic-lit)
 			);
 		}
@@ -76,6 +106,7 @@
 
 			&::after {
 				background: var(--_sonic-lit);
+				box-shadow: 0 0 0 1px CanvasText;
 			}
 		}
 	}