@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/styles/meter.css

@@ -16,7 +16,6 @@
 	initial-value: 4px;
 }
 
-/* The size is the thickness */
 @layer sonic {
 	:is(sonic-meter, .sonic-meter) {
 		--_sonic-meter-size: var(--sonic-meter-size, 0.5rem);
@@ -40,23 +39,17 @@
 	}
 
 	.sonic-meter {
-		/* Absolute, so a longer meter gains segments rather than stretching them */
 		--_sonic-meter-pitch: var(--sonic-meter-segment-pitch, 4px);
-
-		/* A fraction of the pitch */
 		--_sonic-meter-gap-ratio: var(--sonic-meter-gap-ratio, 0.25);
 		--_sonic-meter-radius-ratio: var(--sonic-meter-radius-ratio, 0.25);
-
-		/* A fraction of the light's length along the meter */
 		--_sonic-meter-segment-radius-ratio: var(--sonic-meter-segment-radius-ratio, 0.35);
-
-		/* dBFS */
 		--_sonic-meter-hot-from: var(--sonic-meter-hot-from, -12);
 		--_sonic-meter-clip-from: var(--sonic-meter-clip-from, -3);
 		--_sonic-unit: calc(var(--_sonic-meter-size) / 8);
 		--_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 +57,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,8 +86,26 @@
 		block-size: var(--_sonic-meter-size);
 	}
 
-	/* Snapped to whole lights, so none is split between two colours */
-	:is(.sonic-meter-segments, .sonic-meter-level) {
+	:is([value], :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-ladder-radius: calc(
+			min(
+					var(--_sonic-meter-lens),
+					var(--_sonic-meter-pitch) * (1 - var(--_sonic-meter-gap-ratio))
+				) /
+				2
+		);
+	}
+
+	:is(.sonic-meter-segments, .sonic-meter-bar) {
 		--_sonic-meter-span: calc(var(--_sonic-meter-max, 0) - var(--_sonic-meter-min, -60));
 		--_sonic-meter-hot-at: round(
 			clamp(
@@ -108,15 +119,15 @@
 		--_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 */
+						(var(--_sonic-meter-clip-from) - var(--_sonic-meter-min, -60)) /
+						var(--_sonic-meter-span),
 					1
 				) *
 				var(--_sonic-meter-segments),
 			var(--_sonic-meter-pitch)
 		);
-
-		/* Each rounded light is two crossed bands and four corner dots added together */
-		--_sonic-meter-lights:
+		--_sonic-meter-segment-mask:
 			linear-gradient(to top, #000 var(--_sonic-meter-segment), transparent 0)
 				var(--_sonic-meter-segment-radius) 100% /
 				calc(100% - 2 * var(--_sonic-meter-segment-radius)) var(--_sonic-meter-pitch) no-repeat
@@ -144,6 +155,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
@@ -160,12 +172,28 @@
 		position: absolute;
 		inset: auto var(--_sonic-meter-inset) var(--_sonic-meter-inset);
 		block-size: calc(var(--_sonic-meter-segments) - var(--_sonic-meter-gap));
-		mask: var(--_sonic-meter-lights);
+		mask: var(--_sonic-meter-segment-mask);
 		mask-composite: add;
 	}
 
-	[orientation='horizontal'] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-level) {
-		--_sonic-meter-lights:
+	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_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(
+				circle var(--_sonic-meter-ladder-radius),
+				#000 calc(100% - 0.5px),
+				transparent
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat;
+	}
+
+	[value] > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_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-bar) {
+		--_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)
 				calc(100% - 2 * var(--_sonic-meter-segment-radius)) repeat no-repeat,
@@ -194,6 +222,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 +242,42 @@
 		block-size: auto;
 	}
 
+	[orientation='horizontal']:state(ladder)
+		> .sonic-meter
+		> :is(.sonic-meter-segments, .sonic-meter-bar) {
+		--_sonic-meter-segment-mask: radial-gradient(
+				circle var(--_sonic-meter-ladder-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-bar)::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-bar::after {
+		background: radial-gradient(
+				circle var(--_sonic-meter-ladder-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-bar)::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),
@@ -222,16 +287,23 @@
 		);
 	}
 
-	/* One mask for the bar and peak, so a frame repaints without layout */
-	.sonic-meter-level {
+	/* The hair of slack keeps an exact fraction from losing a segment to float error */
+	.sonic-meter-bar {
+		--_sonic-meter-lit-from: round(
+			up,
+			min(var(--_sonic-meter-origin, 0), var(--_sonic-meter-bar, 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-bar, 0)) *
+				var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
-		--_sonic-meter-held: round(
+		--_sonic-meter-peak-hold-edge: round(
 			down,
-			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments),
+			var(--_sonic-meter-peak-hold, 0) * var(--_sonic-meter-segments) + 0.01px,
 			var(--_sonic-meter-pitch)
 		);
 
@@ -244,12 +316,13 @@
 		mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
-				#000 var(--_sonic-meter-lit),
-				transparent 0 calc(var(--_sonic-meter-held) - var(--_sonic-meter-pitch)),
-				#000 0 var(--_sonic-meter-held),
+				transparent var(--_sonic-meter-lit-from),
+				#000 0 var(--_sonic-meter-lit),
+				transparent 0 calc(var(--_sonic-meter-peak-hold-edge) - var(--_sonic-meter-pitch)),
+				#000 0 var(--_sonic-meter-peak-hold-edge),
 				transparent 0
 			),
-			var(--_sonic-meter-lights);
+			var(--_sonic-meter-segment-mask);
 		mask-composite: intersect, add, add, add, add, add, add;
 	}
 
@@ -274,6 +347,10 @@
 		}
 	}
 
+	:is([value], :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);
@@ -296,12 +373,16 @@
 			background: var(--_sonic-unlit);
 		}
 
