@xsynaptic/sonic-ui 0.23.0 → 0.24.1

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

@@ -54,6 +54,24 @@
 	initial-value: 1;
 }
 
+@property --_sonic-waveform-band-normalize {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 1;
+}
+
+@property --_sonic-waveform-band-contrast {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 1;
+}
+
+@property --_sonic-waveform-band-tilt {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0;
+}
+
 @property --_sonic-waveform-grid {
 	syntax: '<color>';
 	inherits: true;
@@ -122,6 +140,9 @@
 		--_sonic-waveform-band-opacity: calc(
 			var(--sonic-waveform-band-opacity, 1) * var(--_sonic-waveform-band-dim, 1)
 		);
+		--_sonic-waveform-band-normalize: var(--sonic-waveform-band-normalize, 1);
+		--_sonic-waveform-band-contrast: var(--sonic-waveform-band-contrast, 1);
+		--_sonic-waveform-band-tilt: var(--sonic-waveform-band-tilt, 0);
 		--_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
 		--_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
 		--_sonic-waveform-placeholder: var(--sonic-waveform-placeholder, var(--_sonic-etch));
@@ -259,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);

package/dist/styles/xy.css

@@ -64,14 +64,14 @@
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
+	}
 
-		&::before,
-		&::after {
+		.sonic-xy-field::before,.sonic-xy-field::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		.sonic-xy-field::before {
 			inset: auto 0
 				calc(
 					var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y) +
@@ -96,7 +96,7 @@
 				var(--_sonic-unlit);
 		}
 
-		&::after {
+		.sonic-xy-field::after {
 			inset: 0 auto 0
 				calc(
 					var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x) +
@@ -120,7 +120,6 @@
 				),
 				var(--_sonic-unlit);
 		}
-	}
 
 	:is(.sonic-xy-bracket, .sonic-xy-puck) {
 		position: absolute;
@@ -146,8 +145,9 @@
 		cursor: var(--_sonic-xy-cursor);
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
 		transition: filter var(--_sonic-fade-duration) ease-out;
+	}
 
-		&::before {
+		.sonic-xy-puck::before {
 			position: absolute;
 			inset: 25%;
 			pointer-events: none;
@@ -162,7 +162,6 @@
 				border-color var(--_sonic-fade-duration) ease-out,
 				outline-color var(--_sonic-fade-duration) ease-out;
 		}
-	}
 
 	@media (hover: hover) {
 		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
@@ -208,10 +207,10 @@
 			forced-color-adjust: none;
 
 			/* The axis's own outline is the focus here */
-			&::before {
+		}
+			.sonic-xy-puck::before {
 				outline-style: none;
 			}
-		}
 
 		:state(dragging) > .sonic-xy > .sonic-xy-puck {
 			--_sonic-xy-puck-fill: Canvas;
@@ -224,10 +223,10 @@
 
 		.sonic-xy-axis:focus-visible {
 			outline-offset: 2px;
+		}
 
-			&[data-sonic-pointer-focus] {
+			.sonic-xy-axis[data-sonic-pointer-focus]:focus-visible {
 				outline-style: none;
 			}
-		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -81,7 +81,7 @@
     "typescript": "^6.0.3"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node ../../scripts/lower-sheets.ts",
     "check-types": "tsc --noEmit"
   }
 }