@xsynaptic/sonic-ui 0.23.0 → 0.24.1

package/dist/styles/material/core.css

@@ -49,15 +49,67 @@
 		--_sonic-cast-x: calc(sin(var(--_sonic-light-tilt)) * var(--_sonic-unit));
 		--_sonic-cast-y: calc(cos(var(--_sonic-light-tilt)) * var(--_sonic-unit));
 		--_sonic-snap: 1px;
+	}
 
 		@media (resolution >= 2dppx) {
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-button,
+		.sonic-led,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-panel,
+		.sonic-ring,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
 			--_sonic-snap: 0.5px;
+	}
 		}
 
 		@media (resolution >= 3dppx) {
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-button,
+		.sonic-led,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-panel,
+		.sonic-ring,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
 			--_sonic-snap: calc(1px / 3);
-		}
 	}
+		}
 
 	:is(
 		.sonic-dial,

package/dist/styles/material/glass.css

@@ -49,8 +49,18 @@
 		);
 
 		/* Glass is forced to Canvas like the page, so only a border shows its edge */
+	}
 		@media (forced-colors: active) {
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-screen,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
 			--_sonic-glass-edge: 1px solid CanvasText;
-		}
 	}
+		}
 }

package/dist/styles/material/keycap.css

@@ -77,8 +77,9 @@
 		scale: var(--_sonic-keycap-scale);
 		translate: 0 var(--_sonic-keycap-shift);
 		transition: var(--_sonic-press-transition);
+	}
 
-		&::before {
+		:is(.sonic-button-cap,.sonic-segmented-cap,.sonic-toggle-cap)::before {
 			position: absolute;
 			inset: var(--_sonic-keycap-bevel);
 			content: '';
@@ -89,8 +90,7 @@
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		& > * {
+		:is(.sonic-button-cap,.sonic-segmented-cap,.sonic-toggle-cap) > * {
 			position: relative;
 		}
-	}
 }

package/dist/styles/material/pane.css

@@ -21,12 +21,16 @@
 		color: var(--_sonic-glass-text);
 		background: var(--_sonic-glass-fill);
 		border: var(--_sonic-glass-edge);
+	}
 
 		@media (forced-colors: active) {
+
+	.sonic-screen {
 			--_sonic-glass-texture: 0;
+	}
 		}
 
-		&::after {
+		.sonic-screen::after {
 			position: absolute;
 			inset: 0;
 			pointer-events: none;
@@ -57,7 +61,7 @@
 
 		@media (forced-colors: none) {
 			/* No var() beside the tile, which would parse the url() again on every style recalculation */
-			&::before {
+			.sonic-screen::before {
 				position: absolute;
 				inset: 0;
 				color: color-mix(in oklab, var(--_sonic-glass-text) 7.5%, transparent);
@@ -72,17 +76,15 @@
 			}
 
 			@media (prefers-reduced-motion: no-preference) {
-				&:is(:focus-visible, :focus-within)::before,
-				&:has(:state(dragging))::before {
+				.sonic-screen:is(:focus-visible,:focus-within)::before,.sonic-screen:has(:state(dragging))::before {
 					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 				}
 
 				@media (hover: hover) {
-					&:hover::before {
+					.sonic-screen:hover::before {
 						animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
 					}
 				}
 			}
 		}
-	}
 }

package/dist/styles/material/readout.css

@@ -66,30 +66,42 @@
 			overlay var(--_sonic-fade-duration) allow-discrete;
 
 		/* Grid only while open; engines keep the flip a closed readout took against a filtered ancestor */
-		&:popover-open {
+	}
+		:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 			display: grid;
 			opacity: 1;
 			translate: 0;
+		}
 
 			@starting-style {
+		:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 				opacity: 0;
 				translate: 0 calc(0.15 * var(--_sonic-readout-size));
-			}
 		}
+			}
 
 		@media (prefers-reduced-motion: reduce) {
-			translate: 0;
 
-			&:popover-open {
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
+			translate: 0;
+	}
 				@starting-style {
+
+			:is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout):popover-open {
 					translate: 0;
-				}
 			}
+				}
 		}
 
-		:state(editing) > :is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) > & {
+		:state(editing) > :is(.sonic-dial,.sonic-slider,.sonic-waveform,.sonic-wavestrip) > :is(.sonic-dial-readout,.sonic-envelope-readout,.sonic-slider-readout,.sonic-waveform-readout,.sonic-wavestrip-readout,.sonic-xy-readout) {
 			pointer-events: auto;
 			cursor: text;
 		}
-	}
 }

package/dist/styles/material/scale.css

@@ -5,21 +5,21 @@
 		line-height: 1;
 		white-space: nowrap;
 		pointer-events: none;
+	}
 
