@xsynaptic/sonic-ui 0.24.1 → 0.25.1

package/dist/styles/slider.css

@@ -112,7 +112,8 @@
 		container-type: size;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		transition:
 			--_sonic-slider-groove-hovered var(--_sonic-fade-duration) ease-out
 				var(--_sonic-slider-groove-hover-delay),
@@ -254,7 +255,15 @@
 			var(--_sonic-etch) 0 var(--_sonic-unit),
 			transparent 0 var(--_sonic-slider-notch-pitch)
 		);
-		mask: linear-gradient(
+		-webkit-mask: linear-gradient(
+			var(--_sonic-slider-across),
+			transparent 15%,
+			#000 0 calc(var(--_sonic-slider-notch-mid) - var(--_sonic-slider-notch-lip)),
+			transparent 0 calc(var(--_sonic-slider-notch-mid) + var(--_sonic-slider-notch-lip)),
+			#000 0 85%,
+			transparent 0
+		);
+		        mask: linear-gradient(
 			var(--_sonic-slider-across),
 			transparent 15%,
 			#000 0 calc(var(--_sonic-slider-notch-mid) - var(--_sonic-slider-notch-lip)),
@@ -484,7 +493,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(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent);
 		}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-cap {

package/dist/styles/spectrum.css

@@ -85,7 +85,8 @@
 
 		/* The canvas's backing size would otherwise feed an intrinsically sized parent */
 		contain: size;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 	}
 
 	[fill] > .sonic-spectrum,
@@ -94,9 +95,16 @@
 	}
 
 	.sonic-spectrum-canvas {
+		--_sonic-spectrum-corner: max(
+			0px,
+			var(--_sonic-screen-radius, 0px) - var(--_sonic-screen-inset, 0px)
+		);
+
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
+		border-end-start-radius: var(--_sonic-spectrum-corner);
+		border-end-end-radius: var(--_sonic-spectrum-corner);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the bars into what is behind them */

package/dist/styles/switch.css

@@ -60,7 +60,8 @@
 		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);
 	}
 
@@ -369,7 +370,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(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))

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);

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);
 	}
 

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;
@@ -193,9 +194,11 @@
 			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 {
@@ -240,8 +243,8 @@
 			}
 
 		.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 {
@@ -84,12 +85,12 @@
 					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
 				),
@@ -109,19 +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));
@@ -130,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.24.1",
+  "version": "0.25.1",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -58,6 +58,7 @@
     "./meter.css": "./dist/styles/meter.css",
     "./number.css": "./dist/styles/number.css",
     "./panel.css": "./dist/styles/panel.css",
+    "./region.css": "./dist/styles/region.css",
     "./ring.css": "./dist/styles/ring.css",
     "./screen.css": "./dist/styles/screen.css",
     "./segmented.css": "./dist/styles/segmented.css",
@@ -81,7 +82,7 @@
     "typescript": "^6.0.3"
   },
   "scripts": {
-    "build": "tsdown && node ../../scripts/lower-sheets.ts",
+    "build": "tsdown && node ../../scripts/compile-sheets.ts",
     "check-types": "tsc --noEmit"
   }
 }