@xsynaptic/sonic-ui 0.18.0 → 0.20.0

package/dist/styles/switch.css

@@ -35,6 +35,7 @@
 		--_sonic-switch-bat-ratio: var(--sonic-switch-bat-ratio, 0.36);
 		--_sonic-switch-bushing-ratio: var(--sonic-switch-bushing-ratio, 0.62);
 		--_sonic-switch-font-ratio: var(--sonic-switch-font-ratio, 0.4);
+		--_sonic-switch-font-own: calc(var(--_sonic-switch-size) * var(--sonic-switch-font-ratio));
 		--_sonic-unit: calc(var(--_sonic-switch-size) / 32);
 		--_sonic-switch-reach: calc(var(--_sonic-switch-size) * var(--_sonic-switch-reach-ratio));
 		--_sonic-switch-ball: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bat-ratio));
@@ -46,12 +47,12 @@
 		--_sonic-switch-metal: color-mix(
 			in oklab,
 			var(--_sonic-switch-cap) calc(100% - 55% * var(--_sonic-relief)),
-			#fff
+			var(--_sonic-shine)
 		);
 		--_sonic-switch-metal-shade: color-mix(
 			in oklab,
 			var(--_sonic-switch-cap) calc(100% - 20% * var(--_sonic-relief)),
-			#000
+			var(--_sonic-shade)
 		);
 
 		display: inline-grid;
@@ -84,7 +85,13 @@
 		place-self: stretch;
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio));
+		font-size: var(
+			--_sonic-switch-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio))
+			)
+		);
 		color: inherit;
 		text-transform: inherit;
 		letter-spacing: inherit;
@@ -241,7 +248,7 @@
 		--_sonic-switch-bushing-shade: color-mix(
 			in oklab,
 			var(--_sonic-cap) calc(100% - 20% * var(--_sonic-relief)),
-			#000
+			var(--_sonic-shade)
 		);
 
 		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
@@ -251,10 +258,20 @@
 			--sonic-well,
 			radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
+				color-mix(
+						in oklab,
+						var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)),
+						var(--_sonic-shade)
+					)
+					0 42%,
 				var(--_sonic-switch-bushing-shade) 48%,
 				var(--_sonic-cap) 70%,
-				color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
+				color-mix(
+						in oklab,
+						var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)),
+						var(--_sonic-shine)
+					)
+					88%,
 				var(--_sonic-switch-bushing-shade)
 			)
 		);
@@ -266,7 +283,7 @@
 					color-mix(
 						in oklab,
 						var(--_sonic-switch-cap) calc(100% - 60% * var(--_sonic-relief)),
-						#000
+						var(--_sonic-shade)
 					)
 				),
 			calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y)) calc(2 * var(--_sonic-unit))
@@ -279,7 +296,11 @@
 		--_sonic-switch-pivot: calc((var(--_sonic-switch-size) - var(--_sonic-switch-shaft)) / 2);
 		--_sonic-switch-sheen: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)), #fff)
+			color-mix(
+					in oklab,
+					var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)),
+					var(--_sonic-shine)
+				)
 				12%,
 			var(--_sonic-switch-metal) 45%,
 			var(--_sonic-switch-metal-shade) 88%
@@ -287,7 +308,11 @@
 		--_sonic-switch-outline: max(1px, round(0.4 * var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-switch-rim: var(
 			--sonic-cap-edge,
-			color-mix(in oklab, var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 
 		position: relative;
@@ -344,7 +369,7 @@
 				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(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+					rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))),
 				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))

package/dist/styles/toggle.css

@@ -52,6 +52,7 @@
 		--_sonic-toggle-bevel-ratio: var(--sonic-toggle-bevel-ratio, 0.075);
 		--_sonic-toggle-depth-ratio: var(--sonic-toggle-depth-ratio, calc(0.03 * var(--_sonic-relief)));
 		--_sonic-toggle-font-ratio: var(--sonic-toggle-font-ratio, 0.26);
