@xsynaptic/sonic-ui 0.10.4 → 0.13.0

package/dist/styles/led.css

@@ -1,14 +1,15 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-led-size {
 	syntax: '<length>';
 	inherits: true;
 	initial-value: 8px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	.sonic-led {
 		--_sonic-led-size: var(--sonic-led-size, 0.5rem);
 		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, calc(0.8 - 0.175 * var(--_sonic-relief)));
-		--_sonic-lit-alt: var(--sonic-lit-alt, oklch(79% 0.2 150deg));
 		--_sonic-unit: calc(var(--_sonic-led-size) / 8);
 		--_sonic-led-modelled: calc(100% * var(--_sonic-relief));
 		--_sonic-led-bezel: var(
@@ -45,9 +46,9 @@
 		}
 
 		@media (forced-colors: active) {
-			--_sonic-lit-alt: Mark;
-			--_sonic-hot: Highlight;
-			--_sonic-clip: Mark;
+			--_sonic-lit-ok: Mark;
+			--_sonic-lit-warning: Highlight;
+			--_sonic-lit-danger: Mark;
 
 			forced-color-adjust: none;
 			background: none;
@@ -59,21 +60,21 @@
 		}
 	}
 
-	.sonic-led[data-sonic-lit='alt'] {
-		--_sonic-lit: var(--_sonic-lit-alt);
+	.sonic-led[data-sonic-lit='ok'] {
+		--_sonic-lit: var(--_sonic-lit-ok);
 	}
 
-	.sonic-led[data-sonic-lit='hot'] {
-		--_sonic-lit: var(--_sonic-hot);
+	.sonic-led[data-sonic-lit='warning'] {
+		--_sonic-lit: var(--_sonic-lit-warning);
 	}
 
-	.sonic-led[data-sonic-lit='clip'] {
-		--_sonic-lit: var(--_sonic-clip);
+	.sonic-led[data-sonic-lit='danger'] {
+		--_sonic-lit: var(--_sonic-lit-danger);
 	}
 
 	/* Before the lit rule, which a latched button's LED also matches */
 	.sonic-led:is(
-		[data-sonic-lit='dim'],
+		[data-sonic-lit='idle'],
 		:where(:is([armed], [busy]) > .sonic-button:not(:disabled, [aria-disabled='true'])) *
 	) {
 		&::after {
@@ -91,11 +92,15 @@
 	}
 
 	.sonic-led:is(
-		[data-sonic-lit]:where(:not([data-sonic-lit='dim'])),
+		[data-sonic-lit]:where(:not([data-sonic-lit='idle'])),
 		:where(
 				.sonic-button[aria-pressed='true'],
 				[momentary]:state(pressed) > .sonic-button,
-				.sonic-segmented-option[aria-checked='true']
+				.sonic-segmented-option[aria-checked='true'],
+				.sonic-toggle:has(
+					> [role='switch'][aria-checked='true'],
+					> [aria-checked='true'] [data-sonic-lit]
+				)
 			)
 			*,
 		:where(:state(at-origin):not(:disabled) > .sonic-led)

package/dist/styles/material/arc.css

@@ -0,0 +1,21 @@
+@layer sonic.material {
+	/* 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%
+		);
+	}
+}

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;
+					}
+				}
+			}
+		}
+	}
+}