@xsynaptic/sonic-ui 0.3.0 → 0.4.0

package/dist/styles/meter.css

@@ -57,6 +57,7 @@
 		--_sonic-meter-toward: to top;
 		--_sonic-meter-inset: calc(var(--_sonic-meter-size) * 0.125);
 		--_sonic-meter-lens: calc(var(--_sonic-meter-size) - 2 * var(--_sonic-meter-inset));
+		--_sonic-meter-clip-space: calc(var(--_sonic-meter-inset) + var(--_sonic-meter-lens));
 		--_sonic-meter-gap: calc(var(--_sonic-meter-pitch) * var(--_sonic-meter-gap-ratio));
 		--_sonic-meter-segment: calc(var(--_sonic-meter-pitch) - var(--_sonic-meter-gap));
 		--_sonic-meter-segment-radius: calc(
@@ -64,7 +65,7 @@
 		);
 		--_sonic-meter-segments: round(
 			down,
-			var(--_sonic-meter-length) - 3 * var(--_sonic-meter-inset) - var(--_sonic-meter-lens) +
+			var(--_sonic-meter-length) - 2 * var(--_sonic-meter-inset) - var(--_sonic-meter-clip-space) +
 				var(--_sonic-meter-gap),
 			var(--_sonic-meter-pitch)
 		);
@@ -93,6 +94,26 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
+	/* No clip on either, so the lights take the lens's room */
+	:is([scale='linear'], :state(ladder)) > .sonic-meter {
+		--_sonic-meter-clip-space: 0px;
+	}
+
+	: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-light-radius: calc(
+			min(
+					var(--_sonic-meter-lens),
+					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
+				) /
+				2
+		);
+	}
+
 	/* Snapped to whole lights, so none is split between two colours */
 	:is(.sonic-meter-segments, .sonic-meter-level) {
 		--_sonic-meter-span: calc(var(--_sonic-meter-max, 0) - var(--_sonic-meter-min, -60));
@@ -108,7 +129,9 @@
 		--_sonic-meter-clip-at: round(
 			clamp(
 					0,
-					(var(--_sonic-meter-clip-from) - var(--_sonic-meter-min, -60)) / var(--_sonic-meter-span),
+					/* fallow-ignore-next-line code-duplication -- each zone snaps its own threshold by the same rule */
+						(var(--_sonic-meter-clip-from) - var(--_sonic-meter-min, -60)) /
+						var(--_sonic-meter-span),
 					1
 				) *
 				var(--_sonic-meter-segments),
@@ -144,6 +167,7 @@
 				0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat,
 			radial-gradient(
 					circle var(--_sonic-meter-segment-radius) at left var(--_sonic-meter-segment-radius)
+						/* fallow-ignore-next-line code-duplication -- one gradient per segment corner is geometry, not copied logic */
 						bottom calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
 					#000 calc(100% - 0.5px),
 					transparent
@@ -164,6 +188,23 @@
 		mask-composite: add;
 	}
 
+	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-hot-at: calc(var(--_sonic-meter-hot-lights, 0) * var(--_sonic-meter-pitch));
+		--_sonic-meter-clip-at: calc(var(--_sonic-meter-clip-lights, 0) * var(--_sonic-meter-pitch));
+		--_sonic-meter-lights: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				#000 calc(100% - 0.5px),
+				transparent
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat;
+	}
+
+	/* The zones are dBFS, which a linear level is not */
+	[scale='linear'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-hot-at: var(--_sonic-meter-segments);
+		--_sonic-meter-clip-at: var(--_sonic-meter-segments);
+	}
+
 	[orientation='horizontal'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
 		--_sonic-meter-lights:
 			linear-gradient(to right, #000 var(--_sonic-meter-segment), transparent 0) 0
@@ -194,6 +235,7 @@
 			radial-gradient(
 					circle var(--_sonic-meter-segment-radius) at left
 						calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)) top
+						/* fallow-ignore-next-line code-duplication -- one gradient per segment corner is geometry, not copied logic */
 						var(--_sonic-meter-segment-radius),
 					#000 calc(100% - 0.5px),
 					transparent
@@ -213,6 +255,42 @@
 		block-size: auto;
 	}
 
+	[orientation='horizontal']:state(ladder)
+		> .sonic-meter
+		> :is(.sonic-meter-segments, .sonic-meter-level) {
+		--_sonic-meter-lights: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				#000 calc(100% - 0.5px),
+				transparent
+			)
+			0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat;
+	}
+
+	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level)::after {
+		position: absolute;
+		inset: 0;
+		content: '';
+		background: linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%) 0
+			100% / 100% var(--_sonic-meter-pitch) repeat-y;
+	}
+
+	:state(ladder) > .sonic-meter > .sonic-meter-level::after {
+		background: radial-gradient(
+				circle var(--_sonic-meter-light-radius),
+				rgb(255 255 255 / 45%),
+				transparent
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
+	}
+
+	[orientation='horizontal']:state(ladder)
+		> .sonic-meter
+		> :is(.sonic-meter-segments, .sonic-meter-level)::after {
+		background-repeat: repeat-x;
+		background-position: 0 0;
+		background-size: var(--_sonic-meter-pitch) 100%;
+	}
+
 	.sonic-meter-segments {
 		background: linear-gradient(
 			var(--_sonic-meter-toward),
@@ -223,15 +301,24 @@
 	}
 
 	/* One mask for the bar and peak, so a frame repaints without layout */
+
+	/* The hair of slack keeps an exact fraction from losing a light to float error */
 	.sonic-meter-level {
+		--_sonic-meter-lit-from: round(
+			up,
+			min(var(--_sonic-meter-origin, 0), var(--_sonic-meter-level, 0)) *
+				var(--_sonic-meter-segments) - 0.01px,
+			var(--_sonic-meter-pitch)
+		);
 		--_sonic-meter-lit: round(
 			down,
-			var(--_sonic-meter-level, 0) * var(--_sonic-meter-segments),
+			max(var(--_sonic-meter-origin, 0), var(--_sonic-meter-level, 0)) *
+				var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
 		--_sonic-meter-held: round(
 			down,
-			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments),
+			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
 
@@ -244,7 +331,8 @@
 		mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
-				#000 var(--_sonic-meter-lit),
+				transparent var(--_sonic-meter-lit-from),
+				#000 0 var(--_sonic-meter-lit),
 				transparent 0 calc(var(--_sonic-meter-held) - var(--_sonic-meter-pitch)),
 				#000 0 var(--_sonic-meter-held),
 				transparent 0
@@ -274,6 +362,10 @@
 		}
 	}
 
+	:is([scale='linear'], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
+		display: none;
+	}
+
 	[orientation='horizontal'] > .sonic-meter > .sonic-meter-clip {
 		inset: var(--_sonic-meter-inset) var(--_sonic-meter-inset) var(--_sonic-meter-inset) auto;
 		inline-size: var(--_sonic-meter-lens);
@@ -303,5 +395,9 @@
 		.sonic-meter-clip::after {
 			background: Mark;
 		}
+
+		:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level)::after {
+			display: none;
+		}
 	}
 }

