@xsynaptic/sonic-ui 0.10.4 → 0.13.0

package/dist/styles/meter.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-meter-size {
 	syntax: '<length>';
 	inherits: true;
@@ -16,7 +18,7 @@
 	initial-value: 4px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-meter, .sonic-meter) {
 		--_sonic-meter-size: var(--sonic-meter-size, 0.5rem);
 		--_sonic-meter-length: var(--sonic-meter-length, 8rem);
@@ -290,8 +292,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 +321,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 +350,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/number.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-number-size {
 	syntax: '<length>';
 	inherits: true;
@@ -10,7 +12,7 @@
 	initial-value: 160px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-number, .sonic-number) {
 		--_sonic-number-size: var(--sonic-number-size, 1.75rem);
 		--_sonic-number-aspect-ratio: var(--sonic-number-aspect-ratio, 3);

package/dist/styles/panel.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-panel-depth {
 	syntax: '<length>';
 	inherits: true;
@@ -10,7 +12,7 @@
 	initial-value: 12px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(.sonic-panel, .sonic-panel-title, .sonic-panel-rule) {
 		--_sonic-panel-line: color-mix(in oklab, currentcolor 20%, transparent);
 	}

package/dist/styles/ring.css

@@ -1,10 +1,12 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-ring-size {
 	syntax: '<length>';
 	inherits: true;
 	initial-value: 40px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	.sonic-ring {
 		--_sonic-ring-size: var(--sonic-ring-size, 2.5rem);
 		--_sonic-ring-ratio: var(--sonic-ring-ratio, 0.075);

package/dist/styles/screen.css

@@ -1,10 +1,12 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-screen-size {
 	syntax: '<length>';
 	inherits: true;
 	initial-value: 40px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	.sonic-screen {
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
 		--_sonic-screen-aspect-ratio: var(--sonic-screen-aspect-ratio, 3);

package/dist/styles/segmented.css

@@ -1,10 +1,12 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-segmented-size {
 	syntax: '<length>';
 	inherits: true;
 	initial-value: 32px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-segmented, .sonic-segmented) {
 		--_sonic-segmented-size: var(--sonic-segmented-size, 2rem);
 	}
@@ -78,7 +80,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 +90,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 +117,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/slider.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-slider-size {
 	syntax: '<length>';
 	inherits: true;
@@ -22,7 +24,7 @@
 	initial-value: 0;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-slider, .sonic-slider) {
 		--_sonic-slider-size: var(--sonic-slider-size, 2rem);
 		--_sonic-slider-length: var(--sonic-slider-length, 8rem);

package/dist/styles/spectrum.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-spectrum-size {
 	syntax: '<length>';
 	inherits: true;
@@ -46,7 +48,7 @@
 	initial-value: -3;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-spectrum, .sonic-spectrum) {
 		--_sonic-spectrum-size: var(--sonic-spectrum-size, 6rem);
 		--_sonic-spectrum-length: var(--sonic-spectrum-length, 20rem);
@@ -67,8 +69,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

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-switch-size {
 	syntax: '<length>';
 	inherits: true;
@@ -10,7 +12,7 @@
 	initial-value: 0;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-switch, .sonic-switch) {
 		--_sonic-switch-size: var(--sonic-switch-size, 2rem);
 	}
@@ -127,6 +129,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 +356,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 +377,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;
 		}