@xsynaptic/sonic-ui 0.1.0

package/dist/styles/key.css

@@ -0,0 +1,137 @@
+@layer sonic {
+	/* On the host too, for the placeholder */
+	:is(sonic-key, .sonic-key) {
+		--_sonic-key-size: var(--sonic-key-size, 2rem);
+	}
+
+	:has(> .sonic-key):not([hidden]) {
+		display: contents;
+	}
+
+	/* Hides the icon, which has no size before upgrade */
+	sonic-key:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-key-size);
+		block-size: var(--_sonic-key-size);
+		overflow: hidden;
+	}
+
+	/* The button is the well; the cap is the part that moves */
+	.sonic-key {
+		--_sonic-key-gap-ratio: var(--sonic-key-gap-ratio, 0);
+		--_sonic-key-radius-ratio: var(--sonic-key-radius-ratio, 0.2);
+		--_sonic-key-bevel-ratio: var(--sonic-key-bevel-ratio, 0.075);
+		--_sonic-key-face-radius-ratio: var(--sonic-key-face-radius-ratio, 0.15);
+		--_sonic-key-icon-ratio: var(--sonic-key-icon-ratio, 0.5);
+		--_sonic-key-depth-ratio: var(--sonic-key-depth-ratio, 0.03);
+		--_sonic-key-press-scale: var(--sonic-key-press-scale, 0.985);
+		--_sonic-unit: calc(var(--_sonic-key-size) / 32);
+		--_sonic-key-corner: calc(var(--_sonic-key-size) * var(--_sonic-key-radius-ratio));
+		--_sonic-key-gap: calc(var(--_sonic-key-size) * var(--_sonic-key-gap-ratio));
+		--_sonic-key-depth: calc(var(--_sonic-key-size) * var(--_sonic-key-depth-ratio));
+		--_sonic-key-shift: calc(var(--_sonic-key-depth) / -2);
+		--_sonic-key-scale: 1;
+		--_sonic-key-drop: calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y))
+			calc(2 * var(--_sonic-unit)) rgb(0 0 0 / 65%);
+		--_sonic-key-glow: transparent;
+
+		position: relative;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-key-size);
+		block-size: var(--_sonic-key-size);
+		padding: 0;
+		color: var(--_sonic-ink);
+		cursor: pointer;
+		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)
+		);
+		border: 0;
+		border-radius: var(--_sonic-key-corner);
+		box-shadow: var(--_sonic-well);
+	}
+
+	/* A drifting finger would turn a held pad into a pan */
+	:where([momentary]) > .sonic-key {
+		touch-action: none;
+	}
+
+	.sonic-key:active:where(:not(:disabled)),
+	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) {
+		--_sonic-key-shift: calc(var(--_sonic-key-depth) / 2);
+		--_sonic-key-scale: var(--_sonic-key-press-scale);
+		--_sonic-key-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
+			var(--_sonic-unit) rgb(0 0 0 / 65%);
+	}
+
+	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) {
+		--_sonic-key-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+
+		color: var(--_sonic-lit);
+
+		/* A full-strength floor shows as a hard line where the sunk cap uncovers it */
+		background: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-lit) 25%, #000),
+			color-mix(in oklab, var(--_sonic-lit) 60%, #000)
+		);
+	}
+
+	.sonic-key:disabled {
+		--_sonic-lit: var(--_sonic-lit-disabled);
+
+		color: var(--_sonic-etch);
+		cursor: default;
+	}
+
+	.sonic-key-cap {
+		position: absolute;
+		inset: var(--_sonic-key-gap);
+		display: grid;
+		place-items: center;
+		background: var(--_sonic-skirt);
+		border-radius: max(0px, var(--_sonic-key-corner) - var(--_sonic-key-gap));
+		box-shadow: var(--_sonic-key-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
+		scale: var(--_sonic-key-scale);
+		translate: 0 var(--_sonic-key-shift);
+		transition: var(--_sonic-press-transition);
+
+		&::before {
+			position: absolute;
+			inset: calc(var(--_sonic-key-size) * var(--_sonic-key-bevel-ratio));
+			content: '';
+			background:
+				radial-gradient(closest-side, var(--_sonic-key-glow), transparent), var(--_sonic-sheen),
+				var(--_sonic-face);
+			border-radius: calc(var(--_sonic-key-size) * var(--_sonic-key-face-radius-ratio));
+			box-shadow: var(--_sonic-face-shadow);
+		}
+
+		& > svg {
+			position: relative;
+			inline-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
+			block-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
+			filter: var(--_sonic-engraving);
+			mask-image: linear-gradient(var(--_sonic-light-fall), #000 15%, rgb(0 0 0 / 60%));
+			mask-repeat: no-repeat;
+		}
+	}
+
+	/* Engraving under the glow keeps a lit icon's edge */
+	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *) .sonic-key-cap > svg {
+		filter: var(--_sonic-engraving)
+			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
+	}
+
+	.sonic-key:is([aria-pressed='true'], :where([momentary][pressed]) > *)
+		.sonic-key-cap
+		> [data-sonic-when='off'],
+	.sonic-key:not([aria-pressed='true'], :where([momentary][pressed]) > *)
+		.sonic-key-cap
+		> [data-sonic-when='on'] {
+		display: none;
+	}
+}

