@xsynaptic/sonic-ui 0.5.0 → 0.6.1

package/dist/styles/switch.css

@@ -34,8 +34,17 @@
 		--_sonic-switch-along-x: 0;
 		--_sonic-switch-along-y: 1;
 		--_sonic-switch-pan: pan-x;
-		--_sonic-switch-metal: color-mix(in oklab, var(--_sonic-cap) 45%, #fff);
-		--_sonic-switch-metal-shade: color-mix(in oklab, var(--_sonic-cap) 80%, #000);
+		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-ink));
+		--_sonic-switch-metal: color-mix(
+			in oklab,
+			var(--_sonic-switch-cap) calc(100% - 55% * var(--_sonic-relief)),
+			#fff
+		);
+		--_sonic-switch-metal-shade: color-mix(
+			in oklab,
+			var(--_sonic-switch-cap) calc(100% - 20% * var(--_sonic-relief)),
+			#000
+		);
 
 		display: inline-grid;
 		flex-shrink: 0;
@@ -56,6 +65,7 @@
 	}
 
 	.sonic-switch-position {
+		position: relative;
 		display: grid;
 		place-items: center;
 		place-self: stretch;
@@ -84,6 +94,17 @@
 		}
 	}
 
+	.sonic-switch[data-sonic-position-count] > .sonic-switch-position::after {
+		inset-block: 0;
+	}
+
+	[orientation='horizontal']
+		> .sonic-switch[data-sonic-position-count]
+		> .sonic-switch-position::after {
+		inset-block: var(--_sonic-target-outset);
+		inset-inline: 0;
+	}
+
 	.sonic-switch-label {
 		padding: calc(var(--_sonic-switch-size) * 0.12);
 		white-space: nowrap;
@@ -200,20 +221,37 @@
 	}
 
 	.sonic-switch-bushing {
+		--_sonic-switch-bushing-shade: color-mix(
+			in oklab,
+			var(--_sonic-cap) calc(100% - 20% * var(--_sonic-relief)),
+			#000
+		);
+
 		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
 		aspect-ratio: 1;
 		pointer-events: none;
-		background: radial-gradient(
-			closest-side,
-			color-mix(in oklab, var(--_sonic-cap) 30%, #000) 0 42%,
-			var(--_sonic-switch-metal-shade) 48%,
-			var(--_sonic-cap) 70%,
-			color-mix(in oklab, var(--_sonic-cap) 75%, #fff) 88%,
-			var(--_sonic-switch-metal-shade)
+		background: var(
+			--sonic-well,
+			radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
+				var(--_sonic-switch-bushing-shade) 48%,
+				var(--_sonic-cap) 70%,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
+				var(--_sonic-switch-bushing-shade)
+			)
 		);
 		border-radius: 50%;
 		box-shadow:
-			var(--_sonic-rim),
+			0 0 0 max(1px, 0.75 * var(--_sonic-unit))
+				var(
+					--sonic-cap-edge,
+					color-mix(
+						in oklab,
+						var(--_sonic-switch-cap) calc(100% - 60% * var(--_sonic-relief)),
+						#000
+					)
+				),
 			calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y)) calc(2 * var(--_sonic-unit))
 				var(--_sonic-drop-shade);
 	}
@@ -226,27 +264,27 @@
 			background-position 90ms cubic-bezier(0.4, 0, 0.2, 1);
 		--_sonic-switch-sheen: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-switch-metal) 55%, #fff) 12%,
+			color-mix(in oklab, var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)), #fff)
+				12%,
 			var(--_sonic-switch-metal) 45%,
 			var(--_sonic-switch-metal-shade) 88%
 		);
-		--_sonic-switch-outline: max(0.5px, 0.4 * var(--_sonic-unit));
-		--_sonic-switch-rim: color-mix(in oklab, var(--_sonic-cap) 70%, #000);
+		--_sonic-switch-outline: max(1px, 0.4 * var(--_sonic-unit));
+		--_sonic-switch-rim: var(
+			--sonic-cap-edge,
+			color-mix(in oklab, var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)), #000)
+		);
 
 		position: relative;
 		z-index: 1;
 		inline-size: var(--_sonic-switch-size);
 		block-size: var(--_sonic-switch-size);
 		pointer-events: none;
