@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/dist/styles/meter.css

@@ -84,11 +84,11 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
-	:is([value], :state(ladder)) > .sonic-meter {
+	:is([value] > .sonic-meter, .sonic-meter[data-sonic-ladder]) {
 		--_sonic-meter-clip-space: 0px;
 	}
 
-	:state(ladder) > .sonic-meter {
+	.sonic-meter[data-sonic-ladder] {
 		--_sonic-meter-gap: 0px;
 	}
 
@@ -167,11 +167,13 @@
 		position: absolute;
 		inset: auto var(--_sonic-meter-inset) var(--_sonic-meter-inset);
 		block-size: calc(var(--_sonic-meter-segments) - var(--_sonic-meter-gap));
-		mask: var(--_sonic-meter-segment-mask);
-		mask-composite: add;
+		-webkit-mask: var(--_sonic-meter-segment-mask);
+		        mask: var(--_sonic-meter-segment-mask);
+		-webkit-mask-composite: source-over;
+		        mask-composite: add;
 	}
 
-	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+	.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar) {
 		--_sonic-meter-pitch: calc(
 			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
 		);
@@ -249,8 +251,8 @@
 		block-size: auto;
 	}
 
-	[orientation='horizontal']:state(ladder)
-		> .sonic-meter
+	[orientation='horizontal']
+		> .sonic-meter[data-sonic-ladder]
 		> :is(.sonic-meter-segments, .sonic-meter-bar) {
 		--_sonic-meter-segment-mask: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
@@ -260,24 +262,24 @@
 			0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat;
 	}
 
-	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
+	.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 		position: absolute;
 		inset: 0;
 		content: '';
 		background: var(--_sonic-lens-glint) 0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
-	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
+	.sonic-meter[data-sonic-ladder] > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
-				rgb(from var(--_sonic-shine) r g b / calc(0.45 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(45% * var(--_sonic-relief)), transparent),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
-	[orientation='horizontal']:state(ladder)
-		> .sonic-meter
+	[orientation='horizontal']
+		> .sonic-meter[data-sonic-ladder]
 		> :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 		background-repeat: repeat-x;
 		background-position: 0 0;
@@ -321,7 +323,7 @@
 			var(--_sonic-lit-warning) 0 var(--_sonic-meter-clip-at),
 			var(--_sonic-lit-danger) 0
 		);
-		mask:
+		-webkit-mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
 				transparent var(--_sonic-meter-lit-from),
@@ -331,7 +333,18 @@
 				transparent 0
 			),
 			var(--_sonic-meter-segment-mask);
-		mask-composite: intersect, add, add, add, add, add, add;
+		        mask:
+			linear-gradient(
+				var(--_sonic-meter-toward),
+				transparent var(--_sonic-meter-lit-from),
+				#000 0 var(--_sonic-meter-lit),
+				transparent 0 calc(var(--_sonic-meter-peak-hold-edge) - var(--_sonic-meter-pitch)),
+				#000 0 var(--_sonic-meter-peak-hold-edge),
+				transparent 0
+			),
+			var(--_sonic-meter-segment-mask);
+		-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+		        mask-composite: intersect, add, add, add, add, add, add;
 	}
 
 	.sonic-meter-clip {
@@ -355,7 +368,7 @@
 			opacity: var(--_sonic-meter-clipped, 0);
 		}
 
-	:is([value], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
+	:is([value] > .sonic-meter, .sonic-meter[data-sonic-ladder]) > .sonic-meter-clip {
 		display: none;
 	}
 
@@ -389,7 +402,7 @@
 			background: Mark;
 		}
 
-		:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
+		.sonic-meter[data-sonic-ladder] > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
 			display: none;
 		}
 	}

package/dist/styles/number.css

@@ -47,7 +47,8 @@
 		line-height: 1;
 		touch-action: var(--sonic-touch-action, pan-x);
 		cursor: ns-resize;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -67,7 +68,7 @@
 		white-space: nowrap;
 	}
 
