@xsynaptic/sonic-ui 0.12.0 → 0.14.0

package/dist/styles/material/bracket.css

@@ -0,0 +1,31 @@
+@layer sonic.material {
+	.sonic-xy-bracket,
+	.sonic-envelope-bracket::before {
+		box-sizing: border-box;
+		inline-size: var(--_sonic-bracket-size);
+		block-size: var(--_sonic-bracket-size);
+		pointer-events: none;
+		content: '';
+		border: max(1px, 0.06 * var(--_sonic-bracket-size)) solid
+			color-mix(in oklab, var(--_sonic-glass-text) 45%, transparent);
+		border-radius: 50%;
+		opacity: 0;
+		mask: conic-gradient(
+			from 10deg,
+			#000 0 70deg,
+			transparent 0 180deg,
+			#000 0 250deg,
+			transparent 0
+		);
+		scale: 0.6;
+		transition:
+			opacity 120ms ease-out,
+			scale 120ms ease-out;
+	}
+
+	:state(dragging) > * > .sonic-xy-bracket,
+	:state(dragging) > * > .sonic-envelope-bracket::before {
+		opacity: calc(1 - var(--_sonic-relief));
+		scale: 1;
+	}
+}

package/dist/styles/material/cap.css

@@ -0,0 +1,179 @@
+@layer sonic.material {
+	:is(
+		.sonic-dial,
+		.sonic-button,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-number,
+		.sonic-segmented-option,
+		.sonic-slider,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
+		--_sonic-cap: var(--sonic-cap, transparent);
+		--_sonic-cap-hover: var(--sonic-cap-hover, transparent);
+		--_sonic-focus: var(--sonic-focus, oklch(90% 0.23 128deg));
+		--_sonic-ink: var(--sonic-ink, currentcolor);
+		--_sonic-etch: color-mix(in oklab, var(--_sonic-ink) 30%, transparent);
+		--_sonic-ink-lift: var(--sonic-ink-hover, color-mix(in oklab, var(--_sonic-ink) 60%, #fff));
+		--_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) calc(100% - 30% * var(--_sonic-relief)), #fff),
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)), #000)
+		);
+		--_sonic-face: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 15% * var(--_sonic-relief)), #000),
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 10% * var(--_sonic-relief)), #fff)
+		);
+		--_sonic-sheen: linear-gradient(
+			105deg,
+			transparent 20%,
+			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))) 45%,
+			transparent 55%,
+			rgb(0 0 0 / calc(0.06 * var(--_sonic-relief))) 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 / calc(0.35 * var(--_sonic-relief))),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) var(--_sonic-unit)
+				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)));
+		--_sonic-rim-width: max(1px, round(0.75 * var(--_sonic-unit), var(--_sonic-snap)));
+		--_sonic-rim: 0 0 0 var(--_sonic-rim-width)
+			var(
+				--sonic-cap-edge,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)), #000)
+			);
+		--_sonic-drop-shade: rgb(0 0 0 / calc(0.65 * var(--_sonic-relief)));
+		--_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-number, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+		--_sonic-ink: var(--_sonic-glass-text);
+	}
+
+	:is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+		--_sonic-lit-off: var(
+			--sonic-dimmed,
+			color-mix(in oklab, var(--_sonic-lit) 50%, var(--_sonic-unlit))
+		);
+	}
+
+	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position, .sonic-toggle-position) {
+		--_sonic-target-outset: min(0px, calc((100% - var(--sonic-target-size, 100%)) / 2));
+
+		&::after {
+			position: absolute;
+			inset: var(--_sonic-target-outset);
+			content: '';
+		}
+	}
+
+	@media (hover: hover) {
+		:is(.sonic-dial, .sonic-button, .sonic-segmented-option, .sonic-slider):not(
+				:disabled,
+				[aria-disabled='true']
+			):hover {
+			--_sonic-cap: var(--_sonic-cap-hover);
+		}
+	}
+
+	:is(
+		.sonic-dial,
+		.sonic-button,
+		.sonic-number,
+		.sonic-segmented-option,
+		.sonic-slider,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy-axis
+	):focus-visible {
+		outline: 2px solid transparent;
+		outline-offset: -2px;
+
+		&:not([data-sonic-pointer-focus]) {
+			--_sonic-cap: var(--_sonic-cap-hover);
+			--_sonic-focus-shadow: var(--_sonic-focus-glow);
+		}
+	}
+
+	:state(editing)
+		> :is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+		--_sonic-cap: var(--_sonic-cap-hover);
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+	}
+
+	@media (forced-colors: active) {
+		/* Tokens rather than properties, so a state rule that restates one still paints in system colours */
+
+		:is(
+			.sonic-dial,
+			.sonic-button,
+			.sonic-number,
+			.sonic-segmented-option,
+			.sonic-slider,
+			.sonic-toggle,
+			.sonic-waveform,
+			.sonic-wavestrip,
+			.sonic-xy
+		) {
+			--_sonic-ink: ButtonText;
+			--_sonic-etch: ButtonText;
+			--_sonic-lit-disabled: GrayText;
+			--_sonic-skirt: ButtonFace;
+			--_sonic-face: ButtonFace;
+			--_sonic-sheen: none;
+			--_sonic-face-shadow: none;
+			--_sonic-rim: 0 0 0 var(--_sonic-rim-width) var(--_sonic-ink);
+			--_sonic-drop-shade: transparent;
+			--_sonic-focus-glow: 0 0 transparent;
+		}
+
+		:is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
+			--_sonic-lit-off: Highlight;
+		}
+
+		:is(
+			:disabled > :is(.sonic-dial, .sonic-slider, .sonic-waveform, .sonic-wavestrip, .sonic-xy),
+			.sonic-button:is(:disabled, [aria-disabled='true']),
+			.sonic-segmented-option:disabled
+		) {
+			--_sonic-ink: GrayText;
+			--_sonic-etch: GrayText;
+		}
+
+		:is(
+			.sonic-dial,
+			.sonic-button,
+			.sonic-number,
+			.sonic-segmented-option,
+			.sonic-slider,
+			.sonic-waveform,
+			.sonic-wavestrip
+		):focus-visible {
+			outline-offset: 2px;
+
+			&[data-sonic-pointer-focus] {
+				outline-style: none;
+			}
+		}
+
+		:is(
+			.sonic-dial-cap,
+			.sonic-button-cap,
+			.sonic-segmented-cap,
+			.sonic-slider-cap,
+			.sonic-toggle-cap
+		) {
+			color: var(--_sonic-ink);
+			forced-color-adjust: none;
+		}
+	}
+}

