@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/styles/wavestrip.css

@@ -0,0 +1,232 @@
+@property --_sonic-wavestrip-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 56px;
+}
+
+@property --_sonic-wavestrip-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 256px;
+}
+
+@property --_sonic-wavestrip-bar-pitch {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 3px;
+}
+
+@property --_sonic-wavestrip-bar-gap-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.33;
+}
+
+@property --_sonic-wavestrip-bar-radius-ratio {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 0.5;
+}
+
+@property --_sonic-wavestrip-wave {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-wavestrip-buffered {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(128 128 136);
+}
+
+@property --_sonic-wavestrip-played {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-wavestrip-scrub {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(250 210 140);
+}
+
+@property --_sonic-marker-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
+@property --_sonic-marker-step {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
+@property --_sonic-cancel-zone {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 48px;
+}
+
+@layer sonic {
+	:is(sonic-wavestrip, .sonic-wavestrip) {
+		--_sonic-wavestrip-size: var(--sonic-wavestrip-size, 3.5rem);
+		--_sonic-wavestrip-length: var(--sonic-wavestrip-length, 16rem);
+	}
+
+	:has(> .sonic-wavestrip):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-wavestrip:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-wavestrip-length);
+		block-size: var(--_sonic-wavestrip-size);
+	}
+
+	.sonic-wavestrip {
+		--_sonic-cancel-zone: var(--sonic-cancel-zone, 48px);
+		--_sonic-wavestrip-bar-pitch: var(--sonic-wavestrip-bar-pitch, 3px);
+		--_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) * 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,
+			color-mix(in oklab, var(--_sonic-ink) 30%, var(--_sonic-unlit))
+		);
+		--_sonic-wavestrip-buffered: var(
+			--sonic-buffered,
+			color-mix(in oklab, var(--_sonic-ink) 50%, var(--_sonic-unlit))
+		);
+		--_sonic-wavestrip-played: var(--_sonic-wavestrip-lit);
+		--_sonic-wavestrip-scrub: var(--sonic-scrub, color-mix(in oklab, var(--_sonic-lit) 55%, #fff));
+
+		inline-size: var(--_sonic-wavestrip-length);
+		block-size: var(--_sonic-wavestrip-size);
+		padding: var(--_sonic-wavestrip-inset);
+		container-type: size;
+		touch-action: pan-y;
+		cursor: ew-resize;
+
+		--_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);
+	}
+
+	[dimmed] > .sonic-wavestrip {
+		--_sonic-wavestrip-lit: var(--_sonic-lit-off);
+	}
+
+	:disabled > .sonic-wavestrip {
+		--_sonic-wavestrip-lit: var(--_sonic-lit-disabled);
+
+		cursor: default;
+	}
+
+	.sonic-wavestrip-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.sonic-wavestrip-markers {
+		position: absolute;
+		inset: var(--_sonic-wavestrip-inset);
+		pointer-events: none;
+	}
+
+	:is(.sonic-wavestrip-marker, .sonic-wavestrip-region) {
+		--_sonic-marker-colour: var(--_sonic-marker, var(--_sonic-marker-default));
+
+		position: absolute;
+
+		&[data-sonic-dimmed] {
+			--_sonic-marker-colour: color-mix(
+				in oklab,
+				var(--_sonic-marker, var(--_sonic-marker-default)) 45%,
+				var(--_sonic-glass)
+			);
+		}
+	}
+
+	.sonic-wavestrip-marker {
+		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 var(--_sonic-marker-ring) var(--_sonic-glass);
+	}
+
+	.sonic-wavestrip-region {
+		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);
+		border-inline: max(1px, var(--_sonic-unit)) solid
+			color-mix(in oklab, var(--_sonic-marker-colour) 55%, transparent);
+	}
+
+	/* Bare `block-start` spans the viewport; `translate` belongs to the open transition */
+	.sonic-wavestrip-readout {
+		--_sonic-wavestrip-readout-inset: calc(
+			var(--_sonic-wavestrip-inset) + var(--_sonic-wavestrip-readout-at, 0) * 100cqi
+		);
+
+		inset-inline: var(--_sonic-wavestrip-readout-inset)
+			calc(100cqi + 2 * var(--_sonic-wavestrip-inset) - var(--_sonic-wavestrip-readout-inset));
+		justify-self: center;
+		position-area: block-start center;
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */
+	@media (forced-colors: active) {
+		.sonic-wavestrip {
+			--_sonic-wavestrip-lit: Highlight;
+			--_sonic-wavestrip-wave: rgb(from GrayText r g b / 100%);
+			--_sonic-wavestrip-buffered: rgb(
+				from color-mix(in srgb, CanvasText 50%, GrayText) r g b / 100%
+			);
+			--_sonic-wavestrip-played: rgb(from var(--_sonic-wavestrip-lit) r g b / 100%);
+			--_sonic-wavestrip-scrub: rgb(from CanvasText r g b / 100%);
+		}
+
+		:is(.sonic-wavestrip-marker, .sonic-wavestrip-region) {
+			--_sonic-marker-colour: CanvasText;
+
+			forced-color-adjust: none;
+
+			&[data-sonic-dimmed] {
+				--_sonic-marker-colour: GrayText;
+			}
+		}
+
+		.sonic-wavestrip-marker {
+			background: var(--_sonic-marker-colour);
+			box-shadow: 0 0 0 var(--_sonic-marker-ring) Canvas;
+		}
+
+		.sonic-wavestrip-region {
+			background: none;
+			border-inline-color: var(--_sonic-marker-colour);
+		}
+	}
+}

