@xsynaptic/sonic-ui 0.24.0 → 0.25.1

package/dist/styles/meter.css

@@ -66,8 +66,9 @@
 		container-type: size;
 		background: var(--_sonic-lens-bezel);
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
+	}
 
-		&::after {
+		.sonic-meter::after {
 			position: absolute;
 			inset: 0;
 			pointer-events: none;
@@ -75,7 +76,6 @@
 			border-radius: inherit;
 			box-shadow: var(--_sonic-groove);
 		}
-	}
 
 	[orientation='horizontal'] > .sonic-meter {
 		--_sonic-meter-toward: to right;
@@ -167,8 +167,10 @@
 		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-segment-mask);
-		mask-composite: add;
+		-webkit-mask: var(--_sonic-meter-segment-mask);
+		        mask: var(--_sonic-meter-segment-mask);
+		-webkit-mask-composite: source-over;
+		        mask-composite: add;
 	}
 
 	:state(ladder) > .sonic-meter > :is(.sonic-meter-segments, .sonic-meter-bar) {
@@ -270,7 +272,7 @@
 	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
-				rgb(from var(--_sonic-shine) r g b / calc(0.45 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(45% * var(--_sonic-relief)), transparent),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
@@ -321,7 +323,17 @@
 			var(--_sonic-lit-warning) 0 var(--_sonic-meter-clip-at),
 			var(--_sonic-lit-danger) 0
 		);
-		mask:
+		-webkit-mask:
+			linear-gradient(
+				var(--_sonic-meter-toward),
+				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-segment-mask);
+		        mask:
 			linear-gradient(
 				var(--_sonic-meter-toward),
 				transparent var(--_sonic-meter-lit-from),
@@ -331,7 +343,8 @@
 				transparent 0
 			),
 			var(--_sonic-meter-segment-mask);
-		mask-composite: intersect, add, add, add, add, add, add;
+		-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+		        mask-composite: intersect, add, add, add, add, add, add;
 	}
 
 	.sonic-meter-clip {
@@ -340,8 +353,9 @@
 		block-size: var(--_sonic-meter-lens);
 		background: var(--_sonic-lens);
 		border-radius: 50%;
+	}
 
-		&::after {
+		.sonic-meter-clip::after {
 			position: absolute;
 			inset: 0;
 			content: '';
@@ -353,7 +367,6 @@
 			border-radius: inherit;
 			opacity: var(--_sonic-meter-clipped, 0);
 		}
-	}
 
 	:is([value], :state(ladder)) > .sonic-meter > .sonic-meter-clip {
 		display: none;
@@ -370,12 +383,12 @@
 		.sonic-meter {
 			forced-color-adjust: none;
 			background: Canvas;
+		}
 
-			&::after {
+			.sonic-meter::after {
 				border: 1px solid CanvasText;
 				box-shadow: none;
 			}
-		}
 
 		:is(.sonic-meter-segments, .sonic-meter-clip) {
 			background: var(--_sonic-unlit);

package/dist/styles/number.css

@@ -47,7 +47,8 @@
 		line-height: 1;
 		touch-action: var(--sonic-touch-action, pan-x);
 		cursor: ns-resize;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 

package/dist/styles/panel.css

@@ -29,14 +29,14 @@
 		box-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shine) calc(7% * var(--_sonic-relief)), transparent),
 			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
 				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
-				rgb(from var(--_sonic-shade) r g b / calc(0.35 * var(--_sonic-relief))),
+				color-mix(in srgb, var(--_sonic-shade) calc(35% * var(--_sonic-relief)), transparent),
 			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(from var(--_sonic-shade) r g b / calc(0.45 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(45% * var(--_sonic-relief)), transparent);
 	}
 
 	.sonic-panel-title {
@@ -45,15 +45,14 @@
 		align-items: center;
 		margin: 0;
 		white-space: nowrap;
+	}
 
