@xsynaptic/sonic-ui 0.6.1 → 0.8.0

package/dist/styles/material.css

@@ -33,6 +33,7 @@
 		.sonic-segmented,
 		.sonic-slider,
 		.sonic-slider-readout,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-waveform-readout,
 		.sonic-wavestrip,
@@ -58,6 +59,7 @@
 		.sonic-ring,
 		.sonic-segmented-option,
 		.sonic-slider,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -92,6 +94,9 @@
 		);
 		--_sonic-lens-glass: var(--sonic-lens, color-mix(in oklab, var(--_sonic-unlit) 60%, #000));
 		--_sonic-lens: var(--_sonic-lens-glint), var(--_sonic-lens-glass);
+	}
+
+	:is(.sonic-led, .sonic-meter, .sonic-spectrum) {
 		--_sonic-hot: var(--sonic-hot, oklch(70.5% 0.187 48deg));
 		--_sonic-clip: var(--sonic-clip, oklch(63.7% 0.208 25deg));
 	}
@@ -176,6 +181,7 @@
 		.sonic-number,
 		.sonic-screen,
 		.sonic-slider-readout,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-waveform-readout,
 		.sonic-wavestrip,
@@ -227,7 +233,15 @@
 	}
 
 	/* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
-	:is(.sonic-envelope, .sonic-number, .sonic-screen, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+	:is(
+		.sonic-envelope,
+		.sonic-number,
+		.sonic-screen,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
 		--_sonic-glass-depth: var(--sonic-glass-depth, var(--_sonic-relief));
 		--_sonic-glass-texture: var(--sonic-glass-texture, var(--_sonic-relief));
 		--_sonic-glass-pitch: max(2px, round(2 * var(--_sonic-unit), 1px));
@@ -266,7 +280,7 @@
 				),
 				repeating-linear-gradient(
 					to bottom,
-					rgb(0 0 0 / calc(0.04 * var(--_sonic-glass-texture))) 0
+					rgb(0 0 0 / calc(0.025 * var(--_sonic-glass-texture))) 0
 						calc(var(--_sonic-glass-pitch) / 2),
 					transparent 0 var(--_sonic-glass-pitch)
 				);
@@ -313,6 +327,7 @@
 		.sonic-number,
 		.sonic-screen,
 		.sonic-segmented,
+		.sonic-spectrum,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -514,7 +529,7 @@
 		font-size: calc(0.5 * var(--_sonic-readout-size));
 		font-variant-numeric: tabular-nums;
 		line-height: 1;
-		color: var(--_sonic-glass-text);
+		color: var(--sonic-readout-text, var(--_sonic-glass-text));
 		white-space: nowrap;
 		pointer-events: none;
 		cursor: default;

package/dist/styles/meter.css

@@ -5,7 +5,7 @@
 }
 
 @property --_sonic-meter-length {
-	syntax: '<length>';
+	syntax: '<length-percentage>';
 	inherits: true;
 	initial-value: 128px;
 }
@@ -55,17 +55,12 @@
 		--_sonic-meter-segment-radius: calc(
 			var(--_sonic-meter-segment) * var(--_sonic-meter-segment-radius-ratio)
 		);
-		--_sonic-meter-segments: round(
-			down,
-			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
-				var(--_sonic-meter-gap),
-			var(--_sonic-meter-pitch)
-		);
 
 		position: relative;
 		flex-shrink: 0;
 		inline-size: var(--_sonic-meter-size);
 		block-size: var(--_sonic-meter-length);
+		container-type: size;
 		background: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
 
@@ -91,21 +86,18 @@
 	}
 
 	:state(ladder) > .sonic-meter {
-		--_sonic-meter-pitch: calc(
-			(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset)) / var(--_sonic-meter-count, 1)
-		);
 		--_sonic-meter-gap: 0px;
-		--_sonic-meter-segments: calc(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset));
-		--_sonic-meter-ladder-radius: calc(
-			min(
-					var(--_sonic-meter-lens),
-					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
-				) /
-				2
-		);
 	}
 
+	/* A percentage length means the parent only on the meter's own box; its parts measure the box */
 	:is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-length: 100cqb;
+		--_sonic-meter-segments: round(
+			down,
+			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
+				var(--_sonic-meter-gap),
+			var(--_sonic-meter-pitch)
+		);
 		--_sonic-meter-span: calc(var(--_sonic-meter-max, 0) - var(--_sonic-meter-min, -60));
 		--_sonic-meter-hot-at: round(
 			clamp(
@@ -177,6 +169,17 @@
 	}
 
 	:state(ladder) > .sonic-meter > :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)
