@xsynaptic/sonic-ui 0.6.0 → 0.8.0

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/dist/styles/xy.css

@@ -119,23 +119,28 @@
 		}
 	}
 
+	:is(.sonic-xy-bracket, .sonic-xy-puck) {
+		position: absolute;
+		inset: auto auto
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
+		inline-size: var(--_sonic-xy-puck);
+		block-size: var(--_sonic-xy-puck);
+		border-radius: 50%;
+	}
+
+	.sonic-xy-bracket {
+		--_sonic-bracket-size: var(--_sonic-xy-puck);
+	}
+
 	.sonic-xy-puck {
 		--_sonic-xy-puck-fill: var(--_sonic-xy-lit);
 		--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
-		--_sonic-xy-puck-bracket: transparent;
-		--_sonic-xy-puck-bracket-scale: 0.6;
 		--_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
 		--_sonic-xy-puck-glow: transparent;
 		--_sonic-xy-puck-ring: 0 0 transparent;
 
-		position: absolute;
-		inset: auto auto
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
-		inline-size: var(--_sonic-xy-puck);
-		block-size: var(--_sonic-xy-puck);
 		cursor: var(--_sonic-xy-cursor);
-		border-radius: 50%;
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
 		transition: filter 120ms ease-out;
 
@@ -153,21 +158,6 @@
 				border-color 120ms ease-out,
 				box-shadow 120ms ease-out;
 		}
-
-		&::after {
-			position: absolute;
-			inset: 4%;
-			pointer-events: none;
-			content: '';
-			border: max(1px, 0.08 * var(--_sonic-xy-puck)) solid var(--_sonic-xy-puck-bracket);
-			border-block-start-color: transparent;
-			border-radius: 50%;
-			rotate: 45deg;
-			scale: var(--_sonic-xy-puck-bracket-scale);
-			transition:
-				border-color 120ms ease-out,
-				scale 120ms ease-out;
-		}
 	}
 
 	@media (hover: hover) {
@@ -191,12 +181,6 @@
 			var(--_sonic-xy-lit) calc(45% * var(--_sonic-relief)),
 			transparent
 		);
-		--_sonic-xy-puck-bracket: color-mix(
-			in oklab,
-			var(--_sonic-xy-lit) calc(100% * (1 - var(--_sonic-relief))),
-			transparent
-		);
-		--_sonic-xy-puck-bracket-scale: 1;
 	}
 
 	.sonic-xy-axis {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.6.0",
+  "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",