package/dist/styles/xy.css

@@ -0,0 +1,241 @@
+@property --_sonic-xy-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 128px;
+}
+
+@layer sonic {
+	:is(sonic-xy, .sonic-xy) {
+		--_sonic-xy-size: var(--sonic-xy-size, 8rem);
+		--_sonic-xy-aspect-ratio: var(--sonic-xy-aspect-ratio, 1);
+	}
+
+	:has(> .sonic-xy):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-xy:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-xy-size) * var(--_sonic-xy-aspect-ratio));
+		block-size: var(--_sonic-xy-size);
+	}
+
+	.sonic-xy {
+		--_sonic-xy-puck-ratio: var(--sonic-xy-puck-ratio, 0.2);
+		--_sonic-xy-radius-ratio: var(--sonic-xy-radius-ratio, 0.06);
+		--_sonic-xy-inset-ratio: var(--sonic-xy-inset-ratio, 0.04);
+		--_sonic-unit: calc(var(--_sonic-xy-size) / 96);
+		--_sonic-xy-lit: var(--_sonic-lit);
+		--_sonic-xy-cursor: grab;
+		--_sonic-xy-puck: calc(var(--_sonic-xy-size) * var(--_sonic-xy-puck-ratio));
+		--_sonic-xy-inset: calc(var(--_sonic-xy-size) * var(--_sonic-xy-inset-ratio));
+		--_sonic-xy-travel-x: calc(100cqi - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
+		--_sonic-xy-travel-y: calc(100cqb - 2 * var(--_sonic-xy-inset) - var(--_sonic-xy-puck));
+
+		inline-size: calc(var(--_sonic-xy-size) * var(--_sonic-xy-aspect-ratio));
+		block-size: var(--_sonic-xy-size);
+		container-type: size;
+		touch-action: none;
+		cursor: crosshair;
+
+		--_sonic-glass-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+
+		border-radius: var(--_sonic-glass-radius);
+	}
+
+	:disabled > .sonic-xy {
+		--_sonic-xy-lit: var(--_sonic-lit-disabled);
+		--_sonic-xy-cursor: default;
+
+		cursor: default;
+	}
+
+	.sonic-xy-field {
+		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), 1px));
+		--_sonic-xy-x-low: min(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
+		--_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
+		--_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
+		--_sonic-xy-y-high: max(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
+
+		position: absolute;
+		inset: var(--_sonic-xy-inset);
+		pointer-events: none;
+
+		&::before,
+		&::after {
+			position: absolute;
+			content: '';
+		}
+
+		&::before {
+			inset: auto 0
+				calc(
+					var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y) +
+						(var(--_sonic-xy-puck) - var(--_sonic-xy-line)) / 2
+				);
+			block-size: var(--_sonic-xy-line);
+			background:
+				linear-gradient(
+					to right,
+					transparent
+						calc(
+							var(--_sonic-xy-x-low) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
+								sign(var(--_sonic-xy-x-low))
+						),
+					var(--_sonic-xy-lit) 0
+						calc(
+							var(--_sonic-xy-x-high) * var(--_sonic-xy-travel-x) + var(--_sonic-xy-puck) / 2 *
+								(2 - sign(1 - var(--_sonic-xy-x-high)))
+						),
+					transparent 0
+				),
+				var(--_sonic-unlit);
+		}
+
+		&::after {
+			inset: 0 auto 0
+				calc(
+					var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x) +
+						(var(--_sonic-xy-puck) - var(--_sonic-xy-line)) / 2
+				);
+			inline-size: var(--_sonic-xy-line);
+			background:
+				linear-gradient(
+					to top,
+					transparent
+						calc(
+							var(--_sonic-xy-y-low) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
+								sign(var(--_sonic-xy-y-low))
+						),
+					var(--_sonic-xy-lit) 0
+						calc(
+							var(--_sonic-xy-y-high) * var(--_sonic-xy-travel-y) + var(--_sonic-xy-puck) / 2 *
+								(2 - sign(1 - var(--_sonic-xy-y-high)))
+						),
+					transparent 0
+				),
+				var(--_sonic-unlit);
+		}
+	}
+
+	.sonic-xy-puck {
+		--_sonic-xy-puck-fill: var(--_sonic-xy-lit);
+		--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
+		--_sonic-xy-puck-bracket: transparent;
+		--_sonic-xy-puck-bracket-scale: 0.6;
+		--_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;
+
+		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%;
+		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: 25%;
+			pointer-events: none;
+			content: '';
+			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;
+		}
+
+		&::after {
+			position: absolute;
+			inset: 4%;
+			pointer-events: none;
+			content: '';
+			border: max(1px, 0.08 * var(--_sonic-xy-puck)) solid var(--_sonic-xy-puck-bracket);
+			border-block-start-color: transparent;
+			border-radius: 50%;
+			rotate: 45deg;
+			scale: var(--_sonic-xy-puck-bracket-scale);
+			transition:
+				border-color 120ms ease-out,
+				scale 120ms ease-out;
+		}
+	}
+
+	@media (hover: hover) {
+		:not(:disabled, :state(dragging)) > .sonic-xy > .sonic-xy-puck:hover {
+			--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
+		}
+	}
+
+	.sonic-xy-puck:has(> :focus-visible:not([data-sonic-pointer-focus])) {
+		--_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-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-puck-bracket: color-mix(
+			in oklab,
+			var(--_sonic-xy-lit) calc(100% * (1 - var(--_sonic-relief))),
+			transparent
+		);
+		--_sonic-xy-puck-bracket-scale: 1;
+	}
+
+	.sonic-xy-axis {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+	}
+
+	/* Restated here; one more selector makes material's lists clones for the dupes check */
+	@media (forced-colors: active) {
+		.sonic-xy {
+			--_sonic-lit: Highlight;
+			--_sonic-unlit: GrayText;
+			--_sonic-glass: Canvas;
+		}
+
+		.sonic-xy-field {
+			forced-color-adjust: none;
+		}
+
+		.sonic-xy-puck {
+			--_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;
+		}
+
+		.sonic-xy-axis {
+			forced-color-adjust: auto;
+		}
+
+		.sonic-xy-axis:focus-visible {
+			outline-offset: 2px;
+
+			&[data-sonic-pointer-focus] {
+				outline-style: none;
+			}
+		}
+	}
+}

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "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",
@@ -40,6 +38,11 @@
       "development": "./dist/dev/index.js",
       "import": "./dist/default/index.js"
     },