+		);
+		--_sonic-meter-segments: calc(var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset));
+		--_sonic-meter-ladder-radius: calc(
+			min(
+					var(--_sonic-meter-lens),
+					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
+				) /
+				2
+		);
 		--_sonic-meter-hot-at: calc(var(--_sonic-meter-hot-segments, 0) * var(--_sonic-meter-pitch));
 		--_sonic-meter-clip-at: calc(var(--_sonic-meter-clip-segments, 0) * var(--_sonic-meter-pitch));
 		--_sonic-meter-segment-mask: radial-gradient(
@@ -193,6 +196,7 @@
 	}
 
 	[orientation='horizontal'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-length: 100cqi;
 		--_sonic-meter-segment-mask:
 			linear-gradient(to right, #000 var(--_sonic-meter-segment), transparent 0) 0
 				var(--_sonic-meter-segment-radius) / var(--_sonic-meter-pitch)

package/dist/styles/slider.css

@@ -10,6 +10,12 @@
 	initial-value: 128px;
 }
 
+@property --_sonic-slider-groove-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.15;
+}
+
 @property --_sonic-slider-value {
 	syntax: '<number>';
 	inherits: true;
@@ -56,6 +62,7 @@
 			--sonic-buffered,
 			color-mix(in oklab, var(--_sonic-ink) 18%, var(--_sonic-unlit))
 		);
+		--_sonic-slider-scrub: var(--sonic-scrub, color-mix(in oklab, var(--_sonic-lit) 55%, #fff));
 		--_sonic-slider-toward: to right;
 		--_sonic-slider-across: to bottom;
 		--_sonic-slider-cursor: ew-resize;
@@ -69,9 +76,32 @@
 		inline-size: var(--_sonic-slider-length);
 		block-size: var(--_sonic-slider-size);
 		container-type: size;
-		touch-action: pan-y;
+		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
 		user-select: none;
+		transition: --_sonic-slider-groove-ratio 120ms ease-out;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
+	:where(:not(:disabled)) > .sonic-slider:focus-visible,
+	:state(dragging) > .sonic-slider {
+		--_sonic-slider-groove-ratio: var(
+			--sonic-slider-groove-hover-ratio,
+			var(--sonic-slider-groove-ratio, 0.15)
+		);
+	}
+
+	@media (hover: hover) {
+		/* fallow-ignore-next-line code-duplication -- `:hover` and `:focus-visible` split by `(hover: hover)` */
+		:where(:not(:disabled)) > .sonic-slider:hover {
+			--_sonic-slider-groove-ratio: var(
+				--sonic-slider-groove-hover-ratio,
+				var(--sonic-slider-groove-ratio, 0.15)
+			);
+		}
 	}
 
 	[orientation='vertical'] > .sonic-slider {
@@ -82,7 +112,7 @@
 
 		inline-size: var(--_sonic-slider-size);
 		block-size: var(--_sonic-slider-length);
-		touch-action: pan-x;
+		touch-action: var(--sonic-touch-action, pan-x);
 	}
 
 	:state(dragging) > .sonic-slider {
@@ -225,14 +255,16 @@
 	}
 
 	.sonic-slider-groove {
-		--_sonic-slider-lit-low: min(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
-		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-value, 0));
+		--_sonic-slider-lit-to: var(--_sonic-slider-played, var(--_sonic-slider-value, 0));
+		--_sonic-slider-lit-low: min(var(--_sonic-slider-origin, 0), var(--_sonic-slider-lit-to));
+		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-lit-to));
 
 		position: absolute;
 		inset: calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2)
 			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
 			calc(50% - var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2);
 		background:
+			var(--_sonic-slider-scrub-region, none),
 			linear-gradient(
 				var(--_sonic-slider-toward),
 				transparent
@@ -430,7 +462,11 @@
 
 	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
 	:not([orientation='vertical']) > .sonic-slider > .sonic-slider-readout {
-		--_sonic-slider-readout-at: calc(var(--_sonic-slider-cap) / 2 + var(--_sonic-slider-offset));
+		--_sonic-slider-readout-at: calc(
+			var(--_sonic-slider-cap) / 2 +
+				var(--_sonic-slider-readout-value, var(--_sonic-slider-value, 0)) *
+				var(--_sonic-slider-travel)
+		);
 
 		inset-inline: var(--_sonic-slider-readout-at) calc(100cqi - var(--_sonic-slider-readout-at));
 		justify-self: center;
@@ -454,6 +490,7 @@
 
 		.sonic-slider {
 			--_sonic-slider-buffered: color-mix(in srgb, CanvasText 50%, GrayText);
+			--_sonic-slider-scrub: CanvasText;
 		}
 
 		.sonic-slider-groove {

package/dist/styles/spectrum.css

@@ -0,0 +1,105 @@
+@property --_sonic-spectrum-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 96px;
+}
+
+@property --_sonic-spectrum-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 320px;
+}
+
+@property --_sonic-spectrum-lit {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-spectrum-hot {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(250 115 20);
+}
+
+@property --_sonic-spectrum-clip {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(240 70 70);
+}
+
+@property --_sonic-spectrum-grid {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-spectrum-hot-from {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: -12;
+}
+
+@property --_sonic-spectrum-clip-from {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: -3;
+}
+
+@layer sonic {
+	:is(sonic-spectrum, .sonic-spectrum) {
+		--_sonic-spectrum-size: var(--sonic-spectrum-size, 6rem);
+		--_sonic-spectrum-length: var(--sonic-spectrum-length, 20rem);
+	}
+
+	:has(> .sonic-spectrum):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-spectrum:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-spectrum-length);
+		block-size: var(--_sonic-spectrum-size);
+	}
+
+	.sonic-spectrum {
+		--_sonic-unit: calc(var(--_sonic-spectrum-size) / 48);
+		--_sonic-spectrum-lit: var(--_sonic-lit);
+		--_sonic-spectrum-hot: var(--_sonic-hot);
+		--_sonic-spectrum-clip: var(--_sonic-clip);
+		--_sonic-spectrum-grid: color-mix(in oklab, var(--_sonic-glass-text) 20%, transparent);
+		--_sonic-spectrum-hot-from: var(--sonic-spectrum-hot-from, -12);
+		--_sonic-spectrum-clip-from: var(--sonic-spectrum-clip-from, -3);
+
+		inline-size: var(--_sonic-spectrum-length);
+		block-size: var(--_sonic-spectrum-size);
+		padding: calc(var(--_sonic-spectrum-size) * var(--sonic-spectrum-inset-ratio, 0.06));
+
+		/* The canvas's backing size would otherwise feed an intrinsically sized parent */
+		contain: size;
+
+		--_sonic-glass-radius: calc(
+			var(--_sonic-spectrum-size) * var(--sonic-spectrum-radius-ratio, 0.08)
+		);
+
+		border-radius: var(--_sonic-glass-radius);
+	}
+
+	.sonic-spectrum-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */
+	@media (forced-colors: active) {
+		.sonic-spectrum {
+			--_sonic-spectrum-lit: rgb(from CanvasText r g b / 100%);
+			--_sonic-spectrum-hot: rgb(from Highlight r g b / 100%);
+			--_sonic-spectrum-clip: rgb(from Highlight r g b / 100%);
+			--_sonic-spectrum-grid: rgb(from GrayText r g b / 100%);
+		}
+	}
+}

package/dist/styles/waveform.css

@@ -34,12 +34,24 @@
 	initial-value: rgb(96 96 104);
 }
 
-@property --_sonic-waveform-hatch {
+@property --_sonic-waveform-ends {
 	syntax: '<color>';
 	inherits: true;
 	initial-value: rgb(96 96 104);
 }
 
+@property --_sonic-waveform-placeholder {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-waveform-label-fade {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.25;
+}
+
 @property --_sonic-waveform-marker {
 	syntax: '<color>';
 	inherits: true;
@@ -69,18 +81,21 @@
 			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
 		);
 		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
-		--_sonic-waveform-line: max(1px, var(--_sonic-unit));
+		--_sonic-waveform-line: var(--sonic-waveform-playhead-width, max(1px, var(--_sonic-unit)));
 		--_sonic-waveform-lit: var(--_sonic-lit);
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
 		--_sonic-waveform-wave-edge: var(
 			--sonic-waveform-edge,
-			color-mix(in oklab, var(--_sonic-waveform-lit) 45%, #000)
+			color-mix(in oklab, var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)), #000)
 		);
-		--_sonic-waveform-grid: var(--_sonic-etch);
-		--_sonic-waveform-hatch: var(--_sonic-etch);
+		--_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));
 		--_sonic-waveform-marker: var(--sonic-marker, var(--_sonic-ink));
+		--_sonic-waveform-label: var(--sonic-waveform-label, var(--_sonic-waveform-marker));
+		--_sonic-waveform-label-fade: var(--sonic-waveform-label-fade-ratio, 0.25);
 		--_sonic-waveform-label-inset: calc(
-			var(--_sonic-waveform-size) * var(--sonic-waveform-label-inset-ratio, 0.08)
+			var(--_sonic-waveform-size) * var(--sonic-waveform-label-inset-ratio, 0.04)
 		);
 
 		inline-size: var(--_sonic-waveform-length);
@@ -90,7 +105,7 @@
 
 		/* A label riding in from the far side would otherwise widen the page */
 		overflow: hidden;
