@xsynaptic/sonic-ui 0.12.0 → 0.14.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);

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

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);
@@ -52,6 +54,9 @@
 		--_sonic-slider-radius-ratio: var(--sonic-slider-radius-ratio, 0.15);
 		--_sonic-slider-bevel-ratio: var(--sonic-slider-bevel-ratio, 0.075);
 		--_sonic-slider-indicator-ratio: var(--sonic-slider-indicator-ratio, 0.07);
+		--_sonic-slider-indicator: var(--sonic-slider-indicator, var(--_sonic-ink));
+		--_sonic-slider-groove-radius-ratio: var(--sonic-slider-groove-radius-ratio, 0.5);
+		--_sonic-slider-groove-anchor: var(--sonic-slider-groove-anchor, 0.5);
 		--_sonic-slider-scale-ratio: var(--sonic-slider-scale-ratio, 0.4);
 		--_sonic-slider-scale-font-ratio: var(--sonic-slider-scale-font-ratio, 0.18);
 		--_sonic-slider-scale-band: 0px;
@@ -67,6 +72,14 @@
 		--_sonic-slider-across: to bottom;
 		--_sonic-slider-cursor: ew-resize;
 		--_sonic-slider-groove: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-groove-ratio));
+		--_sonic-slider-groove-end: calc(
+			var(--_sonic-slider-groove) * clamp(0, var(--_sonic-slider-groove-radius-ratio), 0.5)
+		);
+		--_sonic-slider-groove-mid: calc(
+			var(--_sonic-slider-scale-band) + var(--_sonic-slider-groove) / 2 +
+				(var(--_sonic-slider-breadth) - var(--_sonic-slider-groove)) *
+				clamp(0, var(--_sonic-slider-groove-anchor), 1)
+		);
 		--_sonic-slider-cap: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-cap-ratio));
 		--_sonic-slider-travel: calc(100cqi - var(--_sonic-slider-cap));
 		--_sonic-slider-offset: calc(var(--_sonic-slider-value, 0) * var(--_sonic-slider-travel));
@@ -195,6 +208,9 @@
 		--_sonic-slider-notch-lip: calc(
 			var(--_sonic-slider-groove) / 2 + var(--_sonic-slider-breadth) * 0.1
 		);
+		--_sonic-slider-notch-mid: calc(
+			var(--_sonic-slider-groove-mid) - var(--_sonic-slider-scale-band)
+		);
 
 		position: absolute;
 		inset: var(--_sonic-slider-scale-band) calc((var(--_sonic-slider-cap) - var(--_sonic-unit)) / 2)
@@ -207,8 +223,8 @@
 		mask: linear-gradient(
 			var(--_sonic-slider-across),
 			transparent 15%,
-			#000 0 calc(50% - var(--_sonic-slider-notch-lip)),
-			transparent 0 calc(50% + var(--_sonic-slider-notch-lip)),
+			#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
 		);
@@ -260,9 +276,9 @@
 		--_sonic-slider-lit-high: max(var(--_sonic-slider-origin, 0), var(--_sonic-slider-lit-to));
 
 		position: absolute;
-		inset: calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2)
-			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
-			calc(50% - var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2);
+		inset: calc(var(--_sonic-slider-groove-mid) - var(--_sonic-slider-groove) / 2)
+			calc(var(--_sonic-slider-cap) / 2 - var(--_sonic-slider-groove-end))
+			calc(100% - var(--_sonic-slider-groove-mid) - var(--_sonic-slider-groove) / 2);
 		background:
 			var(--_sonic-slider-scrub-region, none),
 			linear-gradient(
@@ -270,25 +286,25 @@
 				transparent
 					calc(
 						var(--_sonic-slider-lit-low) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove) / 2 * sign(var(--_sonic-slider-lit-low))
+							var(--_sonic-slider-groove-end) * sign(var(--_sonic-slider-lit-low))
 					),
 				var(--_sonic-slider-lit) 0
 					calc(
 						var(--_sonic-slider-lit-high) * var(--_sonic-slider-travel) +
-							var(--_sonic-slider-groove) / 2 * (2 - sign(1 - var(--_sonic-slider-lit-high)))
+							var(--_sonic-slider-groove-end) * (2 - sign(1 - var(--_sonic-slider-lit-high)))
 					),
 				transparent 0
 			),
 			var(--_sonic-slider-buffered-regions, none), var(--_sonic-unlit);