package/dist/styles/material.css

@@ -0,0 +1,229 @@
+@layer sonic {
+	/* Resolved per control rather than on `:root`, so each follows its own cap and unit */
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-key,
+		.sonic-meter,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout
+	) {
+		--_sonic-unlit: var(--sonic-unlit, #27272a);
+
+		/* Degrees left of overhead */
+		--_sonic-light-tilt: var(--sonic-light-tilt, 17deg);
+		--_sonic-light-fall: calc(180deg - var(--_sonic-light-tilt));
+		--_sonic-cast-x: calc(sin(var(--_sonic-light-tilt)) * var(--_sonic-unit));
+		--_sonic-cast-y: calc(cos(var(--_sonic-light-tilt)) * var(--_sonic-unit));
+	}
+
+	:is(.sonic-dial, .sonic-key, .sonic-meter, .sonic-segmented-segment, .sonic-slider) {
+		--_sonic-lit: var(--sonic-lit, #f59e0b);
+	}
+
+	.sonic-meter {
+		--_sonic-hot: var(--sonic-hot, #f97316);
+		--_sonic-clip: var(--sonic-clip, #ef4444);
+	}
+
+	:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider) {
+		--_sonic-cap: var(--sonic-cap, #3f3f46);
+		--_sonic-cap-hover: var(--sonic-cap-hover, #52525b);
+		--_sonic-focus: var(--sonic-focus, oklch(90% 0.23 128deg));
+
+		/* Derived from the cap, so a reskinned cap brings its marks along */
+		--_sonic-ink: var(--sonic-mark, color-mix(in oklab, var(--_sonic-cap) 30%, #fff));
+		--_sonic-etch: color-mix(in oklab, var(--_sonic-ink) 30%, transparent);
+		--_sonic-lit-disabled: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit));
+		--_sonic-skirt: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-cap) 70%, #fff),
+			color-mix(in oklab, var(--_sonic-cap) 55%, #000)
+		);
+
+		/* Inverted from the skirt, as a dished face takes light */
+		--_sonic-face: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-cap) 85%, #000),
+			color-mix(in oklab, var(--_sonic-cap) 90%, #fff)
+		);
+		--_sonic-sheen: linear-gradient(
+			105deg,
+			transparent 20%,
+			rgb(255 255 255 / 10%) 45%,
+			transparent 55%,
+			rgb(0 0 0 / 6%) 80%
+		);
+		--_sonic-press-transition:
+			scale 60ms cubic-bezier(0.4, 0, 0.2, 1), translate 60ms cubic-bezier(0.4, 0, 0.2, 1),
+			box-shadow 60ms cubic-bezier(0.4, 0, 0.2, 1);
+		--_sonic-face-shadow:
+			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(1.5 * var(--_sonic-unit))
+				rgb(0 0 0 / 35%),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) var(--_sonic-unit)
+				rgb(255 255 255 / 12%);
+		--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit))
+			color-mix(in oklab, var(--_sonic-cap) 40%, #000);
+		--_sonic-focus-shadow: 0 0 transparent;
+		--_sonic-focus-glow: 0 0 max(4px, 3 * var(--_sonic-unit)) max(1px, 0.5 * var(--_sonic-unit))
+			color-mix(in oklab, var(--_sonic-focus) 60%, transparent);
+	}
+
+	:is(.sonic-dial, .sonic-slider) {
+		--_sonic-lit-off: var(
+			--sonic-dimmed,
+			color-mix(in oklab, var(--_sonic-lit) 50%, var(--_sonic-unlit))
+		);
+	}
+
+	:is(.sonic-dial-readout, .sonic-screen, .sonic-slider-readout) {
+		--_sonic-glass: var(--sonic-glass, color-mix(in oklab, var(--_sonic-unlit) 45%, #000));
+	}
+
+	:is(.sonic-key, .sonic-screen, .sonic-segmented) {
+		--_sonic-well:
+			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(2 * var(--_sonic-unit)) rgb(0 0 0 / 60%),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 6%);
+	}
+
+	:is(.sonic-key, .sonic-segmented) {
+		--_sonic-engraving: drop-shadow(
+				calc(-0.4 * var(--_sonic-cast-x)) calc(-0.4 * var(--_sonic-cast-y))
+					calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / 30%)
+			)
+			drop-shadow(
+				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 7%)
+			);
+	}
+
+	/* The well's full blur would fill a slot this narrow */
+	:is(.sonic-meter, .sonic-slider) {
+		--_sonic-groove:
+			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(0.75 * var(--_sonic-unit))
+				rgb(0 0 0 / 55%),
+			inset 0 0 calc(0.5 * var(--_sonic-unit)) rgb(0 0 0 / 30%),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 6%);
+	}
+
+	@media (hover: hover) {
+		:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider):not(
+				:disabled,
+				[aria-disabled='true']
+			):hover {
+			--_sonic-cap: var(--_sonic-cap-hover);
+		}
+	}
+
+	:is(.sonic-dial, .sonic-key, .sonic-segmented-segment, .sonic-slider):focus-visible {
+		--_sonic-cap: var(--_sonic-cap-hover);
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+
+		/* Painted only in forced colours; inset so it adds no size */
+		outline: 2px solid transparent;
+		outline-offset: -2px;
+	}
+
+	/* Keeps the glow while focus is in the entry; its own rule, since an engine without `:state()` drops a whole selector list */
+	:state(editing) > :is(.sonic-dial, .sonic-slider) {
+		--_sonic-cap: var(--_sonic-cap-hover);
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+	}
+
+	:is(.sonic-dial-readout, .sonic-slider-readout) {
+		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
+		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
+
+		box-sizing: border-box;
+		display: grid;
+		place-items: center;
+		min-inline-size: calc(1.75 * var(--_sonic-readout-size));
+		block-size: var(--_sonic-readout-size);
+		padding: 0 calc(0.3 * var(--_sonic-readout-size));
+		margin: 0 0 calc(0.25 * var(--_sonic-readout-size));
+		position-area: block-start;
+		position-try-fallbacks: flip-block;
+		overflow: visible;
+		font: inherit;
+		font-size: calc(0.5 * var(--_sonic-readout-size));
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		color: color-mix(in oklab, var(--_sonic-glass) 20%, #fff);
+		pointer-events: none;
+		cursor: default;
+		user-select: none;
+		background: radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
+				var(--_sonic-glass)
+			)
+			var(--_sonic-glass);
+		border: 0;
+		border-radius: calc(0.25 * var(--_sonic-readout-size));
+		box-shadow:
+			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
+				rgb(0 0 0 / 55%),
+			inset 0 0 0 max(1px, var(--_sonic-unit)) rgb(255 255 255 / 8%);
+		opacity: 0;
+		translate: 0 calc(0.15 * var(--_sonic-readout-size));
+		transition:
+			opacity 120ms ease-out,
+			translate 120ms ease-out,
+			display 120ms allow-discrete,
+			overlay 120ms allow-discrete;
+
+		&:popover-open {
+			opacity: 1;
+			translate: 0;
+
+			@starting-style {
+				opacity: 0;
+				translate: 0 calc(0.15 * var(--_sonic-readout-size));
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			translate: 0;
+
+			&:popover-open {
+				@starting-style {
+					translate: 0;
+				}
+			}
+		}
+	}
+
+	:state(editing)
+		> :is(.sonic-dial, .sonic-slider)
+		> :is(.sonic-dial-readout, .sonic-slider-readout) {
+		pointer-events: auto;
+		cursor: text;
+	}
+
+	:is(.sonic-dial-entry, .sonic-slider-entry) {
+		inline-size: 6ch;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+		text-align: center;
+		background: transparent;
+		border: 0;
+
+		&::selection {
+			color: var(--_sonic-lit);
+			background: transparent;
+		}
+
+		&:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+
+		@supports (field-sizing: content) {
+			inline-size: auto;
+			min-inline-size: 3ch;
+			field-sizing: content;
+		}
+	}
+}