-		filter: drop-shadow(var(--_sonic-switch-outline) 0 0 var(--_sonic-switch-rim))
-			drop-shadow(calc(-1 * var(--_sonic-switch-outline)) 0 0 var(--_sonic-switch-rim))
-			drop-shadow(0 var(--_sonic-switch-outline) 0 var(--_sonic-switch-rim))
-			drop-shadow(0 calc(-1 * var(--_sonic-switch-outline)) 0 var(--_sonic-switch-rim))
-			drop-shadow(
-				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-x))
-					calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y))
-					calc(1.5 * var(--_sonic-unit)) var(--_sonic-drop-shade)
-			);
+		filter: drop-shadow(
+			calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-x))
+				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y)) calc(1.5 * var(--_sonic-unit))
+				var(--_sonic-drop-shade)
+		);
 
 		@media (prefers-reduced-motion: reduce) {
 			--_sonic-switch-transition: none;
@@ -261,6 +299,7 @@
 			background: var(--_sonic-switch-sheen);
 			background-size: var(--_sonic-switch-size) var(--_sonic-switch-size);
 			border-radius: 999px;
+			box-shadow: 0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim);
 			transition: var(--_sonic-switch-transition);
 		}
 
@@ -292,7 +331,9 @@
 			background-position: calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2)
 				calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2);
 			box-shadow:
-				inset 0 0 calc(1.5 * var(--_sonic-unit)) calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / 30%),
+				inset 0 0 calc(1.5 * var(--_sonic-unit)) calc(0.4 * var(--_sonic-unit))
+					rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+				0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim),
 				var(--_sonic-focus-shadow);
 			translate: calc(
 					var(--_sonic-switch-along-x) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach)
@@ -306,6 +347,7 @@
 	}
 
 	.sonic-switch:has(> .sonic-switch-position:disabled) {
+		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-etch));
 		--_sonic-switch-metal: var(--_sonic-etch);
 		--_sonic-switch-metal-shade: var(--_sonic-etch);
 	}

package/dist/styles/waveform.css

@@ -65,12 +65,17 @@
 	}
 
 	.sonic-waveform {
-		--_sonic-waveform-inset: calc(var(--_sonic-waveform-size) * 0.06);
+		--_sonic-waveform-inset: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
+		);
 		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
 		--_sonic-waveform-line: max(1px, var(--_sonic-unit));
 		--_sonic-waveform-lit: var(--_sonic-lit);
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
-		--_sonic-waveform-wave-edge: color-mix(in oklab, var(--_sonic-waveform-lit) 45%, #000);
+		--_sonic-waveform-wave-edge: var(
+			--sonic-waveform-edge,
+			color-mix(in oklab, var(--_sonic-waveform-lit) 45%, #000)
+		);
 		--_sonic-waveform-grid: var(--_sonic-etch);
 		--_sonic-waveform-hatch: var(--_sonic-etch);
 		--_sonic-waveform-marker: var(--sonic-marker, var(--_sonic-ink));
@@ -87,7 +92,12 @@
 		overflow: hidden;
 		touch-action: pan-y;
 		cursor: grab;
-		border-radius: calc(var(--_sonic-waveform-size) * 0.08);
+
+		--_sonic-glass-radius: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio, 0.08)
+		);
+
+		border-radius: var(--_sonic-glass-radius);
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -134,13 +144,18 @@
 		inset-inline-start: var(--_sonic-waveform-inset);
 		font-size: calc(var(--_sonic-waveform-size) * var(--sonic-waveform-label-font-ratio, 0.13));
 		line-height: 1;
-		color: var(--_sonic-waveform-marker);
+		color: var(--_sonic-marker, var(--_sonic-waveform-marker));
 		white-space: nowrap;
+		text-shadow: var(--sonic-waveform-label-shadow, none);
 		pointer-events: none;
 	}
 
 	.sonic-waveform-label[data-sonic-dimmed] {
-		color: color-mix(in oklab, var(--_sonic-waveform-marker) 50%, transparent);
+		color: color-mix(
+			in oklab,
+			var(--_sonic-marker, var(--_sonic-waveform-marker)) 50%,
+			transparent
+		);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
@@ -162,6 +177,14 @@
 			forced-color-adjust: none;
 		}
 
+		.sonic-waveform-label {
+			color: CanvasText;
+
+			&[data-sonic-dimmed] {
+				color: GrayText;
+			}
+		}
+
 		.sonic-waveform-playhead {
 			background: CanvasText;
 		}

package/dist/styles/wavestrip.css

@@ -58,6 +58,12 @@
 	initial-value: 0;
 }
 
