@xsynaptic/sonic-ui 0.9.0 → 0.10.0

package/dist/styles/envelope.css

@@ -106,7 +106,7 @@
 		--_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-edge: max(1px, round(var(--_sonic-point-stroke, 0px), var(--_sonic-snap)));
 		--_sonic-point-halo: transparent;
 
 		z-index: 1;

package/dist/styles/led.css

@@ -103,7 +103,7 @@
 		background:
 			radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) calc(60% * var(--_sonic-relief)), transparent)
+				color-mix(in oklab, var(--_sonic-lit) calc(40% * var(--_sonic-relief)), transparent)
 					calc(var(--_sonic-led-lens-ratio) * 100%),
 				transparent
 			),

package/dist/styles/material.css

@@ -53,6 +53,15 @@
 		--_sonic-light-fall: calc(180deg - var(--_sonic-light-tilt));
 		--_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) {
+			--_sonic-snap: 0.5px;
+		}
+
+		@media (resolution >= 3dppx) {
+			--_sonic-snap: calc(1px / 3);
+		}
 	}
 
 	:is(
@@ -150,7 +159,8 @@
 				rgb(0 0 0 / 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)));
-		--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit))
+		--_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)
@@ -237,10 +247,13 @@
 		);
 
 		/* Invalid with the token unset, so the default takes over */
-		--_sonic-glass-edge-set: 1px solid var(--sonic-glass-edge);
+		--_sonic-glass-edge-colour: var(--sonic-glass-edge);
+		--_sonic-glass-edge-width: var(--sonic-glass-edge-width);
+		--_sonic-glass-edge-set: var(--_sonic-glass-edge-width, 1px) solid
+			var(--_sonic-glass-edge-colour);
 		--_sonic-glass-edge: var(
 			--_sonic-glass-edge-set,
-			calc(1px * (1 - var(--_sonic-relief))) solid
+			var(--_sonic-glass-edge-width, calc(1px * (1 - var(--_sonic-relief)))) solid
 				color-mix(in oklab, currentcolor 35%, transparent)
 		);
 
@@ -399,12 +412,12 @@
 		--_sonic-keycap-glow: transparent;
 		--_sonic-keycap-lit-glow: color-mix(
 			in oklab,
-			var(--_sonic-lit) calc(22% * var(--_sonic-relief)),
+			var(--_sonic-lit) calc(15% * var(--_sonic-relief)),
 			transparent
 		);
 		--_sonic-legend-glow: drop-shadow(
 			0 0 var(--_sonic-unit)
-				color-mix(in oklab, var(--_sonic-lit) calc(35% * var(--_sonic-relief)), transparent)
+				color-mix(in oklab, var(--_sonic-lit) calc(24% * var(--_sonic-relief)), transparent)
 		);
 	}
 
@@ -427,7 +440,7 @@
 		box-shadow:
 			var(--_sonic-keycap-drop),
 			var(--_sonic-rim),
-			0 0 0 max(1px, 0.75 * var(--_sonic-unit)) var(--_sonic-blank-edge, transparent),
+			0 0 0 var(--_sonic-rim-width) var(--_sonic-blank-edge, transparent),
 			var(--_sonic-focus-shadow);
 		scale: var(--_sonic-keycap-scale);
 		translate: 0 var(--_sonic-keycap-shift);
@@ -532,6 +545,8 @@
 	) {
 		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
 		--_sonic-glass: var(--sonic-readout-glass, var(--_sonic-glass-base));
+		--_sonic-glass-edge-colour: var(--sonic-readout-edge, var(--sonic-glass-edge));
+		--_sonic-glass-edge-width: var(--sonic-readout-edge-width, var(--sonic-glass-edge-width));
 
 		box-sizing: border-box;
 		place-items: center;
@@ -558,7 +573,8 @@
 		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))),
-			inset 0 0 0 max(1px, var(--_sonic-unit)) rgb(255 255 255 / calc(0.08 * 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)));
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
 		transition:
@@ -687,7 +703,7 @@
 			--_sonic-face: ButtonFace;
 			--_sonic-sheen: none;
 			--_sonic-face-shadow: none;
-			--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit)) var(--_sonic-ink);
+			--_sonic-rim: 0 0 0 var(--_sonic-rim-width) var(--_sonic-ink);
 			--_sonic-drop-shade: transparent;
 			--_sonic-focus-glow: 0 0 transparent;
 		}

package/dist/styles/spectrum.css

@@ -87,6 +87,11 @@
 		border-radius: var(--_sonic-glass-radius);
 	}
 
+	[fill] > .sonic-spectrum,
+	sonic-spectrum[fill]:not(:defined, [hidden]) {
+		block-size: 100%;
+	}
+
 	.sonic-spectrum-canvas {
 		display: block;
 		inline-size: 100%;

package/dist/styles/switch.css

@@ -4,6 +4,12 @@
 	initial-value: 32px;
 }
 