+		--_sonic-toggle-font-own: calc(var(--_sonic-toggle-size) * var(--sonic-toggle-font-ratio));
 		--_sonic-toggle-press-scale: var(--sonic-toggle-press-scale, 0.985);
 		--_sonic-toggle-icon-ratio: var(--sonic-toggle-icon-ratio, 0.5);
 		--_sonic-toggle-led-ratio: var(--sonic-toggle-led-ratio, 0.25);
@@ -107,7 +108,7 @@
 		user-select: none;
 		transition:
 			--_sonic-toggle-at 120ms cubic-bezier(0.4, 0, 0.2, 1),
-			--_sonic-toggle-sink 60ms cubic-bezier(0.4, 0, 0.2, 1);
+			--_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	[orientation='vertical'] > .sonic-toggle {
@@ -122,7 +123,7 @@
 	}
 
 	:state(dragging) > .sonic-toggle {
-		transition: --_sonic-toggle-sink 60ms cubic-bezier(0.4, 0, 0.2, 1);
+		transition: --_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	[data-sonic-lit='ok'] > .sonic-toggle:has(> [role='switch']),
@@ -205,7 +206,7 @@
 		box-shadow:
 			var(--_sonic-well),
 			inset 0 0 0 calc(1px * (1 - var(--_sonic-relief))) var(--_sonic-toggle-well-edge);
-		transition: --_sonic-toggle-well-tint 120ms ease-out;
+		transition: --_sonic-toggle-well-tint var(--_sonic-fade-duration) ease-out;
 	}
 
 	/* The position rides `--_sonic-toggle-at`, which already eases; easing the offset too would trail a drag */
@@ -219,8 +220,8 @@
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-throw))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-throw) + var(--_sonic-toggle-sink));
 		transition:
-			scale 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),
+			box-shadow var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 
 		& > .sonic-led {
 			--_sonic-led-size: var(
@@ -241,7 +242,13 @@
 		position: relative;
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-font-ratio));
+		font-size: var(
+			--_sonic-toggle-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-font-ratio))
+			)
+		);
 		line-height: 1;
 		color: inherit;
 		text-transform: inherit;
@@ -304,7 +311,7 @@
 		opacity: 0;
 		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 120ms ease-out;
+		transition: opacity var(--_sonic-fade-duration) ease-out;
 
 		& > * {
 			filter: var(--_sonic-engraving);

package/dist/styles/waveform.css

@@ -91,11 +91,7 @@
 	}
 
 	.sonic-waveform {
-		--_sonic-waveform-inset: calc(
-			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
-		);
 		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
-		--_sonic-glass-depth: var(--sonic-glass-depth, calc(0.6 * var(--_sonic-relief)));
 		--_sonic-waveform-line: var(
 			--sonic-waveform-playhead-width,
 			max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
@@ -104,7 +100,11 @@
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
 		--_sonic-waveform-wave-edge: var(
 			--sonic-waveform-edge,
-			color-mix(in oklab, var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 		--_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
 		--_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
@@ -125,21 +125,20 @@
 			var(--_sonic-waveform-label-inset)
 		);
 
+		/* 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-waveform-length);
 		block-size: var(--_sonic-waveform-size);
-		padding: var(--_sonic-waveform-inset);
 		container-type: size;
 
 		/* A label riding in from the far side would otherwise widen the page */
 		overflow: hidden;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: grab;
-
-		--_sonic-glass-radius: calc(
-			var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio, 0.08)
-		);
-
-		border-radius: var(--_sonic-glass-radius);
+		user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -170,15 +169,15 @@
 
 	.sonic-waveform-scrim {
 		position: absolute;
-		inset: var(--_sonic-waveform-inset);
+		inset: 0;
 		pointer-events: none;
 		background: var(--sonic-waveform-scrim, none);
 	}
 
 	:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
 		position: absolute;
-		inset-block: var(--_sonic-waveform-inset);
-		inset-inline-start: calc(var(--_sonic-waveform-inset) - var(--_sonic-waveform-line) / 2);
+		inset-block: 0;
+		inset-inline-start: calc(var(--_sonic-waveform-line) / -2);
 		inline-size: var(--_sonic-waveform-line);
 		pointer-events: none;
 		translate: 50cqi;
@@ -194,8 +193,8 @@
 
 	.sonic-waveform-label {
 		position: absolute;
-		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-lift));
-		inset-inline-start: var(--_sonic-waveform-inset);
+		inset-block-end: var(--_sonic-waveform-label-lift);
+		inset-inline-start: 0;
 		padding: 0.2em 0.35em;
 		margin: -0.2em -0.35em;
 		font-family: var(--sonic-waveform-label-font, inherit);
@@ -216,7 +215,7 @@
 		filter: opacity(0.5);
 	}
 
