@xsynaptic/sonic-ui 0.10.4 → 0.12.0

package/dist/styles/button.css

@@ -84,7 +84,7 @@
 		transition-delay: var(--sonic-button-busy-delay, 0s);
 	}
 
-	.sonic-button:active:where(:not(:disabled, [aria-disabled='true'])),
+	.sonic-button:is(:active, [data-sonic-pressed]):where(:not(:disabled, [aria-disabled='true'])),
 	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
 		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
 		--_sonic-keycap-scale: var(--_sonic-button-press-scale);
@@ -126,7 +126,7 @@
 			[aria-disabled='true'],
 			:where([momentary]:state(pressed), [armed]) > *,
 			:where([busy]) > :not(:has(.sonic-led))
-		):is(:focus-visible, :active) {
+		):is(:focus-visible, :active, [data-sonic-pressed]) {
 		color: var(--_sonic-ink-lift);
 	}
 

package/dist/styles/controls.css

@@ -4,6 +4,7 @@
 @import './button.css';
 @import './led.css';
 @import './switch.css';
+@import './toggle.css';
 @import './meter.css';
 @import './number.css';
 @import './panel.css';

package/dist/styles/led.css

@@ -8,7 +8,6 @@
 	.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 +44,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 +58,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 +90,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.css

@@ -31,6 +31,7 @@
 		.sonic-button,
 		.sonic-led,
 		.sonic-switch,
+		.sonic-toggle,
 		.sonic-meter,
 		.sonic-number,
 		.sonic-panel,
@@ -75,6 +76,7 @@
 		.sonic-segmented-option,
 		.sonic-slider,
 		.sonic-spectrum,
+		.sonic-toggle,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -111,15 +113,17 @@
 		--_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-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-button,
 		.sonic-switch,
+		.sonic-toggle,
 		.sonic-number,
 		.sonic-segmented-option,
 		.sonic-slider,
@@ -359,6 +363,7 @@
 		.sonic-screen,
 		.sonic-segmented,
 		.sonic-spectrum,
+		.sonic-toggle,
 		.sonic-waveform,
 		.sonic-wavestrip,
 		.sonic-xy
@@ -374,7 +379,7 @@
 				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
 	}
 
-	:is(.sonic-button, .sonic-segmented) {
+	:is(.sonic-button, .sonic-segmented, .sonic-toggle) {
 		--_sonic-well-floor: var(
 			--sonic-well,
 			linear-gradient(
@@ -402,7 +407,7 @@
 	}
 
 	/* On the option rather than the strip, where forced colours clear the drop shade */
-	:is(.sonic-button, .sonic-segmented-option) {
+	: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);
@@ -419,9 +424,23 @@
 			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%
+			)
+		);
 	}
 
-	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position) {
+	: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 {
@@ -432,7 +451,7 @@
 	}
 
 	/* Each sheet maps its own depth, corner, bevel and face corner onto the `keycap` tokens */
-	:is(.sonic-button-cap, .sonic-segmented-cap) {
+	:is(.sonic-button-cap, .sonic-segmented-cap, .sonic-toggle-cap) {
 		display: grid;
 		place-items: center;
 		background: var(--_sonic-skirt);
@@ -679,7 +698,8 @@
 			.sonic-number,
 			.sonic-ring,
 			.sonic-segmented-option,
-			.sonic-slider
+			.sonic-slider,
+			.sonic-toggle
 		) {
 			--_sonic-lit: Highlight;
 			--_sonic-unlit: GrayText;
@@ -692,6 +712,7 @@
 			.sonic-number,
 			.sonic-segmented-option,
 			.sonic-slider,
+			.sonic-toggle,
 			.sonic-waveform,
 			.sonic-wavestrip,
 			.sonic-xy
@@ -737,7 +758,13 @@
 			}
 		}
 
-		:is(.sonic-dial-cap, .sonic-button-cap, .sonic-segmented-cap, .sonic-slider-cap) {
+		: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/meter.css

@@ -290,8 +290,9 @@
 		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
+			color-mix(in oklab, var(--_sonic-lit-warning) 12%, var(--_sonic-unlit)) 0
+				var(--_sonic-meter-clip-at),
+			color-mix(in oklab, var(--_sonic-lit-danger) 12%, var(--_sonic-unlit)) 0
 		);
 	}
 
@@ -318,8 +319,8 @@
 		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
