@xsynaptic/sonic-ui 0.24.0 → 0.24.1

package/dist/styles/slider.css

@@ -117,11 +117,14 @@
 			--_sonic-slider-groove-hovered var(--_sonic-fade-duration) ease-out
 				var(--_sonic-slider-groove-hover-delay),
 			--_sonic-slider-groove-held var(--_sonic-fade-duration) ease-out;
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	.sonic-slider {
 			transition: none;
-		}
 	}
+		}
 
 	:where(:not(:disabled)) > .sonic-slider:focus-visible,
 	:state(dragging) > .sonic-slider {
@@ -206,11 +209,14 @@
 				1,
 				1
 			);
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	:state(springing) > .sonic-slider {
 			transition: none;
-		}
 	}
+		}
 
 	[dimmed] > .sonic-slider {
 		--_sonic-slider-lit: var(--_sonic-lit-off);
@@ -269,8 +275,9 @@
 
 	.sonic-slider-scale {
 		font-size: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-font-ratio));
+	}
 
-		& > * {
+		.sonic-slider-scale > * {
 			--_sonic-slider-scale-along: calc(
 				var(--_sonic-slider-cap) / 2 + var(--_sonic-scale-at, 0) * var(--_sonic-slider-travel)
 			);
@@ -280,23 +287,19 @@
 			translate: -50% 0;
 		}
 
-		& > .sonic-scale-tick {
+		.sonic-slider-scale > .sonic-scale-tick {
 			inline-size: var(--_sonic-unit);
 			block-size: calc(var(--_sonic-slider-scale-band) * 0.4);
 		}
-	}
-
-	[orientation='vertical'] > .sonic-slider > .sonic-slider-scale {
-		& > * {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-scale) > * {
 			inset: auto var(--_sonic-slider-scale-edge) var(--_sonic-slider-scale-along) auto;
 			translate: 0 50%;
 		}
 
-		& > .sonic-scale-tick {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-scale) > .sonic-scale-tick {
 			inline-size: calc(var(--_sonic-slider-scale-band) * 0.4);
 			block-size: var(--_sonic-unit);
 		}
-	}
 
 	.sonic-slider-groove {
 		--_sonic-slider-lit-to: var(--_sonic-slider-played, var(--_sonic-slider-value, 0));
@@ -314,12 +317,13 @@
 				transparent
 					calc(
 						var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove-end) * sign(var(--_sonic-slider-lit-low))
+							var(--_sonic-slider-groove-end) * clamp(0, var(--_sonic-slider-lit-low) * 100000, 1)
 					),
 				var(--_sonic-slider-lit) 0
 					calc(
 						var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove-end) * (2 - sign(1 - var(--_sonic-slider-lit-high)))
+							var(--_sonic-slider-groove-end) *
+							(2 - clamp(0, (1 - var(--_sonic-slider-lit-high)) * 100000, 1))
 					),
 				transparent 0
 			),
@@ -401,41 +405,37 @@
 
 		display: block;
 		background: color-mix(in oklab, var(--_sonic-slider-modulation) 50%, transparent);
+	}
 
-		&::before,
-		&::after {
+		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before,:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		:is(:state(modulated) > .sonic-slider > .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;
 		}
 
-		&::after {
+		:is(:state(modulated) > .sonic-slider > .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);
 		}
-	}
-
-	:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation {
-		&::before {
+		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
 			inset: auto 0 var(--_sonic-slider-live-start);
 			inline-size: auto;
 			block-size: var(--_sonic-slider-live-length);
 		}
 
-		&::after {
+		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
 			inset: auto var(--_sonic-slider-tick-overhang) var(--_sonic-slider-tick-start);
 			inline-size: auto;
 			block-size: var(--_sonic-unit);
 		}
-	}
 
 	.sonic-slider-cap {
 		--_sonic-slider-indicator-width: calc(
@@ -464,21 +464,21 @@
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
 		translate: var(--_sonic-slider-offset) 0;
+	}
 
-		&::before,
-		&::after {
+		.sonic-slider-cap::before,.sonic-slider-cap::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		.sonic-slider-cap::before {
 			inset: var(--_sonic-slider-bevel);
 			background: var(--_sonic-face);
 			border-radius: max(0px, var(--_sonic-slider-corner) - var(--_sonic-slider-bevel));
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		&::after {
+		.sonic-slider-cap::after {
 			inset: var(--_sonic-slider-indicator-inset)
 				calc(50% - var(--_sonic-slider-indicator-width) / 2);
 			background: var(--_sonic-slider-indicator);
@@ -486,19 +486,18 @@
 			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)));
 		}
-	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-cap {
 		inset: auto 0 0 var(--_sonic-slider-scale-band);
 		inline-size: auto;
 		block-size: var(--_sonic-slider-cap);
 		translate: 0 calc(-1 * var(--_sonic-slider-offset));
+	}
 
-		&::after {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-cap)::after {
 			inset: calc(50% - var(--_sonic-slider-indicator-width) / 2)
 				var(--_sonic-slider-indicator-inset);
 		}
-	}
 
 	:disabled > .sonic-slider > .sonic-slider-cap::after {
 		background: var(--_sonic-ink-disabled);

package/dist/styles/switch.css

@@ -62,15 +62,18 @@
 		line-height: 1;
 		user-select: none;
 		transition: --_sonic-switch-at 90ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	.sonic-switch {
 			transition: none;
+	}
 		}
 
