@xsynaptic/sonic-ui 0.10.4 → 0.13.0

package/dist/styles/material.css

@@ -1,745 +1,15 @@
-@property --_sonic-readout-size {
-	syntax: '<length>';
-	inherits: true;
-	initial-value: 24px;
-}
-
-@property --_sonic-detent-zone {
-	syntax: '<length>';
-	inherits: true;
-	initial-value: 8px;
-}
-
-@property --_sonic-reveal-delay {
-	syntax: '<time>';
-	inherits: true;
-	initial-value: 250ms;
-}
-
-@keyframes sonic-glass-breathe {
-	to {
-		opacity: calc(0.4 * min(1, var(--_sonic-glass-texture)));
-	}
-}
-
-@layer sonic {
-	:is(
-		.sonic-dial,
-		.sonic-dial-readout,
-		.sonic-envelope,
-		.sonic-envelope-readout,
-		.sonic-button,
-		.sonic-led,
-		.sonic-switch,
-		.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-waveform,
-		.sonic-wavestrip,
-		.sonic-xy
-	) {
-		--_sonic-lit: var(--sonic-lit, oklch(76.9% 0.165 70deg));
-	}
-
-	/* On the parts, since a recipe's `var()`s resolve where it is declared */
-	.sonic-dial-ring,
-	.sonic-dial-modulation,
-	.sonic-ring::before {
-		--_sonic-arc-mask: radial-gradient(
-			closest-side,
-			transparent calc(100% - var(--_sonic-arc-width) - 0.5px),
-			#000 calc(100% - var(--_sonic-arc-width)),
-			#000 calc(100% - var(--_sonic-arc-inset) - 0.5px),
-			transparent calc(100% - var(--_sonic-arc-inset))
-		);
-		--_sonic-arc-shade: radial-gradient(
-			closest-side,
-			rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))) calc(100% - var(--_sonic-arc-width)),
-			transparent calc(100% - var(--_sonic-arc-width) * 0.4),
-			rgb(0 0 0 / calc(0.25 * var(--_sonic-relief))) 100%
-		);
-	}
-
-	: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);
-	}
-
-	:is(.sonic-led, .sonic-meter, .sonic-spectrum) {
-		--_sonic-hot: var(--sonic-hot, oklch(70.5% 0.187 48deg));
-		--_sonic-clip: var(--sonic-clip, oklch(63.7% 0.208 25deg));
-	}
-
-	:is(
-		.sonic-dial,
-		.sonic-button,
-		.sonic-switch,
-		.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-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
-		--_sonic-detent-zone: var(--sonic-detent-zone, 8px);
-	}
-
-	: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,
-		.sonic-envelope,
-		.sonic-number,
-		.sonic-slider,
-		.sonic-waveform,
-		.sonic-wavestrip,
-		.sonic-xy
-	) {
-		--_sonic-reveal-delay: var(--sonic-reveal-delay, 250ms);
-	}
-
-	: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-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-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);
-		--_sonic-glass-edge-width: 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;
-		}
-	}
-
-	/* 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;
-					}
-				}
-			}
-		}
-	}
-
-	:is(
-		.sonic-envelope,
-		.sonic-button,
-		.sonic-number,
-		.sonic-screen,
-		.sonic-segmented,
-		.sonic-spectrum,
-		.sonic-waveform,
-		.sonic-wavestrip,
-		.sonic-xy
-	) {
-		--_sonic-well-depth: var(--_sonic-glass-depth, 1);
-		--_sonic-well:
-			inset calc(var(--_sonic-well-depth) * var(--_sonic-cast-x))
-				calc(var(--_sonic-well-depth) * var(--_sonic-cast-y))
-				calc(2 * var(--_sonic-well-depth) * var(--_sonic-unit))
-				rgb(0 0 0 / calc(0.6 * var(--_sonic-relief))),
-			calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-x))
-				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0
-				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
-	}
-
-	:is(.sonic-button, .sonic-segmented) {
-		--_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-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)
-		);
-	}
-
-	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position) {
-		--_sonic-target-outset: min(0px, calc((100% - var(--sonic-target-size, 100%)) / 2));
-
-		&::after {
-			position: absolute;
-			inset: var(--_sonic-target-outset);
-			content: '';
-		}
-	}
-
-	/* Each sheet maps its own depth, corner, bevel and face corner onto the `keycap` tokens */
-	:is(.sonic-button-cap, .sonic-segmented-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;
-		}
-	}
-
-	.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;
-	}
-
-	: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)));
-	}
-
-	@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);
-	}
-
-	: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: var(--sonic-readout-glass, var(--_sonic-glass-base));
-		--_sonic-glass-edge-colour: var(--sonic-readout-edge, var(--sonic-glass-edge));
-		--_sonic-glass-edge-width: var(--sonic-readout-edge-width, var(--sonic-glass-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;
-		}
-	}
-
-	:is(
-		.sonic-dial-entry,
-		.sonic-number-entry,
-		.sonic-slider-entry,
-		.sonic-waveform-entry,
-		.sonic-wavestrip-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;
-		}
-	}
-
-	: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);
-		}
-
-		:is(
-			.sonic-dial,
-			.sonic-button,
-			.sonic-led,
-			.sonic-meter,
-			.sonic-number,
-			.sonic-ring,
-			.sonic-segmented-option,
-			.sonic-slider
-		) {
-			--_sonic-lit: Highlight;
-			--_sonic-unlit: GrayText;
-		}
-
-		/* 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-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) {
-			color: var(--_sonic-ink);
-			forced-color-adjust: none;
-		}
-	}
-}
+@layer sonic.material, sonic.control;
+
+@import './material/core.css';
+@import './material/cap.css';
+@import './material/glass.css';
+@import './material/pane.css';
+@import './material/well.css';
+@import './material/readout.css';
+@import './material/value.css';
+@import './material/keycap.css';
+@import './material/arc.css';
+@import './material/lens.css';
+@import './material/bracket.css';
+@import './material/groove.css';
+@import './material/scale.css';