package/dist/styles/meter.css

@@ -0,0 +1,271 @@
+/* The size is the thickness */
+@layer sonic {
+	/* On the host too, for the placeholder */
+	:is(sonic-meter, .sonic-meter) {
+		--_sonic-meter-size: var(--sonic-meter-size, 0.5rem);
+		--_sonic-meter-length: var(--sonic-meter-length, 8rem);
+	}
+
+	:has(> .sonic-meter):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-meter:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-meter-size);
+		block-size: var(--_sonic-meter-length);
+	}
+
+	sonic-meter[orientation='horizontal']:not(:defined, [hidden]) {
+		inline-size: var(--_sonic-meter-length);
+		block-size: var(--_sonic-meter-size);
+	}
+
+	/* Laid on its side rather than rotated, as the slider is */
+	.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-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(
+			var(--_sonic-meter-segment) * var(--_sonic-meter-segment-radius-ratio)
+		);
+
+		/* Whole segments only, so the last one ends flush */
+		--_sonic-meter-segments: round(
+			down,
+			var(--_sonic-meter-length) - 3 * var(--_sonic-meter-inset) - var(--_sonic-meter-lens) +
+				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);
+		background: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
+		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
+
+		/* Over the segments, so the lip shades them too */
+		&::after {
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			border-radius: inherit;
+			box-shadow: var(--_sonic-groove);
+		}
+	}
+
+	[orientation='horizontal'] > .sonic-meter {
+		--_sonic-meter-toward: to right;
+
+		inline-size: var(--_sonic-meter-length);
+		block-size: var(--_sonic-meter-size);
+	}
+
+	/* 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));
+		--_sonic-meter-hot-at: round(
+			clamp(
+					0,
+					(var(--_sonic-meter-hot-from) - var(--_sonic-meter-min, -60)) / var(--_sonic-meter-span),
+					1
+				) *
+				var(--_sonic-meter-segments),
+			var(--_sonic-meter-pitch)
+		);
+		--_sonic-meter-clip-at: round(
+			clamp(
+					0,
+					(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:
+			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
+				repeat,
+			linear-gradient(
+					to top,
+					transparent var(--_sonic-meter-segment-radius),
+					#000 0 calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
+					transparent 0
+				)
+				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)
+						bottom var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat,
+			radial-gradient(
+					circle var(--_sonic-meter-segment-radius) at right var(--_sonic-meter-segment-radius)
+						bottom var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				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)
+						bottom calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat,
+			radial-gradient(
+					circle var(--_sonic-meter-segment-radius) at right var(--_sonic-meter-segment-radius)
+						bottom calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 100% / 100% var(--_sonic-meter-pitch) no-repeat repeat;
+
+		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-composite: add;
+	}
+
+	[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
+				var(--_sonic-meter-segment-radius) / var(--_sonic-meter-pitch)
+				calc(100% - 2 * var(--_sonic-meter-segment-radius)) repeat no-repeat,
+			linear-gradient(
+					to right,
+					transparent var(--_sonic-meter-segment-radius),
+					#000 0 calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)),
+					transparent 0
+				)
+				0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat,
+			radial-gradient(
+					circle var(--_sonic-meter-segment-radius) at left var(--_sonic-meter-segment-radius) top
+						var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 0 / var(--_sonic-meter-pitch) 100% repeat no-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 var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat,
+			radial-gradient(
+					circle var(--_sonic-meter-segment-radius) at left
+						calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)) top
+						var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat,
+			radial-gradient(
+					circle var(--_sonic-meter-segment-radius) at left
+						calc(var(--_sonic-meter-segment) - var(--_sonic-meter-segment-radius)) bottom
+						var(--_sonic-meter-segment-radius),
+					#000 calc(100% - 0.5px),
+					transparent
+				)
+				0 0 / var(--_sonic-meter-pitch) 100% repeat no-repeat;
+
+		inset: var(--_sonic-meter-inset) auto var(--_sonic-meter-inset) var(--_sonic-meter-inset);
+		inline-size: calc(var(--_sonic-meter-segments) - var(--_sonic-meter-gap));
+		block-size: auto;
+	}
+
+	.sonic-meter-segments {
+		background: linear-gradient(
+			var(--_sonic-meter-toward),
+			color-mix(in oklab, var(--_sonic-lit) 12%, var(--_sonic-unlit)) 0 var(--_sonic-meter-hot-at),
+			color-mix(in oklab, var(--_sonic-hot) 12%, var(--_sonic-unlit)) 0 var(--_sonic-meter-clip-at),
+			color-mix(in oklab, var(--_sonic-clip) 12%, var(--_sonic-unlit)) 0
+		);
+	}
+
+	/* One mask for the bar and peak, so a frame repaints without layout */
+	.sonic-meter-level {
+		--_sonic-meter-lit: round(
+			down,
+			var(--_sonic-meter-level, 0) * var(--_sonic-meter-segments),
+			var(--_sonic-meter-pitch)
+		);
+		--_sonic-meter-held: round(
+			down,
+			var(--_sonic-meter-peak, 0) * var(--_sonic-meter-segments),
+			var(--_sonic-meter-pitch)
+		);
+
+		background: linear-gradient(
+			var(--_sonic-meter-toward),
+			var(--_sonic-lit) 0 var(--_sonic-meter-hot-at),
+			var(--_sonic-hot) 0 var(--_sonic-meter-clip-at),
+			var(--_sonic-clip) 0
+		);
+		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 0
+			),
+			var(--_sonic-meter-lights);
+		mask-composite: intersect, add, add, add, add, add, add;
+	}
+
+	.sonic-meter-clip {
+		position: absolute;
+		inset: var(--_sonic-meter-inset) var(--_sonic-meter-inset) auto;
+		block-size: var(--_sonic-meter-lens);
+		background:
+			linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%),
+			color-mix(in oklab, var(--_sonic-unlit) 60%, #000);
+		border-radius: 50%;
+
+		&::after {
+			position: absolute;
+			inset: 0;
+			content: '';
+			background: radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-clip) 55%, #fff),
+				var(--_sonic-clip)
+			);
+			border-radius: inherit;
+			opacity: var(--_sonic-meter-clipped, 0);
+		}
+	}
+
+	[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);
+		block-size: auto;
+	}
+}