+@property --_sonic-switch-at {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0;
+}
+
 @layer sonic {
 	:is(sonic-switch, .sonic-switch) {
 		--_sonic-switch-size: var(--sonic-switch-size, 2rem);
@@ -52,6 +58,11 @@
 		place-items: center;
 		line-height: 1;
 		user-select: none;
+		transition: --_sonic-switch-at 90ms cubic-bezier(0.4, 0, 0.2, 1);
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
 
 		& > * {
 			grid-area: 1 / 1;
@@ -243,7 +254,7 @@
 		);
 		border-radius: 50%;
 		box-shadow:
-			0 0 0 max(1px, 0.75 * var(--_sonic-unit))
+			0 0 0 var(--_sonic-rim-width)
 				var(
 					--sonic-cap-edge,
 					color-mix(
@@ -257,11 +268,9 @@
 	}
 
 	.sonic-switch-bat {
-		--_sonic-switch-lean: max(var(--_sonic-switch-at, 0), -1 * var(--_sonic-switch-at, 0));
-		--_sonic-switch-transition:
-			translate 90ms cubic-bezier(0.4, 0, 0.2, 1), inline-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
-			block-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
-			background-position 90ms cubic-bezier(0.4, 0, 0.2, 1);
+		--_sonic-switch-lean: max(var(--_sonic-switch-at), -1 * var(--_sonic-switch-at));
+		--_sonic-switch-throw: calc(var(--_sonic-switch-at) * var(--_sonic-switch-reach));
+		--_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)
@@ -269,7 +278,7 @@
 			var(--_sonic-switch-metal) 45%,
 			var(--_sonic-switch-metal-shade) 88%
 		);
-		--_sonic-switch-outline: max(1px, 0.4 * var(--_sonic-unit));
+		--_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)
@@ -286,10 +295,6 @@
 				var(--_sonic-drop-shade)
 		);
 
-		@media (prefers-reduced-motion: reduce) {
-			--_sonic-switch-transition: none;
-		}
-
 		&::before,
 		&::after {
 			position: absolute;
@@ -300,29 +305,30 @@
 			background-size: var(--_sonic-switch-size) var(--_sonic-switch-size);
 			border-radius: 999px;
 			box-shadow: 0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim);
-			transition: var(--_sonic-switch-transition);
 		}
 
 		&::before {
-			--_sonic-switch-shaft-x: calc(
-				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-x) * var(--_sonic-switch-lean) *
-					var(--_sonic-switch-reach)
+			--_sonic-switch-shaft-top: calc(
+				var(--_sonic-switch-pivot) + var(--_sonic-switch-along-y) *
+					min(0px, var(--_sonic-switch-throw))
 			);
-			--_sonic-switch-shaft-y: calc(
-				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-y) * var(--_sonic-switch-lean) *
-					var(--_sonic-switch-reach)
+			--_sonic-switch-shaft-left: calc(
+				var(--_sonic-switch-pivot) + var(--_sonic-switch-along-x) *
+					min(0px, var(--_sonic-switch-throw))
 			);
 
-			inline-size: var(--_sonic-switch-shaft-x);
-			block-size: var(--_sonic-switch-shaft-y);
-			background-position: calc((var(--_sonic-switch-shaft-x) - var(--_sonic-switch-size)) / 2)
-				calc((var(--_sonic-switch-shaft-y) - var(--_sonic-switch-size)) / 2);
-			translate: calc(
-					var(--_sonic-switch-along-x) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
+			inset: var(--_sonic-switch-shaft-top)
+				calc(
+					var(--_sonic-switch-pivot) - var(--_sonic-switch-along-x) *
+						max(0px, var(--_sonic-switch-throw))
 				)
 				calc(
-					var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
-				);
+					var(--_sonic-switch-pivot) - var(--_sonic-switch-along-y) *
+						max(0px, var(--_sonic-switch-throw))
+				)
+				var(--_sonic-switch-shaft-left);
+			background-position: calc(-1 * var(--_sonic-switch-shaft-left))
+				calc(-1 * var(--_sonic-switch-shaft-top));
 		}
 
 		&::after {
@@ -335,10 +341,8 @@
 					rgb(0 0 0 / 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-at, 0) * var(--_sonic-switch-reach)
-				)
-				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach));
+			translate: calc(var(--_sonic-switch-along-x) * var(--_sonic-switch-throw))
+				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-throw));
 		}
 	}
 
