@xsynaptic/sonic-ui 0.24.0 → 0.24.1

package/dist/styles/dial.css

@@ -148,8 +148,9 @@
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
 		line-height: 1cap;
+	}
 
-		& > * {
+		.sonic-dial-scale > * {
 			--_sonic-dial-scale-angle: calc(
 				var(--_sonic-dial-start) + var(--_sonic-scale-at, 0) * var(--_sonic-dial-sweep)
 			);
@@ -165,7 +166,7 @@
 				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
 		}
 
-		& > .sonic-scale-tick {
+		.sonic-dial-scale > .sonic-scale-tick {
 			--_sonic-dial-tick-length: calc(var(--_sonic-dial-scale-band) * 0.4);
 
 			inline-size: var(--_sonic-unit);
@@ -174,7 +175,6 @@
 			translate: calc(-50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-tick-length) / 2)
 				calc(-50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-tick-length) / 2);
 		}
-	}
 
 	:is(.sonic-dial-ring, .sonic-dial-modulation) {
 		--_sonic-arc-width: var(--_sonic-dial-ring-width);
@@ -254,16 +254,16 @@
 		display: block;
 		background: none;
 		mask: none;
+	}
 
-		&::before,
-		&::after {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before,:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
 			position: absolute;
 			inset: 0;
 			content: '';
 			border-radius: 50%;
 		}
 
-		&::before {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before {
 			background:
 				conic-gradient(
 					from var(--_sonic-dial-start),
@@ -282,7 +282,7 @@
 			mask: var(--_sonic-arc-mask);
 		}
 
-		&::after {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
 			background: linear-gradient(
 					var(--_sonic-dial-modulation-tick),
 					var(--_sonic-dial-modulation-tick)
@@ -290,7 +290,6 @@
 				50% 0 / var(--_sonic-unit) var(--_sonic-dial-ring-width) no-repeat;
 			rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-modulation-value-angle));
 		}
-	}
 
 	.sonic-dial-cap {
 		position: absolute;
@@ -302,15 +301,15 @@
 				var(--_sonic-drop-shade),
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
+	}
 
-		&::before,
-		&::after {
+		.sonic-dial-cap::before,.sonic-dial-cap::after {
 			position: absolute;
 			content: '';
 			border-radius: 50%;
 		}
 
-		&::before {
+		.sonic-dial-cap::before {
 			inset: 0;
 			background: repeating-conic-gradient(
 				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))) 0,
@@ -322,7 +321,7 @@
 			rotate: var(--_sonic-dial-angle);
 		}
 
-		&::after {
+		.sonic-dial-cap::after {
 			inset: 16%;
 			background:
 				conic-gradient(
@@ -343,7 +342,6 @@
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
 		}
-	}
 
 	.sonic-dial-indicator {
 		position: absolute;
@@ -351,8 +349,9 @@
 		pointer-events: none;
 		border-radius: 50%;
 		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
+	}
 
-		&::before {
+		.sonic-dial-indicator::before {
 			--_sonic-dial-indicator-width: calc(
 				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
 			);
@@ -380,7 +379,6 @@
 			);
 			translate: -50% 0;
 		}
-	}
 
 	:disabled > .sonic-dial > .sonic-dial-indicator::before {
 		background: var(--_sonic-ink-disabled);

package/dist/styles/envelope.css

@@ -65,13 +65,13 @@
 		inset: 0;
 		overflow: clip;
 		pointer-events: none;
+	}
 
-		&[data-sonic-part='curve'] {
+		.sonic-envelope-bracket[data-sonic-part='curve'] {
 			--_sonic-point-size: calc(
 				2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio)
 			);
 		}
-	}
 
 	.sonic-envelope-fill {
 		fill: color-mix(in oklab, var(--_sonic-lit) 18%, transparent);

package/dist/styles/led.css

@@ -19,8 +19,9 @@
 		block-size: var(--_sonic-led-size);
 		background: var(--_sonic-lens-bezel);
 		border-radius: 50%;
+	}
 