-		border-radius: calc(var(--_sonic-slider-groove) / 2);
+		border-radius: var(--_sonic-slider-groove-end);
 		box-shadow: var(--_sonic-groove), var(--_sonic-focus-shadow);
 	}
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-groove {
-		inset: calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
-			calc(50% - var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2)
-			calc((var(--_sonic-slider-cap) - var(--_sonic-slider-groove)) / 2)
-			calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-groove) / 2);
+		inset: calc(var(--_sonic-slider-cap) / 2 - var(--_sonic-slider-groove-end))
+			calc(100% - var(--_sonic-slider-groove-mid) - var(--_sonic-slider-groove) / 2)
+			calc(var(--_sonic-slider-cap) / 2 - var(--_sonic-slider-groove-end))
+			calc(var(--_sonic-slider-groove-mid) - var(--_sonic-slider-groove) / 2);
 	}
 
 	.sonic-slider-modulation {
@@ -307,10 +323,8 @@
 		);
 
 		position: absolute;
-		inset: calc(
-				50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-modulation-band) / 2
-			)
-			auto auto var(--_sonic-slider-modulation-start);
+		inset: calc(var(--_sonic-slider-groove-mid) - var(--_sonic-slider-modulation-band) / 2) auto
+			auto var(--_sonic-slider-modulation-start);
 		inline-size: var(--_sonic-slider-modulation-length);
 		block-size: var(--_sonic-slider-modulation-band);
 		background: var(--_sonic-slider-modulation);
@@ -319,7 +333,7 @@
 
 	[orientation='vertical'] > .sonic-slider > .sonic-slider-modulation {
 		inset: auto auto var(--_sonic-slider-modulation-start)
-			calc(50% + var(--_sonic-slider-scale-band) / 2 - var(--_sonic-slider-modulation-band) / 2);
+			calc(var(--_sonic-slider-groove-mid) - var(--_sonic-slider-modulation-band) / 2);
 		inline-size: var(--_sonic-slider-modulation-band);
 		block-size: var(--_sonic-slider-modulation-length);
 	}
@@ -433,7 +447,7 @@
 		&::after {
 			inset: var(--_sonic-slider-indicator-inset)
 				calc(50% - var(--_sonic-slider-indicator-width) / 2);
-			background: var(--_sonic-ink);
+			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(0 0 0 / calc(0.55 * var(--_sonic-relief)));
@@ -490,6 +504,7 @@
 
 		.sonic-slider {
 			--_sonic-slider-buffered: color-mix(in srgb, CanvasText 50%, GrayText);
+			--_sonic-slider-indicator: var(--_sonic-ink);
 			--_sonic-slider-scrub: CanvasText;
 		}
 

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);

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

package/dist/styles/toggle.css

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

package/dist/styles/waveform.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-waveform-size {
 	syntax: '<length>';
 	inherits: true;
@@ -64,7 +66,7 @@
 	initial-value: rgb(200 200 208);
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-waveform, .sonic-waveform) {
 		--_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
 		--_sonic-waveform-length: var(--sonic-waveform-length, 20rem);

package/dist/styles/wavestrip.css

@@ -1,3 +1,5 @@
+@layer sonic.material, sonic.control;
+
 @property --_sonic-wavestrip-size {
 	syntax: '<length>';
 	inherits: true;
@@ -82,7 +84,7 @@
 	initial-value: 48px;
 }
 
-@layer sonic {
+@layer sonic.control {
 	:is(sonic-wavestrip, .sonic-wavestrip) {
 		--_sonic-wavestrip-size: var(--sonic-wavestrip-size, 3.5rem);
 		--_sonic-wavestrip-length: var(--sonic-wavestrip-length, 16rem);

package/dist/styles/xy.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -55,6 +55,7 @@
     },
     "./controls.css": "./dist/styles/controls.css",
     "./material.css": "./dist/styles/material.css",
+    "./material/*.css": "./dist/styles/material/*.css",
     "./button.css": "./dist/styles/button.css",
     "./dial.css": "./dist/styles/dial.css",
     "./envelope.css": "./dist/styles/envelope.css",