@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/styles/wavestrip.css

@@ -0,0 +1,215 @@
+@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-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) * 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-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;
+		border-radius: calc(var(--_sonic-wavestrip-size) * 0.15);
+		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: 0 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);
+	}
+
+	.sonic-wavestrip-region {
+		inset: 0 auto 0 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 max(1px, 0.5 * var(--_sonic-unit)) Canvas;
+		}
+
+		.sonic-wavestrip-region {
+			background: none;
+			border-inline-color: var(--_sonic-marker-colour);
+		}
+	}
+}

package/dist/styles/xy.css

@@ -0,0 +1,204 @@
+@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;
+		border-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+	}
+
+	: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-star: var(--_sonic-xy-lit);
+		--_sonic-xy-star-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
+		--_sonic-xy-star-glow: 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%;
+		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;
+
+		&::before {
+			position: absolute;
+			inset: 0;
+			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;
+		}
+	}
+
+	@media (hover: hover) {
+		:not(:disabled) > .sonic-xy > .sonic-xy-puck:hover {
+			--_sonic-xy-star: var(--_sonic-xy-star-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);
+	}
+
+	: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-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-xy-field {
+			forced-color-adjust: none;
+		}
+
+		.sonic-xy-puck {
+			--_sonic-xy-star: CanvasText;
+			--_sonic-xy-star-lift: CanvasText;
+			--_sonic-xy-star-glow: 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,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -40,6 +40,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 +57,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": {},

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

package/dist/default/elements/key.js

@@ -1,144 +0,0 @@
-import { requireChild, template } from "../lib/render.js";
-import { SonicFormElement } from "./form-element.js";
-import { copyNode } from "../lib/copy-node.js";
-
-//#region src/elements/key.ts
-const renderKey = template(`
-		<button class="sonic-key" type="button"><span class="sonic-key-cap"></span></button>
-	`, HTMLButtonElement);
-const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
-var SonicKey = class extends SonicFormElement {
-	static observedAttributes = [
-		...SonicFormElement.observedAttributes,
-		"momentary",
-		"pressed",
-		"toggle",
-		"value"
-	];
-	get defaultPressed() {
-		return this.hasAttribute("pressed");
-	}
-	set defaultPressed(isPressed) {
-		this.reflect("pressed", isPressed);
-	}
-	get momentary() {
-		return this.hasAttribute("momentary");
-	}
-	set momentary(isMomentary) {
-		this.reflect("momentary", isMomentary);
-	}
-	get pressed() {
-		return this.#isDirty ? this.#pressed : this.defaultPressed;
-	}
-	set pressed(isPressed) {
-		this.#isDirty = true;
-		this.#pressed = isPressed === true;
-		this.render();
-	}
-	get toggle() {
-		return this.hasAttribute("toggle");
-	}
-	set toggle(isToggle) {
-		this.reflect("toggle", isToggle);
-	}
-	get value() {
-		return this.getAttribute("value") ?? "on";
-	}
-	set value(value) {
-		this.reflect("value", value);
-	}
-	#holder;
-	#isDirty = false;
-	#key = renderKey();
-	#pressed = false;
-	attributeChangedCallback(name) {
-		if (name === "pressed") this.#isDirty = false;
-		if (name === "disabled" && this.isDisabled()) this.#release();
-		this.render();
-	}
-	formResetCallback() {
-		this.attributeChangedCallback("pressed");
-	}
-	activate() {
-		this.#key.click();
-	}
-	connect(signal) {
-		const key = this.#key;
-		const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
-		this.upgradeProperties("defaultPressed", "momentary", "toggle", "pressed", "value");
-		this.mirrorChildren({
-			control: key,
-			copy: (originals) => {
-				cap.replaceChildren(...originals.map((original) => copyNode(original)));
-			}
-		}, signal);
-		this.render();
-		this.checkStyles(key, "key.css");
-		signal.addEventListener("abort", () => {
-			this.#release();
-		}, { once: true });
-		key.addEventListener("click", () => {
-			if (!this.toggle) return;
-			this.pressed = !this.pressed;
-			this.dispatchEvent(new Event("change", { bubbles: true }));
-		}, { signal });
-		this.#bindMomentary(key, signal);
-	}
-	focusTarget() {
-		return this.#key;
-	}
-	render() {
-		const key = this.#key;
-		key.disabled = this.isDisabled();
-		key.removeAttribute("aria-pressed");
-		if (this.toggle) key.setAttribute("aria-pressed", String(this.pressed));
-		this.toggleState("pressed", this.pressed);
-		this.forwardNaming(key, true);
-		const submitted = this.toggle && this.pressed ? this.value : null;
-		this.writeFormValue(submitted, String(this.pressed));
-	}
-	restoreState(state) {
-		if (this.toggle) this.pressed = state === "true";
-	}
-	#bindMomentary(key, signal) {
-		const releasePointer = (event) => {
-			if (event.pointerId === this.#holder) this.#release();
-		};
-		key.addEventListener("pointerdown", (event) => {
-			if (event.button !== 0 || !this.#isMomentary()) return;
-			key.setPointerCapture(event.pointerId);
-			this.#hold(event.pointerId);
-		}, { signal });
-		key.addEventListener("lostpointercapture", releasePointer, { signal });
-		key.addEventListener("pointercancel", releasePointer, { signal });
-		key.addEventListener("pointerup", releasePointer, { signal });
-		key.addEventListener("keydown", (event) => {
-			if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
-			this.#hold(event.key);
-		}, { signal });
-		key.addEventListener("keyup", (event) => {
-			if (event.key === this.#holder) this.#release();
-		}, { signal });
-		key.addEventListener("blur", () => {
-			if (typeof this.#holder === "string") this.#release();
-		}, { signal });
-	}
-	#hold(holder) {
-		if (this.isDisabled() || this.#holder !== void 0) return;
-		this.#holder = holder;
-		this.pressed = true;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#isMomentary() {
-		return this.momentary && !this.toggle;
-	}
-	#release() {
-		if (this.#holder === void 0) return;
-		this.#holder = void 0;
-		this.pressed = false;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-};
-
-//#endregion
-export { SonicKey };