@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/dist/styles/xy.css

@@ -6,6 +6,18 @@
 	initial-value: 128px;
 }
 
+@property --_sonic-xy-line {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
+@property --_sonic-xy-puck-ring-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 2px;
+}
+
 @layer sonic.control {
 	:is(sonic-xy, .sonic-xy) {
 		--_sonic-xy-size: var(--sonic-xy-size, 8rem);
@@ -43,7 +55,8 @@
 		container-type: size;
 		touch-action: none;
 		cursor: crosshair;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 	}
 
 	:disabled > .sonic-xy {
@@ -84,12 +97,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 +122,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 +143,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 {
@@ -164,7 +177,7 @@
 		}
 
 	@media (hover: hover) {
-		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
+		:not(:disabled) > .sonic-xy:where(:not([data-sonic-dragging])) > .sonic-xy-puck:hover {
 			--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
 		}
 	}
@@ -174,7 +187,7 @@
 		--_sonic-xy-puck-ring: var(--_sonic-focus);
 	}
 
-	:state(dragging) > .sonic-xy > .sonic-xy-puck {
+	.sonic-xy[data-sonic-dragging] > .sonic-xy-puck {
 		--_sonic-xy-puck-glow: color-mix(
 			in oklab,
 			var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
@@ -212,7 +225,7 @@
 				outline-style: none;
 			}
 
-		:state(dragging) > .sonic-xy > .sonic-xy-puck {
+		.sonic-xy[data-sonic-dragging] > .sonic-xy-puck {
 			--_sonic-xy-puck-fill: Canvas;
 			--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.24.1",
+  "version": "0.26.0",
   "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"
   }
 }