@xsynaptic/sonic-ui 0.25.1 → 0.26.0

package/dist/styles/slider.css

@@ -128,7 +128,7 @@
 		}
 
 	:where(:not(:disabled)) > .sonic-slider:focus-visible,
-	:state(dragging) > .sonic-slider {
+	.sonic-slider[data-sonic-dragging] {
 		--_sonic-slider-groove-held: 1;
 	}
 
@@ -160,11 +160,11 @@
 		touch-action: var(--sonic-touch-action, pan-x);
 	}
 
-	:state(dragging) > .sonic-slider {
+	.sonic-slider[data-sonic-dragging] {
 		--_sonic-cap: var(--_sonic-cap-hover);
 	}
 
-	:state(springing) > .sonic-slider {
+	.sonic-slider[data-sonic-springing] {
 		/* A damped spring with 10% bounce, sampled into `linear()` */
 		transition: --_sonic-slider-value 200ms
 			linear(
@@ -214,7 +214,7 @@
 
 		@media (prefers-reduced-motion: reduce) {
 
-	:state(springing) > .sonic-slider {
+	.sonic-slider[data-sonic-springing] {
 			transition: none;
 	}
 		}
@@ -232,7 +232,7 @@
 		--_sonic-slider-scale-band: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-ratio));
 	}
 
-	[groove-press='none']:not(:state(dragging)) > .sonic-slider {
+	[groove-press='none'] > .sonic-slider:not([data-sonic-dragging]) {
 		cursor: default;
 	}
 
@@ -383,7 +383,7 @@
 		display: none;
 	}
 
-	:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+	.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation {
 		--_sonic-slider-live-low: min(
 			var(--_sonic-slider-value, 0),
 			var(--_sonic-slider-modulation-value, 0)
@@ -416,31 +416,31 @@
 		background: color-mix(in oklab, var(--_sonic-slider-modulation) 50%, transparent);
 	}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before,:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::before,:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::after {
 			position: absolute;
 			content: '';
 		}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::before {
 			inset: 0 auto 0 var(--_sonic-slider-live-start);
 			inline-size: var(--_sonic-slider-live-length);
 			background: var(--_sonic-slider-modulation);
 			border-radius: inherit;
 		}
 
-		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::after {
 			inset: var(--_sonic-slider-tick-overhang) auto var(--_sonic-slider-tick-overhang)
 				var(--_sonic-slider-tick-start);
 			inline-size: var(--_sonic-unit);
 			background: var(--_sonic-slider-modulation-tick);
 		}
-		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
+		:is(:where([orientation='vertical']) > .sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::before {
 			inset: auto 0 var(--_sonic-slider-live-start);
 			inline-size: auto;
 			block-size: var(--_sonic-slider-live-length);
 		}
 
-		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
+		:is(:where([orientation='vertical']) > .sonic-slider[data-sonic-modulated] > .sonic-slider-modulation)::after {
 			inset: auto var(--_sonic-slider-tick-overhang) var(--_sonic-slider-tick-start);
 			inline-size: auto;
 			block-size: var(--_sonic-unit);
@@ -538,7 +538,7 @@
 			--_sonic-slider-modulation: CanvasText;
 		}
 
-		:state(modulated) > .sonic-slider > .sonic-slider-modulation {
+		.sonic-slider[data-sonic-modulated] > .sonic-slider-modulation {
 			--_sonic-slider-modulation-tick: CanvasText;
 
 			background: GrayText;

package/dist/styles/switch.css

@@ -12,6 +12,12 @@
 	initial-value: 0;
 }
 
+@property --_sonic-switch-outline {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	:is(sonic-switch, .sonic-switch) {
 		--_sonic-switch-size: var(--sonic-switch-size, 2rem);

package/dist/styles/toggle.css

@@ -123,7 +123,7 @@
 		touch-action: pan-x;
 	}
 
-	:state(dragging) > .sonic-toggle {
+	.sonic-toggle[data-sonic-dragging] {
 		transition: --_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
@@ -179,7 +179,7 @@
 	}
 
 	/* Held, never resting: the chosen position's cap stands as proud as any other */
-	.sonic-toggle:has(> .sonic-toggle-position[data-sonic-pressed]):has(
+	.sonic-toggle:has(> .sonic-toggle-position[data-sonic-active]):has(
 			> .sonic-toggle-position:not(:disabled)
 		) {
 		--_sonic-toggle-sink: calc(var(--_sonic-keycap-depth) / 2);
@@ -438,7 +438,7 @@
 
 	@media (prefers-reduced-motion: reduce) {
 		.sonic-toggle,
-		:state(dragging) > .sonic-toggle,
+		.sonic-toggle[data-sonic-dragging],
 		.sonic-toggle-well,
 		.sonic-toggle-cap,
 		.sonic-toggle-legend {

package/dist/styles/waveform.css

@@ -108,6 +108,12 @@
 	initial-value: rgb(200 200 208);
 }
 
+@property --_sonic-waveform-line {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @layer sonic.control {
 	:is(sonic-waveform, .sonic-waveform) {
 		--_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
@@ -185,7 +191,7 @@
 		block-size: 100%;
 	}
 
-	:state(dragging) > .sonic-waveform {
+	.sonic-waveform[data-sonic-dragging] {
 		cursor: grabbing;
 	}
 

package/dist/styles/wavestrip.css

@@ -72,6 +72,12 @@
 	initial-value: 0;
 }
 
+@property --_sonic-marker-edge {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
 @property --_sonic-marker-step {
 	syntax: '<length>';
 	inherits: true;

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);
@@ -165,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);
 		}
 	}
@@ -175,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)),
@@ -213,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.25.1",
+  "version": "0.26.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",