-		& > * {
+		:is(.sonic-dial-scale,.sonic-slider-scale) > * {
 			position: absolute;
 		}
 
-		& svg {
+		:is(.sonic-dial-scale,.sonic-slider-scale) svg {
 			display: block;
 			inline-size: 1em;
 			block-size: 1em;
 		}
 
-		& > .sonic-scale-tick {
+		:is(.sonic-dial-scale,.sonic-slider-scale) > .sonic-scale-tick {
 			background: var(--sonic-scale, var(--_sonic-etch));
 		}
-	}
 
 	@media (forced-colors: active) {
 		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {

package/dist/styles/material/value.css

@@ -23,21 +23,30 @@
 		text-align: center;
 		background: transparent;
 		border: 0;
+	}
 
-		&::selection {
+		:is(.sonic-dial-entry,.sonic-number-entry,.sonic-slider-entry,.sonic-waveform-entry,.sonic-wavestrip-entry)::selection {
 			color: var(--sonic-entry-selection, var(--_sonic-lit));
 			background: transparent;
 		}
 
-		&:focus-visible {
+		:is(.sonic-dial-entry,.sonic-number-entry,.sonic-slider-entry,.sonic-waveform-entry,.sonic-wavestrip-entry):focus-visible {
 			outline: 2px solid transparent;
 			outline-offset: -2px;
 		}
 
 		@supports (field-sizing: content) {
+
+	:is(
+		.sonic-dial-entry,
+		.sonic-number-entry,
+		.sonic-slider-entry,
+		.sonic-waveform-entry,
+		.sonic-wavestrip-entry
+	) {
 			inline-size: auto;
 			min-inline-size: 3ch;
 			field-sizing: content;
-		}
 	}
+		}
 }

package/dist/styles/meter.css

@@ -66,8 +66,9 @@
 		container-type: size;
 		background: var(--_sonic-lens-bezel);
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
+	}
 
-		&::after {
+		.sonic-meter::after {
 			position: absolute;
 			inset: 0;
 			pointer-events: none;
@@ -75,7 +76,6 @@
 			border-radius: inherit;
 			box-shadow: var(--_sonic-groove);
 		}
-	}
 
 	[orientation='horizontal'] > .sonic-meter {
 		--_sonic-meter-toward: to right;
@@ -340,8 +340,9 @@
 		block-size: var(--_sonic-meter-lens);
 		background: var(--_sonic-lens);
 		border-radius: 50%;
+	}
 
-		&::after {
+		.sonic-meter-clip::after {
 			position: absolute;
 			inset: 0;
 			content: '';
@@ -353,7 +354,6 @@
 			border-radius: inherit;
 			opacity: var(--_sonic-meter-clipped, 0);
 		}
-	}
 
 	:is([value], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
 		display: none;
@@ -370,12 +370,12 @@
 		.sonic-meter {
 			forced-color-adjust: none;
 			background: Canvas;
+		}
 
-			&::after {
+			.sonic-meter::after {
 				border: 1px solid CanvasText;
 				box-shadow: none;
 			}
-		}
 
 		:is(.sonic-meter-segments, .sonic-meter-clip) {
 			background: var(--_sonic-unlit);

package/dist/styles/panel.css

@@ -45,15 +45,14 @@
 		align-items: center;
 		margin: 0;
 		white-space: nowrap;
+	}
 
-		&::before,
-		&::after {
+		.sonic-panel-title::before,.sonic-panel-title::after {
 			flex: 1;
 			min-inline-size: 1em;
 			content: '';
 			border-block-start: 1px solid var(--_sonic-panel-line);
 		}
-	}
 
 	.sonic-panel-rule {
 		align-self: stretch;

package/dist/styles/ring.css

@@ -28,8 +28,9 @@
 			var(--_sonic-ring-size) * (var(--_sonic-ring-ratio) + var(--_sonic-ring-gap-ratio))
 		);
 		border-radius: 50%;
+	}
 
-		&::before {
+		.sonic-ring::before {
 			--_sonic-arc-width: calc(var(--_sonic-ring-size) * var(--_sonic-ring-ratio));
 			--_sonic-arc-inset: 0px;
 
@@ -53,13 +54,12 @@
 		}
 
 		@media (forced-colors: active) {
-			&::before {
+			.sonic-ring::before {
 				--_sonic-arc-shade: none;
 
 				forced-color-adjust: none;
 			}
 		}
-	}
 
 	.sonic-ring > :not(:defined),
 	.sonic-ring > * > .sonic-button {

package/dist/styles/segmented.css

@@ -166,16 +166,16 @@
 
 		position: relative;
 		padding-inline: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-padding-ratio));
+	}
 
-		& > * {
+		.sonic-segmented-cap > * {
 			filter: var(--_sonic-engraving);
 		}
 
-		& > svg {
+		.sonic-segmented-cap > svg {
 			inline-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
 			block-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
 		}
-	}
 
 	.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
 		filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
@@ -190,14 +190,14 @@
 			--_sonic-skirt: var(--_sonic-lit);
 			--_sonic-face: var(--_sonic-lit);
 			--_sonic-ink: HighlightText;
+		}
 
-			&:disabled {
+			.sonic-segmented-option[aria-checked='true']:disabled {
 				--_sonic-ink: ButtonFace;
 			}
 
-			& .sonic-segmented-cap > * {
+			.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
 				filter: none;
 			}
-		}
 	}
 }

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