package/dist/styles/material/core.css

@@ -0,0 +1,103 @@
+@property --_sonic-reveal-delay {
+	syntax: '<time>';
+	inherits: true;
+	initial-value: 250ms;
+}
+
+@layer sonic.material {
+	:is(
+		.sonic-dial,
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-button,
+		.sonic-led,
+		.sonic-switch,
+		.sonic-toggle,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-panel,
+		.sonic-ring,
+		.sonic-screen,
+		.sonic-segmented,
+		.sonic-slider,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
+		--_sonic-unlit: var(--sonic-unlit, oklch(27.4% 0.005 286deg));
+		--_sonic-relief: var(--sonic-relief, 0);
+		--_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));
+		--_sonic-snap: 1px;
+
+		@media (resolution >= 2dppx) {
+			--_sonic-snap: 0.5px;
+		}
+
+		@media (resolution >= 3dppx) {
+			--_sonic-snap: calc(1px / 3);
+		}
+	}
+
+	:is(
+		.sonic-dial,
+		.sonic-envelope,
+		.sonic-button,
+		.sonic-led,
+		.sonic-meter,
+		.sonic-number,
+		.sonic-ring,
+		.sonic-segmented-option,
+		.sonic-slider,
+		.sonic-spectrum,
+		.sonic-toggle,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
+		--_sonic-lit: var(--sonic-lit, oklch(76.9% 0.165 70deg));
+	}
+
+	:is(.sonic-led, .sonic-meter, .sonic-spectrum, .sonic-toggle) {
+		--_sonic-lit-ok: var(--sonic-lit-ok, oklch(79% 0.2 150deg));
+		--_sonic-lit-warning: var(--sonic-lit-warning, oklch(70.5% 0.187 48deg));
+		--_sonic-lit-danger: var(--sonic-lit-danger, oklch(63.7% 0.208 25deg));
+	}
+
+	:is(
+		.sonic-dial,
+		.sonic-envelope,
+		.sonic-number,
+		.sonic-slider,
+		.sonic-waveform,
+		.sonic-wavestrip,
+		.sonic-xy
+	) {
+		--_sonic-reveal-delay: var(--sonic-reveal-delay, 250ms);
+	}
+
+	@media (forced-colors: active) {
+		:is(
+			.sonic-dial,
+			.sonic-button,
+			.sonic-led,
+			.sonic-meter,
+			.sonic-number,
+			.sonic-ring,
+			.sonic-segmented-option,
+			.sonic-slider,
+			.sonic-toggle
+		) {
+			--_sonic-lit: Highlight;
+			--_sonic-unlit: GrayText;
+		}
+	}
+}