-	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
+	/* Opaque, since a system highlight carries alpha that would blend the wave into what is behind it */
 	@media (forced-colors: active) {
 		.sonic-waveform {
 			--_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);

package/dist/styles/wavestrip.css

@@ -110,9 +110,6 @@
 		--_sonic-wavestrip-groove-ratio: var(--sonic-wavestrip-groove-ratio, 0.15);
 		--_sonic-wavestrip-groove-size: var(--sonic-wavestrip-groove-size, 0px);
 		--_sonic-wavestrip-marker-ratio: var(--sonic-wavestrip-marker-ratio, 0.065);
-		--_sonic-wavestrip-inset: calc(
-			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-inset-ratio, 0.1)
-		);
 		--_sonic-unit: calc(var(--_sonic-wavestrip-size) / 32);
 		--_sonic-wavestrip-lit: var(--_sonic-lit);
 		--_sonic-marker-size: var(
@@ -136,18 +133,17 @@
 		--_sonic-wavestrip-played: var(--_sonic-wavestrip-lit);
 		--_sonic-wavestrip-scrub: var(--sonic-scrub, color-mix(in oklab, var(--_sonic-lit) 55%, #fff));
 
+		/* 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-wavestrip-length);
 		block-size: var(--_sonic-wavestrip-size);
-		padding: var(--_sonic-wavestrip-inset);
 		container-type: size;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: ew-resize;
-
-		--_sonic-glass-radius: calc(
-			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-radius-ratio, 0.15)
-		);
-
-		border-radius: var(--_sonic-glass-radius);
+		user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -174,7 +170,7 @@
 
 	.sonic-wavestrip-markers {
 		position: absolute;
-		inset: var(--_sonic-wavestrip-inset);
+		inset: 0;
 		pointer-events: none;
 	}
 
@@ -187,7 +183,7 @@
 			--_sonic-marker-colour: color-mix(
 				in oklab,
 				var(--_sonic-marker, var(--_sonic-marker-default)) 45%,
-				var(--_sonic-glass)
+				transparent
 			);
 		}
 	}
@@ -199,12 +195,11 @@
 		block-size: var(--_sonic-marker-size);
 		background: var(--_sonic-marker-colour);
 		border-radius: 50%;
-		box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--_sonic-glass);
+		box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--sonic-wavestrip-marker-edge, transparent);
 	}
 
 	.sonic-wavestrip-region {
-		inset: calc(-1 * var(--_sonic-wavestrip-inset)) auto calc(-1 * var(--_sonic-wavestrip-inset))
-			calc(var(--_sonic-marker-from, 0) * 100%);
+		inset: 0 auto 0 calc(var(--_sonic-marker-from, 0) * 100%);
 		box-sizing: border-box;
 		inline-size: calc((var(--_sonic-marker-to, 0) - var(--_sonic-marker-from, 0)) * 100%);
 		background: color-mix(in oklab, var(--_sonic-marker-colour) 16%, transparent);
@@ -214,23 +209,15 @@
 
 	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
 	.sonic-wavestrip-readout {
-		--_sonic-wavestrip-readout-inset: calc(
-			var(--_sonic-wavestrip-inset) + var(--_sonic-wavestrip-readout-at, 0) * 100cqi
-		);
-
 		inset-inline: 0;
 		justify-self: start;
 		position-area: block-start center;
 		transform: translateX(
-			clamp(
-				0px,
-				var(--_sonic-wavestrip-readout-inset) - 50%,
-				100cqi + 2 * var(--_sonic-wavestrip-inset) - 100%
-			)
+			clamp(0px, var(--_sonic-wavestrip-readout-at, 0) * 100cqi - 50%, 100cqi - 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-wavestrip {
 			--_sonic-wavestrip-lit: Highlight;

package/dist/styles/xy.css

@@ -25,25 +25,24 @@
 
 	.sonic-xy {
 		--_sonic-xy-puck-ratio: var(--sonic-xy-puck-ratio, 0.2);
-		--_sonic-xy-radius-ratio: var(--sonic-xy-radius-ratio, 0.06);
-		--_sonic-xy-inset-ratio: var(--sonic-xy-inset-ratio, 0.04);
 		--_sonic-unit: calc(var(--_sonic-xy-size) / 96);
 		--_sonic-xy-lit: var(--_sonic-lit);
 		--_sonic-xy-cursor: grab;
 		--_sonic-xy-puck: calc(var(--_sonic-xy-size) * var(--_sonic-xy-puck-ratio));
-		--_sonic-xy-inset: calc(var(--_sonic-xy-size) * var(--_sonic-xy-inset-ratio));
-		--_sonic-xy-travel-x: calc(100cqi - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
-		--_sonic-xy-travel-y: calc(100cqb - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
+		--_sonic-xy-travel-x: calc(100cqi - var(--_sonic-xy-puck));
+		--_sonic-xy-travel-y: calc(100cqb - var(--_sonic-xy-puck));
 
+		/* 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-xy-size) * var(--_sonic-xy-aspect-ratio));
 		block-size: var(--_sonic-xy-size);
 		container-type: size;
 		touch-action: none;
 		cursor: crosshair;
-
-		--_sonic-glass-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
-
-		border-radius: var(--_sonic-glass-radius);
+		user-select: none;
 	}
 
 	:disabled > .sonic-xy {
@@ -59,9 +58,11 @@
 		--_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
 		--_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
 		--_sonic-xy-y-high: max(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
+		--_sonic-xy-cut-x: calc(var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
+		--_sonic-xy-cut-y: calc(var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y));
 
 		position: absolute;
-		inset: var(--_sonic-xy-inset);
+		inset: 0;
 		pointer-events: none;
 
 		&::before,
@@ -70,6 +71,8 @@
 			content: '';
 		}
 
+		/* Each line is cut under the puck, which is see-through while held; the cut ends inside its ring */
+
 		&::before {
 			inset: auto 0
 				calc(
@@ -93,6 +96,12 @@
 					transparent 0
 				),
 				var(--_sonic-unlit);
+			mask: linear-gradient(
+				to right,
+				#000 calc(var(--_sonic-xy-cut-x) + 0.29 * var(--_sonic-xy-puck)),
+				transparent 0 calc(var(--_sonic-xy-cut-x) + 0.71 * var(--_sonic-xy-puck)),
+				#000 0
+			);
 		}
 
 		&::after {
@@ -118,14 +127,19 @@
 					transparent 0
 				),
 				var(--_sonic-unlit);
+			mask: linear-gradient(
+				to top,
+				#000 calc(var(--_sonic-xy-cut-y) + 0.29 * var(--_sonic-xy-puck)),
+				transparent 0 calc(var(--_sonic-xy-cut-y) + 0.71 * var(--_sonic-xy-puck)),
+				#000 0
+			);
 		}
 	}
 
 	:is(.sonic-xy-bracket, .sonic-xy-puck) {
 		position: absolute;
-		inset: auto auto
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
+		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));
 		inline-size: var(--_sonic-xy-puck);
 		block-size: var(--_sonic-xy-puck);
 		border-radius: 50%;