-		& > * {
+		.sonic-switch > * {
 			grid-area: 1 / 1;
 		}
-	}
 
 	[orientation='horizontal'] > .sonic-switch {
 		--_sonic-switch-along-x: 1;
@@ -99,20 +102,20 @@
 		cursor: pointer;
 		background: transparent;
 		border: 0;
+	}
 
-		&:disabled {
+		.sonic-switch-position:disabled {
 			cursor: default;
 		}
 
-		&:focus-visible {
+		.sonic-switch-position:focus-visible {
 			outline: var(--sonic-focus-outline, 2px solid transparent);
 			outline-offset: var(--sonic-focus-outline-offset, -2px);
 		}
 
-		&:has([data-sonic-momentary]) {
+		.sonic-switch-position:has([data-sonic-momentary]) {
 			touch-action: none;
 		}
-	}
 
 	.sonic-switch[data-sonic-position-count] > .sonic-switch-position::after {
 		inset-block: 0;
@@ -128,71 +131,68 @@
 	.sonic-switch-label {
 		padding: calc(var(--_sonic-switch-size) * 0.12);
 		white-space: nowrap;
+	}
 
-		& svg {
+		.sonic-switch-label svg {
 			display: block;
 			inline-size: 1em;
 			block-size: 1em;
 		}
-	}
 
 	.sonic-switch-position:disabled > .sonic-switch-label {
 		color: var(--sonic-ink-disabled, color-mix(in oklab, currentcolor 30%, transparent));
 	}
-
-	.sonic-switch[data-sonic-position-count] {
-		& > :is(.sonic-switch-bushing, .sonic-switch-bat) {
+		.sonic-switch[data-sonic-position-count] > :is(.sonic-switch-bushing,.sonic-switch-bat) {
 			grid-area: 2 / 1 / -2 / 2;
 		}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count] > .sonic-switch-position {
 			grid-template: subgrid / subgrid;
 		}
-	}
 
 	.sonic-switch[data-sonic-position-count='2'] {
 		grid-template:
 			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto /
 			minmax(var(--_sonic-switch-size), auto);
+	}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position {
 			grid-area: 1 / 1 / 3 / 2;
+		}
 
-			&:last-child {
+			:is(.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position):last-child {
 				grid-area: 3 / 1 / 5 / 2;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='2'] > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-row: 2;
 				}
-			}
-		}
-	}
 
 	.sonic-switch[data-sonic-position-count='3'] {
 		grid-template:
 			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto /
 			minmax(var(--_sonic-switch-size), auto) auto;
+	}
 
-		& > .sonic-switch-position {
+		.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position {
 			grid-area: 1 / 1 / 3 / 2;
+		}
 
-			&:last-child {
+			:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):last-child {
 				grid-area: 4 / 1 / 6 / 2;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-row: 2;
 				}
-			}
 
-			&:nth-child(2 of .sonic-switch-position) {
+			:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):nth-child(2 of .sonic-switch-position) {
 				grid-area: 3 / 1 / 4 / 3;
+			}
 
-				& > .sonic-switch-label {
+				:is(.sonic-switch[data-sonic-position-count='3'] > .sonic-switch-position):nth-child(2 of .sonic-switch-position) > .sonic-switch-label {
 					grid-column: 2;
 				}
-			}
-		}
-	}
 
 	[orientation='horizontal']
 		> .sonic-switch[data-sonic-position-count]
@@ -204,45 +204,45 @@
 		grid-template:
 			minmax(var(--_sonic-switch-size), auto) /
 			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto;
+	}
 
-		& > .sonic-switch-position {
+		:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position {
 			grid-area: 1 / 1 / 2 / 3;
+		}
 
-			&:last-child {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position):last-child {
 				grid-area: 1 / 3 / 2 / 5;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2']) > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-area: 1 / 2;
 				}
-			}
-		}
-	}
 
 	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3'] {
 		grid-template:
 			minmax(var(--_sonic-switch-size), auto) auto /
 			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto;
+	}
 
-		& > .sonic-switch-position {
+		:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position {
 			grid-area: 1 / 1 / 2 / 3;
+		}
 
-			&:last-child {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):last-child {
 				grid-area: 1 / 4 / 2 / 6;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):last-child > .sonic-switch-label {
 					grid-area: 1 / 2;
 				}
-			}
 