package/dist/styles/material/glass.css

@@ -0,0 +1,62 @@
+@layer sonic.material {
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope,
+		.sonic-envelope-readout,
+		.sonic-number,
+		.sonic-screen,
+		.sonic-slider-readout,
+		.sonic-spectrum,
+		.sonic-waveform,
+		.sonic-waveform-readout,
+		.sonic-wavestrip,
+		.sonic-wavestrip-readout,
+		.sonic-xy,
+		.sonic-xy-readout
+	) {
+		--_sonic-glass-slab: color-mix(in oklab, var(--_sonic-unlit) 45%, #000);
+		--_sonic-glass-base: var(
+			--sonic-glass,
+			color-mix(
+				in oklab,
+				var(--_sonic-glass-slab) calc(100% * var(--_sonic-relief)),
+				light-dark(oklch(97% 0.003 286deg), var(--_sonic-glass-slab))
+			)
+		);
+		--_sonic-glass: var(--_sonic-glass-own, var(--_sonic-glass-base));
+		--_sonic-glass-fill: radial-gradient(
+				closest-side,
+				color-mix(
+					in oklab,
+					var(--_sonic-glass) calc(100% - 12% * var(--_sonic-glass-depth, var(--_sonic-relief))),
+					#fff
+				),
+				var(--_sonic-glass)
+			)
+			var(--_sonic-glass);
+		--_sonic-glass-text: var(
+			--sonic-glass-text,
+			color-mix(
+				in oklab,
+				var(--_sonic-glass) 20%,
+				oklch(from var(--_sonic-glass) clamp(0, (0.6 - l) * 1000, 1) 0 0deg / 100%)
+			)
+		);
+
+		/* Invalid with the token unset, so the default takes over */
+		--_sonic-glass-edge-colour: var(--_sonic-glass-edge-colour-own, var(--sonic-glass-edge));
+		--_sonic-glass-edge-width: var(--_sonic-glass-edge-width-own, var(--sonic-glass-edge-width));
+		--_sonic-glass-edge-set: var(--_sonic-glass-edge-width, 1px) solid
+			var(--_sonic-glass-edge-colour);
+		--_sonic-glass-edge: var(
+			--_sonic-glass-edge-set,
+			var(--_sonic-glass-edge-width, calc(1px * (1 - var(--_sonic-relief)))) solid
+				color-mix(in oklab, currentcolor 35%, transparent)
+		);
+
+		/* Glass is forced to Canvas like the page, so only a border shows its edge */
+		@media (forced-colors: active) {
+			--_sonic-glass-edge: 1px solid CanvasText;
+		}
+	}
+}

package/dist/styles/material/groove.css

@@ -0,0 +1,10 @@
+@layer sonic.material {
+	: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 / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 calc(0.5 * var(--_sonic-unit)) rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0
+				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
+	}
+}

package/dist/styles/material/keycap.css