@@ -140,25 +154,27 @@
 		--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
 		--_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
 		--_sonic-xy-puck-glow: transparent;
-		--_sonic-xy-puck-ring: 0 0 transparent;
+		--_sonic-xy-puck-ring: transparent;
+		--_sonic-xy-puck-ring-width: max(2px, round(0.08 * var(--_sonic-xy-puck), var(--_sonic-snap)));
 
 		cursor: var(--_sonic-xy-cursor);
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
-		transition: filter 120ms ease-out;
+		transition: filter var(--_sonic-fade-duration) ease-out;
 
 		&::before {
 			position: absolute;
 			inset: 25%;
 			pointer-events: none;
+			outline: var(--_sonic-xy-puck-ring-width) solid var(--_sonic-xy-puck-ring);
+			outline-offset: var(--_sonic-xy-puck-ring-width);
 			content: '';
 			background: var(--_sonic-xy-puck-fill);
 			border: max(1px, 0.08 * var(--_sonic-xy-puck)) solid var(--_sonic-xy-puck-edge);
 			border-radius: 50%;
-			box-shadow: var(--_sonic-xy-puck-ring);
 			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,
+				outline-color var(--_sonic-fade-duration) ease-out;
 		}
 	}
 
@@ -170,13 +186,11 @@
 
 	.sonic-xy-puck:has(> :focus-visible:not([data-sonic-pointer-focus])) {
 		--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
-		--_sonic-xy-puck-ring:
-			0 0 0 max(2px, round(0.08 * var(--_sonic-xy-puck), var(--_sonic-snap))) var(--_sonic-glass),
-			0 0 0 max(4px, round(0.16 * var(--_sonic-xy-puck), var(--_sonic-snap))) var(--_sonic-focus);
+		--_sonic-xy-puck-ring: var(--_sonic-focus);
 	}
 
 	:state(dragging) > .sonic-xy > .sonic-xy-puck {
-		--_sonic-xy-puck-fill: var(--_sonic-glass);
+		--_sonic-xy-puck-fill: transparent;
 		--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
 		--_sonic-xy-puck-glow: color-mix(
 			in oklab,
@@ -196,7 +210,6 @@
 		.sonic-xy {
 			--_sonic-lit: Highlight;
 			--_sonic-unlit: GrayText;
-			--_sonic-glass: Canvas;
 		}
 
 		.sonic-xy-field {
@@ -207,9 +220,17 @@
 			--_sonic-xy-puck-fill: CanvasText;
 			--_sonic-xy-puck-lift: CanvasText;
 			--_sonic-xy-puck-glow: transparent;
-			--_sonic-xy-puck-ring: 0 0 transparent;
 
 			forced-color-adjust: none;
+
+			/* The axis's own outline is the focus here */
+			&::before {
+				outline-style: none;
+			}
+		}
+
+		:state(dragging) > .sonic-xy > .sonic-xy-puck {
+			--_sonic-xy-puck-fill: Canvas;
 		}
 
 		.sonic-xy-axis {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -38,11 +38,6 @@
       "development": "./dist/dev/index.js",
       "import": "./dist/default/index.js"
     },
-    "./dat": {
-      "types": "./dist/dev/dat.d.ts",
-      "development": "./dist/dev/dat.js",
-      "import": "./dist/default/dat.js"
-    },
     "./define": {
       "types": "./dist/dev/define.d.ts",
       "development": "./dist/dev/define.js",

package/dist/default/dat.js

@@ -1,52 +0,0 @@
-import { clamp } from "./lib/math.js";
-
-//#region src/dat.ts
-function readVersion(view) {
-	const version = view.getInt32(0, true);
-	if (version === 1 || version === 2) return version;
-	throw new Error(`A .dat file of version ${String(version)} is not one this reads`);
-}
-function readDatHeader(buffer) {
-	if (buffer.byteLength < 20) throw new Error("A .dat header takes at least 20 bytes");
-	const view = new DataView(buffer);
-	const version = readVersion(view);
-	const dataOffset = version === 1 ? 20 : 24;
-	if (buffer.byteLength < dataOffset) throw new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);
-	const channels = version === 1 ? 1 : view.getInt32(20, true);
-	if (channels < 1) throw new Error("A .dat header names no channels");
-	const sampleRate = view.getInt32(8, true);
-	const samplesPerPixel = view.getInt32(12, true);
-	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
-	return {
-		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
-		channels,
-		dataOffset,
-		pairs: view.getUint32(16, true),
-		pairsPerSecond: sampleRate / samplesPerPixel,
-		sampleRate,
-		samplesPerPixel,
-		version
-	};
-}
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-function datByteRange(header, fromPair, toPair) {
-	const from = clamp(Math.floor(fromPair), 0, header.pairs);
-	const to = clamp(Math.ceil(toPair), from, header.pairs);
-	if (!(to > from)) return void 0;
-	const pairBytes = header.channels * 2 * header.bits / 8;
-	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
-}
-function readDatSamples(header, body, byteOffset = 0) {
-	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
-}
-function readDatPeaks(header, body, byteOffset = 0) {
-	return {
-		channels: header.channels,
-		fullScale: header.bits === 8 ? 128 : 32768,
-		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body, byteOffset)
-	};
-}
-
-//#endregion
-export { datByteRange, readDatHeader, readDatPeaks, readDatSamples };

package/dist/dev/dat.d.ts

@@ -1,20 +0,0 @@
-import { WaveformPeaks } from "./lib/waveform-buckets.js";
-//#region src/dat.d.ts
-export interface DatHeader {
-  bits: 8 | 16;
-  channels: number;
-  dataOffset: number;
-  pairs: number;
-  pairsPerSecond: number;
-  sampleRate: number;
-  samplesPerPixel: number;
-  version: 1 | 2;
-}
-export declare function readDatHeader(buffer: ArrayBuffer): DatHeader;
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-export declare function datByteRange(header: DatHeader, fromPair: number, toPair: number): [number, number] | undefined;
-export declare function readDatSamples(header: DatHeader, body: ArrayBuffer, byteOffset?: number): Int8Array | Int16Array;
-export declare function readDatPeaks(header: DatHeader, body: ArrayBuffer, byteOffset?: number): WaveformPeaks;
-//#endregion
-export type { WaveformPeaks };
-//# sourceMappingURL=dat.d.ts.map

package/dist/dev/dat.js

@@ -1,53 +0,0 @@
-import { clamp } from "./lib/math.js";
-
-//#region src/dat.ts
-function readVersion(view) {
-	const version = view.getInt32(0, true);
-	if (version === 1 || version === 2) return version;
-	throw new Error(`A .dat file of version ${String(version)} is not one this reads`);
-}
-function readDatHeader(buffer) {
-	if (buffer.byteLength < 20) throw new Error("A .dat header takes at least 20 bytes");
-	const view = new DataView(buffer);
-	const version = readVersion(view);
-	const dataOffset = version === 1 ? 20 : 24;
-	if (buffer.byteLength < dataOffset) throw new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);
-	const channels = version === 1 ? 1 : view.getInt32(20, true);
-	if (channels < 1) throw new Error("A .dat header names no channels");
-	const sampleRate = view.getInt32(8, true);
-	const samplesPerPixel = view.getInt32(12, true);
-	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
-	return {
-		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
-		channels,
-		dataOffset,
-		pairs: view.getUint32(16, true),
-		pairsPerSecond: sampleRate / samplesPerPixel,
-		sampleRate,
-		samplesPerPixel,
-		version
-	};
-}
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-function datByteRange(header, fromPair, toPair) {
-	const from = clamp(Math.floor(fromPair), 0, header.pairs);
-	const to = clamp(Math.ceil(toPair), from, header.pairs);
-	if (!(to > from)) return void 0;
-	const pairBytes = header.channels * 2 * header.bits / 8;
-	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
-}
-function readDatSamples(header, body, byteOffset = 0) {
-	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
-}
-function readDatPeaks(header, body, byteOffset = 0) {
-	return {
-		channels: header.channels,
-		fullScale: header.bits === 8 ? 128 : 32768,
-		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body, byteOffset)
-	};
-}
-
-//#endregion
-export { datByteRange, readDatHeader, readDatPeaks, readDatSamples };
-//# sourceMappingURL=dat.js.map