package/dist/styles/segmented.css

@@ -51,11 +51,7 @@
 		padding: var(--_sonic-segmented-gap);
 		touch-action: pan-y;
 		user-select: none;
-		background: linear-gradient(
-			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-unlit) 55%, #000),
-			color-mix(in oklab, var(--_sonic-unlit) 85%, #000)
-		);
+		background: var(--_sonic-well-floor);
 		border-radius: var(--_sonic-segmented-corner);
 		box-shadow: var(--_sonic-well);
 	}
@@ -85,8 +81,7 @@
 	.sonic-segmented-segment[aria-checked='true'] {
 		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / 2);
 		--_sonic-segmented-scale: var(--_sonic-segmented-press-scale);
-		--_sonic-segmented-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
-			var(--_sonic-unit) var(--_sonic-drop-shade);
+		--_sonic-segmented-drop: var(--_sonic-press-drop);
 	}
 
 	.sonic-segmented-segment[aria-checked='true'] {

package/dist/styles/slider.css

@@ -23,9 +23,11 @@
 
 	sonic-slider:not(:defined, [hidden]) {
 		display: block;
+		visibility: hidden;
 		flex-shrink: 0;
 		inline-size: var(--_sonic-slider-length);
 		block-size: var(--_sonic-slider-size);
+		overflow: hidden;
 	}
 
 	sonic-slider[orientation='vertical']:not(:defined, [hidden]) {
@@ -42,13 +44,23 @@
 		--_sonic-slider-radius-ratio: var(--sonic-slider-radius-ratio, 0.15);
 		--_sonic-slider-bevel-ratio: var(--sonic-slider-bevel-ratio, 0.075);
 		--_sonic-slider-pointer-ratio: var(--sonic-slider-pointer-ratio, 0.07);
-		--_sonic-unit: calc(var(--_sonic-slider-size) / 32);
+		--_sonic-slider-scale-ratio: var(--sonic-slider-scale-ratio, 0.4);
+		--_sonic-slider-scale-font-ratio: var(--sonic-slider-scale-font-ratio, 0.18);
+		--_sonic-slider-scale-band: 0px;
+
+		/* Across the travel beside the legend, so a legend widens the box without restyling the fader */
+		--_sonic-slider-track: calc(var(--_sonic-slider-size) - var(--_sonic-slider-scale-band));
+		--_sonic-unit: calc(var(--_sonic-slider-track) / 32);
 		--_sonic-slider-lit: var(--_sonic-lit);
+		--_sonic-slider-buffered: var(
+			--sonic-buffered,
+			color-mix(in oklab, var(--_sonic-ink) 18%, var(--_sonic-unlit))
+		);
 		--_sonic-slider-toward: to right;
 		--_sonic-slider-across: to bottom;
 		--_sonic-slider-cursor: ew-resize;
-		--_sonic-slider-groove: calc(var(--_sonic-slider-size) * var(--_sonic-slider-groove-ratio));
-		--_sonic-slider-cap: calc(var(--_sonic-slider-size) * var(--_sonic-slider-cap-ratio));
+		--_sonic-slider-groove: calc(var(--_sonic-slider-track) * var(--_sonic-slider-groove-ratio));
+		--_sonic-slider-cap: calc(var(--_sonic-slider-track) * var(--_sonic-slider-cap-ratio));
 		--_sonic-slider-travel: calc(var(--_sonic-slider-length) - var(--_sonic-slider-cap));
 		--_sonic-slider-offset: calc(var(--_sonic-slider-value, 0) * var(--_sonic-slider-travel));
 
@@ -83,6 +95,10 @@
 		--_sonic-slider-cursor: default;
 	}
 
+	:has(> [data-sonic-value]) > .sonic-slider {
+		--_sonic-slider-scale-band: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-ratio));
+	}
+
 	[groove-press='none']:not(:state(dragging)) > .sonic-slider {
 		cursor: default;
 	}
