@xsynaptic/sonic-ui 0.24.0 → 0.25.1

package/dist/styles/switch.css

@@ -60,17 +60,21 @@
 		grid-template: var(--_sonic-switch-size) / var(--_sonic-switch-size);
 		place-items: center;
 		line-height: 1;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		transition: --_sonic-switch-at 90ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	.sonic-switch {
 			transition: none;
+	}
 		}
 
-		& > * {
+		.sonic-switch > * {
 			grid-area: 1 / 1;
 		}
-	}
 
 	[orientation='horizontal'] > .sonic-switch {
 		--_sonic-switch-along-x: 1;
@@ -99,20 +103,20 @@
 		cursor: pointer;
 		background: transparent;
 		border: 0;
+	}
 
-		&:disabled {
+		.sonic-switch-position:disabled {
 			cursor: default;
 		}
 
-		&:focus-visible {
+		.sonic-switch-position:focus-visible {
 			outline: var(--sonic-focus-outline, 2px solid transparent);
 			outline-offset: var(--sonic-focus-outline-offset, -2px);
 		}
 
-		&:has([data-sonic-momentary]) {
+		.sonic-switch-position:has([data-sonic-momentary]) {
 			touch-action: none;
 		}
-	}
 
 	.sonic-switch[data-sonic-position-count] > .sonic-switch-position::after {
 		inset-block: 0;
@@ -128,71 +132,68 @@
 	.sonic-switch-label {
 		padding: calc(var(--_sonic-switch-size) * 0.12);
 		white-space: nowrap;
+	}
 
-		& svg {
+		.sonic-switch-label svg {
 			display: block;
 			inline-size: 1em;
 			block-size: 1em;
 		}
-	}
 
 	.sonic-switch-position:disabled > .sonic-switch-label {
 		color: var(--sonic-ink-disabled, color-mix(in oklab, currentcolor 30%, transparent));
 	}
-
-	.sonic-switch[data-sonic-position-count] {
-		& > :is(.sonic-switch-bushing, .sonic-switch-bat) {
+		.sonic-switch[data-sonic-position-count] > :is(.sonic-switch-bushing,.sonic-switch-bat) {
 			grid-area: 2 / 1 / -2 / 2;
 		}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count] > .sonic-switch-position {
 			grid-template: subgrid / subgrid;
 		}
-	}
 
 	.sonic-switch[data-sonic-position-count='2'] {
 		grid-template:
 			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto /
 			minmax(var(--_sonic-switch-size), auto);
+	}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position {
 			grid-area: 1 / 1 / 3 / 2;
+		}
 
-			&:last-child {
+			:is(.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position):last-child {
 				grid-area: 3 / 1 / 5 / 2;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-row: 2;
 				}
-			}
-		}
-	}
 
 	.sonic-switch[data-sonic-position-count='3'] {
 		grid-template:
 			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto /
 			minmax(var(--_sonic-switch-size), auto) auto;
+	}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position {
 			grid-area: 1 / 1 / 3 / 2;
+		}
 
-			&:last-child {
+			:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):last-child {
 				grid-area: 4 / 1 / 6 / 2;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-row: 2;
 				}
-			}
 
-			&:nth-child(2 of .sonic-switch-position) {
+			:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):nth-child(2 of .sonic-switch-position) {
 				grid-area: 3 / 1 / 4 / 3;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):nth-child(2 of .sonic-switch-position) > .sonic-switch-label {
 					grid-column: 2;
 				}
-			}
-		}
-	}
 
 	[orientation='horizontal']
 		> .sonic-switch[data-sonic-position-count]
@@ -204,45 +205,45 @@
 		grid-template:
 			minmax(var(--_sonic-switch-size), auto) /
 			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto;
+	}
 
-		& > .sonic-switch-position {
+		:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position {
 			grid-area: 1 / 1 / 2 / 3;
+		}
 
-			&:last-child {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position):last-child {
 				grid-area: 1 / 3 / 2 / 5;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-area: 1 / 2;
 				}
-			}
-		}
-	}
 
 	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3'] {
 		grid-template:
 			minmax(var(--_sonic-switch-size), auto) auto /
 			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto;