+    "./dat": {
+      "types": "./dist/dev/dat.d.ts",
+      "development": "./dist/dev/dat.js",
+      "import": "./dist/default/dat.js"
+    },
     "./define": {
       "types": "./dist/dev/define.d.ts",
       "development": "./dist/dev/define.js",
@@ -52,14 +55,21 @@
     },
     "./controls.css": "./dist/styles/controls.css",
     "./material.css": "./dist/styles/material.css",
+    "./button.css": "./dist/styles/button.css",
     "./dial.css": "./dist/styles/dial.css",
-    "./key.css": "./dist/styles/key.css",
+    "./envelope.css": "./dist/styles/envelope.css",
     "./led.css": "./dist/styles/led.css",
     "./meter.css": "./dist/styles/meter.css",
     "./number.css": "./dist/styles/number.css",
+    "./panel.css": "./dist/styles/panel.css",
+    "./ring.css": "./dist/styles/ring.css",
     "./screen.css": "./dist/styles/screen.css",
     "./segmented.css": "./dist/styles/segmented.css",
     "./slider.css": "./dist/styles/slider.css",
+    "./switch.css": "./dist/styles/switch.css",
+    "./waveform.css": "./dist/styles/waveform.css",
+    "./wavestrip.css": "./dist/styles/wavestrip.css",
+    "./xy.css": "./dist/styles/xy.css",
     "./skins/*.css": "./dist/skins/*.css"
   },
   "imports": {},
@@ -67,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"
   }
 }

package/dist/default/define/key.js

@@ -1,7 +0,0 @@
-import { defineOnce } from "../elements/define-once.js";
-import { SonicKey } from "../elements/key.js";
-
-//#region src/define/key.ts
-defineOnce("sonic-key", SonicKey);
-
-//#endregion