+			var(--_sonic-lit-warning) 0 var(--_sonic-meter-clip-at),
+			var(--_sonic-lit-danger) 0
 		);
 		mask:
 			linear-gradient(
@@ -347,8 +348,8 @@
 			content: '';
 			background: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-clip) 55%, #fff),
-				var(--_sonic-clip)
+				color-mix(in oklab, var(--_sonic-lit-danger) 55%, #fff),
+				var(--_sonic-lit-danger)
 			);
 			border-radius: inherit;
 			opacity: var(--_sonic-meter-clipped, 0);

package/dist/styles/segmented.css

@@ -78,7 +78,7 @@
 		transition: color 120ms ease-out;
 	}
 
-	.sonic-segmented-option:where([data-sonic-pressed], :focus-visible:active):not(:disabled),
+	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled),
 	.sonic-segmented-option[aria-checked='true'] {
 		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
 		--_sonic-keycap-scale: var(--_sonic-segmented-press-scale);
@@ -88,7 +88,7 @@
 	.sonic-segmented-option[aria-checked='true'] {
 		--_sonic-keycap-glow: var(--_sonic-keycap-lit-glow);
 
-		color: var(--_sonic-lit);
+		color: var(--_sonic-legend-lit, var(--_sonic-lit));
 		background: var(--_sonic-segmented-well-lit);
 		box-shadow: var(--_sonic-well);
 	}
@@ -115,12 +115,16 @@
 	}
 
 	.sonic-segmented-option[aria-checked='true']:not(:disabled):focus-visible {
-		color: var(--sonic-lit-hover, var(--_sonic-lit));
+		--_sonic-legend-lit-from: var(--sonic-lit-hover, var(--_sonic-lit));
+
+		color: var(--_sonic-legend-lit, var(--_sonic-legend-lit-from));
 	}
 
 	@media (hover: hover) {
 		.sonic-segmented-option[aria-checked='true']:not(:disabled):hover {
-			color: var(--sonic-lit-hover, var(--_sonic-lit));
+			--_sonic-legend-lit-from: var(--sonic-lit-hover, var(--_sonic-lit));
+
+			color: var(--_sonic-legend-lit, var(--_sonic-legend-lit-from));
 		}
 	}
 

package/dist/styles/spectrum.css

@@ -67,8 +67,8 @@
 	.sonic-spectrum {
 		--_sonic-unit: calc(var(--_sonic-spectrum-size) / 48);
 		--_sonic-spectrum-lit: var(--_sonic-lit);
-		--_sonic-spectrum-hot: var(--_sonic-hot);
-		--_sonic-spectrum-clip: var(--_sonic-clip);
+		--_sonic-spectrum-hot: var(--_sonic-lit-warning);
+		--_sonic-spectrum-clip: var(--_sonic-lit-danger);
 		--_sonic-spectrum-grid: color-mix(in oklab, var(--_sonic-glass-text) 20%, transparent);
 		--_sonic-spectrum-hot-from: var(--sonic-spectrum-hot-from, -12);
 		--_sonic-spectrum-clip-from: var(--sonic-spectrum-clip-from, -3);

package/dist/styles/switch.css

@@ -127,6 +127,10 @@
 		}
 	}
 
+	.sonic-switch-position:disabled > .sonic-switch-label {
+		color: color-mix(in oklab, currentcolor 30%, transparent);
+	}
+
 	.sonic-switch[data-sonic-position-count] {
 		& > :is(.sonic-switch-bushing, .sonic-switch-bat) {
 			grid-area: 2 / 1 / -2 / 2;
@@ -350,7 +354,7 @@
 		--_sonic-focus-shadow: var(--_sonic-focus-glow);
 	}
 
-	.sonic-switch:has(> .sonic-switch-position:disabled) {
+	.sonic-switch:not(:has(> .sonic-switch-position:not(:disabled))) {
 		--_sonic-switch-disabled: color-mix(
 			in oklab,
 			var(--_sonic-ink) 30%,
@@ -371,7 +375,7 @@
 			--_sonic-switch-metal-shade: CanvasText;
 		}
 
-		.sonic-switch:has(> .sonic-switch-position:disabled) {
+		.sonic-switch:not(:has(> .sonic-switch-position:not(:disabled))) {
 			--_sonic-switch-metal: GrayText;
 			--_sonic-switch-metal-shade: GrayText;
 		}