+	}
 
-		& > .sonic-switch-position {
+		:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position {
 			grid-area: 1 / 1 / 2 / 3;
+		}
 
-			&:last-child {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):last-child {
 				grid-area: 1 / 4 / 2 / 6;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-area: 1 / 2;
 				}
-			}
 
-			&:nth-child(2 of .sonic-switch-position) {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):nth-child(2 of .sonic-switch-position) {
 				grid-area: 1 / 3 / 3 / 4;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):nth-child(2 of .sonic-switch-position) > .sonic-switch-label {
 					grid-area: 2 / 1;
 				}
-			}
-		}
-	}
 
 	.sonic-switch-bushing {
 		--_sonic-switch-bushing-shade: color-mix(
@@ -325,9 +326,9 @@
 				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y)) calc(1.5 * var(--_sonic-unit))
 				var(--_sonic-drop-shade)
 		);
+	}
 
-		&::before,
-		&::after {
+		.sonic-switch-bat::before,.sonic-switch-bat::after {
 			position: absolute;
 			inset: 0;
 			margin: auto;
@@ -338,7 +339,7 @@
 			box-shadow: 0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim);
 		}
 
-		&::before {
+		.sonic-switch-bat::before {
 			--_sonic-switch-shaft-top: calc(
 				var(--_sonic-switch-pivot) + var(--_sonic-switch-along-y) *
 					min(0px, var(--_sonic-switch-throw))
@@ -362,20 +363,19 @@
 				calc(-1 * var(--_sonic-switch-shaft-top));
 		}
 
-		&::after {
+		.sonic-switch-bat::after {
 			inline-size: var(--_sonic-switch-ball);
 			block-size: var(--_sonic-switch-ball);
 			background-position: calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2)
 				calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2);
 			box-shadow:
 				inset 0 0 calc(1.5 * var(--_sonic-unit)) 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),
 				0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim),
 				var(--_sonic-focus-shadow);
 			translate: calc(var(--_sonic-switch-along-x) * var(--_sonic-switch-throw))
 				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-throw));
 		}
-	}
 
 	.sonic-switch:has(> .sonic-switch-position:focus-visible) {
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
@@ -414,13 +414,12 @@
 
 		.sonic-switch-bat {
 			filter: none;
+		}
 
-			&::before,
-			&::after {
+			.sonic-switch-bat::before,.sonic-switch-bat::after {
 				background: var(--_sonic-switch-metal);
 				box-shadow: none;
 			}
-		}
 
 		.sonic-switch-position:focus-visible {
 			outline-offset: 2px;

package/dist/styles/toggle.css

@@ -105,7 +105,8 @@
 		grid-auto-flow: column;
 		line-height: 1;
 		touch-action: pan-y;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		transition:
 			--_sonic-toggle-at 120ms cubic-bezier(0.4, 0, 0.2, 1),
 			--_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
@@ -222,8 +223,9 @@
 		transition:
 			scale 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-led {
+		.sonic-toggle-cap > .sonic-led {
 			--_sonic-led-size: var(
 				--sonic-led-size,
 				calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-led-ratio))
@@ -233,10 +235,9 @@
 			box-shadow: inset 0 0 0 max(1px, 0.1 * var(--_sonic-led-size)) var(--_sonic-toggle-led-ring);
 		}
 
-		& > * {
+		.sonic-toggle-cap > * {
 			color: var(--_sonic-toggle-legend);
 		}
-	}
 
 	.sonic-toggle-position {
 		position: relative;
@@ -313,11 +314,11 @@
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-ride))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-ride) + var(--_sonic-toggle-sink));
 		transition: opacity var(--_sonic-fade-duration) ease-out;
+	}
 