-		.sonic-meter-level {
+		.sonic-meter-bar {
 			background: var(--_sonic-lit);
 		}
 
 		.sonic-meter-clip::after {
 			background: Mark;
 		}
+
+		:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar)::after {
+			display: none;
+		}
 	}
 }

package/dist/styles/number.css

@@ -40,12 +40,16 @@
 		font-size: calc(var(--_sonic-number-size) * var(--_sonic-number-text-ratio));
 		font-variant-numeric: tabular-nums;
 		line-height: 1;
-		touch-action: none;
+		touch-action: pan-x;
 		cursor: ns-resize;
 		border-radius: calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio));
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
+	[press='step'] > .sonic-number {
+		cursor: pointer;
+	}
+
 	:disabled > .sonic-number {
 		color: var(--_sonic-etch);
 		cursor: default;

package/dist/styles/panel.css

@@ -0,0 +1,59 @@
+@property --_sonic-panel-depth {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 2px;
+}
+
+@property --_sonic-panel-radius {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 12px;
+}
+
+@layer sonic {
+	:is(.sonic-panel, .sonic-panel-title, .sonic-panel-rule) {
+		--_sonic-panel-line: color-mix(in oklab, currentcolor 20%, transparent);
+	}
+
+	.sonic-panel {
+		--_sonic-panel-depth: var(--sonic-panel-depth, 0.125rem);
+		--_sonic-panel-radius: var(--sonic-panel-radius, 0.75rem);
+		--_sonic-unit: var(--_sonic-panel-depth);
+
+		background: var(--sonic-panel, rgb(255 255 255 / 3%));
+		border: 1px solid var(--_sonic-panel-line);
+		border-radius: var(--_sonic-panel-radius);
+		box-shadow:
+			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
+				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth)) rgb(255 255 255 / 7%),
+			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
+				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth)) rgb(0 0 0 / 35%),
+			calc(2 * sin(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
+				calc(2 * cos(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
+				calc(3 * max(0px, var(--_sonic-panel-depth))) rgb(0 0 0 / 45%);
+	}
+
+	.sonic-panel-title {
+		display: flex;
+		gap: 0.75em;
+		align-items: center;
+		margin: 0;
+		white-space: nowrap;
+
+		&::before,
+		&::after {
+			flex: 1;
+			min-inline-size: 1em;
+			content: '';
+			border-block-start: 1px solid var(--_sonic-panel-line);
+		}
+	}
+
+	.sonic-panel-rule {
+		align-self: stretch;
+		block-size: 0;
+		margin: 0;
+		border: 0;
+		border-block-start: 1px solid var(--_sonic-panel-line);
+	}
+}

package/dist/styles/ring.css

@@ -0,0 +1,74 @@
+@property --_sonic-ring-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 40px;
+}
+
+@layer sonic {
+	.sonic-ring {
+		--_sonic-ring-size: var(--sonic-ring-size, 2.5rem);
+		--_sonic-ring-ratio: var(--sonic-ring-ratio, 0.075);
+		--_sonic-ring-gap-ratio: var(--sonic-ring-gap-ratio, 0.05);
+		--_sonic-ring-start: var(--sonic-ring-start, 0deg);
+		--_sonic-ring-sweep: var(--sonic-ring-sweep, 360deg);
+		--_sonic-ring-from: clamp(0, var(--sonic-ring-from, 0), 1);
+		--_sonic-ring-to: clamp(0, var(--sonic-ring-to, 0), 1);
+
+		position: relative;
+		box-sizing: border-box;
+		display: inline-grid;
+		flex-shrink: 0;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+		place-items: center;
+		inline-size: var(--_sonic-ring-size);
+		block-size: var(--_sonic-ring-size);
+		padding: calc(
+			var(--_sonic-ring-size) * (var(--_sonic-ring-ratio) + var(--_sonic-ring-gap-ratio))
+		);
+		border-radius: 50%;
+
+		&::before {
+			--_sonic-arc-width: calc(var(--_sonic-ring-size) * var(--_sonic-ring-ratio));
+			--_sonic-arc-inset: 0px;
+
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			background:
+				var(--_sonic-arc-shade),
+				conic-gradient(
+					from var(--_sonic-ring-start),
+					var(--_sonic-unlit)
+						calc(min(var(--_sonic-ring-from), var(--_sonic-ring-to)) * var(--_sonic-ring-sweep)),
+					var(--_sonic-lit) 0
+						calc(max(var(--_sonic-ring-from), var(--_sonic-ring-to)) * var(--_sonic-ring-sweep)),
+					var(--_sonic-unlit) 0 var(--_sonic-ring-sweep),
+					transparent 0
+				);
+			border-radius: 50%;
+			mask: var(--_sonic-arc-mask);
+		}
+
+		@media (forced-colors: active) {
+			&::before {
+				--_sonic-arc-shade: none;
+
+				forced-color-adjust: none;
+			}
+		}
+	}
+
+	.sonic-ring > :not(:defined),
+	.sonic-ring > * > .sonic-button {
+		--_sonic-button-size: calc(
+			var(--_sonic-ring-size) * (1 - 2 * (var(--_sonic-ring-ratio) + var(--_sonic-ring-gap-ratio)))
+		);
+		--_sonic-button-aspect-ratio: 1;
+	}
+
+	.sonic-ring > * > .sonic-button {
+		--_sonic-button-radius-ratio: 0.5;
+		--_sonic-button-face-radius-ratio: 0.5;
+	}
+}

package/dist/styles/segmented.css

@@ -34,9 +34,7 @@
 		--_sonic-segmented-corner: calc(
 			var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)
 		);