-			&:nth-child(2 of .sonic-switch-position) {
+			:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):nth-child(2 of .sonic-switch-position) {
 				grid-area: 1 / 3 / 3 / 4;
+			}
 
-				& > .sonic-switch-label {
+				:is(:is([orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3']) > .sonic-switch-position):nth-child(2 of .sonic-switch-position) > .sonic-switch-label {
 					grid-area: 2 / 1;
 				}
-			}
-		}
-	}
 
 	.sonic-switch-bushing {
 		--_sonic-switch-bushing-shade: color-mix(
@@ -325,9 +325,9 @@
 				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y)) calc(1.5 * var(--_sonic-unit))
 				var(--_sonic-drop-shade)
 		);
+	}
 
-		&::before,
-		&::after {
+		.sonic-switch-bat::before,.sonic-switch-bat::after {
 			position: absolute;
 			inset: 0;
 			margin: auto;
@@ -338,7 +338,7 @@
 			box-shadow: 0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim);
 		}
 
-		&::before {
+		.sonic-switch-bat::before {
 			--_sonic-switch-shaft-top: calc(
 				var(--_sonic-switch-pivot) + var(--_sonic-switch-along-y) *
 					min(0px, var(--_sonic-switch-throw))
@@ -362,7 +362,7 @@
 				calc(-1 * var(--_sonic-switch-shaft-top));
 		}
 
-		&::after {
+		.sonic-switch-bat::after {
 			inline-size: var(--_sonic-switch-ball);
 			block-size: var(--_sonic-switch-ball);
 			background-position: calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2)
@@ -375,7 +375,6 @@
 			translate: calc(var(--_sonic-switch-along-x) * var(--_sonic-switch-throw))
 				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-throw));
 		}
-	}
 
 	.sonic-switch:has(> .sonic-switch-position:focus-visible) {
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
@@ -414,13 +413,12 @@
 
 		.sonic-switch-bat {
 			filter: none;
+		}
 
-			&::before,
-			&::after {
+			.sonic-switch-bat::before,.sonic-switch-bat::after {
 				background: var(--_sonic-switch-metal);
 				box-shadow: none;
 			}
-		}
 
 		.sonic-switch-position:focus-visible {
 			outline-offset: 2px;

package/dist/styles/toggle.css

@@ -222,8 +222,9 @@
 		transition:
 			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
 			box-shadow var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
+	}
 
-		& > .sonic-led {
+		.sonic-toggle-cap > .sonic-led {
 			--_sonic-led-size: var(
 				--sonic-led-size,
 				calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-led-ratio))
@@ -233,10 +234,9 @@
 			box-shadow: inset 0 0 0 max(1px, 0.1 * var(--_sonic-led-size)) var(--_sonic-toggle-led-ring);
 		}
 
-		& > * {
+		.sonic-toggle-cap > * {
 			color: var(--_sonic-toggle-legend);
 		}
-	}
 
 	.sonic-toggle-position {
 		position: relative;
@@ -313,11 +313,11 @@
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-ride))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-ride) + var(--_sonic-toggle-sink));
 		transition: opacity var(--_sonic-fade-duration) ease-out;
+	}
 