@@ -92,11 +108,12 @@
 			var(--_sonic-slider-travel) / (var(--_sonic-slider-positions, 2) - 1)
 		);
 		--_sonic-slider-mark-lip: calc(
-			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-size) * 0.1
+			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-track) * 0.1
 		);
 
 		position: absolute;
-		inset: 0 calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2);
+		inset: var(--_sonic-slider-scale-band) calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2)
+			0;
 		background: repeating-linear-gradient(
 			var(--_sonic-slider-toward),
 			var(--_sonic-etch) 0 var(--_sonic-unit),
@@ -113,43 +130,80 @@
 	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-marks {
-		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) 0;
+		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) 0
+			calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2) var(--_sonic-slider-scale-band);
 	}
 
 	:not([notched]) > .sonic-slider > .sonic-slider-marks {
 		display: none;
 	}
 
+	.sonic-slider-scale {
+		font-size: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-font-ratio));
+
+		& > * {
+			--_sonic-slider-scale-along: calc(
+				var(--_sonic-slider-cap) / 2 + var(--_sonic-scale-at, 0) * var(--_sonic-slider-travel)
+			);
+			--_sonic-slider-scale-edge: calc(100% - var(--_sonic-slider-scale-band) + var(--_sonic-unit));
+
+			inset: auto auto var(--_sonic-slider-scale-edge) var(--_sonic-slider-scale-along);
+			translate: -50% 0;
+		}
+
+		& > .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 {
+		& > * {
+			inset: auto var(--_sonic-slider-scale-edge) var(--_sonic-slider-scale-along) auto;
+			translate: 0 50%;
+		}
+
+		& > .sonic-scale-tick {
+			inline-size: calc(var(--_sonic-slider-scale-band) * 0.4);
+			block-size: var(--_sonic-unit);
+		}
+	}
+
 	.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));
 
 		position: absolute;