-		--_sonic-segmented-depth: calc(
-			var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio)
-		);
+		--_sonic-keycap-depth: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio));
 		--_sonic-segmented-gap: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-gap-ratio));
 		--_sonic-segmented-inner-corner: max(
 			0px,
@@ -51,22 +49,12 @@
 		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);
 	}
 
-	.sonic-segmented-segment {
-		--_sonic-segmented-shift: calc(var(--_sonic-segmented-depth) / -2);
-		--_sonic-segmented-scale: 1;
-		--_sonic-segmented-drop: calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y))
-			calc(2 * var(--_sonic-unit)) var(--_sonic-drop-shade);
-		--_sonic-segmented-glow: transparent;
-
+	.sonic-segmented-option {
 		display: grid;
 		min-inline-size: calc(var(--_sonic-segmented-size) - 2 * var(--_sonic-segmented-gap));
 		padding: 0;
@@ -81,30 +69,29 @@
 		transition: color 120ms ease-out;
 	}
 
-	.sonic-segmented-segment:where([data-sonic-pressed], :focus-visible:active):not(:disabled),
-	.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-option:where([data-sonic-pressed], :focus-visible:active):not(:disabled),
+	.sonic-segmented-option[aria-checked='true'] {
+		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
+		--_sonic-keycap-scale: var(--_sonic-segmented-press-scale);
+		--_sonic-keycap-drop: var(--_sonic-press-drop);
 	}
 