@@ -0,0 +1,95 @@
+@layer sonic.material {
+	:is(.sonic-button, .sonic-segmented, .sonic-toggle) {
+		--_sonic-well-floor: var(
+			--sonic-well,
+			linear-gradient(
+				var(--_sonic-light-fall),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-unlit) 55%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-unlit) 85%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				)
+			)
+		);
+		--_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 / calc(0.3 * var(--_sonic-relief)))
+			)
+			drop-shadow(
+				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0
+					rgb(255 255 255 / calc(0.07 * var(--_sonic-relief)))
+			);
+	}
+
+	/* On the option rather than the strip, where forced colours clear the drop shade */
+
+	:is(.sonic-button, .sonic-segmented-option, .sonic-toggle) {
+		--_sonic-press-drop: calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y))
+			var(--_sonic-unit) var(--_sonic-drop-shade);
+		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / -2);
+		--_sonic-keycap-scale: 1;
+		--_sonic-keycap-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-keycap-glow: transparent;
+		--_sonic-keycap-lit-glow: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(15% * var(--_sonic-relief)),
+			transparent
+		);
+		--_sonic-legend-glow: drop-shadow(
+			0 0 var(--_sonic-unit)
+				color-mix(in oklab, var(--_sonic-lit) calc(24% * var(--_sonic-relief)), transparent)
+		);
+		--_sonic-legend-lit-from: var(--_sonic-lit);
+		--_sonic-legend-lit: color-mix(
+			in oklab,
+			var(--sonic-cap) 0%,
+			oklch(
+				from
+					color-mix(
+						in oklab,
+						oklch(from var(--_sonic-ink) l c h / clamp(0, (0.6 - l) * 1000, 1)),
+						oklch(from var(--_sonic-legend-lit-from) l c h / 0.1%)
+					)
+					l c h / 100%
+			)
+		);
+	}
+
+	/* Each sheet maps its own depth, corner, bevel and face corner onto the `keycap` tokens */
+
+	:is(.sonic-button-cap, .sonic-segmented-cap, .sonic-toggle-cap) {
+		display: grid;
+		place-items: center;
+		background: var(--_sonic-skirt);
+		border-radius: var(--_sonic-keycap-corner);
+		box-shadow:
+			var(--_sonic-keycap-drop),
+			var(--_sonic-rim),
+			0 0 0 var(--_sonic-rim-width) var(--_sonic-blank-edge, transparent),
+			var(--_sonic-focus-shadow);
+		scale: var(--_sonic-keycap-scale);
+		translate: 0 var(--_sonic-keycap-shift);
+		transition: var(--_sonic-press-transition);
+
+		&::before {
+			position: absolute;
+			inset: var(--_sonic-keycap-bevel);
+			content: '';
+			background:
+				radial-gradient(closest-side, var(--_sonic-keycap-glow), transparent), var(--_sonic-sheen),
+				var(--_sonic-face);
+			border-radius: var(--_sonic-keycap-face-corner);
+			box-shadow: var(--_sonic-face-shadow);
+		}
+
+		& > * {
+			position: relative;
+		}
+	}
+}

package/dist/styles/material/lens.css

@@ -0,0 +1,11 @@
+@layer sonic.material {
+	:is(.sonic-led, .sonic-meter) {
+		--_sonic-lens-glint: linear-gradient(
+			var(--_sonic-light-fall),
+			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))),
+			transparent 60%
+		);
+		--_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);
+	}
+}

package/dist/styles/material/pane.css