-	:state(editing) > .sonic-number > .sonic-number-value {
+	.sonic-number[data-sonic-editing] > .sonic-number-value {
 		visibility: hidden;
 	}
 

package/dist/styles/panel.css

@@ -29,14 +29,14 @@
 		box-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(7% * var(--_sonic-relief)), transparent),
 			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(35% * var(--_sonic-relief)), transparent),
 			calc(2 * sin(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
 				calc(2 * cos(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
 				calc(3 * max(0px, var(--_sonic-panel-depth)))
-				rgb(from var(--_sonic-shade) r g b / calc(0.45 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(45% * var(--_sonic-relief)), transparent);
 	}
 
 	.sonic-panel-title {

package/dist/styles/region.css

@@ -0,0 +1,94 @@
+@layer sonic.material, sonic.control;
+
+@property --_sonic-region-bracket-width {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 1px;
+}
+
+@layer sonic.control {
+	sonic-region {
+		display: none;
+	}
+
+	.sonic-region {
+		--_sonic-region-paint: var(--sonic-region-bracket, var(--_sonic-marker, var(--_sonic-ink)));
+		--_sonic-region-colour: var(--_sonic-region-paint);
+		--_sonic-region-bracket-width: var(
+			--sonic-region-bracket-width,
+			max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+		);
+
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: calc(var(--_sonic-region-from, 0) * 100%);
+		inline-size: calc((var(--_sonic-region-to, 0) - var(--_sonic-region-from, 0)) * 100%);
+		min-inline-size: calc(2 * var(--_sonic-region-bracket-width));
+		pointer-events: none;
+		border-radius: var(--sonic-region-bracket-radius, calc(2 * var(--_sonic-unit)));
+	}
+
+		.sonic-region:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: var(--sonic-focus-outline-offset, -2px);
+		}
+
+			.sonic-region:focus-visible:not([data-sonic-pointer-focus]) {
+				outline: var(--sonic-focus-outline, 2px solid transparent);
+				box-shadow: var(--_sonic-focus-glow);
+			}
+
+	:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+		--_sonic-region-colour: color-mix(in oklab, var(--_sonic-region-paint) 45%, transparent);
+	}
+
+	.sonic-region-bracket {
+		position: absolute;
+		inset: 0;
+		box-sizing: border-box;
+		background: var(--sonic-region-fill, transparent);
+		border: var(--_sonic-region-bracket-width) solid var(--_sonic-region-colour);
+		border-radius: inherit;
+	}
+
+	.sonic-region[data-sonic-clipped~='start'] {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='start'] > .sonic-region-bracket {
+			border-inline-start-width: 0;
+		}
+
+	.sonic-region[data-sonic-clipped~='end'] {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='end'] > .sonic-region-bracket {
+			border-inline-end-width: 0;
+		}
+
+	@media (forced-colors: active) {
+		.sonic-region {
+			--_sonic-region-colour: CanvasText;
+		}
+
+			.sonic-region:focus-visible {
+				outline-offset: 2px;
+			}
+
+				.sonic-region[data-sonic-pointer-focus]:focus-visible {
+					outline-style: none;
+				}
+
+		:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+			--_sonic-region-colour: GrayText;
+		}
+
+		.sonic-region-bracket {
+			forced-color-adjust: none;
+			background: none;
+		}
+	}
+}

package/dist/styles/ring.css

@@ -50,7 +50,8 @@
 					transparent 0
 				);
 			border-radius: 50%;
-			mask: var(--_sonic-arc-mask);
+			-webkit-mask: var(--_sonic-arc-mask);
+			        mask: var(--_sonic-arc-mask);
 		}
 
 		@media (forced-colors: active) {

package/dist/styles/screen.css

@@ -11,14 +11,16 @@
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
 		--_sonic-screen-radius-ratio: var(--sonic-screen-radius-ratio, 0.15);
 		--_sonic-screen-radius-own: calc(var(--_sonic-screen-size) * var(--sonic-screen-radius-ratio));
+		--_sonic-screen-radius: var(
+			--_sonic-screen-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
+		);
 		--_sonic-screen-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
+		--_sonic-screen-inset: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
 		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
 
 		min-block-size: var(--_sonic-screen-size);
-		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
-		border-radius: var(
-			--_sonic-screen-radius-own,
-			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
-		);
+		padding: var(--_sonic-screen-inset);
+		border-radius: var(--_sonic-screen-radius);
 	}
 }

package/dist/styles/segmented.css

@@ -65,7 +65,8 @@
 		block-size: var(--_sonic-segmented-size);
 		padding: var(--_sonic-segmented-gap);
 		touch-action: pan-y;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		background: var(--_sonic-well-floor);
 		border-radius: var(--_sonic-segmented-corner);
 		box-shadow: var(--_sonic-well);
@@ -98,14 +99,14 @@
 		transition: color var(--_sonic-fade-duration) ease-out;
 	}
 
-	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled),
+	.sonic-segmented-option:where([data-sonic-active]):not(:disabled),
 	.sonic-segmented-option[aria-checked='true'] {
 		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
 		--_sonic-keycap-scale: var(--_sonic-segmented-latched-scale);
 		--_sonic-keycap-drop: var(--_sonic-press-drop);
 	}
 
-	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled) {
+	.sonic-segmented-option:where([data-sonic-active]):not(:disabled) {
 		--_sonic-keycap-scale: var(--_sonic-segmented-press-scale);
 	}
 
@@ -127,7 +128,7 @@
 	.sonic-segmented-option:not([aria-checked='true'], :disabled):is(
 			:focus-visible,
 			:active,
-			[data-sonic-pressed]
+			[data-sonic-active]
 		) {
 		color: var(--_sonic-ink-lift);
 	}

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),
@@ -127,7 +128,7 @@
 		}
 
 	:where(:not(:disabled)) > .sonic-slider:focus-visible,
-	:state(dragging) > .sonic-slider {
+	.sonic-slider[data-sonic-dragging] {
 		--_sonic-slider-groove-held: 1;
 	}
 
@@ -159,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(
@@ -213,7 +214,7 @@
 
 		@media (prefers-reduced-motion: reduce) {
 
-	:state(springing) > .sonic-slider {
+	.sonic-slider[data-sonic-springing] {
 			transition: none;
 	}
 		}
@@ -231,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;
 	}
 
@@ -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)),
@@ -374,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)
@@ -407,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);
@@ -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 {
@@ -529,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/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

@@ -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);
@@ -60,7 +66,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 +376,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);
@@ -122,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);
 	}
 
@@ -178,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);
@@ -437,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);
@@ -135,7 +141,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 +181,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);
 	}
 
@@ -184,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;
@@ -123,7 +129,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 +149,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 +172,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 +200,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 +249,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 {