-		&::before,
-		&::after {
+		.sonic-panel-title::before,.sonic-panel-title::after {
 			flex: 1;
 			min-inline-size: 1em;
 			content: '';
 			border-block-start: 1px solid var(--_sonic-panel-line);
 		}
-	}
 
 	.sonic-panel-rule {
 		align-self: stretch;

package/dist/styles/region.css

@@ -0,0 +1,88 @@
+@layer sonic.material, sonic.control;
+
+@layer sonic.control {
+	sonic-region {
+		display: none;
+	}
+
+	.sonic-region {
+		--_sonic-region-paint: var(--sonic-region-bracket, var(--_sonic-marker, var(--_sonic-ink)));
+		--_sonic-region-colour: var(--_sonic-region-paint);
+		--_sonic-region-bracket-width: var(
+			--sonic-region-bracket-width,
+			max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
+		);
+
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: calc(var(--_sonic-region-from, 0) * 100%);
+		inline-size: calc((var(--_sonic-region-to, 0) - var(--_sonic-region-from, 0)) * 100%);
+		min-inline-size: calc(2 * var(--_sonic-region-bracket-width));
+		pointer-events: none;
+		border-radius: var(--sonic-region-bracket-radius, calc(2 * var(--_sonic-unit)));
+	}
+
+		.sonic-region:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: var(--sonic-focus-outline-offset, -2px);
+		}
+
+			.sonic-region:focus-visible:not([data-sonic-pointer-focus]) {
+				outline: var(--sonic-focus-outline, 2px solid transparent);
+				box-shadow: var(--_sonic-focus-glow);
+			}
+
+	:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+		--_sonic-region-colour: color-mix(in oklab, var(--_sonic-region-paint) 45%, transparent);
+	}
+
+	.sonic-region-bracket {
+		position: absolute;
+		inset: 0;
+		box-sizing: border-box;
+		background: var(--sonic-region-fill, transparent);
+		border: var(--_sonic-region-bracket-width) solid var(--_sonic-region-colour);
+		border-radius: inherit;
+	}
+
+	.sonic-region[data-sonic-clipped~='start'] {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='start'] > .sonic-region-bracket {
+			border-inline-start-width: 0;
+		}
+
+	.sonic-region[data-sonic-clipped~='end'] {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+		.sonic-region[data-sonic-clipped~='end'] > .sonic-region-bracket {
+			border-inline-end-width: 0;
+		}
+
+	@media (forced-colors: active) {
+		.sonic-region {
+			--_sonic-region-colour: CanvasText;
+		}
+
+			.sonic-region:focus-visible {
+				outline-offset: 2px;
+			}
+
+				.sonic-region[data-sonic-pointer-focus]:focus-visible {
+					outline-style: none;
+				}
+
+		:is(.sonic-region[aria-disabled='true'], [dimmed] > .sonic-wavestrip .sonic-region) {
+			--_sonic-region-colour: GrayText;
+		}
+
+		.sonic-region-bracket {
+			forced-color-adjust: none;
+			background: none;
+		}
+	}
+}

package/dist/styles/ring.css

@@ -28,8 +28,9 @@
 			var(--_sonic-ring-size) * (var(--_sonic-ring-ratio) + var(--_sonic-ring-gap-ratio))
 		);
 		border-radius: 50%;
+	}
 
-		&::before {
+		.sonic-ring::before {
 			--_sonic-arc-width: calc(var(--_sonic-ring-size) * var(--_sonic-ring-ratio));
 			--_sonic-arc-inset: 0px;
 
@@ -49,17 +50,17 @@
 					transparent 0
 				);
 			border-radius: 50%;
-			mask: var(--_sonic-arc-mask);
+			-webkit-mask: var(--_sonic-arc-mask);
+			        mask: var(--_sonic-arc-mask);
 		}
 
 		@media (forced-colors: active) {
-			&::before {
+			.sonic-ring::before {
 				--_sonic-arc-shade: none;
 
 				forced-color-adjust: none;
 			}
 		}
-	}
 
 	.sonic-ring > :not(:defined),
 	.sonic-ring > * > .sonic-button {

package/dist/styles/screen.css

@@ -11,14 +11,16 @@
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
 		--_sonic-screen-radius-ratio: var(--sonic-screen-radius-ratio, 0.15);
 		--_sonic-screen-radius-own: calc(var(--_sonic-screen-size) * var(--sonic-screen-radius-ratio));
+		--_sonic-screen-radius: var(
+			--_sonic-screen-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
+		);
 		--_sonic-screen-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
+		--_sonic-screen-inset: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
 		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
 
 		min-block-size: var(--_sonic-screen-size);
-		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
-		border-radius: var(
-			--_sonic-screen-radius-own,
-			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
-		);
+		padding: var(--_sonic-screen-inset);
+		border-radius: var(--_sonic-screen-radius);
 	}
 }

package/dist/styles/segmented.css