package/dist/styles/screen.css

@@ -0,0 +1,47 @@
+@layer sonic {
+	.sonic-screen {
+		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
+		--_sonic-screen-aspect-ratio: var(--sonic-screen-aspect-ratio, 3);
+		--_sonic-screen-radius-ratio: var(--sonic-screen-radius-ratio, 0.15);
+		--_sonic-screen-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
+		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
+
+		position: relative;
+		box-sizing: border-box;
+		display: grid;
+		flex-shrink: 0;
+
+		/* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+		place-items: center;
+		inline-size: calc(var(--_sonic-screen-size) * var(--_sonic-screen-aspect-ratio));
+		block-size: var(--_sonic-screen-size);
+		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
+
+		/* Not the cap's ink, which a skin may darken */
+		color: color-mix(in oklab, var(--_sonic-glass) 20%, #fff);
+
+		/* A double click aimed at a neighbouring control would highlight it */
+		user-select: none;
+		background: radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
+				var(--_sonic-glass)
+			)
+			var(--_sonic-glass);
+		border-radius: calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio));
+
+		/* Over the content, so the lip shades the picture too */
+		&::after {
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			background: linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 7%), transparent 45%);
+			border-radius: inherit;
+			box-shadow:
+				var(--_sonic-well),
+				inset 0 0 calc(3 * var(--_sonic-unit)) rgb(0 0 0 / 45%);
+		}
+	}
+}