-		touch-action: pan-y;
+		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: grab;
 
 		--_sonic-glass-radius: calc(
@@ -101,6 +116,11 @@
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
+	[fill] > .sonic-waveform,
+	sonic-waveform[fill]:not(:defined, [hidden]) {
+		block-size: 100%;
+	}
+
 	:state(dragging) > .sonic-waveform {
 		cursor: grabbing;
 	}
@@ -131,31 +151,32 @@
 	}
 
 	.sonic-waveform-playhead {
-		background: var(--_sonic-ink);
+		background: var(--sonic-waveform-playhead, var(--_sonic-ink));
 	}
 
 	.sonic-waveform-ghost {
-		background: var(--_sonic-etch);
+		background: var(--sonic-waveform-ghost, var(--_sonic-etch));
 	}
 
 	.sonic-waveform-label {
 		position: absolute;
 		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-inset));
 		inset-inline-start: var(--_sonic-waveform-inset);
+		padding: 0.2em 0.35em;
+		margin: -0.2em -0.35em;
+		font-family: var(--sonic-waveform-label-font, inherit);
 		font-size: calc(var(--_sonic-waveform-size) * var(--sonic-waveform-label-font-ratio, 0.13));
 		line-height: 1;
-		color: var(--_sonic-marker, var(--_sonic-waveform-marker));
+		color: var(--_sonic-marker, var(--_sonic-waveform-label));
 		white-space: nowrap;
 		text-shadow: var(--sonic-waveform-label-shadow, none);
 		pointer-events: none;
+		background: var(--sonic-waveform-label-scrim, none);
+		border-radius: 0.2em;
 	}
 
 	.sonic-waveform-label[data-sonic-dimmed] {
-		color: color-mix(
-			in oklab,
-			var(--_sonic-marker, var(--_sonic-waveform-marker)) 50%,
-			transparent
-		);
+		color: color-mix(in oklab, var(--_sonic-marker, var(--_sonic-waveform-label)) 50%, transparent);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
@@ -164,7 +185,8 @@
 			--_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
 			--_sonic-waveform-wave-edge: rgb(from CanvasText r g b / 100%);
 			--_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
-			--_sonic-waveform-hatch: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-ends: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-placeholder: rgb(from GrayText r g b / 100%);
 			--_sonic-waveform-marker: rgb(from CanvasText r g b / 100%);
 		}
 

package/dist/styles/wavestrip.css

@@ -28,6 +28,12 @@
 	initial-value: 0.5;
 }
 
+@property --_sonic-wavestrip-groove-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.15;
+}
+
 @property --_sonic-wavestrip-wave {
 	syntax: '<color>';
 	inherits: true;
@@ -93,6 +99,7 @@
 		--_sonic-wavestrip-bar-pitch: var(--sonic-wavestrip-bar-pitch, 3px);
 		--_sonic-wavestrip-bar-gap-ratio: var(--sonic-wavestrip-bar-gap-ratio, 0.33);
 		--_sonic-wavestrip-bar-radius-ratio: var(--sonic-wavestrip-bar-radius-ratio, 0.5);
+		--_sonic-wavestrip-groove-ratio: var(--sonic-wavestrip-groove-ratio, 0.15);
 		--_sonic-wavestrip-marker-ratio: var(--sonic-wavestrip-marker-ratio, 0.065);
 		--_sonic-wavestrip-inset: calc(
 			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-inset-ratio, 0.1)
@@ -118,7 +125,7 @@
 		block-size: var(--_sonic-wavestrip-size);
 		padding: var(--_sonic-wavestrip-inset);
 		container-type: size;
-		touch-action: pan-y;
+		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: ew-resize;
 
 		--_sonic-glass-radius: calc(
@@ -129,6 +136,11 @@
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
+	[fill] > .sonic-wavestrip,
+	sonic-wavestrip[fill]:not(:defined, [hidden]) {
+		block-size: 100%;
+	}
+
 	[dimmed] > .sonic-wavestrip {
 		--_sonic-wavestrip-lit: var(--_sonic-lit-off);
 	}
@@ -191,10 +203,16 @@
 			var(--_sonic-wavestrip-inset) + var(--_sonic-wavestrip-readout-at, 0) * 100cqi
 		);
 
-		inset-inline: var(--_sonic-wavestrip-readout-inset)
-			calc(100cqi + 2 * var(--_sonic-wavestrip-inset) - var(--_sonic-wavestrip-readout-inset));
-		justify-self: center;
+		inset-inline: 0;
+		justify-self: start;
 		position-area: block-start center;
+		transform: translateX(
+			clamp(
+				0px,
+				var(--_sonic-wavestrip-readout-inset) - 50%,
+				100cqi + 2 * var(--_sonic-wavestrip-inset) - 100%
+			)
+		);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -66,6 +66,7 @@
     "./screen.css": "./dist/styles/screen.css",
     "./segmented.css": "./dist/styles/segmented.css",
     "./slider.css": "./dist/styles/slider.css",
+    "./spectrum.css": "./dist/styles/spectrum.css",
     "./switch.css": "./dist/styles/switch.css",
     "./waveform.css": "./dist/styles/waveform.css",
     "./wavestrip.css": "./dist/styles/wavestrip.css",