-		& > * {
+		.sonic-toggle-legend > * {
 			filter: var(--_sonic-engraving);
 		}
-	}
 
 	:is(.sonic-toggle-cap, .sonic-toggle-legend) > svg {
 		display: block;
@@ -331,25 +332,23 @@
 
 	.sonic-toggle-position[aria-checked='true']:has([data-sonic-lit]) > .sonic-toggle-legend {
 		color: var(--_sonic-toggle-legend-lit);
+	}
 
-		& > * {
+		:is(.sonic-toggle-position[aria-checked='true']:has([data-sonic-lit]) > .sonic-toggle-legend) > * {
 			filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
 		}
-	}
-
-	[legends='outside'] > .sonic-toggle[data-sonic-position-count] {
-		& > :is(.sonic-toggle-well, .sonic-toggle-cap) {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > :is(.sonic-toggle-well,.sonic-toggle-cap) {
 			grid-area: 1 / 2 / 2 / -2;
 		}
 
-		& > .sonic-toggle-position {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position {
 			display: grid;
 			grid-area: 1 / 1 / 2 / 3;
 			grid-template: subgrid / subgrid;
 			place-items: center;
 		}
 
-		& > .sonic-toggle-position > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position > .sonic-toggle-legend {
 			position: static;
 			display: block;
 			inline-size: auto;
@@ -360,86 +359,82 @@
 			pointer-events: auto;
 			opacity: 1;
 			translate: none;
+		}
 
-			& > * {
+			:is(:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position > .sonic-toggle-legend) > * {
 				filter: none;
 			}
-		}
 
-		& > .sonic-toggle-position:disabled > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:disabled > .sonic-toggle-legend {
 			color: var(--sonic-ink-disabled, color-mix(in oklab, currentcolor 30%, transparent));
 		}
 
-		& > .sonic-toggle-position:last-child > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:last-child > .sonic-toggle-legend {
 			grid-column: 2;
 		}
-	}
-
-	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count] {
-		& > :is(.sonic-toggle-well, .sonic-toggle-cap) {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > :is(.sonic-toggle-well,.sonic-toggle-cap) {
 			grid-area: 2 / 1 / -2 / 2;
 		}
 
-		& > .sonic-toggle-position {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position {
 			grid-area: 1 / 1 / 3 / 2;
 		}
 
-		& > .sonic-toggle-position:last-child > .sonic-toggle-legend {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:last-child > .sonic-toggle-legend {
 			grid-area: 2 / 1;
 		}
-	}
 
 	[legends='outside'] > .sonic-toggle[data-sonic-position-count='2'] {
 		grid-template: var(--_sonic-toggle-size) / auto repeat(2, var(--_sonic-toggle-slice)) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='2']) > .sonic-toggle-position:last-child {
 			grid-area: 1 / 3 / 2 / 5;
 		}
-	}
 
 	[legends='outside'] > .sonic-toggle[data-sonic-position-count='3'] {
 		grid-template: var(--_sonic-toggle-size) auto / auto repeat(3, var(--_sonic-toggle-slice)) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:last-child {
 			grid-area: 1 / 4 / 2 / 6;
 		}
 
-		& > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
 			grid-area: 1 / 3 / 3 / 4;
+		}
 
-			& > .sonic-toggle-legend {
+			:is(:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position)) > .sonic-toggle-legend {
 				grid-row: 2;
 			}
-		}
-	}
 
 	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='2'] {
 		grid-template:
 			auto repeat(2, var(--_sonic-toggle-slice)) auto /
 			minmax(var(--_sonic-toggle-size), auto);
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='2']) > .sonic-toggle-position:last-child {
 			grid-area: 3 / 1 / 5 / 2;
 		}
-	}
 
 	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3'] {
 		grid-template:
 			auto repeat(3, var(--_sonic-toggle-slice)) auto /
 			minmax(var(--_sonic-toggle-size), auto) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:last-child {
 			grid-area: 4 / 1 / 6 / 2;
 		}
 
-		& > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
 			grid-area: 3 / 1 / 4 / 3;
+		}
 
-			& > .sonic-toggle-legend {
+			:is(:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position)) > .sonic-toggle-legend {
 				grid-area: 1 / 2;
 			}