+@property --_sonic-marker-step {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
 @property --_sonic-cancel-zone {
 	syntax: '<length>';
 	inherits: true;
@@ -88,10 +94,14 @@
 		--_sonic-wavestrip-bar-gap-ratio: var(--sonic-wavestrip-bar-gap-ratio, 0.33);
 		--_sonic-wavestrip-bar-radius-ratio: var(--sonic-wavestrip-bar-radius-ratio, 0.5);
 		--_sonic-wavestrip-marker-ratio: var(--sonic-wavestrip-marker-ratio, 0.065);
-		--_sonic-wavestrip-inset: calc(var(--_sonic-wavestrip-size) * 0.1);
+		--_sonic-wavestrip-inset: calc(
+			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-inset-ratio, 0.1)
+		);
 		--_sonic-unit: calc(var(--_sonic-wavestrip-size) / 32);
 		--_sonic-wavestrip-lit: var(--_sonic-lit);
 		--_sonic-marker-size: calc(var(--_sonic-wavestrip-size) * var(--_sonic-wavestrip-marker-ratio));
+		--_sonic-marker-ring: max(1px, 0.5 * var(--_sonic-unit));
+		--_sonic-marker-step: calc(var(--_sonic-marker-size) + var(--_sonic-marker-ring));
 		--_sonic-marker-default: var(--sonic-marker, var(--_sonic-ink));
 		--_sonic-wavestrip-wave: var(
 			--sonic-wave,
@@ -110,7 +120,12 @@
 		container-type: size;
 		touch-action: pan-y;
 		cursor: ew-resize;
-		border-radius: calc(var(--_sonic-wavestrip-size) * 0.15);
+
+		--_sonic-glass-radius: calc(
+			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-radius-ratio, 0.15)
+		);
+
+		border-radius: var(--_sonic-glass-radius);
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 
@@ -151,16 +166,18 @@
 	}
 
 	.sonic-wavestrip-marker {
-		inset: 0 auto auto calc(var(--_sonic-marker-from, 0) * 100% - var(--_sonic-marker-size) / 2);
+		inset: calc(var(--_sonic-marker-lane, 0) * var(--_sonic-marker-step)) auto auto
+			calc(var(--_sonic-marker-from, 0) * 100% - var(--_sonic-marker-size) / 2);
 		inline-size: var(--_sonic-marker-size);
 		block-size: var(--_sonic-marker-size);
 		background: color-mix(in oklab, var(--_sonic-marker-colour) 85%, transparent);
 		border-radius: 50%;
-		box-shadow: 0 0 0 max(1px, 0.5 * var(--_sonic-unit)) var(--_sonic-glass);
+		box-shadow: 0 0 0 var(--_sonic-marker-ring) var(--_sonic-glass);
 	}
 
 	.sonic-wavestrip-region {
-		inset: 0 auto 0 calc(var(--_sonic-marker-from, 0) * 100%);
+		inset: calc(-1 * var(--_sonic-wavestrip-inset)) auto calc(-1 * var(--_sonic-wavestrip-inset))
+			calc(var(--_sonic-marker-from, 0) * 100%);
 		box-sizing: border-box;
 		inline-size: calc((var(--_sonic-marker-to, 0) - var(--_sonic-marker-from, 0)) * 100%);
 		background: color-mix(in oklab, var(--_sonic-marker-colour) 16%, transparent);
@@ -204,7 +221,7 @@
 
 		.sonic-wavestrip-marker {
 			background: var(--_sonic-marker-colour);
-			box-shadow: 0 0 0 max(1px, 0.5 * var(--_sonic-unit)) Canvas;
+			box-shadow: 0 0 0 var(--_sonic-marker-ring) Canvas;
 		}
 
 		.sonic-wavestrip-region {

package/dist/styles/xy.css

@@ -38,7 +38,10 @@
 		container-type: size;
 		touch-action: none;
 		cursor: crosshair;
-		border-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+
+		--_sonic-glass-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+
+		border-radius: var(--_sonic-glass-radius);
 	}
 
 	:disabled > .sonic-xy {
@@ -116,52 +119,68 @@
 		}
 	}
 
