@xsynaptic/sonic-ui 0.2.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @xsynaptic/sonic-ui
 
-Native custom elements for audio interfaces: dials, sliders, keys, a segmented switch, a peak meter and a screen panel. Each control renders in the light DOM, drawn in CSS, skinned with `--sonic-*` custom properties. No framework, no runtime dependencies.
+Native custom elements for audio interfaces. Each control renders in the light DOM, drawn in CSS, skinned with `--sonic-*` custom properties. No framework, no runtime dependencies.
 
 Early and unstable: any 0.x release may break the API.
 
@@ -34,7 +34,7 @@ The styles sit in `@layer sonic`, so list it after your resets. A skin (`slate`,
 - **Attributes and properties** reflect each other: `dial.max = 200` writes `max="200"`. `value` and the key's `pressed` are the live state and never write their attribute, as on native inputs.
 - **Events:** `change` when a control settles, and `input` while a dial or slider moves; both bubble.
 - **Formatting:** `formatValue` sets the text the readout and assistive technology read, and `parseValue` reads typed entry back. `formatPercent` and `parsePercent` from the package root show 0 to 1 as a percentage.
-- **Forms:** the dial, slider, key and switch submit under their `name`, reset, take a `<label>`, and follow a disabled `<fieldset>`, as native inputs do.
+- **Forms:** controls that hold a value submit under their `name`, reset, take a `<label>`, and follow a disabled `<fieldset>`, as native inputs do.
 
 ## Browsers
 

package/dist/default/define/number.js

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

package/dist/default/define.js

@@ -1,5 +1,6 @@
 import "./define/dial.js";
 import "./define/key.js";
 import "./define/meter.js";
+import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";

package/dist/default/elements/dial.js

@@ -1,10 +1,11 @@
-import { template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
+import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicRangeElement } from "./range-element.js";
 
 //#region src/elements/dial.ts
 const renderDial = template(`
 		<div class="sonic-dial" role="slider" tabindex="0">
+			<div class="sonic-dial-scale" aria-hidden="true"></div>
 			<div class="sonic-dial-notches"></div>
 			<div class="sonic-dial-ring"></div>
 			<div class="sonic-dial-modulation"></div>
@@ -25,7 +26,17 @@ const renderDial = template(`
 	`, HTMLDivElement);
 const fallbackTravelPx = 160;
 var SonicDial = class extends SonicRangeElement {
-	static observedAttributes = [...SonicRangeElement.observedAttributes, "modulation"];
+	static observedAttributes = [
+		...SonicRangeElement.observedAttributes,
+		"endless",
+		"modulation"
+	];
+	get endless() {
+		return this.hasAttribute("endless");
+	}
+	set endless(isEndless) {
+		this.reflect("endless", isEndless);
+	}
 	get modulation() {
 		return this.numberAttribute("modulation", 0);
 	}
@@ -34,12 +45,12 @@ var SonicDial = class extends SonicRangeElement {
 	}
 	#dial = renderDial();
 	connectedCallback() {
-		this.upgradeProperties("modulation");
+		this.upgradeProperties("endless", "modulation");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		const dial = this.#dial;
-		this.appendOnce(dial);
+		this.bindScale(dial, requireChild(dial, ".sonic-dial-scale", HTMLDivElement), signal);
 		this.render();
 		this.checkStyles(dial, "dial.css");
 		this.bindGestures(dial, signal, () => ({
@@ -53,16 +64,19 @@ var SonicDial = class extends SonicRangeElement {
 	render() {
 		const dial = this.#dial;
 		const positions = this.positions();
-		const modulated = this.fraction(this.value + this.modulation);
-		const value = this.fraction(this.value);
-		dial.style.setProperty("--_sonic-dial-value", String(value));
+		const [modulationFrom, modulationTo] = this.modulationFractions(this.endless ? 0 : this.modulation);
+		dial.style.setProperty("--_sonic-dial-value", String(this.fraction(this.value)));
 		dial.style.setProperty("--_sonic-dial-origin", String(this.originFraction()));
-		dial.style.setProperty("--_sonic-dial-modulation-from", String(Math.min(value, modulated)));
-		dial.style.setProperty("--_sonic-dial-modulation-to", String(Math.max(value, modulated)));
+		dial.style.setProperty("--_sonic-dial-modulation-from", String(modulationFrom));
+		dial.style.setProperty("--_sonic-dial-modulation-to", String(modulationTo));
 		if (positions === void 0) dial.style.removeProperty("--_sonic-dial-positions");
 		else dial.style.setProperty("--_sonic-dial-positions", String(positions));
+		this.renderScale();
 		this.renderAria(dial);
 	}
+	wraps() {
+		return this.endless;
+	}
 };
 
 //#endregion

package/dist/default/elements/key.js

@@ -1,4 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
 
@@ -10,11 +11,19 @@ const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
 var SonicKey = class extends SonicFormElement {
 	static observedAttributes = [
 		...SonicFormElement.observedAttributes,
+		"busy",
 		"momentary",
 		"pressed",
+		"soft-disabled",
 		"toggle",
 		"value"
 	];
+	get busy() {
+		return this.hasAttribute("busy");
+	}
+	set busy(isBusy) {
+		this.reflect("busy", isBusy);
+	}
 	get defaultPressed() {
 		return this.hasAttribute("pressed");
 	}
@@ -35,6 +44,12 @@ var SonicKey = class extends SonicFormElement {
 		this.#pressed = isPressed === true;
 		this.render();
 	}
+	get softDisabled() {
+		return this.hasAttribute("soft-disabled");
+	}
+	set softDisabled(isSoftDisabled) {
+		this.reflect("soft-disabled", isSoftDisabled);
+	}
 	get toggle() {
 		return this.hasAttribute("toggle");
 	}
@@ -53,7 +68,7 @@ var SonicKey = class extends SonicFormElement {
 	#pressed = false;
 	attributeChangedCallback(name) {
 		if (name === "pressed") this.#isDirty = false;
-		if (name === "disabled" && this.isDisabled()) this.#release();
+		if (this.isDisabled() || this.#isSoftDisabled()) this.#release();
 		this.render();
 	}
 	formResetCallback() {
@@ -65,7 +80,7 @@ var SonicKey = class extends SonicFormElement {
 	connect(signal) {
 		const key = this.#key;
 		const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
-		this.upgradeProperties("defaultPressed", "momentary", "toggle", "pressed", "value");
+		this.upgradeProperties("busy", "defaultPressed", "momentary", "softDisabled", "toggle", "pressed", "value");
 		this.mirrorChildren({
 			control: key,
 			copy: (originals) => {
@@ -77,7 +92,12 @@ var SonicKey = class extends SonicFormElement {
 		signal.addEventListener("abort", () => {
 			this.#release();
 		}, { once: true });
-		key.addEventListener("click", () => {
+		key.addEventListener("click", (event) => {
+			if (this.#isSoftDisabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
 			if (!this.toggle) return;
 			this.pressed = !this.pressed;
 			this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -90,6 +110,8 @@ var SonicKey = class extends SonicFormElement {
 	render() {
 		const key = this.#key;
 		key.disabled = this.isDisabled();
+		writeAttribute(key, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
+		writeAttribute(key, "aria-busy", this.busy ? "true" : void 0);
 		key.removeAttribute("aria-pressed");
 		if (this.toggle) key.setAttribute("aria-pressed", String(this.pressed));
 		this.toggleState("pressed", this.pressed);
@@ -124,7 +146,7 @@ var SonicKey = class extends SonicFormElement {
 		}, { signal });
 	}
 	#hold(holder) {
-		if (this.isDisabled() || this.#holder !== void 0) return;
+		if (this.isDisabled() || this.#isSoftDisabled() || this.#holder !== void 0) return;
 		this.#holder = holder;
 		this.pressed = true;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -132,6 +154,9 @@ var SonicKey = class extends SonicFormElement {
 	#isMomentary() {
 		return this.momentary && !this.toggle;
 	}
+	#isSoftDisabled() {
+		return this.softDisabled && !this.isDisabled();
+	}
 	#release() {
 		if (this.#holder === void 0) return;
 		this.#holder = void 0;

package/dist/default/elements/meter.js

@@ -1,5 +1,7 @@
 import { template } from "../lib/render.js";
 import { SonicElement } from "./sonic-element.js";
+import { parseNumberList } from "../lib/number-list.js";
+import { linearTaper } from "../lib/taper.js";
 
 //#region src/elements/meter.ts
 const renderMeter = template(`
@@ -14,20 +16,30 @@ const holdMs = 1500;
 function toDecibels(amplitude) {
 	return 20 * Math.log10(Math.abs(amplitude));
 }
+function lightsBelow(lights, zone) {
+	return `calc(${lights.map((threshold) => `sign(max(0, var(--_sonic-meter-${zone}-from) - (${String(threshold)})))`).join(" + ")})`;
+}
 var SonicMeter = class extends SonicElement {
 	static observedAttributes = [
 		"disabled",
+		"lights",
 		"max",
-		"min"
+		"min",
+		"origin",
+		"scale"
 	];
 	get level() {
 		return this.#level;
 	}
 	set level(amplitude) {
 		if (!Number.isFinite(amplitude)) return;
-		const decibels = toDecibels(amplitude);
 		const now = performance.now();
 		this.#level = amplitude;
+		if (this.scale === "linear") {
+			this.#render(now);
+			return;
+		}
+		const decibels = toDecibels(amplitude);
 		this.#target = decibels;
 		this.#bar = Math.max(this.#bar, decibels);
 		if (decibels >= this.#peak) {
@@ -38,6 +50,12 @@ var SonicMeter = class extends SonicElement {
 		this.#render(now);
 		this.#schedule(now);
 	}
+	get lights() {
+		return parseNumberList(this.getAttribute("lights"));
+	}
+	set lights(thresholds) {
+		this.reflect("lights", thresholds?.join(" "));
+	}
 	get max() {
 		return this.numberAttribute("max", 0);
 	}
@@ -56,24 +74,39 @@ var SonicMeter = class extends SonicElement {
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get origin() {
+		return this.optionalNumberAttribute("origin");
+	}
+	set origin(value) {
+		this.reflect("origin", value);
+	}
+	get scale() {
+		return this.getAttribute("scale") === "linear" ? "linear" : "db";
+	}
+	set scale(scale) {
+		this.reflect("scale", scale);
+	}
 	#bar = -Infinity;
 	#clipAt = -Infinity;
 	#frame;
 	#lastFrame;
 	#level = 0;
+	#lights;
 	#meter = renderMeter();
 	#peak = -Infinity;
 	#peakAt = -Infinity;
 	#target = -Infinity;
 	attributeChangedCallback() {
 		const now = performance.now();
+		this.#renderLights();
 		this.#render(now);
 		this.#schedule(now);
 	}
 	connect(signal) {
 		const now = performance.now();
-		this.upgradeProperties("max", "min", "orientation", "level");
+		this.upgradeProperties("lights", "max", "min", "orientation", "origin", "scale", "level");
 		this.appendOnce(this.#meter);
+		this.#renderLights();
 		this.#render(now);
 		this.#schedule(now);
 		this.checkStyles(this.#meter, "meter.css");
@@ -83,21 +116,25 @@ var SonicMeter = class extends SonicElement {
 			this.#lastFrame = void 0;
 		}, { once: true });
 	}
-	#fraction(decibels) {
-		const min = this.min;
-		const range = this.max - min;
-		return range > 0 ? Math.min(1, Math.max(0, (decibels - min) / range)) : 0;
+	#fraction(level) {
+		const lights = this.#lights;
+		if (lights) return lights.filter((threshold) => threshold <= level).length / lights.length;
+		return linearTaper(this.min, this.max).position(level);
 	}
 	#isSettled(now) {
+		if (this.scale === "linear") return true;
 		const floor = this.min;
 		return this.#bar <= Math.max(this.#target, floor) && this.#peak <= Math.max(this.#bar, floor) && now - this.#clipAt >= holdMs;
 	}
 	#render(now) {
 		const meter = this.#meter;
+		const origin = this.origin === void 0 ? 0 : this.#fraction(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
 		meter.style.setProperty("--_sonic-meter-max", String(this.max));
-		if (this.disabled) {
-			meter.style.setProperty("--_sonic-meter-level", "0");
+		meter.style.setProperty("--_sonic-meter-origin", String(origin));
+		if (this.disabled || this.scale === "linear") {
+			const level = this.disabled ? origin : this.#fraction(this.#level);
+			meter.style.setProperty("--_sonic-meter-level", String(level));
 			meter.style.setProperty("--_sonic-meter-peak", "0");
 			meter.style.setProperty("--_sonic-meter-clipped", "0");
 			return;
@@ -106,6 +143,23 @@ var SonicMeter = class extends SonicElement {
 		meter.style.setProperty("--_sonic-meter-peak", String(this.#fraction(this.#peak)));
 		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
 	}
+	#renderLights() {
+		const meter = this.#meter;
+		const lights = this.lights;
+		this.#lights = lights;
+		this.toggleState("ladder", lights !== void 0);
+		if (!lights) {
+			for (const name of [
+				"count",
+				"hot-lights",
+				"clip-lights"
+			]) meter.style.removeProperty(`--_sonic-meter-${name}`);
+			return;
+		}
+		meter.style.setProperty("--_sonic-meter-count", String(lights.length));
+		meter.style.setProperty("--_sonic-meter-hot-lights", lightsBelow(lights, "hot"));
+		meter.style.setProperty("--_sonic-meter-clip-lights", lightsBelow(lights, "clip"));
+	}
 	#schedule(now) {
 		if (this.#frame !== void 0 || !this.isConnected || this.#isSettled(now)) return;
 		if (this.#lastFrame === void 0) this.#lastFrame = now;

package/dist/default/elements/number.js

@@ -0,0 +1,46 @@
+import { requireChild, template } from "../lib/render.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicRangeElement } from "./range-element.js";
+
+//#region src/elements/number.ts
+const renderNumber = template(`
+		<div class="sonic-number" role="spinbutton" tabindex="0">
+			<span aria-hidden="true" class="sonic-number-value"></span>
+			<input
+				autocomplete="off"
+				class="sonic-number-entry"
+				enterkeyhint="done"
+				hidden
+				spellcheck="false"
+				type="text"
+			/>
+		</div>
+	`, HTMLDivElement);
+const fallbackTravelPx = 160;
+var SonicNumber = class extends SonicRangeElement {
+	#number = renderNumber();
+	#digits = requireChild(this.#number, ".sonic-number-value", HTMLSpanElement);
+	connect(signal) {
+		const number = this.#number;
+		this.appendOnce(number);
+		this.render();
+		this.checkStyles(number, "number.css");
+		this.bindGestures(number, signal, () => ({
+			position: (event) => -event.clientY,
+			travelPx: readPxProperty(getComputedStyle(number), "--_sonic-number-travel", fallbackTravelPx)
+		}));
+	}
+	controlRole() {
+		return "spinbutton";
+	}
+	focusTarget() {
+		return this.#number;
+	}
+	render() {
+		this.#digits.textContent = this.valueText();
+		this.renderAria(this.#number);
+	}
+};
+
+//#endregion
+export { SonicNumber };