-		}
-	}
 
 	@media (prefers-reduced-motion: reduce) {
 		.sonic-toggle,

package/dist/styles/waveform.css

@@ -135,7 +135,7 @@
 		--_sonic-waveform-lit: var(--_sonic-lit);
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
 		--_sonic-waveform-shade: var(--_sonic-shade);
-		--_sonic-waveform-shade-clear: rgb(from var(--_sonic-shade) r g b / 0%);
+		--_sonic-waveform-shade-clear: color-mix(in srgb, var(--_sonic-shade) 0%, transparent);
 		--_sonic-waveform-edge-shade: var(--sonic-waveform-edge-shade, 0);
 		--_sonic-waveform-band-opacity: calc(
 			var(--sonic-waveform-band-opacity, 1) * var(--_sonic-waveform-band-dim, 1)
@@ -175,7 +175,8 @@
 		overflow: hidden;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: grab;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -280,12 +281,12 @@
 
 		.sonic-waveform-label {
 			color: CanvasText;
+		}
 
-			&[data-sonic-dimmed] {
+			.sonic-waveform-label[data-sonic-dimmed] {
 				color: GrayText;
 				filter: none;
 			}
-		}
 
 		.sonic-waveform-playhead {
 			background: CanvasText;

package/dist/styles/wavestrip.css

@@ -123,7 +123,7 @@
 		--_sonic-marker-step: calc(var(--_sonic-marker-size) + var(--_sonic-marker-edge));
 		--_sonic-marker-default: var(--sonic-marker, var(--_sonic-ink));
 		--_sonic-wavestrip-wave: var(
-			--sonic-wave,
+			--sonic-unplayed,
 			color-mix(in oklab, var(--_sonic-ink) 30%, var(--_sonic-unlit))
 		);
 		--_sonic-wavestrip-buffered: var(
@@ -143,8 +143,8 @@
 		container-type: size;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: ew-resize;
-		user-select: none;
-		box-shadow: var(--_sonic-focus-shadow);
+		-webkit-user-select: none;
+		        user-select: none;
 	}
 
 	[fill] > .sonic-wavestrip,
@@ -166,9 +166,10 @@
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
+		box-shadow: var(--_sonic-focus-shadow);
 	}
 
-	.sonic-wavestrip-markers {
+	:is(.sonic-wavestrip-markers, .sonic-wavestrip-regions) {
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
@@ -178,24 +179,26 @@
 		--_sonic-marker-colour: var(--_sonic-marker, var(--_sonic-marker-default));
 
 		position: absolute;
+	}
 
-		&[data-sonic-dimmed] {
+		[data-sonic-dimmed]:is(.sonic-wavestrip-marker,.sonic-wavestrip-region) {
 			--_sonic-marker-colour: color-mix(
 				in oklab,
 				var(--_sonic-marker, var(--_sonic-marker-default)) 45%,
 				transparent
 			);
 		}
-	}
 
 	.sonic-wavestrip-marker {
 		inset: calc(var(--_sonic-marker-lane, 0) * var(--_sonic-marker-step)) auto auto
 			calc(var(--_sonic-marker-from, 0) * 100% - var(--_sonic-marker-size) / 2);
 		inline-size: var(--_sonic-marker-size);
 		block-size: var(--_sonic-marker-size);
-		background: var(--_sonic-marker-colour);
+		color: var(--_sonic-marker-colour);
+		background: var(--_sonic-marker-paint, var(--_sonic-marker-colour));
 		border-radius: 50%;
-		box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--sonic-wavestrip-marker-edge, transparent);
+		box-shadow: 0 0 0 var(--_sonic-marker-edge)
+			var(--_sonic-marker-paint, var(--sonic-wavestrip-marker-edge, transparent));
 	}
 
 	.sonic-wavestrip-region {
@@ -233,15 +236,15 @@
 			--_sonic-marker-colour: CanvasText;
 
 			forced-color-adjust: none;
+		}
 
-			&[data-sonic-dimmed] {
+			[data-sonic-dimmed]:is(.sonic-wavestrip-marker,.sonic-wavestrip-region) {
 				--_sonic-marker-colour: GrayText;
 			}
-		}
 
 		.sonic-wavestrip-marker {
-			background: var(--_sonic-marker-colour);
-			box-shadow: 0 0 0 var(--_sonic-marker-edge) Canvas;
+			background: var(--_sonic-marker-paint, var(--_sonic-marker-colour));
+			box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--_sonic-marker-paint, Canvas);
 		}
 
 		.sonic-wavestrip-region {

package/dist/styles/xy.css

@@ -43,7 +43,8 @@
 		container-type: size;
 		touch-action: none;
 		cursor: crosshair;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 	}
 
 	:disabled > .sonic-xy {
@@ -64,14 +65,14 @@
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
+	}
 
-		&::before,
-		&::after {
+		.sonic-xy-field::before,.sonic-xy-field::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		.sonic-xy-field::before {
 			inset: auto 0
 				calc(
 					var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y) +
@@ -84,19 +85,19 @@
 					transparent
 						calc(
 							var(--_sonic-xy-x-low) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
-								sign(var(--_sonic-xy-x-low))
+								clamp(0, var(--_sonic-xy-x-low) * 100000, 1)
 						),
 					var(--_sonic-xy-lit) 0
 						calc(
 							var(--_sonic-xy-x-high) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
-								(2 - sign(1 - var(--_sonic-xy-x-high)))
+								(2 - clamp(0, (1 - var(--_sonic-xy-x-high)) * 100000, 1))
 						),
 					transparent 0
 				),
 				var(--_sonic-unlit);
 		}
 
-		&::after {
+		.sonic-xy-field::after {
 			inset: 0 auto 0
 				calc(
 					var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x) +
@@ -109,20 +110,19 @@
 					transparent
 						calc(
 							var(--_sonic-xy-y-low) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
-								sign(var(--_sonic-xy-y-low))
+								clamp(0, var(--_sonic-xy-y-low) * 100000, 1)
 						),
 					var(--_sonic-xy-lit) 0
 						calc(
 							var(--_sonic-xy-y-high) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
-								(2 - sign(1 - var(--_sonic-xy-y-high)))
+								(2 - clamp(0, (1 - var(--_sonic-xy-y-high)) * 100000, 1))
 						),
 					transparent 0
 				),
 				var(--_sonic-unlit);
 		}
-	}
 