-	.sonic-xy-puck {
-		--_sonic-xy-star: var(--_sonic-xy-lit);
-		--_sonic-xy-star-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
-		--_sonic-xy-star-glow: transparent;
-
+	:is(.sonic-xy-bracket, .sonic-xy-puck) {
 		position: absolute;
 		inset: auto auto
 			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
 			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
 		inline-size: var(--_sonic-xy-puck);
 		block-size: var(--_sonic-xy-puck);
-		cursor: var(--_sonic-xy-cursor);
 		border-radius: 50%;
-		box-shadow: var(--_sonic-focus-shadow);
-		filter: drop-shadow(0 0 calc(0.1 * var(--_sonic-xy-puck)) var(--_sonic-xy-star-glow));
-		transition:
-			box-shadow 120ms ease-out,
-			filter 120ms ease-out;
+	}
+
+	.sonic-xy-bracket {
+		--_sonic-bracket-size: var(--_sonic-xy-puck);
+	}
+
+	.sonic-xy-puck {
+		--_sonic-xy-puck-fill: var(--_sonic-xy-lit);
+		--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
+		--_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
+		--_sonic-xy-puck-glow: transparent;
+		--_sonic-xy-puck-ring: 0 0 transparent;
+
+		cursor: var(--_sonic-xy-cursor);
+		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
+		transition: filter 120ms ease-out;
 
 		&::before {
 			position: absolute;
-			inset: 0;
+			inset: 25%;
 			pointer-events: none;
 			content: '';
-			background: var(--_sonic-xy-star);
-			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M50 0C52 38 62 48 100 50C62 52 52 62 50 100C48 62 38 52 0 50C38 48 48 38 50 0Z'/%3E%3C/svg%3E")
-				center / 100% 100% no-repeat;
-			transition: background-color 120ms ease-out;
+			background: var(--_sonic-xy-puck-fill);
+			border: max(1px, 0.08 * var(--_sonic-xy-puck)) solid var(--_sonic-xy-puck-edge);
+			border-radius: 50%;
+			box-shadow: var(--_sonic-xy-puck-ring);
+			transition:
+				background-color 120ms ease-out,
+				border-color 120ms ease-out,
+				box-shadow 120ms ease-out;
 		}
 	}
 
 	@media (hover: hover) {
-		:not(:disabled) > .sonic-xy > .sonic-xy-puck:hover {
-			--_sonic-xy-star: var(--_sonic-xy-star-lift);
+		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
+			--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
 		}
 	}
 
-	/* The glow goes on the puck, since a custom property cannot travel up from the part */
 	.sonic-xy-puck:has(> :focus-visible:not([data-sonic-pointer-focus])) {
-		--_sonic-xy-star: var(--_sonic-xy-star-lift);
-		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+		--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
+		--_sonic-xy-puck-ring:
+			0 0 0 max(2px, 0.08 * var(--_sonic-xy-puck)) var(--_sonic-glass),
+			0 0 0 max(4px, 0.16 * var(--_sonic-xy-puck)) var(--_sonic-focus);
 	}
 
 	:state(dragging) > .sonic-xy > .sonic-xy-puck {
-		--_sonic-xy-star: var(--_sonic-xy-star-lift);
-		--_sonic-xy-star-glow: color-mix(in oklab, var(--_sonic-xy-lit) 25%, transparent);
+		--_sonic-xy-puck-fill: var(--_sonic-glass);
+		--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
+		--_sonic-xy-puck-glow: color-mix(
+			in oklab,
+			var(--_sonic-xy-lit) calc(45% * var(--_sonic-relief)),
+			transparent
+		);
 	}
 
 	.sonic-xy-axis {
@@ -175,6 +194,7 @@
 		.sonic-xy {
 			--_sonic-lit: Highlight;
 			--_sonic-unlit: GrayText;
+			--_sonic-glass: Canvas;
 		}
 
 		.sonic-xy-field {
@@ -182,9 +202,10 @@
 		}
 
 		.sonic-xy-puck {
-			--_sonic-xy-star: CanvasText;
-			--_sonic-xy-star-lift: CanvasText;
-			--_sonic-xy-star-glow: transparent;
+			--_sonic-xy-puck-fill: CanvasText;
+			--_sonic-xy-puck-lift: CanvasText;
+			--_sonic-xy-puck-glow: transparent;
+			--_sonic-xy-puck-ring: 0 0 transparent;
 
 			forced-color-adjust: none;
 		}

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
     "web-components",
     "audio",
-    "knob",
     "dial",
     "slider",
-    "fader",
     "synth"
   ],
   "homepage": "https://github.com/xsynaptic/sonic-ui#readme",
@@ -79,13 +77,12 @@
     "dist"
   ],
   "devDependencies": {
-    "publint": "^0.3.24",
+    "publint": "^0.3.25",
     "tsdown": "^0.23.0",
     "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
     "check-types": "tsc --noEmit"
   }
 }