@@ -65,7 +65,8 @@
 		block-size: var(--_sonic-segmented-size);
 		padding: var(--_sonic-segmented-gap);
 		touch-action: pan-y;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		background: var(--_sonic-well-floor);
 		border-radius: var(--_sonic-segmented-corner);
 		box-shadow: var(--_sonic-well);
@@ -166,16 +167,16 @@
 
 		position: relative;
 		padding-inline: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-padding-ratio));
+	}
 
-		& > * {
+		.sonic-segmented-cap > * {
 			filter: var(--_sonic-engraving);
 		}
 
-		& > svg {
+		.sonic-segmented-cap > svg {
 			inline-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
 			block-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-icon-ratio));
 		}
-	}
 
 	.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
 		filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
@@ -190,14 +191,14 @@
 			--_sonic-skirt: var(--_sonic-lit);
 			--_sonic-face: var(--_sonic-lit);
 			--_sonic-ink: HighlightText;
+		}
 
-			&:disabled {
+			.sonic-segmented-option[aria-checked='true']:disabled {
 				--_sonic-ink: ButtonFace;
 			}
 
-			& .sonic-segmented-cap > * {
+			.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
 				filter: none;
 			}
-		}
 	}
 }

package/dist/styles/slider.css

@@ -112,16 +112,20 @@
 		container-type: size;
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		transition:
 			--_sonic-slider-groove-hovered var(--_sonic-fade-duration) ease-out
 				var(--_sonic-slider-groove-hover-delay),
 			--_sonic-slider-groove-held var(--_sonic-fade-duration) ease-out;
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	.sonic-slider {
 			transition: none;
-		}
 	}
+		}
 
 	:where(:not(:disabled)) > .sonic-slider:focus-visible,
 	:state(dragging) > .sonic-slider {
@@ -206,11 +210,14 @@
 				1,
 				1
 			);
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	:state(springing) > .sonic-slider {
 			transition: none;
-		}
 	}
+		}
 
 	[dimmed] > .sonic-slider {
 		--_sonic-slider-lit: var(--_sonic-lit-off);
@@ -248,7 +255,15 @@
 			var(--_sonic-etch) 0 var(--_sonic-unit),
 			transparent 0 var(--_sonic-slider-notch-pitch)
 		);
-		mask: linear-gradient(
+		-webkit-mask: linear-gradient(
+			var(--_sonic-slider-across),
+			transparent 15%,
+			#000 0 calc(var(--_sonic-slider-notch-mid) - var(--_sonic-slider-notch-lip)),
+			transparent 0 calc(var(--_sonic-slider-notch-mid) + var(--_sonic-slider-notch-lip)),
+			#000 0 85%,
+			transparent 0
+		);
+		        mask: linear-gradient(
 			var(--_sonic-slider-across),
 			transparent 15%,
 			#000 0 calc(var(--_sonic-slider-notch-mid) - var(--_sonic-slider-notch-lip)),
@@ -269,8 +284,9 @@
 
 	.sonic-slider-scale {
 		font-size: calc(var(--_sonic-slider-size) * var(--_sonic-slider-scale-font-ratio));
+	}
 
-		& > * {
+		.sonic-slider-scale > * {
 			--_sonic-slider-scale-along: calc(
 				var(--_sonic-slider-cap) / 2 + var(--_sonic-scale-at, 0) * var(--_sonic-slider-travel)
 			);
@@ -280,23 +296,19 @@
 			translate: -50% 0;
 		}
 
-		& > .sonic-scale-tick {
+		.sonic-slider-scale > .sonic-scale-tick {
 			inline-size: var(--_sonic-unit);
 			block-size: calc(var(--_sonic-slider-scale-band) * 0.4);
 		}
-	}
-
-	[orientation='vertical'] > .sonic-slider > .sonic-slider-scale {
-		& > * {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-scale) > * {
 			inset: auto var(--_sonic-slider-scale-edge) var(--_sonic-slider-scale-along) auto;
 			translate: 0 50%;
 		}
 
-		& > .sonic-scale-tick {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-scale) > .sonic-scale-tick {
 			inline-size: calc(var(--_sonic-slider-scale-band) * 0.4);
 			block-size: var(--_sonic-unit);
 		}
-	}
 
 	.sonic-slider-groove {
 		--_sonic-slider-lit-to: var(--_sonic-slider-played, var(--_sonic-slider-value, 0));
@@ -314,12 +326,13 @@
 				transparent
 					calc(
 						var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove-end) * sign(var(--_sonic-slider-lit-low))
+							var(--_sonic-slider-groove-end) * clamp(0, var(--_sonic-slider-lit-low) * 100000, 1)
 					),
 				var(--_sonic-slider-lit) 0
 					calc(
 						var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove-end) * (2 - sign(1 - var(--_sonic-slider-lit-high)))
+							var(--_sonic-slider-groove-end) *
+							(2 - clamp(0, (1 - var(--_sonic-slider-lit-high)) * 100000, 1))
 					),
 				transparent 0
 			),
@@ -401,41 +414,37 @@
 
 		display: block;
 		background: color-mix(in oklab, var(--_sonic-slider-modulation) 50%, transparent);
+	}
 