-	:is(.sonic-xy-bracket, .sonic-xy-puck) {
+	:is(.sonic-xy-reticle, .sonic-xy-puck) {
 		position: absolute;
 		inset: auto auto calc(var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
 			calc(var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
@@ -131,8 +131,8 @@
 		border-radius: 50%;
 	}
 
-	.sonic-xy-bracket {
-		--_sonic-bracket-size: var(--_sonic-xy-puck);
+	.sonic-xy-reticle {
+		--_sonic-reticle-size: var(--_sonic-xy-puck);
 	}
 
 	.sonic-xy-puck {
@@ -146,8 +146,9 @@
 		cursor: var(--_sonic-xy-cursor);
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
 		transition: filter var(--_sonic-fade-duration) ease-out;
+	}
 
-		&::before {
+		.sonic-xy-puck::before {
 			position: absolute;
 			inset: 25%;
 			pointer-events: none;
@@ -162,7 +163,6 @@
 				border-color var(--_sonic-fade-duration) ease-out,
 				outline-color var(--_sonic-fade-duration) ease-out;
 		}
-	}
 
 	@media (hover: hover) {
 		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
@@ -208,10 +208,10 @@
 			forced-color-adjust: none;
 
 			/* The axis's own outline is the focus here */
-			&::before {
+		}
+			.sonic-xy-puck::before {
 				outline-style: none;
 			}
-		}
 
 		:state(dragging) > .sonic-xy > .sonic-xy-puck {
 			--_sonic-xy-puck-fill: Canvas;
@@ -224,10 +224,10 @@
 
 		.sonic-xy-axis:focus-visible {
 			outline-offset: 2px;
+		}
 
-			&[data-sonic-pointer-focus] {
+			.sonic-xy-axis[data-sonic-pointer-focus]:focus-visible {
 				outline-style: none;
 			}
-		}
 	}
 }