-		inset: calc(50% - var(--_sonic-slider-groove) / 2)
-			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2);
+		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);
 
 		/* At either end of the travel the light runs on to the groove's rounded end */
-		background: linear-gradient(
-			var(--_sonic-slider-toward),
-			var(--_sonic-unlit)
-				calc(
-					var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) /
-						2 * sign(var(--_sonic-slider-lit-low))
-				),
-			var(--_sonic-slider-lit) 0
-				calc(
-					var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
-						var(--_sonic-slider-groove) / 2 * (2 - sign(1 - var(--_sonic-slider-lit-high)))
-				),
-			var(--_sonic-unlit) 0
-		);
+		background:
+			linear-gradient(
+				var(--_sonic-slider-toward),
+				transparent
+					calc(
+						var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) +
+							var(--_sonic-slider-groove) / 2 * sign(var(--_sonic-slider-lit-low))
+					),
+				var(--_sonic-slider-lit) 0
+					calc(
+						var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
+							var(--_sonic-slider-groove) / 2 * (2 - sign(1 - var(--_sonic-slider-lit-high)))
+					),
+				transparent 0
+			),
+			var(--_sonic-slider-buffered-ranges, none), var(--_sonic-unlit);
 		border-radius: calc(var(--_sonic-slider-groove) / 2);
 		box-shadow: var(--_sonic-groove);
 	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-groove {
 		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
-			calc(50% - var(--_sonic-slider-groove) / 2);
+			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);
 	}
 
 	.sonic-slider-modulation {
@@ -168,8 +222,10 @@
 		);
 
 		position: absolute;
-		inset: calc(50% - var(--_sonic-slider-modulation-band) / 2) auto auto
-			var(--_sonic-slider-modulation-start);
+		inset: calc(
+				50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-modulation-band) / 2
+			)
+			auto auto var(--_sonic-slider-modulation-start);
 		inline-size: var(--_sonic-slider-modulation-length);
 		block-size: var(--_sonic-slider-modulation-band);
 		background: var(--_sonic-slider-modulation);
@@ -178,7 +234,7 @@
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-modulation {
 		inset: auto auto var(--_sonic-slider-modulation-start)
-			calc(50% - var(--_sonic-slider-modulation-band) / 2);
+			calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-modulation-band) / 2);
 		inline-size: var(--_sonic-slider-modulation-band);
 		block-size: var(--_sonic-slider-modulation-length);
 	}
@@ -189,14 +245,16 @@
 
 	.sonic-slider-cap {
 		--_sonic-slider-pointer-width: calc(
-			var(--_sonic-slider-size) * var(--_sonic-slider-pointer-ratio)
+			var(--_sonic-slider-track) * var(--_sonic-slider-pointer-ratio)
+		);
+		--_sonic-slider-bevel: calc(var(--_sonic-slider-track) * var(--_sonic-slider-bevel-ratio));
+		--_sonic-slider-corner: calc(var(--_sonic-slider-track) * var(--_sonic-slider-radius-ratio));
+		--_sonic-slider-index-inset: calc(
+			var(--_sonic-slider-bevel) + var(--_sonic-slider-track) * 0.1
 		);
-		--_sonic-slider-bevel: calc(var(--_sonic-slider-size) * var(--_sonic-slider-bevel-ratio));
-		--_sonic-slider-corner: calc(var(--_sonic-slider-size) * var(--_sonic-slider-radius-ratio));
-		--_sonic-slider-index-inset: calc(var(--_sonic-slider-bevel) + var(--_sonic-slider-size) * 0.1);
 
 		position: absolute;
-		inset: 0 auto 0 0;
+		inset: var(--_sonic-slider-scale-band) auto 0 0;
 		inline-size: var(--_sonic-slider-cap);
 		background: var(--_sonic-skirt);
 		border-radius: var(--_sonic-slider-corner);
@@ -230,7 +288,7 @@
 	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-cap {
-		inset: auto 0 0;
+		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));
@@ -257,6 +315,10 @@
 			--_sonic-slider-modulation: CanvasText;
 		}
 
+		.sonic-slider {
+			--_sonic-slider-buffered: color-mix(in srgb, CanvasText 50%, GrayText);
+		}
+
 		.sonic-slider-groove {
 			box-shadow: none;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",