@@ -347,9 +351,14 @@
 	}
 
 	.sonic-switch:has(> .sonic-switch-position:disabled) {
-		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-etch));
-		--_sonic-switch-metal: var(--_sonic-etch);
-		--_sonic-switch-metal-shade: var(--_sonic-etch);
+		--_sonic-switch-disabled: color-mix(
+			in oklab,
+			var(--_sonic-ink) 30%,
+			oklch(from var(--_sonic-ink) clamp(0, (0.6 - l) * 1000, 1) 0 0deg)
+		);
+		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-switch-disabled));
+		--_sonic-switch-metal: var(--_sonic-switch-disabled);
+		--_sonic-switch-metal-shade: var(--_sonic-switch-disabled);
 	}
 
 	@media (forced-colors: active) {

package/dist/styles/waveform.css

@@ -87,7 +87,11 @@
 			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
 		);
 		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
-		--_sonic-waveform-line: var(--sonic-waveform-playhead-width, max(1px, var(--_sonic-unit)));
+		--_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)))
+		);
 		--_sonic-waveform-lit: var(--_sonic-lit);
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
 		--_sonic-waveform-wave-edge: var(
@@ -103,6 +107,10 @@
 		--_sonic-waveform-label-inset: calc(
 			var(--_sonic-waveform-size) * var(--sonic-waveform-label-inset-ratio, 0.04)
 		);
+		--_sonic-waveform-label-lift: var(
+			--sonic-waveform-label-inset-block,
+			var(--_sonic-waveform-label-inset)
+		);
 		--_sonic-waveform-label-park: var(
 			--sonic-waveform-label-inset-inline,
 			var(--_sonic-waveform-label-inset)
@@ -151,6 +159,13 @@
 		block-size: 100%;
 	}
 
+	.sonic-waveform-scrim {
+		position: absolute;
+		inset: var(--_sonic-waveform-inset);
+		pointer-events: none;
+		background: var(--sonic-waveform-scrim, none);
+	}
+
 	:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
 		position: absolute;
 		inset-block: var(--_sonic-waveform-inset);
@@ -170,7 +185,7 @@
 
 	.sonic-waveform-label {
 		position: absolute;
-		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-inset));
+		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-lift));
 		inset-inline-start: var(--_sonic-waveform-inset);
 		padding: 0.2em 0.35em;
 		margin: -0.2em -0.35em;
@@ -209,6 +224,10 @@
 			forced-color-adjust: none;
 		}
 
+		.sonic-waveform-scrim {
+			background: none;
+		}
+
 		.sonic-waveform-label {
 			color: CanvasText;
 

package/dist/styles/wavestrip.css

@@ -110,8 +110,11 @@
 			--sonic-wavestrip-marker-size,
 			calc(var(--_sonic-wavestrip-size) * var(--_sonic-wavestrip-marker-ratio))
 		);
-		--_sonic-marker-ring: max(1px, 0.5 * var(--_sonic-unit));
-		--_sonic-marker-step: calc(var(--_sonic-marker-size) + var(--_sonic-marker-ring));
+		--_sonic-marker-edge: var(
+			--sonic-wavestrip-marker-edge-width,
+			max(1px, round(0.5 * var(--_sonic-unit), var(--_sonic-snap)))
+		);
+		--_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,
@@ -185,9 +188,9 @@
 			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: color-mix(in oklab, var(--_sonic-marker-colour) 85%, transparent);
+		background: var(--_sonic-marker-colour);
 		border-radius: 50%;
-		box-shadow: 0 0 0 var(--_sonic-marker-ring) var(--_sonic-glass);
+		box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--_sonic-glass);
 	}
 
 	.sonic-wavestrip-region {
@@ -196,7 +199,7 @@
 		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);
-		border-inline: max(1px, var(--_sonic-unit)) solid
+		border-inline: var(--sonic-wavestrip-region-edge-width, max(1px, var(--_sonic-unit))) solid
 			color-mix(in oklab, var(--_sonic-marker-colour) 55%, transparent);
 	}
 
@@ -242,7 +245,7 @@
 
 		.sonic-wavestrip-marker {
 			background: var(--_sonic-marker-colour);
-			box-shadow: 0 0 0 var(--_sonic-marker-ring) Canvas;
+			box-shadow: 0 0 0 var(--_sonic-marker-edge) Canvas;
 		}
 
 		.sonic-wavestrip-region {

package/dist/styles/xy.css

@@ -52,7 +52,7 @@
 	}
 
 	.sonic-xy-field {
-		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), 1px));
+		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-xy-x-low: min(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
 		--_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));
@@ -169,8 +169,8 @@
 	.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, 0.08 * var(--_sonic-xy-puck)) var(--_sonic-glass),
-			0 0 0 max(4px, 0.16 * var(--_sonic-xy-puck)) var(--_sonic-focus);
+			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);
 	}
 
 	:state(dragging) > .sonic-xy > .sonic-xy-puck {
@@ -178,7 +178,7 @@
 		--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
 		--_sonic-xy-puck-glow: color-mix(
 			in oklab,
-			var(--_sonic-xy-lit) calc(45% * var(--_sonic-relief)),
+			var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
 			transparent
 		);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",