-		&::after {
+		.sonic-led::after {
 			position: absolute;
 			inset: calc(var(--_sonic-led-size) * (1 - var(--_sonic-led-lens-ratio)) / 2);
 			content: '';
@@ -29,19 +30,20 @@
 		}
 
 		@media (forced-colors: active) {
+	.sonic-led {
 			--_sonic-lit-ok: Mark;
 			--_sonic-lit-warning: Highlight;
 			--_sonic-lit-danger: Mark;
 
 			forced-color-adjust: none;
 			background: none;
+	}
 
-			&::after {
+			.sonic-led::after {
 				background: GrayText;
 				box-shadow: 0 0 0 1px CanvasText;
 			}
 		}
-	}
 
 	.sonic-led[data-sonic-lit='ok'] {
 		--_sonic-lit: var(--_sonic-lit-ok);
@@ -56,23 +58,18 @@
 	}
 
 	/* Before the lit rule, which a latched button's LED also matches */
-	.sonic-led:is(
-		[data-sonic-lit='idle'],
-		:where(:is([armed], [busy]) > .sonic-button:not(:disabled, [aria-disabled='true'])) *
-	) {
-		&::after {
+		.sonic-led:is([data-sonic-lit='idle'],:where(:is([armed],[busy]) > .sonic-button:not(:disabled,[aria-disabled='true'])) *)::after {
 			background:
 				var(--_sonic-lens-glint),
 				color-mix(in oklab, var(--_sonic-lit) 35%, var(--_sonic-lens-glass));
 		}
 
 		@media (forced-colors: active) {
-			&::after {
+			.sonic-led:is([data-sonic-lit='idle'],:where(:is([armed],[busy]) > .sonic-button:not(:disabled,[aria-disabled='true'])) *)::after {
 				background: GrayText;
 				box-shadow: 0 0 0 1px var(--_sonic-lit);
 			}
 		}
-	}
 
 	.sonic-led:is(
 		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
@@ -96,8 +93,10 @@
 				transparent
 			),
 			var(--_sonic-lens-bezel);
+	}
 
-		&::after {
+		.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
 			background: radial-gradient(
 				closest-side,
 				color-mix(
@@ -110,14 +109,30 @@
 		}
 
 		@media (forced-colors: active) {
+
+	.sonic-led:is(
+		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
+		:where(
+				.sonic-button:is([aria-pressed='true'], [aria-expanded='true']),
+				[momentary]:state(pressed) > .sonic-button,
+				.sonic-segmented-option[aria-checked='true'],
+				.sonic-toggle:has(
+					> [role='switch'][aria-checked='true'],
+					> [aria-checked='true'] [data-sonic-lit]
+				)
+			)
+			*,
+		:where(:state(at-origin):not(:disabled) > .sonic-led)
+	) {
 			background: none;
+	}
 
-			&::after {
+			.sonic-led:is([data-sonic-lit]:where(:not([data-sonic-lit='idle'])),:where(.sonic-button:is([aria-pressed='true'],[aria-expanded='true']),[momentary]:state(pressed) > .sonic-button,.sonic-segmented-option[aria-checked='true'],.sonic-toggle:has( > [role='switch'][aria-checked='true'], > [aria-checked='true'] [data-sonic-lit]))
+			*,:where(:state(at-origin):not(:disabled) > .sonic-led))::after {
 				background: var(--_sonic-lit);
 				box-shadow: 0 0 0 1px CanvasText;
 			}
 		}
-	}
 
 	:is(.sonic-button:is(:disabled, [aria-disabled='true']), .sonic-segmented-option:disabled)
 		.sonic-led {

package/dist/styles/material/cap.css

@@ -97,13 +97,13 @@
 
 	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position, .sonic-toggle-position) {
 		--_sonic-target-outset: min(0px, calc((100% - var(--sonic-target-size, 100%)) / 2));
+	}
 
-		&::after {
+		:is(.sonic-button,.sonic-segmented-option,.sonic-switch-position,.sonic-toggle-position)::after {
 			position: absolute;
 			inset: var(--_sonic-target-outset);
 			content: '';
 		}
-	}
 
 	@media not (forced-colors: active) {
 		:is(
@@ -146,12 +146,12 @@
 	):focus-visible {
 		outline: 2px solid transparent;
 		outline-offset: var(--sonic-focus-outline-offset, -2px);
+	}
 
-		&:not([data-sonic-pointer-focus]) {
+		:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip,.sonic-xy-axis):focus-visible:not([data-sonic-pointer-focus]) {
 			--_sonic-cap: var(--_sonic-cap-hover);
 			--_sonic-focus-shadow: var(--_sonic-focus-glow);
 		}
-	}
 
 	:is(
 			.sonic-number,
@@ -229,11 +229,11 @@
 			.sonic-wavestrip
 		):focus-visible {
 			outline-offset: 2px;
+		}
 
-			&[data-sonic-pointer-focus] {
+			[data-sonic-pointer-focus]:is(.sonic-dial,.sonic-button,.sonic-number,.sonic-segmented-option,.sonic-slider,.sonic-waveform,.sonic-wavestrip):focus-visible {
 				outline-style: none;
 			}
-		}
 
 		:is(
 			.sonic-dial-cap,

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