-		& > * {
+		.sonic-toggle-legend > * {
 			filter: var(--_sonic-engraving);
 		}
-	}
 
 	:is(.sonic-toggle-cap, .sonic-toggle-legend) > svg {
 		display: block;
@@ -331,25 +331,23 @@
 
 	.sonic-toggle-position[aria-checked='true']:has([data-sonic-lit]) > .sonic-toggle-legend {
 		color: var(--_sonic-toggle-legend-lit);
+	}
 
-		& > * {
+		:is(.sonic-toggle-position[aria-checked='true']:has([data-sonic-lit]) > .sonic-toggle-legend) > * {
 			filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
 		}
-	}
-
-	[legends='outside'] > .sonic-toggle[data-sonic-position-count] {
-		& > :is(.sonic-toggle-well, .sonic-toggle-cap) {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > :is(.sonic-toggle-well,.sonic-toggle-cap) {
 			grid-area: 1 / 2 / 2 / -2;
 		}
 
-		& > .sonic-toggle-position {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position {
 			display: grid;
 			grid-area: 1 / 1 / 2 / 3;
 			grid-template: subgrid / subgrid;
 			place-items: center;
 		}
 
-		& > .sonic-toggle-position > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position > .sonic-toggle-legend {
 			position: static;
 			display: block;
 			inline-size: auto;
@@ -360,86 +358,82 @@
 			pointer-events: auto;
 			opacity: 1;
 			translate: none;
+		}
 
-			& > * {
+			:is(:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position > .sonic-toggle-legend) > * {
 				filter: none;
 			}
-		}
 
-		& > .sonic-toggle-position:disabled > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:disabled > .sonic-toggle-legend {
 			color: var(--sonic-ink-disabled, color-mix(in oklab, currentcolor 30%, transparent));
 		}
 
-		& > .sonic-toggle-position:last-child > .sonic-toggle-legend {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:last-child > .sonic-toggle-legend {
 			grid-column: 2;
 		}
-	}
-
-	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count] {
-		& > :is(.sonic-toggle-well, .sonic-toggle-cap) {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > :is(.sonic-toggle-well,.sonic-toggle-cap) {
 			grid-area: 2 / 1 / -2 / 2;
 		}
 
-		& > .sonic-toggle-position {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position {
 			grid-area: 1 / 1 / 3 / 2;
 		}
 
-		& > .sonic-toggle-position:last-child > .sonic-toggle-legend {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count]) > .sonic-toggle-position:last-child > .sonic-toggle-legend {
 			grid-area: 2 / 1;
 		}
-	}
 
 	[legends='outside'] > .sonic-toggle[data-sonic-position-count='2'] {
 		grid-template: var(--_sonic-toggle-size) / auto repeat(2, var(--_sonic-toggle-slice)) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='2']) > .sonic-toggle-position:last-child {
 			grid-area: 1 / 3 / 2 / 5;
 		}
-	}
 
 	[legends='outside'] > .sonic-toggle[data-sonic-position-count='3'] {
 		grid-template: var(--_sonic-toggle-size) auto / auto repeat(3, var(--_sonic-toggle-slice)) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:last-child {
 			grid-area: 1 / 4 / 2 / 6;
 		}
 
-		& > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
+		:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
 			grid-area: 1 / 3 / 3 / 4;
+		}
 
-			& > .sonic-toggle-legend {
+			:is(:is([legends='outside'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position)) > .sonic-toggle-legend {
 				grid-row: 2;
 			}
-		}
-	}
 
 	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='2'] {
 		grid-template:
 			auto repeat(2, var(--_sonic-toggle-slice)) auto /
 			minmax(var(--_sonic-toggle-size), auto);
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='2']) > .sonic-toggle-position:last-child {
 			grid-area: 3 / 1 / 5 / 2;
 		}
-	}
 
 	[legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3'] {
 		grid-template:
 			auto repeat(3, var(--_sonic-toggle-slice)) auto /
 			minmax(var(--_sonic-toggle-size), auto) auto;
+	}
 
-		& > .sonic-toggle-position:last-child {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:last-child {
 			grid-area: 4 / 1 / 6 / 2;
 		}
 
-		& > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
+		:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position) {
 			grid-area: 3 / 1 / 4 / 3;
+		}
 
-			& > .sonic-toggle-legend {
+			:is(:is([legends='outside'][orientation='vertical'] > .sonic-toggle[data-sonic-position-count='3']) > .sonic-toggle-position:nth-child(2 of .sonic-toggle-position)) > .sonic-toggle-legend {
 				grid-area: 1 / 2;
 			}
-		}
-	}
 
 	@media (prefers-reduced-motion: reduce) {
 		.sonic-toggle,

package/dist/styles/waveform.css

@@ -280,12 +280,12 @@
 
 		.sonic-waveform-label {
 			color: CanvasText;
+		}
 
-			&[data-sonic-dimmed] {
+			.sonic-waveform-label[data-sonic-dimmed] {
 				color: GrayText;
 				filter: none;
 			}
-		}
 
 		.sonic-waveform-playhead {
 			background: CanvasText;

package/dist/styles/wavestrip.css

@@ -178,15 +178,15 @@
 		--_sonic-marker-colour: var(--_sonic-marker, var(--_sonic-marker-default));
 
 		position: absolute;
+	}
 
-		&[data-sonic-dimmed] {
+		[data-sonic-dimmed]:is(.sonic-wavestrip-marker,.sonic-wavestrip-region) {
 			--_sonic-marker-colour: color-mix(
 				in oklab,
 				var(--_sonic-marker, var(--_sonic-marker-default)) 45%,
 				transparent
 			);
 		}
-	}
 
 	.sonic-wavestrip-marker {
 		inset: calc(var(--_sonic-marker-lane, 0) * var(--_sonic-marker-step)) auto auto
@@ -233,11 +233,11 @@
 			--_sonic-marker-colour: CanvasText;
 
 			forced-color-adjust: none;
+		}
 
-			&[data-sonic-dimmed] {
+			[data-sonic-dimmed]:is(.sonic-wavestrip-marker,.sonic-wavestrip-region) {
 				--_sonic-marker-colour: GrayText;
 			}
-		}
 
 		.sonic-wavestrip-marker {
 			background: var(--_sonic-marker-colour);