-	.sonic-segmented-segment[aria-checked='true'] {
-		--_sonic-segmented-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+	.sonic-segmented-option[aria-checked='true'] {
+		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
 
 		color: var(--_sonic-lit);
 		background: var(--_sonic-lit);
 		box-shadow: var(--_sonic-well);
 	}
 
-	.sonic-segmented-segment:disabled {
+	.sonic-segmented-option:disabled {
 		--_sonic-lit: var(--_sonic-lit-disabled);
 
 		color: var(--_sonic-etch);
 		cursor: default;
 	}
 
-	.sonic-segmented-segment:not([aria-checked='true'], :disabled):is(
+	.sonic-segmented-option:not([aria-checked='true'], :disabled):is(
 			:focus-visible,
 			:active,
 			[data-sonic-pressed]
@@ -113,41 +100,23 @@
 	}
 
 	@media (hover: hover) {
-		.sonic-segmented-segment:not([aria-checked='true'], :disabled):hover {
+		.sonic-segmented-option:not([aria-checked='true'], :disabled):hover {
 			color: var(--_sonic-ink-lift);
 		}
 	}
 
-	/* In flow, so a long label widens its segment rather than spilling over the next */
 	.sonic-segmented-cap {
+		--_sonic-keycap-corner: var(--_sonic-segmented-inner-corner);
+		--_sonic-keycap-bevel: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-bevel-ratio));
+		--_sonic-keycap-face-corner: max(
+			0px,
+			var(--_sonic-segmented-inner-corner) - var(--_sonic-keycap-bevel)
+		);
+
 		position: relative;
-		display: grid;
-		place-items: center;
 		padding-inline: calc(var(--_sonic-segmented-size) * 0.25);
-		background: var(--_sonic-skirt);
-		border-radius: var(--_sonic-segmented-inner-corner);
-		box-shadow: var(--_sonic-segmented-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
-		scale: var(--_sonic-segmented-scale);
-		translate: 0 var(--_sonic-segmented-shift);
-		transition: var(--_sonic-press-transition);
-
-		&::before {
-			position: absolute;
-			inset: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-bevel-ratio));
-			content: '';
-			background:
-				radial-gradient(closest-side, var(--_sonic-segmented-glow), transparent),
-				var(--_sonic-sheen), var(--_sonic-face);
-			border-radius: max(
-				0px,
-				var(--_sonic-segmented-inner-corner) - var(--_sonic-segmented-size) *
-					var(--_sonic-segmented-bevel-ratio)
-			);
-			box-shadow: var(--_sonic-face-shadow);
-		}
 
 		& > * {
-			position: relative;
 			filter: var(--_sonic-engraving);
 		}
 
@@ -157,8 +126,7 @@
 		}
 	}
 
-	/* Engraving under the glow keeps a lit label's edge */
-	.sonic-segmented-segment[aria-checked='true'] .sonic-segmented-cap > * {
+	.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
 		filter: var(--_sonic-engraving)
 			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
 	}
@@ -168,7 +136,7 @@
 			filter: none;
 		}
 
-		.sonic-segmented-segment[aria-checked='true'] {
+		.sonic-segmented-option[aria-checked='true'] {
 			--_sonic-skirt: var(--_sonic-lit);
 			--_sonic-face: var(--_sonic-lit);
 			--_sonic-ink: HighlightText;