-		&::before,
-		&::after {
+		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before,:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
 			inset: 0 auto 0 var(--_sonic-slider-live-start);
 			inline-size: var(--_sonic-slider-live-length);
 			background: var(--_sonic-slider-modulation);
 			border-radius: inherit;
 		}
 
-		&::after {
+		:is(:state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
 			inset: var(--_sonic-slider-tick-overhang) auto var(--_sonic-slider-tick-overhang)
 				var(--_sonic-slider-tick-start);
 			inline-size: var(--_sonic-unit);
 			background: var(--_sonic-slider-modulation-tick);
 		}
-	}
-
-	:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation {
-		&::before {
+		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::before {
 			inset: auto 0 var(--_sonic-slider-live-start);
 			inline-size: auto;
 			block-size: var(--_sonic-slider-live-length);
 		}
 
-		&::after {
+		:is(:where([orientation='vertical']):state(modulated) > .sonic-slider > .sonic-slider-modulation)::after {
 			inset: auto var(--_sonic-slider-tick-overhang) var(--_sonic-slider-tick-start);
 			inline-size: auto;
 			block-size: var(--_sonic-unit);
 		}
-	}
 
 	.sonic-slider-cap {
 		--_sonic-slider-indicator-width: calc(
@@ -464,41 +473,40 @@
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
 		translate: var(--_sonic-slider-offset) 0;
+	}
 
-		&::before,
-		&::after {
+		.sonic-slider-cap::before,.sonic-slider-cap::after {
 			position: absolute;
 			content: '';
 		}
 
-		&::before {
+		.sonic-slider-cap::before {
 			inset: var(--_sonic-slider-bevel);
 			background: var(--_sonic-face);
 			border-radius: max(0px, var(--_sonic-slider-corner) - var(--_sonic-slider-bevel));
 			box-shadow: var(--_sonic-face-shadow);
 		}
 
-		&::after {
+		.sonic-slider-cap::after {
 			inset: var(--_sonic-slider-indicator-inset)
 				calc(50% - var(--_sonic-slider-indicator-width) / 2);
 			background: var(--_sonic-slider-indicator);
 			border-radius: calc(var(--_sonic-slider-indicator-width) / 2);
 			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent);
 		}
-	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-cap {
 		inset: auto 0 0 var(--_sonic-slider-scale-band);
 		inline-size: auto;
 		block-size: var(--_sonic-slider-cap);
 		translate: 0 calc(-1 * var(--_sonic-slider-offset));
+	}
 
-		&::after {
+		:is([orientation='vertical'] > .sonic-slider > .sonic-slider-cap)::after {
 			inset: calc(50% - var(--_sonic-slider-indicator-width) / 2)
 				var(--_sonic-slider-indicator-inset);
 		}
-	}
 
 	:disabled > .sonic-slider > .sonic-slider-cap::after {
 		background: var(--_sonic-ink-disabled);

package/dist/styles/spectrum.css

@@ -85,7 +85,8 @@
 
 		/* The canvas's backing size would otherwise feed an intrinsically sized parent */
 		contain: size;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 	}
 
 	[fill] > .sonic-spectrum,
@@ -94,9 +95,16 @@
 	}
 
 	.sonic-spectrum-canvas {
+		--_sonic-spectrum-corner: max(
+			0px,
+			var(--_sonic-screen-radius, 0px) - var(--_sonic-screen-inset, 0px)
+		);
+
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
+		border-end-start-radius: var(--_sonic-spectrum-corner);
+		border-end-end-radius: var(--_sonic-spectrum-corner);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the bars into what is behind them */