@@ -0,0 +1,97 @@
+@keyframes sonic-glass-breathe {
+	to {
+		opacity: calc(0.4 * min(1, var(--_sonic-glass-texture)));
+	}
+}
+
+@layer sonic.material {
+	/* 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-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));
+
+		position: relative;
+		box-sizing: border-box;
+		display: grid;
+		flex-shrink: 0;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+		place-items: center;
+		font-family: var(--sonic-glass-font, inherit);
+		color: var(--_sonic-glass-text);
+		user-select: none;
+		background: var(--_sonic-glass-fill);
+		border: var(--_sonic-glass-edge);
+
+		@media (forced-colors: active) {
+			--_sonic-glass-texture: 0;
+		}
+
+		&::after {
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			content: '';
+			background:
+				linear-gradient(
+					var(--_sonic-light-fall),
+					rgb(255 255 255 / calc(0.07 * var(--_sonic-glass-depth))),
+					transparent 45%
+				),
+				radial-gradient(
+					farthest-corner,
+					transparent 55%,
+					rgb(0 0 0 / calc(0.4 * var(--_sonic-glass-texture)))
+				),
+				repeating-linear-gradient(
+					to bottom,
+					rgb(0 0 0 / calc(0.025 * var(--_sonic-glass-texture))) 0
+						calc(var(--_sonic-glass-pitch) / 2),
+					transparent 0 var(--_sonic-glass-pitch)
+				);
+			border-radius: inherit;
+			box-shadow:
+				var(--_sonic-well),
+				inset 0 0 calc(3 * var(--_sonic-glass-depth) * var(--_sonic-unit)) rgb(0 0 0 / 45%);
+		}
+
+		@media (forced-colors: none) {
+			/* No var() beside the tile, which would parse the url() again on every style recalculation */
+			&::before {
+				position: absolute;
+				inset: 0;
+				color: color-mix(in oklab, var(--_sonic-glass-text) 7.5%, transparent);
+				pointer-events: none;
+				content: '';
+				background:
+					radial-gradient(closest-side, currentcolor, transparent) no-repeat,
+					url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.056 -0.01925'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
+						0 0 / 128px 128px repeat;
+				border-radius: inherit;
+				opacity: min(1, var(--_sonic-glass-texture));
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				&:is(:focus-visible, :focus-within)::before,
+				:state(dragging) > &::before {
+					animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
+				}
+
+				@media (hover: hover) {
+					&:hover::before {
+						animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
+					}
+				}
+			}
+		}
+	}
+}

package/dist/styles/material/readout.css

@@ -0,0 +1,87 @@
+@property --_sonic-readout-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 24px;
+}
+
+@layer sonic.material {
+	:is(.sonic-dial, .sonic-envelope, .sonic-slider, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+		--_sonic-readout-size: var(--sonic-readout-size, 1.5rem);
+	}
+
+	:is(
+		.sonic-dial-readout,
+		.sonic-envelope-readout,
+		.sonic-slider-readout,
+		.sonic-waveform-readout,
+		.sonic-wavestrip-readout,
+		.sonic-xy-readout
+	) {
+		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
+		--_sonic-glass-own: var(--sonic-readout-glass);
+		--_sonic-glass-edge-colour-own: var(--sonic-readout-edge);
+		--_sonic-glass-edge-width-own: var(--sonic-readout-edge-width);
+
+		box-sizing: border-box;
+		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-family: var(--sonic-glass-font, inherit);
+		font-size: calc(0.5 * var(--_sonic-readout-size));
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		color: var(--sonic-readout-text, var(--_sonic-glass-text));
+		white-space: nowrap;
+		pointer-events: none;
+		cursor: default;
+		user-select: none;
+		background: var(--_sonic-glass-fill);
+		border: var(--_sonic-glass-edge);
+		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 / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+				rgb(255 255 255 / calc(0.08 * var(--_sonic-relief)));
+		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;
+
+		/* Grid only while open; engines keep the flip a closed readout took against a filtered ancestor */
+		&:popover-open {
+			display: grid;
+			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, .sonic-waveform, .sonic-wavestrip) > & {
+			pointer-events: auto;
+			cursor: text;
+		}
+	}
+}

package/dist/styles/material/scale.css

@@ -0,0 +1,30 @@
+@layer sonic.material {
+	:is(.sonic-dial-scale, .sonic-slider-scale) {
+		position: absolute;
+		inset: 0;
+		line-height: 1;
+		white-space: nowrap;
+		pointer-events: none;
+
+		& > * {
+			position: absolute;
+		}
+
+		& svg {
+			display: block;
+			inline-size: 1em;
+			block-size: 1em;
+		}
+
+		& > .sonic-scale-tick {
+			background: var(--sonic-scale, var(--_sonic-etch));
+		}
+	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {
+			forced-color-adjust: none;
+			background: var(--_sonic-etch);
+		}
+	}
+}